From 6dc2c20d115da3dc553c946bef7f70a888a7c913 Mon Sep 17 00:00:00 2001 From: Chris Holt Date: Tue, 26 Apr 2022 10:13:19 -0700 Subject: [PATCH] feat: update private change handlers to protected (#5872) * update attribute and observable change handlers with internal logic to be protected instead of private * Change files * udpate api docs --- ...-b7f2acd3-f038-4dbe-bbfe-7375c8476e2e.json | 7 +++ .../src/anchored-region/README.md | 26 ++++++-- .../src/anchored-region/anchored-region.ts | 36 +++++------ .../fast-foundation/src/breadcrumb/README.md | 2 +- .../src/breadcrumb/breadcrumb.ts | 2 +- .../fast-foundation/src/button/README.md | 14 +++-- .../fast-foundation/src/button/button.ts | 12 ++-- .../fast-foundation/src/calendar/calendar.ts | 10 ++-- .../fast-foundation/src/checkbox/README.md | 1 + .../fast-foundation/src/checkbox/checkbox.ts | 2 +- .../fast-foundation/src/data-grid/README.md | 46 +++++++++------ .../src/data-grid/data-grid-cell.ts | 4 +- .../src/data-grid/data-grid-row.ts | 4 +- .../src/data-grid/data-grid.ts | 8 +-- .../fast-foundation/src/dialog/README.md | 23 ++++---- .../fast-foundation/src/dialog/dialog.ts | 2 +- .../src/menu-item/menu-item.ts | 4 +- .../fast-foundation/src/menu/README.md | 23 ++++---- .../fast-foundation/src/menu/menu.ts | 2 +- .../fast-foundation/src/picker/README.md | 59 +++++++++++-------- .../src/picker/picker-list-item.ts | 2 +- .../src/picker/picker-menu-option.ts | 2 +- .../fast-foundation/src/picker/picker.ts | 22 +++---- .../fast-foundation/src/progress/README.md | 3 + .../src/progress/base-progress.ts | 6 +- .../fast-foundation/src/radio-group/README.md | 15 +++-- .../src/radio-group/radio-group.ts | 9 ++- .../fast-foundation/src/radio/README.md | 1 + .../fast-foundation/src/radio/radio.ts | 2 +- .../fast-foundation/src/search/README.md | 19 ++++-- .../fast-foundation/src/search/search.ts | 18 +++--- .../src/slider-label/slider-label.ts | 2 +- .../fast-foundation/src/slider/README.md | 2 + .../fast-foundation/src/slider/slider.ts | 2 +- .../fast-foundation/src/switch/README.md | 1 + .../fast-foundation/src/switch/switch.ts | 2 +- .../src/text-area/text-area.ts | 12 ++-- .../src/text-field/text-field.ts | 18 +++--- .../fast-foundation/src/tooltip/README.md | 13 ++-- .../fast-foundation/src/tooltip/tooltip.ts | 8 +-- .../fast-foundation/src/tree-item/README.md | 11 ++-- .../src/tree-item/tree-item.ts | 6 +- .../fast-foundation/src/tree-view/README.md | 9 +-- .../src/tree-view/tree-view.ts | 5 +- 44 files changed, 284 insertions(+), 193 deletions(-) create mode 100644 change/@microsoft-fast-foundation-b7f2acd3-f038-4dbe-bbfe-7375c8476e2e.json 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/src/anchored-region/README.md b/packages/web-components/fast-foundation/src/anchored-region/README.md index a3fcfc93ea7..5695f1f0da8 100644 --- a/packages/web-components/fast-foundation/src/anchored-region/README.md +++ b/packages/web-components/fast-foundation/src/anchored-region/README.md @@ -114,10 +114,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 | #### Events 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 58d66887e1c..22ddb843ab0 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 @@ -90,7 +90,7 @@ export class AnchoredRegion extends FoundationElement { */ @attr public anchor: string = ""; - private anchorChanged(): void { + protected anchorChanged(): void { if (this.initialLayoutComplete) { this.anchorElement = this.getAnchor(); } @@ -105,7 +105,7 @@ export class AnchoredRegion extends FoundationElement { */ @attr public viewport: string = ""; - private viewportChanged(): void { + protected viewportChanged(): void { if (this.initialLayoutComplete) { this.viewportElement = this.getViewport(); } @@ -123,7 +123,7 @@ export class AnchoredRegion extends FoundationElement { */ @attr({ attribute: "horizontal-positioning-mode" }) public horizontalPositioningMode: AxisPositioningMode = "uncontrolled"; - private horizontalPositioningModeChanged(): void { + protected horizontalPositioningModeChanged(): void { this.requestReset(); } @@ -136,7 +136,7 @@ export class AnchoredRegion extends FoundationElement { */ @attr({ attribute: "horizontal-default-position" }) public horizontalDefaultPosition: HorizontalPosition = "unset"; - private horizontalDefaultPositionChanged(): void { + protected horizontalDefaultPositionChanged(): void { this.updateForAttributeChange(); } @@ -149,7 +149,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(); } @@ -162,7 +162,7 @@ export class AnchoredRegion extends FoundationElement { */ @attr({ attribute: "horizontal-inset", mode: "boolean" }) public horizontalInset: boolean = false; - private horizontalInsetChanged(): void { + protected horizontalInsetChanged(): void { this.updateForAttributeChange(); } @@ -176,7 +176,7 @@ export class AnchoredRegion extends FoundationElement { */ @attr({ attribute: "horizontal-threshold" }) public horizontalThreshold: number; - private horizontalThresholdChanged(): void { + protected horizontalThresholdChanged(): void { this.updateForAttributeChange(); } @@ -189,7 +189,7 @@ export class AnchoredRegion extends FoundationElement { */ @attr({ attribute: "horizontal-scaling" }) public horizontalScaling: AxisScalingMode = "content"; - private horizontalScalingChanged(): void { + protected horizontalScalingChanged(): void { this.updateForAttributeChange(); } @@ -205,7 +205,7 @@ export class AnchoredRegion extends FoundationElement { */ @attr({ attribute: "vertical-positioning-mode" }) public verticalPositioningMode: AxisPositioningMode = "uncontrolled"; - private verticalPositioningModeChanged(): void { + protected verticalPositioningModeChanged(): void { this.requestReset(); } @@ -218,7 +218,7 @@ export class AnchoredRegion extends FoundationElement { */ @attr({ attribute: "vertical-default-position" }) public verticalDefaultPosition: VerticalPosition = "unset"; - private verticalDefaultPositionChanged(): void { + protected verticalDefaultPositionChanged(): void { this.updateForAttributeChange(); } @@ -231,7 +231,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(); } @@ -244,7 +244,7 @@ export class AnchoredRegion extends FoundationElement { */ @attr({ attribute: "vertical-inset", mode: "boolean" }) public verticalInset: boolean = false; - private verticalInsetChanged(): void { + protected verticalInsetChanged(): void { this.updateForAttributeChange(); } @@ -258,7 +258,7 @@ export class AnchoredRegion extends FoundationElement { */ @attr({ attribute: "vertical-threshold" }) public verticalThreshold: number; - private verticalThresholdChanged(): void { + protected verticalThresholdChanged(): void { this.updateForAttributeChange(); } @@ -271,7 +271,7 @@ export class AnchoredRegion extends FoundationElement { */ @attr({ attribute: "vertical-scaling" }) public verticalScaling: AxisScalingMode = "content"; - private verticalScalingChanged(): void { + protected verticalScalingChanged(): void { this.updateForAttributeChange(); } @@ -286,7 +286,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 @@ -304,7 +304,7 @@ export class AnchoredRegion extends FoundationElement { */ @attr({ attribute: "auto-update-mode" }) public autoUpdateMode: AutoUpdateMode = "anchor"; - private autoUpdateModeChanged( + protected autoUpdateModeChanged( prevMode: AutoUpdateMode, newMode: AutoUpdateMode ): void { @@ -329,7 +329,7 @@ export class AnchoredRegion extends FoundationElement { */ @observable public anchorElement: HTMLElement | null = null; - private anchorElementChanged(): void { + protected anchorElementChanged(): void { this.requestReset(); } @@ -340,7 +340,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 01e02b7f76c..0872ea2e971 100644 --- a/packages/web-components/fast-foundation/src/breadcrumb/README.md +++ b/packages/web-components/fast-foundation/src/breadcrumb/README.md @@ -120,7 +120,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 7c56affb584..11abb4aeb98 100644 --- a/packages/web-components/fast-foundation/src/breadcrumb/breadcrumb.ts +++ b/packages/web-components/fast-foundation/src/breadcrumb/breadcrumb.ts @@ -15,7 +15,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 7df1d55eb88..01d9f819fe7 100644 --- a/packages/web-components/fast-foundation/src/button/README.md +++ b/packages/web-components/fast-foundation/src/button/README.md @@ -88,10 +88,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 306625205ef..76bb488450a 100644 --- a/packages/web-components/fast-foundation/src/button/button.ts +++ b/packages/web-components/fast-foundation/src/button/button.ts @@ -56,7 +56,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; } @@ -71,7 +71,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; } @@ -86,7 +86,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; } @@ -101,7 +101,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; } @@ -116,7 +116,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; } @@ -131,7 +131,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 e229e9efc6a..50f0116a930 100644 --- a/packages/web-components/fast-foundation/src/calendar/calendar.ts +++ b/packages/web-components/fast-foundation/src/calendar/calendar.ts @@ -101,7 +101,7 @@ export class Calendar extends FoundationElement { */ @attr public locale: string = "en-US"; - private localeChanged(): void { + protected localeChanged(): void { this.dateFormatter.locale = this.locale; } @@ -125,7 +125,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; } @@ -135,7 +135,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; } @@ -145,7 +145,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; } @@ -155,7 +155,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 98f47011ba5..6d012132a35 100644 --- a/packages/web-components/fast-foundation/src/checkbox/README.md +++ b/packages/web-components/fast-foundation/src/checkbox/README.md @@ -99,6 +99,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 bd657689f7a..37aa8b48996 100644 --- a/packages/web-components/fast-foundation/src/checkbox/checkbox.ts +++ b/packages/web-components/fast-foundation/src/checkbox/checkbox.ts @@ -34,7 +34,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/data-grid/README.md b/packages/web-components/fast-foundation/src/data-grid/README.md index 62944565604..43324e809fc 100644 --- a/packages/web-components/fast-foundation/src/data-grid/README.md +++ b/packages/web-components/fast-foundation/src/data-grid/README.md @@ -118,13 +118,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 | #### Events @@ -174,13 +176,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 | #### Events @@ -252,10 +257,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 8e93960a1e4..fa39f1f13ba 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 @@ -69,7 +69,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(); } @@ -90,7 +90,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 31d653217d9..dd348ac27d9 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 @@ -34,7 +34,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(); } @@ -62,7 +62,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 23f9bc2fe82..e8993f4ef78 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 @@ -138,7 +138,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"); @@ -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 68e8a858ebd..d3706a3110b 100644 --- a/packages/web-components/fast-foundation/src/dialog/README.md +++ b/packages/web-components/fast-foundation/src/dialog/README.md @@ -63,17 +63,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 b64ae5ed12c..6071ad22dfd 100644 --- a/packages/web-components/fast-foundation/src/dialog/dialog.ts +++ b/packages/web-components/fast-foundation/src/dialog/dialog.ts @@ -49,7 +49,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 61b2d53c5a5..92bb18c5975 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 @@ -79,7 +79,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; @@ -118,7 +118,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 78dee775f45..befa3867ab0 100644 --- a/packages/web-components/fast-foundation/src/menu/README.md +++ b/packages/web-components/fast-foundation/src/menu/README.md @@ -155,12 +155,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 | #### Slots @@ -204,10 +205,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 | #### Events diff --git a/packages/web-components/fast-foundation/src/menu/menu.ts b/packages/web-components/fast-foundation/src/menu/menu.ts index eb73aded0e1..07e80e4444d 100644 --- a/packages/web-components/fast-foundation/src/menu/menu.ts +++ b/packages/web-components/fast-foundation/src/menu/menu.ts @@ -28,7 +28,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 1de536c163c..2635f6b3163 100644 --- a/packages/web-components/fast-foundation/src/progress/README.md +++ b/packages/web-components/fast-foundation/src/progress/README.md @@ -130,6 +130,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 7d8594099a6..9d9780d7379 100644 --- a/packages/web-components/fast-foundation/src/progress/base-progress.ts +++ b/packages/web-components/fast-foundation/src/progress/base-progress.ts @@ -45,7 +45,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(); } @@ -59,7 +59,7 @@ export class BaseProgress extends FoundationElement { */ @attr({ converter: nullableNumberConverter }) public min: number; - private minChanged(): void { + protected minChanged(): void { if (this.$fastController.isConnected) { this.updatePercentComplete(); } @@ -73,7 +73,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 41e0ff448b3..96ae9037c78 100644 --- a/packages/web-components/fast-foundation/src/radio-group/README.md +++ b/packages/web-components/fast-foundation/src/radio-group/README.md @@ -79,12 +79,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 | #### Events 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 8b6075f2a38..0abced80cd3 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 @@ -32,7 +32,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) { @@ -53,7 +53,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) { @@ -122,7 +122,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 1ae4f30d1d6..d4133ebf7b4 100644 --- a/packages/web-components/fast-foundation/src/radio/README.md +++ b/packages/web-components/fast-foundation/src/radio/README.md @@ -102,6 +102,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 b3903396b02..818ee01b81e 100644 --- a/packages/web-components/fast-foundation/src/radio/radio.ts +++ b/packages/web-components/fast-foundation/src/radio/radio.ts @@ -41,7 +41,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 ba3a8d23c72..232e03bdb8c 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 9bc44515f76..7c77b4f55b7 100644 --- a/packages/web-components/fast-foundation/src/search/search.ts +++ b/packages/web-components/fast-foundation/src/search/search.ts @@ -38,7 +38,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(); @@ -53,7 +53,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(); @@ -69,7 +69,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; } @@ -83,7 +83,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(); @@ -98,7 +98,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(); @@ -113,7 +113,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(); @@ -128,7 +128,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(); @@ -143,7 +143,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; } @@ -157,7 +157,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/slider-label/slider-label.ts b/packages/web-components/fast-foundation/src/slider-label/slider-label.ts index 6158a55b36f..6122f3fedcc 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 @@ -41,7 +41,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 8b1a1ebedde..d5f7ef19742 100644 --- a/packages/web-components/fast-foundation/src/slider/README.md +++ b/packages/web-components/fast-foundation/src/slider/README.md @@ -151,6 +151,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` | | @@ -227,6 +228,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 d0b57e7fc5d..602ffeae726 100644 --- a/packages/web-components/fast-foundation/src/slider/slider.ts +++ b/packages/web-components/fast-foundation/src/slider/slider.ts @@ -79,7 +79,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 ecba2f6a3c8..48b6d0f9c0a 100644 --- a/packages/web-components/fast-foundation/src/switch/README.md +++ b/packages/web-components/fast-foundation/src/switch/README.md @@ -94,6 +94,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 acd5f2f893e..33a5a262108 100644 --- a/packages/web-components/fast-foundation/src/switch/switch.ts +++ b/packages/web-components/fast-foundation/src/switch/switch.ts @@ -36,7 +36,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/text-area.ts b/packages/web-components/fast-foundation/src/text-area/text-area.ts index e0f59f7ac21..ba4779db02c 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 @@ -27,7 +27,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; } @@ -56,7 +56,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; } @@ -77,7 +77,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); } @@ -91,7 +91,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; } @@ -105,7 +105,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; } @@ -159,7 +159,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/text-field.ts b/packages/web-components/fast-foundation/src/text-field/text-field.ts index d27fb48e84f..e3c95cf230d 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 @@ -40,7 +40,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(); @@ -55,7 +55,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(); @@ -71,7 +71,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; } @@ -100,7 +100,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(); @@ -115,7 +115,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(); @@ -130,7 +130,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(); @@ -145,7 +145,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(); @@ -160,7 +160,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; } @@ -174,7 +174,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 2550e78a214..bfdf2a4be10 100644 --- a/packages/web-components/fast-foundation/src/tooltip/README.md +++ b/packages/web-components/fast-foundation/src/tooltip/README.md @@ -84,10 +84,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 | #### Events diff --git a/packages/web-components/fast-foundation/src/tooltip/tooltip.ts b/packages/web-components/fast-foundation/src/tooltip/tooltip.ts index a45af39f310..db9f9b18c63 100644 --- a/packages/web-components/fast-foundation/src/tooltip/tooltip.ts +++ b/packages/web-components/fast-foundation/src/tooltip/tooltip.ts @@ -32,7 +32,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(); @@ -48,7 +48,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(); } @@ -117,7 +117,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); @@ -178,7 +178,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 139dc525bc3..84b8cf163bd 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 | #### Events 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 126523c8758..b8f2f09751c 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 @@ -52,7 +52,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); } @@ -66,7 +66,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); } @@ -111,7 +111,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 3803cc9fdfa..c839157ad7b 100644 --- a/packages/web-components/fast-foundation/src/tree-view/README.md +++ b/packages/web-components/fast-foundation/src/tree-view/README.md @@ -117,10 +117,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 ba0fb86a75a..99e1a0d61b5 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 @@ -44,8 +44,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();