diff --git a/change/@microsoft-fast-foundation-b7f2acd3-f038-4dbe-bbfe-7375c8476e2e.json b/change/@microsoft-fast-foundation-b7f2acd3-f038-4dbe-bbfe-7375c8476e2e.json new file mode 100644 index 00000000000..865c2193061 --- /dev/null +++ b/change/@microsoft-fast-foundation-b7f2acd3-f038-4dbe-bbfe-7375c8476e2e.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "update attribute and observable change handlers with internal logic to be protected instead of private", + "packageName": "@microsoft/fast-foundation", + "email": "chhol@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/web-components/fast-foundation/docs/api-report.md b/packages/web-components/fast-foundation/docs/api-report.md index af735598884..47810954ddc 100644 --- a/packages/web-components/fast-foundation/docs/api-report.md +++ b/packages/web-components/fast-foundation/docs/api-report.md @@ -98,32 +98,68 @@ export class AnchoredRegion extends FoundationElement { // @internal (undocumented) adoptedCallback(): void; anchor: string; + // (undocumented) + protected anchorChanged(): void; anchorElement: HTMLElement | null; + // (undocumented) + protected anchorElementChanged(): void; autoUpdateMode: AutoUpdateMode; + // (undocumented) + protected autoUpdateModeChanged(prevMode: AutoUpdateMode, newMode: AutoUpdateMode): void; // @internal (undocumented) connectedCallback(): void; // @internal (undocumented) disconnectedCallback(): void; fixedPlacement: boolean; + // (undocumented) + protected fixedPlacementChanged(): void; horizontalDefaultPosition: HorizontalPosition; + // (undocumented) + protected horizontalDefaultPositionChanged(): void; horizontalInset: boolean; + // (undocumented) + protected horizontalInsetChanged(): void; horizontalPosition: AnchoredRegionPositionLabel | undefined; horizontalPositioningMode: AxisPositioningMode; + // (undocumented) + protected horizontalPositioningModeChanged(): void; horizontalScaling: AxisScalingMode; + // (undocumented) + protected horizontalScalingChanged(): void; horizontalThreshold: number; + // (undocumented) + protected horizontalThresholdChanged(): void; horizontalViewportLock: boolean; + // (undocumented) + protected horizontalViewportLockChanged(): void; // @internal initialLayoutComplete: boolean; update: () => void; verticalDefaultPosition: VerticalPosition; + // (undocumented) + protected verticalDefaultPositionChanged(): void; verticalInset: boolean; + // (undocumented) + protected verticalInsetChanged(): void; verticalPosition: AnchoredRegionPositionLabel | undefined; verticalPositioningMode: AxisPositioningMode; + // (undocumented) + protected verticalPositioningModeChanged(): void; verticalScaling: AxisScalingMode; + // (undocumented) + protected verticalScalingChanged(): void; verticalThreshold: number; + // (undocumented) + protected verticalThresholdChanged(): void; verticalViewportLock: boolean; + // (undocumented) + protected verticalViewportLockChanged(): void; viewport: string; + // (undocumented) + protected viewportChanged(): void; viewportElement: HTMLElement | null; + // (undocumented) + protected viewportElementChanged(): void; } // @public @@ -226,19 +262,25 @@ export class BaseProgress extends FoundationElement { // @internal (undocumented) connectedCallback(): void; max: number; + // (undocumented) + protected maxChanged(): void; min: number; + // (undocumented) + protected minChanged(): void; paused: boolean; // @internal percentComplete: number; value: number | null; - } + // (undocumented) + protected valueChanged(): void; +} // @public export class Breadcrumb extends FoundationElement { // @internal (undocumented) slottedBreadcrumbItems: HTMLElement[]; // (undocumented) - slottedBreadcrumbItemsChanged(): void; + protected slottedBreadcrumbItemsChanged(): void; } // Warning: (ae-different-release-tags) This symbol has another declaration with a different release tag @@ -280,13 +322,25 @@ export class Button extends FormAssociatedButton { // @internal (undocumented) disconnectedCallback(): void; formaction: string; + // (undocumented) + protected formactionChanged(): void; formenctype: string; + // (undocumented) + protected formenctypeChanged(): void; formId: string; formmethod: string; + // (undocumented) + protected formmethodChanged(): void; formnovalidate: boolean; + // (undocumented) + protected formnovalidateChanged(): void; formtarget: "_self" | "_blank" | "_parent" | "_top"; + // (undocumented) + protected formtargetChanged(): void; type: "submit" | "reset" | "button"; - } + // (undocumented) + protected typeChanged(previous: "submit" | "reset" | "button" | void, next: "submit" | "reset" | "button"): void; +} // @internal export interface Button extends StartEnd, DelegatesARIAButton { @@ -303,6 +357,8 @@ export class Calendar extends FoundationElement { dateFormatter: DateFormatter; dateInString(date: Date | string, datesString: string): boolean; dayFormat: DayFormat; + // (undocumented) + protected dayFormatChanged(): void; disabledDates: string; getDayClassNames(date: CalendarDateInfo, todayString?: string): string; getDays(info?: CalendarInfo, minWeeks?: number): CalendarDateInfo[][]; @@ -311,15 +367,23 @@ export class Calendar extends FoundationElement { handleDateSelect(event: Event, day: CalendarDateInfo): void; handleKeydown(event: KeyboardEvent, date: CalendarDateInfo): boolean; locale: string; + // (undocumented) + protected localeChanged(): void; minWeeks: number; month: number; monthFormat: MonthFormat; + // (undocumented) + protected monthFormatChanged(): void; readonly: boolean; selectedDates: string; weekdayFormat: WeekdayFormat; + // (undocumented) + protected weekdayFormatChanged(): void; year: number; yearFormat: YearFormat; - } + // (undocumented) + protected yearFormatChanged(): void; +} // @public export const calendarCellTemplate: (context: ElementDefinitionContext, todayString: string) => ItemViewTemplate; @@ -404,7 +468,9 @@ export class Checkbox extends FormAssociatedCheckbox { // @internal (undocumented) keypressHandler: (e: KeyboardEvent) => void; readOnly: boolean; - } + // (undocumented) + protected readOnlyChanged(): void; +} // @public export type CheckboxOptions = FoundationElementDefinition & { @@ -464,6 +530,8 @@ export class Combobox extends FormAssociatedCombobox { listboxId: string; // @internal maxHeight: number; + // (undocumented) + protected maxHeightChanged(): void; open: boolean; // (undocumented) protected openChanged(): void; @@ -622,6 +690,8 @@ export class DataGrid extends FoundationElement { constructor(); cellItemTemplate?: ItemViewTemplate; columnDefinitions: ColumnDefinition[] | null; + // (undocumented) + protected columnDefinitionsChanged(): void; // @internal (undocumented) connectedCallback(): void; // @internal @@ -632,7 +702,11 @@ export class DataGrid extends FoundationElement { focusRowIndex: number; static generateColumns: (row: object) => ColumnDefinition[]; generateHeader: GenerateHeaderOptions | "none" | "default" | "sticky"; + // (undocumented) + protected generateHeaderChanged(): void; gridTemplateColumns: string; + // (undocumented) + protected gridTemplateColumnsChanged(): void; // @internal (undocumented) handleFocus(e: FocusEvent): void; // @internal (undocumented) @@ -643,23 +717,31 @@ export class DataGrid extends FoundationElement { handleRowFocus(e: Event): void; headerCellItemTemplate?: ItemViewTemplate; noTabbing: boolean; + // (undocumented) + protected noTabbingChanged(): void; // @internal rowElements: HTMLElement[]; rowElementTag: string; rowItemTemplate: ItemViewTemplate; rowsData: object[]; + // (undocumented) + protected rowsDataChanged(): void; } // @public export class DataGridCell extends FoundationElement { cellType: DataGridCellTypes | "default" | "columnheader" | "rowheader"; columnDefinition: ColumnDefinition | null; + // (undocumented) + protected columnDefinitionChanged(oldValue: ColumnDefinition | null, newValue: ColumnDefinition | null): void; // @internal (undocumented) connectedCallback(): void; // @internal (undocumented) disconnectedCallback(): void; gridColumn: string; // (undocumented) + protected gridColumnChanged(): void; + // (undocumented) handleFocusin(e: FocusEvent): void; // (undocumented) handleFocusout(e: FocusEvent): void; @@ -701,6 +783,8 @@ export class DataGridRow extends FoundationElement { focusColumnIndex: number; gridTemplateColumns: string; // (undocumented) + protected gridTemplateColumnsChanged(): void; + // (undocumented) handleCellFocus(e: Event): void; // (undocumented) handleFocusout(e: FocusEvent): void; @@ -710,8 +794,12 @@ export class DataGridRow extends FoundationElement { // @internal isActiveRow: boolean; rowData: object | null; + // (undocumented) + protected rowDataChanged(): void; rowIndex: number; rowType: DataGridRowTypes | "default" | "header" | "sticky-header"; + // (undocumented) + protected rowTypeChanged(): void; // @internal (undocumented) slottedCellElements: HTMLElement[]; } @@ -1003,6 +1091,8 @@ export class Dialog extends FoundationElement { modal: boolean; show(): void; trapFocus: boolean; + // (undocumented) + protected trapFocusChanged: () => void; } // @public @@ -1599,6 +1689,8 @@ export class Menu extends FoundationElement { readonly isNestedMenu: () => boolean; // @internal (undocumented) items: HTMLSlotElement; + // (undocumented) + protected itemsChanged(oldValue: HTMLElement[], newValue: HTMLElement[]): void; } // @beta @@ -1610,6 +1702,8 @@ export type menuConfigs = "bottom" | "bottom-fill" | "tallest" | "tallest-fill" // @public export class MenuItem extends FoundationElement { checked: boolean; + // (undocumented) + protected checkedChanged(oldValue: boolean, newValue: boolean): void; // @internal (undocumented) connectedCallback(): void; // @internal @@ -1618,6 +1712,8 @@ export class MenuItem extends FoundationElement { // @internal (undocumented) disconnectedCallback(): void; expanded: boolean; + // (undocumented) + protected expandedChanged(oldValue: boolean): void; // @internal (undocumented) handleMenuItemClick: (e: MouseEvent) => boolean; // @internal (undocumented) @@ -1766,15 +1862,23 @@ export class Picker extends FormAssociatedPicker { // @internal (undocumented) connectedCallback(): void; defaultListItemTemplate?: ViewTemplate; + // (undocumented) + protected defaultListItemTemplateChanged(): void; defaultMenuOptionTemplate?: ViewTemplate; // (undocumented) + protected defaultMenuOptionTemplateChanged(): void; + // (undocumented) disconnectedCallback(): void; // @internal filteredOptionsList: string[]; + // (undocumented) + protected filteredOptionsListChanged(): void; filterQuery: boolean; filterSelected: boolean; // @internal flyoutOpen: boolean; + // (undocumented) + protected flyoutOpenChanged(): void; // @public focus(): void; handleFocusIn(e: FocusEvent): boolean; @@ -1793,6 +1897,8 @@ export class Picker extends FormAssociatedPicker { listElement: PickerList; listItemContentsTemplate: ViewTemplate; listItemTemplate: ViewTemplate; + // (undocumented) + protected listItemTemplateChanged(): void; loadingText: string; maxSelected: number | undefined; // @internal @@ -1807,14 +1913,22 @@ export class Picker extends FormAssociatedPicker { menuId: string; menuOptionContentsTemplate: ViewTemplate; menuOptionTemplate: ViewTemplate; + // (undocumented) + protected menuOptionTemplateChanged(): void; menuPlacement: menuConfigs; + // (undocumented) + protected menuPlacementChanged(): void; // @internal menuTag: string; noSuggestionsText: string; options: string; + // (undocumented) + protected optionsChanged(): void; optionsList: string[]; placeholder: string; query: string; + // (undocumented) + protected queryChanged(): void; // @internal region: AnchoredRegion; // @internal (undocumented) @@ -1822,7 +1936,11 @@ export class Picker extends FormAssociatedPicker { // @internal selectedListTag: string; selection: string; + // (undocumented) + protected selectionChanged(): void; showLoading: boolean; + // (undocumented) + protected showLoadingChanged(): void; // @internal showNoOptions: boolean; suggestionsAvailableText: string; @@ -1837,6 +1955,8 @@ export class PickerListItem extends FoundationElement { // @internal (undocumented) connectedCallback(): void; contentsTemplate: ViewTemplate; + // (undocumented) + protected contentsTemplateChanged(): void; // @internal (undocumented) disconnectedCallback(): void; // (undocumented) @@ -1880,6 +2000,8 @@ export class PickerMenuOption extends FoundationElement { // @internal (undocumented) connectedCallback(): void; contentsTemplate: ViewTemplate; + // (undocumented) + protected contentsTemplateChanged(): void; // @internal (undocumented) disconnectedCallback(): void; // (undocumented) @@ -1951,7 +2073,9 @@ export class Radio extends FormAssociatedRadio implements RadioControl { keypressHandler: (e: KeyboardEvent) => boolean | void; name: string; readOnly: boolean; - } + // (undocumented) + protected readOnlyChanged(): void; +} // @public export type RadioControl = Pick; @@ -1966,6 +2090,8 @@ export class RadioGroup extends FoundationElement { connectedCallback(): void; disabled: boolean; // (undocumented) + protected disabledChanged(): void; + // (undocumented) disconnectedCallback(): void; // @internal (undocumented) focusOutHandler: (e: FocusEvent) => boolean | void; @@ -1976,8 +2102,12 @@ export class RadioGroup extends FoundationElement { protected nameChanged(): void; orientation: Orientation | "horizontal" | "vertical"; readOnly: boolean; + // (undocumented) + protected readOnlyChanged(): void; // @internal (undocumented) slottedRadioButtons: HTMLElement[]; + // (undocumented) + protected slottedRadioButtonsChanged(oldValue: unknown, newValue: HTMLElement[]): void; value: string; // (undocumented) protected valueChanged(): void; @@ -2102,6 +2232,8 @@ export type ScrollEasing = "linear" | "ease-in" | "ease-out" | "ease-in-out" | s // @public export class Search extends FormAssociatedSearch { autofocus: boolean; + // (undocumented) + protected autofocusChanged(): void; // @internal (undocumented) connectedCallback(): void; // @internal @@ -2114,16 +2246,32 @@ export class Search extends FormAssociatedSearch { // @internal handleTextInput(): void; list: string; + // (undocumented) + protected listChanged(): void; maxlength: number; + // (undocumented) + protected maxlengthChanged(): void; minlength: number; + // (undocumented) + protected minlengthChanged(): void; pattern: string; + // (undocumented) + protected patternChanged(): void; placeholder: string; + // (undocumented) + protected placeholderChanged(): void; readOnly: boolean; + // (undocumented) + protected readOnlyChanged(): void; // @internal root: HTMLDivElement; size: number; + // (undocumented) + protected sizeChanged(): void; spellcheck: boolean; - } + // (undocumented) + protected spellcheckChanged(): void; +} // @internal export interface Search extends StartEnd, DelegatesARIASearch { @@ -2160,6 +2308,8 @@ export class Select extends FormAssociatedSelect { listboxId: string; // @internal maxHeight: number; + // (undocumented) + protected maxHeightChanged(): void; open: boolean; // (undocumented) protected openChanged(): void; @@ -2262,6 +2412,8 @@ export class Slider extends FormAssociatedSlider implements SliderConfiguration // @internal (undocumented) position: string; readOnly: boolean; + // (undocumented) + protected readOnlyChanged(): void; step: number; // @internal (undocumented) stepMultiplier: number; @@ -2311,6 +2463,8 @@ export class SliderLabel extends FoundationElement { handleChange(source: any, propertyName: string): void; hideMark: boolean; position: string; + // (undocumented) + protected positionChanged(): void; // @internal (undocumented) positionStyle: string; // @internal (undocumented) @@ -2396,7 +2550,9 @@ export class Switch extends FormAssociatedSwitch { // @internal (undocumented) keypressHandler: (e: KeyboardEvent) => void; readOnly: boolean; - } + // (undocumented) + protected readOnlyChanged(): void; +} // @public export type SwitchOptions = FoundationElementDefinition & { @@ -2476,6 +2632,8 @@ export const tabTemplate: FoundationElementTemplate>; // @public export class TextArea extends FormAssociatedTextArea { autofocus: boolean; + // (undocumented) + protected autofocusChanged(): void; cols: number; // @internal control: HTMLTextAreaElement; @@ -2487,15 +2645,25 @@ export class TextArea extends FormAssociatedTextArea { // @internal (undocumented) handleTextInput: () => void; list: string; + // (undocumented) + protected listChanged(): void; maxlength: number; + // (undocumented) + protected maxlengthChanged(): void; minlength: number; + // (undocumented) + protected minlengthChanged(): void; name: string; placeholder: string; readOnly: boolean; + // (undocumented) + protected readOnlyChanged(): void; resize: TextAreaResize | "none" | "both" | "horizontal" | "vertical"; rows: number; spellcheck: boolean; - } + // (undocumented) + protected spellcheckChanged(): void; +} // @internal export interface TextArea extends DelegatesARIATextbox { @@ -2519,6 +2687,8 @@ export const textAreaTemplate: FoundationElementTemplate> // @public export class TextField extends FormAssociatedTextField { autofocus: boolean; + // (undocumented) + protected autofocusChanged(): void; // @internal (undocumented) connectedCallback(): void; // @internal @@ -2530,15 +2700,33 @@ export class TextField extends FormAssociatedTextField { // @internal handleTextInput(): void; list: string; + // (undocumented) + protected listChanged(): void; maxlength: number; + // (undocumented) + protected maxlengthChanged(): void; minlength: number; + // (undocumented) + protected minlengthChanged(): void; pattern: string; + // (undocumented) + protected patternChanged(): void; placeholder: string; + // (undocumented) + protected placeholderChanged(): void; readOnly: boolean; + // (undocumented) + protected readOnlyChanged(): void; size: number; + // (undocumented) + protected sizeChanged(): void; spellcheck: boolean; + // (undocumented) + protected spellcheckChanged(): void; type: TextFieldType | "email" | "password" | "tel" | "text" | "url"; - } + // (undocumented) + protected typeChanged(): void; +} // @internal export interface TextField extends StartEnd, DelegatesARIATextbox { @@ -2605,7 +2793,11 @@ export const toolbarTemplate: FoundationElementTemplate, T // @public export class Tooltip extends FoundationElement { anchor: string; + // (undocumented) + protected anchorChanged(): void; anchorElement: HTMLElement | null; + // (undocumented) + protected anchorElementChanged(oldValue: HTMLElement | null): void; autoUpdateMode: AutoUpdateMode; // (undocumented) connectedCallback(): void; @@ -2626,6 +2818,8 @@ export class Tooltip extends FoundationElement { horizontalScaling: AxisScalingMode; horizontalViewportLock: boolean; position: TooltipPosition | "top" | "right" | "bottom" | "left" | "start" | "end" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "top-start" | "top-end" | "bottom-start" | "bottom-end"; + // (undocumented) + protected positionChanged(): void; // @internal region: AnchoredRegion; // @internal (undocumented) @@ -2641,8 +2835,12 @@ export class Tooltip extends FoundationElement { verticalViewportLock: boolean; // @internal viewportElement: HTMLElement | null; + // (undocumented) + protected viewportElementChanged(): void; visible: boolean; - } + // (undocumented) + protected visibleChanged(): void; +} // @public export enum TooltipPosition { @@ -2691,6 +2889,8 @@ export class TreeItem extends FoundationElement { // @internal expandCollapseButton: HTMLDivElement; expanded: boolean; + // (undocumented) + protected expandedChanged(): void; // @internal focusable: boolean; static focusItem(el: HTMLElement): void; @@ -2703,12 +2903,16 @@ export class TreeItem extends FoundationElement { readonly isNestedItem: () => boolean; // @internal items: HTMLElement[]; + // (undocumented) + protected itemsChanged(oldValue: unknown, newValue: HTMLElement[]): void; // @internal nested: boolean; // @internal (undocumented) renderCollapsedChildren: boolean; selected: boolean; - } + // (undocumented) + protected selectedChanged(): void; +} // @internal export interface TreeItem extends StartEnd { @@ -2742,6 +2946,8 @@ export class TreeView extends FoundationElement { renderCollapsedNodes: boolean; // @internal slottedTreeItems: HTMLElement[]; + // (undocumented) + protected slottedTreeItemsChanged(): void; // @internal treeView: HTMLElement; } diff --git a/packages/web-components/fast-foundation/src/anchored-region/README.md b/packages/web-components/fast-foundation/src/anchored-region/README.md index 9007c79528f..3a0d33bff1c 100644 --- a/packages/web-components/fast-foundation/src/anchored-region/README.md +++ b/packages/web-components/fast-foundation/src/anchored-region/README.md @@ -113,10 +113,28 @@ export const myAnchoredRegion = AnchoredRegion.compose({ #### Methods -| Name | Privacy | Description | Parameters | Return | Inherited From | -| ----------------- | --------- | ----------- | ---------- | ------ | ----------------- | -| `templateChanged` | protected | | | `void` | FoundationElement | -| `stylesChanged` | protected | | | `void` | FoundationElement | +| Name | Privacy | Description | Parameters | Return | Inherited From | +| ---------------------------------- | --------- | ----------- | --------------------------------------------------- | ------ | ----------------- | +| `anchorChanged` | protected | | | `void` | | +| `viewportChanged` | protected | | | `void` | | +| `horizontalPositioningModeChanged` | protected | | | `void` | | +| `horizontalDefaultPositionChanged` | protected | | | `void` | | +| `horizontalViewportLockChanged` | protected | | | `void` | | +| `horizontalInsetChanged` | protected | | | `void` | | +| `horizontalThresholdChanged` | protected | | | `void` | | +| `horizontalScalingChanged` | protected | | | `void` | | +| `verticalPositioningModeChanged` | protected | | | `void` | | +| `verticalDefaultPositionChanged` | protected | | | `void` | | +| `verticalViewportLockChanged` | protected | | | `void` | | +| `verticalInsetChanged` | protected | | | `void` | | +| `verticalThresholdChanged` | protected | | | `void` | | +| `verticalScalingChanged` | protected | | | `void` | | +| `fixedPlacementChanged` | protected | | | `void` | | +| `autoUpdateModeChanged` | protected | | `prevMode: AutoUpdateMode, newMode: AutoUpdateMode` | `void` | | +| `anchorElementChanged` | protected | | | `void` | | +| `viewportElementChanged` | protected | | | `void` | | +| `templateChanged` | protected | | | `void` | FoundationElement | +| `stylesChanged` | protected | | | `void` | FoundationElement | #### Attributes diff --git a/packages/web-components/fast-foundation/src/anchored-region/anchored-region.ts b/packages/web-components/fast-foundation/src/anchored-region/anchored-region.ts index 00161476ec2..0ed778b99ec 100644 --- a/packages/web-components/fast-foundation/src/anchored-region/anchored-region.ts +++ b/packages/web-components/fast-foundation/src/anchored-region/anchored-region.ts @@ -86,7 +86,7 @@ export class AnchoredRegion extends FoundationElement { */ @attr public anchor: string = ""; - private anchorChanged(): void { + protected anchorChanged(): void { if (this.initialLayoutComplete) { this.anchorElement = this.getAnchor(); } @@ -101,7 +101,7 @@ export class AnchoredRegion extends FoundationElement { */ @attr public viewport: string = ""; - private viewportChanged(): void { + protected viewportChanged(): void { if (this.initialLayoutComplete) { this.viewportElement = this.getViewport(); } @@ -119,7 +119,7 @@ export class AnchoredRegion extends FoundationElement { */ @attr({ attribute: "horizontal-positioning-mode" }) public horizontalPositioningMode: AxisPositioningMode = "uncontrolled"; - private horizontalPositioningModeChanged(): void { + protected horizontalPositioningModeChanged(): void { this.requestReset(); } @@ -132,7 +132,7 @@ export class AnchoredRegion extends FoundationElement { */ @attr({ attribute: "horizontal-default-position" }) public horizontalDefaultPosition: HorizontalPosition = "unset"; - private horizontalDefaultPositionChanged(): void { + protected horizontalDefaultPositionChanged(): void { this.updateForAttributeChange(); } @@ -145,7 +145,7 @@ export class AnchoredRegion extends FoundationElement { */ @attr({ attribute: "horizontal-viewport-lock", mode: "boolean" }) public horizontalViewportLock: boolean = false; - private horizontalViewportLockChanged(): void { + protected horizontalViewportLockChanged(): void { this.updateForAttributeChange(); } @@ -158,7 +158,7 @@ export class AnchoredRegion extends FoundationElement { */ @attr({ attribute: "horizontal-inset", mode: "boolean" }) public horizontalInset: boolean = false; - private horizontalInsetChanged(): void { + protected horizontalInsetChanged(): void { this.updateForAttributeChange(); } @@ -172,7 +172,7 @@ export class AnchoredRegion extends FoundationElement { */ @attr({ attribute: "horizontal-threshold" }) public horizontalThreshold: number; - private horizontalThresholdChanged(): void { + protected horizontalThresholdChanged(): void { this.updateForAttributeChange(); } @@ -185,7 +185,7 @@ export class AnchoredRegion extends FoundationElement { */ @attr({ attribute: "horizontal-scaling" }) public horizontalScaling: AxisScalingMode = "content"; - private horizontalScalingChanged(): void { + protected horizontalScalingChanged(): void { this.updateForAttributeChange(); } @@ -201,7 +201,7 @@ export class AnchoredRegion extends FoundationElement { */ @attr({ attribute: "vertical-positioning-mode" }) public verticalPositioningMode: AxisPositioningMode = "uncontrolled"; - private verticalPositioningModeChanged(): void { + protected verticalPositioningModeChanged(): void { this.requestReset(); } @@ -214,7 +214,7 @@ export class AnchoredRegion extends FoundationElement { */ @attr({ attribute: "vertical-default-position" }) public verticalDefaultPosition: VerticalPosition = "unset"; - private verticalDefaultPositionChanged(): void { + protected verticalDefaultPositionChanged(): void { this.updateForAttributeChange(); } @@ -227,7 +227,7 @@ export class AnchoredRegion extends FoundationElement { */ @attr({ attribute: "vertical-viewport-lock", mode: "boolean" }) public verticalViewportLock: boolean = false; - private verticalViewportLockChanged(): void { + protected verticalViewportLockChanged(): void { this.updateForAttributeChange(); } @@ -240,7 +240,7 @@ export class AnchoredRegion extends FoundationElement { */ @attr({ attribute: "vertical-inset", mode: "boolean" }) public verticalInset: boolean = false; - private verticalInsetChanged(): void { + protected verticalInsetChanged(): void { this.updateForAttributeChange(); } @@ -254,7 +254,7 @@ export class AnchoredRegion extends FoundationElement { */ @attr({ attribute: "vertical-threshold" }) public verticalThreshold: number; - private verticalThresholdChanged(): void { + protected verticalThresholdChanged(): void { this.updateForAttributeChange(); } @@ -267,7 +267,7 @@ export class AnchoredRegion extends FoundationElement { */ @attr({ attribute: "vertical-scaling" }) public verticalScaling: AxisScalingMode = "content"; - private verticalScalingChanged(): void { + protected verticalScalingChanged(): void { this.updateForAttributeChange(); } @@ -282,7 +282,7 @@ export class AnchoredRegion extends FoundationElement { */ @attr({ attribute: "fixed-placement", mode: "boolean" }) public fixedPlacement: boolean = false; - private fixedPlacementChanged(): void { + protected fixedPlacementChanged(): void { if ( (this as FoundationElement).$fastController.isConnected && this.initialLayoutComplete @@ -300,7 +300,7 @@ export class AnchoredRegion extends FoundationElement { */ @attr({ attribute: "auto-update-mode" }) public autoUpdateMode: AutoUpdateMode = "anchor"; - private autoUpdateModeChanged( + protected autoUpdateModeChanged( prevMode: AutoUpdateMode, newMode: AutoUpdateMode ): void { @@ -325,7 +325,7 @@ export class AnchoredRegion extends FoundationElement { */ @observable public anchorElement: HTMLElement | null = null; - private anchorElementChanged(): void { + protected anchorElementChanged(): void { this.requestReset(); } @@ -336,7 +336,7 @@ export class AnchoredRegion extends FoundationElement { */ @observable public viewportElement: HTMLElement | null = null; - private viewportElementChanged(): void { + protected viewportElementChanged(): void { if ( (this as FoundationElement).$fastController.isConnected && this.initialLayoutComplete diff --git a/packages/web-components/fast-foundation/src/breadcrumb/README.md b/packages/web-components/fast-foundation/src/breadcrumb/README.md index ecd548352ff..1edf5f2d12f 100644 --- a/packages/web-components/fast-foundation/src/breadcrumb/README.md +++ b/packages/web-components/fast-foundation/src/breadcrumb/README.md @@ -119,7 +119,7 @@ This component is built with the expectation that focus is delegated to the anch | Name | Privacy | Description | Parameters | Return | Inherited From | | ------------------------------- | --------- | ----------- | ---------- | ------ | ----------------- | -| `slottedBreadcrumbItemsChanged` | public | | | | | +| `slottedBreadcrumbItemsChanged` | protected | | | | | | `templateChanged` | protected | | | `void` | FoundationElement | | `stylesChanged` | protected | | | `void` | FoundationElement | diff --git a/packages/web-components/fast-foundation/src/breadcrumb/breadcrumb.ts b/packages/web-components/fast-foundation/src/breadcrumb/breadcrumb.ts index bb51170472b..a248a229367 100644 --- a/packages/web-components/fast-foundation/src/breadcrumb/breadcrumb.ts +++ b/packages/web-components/fast-foundation/src/breadcrumb/breadcrumb.ts @@ -13,7 +13,7 @@ export class Breadcrumb extends FoundationElement { */ @observable public slottedBreadcrumbItems: HTMLElement[]; - public slottedBreadcrumbItemsChanged() { + protected slottedBreadcrumbItemsChanged() { if (this.$fastController.isConnected) { if ( this.slottedBreadcrumbItems === undefined || diff --git a/packages/web-components/fast-foundation/src/button/README.md b/packages/web-components/fast-foundation/src/button/README.md index 222e542d25e..bd2dd1cb8e8 100644 --- a/packages/web-components/fast-foundation/src/button/README.md +++ b/packages/web-components/fast-foundation/src/button/README.md @@ -87,10 +87,16 @@ This component is built with the expectation that focus is delegated to the butt #### Methods -| Name | Privacy | Description | Parameters | Return | Inherited From | -| ----------------- | --------- | ----------- | ---------- | ------ | ----------------- | -| `templateChanged` | protected | | | `void` | FoundationElement | -| `stylesChanged` | protected | | | `void` | FoundationElement | +| Name | Privacy | Description | Parameters | Return | Inherited From | +| ----------------------- | --------- | ----------- | ------------------------------------------------------------------------------------------ | ------ | ----------------- | +| `formactionChanged` | protected | | | `void` | | +| `formenctypeChanged` | protected | | | `void` | | +| `formmethodChanged` | protected | | | `void` | | +| `formnovalidateChanged` | protected | | | `void` | | +| `formtargetChanged` | protected | | | `void` | | +| `typeChanged` | protected | | `previous: "submit" or "reset" or "button" or void, next: "submit" or "reset" or "button"` | `void` | | +| `templateChanged` | protected | | | `void` | FoundationElement | +| `stylesChanged` | protected | | | `void` | FoundationElement | #### Attributes diff --git a/packages/web-components/fast-foundation/src/button/button.ts b/packages/web-components/fast-foundation/src/button/button.ts index 1fd8ff81a78..6dc760833d0 100644 --- a/packages/web-components/fast-foundation/src/button/button.ts +++ b/packages/web-components/fast-foundation/src/button/button.ts @@ -50,7 +50,7 @@ export class Button extends FormAssociatedButton { */ @attr public formaction: string; - private formactionChanged(): void { + protected formactionChanged(): void { if (this.proxy instanceof HTMLInputElement) { this.proxy.formAction = this.formaction; } @@ -65,7 +65,7 @@ export class Button extends FormAssociatedButton { */ @attr public formenctype: string; - private formenctypeChanged(): void { + protected formenctypeChanged(): void { if (this.proxy instanceof HTMLInputElement) { this.proxy.formEnctype = this.formenctype; } @@ -80,7 +80,7 @@ export class Button extends FormAssociatedButton { */ @attr public formmethod: string; - private formmethodChanged(): void { + protected formmethodChanged(): void { if (this.proxy instanceof HTMLInputElement) { this.proxy.formMethod = this.formmethod; } @@ -95,7 +95,7 @@ export class Button extends FormAssociatedButton { */ @attr({ mode: "boolean" }) public formnovalidate: boolean; - private formnovalidateChanged(): void { + protected formnovalidateChanged(): void { if (this.proxy instanceof HTMLInputElement) { this.proxy.formNoValidate = this.formnovalidate; } @@ -110,7 +110,7 @@ export class Button extends FormAssociatedButton { */ @attr public formtarget: "_self" | "_blank" | "_parent" | "_top"; - private formtargetChanged(): void { + protected formtargetChanged(): void { if (this.proxy instanceof HTMLInputElement) { this.proxy.formTarget = this.formtarget; } @@ -125,7 +125,7 @@ export class Button extends FormAssociatedButton { */ @attr public type: "submit" | "reset" | "button"; - private typeChanged( + protected typeChanged( previous: "submit" | "reset" | "button" | void, next: "submit" | "reset" | "button" ): void { diff --git a/packages/web-components/fast-foundation/src/calendar/calendar.ts b/packages/web-components/fast-foundation/src/calendar/calendar.ts index 54b0d8aaa23..82db725bbba 100644 --- a/packages/web-components/fast-foundation/src/calendar/calendar.ts +++ b/packages/web-components/fast-foundation/src/calendar/calendar.ts @@ -97,7 +97,7 @@ export class Calendar extends FoundationElement { */ @attr public locale: string = "en-US"; - private localeChanged(): void { + protected localeChanged(): void { this.dateFormatter.locale = this.locale; } @@ -121,7 +121,7 @@ export class Calendar extends FoundationElement { */ @attr({ attribute: "day-format", mode: "fromView" }) public dayFormat: DayFormat = "numeric"; - private dayFormatChanged(): void { + protected dayFormatChanged(): void { this.dateFormatter.dayFormat = this.dayFormat; } @@ -131,7 +131,7 @@ export class Calendar extends FoundationElement { */ @attr({ attribute: "weekday-format", mode: "fromView" }) public weekdayFormat: WeekdayFormat = "short"; - private weekdayFormatChanged(): void { + protected weekdayFormatChanged(): void { this.dateFormatter.weekdayFormat = this.weekdayFormat; } @@ -141,7 +141,7 @@ export class Calendar extends FoundationElement { */ @attr({ attribute: "month-format", mode: "fromView" }) public monthFormat: MonthFormat = "long"; - private monthFormatChanged(): void { + protected monthFormatChanged(): void { this.dateFormatter.monthFormat = this.monthFormat; } @@ -151,7 +151,7 @@ export class Calendar extends FoundationElement { */ @attr({ attribute: "year-format", mode: "fromView" }) public yearFormat: YearFormat = "numeric"; - private yearFormatChanged(): void { + protected yearFormatChanged(): void { this.dateFormatter.yearFormat = this.yearFormat; } diff --git a/packages/web-components/fast-foundation/src/checkbox/README.md b/packages/web-components/fast-foundation/src/checkbox/README.md index b2a9ffeb1b0..423960a36b7 100644 --- a/packages/web-components/fast-foundation/src/checkbox/README.md +++ b/packages/web-components/fast-foundation/src/checkbox/README.md @@ -98,6 +98,7 @@ export const myCheckbox = Checkbox.compose({ | Name | Privacy | Description | Parameters | Return | Inherited From | | ----------------- | --------- | ----------- | ---------- | ------ | ----------------- | +| `readOnlyChanged` | protected | | | `void` | | | `templateChanged` | protected | | | `void` | FoundationElement | | `stylesChanged` | protected | | | `void` | FoundationElement | diff --git a/packages/web-components/fast-foundation/src/checkbox/checkbox.ts b/packages/web-components/fast-foundation/src/checkbox/checkbox.ts index aa73195806d..a1f0a942463 100644 --- a/packages/web-components/fast-foundation/src/checkbox/checkbox.ts +++ b/packages/web-components/fast-foundation/src/checkbox/checkbox.ts @@ -27,7 +27,7 @@ export class Checkbox extends FormAssociatedCheckbox { */ @attr({ attribute: "readonly", mode: "boolean" }) public readOnly: boolean; // Map to proxy element - private readOnlyChanged(): void { + protected readOnlyChanged(): void { if (this.proxy instanceof HTMLInputElement) { this.proxy.readOnly = this.readOnly; } diff --git a/packages/web-components/fast-foundation/src/combobox/README.md b/packages/web-components/fast-foundation/src/combobox/README.md index f83eb4f177c..6b04601e557 100644 --- a/packages/web-components/fast-foundation/src/combobox/README.md +++ b/packages/web-components/fast-foundation/src/combobox/README.md @@ -103,31 +103,32 @@ See [listbox-option](/docs/components/listbox-option) for more information. #### Fields -| Name | Privacy | Type | Default | Description | Inherited From | -| ------------------- | --------- | ----------------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | -| `autocomplete` | public | `ComboboxAutocomplete or "inline" or "list" or "both" or "none" or undefined` | | The autocomplete attribute. | | -| `filteredOptions` | public | `ListboxOption[]` | `[]` | The collection of currently filtered options. | | -| `open` | public | `boolean` | `false` | The open attribute. | | -| `options` | public | `ListboxOption[]` | | The list of options. | Listbox | -| `placeholder` | public | `string` | | Sets the placeholder value of the element, generally used to provide a hint to the user. | | -| `positionAttribute` | public | `SelectPosition` | | The placement for the listbox when the combobox is open. | | -| `position` | public | `SelectPosition` | | The current state of the calculated position of the listbox. | | -| `value` | public | | | The value property. | | -| `proxy` | | | | | FormAssociatedCombobox | -| `length` | public | `number` | | The number of options. | Listbox | -| `typeAheadExpired` | protected | | | | Listbox | -| `disabled` | public | `boolean` | | The disabled state of the listbox. | Listbox | -| `multiple` | public | `boolean` | | Indicates if the listbox is in multi-selection mode. | Listbox | -| `selectedIndex` | public | `number` | `-1` | The index of the selected option. | Listbox | -| `selectedOptions` | public | `ListboxOption[]` | `[]` | A collection of the selected options. | Listbox | -| `$presentation` | public | `ComponentPresentation or null` | | A property which resolves the ComponentPresentation instance for the current component. | FoundationElement | -| `template` | public | `ElementViewTemplate or void or null` | | Sets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition. | FoundationElement | -| `styles` | public | `ElementStyles or void or null` | | Sets the default styles for the element instance. When undefined, the element will attempt to resolve default styles from the associated presentation or custom element definition. | FoundationElement | +| Name | Privacy | Type | Default | Description | Inherited From | +| ------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------ | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | +| `autocomplete` | public | `or ComboboxAutocomplete or "inline" or "list" or "both" or "none" or undefined` | | The autocomplete attribute. | | +| `filteredOptions` | public | `ListboxOption[]` | `[]` | The collection of currently filtered options. | | +| `open` | public | `boolean` | `false` | The open attribute. | | +| `options` | public | `ListboxOption[]` | | The list of options. | Listbox | +| `placeholder` | public | `string` | | Sets the placeholder value of the element, generally used to provide a hint to the user. | | +| `positionAttribute` | public | `SelectPosition` | | The placement for the listbox when the combobox is open. | | +| `position` | public | `SelectPosition` | | The current state of the calculated position of the listbox. | | +| `value` | public | | | The value property. | | +| `proxy` | | | | | FormAssociatedCombobox | +| `length` | public | `number` | | The number of options. | Listbox | +| `typeAheadExpired` | protected | | | | Listbox | +| `disabled` | public | `boolean` | | The disabled state of the listbox. | Listbox | +| `multiple` | public | `boolean` | | Indicates if the listbox is in multi-selection mode. | Listbox | +| `selectedIndex` | public | `number` | `-1` | The index of the selected option. | Listbox | +| `selectedOptions` | public | `ListboxOption[]` | `[]` | A collection of the selected options. | Listbox | +| `$presentation` | public | `ComponentPresentation or null` | | A property which resolves the ComponentPresentation instance for the current component. | FoundationElement | +| `template` | public | `ElementViewTemplate or void or null` | | Sets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition. | FoundationElement | +| `styles` | public | `ElementStyles or void or null` | | Sets the default styles for the element instance. When undefined, the element will attempt to resolve default styles from the associated presentation or custom element definition. | FoundationElement | #### Methods | Name | Privacy | Description | Parameters | Return | Inherited From | | -------------------- | --------- | -------------------------------------------------------------------------- | ---------- | ------ | ----------------- | +| `maxHeightChanged` | protected | | | `void` | | | `openChanged` | protected | | | | | | `positionChanged` | protected | | | | | | `filterOptions` | public | Filter available options by text value. | | `void` | | diff --git a/packages/web-components/fast-foundation/src/combobox/combobox.ts b/packages/web-components/fast-foundation/src/combobox/combobox.ts index fc3db7761b6..d7fd11cb8ed 100644 --- a/packages/web-components/fast-foundation/src/combobox/combobox.ts +++ b/packages/web-components/fast-foundation/src/combobox/combobox.ts @@ -42,7 +42,13 @@ export class Combobox extends FormAssociatedCombobox { * HTML Attribute: autocomplete */ @attr({ attribute: "autocomplete", mode: "fromView" }) - autocomplete: ComboboxAutocomplete | "inline" | "list" | "both" | "none" | undefined; + public autocomplete: + | ComboboxAutocomplete + | "inline" + | "list" + | "both" + | "none" + | undefined; /** * Reference to the internal text input element. @@ -118,7 +124,7 @@ export class Combobox extends FormAssociatedCombobox { */ @observable public maxHeight: number = 0; - private maxHeightChanged(): void { + protected maxHeightChanged(): void { if (this.listbox) { this.listbox.style.setProperty("--max-height", `${this.maxHeight}px`); } diff --git a/packages/web-components/fast-foundation/src/data-grid/README.md b/packages/web-components/fast-foundation/src/data-grid/README.md index 97482daa0f6..12039761a56 100644 --- a/packages/web-components/fast-foundation/src/data-grid/README.md +++ b/packages/web-components/fast-foundation/src/data-grid/README.md @@ -116,13 +116,15 @@ export const myDataGrid = DataGrid.compose({ #### Methods -| Name | Privacy | Description | Parameters | Return | Inherited From | -| ----------------- | --------- | ----------- | ------------------ | ------ | ----------------- | -| `handleFocusin` | public | | `e: FocusEvent` | `void` | | -| `handleFocusout` | public | | `e: FocusEvent` | `void` | | -| `handleKeydown` | public | | `e: KeyboardEvent` | `void` | | -| `templateChanged` | protected | | | `void` | FoundationElement | -| `stylesChanged` | protected | | | `void` | FoundationElement | +| Name | Privacy | Description | Parameters | Return | Inherited From | +| ------------------------- | --------- | ----------- | ------------------------------------------------------------------------ | ------ | ----------------- | +| `gridColumnChanged` | protected | | | `void` | | +| `columnDefinitionChanged` | protected | | `oldValue: ColumnDefinition or null, newValue: ColumnDefinition or null` | `void` | | +| `handleFocusin` | public | | `e: FocusEvent` | `void` | | +| `handleFocusout` | public | | `e: FocusEvent` | `void` | | +| `handleKeydown` | public | | `e: KeyboardEvent` | `void` | | +| `templateChanged` | protected | | | `void` | FoundationElement | +| `stylesChanged` | protected | | | `void` | FoundationElement | #### Attributes @@ -160,13 +162,16 @@ export const myDataGrid = DataGrid.compose({ #### Methods -| Name | Privacy | Description | Parameters | Return | Inherited From | -| ----------------- | --------- | ----------- | ------------------ | ------ | ----------------- | -| `handleFocusout` | public | | `e: FocusEvent` | `void` | | -| `handleCellFocus` | public | | `e: Event` | `void` | | -| `handleKeydown` | public | | `e: KeyboardEvent` | `void` | | -| `templateChanged` | protected | | | `void` | FoundationElement | -| `stylesChanged` | protected | | | `void` | FoundationElement | +| Name | Privacy | Description | Parameters | Return | Inherited From | +| ---------------------------- | --------- | ----------- | ------------------ | ------ | ----------------- | +| `gridTemplateColumnsChanged` | protected | | | `void` | | +| `rowTypeChanged` | protected | | | `void` | | +| `rowDataChanged` | protected | | | `void` | | +| `handleFocusout` | public | | `e: FocusEvent` | `void` | | +| `handleCellFocus` | public | | `e: Event` | `void` | | +| `handleKeydown` | public | | `e: KeyboardEvent` | `void` | | +| `templateChanged` | protected | | | `void` | FoundationElement | +| `stylesChanged` | protected | | | `void` | FoundationElement | #### Attributes @@ -214,10 +219,15 @@ export const myDataGrid = DataGrid.compose({ #### Methods -| Name | Privacy | Description | Parameters | Return | Inherited From | -| ----------------- | --------- | ----------- | ---------- | ------ | ----------------- | -| `templateChanged` | protected | | | `void` | FoundationElement | -| `stylesChanged` | protected | | | `void` | FoundationElement | +| Name | Privacy | Description | Parameters | Return | Inherited From | +| ---------------------------- | --------- | ----------- | ---------- | ------ | ----------------- | +| `noTabbingChanged` | protected | | | `void` | | +| `generateHeaderChanged` | protected | | | `void` | | +| `gridTemplateColumnsChanged` | protected | | | `void` | | +| `rowsDataChanged` | protected | | | `void` | | +| `columnDefinitionsChanged` | protected | | | `void` | | +| `templateChanged` | protected | | | `void` | FoundationElement | +| `stylesChanged` | protected | | | `void` | FoundationElement | #### Attributes diff --git a/packages/web-components/fast-foundation/src/data-grid/data-grid-cell.ts b/packages/web-components/fast-foundation/src/data-grid/data-grid-cell.ts index eb54faf64e1..626d2f1d624 100644 --- a/packages/web-components/fast-foundation/src/data-grid/data-grid-cell.ts +++ b/packages/web-components/fast-foundation/src/data-grid/data-grid-cell.ts @@ -68,7 +68,7 @@ export class DataGridCell extends FoundationElement { */ @attr({ attribute: "grid-column" }) public gridColumn: string; - private gridColumnChanged(): void { + protected gridColumnChanged(): void { if (this.$fastController.isConnected) { this.updateCellStyle(); } @@ -89,7 +89,7 @@ export class DataGridCell extends FoundationElement { */ @observable public columnDefinition: ColumnDefinition | null = null; - private columnDefinitionChanged( + protected columnDefinitionChanged( oldValue: ColumnDefinition | null, newValue: ColumnDefinition | null ): void { diff --git a/packages/web-components/fast-foundation/src/data-grid/data-grid-row.ts b/packages/web-components/fast-foundation/src/data-grid/data-grid-row.ts index 899fa366955..2d69c0407b7 100644 --- a/packages/web-components/fast-foundation/src/data-grid/data-grid-row.ts +++ b/packages/web-components/fast-foundation/src/data-grid/data-grid-row.ts @@ -32,7 +32,7 @@ export class DataGridRow extends FoundationElement { */ @attr({ attribute: "grid-template-columns" }) public gridTemplateColumns: string; - private gridTemplateColumnsChanged(): void { + protected gridTemplateColumnsChanged(): void { if (this.$fastController.isConnected) { this.updateRowStyle(); } @@ -48,7 +48,7 @@ export class DataGridRow extends FoundationElement { @attr({ attribute: "row-type" }) public rowType: DataGridRowTypes | "default" | "header" | "sticky-header" = DataGridRowTypes.default; - private rowTypeChanged(): void { + protected rowTypeChanged(): void { if (this.$fastController.isConnected) { this.updateItemTemplate(); } @@ -61,7 +61,7 @@ export class DataGridRow extends FoundationElement { */ @observable public rowData: object | null = null; - private rowDataChanged(): void { + protected rowDataChanged(): void { if (this.rowData !== null && this.isActiveRow) { this.refocusOnLoad = true; return; diff --git a/packages/web-components/fast-foundation/src/data-grid/data-grid.ts b/packages/web-components/fast-foundation/src/data-grid/data-grid.ts index d9836db30e9..be17d9dd304 100644 --- a/packages/web-components/fast-foundation/src/data-grid/data-grid.ts +++ b/packages/web-components/fast-foundation/src/data-grid/data-grid.ts @@ -137,7 +137,7 @@ export class DataGrid extends FoundationElement { */ @attr({ attribute: "no-tabbing", mode: "boolean" }) public noTabbing: boolean = false; - private noTabbingChanged(): void { + protected noTabbingChanged(): void { if (this.$fastController.isConnected) { if (this.noTabbing) { this.setAttribute("tabIndex", "-1"); @@ -163,7 +163,7 @@ export class DataGrid extends FoundationElement { @attr({ attribute: "generate-header" }) public generateHeader: GenerateHeaderOptions | "none" | "default" | "sticky" = GenerateHeaderOptions.default; - private generateHeaderChanged(): void { + protected generateHeaderChanged(): void { if (this.$fastController.isConnected) { this.toggleGeneratedHeader(); } @@ -178,7 +178,7 @@ export class DataGrid extends FoundationElement { */ @attr({ attribute: "grid-template-columns" }) public gridTemplateColumns: string; - private gridTemplateColumnsChanged(): void { + protected gridTemplateColumnsChanged(): void { if (this.$fastController.isConnected) { this.updateRowIndexes(); } @@ -191,7 +191,7 @@ export class DataGrid extends FoundationElement { */ @observable public rowsData: object[] = []; - private rowsDataChanged(): void { + protected rowsDataChanged(): void { if (this.columnDefinitions === null && this.rowsData.length > 0) { this.columnDefinitions = DataGrid.generateColumns(this.rowsData[0]); } @@ -207,7 +207,7 @@ export class DataGrid extends FoundationElement { */ @observable public columnDefinitions: ColumnDefinition[] | null = null; - private columnDefinitionsChanged(): void { + protected columnDefinitionsChanged(): void { if (this.columnDefinitions === null) { this.generatedGridTemplateColumns = ""; return; diff --git a/packages/web-components/fast-foundation/src/dialog/README.md b/packages/web-components/fast-foundation/src/dialog/README.md index bfad4347740..e8929c93a2a 100644 --- a/packages/web-components/fast-foundation/src/dialog/README.md +++ b/packages/web-components/fast-foundation/src/dialog/README.md @@ -62,17 +62,18 @@ export const myDialog = Dialog.compose({ #### Fields -| Name | Privacy | Type | Default | Description | Inherited From | -| ----------------- | ------- | ------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | -| `modal` | public | `boolean` | `false` | Indicates the element is modal. When modal, user mouse interaction will be limited to the contents of the element by a modal overlay. Clicks on the overlay will cause the dialog to emit a "dismiss" event. | | -| `hidden` | public | `boolean` | `false` | The hidden state of the element. | | -| `trapFocus` | public | `boolean` | `true` | Indicates that the dialog should trap focus. | | -| `ariaDescribedby` | public | `string` | | The id of the element describing the dialog. | | -| `ariaLabelledby` | public | `string` | | The id of the element labeling the dialog. | | -| `ariaLabel` | public | `string` | | The label surfaced to assistive technologies. | | -| `$presentation` | public | `ComponentPresentation or null` | | A property which resolves the ComponentPresentation instance for the current component. | FoundationElement | -| `template` | public | `ElementViewTemplate or void or null` | | Sets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition. | FoundationElement | -| `styles` | public | `ElementStyles or void or null` | | Sets the default styles for the element instance. When undefined, the element will attempt to resolve default styles from the associated presentation or custom element definition. | FoundationElement | +| Name | Privacy | Type | Default | Description | Inherited From | +| ------------------ | --------- | ------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | +| `modal` | public | `boolean` | `false` | Indicates the element is modal. When modal, user mouse interaction will be limited to the contents of the element by a modal overlay. Clicks on the overlay will cause the dialog to emit a "dismiss" event. | | +| `hidden` | public | `boolean` | `false` | The hidden state of the element. | | +| `trapFocus` | public | `boolean` | `true` | Indicates that the dialog should trap focus. | | +| `trapFocusChanged` | protected | | | | | +| `ariaDescribedby` | public | `string` | | The id of the element describing the dialog. | | +| `ariaLabelledby` | public | `string` | | The id of the element labeling the dialog. | | +| `ariaLabel` | public | `string` | | The label surfaced to assistive technologies. | | +| `$presentation` | public | `ComponentPresentation or null` | | A property which resolves the ComponentPresentation instance for the current component. | FoundationElement | +| `template` | public | `ElementViewTemplate or void or null` | | Sets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition. | FoundationElement | +| `styles` | public | `ElementStyles or void or null` | | Sets the default styles for the element instance. When undefined, the element will attempt to resolve default styles from the associated presentation or custom element definition. | FoundationElement | #### Methods diff --git a/packages/web-components/fast-foundation/src/dialog/dialog.ts b/packages/web-components/fast-foundation/src/dialog/dialog.ts index 98d8fb391ca..b92be9511ab 100644 --- a/packages/web-components/fast-foundation/src/dialog/dialog.ts +++ b/packages/web-components/fast-foundation/src/dialog/dialog.ts @@ -42,7 +42,7 @@ export class Dialog extends FoundationElement { */ @attr({ attribute: "trap-focus", mode: "boolean" }) public trapFocus: boolean = true; - private trapFocusChanged = (): void => { + protected trapFocusChanged = (): void => { if ((this as FoundationElement).$fastController.isConnected) { this.updateTrapFocus(); } diff --git a/packages/web-components/fast-foundation/src/menu-item/menu-item.ts b/packages/web-components/fast-foundation/src/menu-item/menu-item.ts index cff123b7000..1b34ae2dcb8 100644 --- a/packages/web-components/fast-foundation/src/menu-item/menu-item.ts +++ b/packages/web-components/fast-foundation/src/menu-item/menu-item.ts @@ -62,7 +62,7 @@ export class MenuItem extends FoundationElement { */ @attr({ mode: "boolean" }) public expanded: boolean; - private expandedChanged(oldValue: boolean): void { + protected expandedChanged(oldValue: boolean): void { if (this.$fastController.isConnected) { if (this.submenu === undefined) { return; @@ -102,7 +102,7 @@ export class MenuItem extends FoundationElement { */ @attr({ mode: "boolean" }) public checked: boolean; - private checkedChanged(oldValue: boolean, newValue: boolean): void { + protected checkedChanged(oldValue: boolean, newValue: boolean): void { if (this.$fastController.isConnected) { this.$emit("change"); } diff --git a/packages/web-components/fast-foundation/src/menu/README.md b/packages/web-components/fast-foundation/src/menu/README.md index 0d3052d14de..207d00a1abe 100644 --- a/packages/web-components/fast-foundation/src/menu/README.md +++ b/packages/web-components/fast-foundation/src/menu/README.md @@ -154,12 +154,13 @@ export const myMenuItem = MenuItem.compose({ #### Methods -| Name | Privacy | Description | Parameters | Return | Inherited From | -| ---------------------- | --------- | ----------------------------------- | ---------- | ------ | ----------------- | -| `focus` | public | Focuses the first item in the menu. | | `void` | | -| `collapseExpandedItem` | public | Collapses any expanded menu items. | | `void` | | -| `templateChanged` | protected | | | `void` | FoundationElement | -| `stylesChanged` | protected | | | `void` | FoundationElement | +| Name | Privacy | Description | Parameters | Return | Inherited From | +| ---------------------- | --------- | ----------------------------------- | -------------------------------------------------- | ------ | ----------------- | +| `itemsChanged` | protected | | `oldValue: HTMLElement[], newValue: HTMLElement[]` | `void` | | +| `focus` | public | Focuses the first item in the menu. | | `void` | | +| `collapseExpandedItem` | public | Collapses any expanded menu items. | | `void` | | +| `templateChanged` | protected | | | `void` | FoundationElement | +| `stylesChanged` | protected | | | `void` | FoundationElement |
@@ -187,10 +188,12 @@ export const myMenuItem = MenuItem.compose({ #### Methods -| Name | Privacy | Description | Parameters | Return | Inherited From | -| ----------------- | --------- | ----------- | ---------- | ------ | ----------------- | -| `templateChanged` | protected | | | `void` | FoundationElement | -| `stylesChanged` | protected | | | `void` | FoundationElement | +| Name | Privacy | Description | Parameters | Return | Inherited From | +| ----------------- | --------- | ----------- | -------------------------------------- | ------ | ----------------- | +| `expandedChanged` | protected | | `oldValue: boolean` | `void` | | +| `checkedChanged` | protected | | `oldValue: boolean, newValue: boolean` | `void` | | +| `templateChanged` | protected | | | `void` | FoundationElement | +| `stylesChanged` | protected | | | `void` | FoundationElement | #### Attributes diff --git a/packages/web-components/fast-foundation/src/menu/menu.ts b/packages/web-components/fast-foundation/src/menu/menu.ts index 87b834e6b86..fe1af715594 100644 --- a/packages/web-components/fast-foundation/src/menu/menu.ts +++ b/packages/web-components/fast-foundation/src/menu/menu.ts @@ -26,7 +26,7 @@ export class Menu extends FoundationElement { */ @observable public items: HTMLSlotElement; - private itemsChanged(oldValue: HTMLElement[], newValue: HTMLElement[]): void { + protected itemsChanged(oldValue: HTMLElement[], newValue: HTMLElement[]): void { // only update children after the component is connected and // the setItems has run on connectedCallback // (menuItems is undefined until then) diff --git a/packages/web-components/fast-foundation/src/picker/README.md b/packages/web-components/fast-foundation/src/picker/README.md index 732d84398c6..7156e767545 100644 --- a/packages/web-components/fast-foundation/src/picker/README.md +++ b/packages/web-components/fast-foundation/src/picker/README.md @@ -62,12 +62,13 @@ export class FASTTextField extends TextField {} #### Methods -| Name | Privacy | Description | Parameters | Return | Inherited From | -| ----------------- | --------- | ----------- | ------------------ | --------- | ----------------- | -| `handleKeyDown` | public | | `e: KeyboardEvent` | `boolean` | | -| `handleClick` | public | | `e: MouseEvent` | `boolean` | | -| `templateChanged` | protected | | | `void` | FoundationElement | -| `stylesChanged` | protected | | | `void` | FoundationElement | +| Name | Privacy | Description | Parameters | Return | Inherited From | +| ------------------------- | --------- | ----------- | ------------------ | --------- | ----------------- | +| `contentsTemplateChanged` | protected | | | `void` | | +| `handleKeyDown` | public | | `e: KeyboardEvent` | `boolean` | | +| `handleClick` | public | | `e: MouseEvent` | `boolean` | | +| `templateChanged` | protected | | | `void` | FoundationElement | +| `stylesChanged` | protected | | | `void` | FoundationElement | #### Attributes @@ -126,11 +127,12 @@ export class FASTTextField extends TextField {} #### Methods -| Name | Privacy | Description | Parameters | Return | Inherited From | -| ----------------- | --------- | ----------- | --------------- | --------- | ----------------- | -| `handleClick` | public | | `e: MouseEvent` | `boolean` | | -| `templateChanged` | protected | | | `void` | FoundationElement | -| `stylesChanged` | protected | | | `void` | FoundationElement | +| Name | Privacy | Description | Parameters | Return | Inherited From | +| ------------------------- | --------- | ----------- | --------------- | --------- | ----------------- | +| `contentsTemplateChanged` | protected | | | `void` | | +| `handleClick` | public | | `e: MouseEvent` | `boolean` | | +| `templateChanged` | protected | | | `void` | FoundationElement | +| `stylesChanged` | protected | | | `void` | FoundationElement | #### Attributes @@ -214,18 +216,29 @@ export class FASTTextField extends TextField {} #### Methods -| Name | Privacy | Description | Parameters | Return | Inherited From | -| ----------------------- | --------- | ------------------------------------------------------------- | ------------------ | --------- | ----------------- | -| `focus` | public | Move focus to the input element | | | | -| `handleKeyDown` | public | Handle key down events. | `e: KeyboardEvent` | `boolean` | | -| `handleFocusIn` | public | Handle focus in events. | `e: FocusEvent` | `boolean` | | -| `handleFocusOut` | public | Handle focus out events. | `e: FocusEvent` | `boolean` | | -| `handleSelectionChange` | public | The list of selected items has changed | | `void` | | -| `handleRegionLoaded` | public | Anchored region is loaded, menu and options exist in the DOM. | `e: Event` | `void` | | -| `handleItemInvoke` | public | A list item has been invoked. | `e: Event` | `boolean` | | -| `handleOptionInvoke` | public | A menu option has been invoked. | `e: Event` | `boolean` | | -| `templateChanged` | protected | | | `void` | FoundationElement | -| `stylesChanged` | protected | | | `void` | FoundationElement | +| Name | Privacy | Description | Parameters | Return | Inherited From | +| ---------------------------------- | --------- | ------------------------------------------------------------- | ------------------ | --------- | ----------------- | +| `selectionChanged` | protected | | | `void` | | +| `optionsChanged` | protected | | | `void` | | +| `menuPlacementChanged` | protected | | | `void` | | +| `showLoadingChanged` | protected | | | `void` | | +| `listItemTemplateChanged` | protected | | | `void` | | +| `defaultListItemTemplateChanged` | protected | | | `void` | | +| `menuOptionTemplateChanged` | protected | | | `void` | | +| `defaultMenuOptionTemplateChanged` | protected | | | `void` | | +| `queryChanged` | protected | | | `void` | | +| `filteredOptionsListChanged` | protected | | | `void` | | +| `flyoutOpenChanged` | protected | | | `void` | | +| `focus` | public | Move focus to the input element | | | | +| `handleKeyDown` | public | Handle key down events. | `e: KeyboardEvent` | `boolean` | | +| `handleFocusIn` | public | Handle focus in events. | `e: FocusEvent` | `boolean` | | +| `handleFocusOut` | public | Handle focus out events. | `e: FocusEvent` | `boolean` | | +| `handleSelectionChange` | public | The list of selected items has changed | | `void` | | +| `handleRegionLoaded` | public | Anchored region is loaded, menu and options exist in the DOM. | `e: Event` | `void` | | +| `handleItemInvoke` | public | A list item has been invoked. | `e: Event` | `boolean` | | +| `handleOptionInvoke` | public | A menu option has been invoked. | `e: Event` | `boolean` | | +| `templateChanged` | protected | | | `void` | FoundationElement | +| `stylesChanged` | protected | | | `void` | FoundationElement | #### Attributes diff --git a/packages/web-components/fast-foundation/src/picker/picker-list-item.ts b/packages/web-components/fast-foundation/src/picker/picker-list-item.ts index 98ed8f04d34..7ce19dab8f9 100644 --- a/packages/web-components/fast-foundation/src/picker/picker-list-item.ts +++ b/packages/web-components/fast-foundation/src/picker/picker-list-item.ts @@ -31,7 +31,7 @@ export class PickerListItem extends FoundationElement { */ @observable public contentsTemplate: ViewTemplate; - private contentsTemplateChanged(): void { + protected contentsTemplateChanged(): void { if (this.$fastController.isConnected) { this.updateView(); } diff --git a/packages/web-components/fast-foundation/src/picker/picker-menu-option.ts b/packages/web-components/fast-foundation/src/picker/picker-menu-option.ts index 2bf68a27a70..8d26b44cbe7 100644 --- a/packages/web-components/fast-foundation/src/picker/picker-menu-option.ts +++ b/packages/web-components/fast-foundation/src/picker/picker-menu-option.ts @@ -30,7 +30,7 @@ export class PickerMenuOption extends FoundationElement { */ @observable public contentsTemplate: ViewTemplate; - private contentsTemplateChanged(): void { + protected contentsTemplateChanged(): void { if (this.$fastController.isConnected) { this.updateView(); } diff --git a/packages/web-components/fast-foundation/src/picker/picker.ts b/packages/web-components/fast-foundation/src/picker/picker.ts index 8733f8ffd0e..c3960b6b30e 100644 --- a/packages/web-components/fast-foundation/src/picker/picker.ts +++ b/packages/web-components/fast-foundation/src/picker/picker.ts @@ -80,7 +80,7 @@ export class Picker extends FormAssociatedPicker { */ @attr({ attribute: "selection" }) public selection: string = ""; - private selectionChanged(): void { + protected selectionChanged(): void { if (this.$fastController.isConnected) { this.handleSelectionChange(); if (this.proxy instanceof HTMLInputElement) { @@ -99,7 +99,7 @@ export class Picker extends FormAssociatedPicker { */ @attr({ attribute: "options" }) public options: string; - private optionsChanged(): void { + protected optionsChanged(): void { this.optionsList = this.options .split(",") .map(opt => opt.trim()) @@ -205,7 +205,7 @@ export class Picker extends FormAssociatedPicker { */ @attr({ attribute: "menu-placement" }) public menuPlacement: menuConfigs = "bottom-fill"; - private menuPlacementChanged(): void { + protected menuPlacementChanged(): void { if (this.$fastController.isConnected) { this.updateMenuConfig(); } @@ -218,7 +218,7 @@ export class Picker extends FormAssociatedPicker { */ @observable public showLoading: boolean = false; - private showLoadingChanged(): void { + protected showLoadingChanged(): void { if (this.$fastController.isConnected) { DOM.queueUpdate(() => { this.setFocusedOption(0); @@ -234,7 +234,7 @@ export class Picker extends FormAssociatedPicker { */ @observable public listItemTemplate: ViewTemplate; - private listItemTemplateChanged(): void { + protected listItemTemplateChanged(): void { this.updateListItemTemplate(); } @@ -246,7 +246,7 @@ export class Picker extends FormAssociatedPicker { */ @observable public defaultListItemTemplate?: ViewTemplate; - private defaultListItemTemplateChanged(): void { + protected defaultListItemTemplateChanged(): void { this.updateListItemTemplate(); } @@ -266,7 +266,7 @@ export class Picker extends FormAssociatedPicker { */ @observable public menuOptionTemplate: ViewTemplate; - private menuOptionTemplateChanged(): void { + protected menuOptionTemplateChanged(): void { this.updateOptionTemplate(); } @@ -278,7 +278,7 @@ export class Picker extends FormAssociatedPicker { */ @observable public defaultMenuOptionTemplate?: ViewTemplate; - private defaultMenuOptionTemplateChanged(): void { + protected defaultMenuOptionTemplateChanged(): void { this.updateOptionTemplate(); } @@ -324,7 +324,7 @@ export class Picker extends FormAssociatedPicker { */ @observable public query: string; - private queryChanged(): void { + protected queryChanged(): void { if (this.$fastController.isConnected) { if (this.inputElement.value !== this.query) { this.inputElement.value = this.query; @@ -341,7 +341,7 @@ export class Picker extends FormAssociatedPicker { */ @observable public filteredOptionsList: string[] = []; - private filteredOptionsListChanged(): void { + protected filteredOptionsListChanged(): void { if (this.$fastController.isConnected) { this.showNoOptions = this.filteredOptionsList.length === 0 && @@ -357,7 +357,7 @@ export class Picker extends FormAssociatedPicker { */ @observable public flyoutOpen: boolean = false; - private flyoutOpenChanged(): void { + protected flyoutOpenChanged(): void { if (this.flyoutOpen) { DOM.queueUpdate(this.setRegionProps); this.$emit("menuopening", { bubbles: false }); diff --git a/packages/web-components/fast-foundation/src/progress/README.md b/packages/web-components/fast-foundation/src/progress/README.md index 9354c892dcf..a812691c7f0 100644 --- a/packages/web-components/fast-foundation/src/progress/README.md +++ b/packages/web-components/fast-foundation/src/progress/README.md @@ -129,6 +129,9 @@ export const myProgressRing = ProgressRing.compose({ | Name | Privacy | Description | Parameters | Return | Inherited From | | ----------------- | --------- | ----------- | ---------- | ------ | ----------------- | +| `valueChanged` | protected | | | `void` | | +| `minChanged` | protected | | | `void` | | +| `maxChanged` | protected | | | `void` | | | `templateChanged` | protected | | | `void` | FoundationElement | | `stylesChanged` | protected | | | `void` | FoundationElement | diff --git a/packages/web-components/fast-foundation/src/progress/base-progress.ts b/packages/web-components/fast-foundation/src/progress/base-progress.ts index 935ef00f85b..ba4bcf26da8 100644 --- a/packages/web-components/fast-foundation/src/progress/base-progress.ts +++ b/packages/web-components/fast-foundation/src/progress/base-progress.ts @@ -40,7 +40,7 @@ export class BaseProgress extends FoundationElement { */ @attr({ converter: nullableNumberConverter }) public value: number | null; - private valueChanged(): void { + protected valueChanged(): void { if (this.$fastController.isConnected) { this.updatePercentComplete(); } @@ -54,7 +54,7 @@ export class BaseProgress extends FoundationElement { */ @attr({ converter: nullableNumberConverter }) public min: number; - private minChanged(): void { + protected minChanged(): void { if (this.$fastController.isConnected) { this.updatePercentComplete(); } @@ -68,7 +68,7 @@ export class BaseProgress extends FoundationElement { */ @attr({ converter: nullableNumberConverter }) public max: number; - private maxChanged(): void { + protected maxChanged(): void { if (this.$fastController.isConnected) { this.updatePercentComplete(); } diff --git a/packages/web-components/fast-foundation/src/radio-group/README.md b/packages/web-components/fast-foundation/src/radio-group/README.md index bd86e8956c1..8f0771d8621 100644 --- a/packages/web-components/fast-foundation/src/radio-group/README.md +++ b/packages/web-components/fast-foundation/src/radio-group/README.md @@ -78,12 +78,15 @@ export const myRadioGroup = RadioGroup.compose({ #### Methods -| Name | Privacy | Description | Parameters | Return | Inherited From | -| ----------------- | --------- | ----------- | ---------- | ------ | ----------------- | -| `nameChanged` | protected | | | `void` | | -| `valueChanged` | protected | | | `void` | | -| `templateChanged` | protected | | | `void` | FoundationElement | -| `stylesChanged` | protected | | | `void` | FoundationElement | +| Name | Privacy | Description | Parameters | Return | Inherited From | +| ---------------------------- | --------- | ----------- | -------------------------------------------- | ------ | ----------------- | +| `readOnlyChanged` | protected | | | `void` | | +| `disabledChanged` | protected | | | `void` | | +| `nameChanged` | protected | | | `void` | | +| `valueChanged` | protected | | | `void` | | +| `slottedRadioButtonsChanged` | protected | | `oldValue: unknown, newValue: HTMLElement[]` | `void` | | +| `templateChanged` | protected | | | `void` | FoundationElement | +| `stylesChanged` | protected | | | `void` | FoundationElement | #### Attributes diff --git a/packages/web-components/fast-foundation/src/radio-group/radio-group.ts b/packages/web-components/fast-foundation/src/radio-group/radio-group.ts index 43e281271d6..d327282f200 100644 --- a/packages/web-components/fast-foundation/src/radio-group/radio-group.ts +++ b/packages/web-components/fast-foundation/src/radio-group/radio-group.ts @@ -27,7 +27,7 @@ export class RadioGroup extends FoundationElement { */ @attr({ attribute: "readonly", mode: "boolean" }) public readOnly: boolean; - private readOnlyChanged(): void { + protected readOnlyChanged(): void { if (this.slottedRadioButtons !== undefined) { this.slottedRadioButtons.forEach((radio: HTMLInputElement) => { if (this.readOnly) { @@ -48,7 +48,7 @@ export class RadioGroup extends FoundationElement { */ @attr({ attribute: "disabled", mode: "boolean" }) public disabled: boolean; - private disabledChanged(): void { + protected disabledChanged(): void { if (this.slottedRadioButtons !== undefined) { this.slottedRadioButtons.forEach((radio: HTMLInputElement) => { if (this.disabled) { @@ -117,7 +117,10 @@ export class RadioGroup extends FoundationElement { */ @observable public slottedRadioButtons: HTMLElement[]; - private slottedRadioButtonsChanged(oldValue: unknown, newValue: HTMLElement[]): void { + protected slottedRadioButtonsChanged( + oldValue: unknown, + newValue: HTMLElement[] + ): void { if (this.slottedRadioButtons && this.slottedRadioButtons.length > 0) { this.setupRadioButtons(); } diff --git a/packages/web-components/fast-foundation/src/radio/README.md b/packages/web-components/fast-foundation/src/radio/README.md index 6243e3bb292..88df5c77be9 100644 --- a/packages/web-components/fast-foundation/src/radio/README.md +++ b/packages/web-components/fast-foundation/src/radio/README.md @@ -101,6 +101,7 @@ export const myRadio = Radio.compose({ | Name | Privacy | Description | Parameters | Return | Inherited From | | ----------------- | --------- | ----------- | ---------- | ------ | ----------------- | +| `readOnlyChanged` | protected | | | `void` | | | `templateChanged` | protected | | | `void` | FoundationElement | | `stylesChanged` | protected | | | `void` | FoundationElement | diff --git a/packages/web-components/fast-foundation/src/radio/radio.ts b/packages/web-components/fast-foundation/src/radio/radio.ts index cc6429369c7..07f2d3f4917 100644 --- a/packages/web-components/fast-foundation/src/radio/radio.ts +++ b/packages/web-components/fast-foundation/src/radio/radio.ts @@ -35,7 +35,7 @@ export class Radio extends FormAssociatedRadio implements RadioControl { */ @attr({ attribute: "readonly", mode: "boolean" }) public readOnly: boolean; // Map to proxy element - private readOnlyChanged(): void { + protected readOnlyChanged(): void { if (this.proxy instanceof HTMLInputElement) { this.proxy.readOnly = this.readOnly; } diff --git a/packages/web-components/fast-foundation/src/search/README.md b/packages/web-components/fast-foundation/src/search/README.md index 9bcfef9f85a..f28c988e4eb 100644 --- a/packages/web-components/fast-foundation/src/search/README.md +++ b/packages/web-components/fast-foundation/src/search/README.md @@ -87,11 +87,20 @@ This component is built with the expectation that focus is delegated to the inpu #### Methods -| Name | Privacy | Description | Parameters | Return | Inherited From | -| ------------------ | --------- | --------------------------------------- | ---------- | ------ | ----------------- | -| `handleClearInput` | public | Handles the control's clear value event | | `void` | | -| `templateChanged` | protected | | | `void` | FoundationElement | -| `stylesChanged` | protected | | | `void` | FoundationElement | +| Name | Privacy | Description | Parameters | Return | Inherited From | +| -------------------- | --------- | --------------------------------------- | ---------- | ------ | ----------------- | +| `readOnlyChanged` | protected | | | `void` | | +| `autofocusChanged` | protected | | | `void` | | +| `placeholderChanged` | protected | | | `void` | | +| `listChanged` | protected | | | `void` | | +| `maxlengthChanged` | protected | | | `void` | | +| `minlengthChanged` | protected | | | `void` | | +| `patternChanged` | protected | | | `void` | | +| `sizeChanged` | protected | | | `void` | | +| `spellcheckChanged` | protected | | | `void` | | +| `handleClearInput` | public | Handles the control's clear value event | | `void` | | +| `templateChanged` | protected | | | `void` | FoundationElement | +| `stylesChanged` | protected | | | `void` | FoundationElement | #### Attributes diff --git a/packages/web-components/fast-foundation/src/search/search.ts b/packages/web-components/fast-foundation/src/search/search.ts index 1e4e70de6ea..ee7faa1ffae 100644 --- a/packages/web-components/fast-foundation/src/search/search.ts +++ b/packages/web-components/fast-foundation/src/search/search.ts @@ -28,7 +28,7 @@ export class Search extends FormAssociatedSearch { */ @attr({ attribute: "readonly", mode: "boolean" }) public readOnly: boolean; - private readOnlyChanged(): void { + protected readOnlyChanged(): void { if (this.proxy instanceof HTMLInputElement) { this.proxy.readOnly = this.readOnly; this.validate(); @@ -43,7 +43,7 @@ export class Search extends FormAssociatedSearch { */ @attr({ mode: "boolean" }) public autofocus: boolean; - private autofocusChanged(): void { + protected autofocusChanged(): void { if (this.proxy instanceof HTMLInputElement) { this.proxy.autofocus = this.autofocus; this.validate(); @@ -59,7 +59,7 @@ export class Search extends FormAssociatedSearch { */ @attr public placeholder: string; - private placeholderChanged(): void { + protected placeholderChanged(): void { if (this.proxy instanceof HTMLInputElement) { this.proxy.placeholder = this.placeholder; } @@ -73,7 +73,7 @@ export class Search extends FormAssociatedSearch { */ @attr public list: string; - private listChanged(): void { + protected listChanged(): void { if (this.proxy instanceof HTMLInputElement) { this.proxy.setAttribute("list", this.list); this.validate(); @@ -88,7 +88,7 @@ export class Search extends FormAssociatedSearch { */ @attr({ converter: nullableNumberConverter }) public maxlength: number; - private maxlengthChanged(): void { + protected maxlengthChanged(): void { if (this.proxy instanceof HTMLInputElement) { this.proxy.maxLength = this.maxlength; this.validate(); @@ -103,7 +103,7 @@ export class Search extends FormAssociatedSearch { */ @attr({ converter: nullableNumberConverter }) public minlength: number; - private minlengthChanged(): void { + protected minlengthChanged(): void { if (this.proxy instanceof HTMLInputElement) { this.proxy.minLength = this.minlength; this.validate(); @@ -118,7 +118,7 @@ export class Search extends FormAssociatedSearch { */ @attr public pattern: string; - private patternChanged(): void { + protected patternChanged(): void { if (this.proxy instanceof HTMLInputElement) { this.proxy.pattern = this.pattern; this.validate(); @@ -133,7 +133,7 @@ export class Search extends FormAssociatedSearch { */ @attr({ converter: nullableNumberConverter }) public size: number; - private sizeChanged(): void { + protected sizeChanged(): void { if (this.proxy instanceof HTMLInputElement) { this.proxy.size = this.size; } @@ -147,7 +147,7 @@ export class Search extends FormAssociatedSearch { */ @attr({ mode: "boolean" }) public spellcheck: boolean; - private spellcheckChanged(): void { + protected spellcheckChanged(): void { if (this.proxy instanceof HTMLInputElement) { this.proxy.spellcheck = this.spellcheck; } diff --git a/packages/web-components/fast-foundation/src/select/README.md b/packages/web-components/fast-foundation/src/select/README.md index 8ded4845705..d9f40b7815b 100644 --- a/packages/web-components/fast-foundation/src/select/README.md +++ b/packages/web-components/fast-foundation/src/select/README.md @@ -119,6 +119,7 @@ See [listbox-option](/docs/components/listbox-option) for more information. | `openChanged` | protected | | | | | | `positionChanged` | protected | | | | | | `setPositioning` | public | Calculate and apply listbox positioning based on available viewport space. | `force` | `void` | | +| `maxHeightChanged` | protected | | | `void` | | | `setDefaultSelectedOption` | protected | | | `void` | | | `selectFirstOption` | public | Moves focus to the first selectable option. | | `void` | Listbox | | `setSelectedOptions` | public | Sets an option as selected and gives it focus. | | | Listbox | diff --git a/packages/web-components/fast-foundation/src/select/select.ts b/packages/web-components/fast-foundation/src/select/select.ts index 905b10a0839..da12361ef1c 100644 --- a/packages/web-components/fast-foundation/src/select/select.ts +++ b/packages/web-components/fast-foundation/src/select/select.ts @@ -210,7 +210,7 @@ export class Select extends FormAssociatedSelect { */ @observable public maxHeight: number = 0; - private maxHeightChanged(): void { + protected maxHeightChanged(): void { if (this.listbox) { this.listbox.style.setProperty("--max-height", `${this.maxHeight}px`); } diff --git a/packages/web-components/fast-foundation/src/slider-label/slider-label.ts b/packages/web-components/fast-foundation/src/slider-label/slider-label.ts index d93dd7acce0..97e2750f14c 100644 --- a/packages/web-components/fast-foundation/src/slider-label/slider-label.ts +++ b/packages/web-components/fast-foundation/src/slider-label/slider-label.ts @@ -38,7 +38,7 @@ export class SliderLabel extends FoundationElement { */ @attr public position: string; - private positionChanged(): void { + protected positionChanged(): void { this.positionStyle = this.positionAsStyle(); } diff --git a/packages/web-components/fast-foundation/src/slider/README.md b/packages/web-components/fast-foundation/src/slider/README.md index 6107b5543ed..22dbde8d86a 100644 --- a/packages/web-components/fast-foundation/src/slider/README.md +++ b/packages/web-components/fast-foundation/src/slider/README.md @@ -150,6 +150,7 @@ export const mySliderLabel = SliderLabel.compose({ | Name | Privacy | Description | Parameters | Return | Inherited From | | -------------------------------- | --------- | ------------------------------------------- | ---------------------- | ------ | ----------------- | +| `readOnlyChanged` | protected | | | `void` | | | `increment` | public | Increment the value by the step | | `void` | | | `decrement` | public | Decrement the value by the step | | `void` | | | `setThumbPositionForOrientation` | public | Places the thumb based on the current value | `direction: Direction` | `void` | | @@ -194,6 +195,7 @@ export const mySliderLabel = SliderLabel.compose({ | Name | Privacy | Description | Parameters | Return | Inherited From | | ----------------- | --------- | ----------- | ---------- | ------ | ----------------- | +| `positionChanged` | protected | | | `void` | | | `templateChanged` | protected | | | `void` | FoundationElement | | `stylesChanged` | protected | | | `void` | FoundationElement | diff --git a/packages/web-components/fast-foundation/src/slider/slider.ts b/packages/web-components/fast-foundation/src/slider/slider.ts index 29aaa202cab..3f343ef0948 100644 --- a/packages/web-components/fast-foundation/src/slider/slider.ts +++ b/packages/web-components/fast-foundation/src/slider/slider.ts @@ -63,7 +63,7 @@ export class Slider extends FormAssociatedSlider implements SliderConfiguration */ @attr({ attribute: "readonly", mode: "boolean" }) public readOnly: boolean; // Map to proxy element - private readOnlyChanged(): void { + protected readOnlyChanged(): void { if (this.proxy instanceof HTMLInputElement) { this.proxy.readOnly = this.readOnly; } diff --git a/packages/web-components/fast-foundation/src/switch/README.md b/packages/web-components/fast-foundation/src/switch/README.md index c6a438892e7..7ba1c498cbe 100644 --- a/packages/web-components/fast-foundation/src/switch/README.md +++ b/packages/web-components/fast-foundation/src/switch/README.md @@ -93,6 +93,7 @@ export const mySwitch = Switch.compose({ | Name | Privacy | Description | Parameters | Return | Inherited From | | ----------------- | --------- | ----------- | ---------- | ------ | ----------------- | +| `readOnlyChanged` | protected | | | `void` | | | `templateChanged` | protected | | | `void` | FoundationElement | | `stylesChanged` | protected | | | `void` | FoundationElement | diff --git a/packages/web-components/fast-foundation/src/switch/switch.ts b/packages/web-components/fast-foundation/src/switch/switch.ts index a93a1475a68..ae9ba340a94 100644 --- a/packages/web-components/fast-foundation/src/switch/switch.ts +++ b/packages/web-components/fast-foundation/src/switch/switch.ts @@ -26,7 +26,7 @@ export class Switch extends FormAssociatedSwitch { */ @attr({ attribute: "readonly", mode: "boolean" }) public readOnly: boolean; // Map to proxy element - private readOnlyChanged(): void { + protected readOnlyChanged(): void { if (this.proxy instanceof HTMLInputElement) { this.proxy.readOnly = this.readOnly; } diff --git a/packages/web-components/fast-foundation/src/text-area/README.md b/packages/web-components/fast-foundation/src/text-area/README.md index f011708f96a..0f19b90a4f8 100644 --- a/packages/web-components/fast-foundation/src/text-area/README.md +++ b/packages/web-components/fast-foundation/src/text-area/README.md @@ -85,10 +85,16 @@ This component is built with the expectation that focus is delegated to the inpu #### Methods -| Name | Privacy | Description | Parameters | Return | Inherited From | -| ----------------- | --------- | ----------- | ---------- | ------ | ----------------- | -| `templateChanged` | protected | | | `void` | FoundationElement | -| `stylesChanged` | protected | | | `void` | FoundationElement | +| Name | Privacy | Description | Parameters | Return | Inherited From | +| ------------------- | --------- | ----------- | ---------- | ------ | ----------------- | +| `readOnlyChanged` | protected | | | `void` | | +| `autofocusChanged` | protected | | | `void` | | +| `listChanged` | protected | | | `void` | | +| `maxlengthChanged` | protected | | | `void` | | +| `minlengthChanged` | protected | | | `void` | | +| `spellcheckChanged` | protected | | | `void` | | +| `templateChanged` | protected | | | `void` | FoundationElement | +| `stylesChanged` | protected | | | `void` | FoundationElement | #### Attributes diff --git a/packages/web-components/fast-foundation/src/text-area/text-area.ts b/packages/web-components/fast-foundation/src/text-area/text-area.ts index babdabd4f4e..b3c6090be7a 100644 --- a/packages/web-components/fast-foundation/src/text-area/text-area.ts +++ b/packages/web-components/fast-foundation/src/text-area/text-area.ts @@ -21,7 +21,7 @@ export class TextArea extends FormAssociatedTextArea { */ @attr({ mode: "boolean" }) public readOnly: boolean; - private readOnlyChanged(): void { + protected readOnlyChanged(): void { if (this.proxy instanceof HTMLTextAreaElement) { this.proxy.readOnly = this.readOnly; } @@ -51,7 +51,7 @@ export class TextArea extends FormAssociatedTextArea { */ @attr({ mode: "boolean" }) public autofocus: boolean; - private autofocusChanged(): void { + protected autofocusChanged(): void { if (this.proxy instanceof HTMLTextAreaElement) { this.proxy.autofocus = this.autofocus; } @@ -72,7 +72,7 @@ export class TextArea extends FormAssociatedTextArea { */ @attr public list: string; - private listChanged(): void { + protected listChanged(): void { if (this.proxy instanceof HTMLTextAreaElement) { this.proxy.setAttribute("list", this.list); } @@ -86,7 +86,7 @@ export class TextArea extends FormAssociatedTextArea { */ @attr({ converter: nullableNumberConverter }) public maxlength: number; - private maxlengthChanged(): void { + protected maxlengthChanged(): void { if (this.proxy instanceof HTMLTextAreaElement) { this.proxy.maxLength = this.maxlength; } @@ -100,7 +100,7 @@ export class TextArea extends FormAssociatedTextArea { */ @attr({ converter: nullableNumberConverter }) public minlength: number; - private minlengthChanged(): void { + protected minlengthChanged(): void { if (this.proxy instanceof HTMLTextAreaElement) { this.proxy.minLength = this.minlength; } @@ -154,7 +154,7 @@ export class TextArea extends FormAssociatedTextArea { */ @attr({ mode: "boolean" }) public spellcheck: boolean; - private spellcheckChanged(): void { + protected spellcheckChanged(): void { if (this.proxy instanceof HTMLTextAreaElement) { this.proxy.spellcheck = this.spellcheck; } diff --git a/packages/web-components/fast-foundation/src/text-field/README.md b/packages/web-components/fast-foundation/src/text-field/README.md index 3b8dfdc1a95..3a3445763c8 100644 --- a/packages/web-components/fast-foundation/src/text-field/README.md +++ b/packages/web-components/fast-foundation/src/text-field/README.md @@ -88,10 +88,20 @@ This component is built with the expectation that focus is delegated to the inpu #### Methods -| Name | Privacy | Description | Parameters | Return | Inherited From | -| ----------------- | --------- | ----------- | ---------- | ------ | ----------------- | -| `templateChanged` | protected | | | `void` | FoundationElement | -| `stylesChanged` | protected | | | `void` | FoundationElement | +| Name | Privacy | Description | Parameters | Return | Inherited From | +| -------------------- | --------- | ----------- | ---------- | ------ | ----------------- | +| `readOnlyChanged` | protected | | | `void` | | +| `autofocusChanged` | protected | | | `void` | | +| `placeholderChanged` | protected | | | `void` | | +| `typeChanged` | protected | | | `void` | | +| `listChanged` | protected | | | `void` | | +| `maxlengthChanged` | protected | | | `void` | | +| `minlengthChanged` | protected | | | `void` | | +| `patternChanged` | protected | | | `void` | | +| `sizeChanged` | protected | | | `void` | | +| `spellcheckChanged` | protected | | | `void` | | +| `templateChanged` | protected | | | `void` | FoundationElement | +| `stylesChanged` | protected | | | `void` | FoundationElement | #### Attributes diff --git a/packages/web-components/fast-foundation/src/text-field/text-field.ts b/packages/web-components/fast-foundation/src/text-field/text-field.ts index 4543385f369..e8fd38f1b72 100644 --- a/packages/web-components/fast-foundation/src/text-field/text-field.ts +++ b/packages/web-components/fast-foundation/src/text-field/text-field.ts @@ -32,7 +32,7 @@ export class TextField extends FormAssociatedTextField { */ @attr({ attribute: "readonly", mode: "boolean" }) public readOnly: boolean; - private readOnlyChanged(): void { + protected readOnlyChanged(): void { if (this.proxy instanceof HTMLInputElement) { this.proxy.readOnly = this.readOnly; this.validate(); @@ -47,7 +47,7 @@ export class TextField extends FormAssociatedTextField { */ @attr({ mode: "boolean" }) public autofocus: boolean; - private autofocusChanged(): void { + protected autofocusChanged(): void { if (this.proxy instanceof HTMLInputElement) { this.proxy.autofocus = this.autofocus; this.validate(); @@ -63,7 +63,7 @@ export class TextField extends FormAssociatedTextField { */ @attr public placeholder: string; - private placeholderChanged(): void { + protected placeholderChanged(): void { if (this.proxy instanceof HTMLInputElement) { this.proxy.placeholder = this.placeholder; } @@ -78,7 +78,7 @@ export class TextField extends FormAssociatedTextField { @attr public type: TextFieldType | "email" | "password" | "tel" | "text" | "url" = TextFieldType.text; - private typeChanged(): void { + protected typeChanged(): void { if (this.proxy instanceof HTMLInputElement) { this.proxy.type = this.type; this.validate(); @@ -93,7 +93,7 @@ export class TextField extends FormAssociatedTextField { */ @attr public list: string; - private listChanged(): void { + protected listChanged(): void { if (this.proxy instanceof HTMLInputElement) { this.proxy.setAttribute("list", this.list); this.validate(); @@ -108,7 +108,7 @@ export class TextField extends FormAssociatedTextField { */ @attr({ converter: nullableNumberConverter }) public maxlength: number; - private maxlengthChanged(): void { + protected maxlengthChanged(): void { if (this.proxy instanceof HTMLInputElement) { this.proxy.maxLength = this.maxlength; this.validate(); @@ -123,7 +123,7 @@ export class TextField extends FormAssociatedTextField { */ @attr({ converter: nullableNumberConverter }) public minlength: number; - private minlengthChanged(): void { + protected minlengthChanged(): void { if (this.proxy instanceof HTMLInputElement) { this.proxy.minLength = this.minlength; this.validate(); @@ -138,7 +138,7 @@ export class TextField extends FormAssociatedTextField { */ @attr public pattern: string; - private patternChanged(): void { + protected patternChanged(): void { if (this.proxy instanceof HTMLInputElement) { this.proxy.pattern = this.pattern; this.validate(); @@ -153,7 +153,7 @@ export class TextField extends FormAssociatedTextField { */ @attr({ converter: nullableNumberConverter }) public size: number; - private sizeChanged(): void { + protected sizeChanged(): void { if (this.proxy instanceof HTMLInputElement) { this.proxy.size = this.size; } @@ -167,7 +167,7 @@ export class TextField extends FormAssociatedTextField { */ @attr({ mode: "boolean" }) public spellcheck: boolean; - private spellcheckChanged(): void { + protected spellcheckChanged(): void { if (this.proxy instanceof HTMLInputElement) { this.proxy.spellcheck = this.spellcheck; } diff --git a/packages/web-components/fast-foundation/src/tooltip/README.md b/packages/web-components/fast-foundation/src/tooltip/README.md index 8a6aa923cce..0f29ae3542c 100644 --- a/packages/web-components/fast-foundation/src/tooltip/README.md +++ b/packages/web-components/fast-foundation/src/tooltip/README.md @@ -73,10 +73,15 @@ export const myTooltip = Tooltip.compose({ #### Methods -| Name | Privacy | Description | Parameters | Return | Inherited From | -| ----------------- | --------- | ----------- | ---------- | ------ | ----------------- | -| `templateChanged` | protected | | | `void` | FoundationElement | -| `stylesChanged` | protected | | | `void` | FoundationElement | +| Name | Privacy | Description | Parameters | Return | Inherited From | +| ------------------------ | --------- | ----------- | ------------------------------- | ------ | ----------------- | +| `visibleChanged` | protected | | | `void` | | +| `anchorChanged` | protected | | | `void` | | +| `positionChanged` | protected | | | `void` | | +| `anchorElementChanged` | protected | | `oldValue: HTMLElement or null` | `void` | | +| `viewportElementChanged` | protected | | | `void` | | +| `templateChanged` | protected | | | `void` | FoundationElement | +| `stylesChanged` | protected | | | `void` | FoundationElement | #### Attributes diff --git a/packages/web-components/fast-foundation/src/tooltip/tooltip.ts b/packages/web-components/fast-foundation/src/tooltip/tooltip.ts index bbe8051996b..a40f86e4d5d 100644 --- a/packages/web-components/fast-foundation/src/tooltip/tooltip.ts +++ b/packages/web-components/fast-foundation/src/tooltip/tooltip.ts @@ -28,7 +28,7 @@ export class Tooltip extends FoundationElement { */ @attr({ mode: "boolean" }) public visible: boolean; - private visibleChanged(): void { + protected visibleChanged(): void { if ((this as FASTElement).$fastController.isConnected) { this.updateTooltipVisibility(); this.updateLayout(); @@ -44,7 +44,7 @@ export class Tooltip extends FoundationElement { */ @attr public anchor: string = ""; - private anchorChanged(): void { + protected anchorChanged(): void { if ((this as FASTElement).$fastController.isConnected) { this.anchorElement = this.getAnchor(); } @@ -85,7 +85,7 @@ export class Tooltip extends FoundationElement { | "top-end" | "bottom-start" | "bottom-end"; - private positionChanged(): void { + protected positionChanged(): void { if ((this as FASTElement).$fastController.isConnected) { this.updateLayout(); } @@ -128,7 +128,7 @@ export class Tooltip extends FoundationElement { */ @observable public anchorElement: HTMLElement | null = null; - private anchorElementChanged(oldValue: HTMLElement | null): void { + protected anchorElementChanged(oldValue: HTMLElement | null): void { if ((this as FASTElement).$fastController.isConnected) { if (oldValue !== null && oldValue !== undefined) { oldValue.removeEventListener("mouseover", this.handleAnchorMouseOver); @@ -189,7 +189,7 @@ export class Tooltip extends FoundationElement { */ @observable public viewportElement: HTMLElement | null = null; - private viewportElementChanged(): void { + protected viewportElementChanged(): void { if (this.region !== null && this.region !== undefined) { this.region.viewportElement = this.viewportElement; } diff --git a/packages/web-components/fast-foundation/src/tree-item/README.md b/packages/web-components/fast-foundation/src/tree-item/README.md index a523652f233..bdded641be3 100644 --- a/packages/web-components/fast-foundation/src/tree-item/README.md +++ b/packages/web-components/fast-foundation/src/tree-item/README.md @@ -60,10 +60,13 @@ export class FASTTreeItem extends TreeItem {} #### Methods -| Name | Privacy | Description | Parameters | Return | Inherited From | -| ----------------- | --------- | ----------- | ---------- | ------ | ----------------- | -| `templateChanged` | protected | | | `void` | FoundationElement | -| `stylesChanged` | protected | | | `void` | FoundationElement | +| Name | Privacy | Description | Parameters | Return | Inherited From | +| ----------------- | --------- | ----------- | -------------------------------------------- | ------ | ----------------- | +| `expandedChanged` | protected | | | `void` | | +| `selectedChanged` | protected | | | `void` | | +| `itemsChanged` | protected | | `oldValue: unknown, newValue: HTMLElement[]` | `void` | | +| `templateChanged` | protected | | | `void` | FoundationElement | +| `stylesChanged` | protected | | | `void` | FoundationElement | #### Attributes diff --git a/packages/web-components/fast-foundation/src/tree-item/tree-item.ts b/packages/web-components/fast-foundation/src/tree-item/tree-item.ts index f231d2d9ff2..45bf882524b 100644 --- a/packages/web-components/fast-foundation/src/tree-item/tree-item.ts +++ b/packages/web-components/fast-foundation/src/tree-item/tree-item.ts @@ -40,7 +40,7 @@ export class TreeItem extends FoundationElement { */ @attr({ mode: "boolean" }) public expanded: boolean = false; - private expandedChanged(): void { + protected expandedChanged(): void { if (this.$fastController.isConnected) { this.$emit("expanded-change", this); } @@ -54,7 +54,7 @@ export class TreeItem extends FoundationElement { */ @attr({ mode: "boolean" }) public selected: boolean; - private selectedChanged(): void { + protected selectedChanged(): void { if (this.$fastController.isConnected) { this.$emit("selected-change", this); } @@ -99,7 +99,7 @@ export class TreeItem extends FoundationElement { */ @observable public items: HTMLElement[]; - private itemsChanged(oldValue: unknown, newValue: HTMLElement[]): void { + protected itemsChanged(oldValue: unknown, newValue: HTMLElement[]): void { if (this.$fastController.isConnected) { this.items.forEach((node: HTMLElement) => { if (isTreeItemElement(node)) { diff --git a/packages/web-components/fast-foundation/src/tree-view/README.md b/packages/web-components/fast-foundation/src/tree-view/README.md index 14a7383395a..01d662023c9 100644 --- a/packages/web-components/fast-foundation/src/tree-view/README.md +++ b/packages/web-components/fast-foundation/src/tree-view/README.md @@ -116,10 +116,11 @@ export const myTreeView = TreeView.compose({ #### Methods -| Name | Privacy | Description | Parameters | Return | Inherited From | -| ----------------- | --------- | ----------- | ---------- | ------ | ----------------- | -| `templateChanged` | protected | | | `void` | FoundationElement | -| `stylesChanged` | protected | | | `void` | FoundationElement | +| Name | Privacy | Description | Parameters | Return | Inherited From | +| ------------------------- | --------- | ----------- | ---------- | ------ | ----------------- | +| `slottedTreeItemsChanged` | protected | | | `void` | | +| `templateChanged` | protected | | | `void` | FoundationElement | +| `stylesChanged` | protected | | | `void` | FoundationElement | #### Attributes diff --git a/packages/web-components/fast-foundation/src/tree-view/tree-view.ts b/packages/web-components/fast-foundation/src/tree-view/tree-view.ts index 194582e0dbc..0a223d527db 100644 --- a/packages/web-components/fast-foundation/src/tree-view/tree-view.ts +++ b/packages/web-components/fast-foundation/src/tree-view/tree-view.ts @@ -42,8 +42,9 @@ export class TreeView extends FoundationElement { * * @internal */ - @observable slottedTreeItems: HTMLElement[]; - private slottedTreeItemsChanged(): void { + @observable + public slottedTreeItems: HTMLElement[]; + protected slottedTreeItemsChanged(): void { if (this.$fastController.isConnected) { // update for slotted children change this.setItems();