diff --git a/change/@microsoft-fast-components-1664fe06-e5d0-4d2e-9bc3-03a5b8f47500.json b/change/@microsoft-fast-components-1664fe06-e5d0-4d2e-9bc3-03a5b8f47500.json new file mode 100644 index 00000000000..6599a80b269 --- /dev/null +++ b/change/@microsoft-fast-components-1664fe06-e5d0-4d2e-9bc3-03a5b8f47500.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "convert enums to const objects and add supported typings", + "packageName": "@microsoft/fast-components", + "email": "chhol@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@microsoft-fast-foundation-a5dc80ba-706a-4c67-a539-153154e19152.json b/change/@microsoft-fast-foundation-a5dc80ba-706a-4c67-a539-153154e19152.json new file mode 100644 index 00000000000..dfb320433cc --- /dev/null +++ b/change/@microsoft-fast-foundation-a5dc80ba-706a-4c67-a539-153154e19152.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "convert enums to const objects and add supported typings", + "packageName": "@microsoft/fast-foundation", + "email": "chhol@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@microsoft-fast-web-utilities-579383e3-9ded-4d48-970c-4db8cde20b39.json b/change/@microsoft-fast-web-utilities-579383e3-9ded-4d48-970c-4db8cde20b39.json new file mode 100644 index 00000000000..70db5ae2424 --- /dev/null +++ b/change/@microsoft-fast-web-utilities-579383e3-9ded-4d48-970c-4db8cde20b39.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "convert orientation enum to const object with corresponding type", + "packageName": "@microsoft/fast-web-utilities", + "email": "chhol@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/utilities/fast-web-utilities/src/aria.ts b/packages/utilities/fast-web-utilities/src/aria.ts index 1f871bf8708..0699b1409ca 100644 --- a/packages/utilities/fast-web-utilities/src/aria.ts +++ b/packages/utilities/fast-web-utilities/src/aria.ts @@ -1,4 +1,12 @@ -export enum Orientation { - horizontal = "horizontal", - vertical = "vertical", -} +/** + * Standard orientation values + */ +export const Orientation = { + horizontal: "horizontal", + vertical: "vertical", +} as const; + +/** + * The orientation type + */ +export type Orientation = typeof Orientation[keyof typeof Orientation]; diff --git a/packages/web-components/fast-components/docs/api-report.md b/packages/web-components/fast-components/docs/api-report.md index 225753c979b..d19e8669283 100644 --- a/packages/web-components/fast-components/docs/api-report.md +++ b/packages/web-components/fast-components/docs/api-report.md @@ -1756,12 +1756,13 @@ export const sliderLabelStyles: FoundationElementTemplate; export const sliderStyles: FoundationElementTemplate; // @public -export enum StandardLuminance { - // (undocumented) - DarkMode = 0.23, - // (undocumented) - LightMode = 1 -} +export const StandardLuminance: { + readonly LightMode: 1; + readonly DarkMode: 0.23; +}; + +// @public +export type StandardLuminance = typeof StandardLuminance[keyof typeof StandardLuminance]; // @public (undocumented) export const strokeWidth: CSSDesignToken; diff --git a/packages/web-components/fast-components/src/color/utilities/base-layer-luminance.ts b/packages/web-components/fast-components/src/color/utilities/base-layer-luminance.ts index 03a15160e03..74a0f0d8354 100644 --- a/packages/web-components/fast-components/src/color/utilities/base-layer-luminance.ts +++ b/packages/web-components/fast-components/src/color/utilities/base-layer-luminance.ts @@ -9,7 +9,14 @@ export function baseLayerLuminanceSwatch(luminance: number) { * * @public */ -export enum StandardLuminance { - LightMode = 1, - DarkMode = 0.23, -} +export const StandardLuminance = { + LightMode: 1, + DarkMode: 0.23, +} as const; + +/** + * Types of recommended values for light and dark mode for {@link @microsoft/fast-components#baseLayerLuminance}. + * + * @public + */ +export type StandardLuminance = typeof StandardLuminance[keyof typeof StandardLuminance]; diff --git a/packages/web-components/fast-foundation/CEMToMarkdown.mjs b/packages/web-components/fast-foundation/CEMToMarkdown.mjs index 9512ed36708..a11baa1d067 100644 --- a/packages/web-components/fast-foundation/CEMToMarkdown.mjs +++ b/packages/web-components/fast-foundation/CEMToMarkdown.mjs @@ -67,6 +67,10 @@ for(var i = 0, modulesLength = modules.length; i < modulesLength; i++) { dec.default = replaceJSDOCLinksWithMDLinks(fixTagsInText(dec.default.replaceAll(LF, ' '))); } + if(dec.type) + { + dec.type.text = replaceJSDOCLinksWithMDLinks(fixTagsInText(dec.type.text.replaceAll(LF, ' '))); + } dec.members?.forEach(member=>{ if(member.description) { @@ -197,18 +201,22 @@ function replaceJSDOCLinksWithMDLinks(text) let startIndex = text.indexOf('{@link'); if(startIndex < 0) return text; - let endIndex = text.indexOf("}", startIndex); - if(endIndex < 0) return text; - - const jsdocLink = text.slice(startIndex, endIndex + 1); - let linkParts = jsdocLink.replace("{@link ", "").replace("}", "").split('|'); - if(linkParts.length === 1) + while(startIndex>=0) { - return text.replace(jsdocLink, linkParts[0]); - } - else - { - return text.replace(jsdocLink, "[" + linkParts[1].trim() + "](" + linkParts[0].trim() + ")"); - } + let endIndex = text.indexOf("}", startIndex); + if(endIndex < 0) return text; + const jsdocLink = text.slice(startIndex, endIndex + 1); + let linkParts = jsdocLink.replace("{@link ", "").replace("}", "").split('|'); + if(linkParts.length === 1) + { + text = text.replace(jsdocLink, linkParts[0]); + } + else + { + text = text.replace(jsdocLink, "[" + linkParts[1].trim() + "](" + linkParts[0].trim() + ")"); + } + startIndex = text.indexOf('{@link',endIndex); + } + return text; } diff --git a/packages/web-components/fast-foundation/docs/api-report.md b/packages/web-components/fast-foundation/docs/api-report.md index 2465a4f5966..8e098914421 100644 --- a/packages/web-components/fast-foundation/docs/api-report.md +++ b/packages/web-components/fast-foundation/docs/api-report.md @@ -29,10 +29,13 @@ export class Accordion extends FoundationElement { } // @public -export enum AccordionExpandMode { - multi = "multi", - single = "single" -} +export const AccordionExpandMode: { + readonly single: "single"; + readonly multi: "multi"; +}; + +// @public +export type AccordionExpandMode = typeof AccordionExpandMode[keyof typeof AccordionExpandMode]; // Warning: (ae-different-release-tags) This symbol has another declaration with a different release tag // Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "AccordionItem" because one of its declarations is marked as @internal @@ -436,7 +439,7 @@ export interface ColumnDefinition { // // @public export class Combobox extends FormAssociatedCombobox { - autocomplete: ComboboxAutocomplete | "inline" | "list" | "both" | "none" | undefined; + autocomplete: ComboboxAutocomplete | undefined; // @internal clickHandler(e: MouseEvent): boolean | void; // (undocumented) @@ -497,16 +500,15 @@ export interface Combobox extends StartEnd, DelegatesARIACombobox { } // @public -export enum ComboboxAutocomplete { - // (undocumented) - both = "both", - // (undocumented) - inline = "inline", - // (undocumented) - list = "list", - // (undocumented) - none = "none" -} +export const ComboboxAutocomplete: { + readonly inline: "inline"; + readonly list: "list"; + readonly both: "both"; + readonly none: "none"; +}; + +// @public +export type ComboboxAutocomplete = typeof ComboboxAutocomplete[keyof typeof ComboboxAutocomplete]; // @public export type ComboboxOptions = FoundationElementDefinition & StartEndOptions & { @@ -632,7 +634,7 @@ export class DataGrid extends FoundationElement { focusColumnIndex: number; focusRowIndex: number; static generateColumns: (row: object) => ColumnDefinition[]; - generateHeader: GenerateHeaderOptions | "none" | "default" | "sticky"; + generateHeader: GenerateHeaderOptions; gridTemplateColumns: string; // @internal (undocumented) handleFocus(e: FocusEvent): void; @@ -653,7 +655,7 @@ export class DataGrid extends FoundationElement { // @public export class DataGridCell extends FoundationElement { - cellType: DataGridCellTypes | "default" | "columnheader" | "rowheader"; + cellType: DataGridCellTypes; columnDefinition: ColumnDefinition | null; // @internal (undocumented) connectedCallback(): void; @@ -673,14 +675,14 @@ export class DataGridCell extends FoundationElement { export const dataGridCellTemplate: FoundationElementTemplate>; // @public -export enum DataGridCellTypes { - // (undocumented) - columnHeader = "columnheader", - // (undocumented) - default = "default", - // (undocumented) - rowHeader = "rowheader" -} +export const DataGridCellTypes: { + readonly default: "default"; + readonly columnHeader: "columnheader"; + readonly rowHeader: "rowheader"; +}; + +// @public +export type DataGridCellTypes = typeof DataGridCellTypes[keyof typeof DataGridCellTypes]; // @public export class DataGridRow extends FoundationElement { @@ -712,7 +714,7 @@ export class DataGridRow extends FoundationElement { isActiveRow: boolean; rowData: object | null; rowIndex: number; - rowType: DataGridRowTypes | "default" | "header" | "sticky-header"; + rowType: DataGridRowTypes; // @internal (undocumented) slottedCellElements: HTMLElement[]; } @@ -721,14 +723,14 @@ export class DataGridRow extends FoundationElement { export const dataGridRowTemplate: FoundationElementTemplate>; // @public -export enum DataGridRowTypes { - // (undocumented) - default = "default", - // (undocumented) - header = "header", - // (undocumented) - stickyHeader = "sticky-header" -} +export const DataGridRowTypes: { + readonly default: "default"; + readonly header: "header"; + readonly stickyHeader: "sticky-header"; +}; + +// @public +export type DataGridRowTypes = typeof DataGridRowTypes[keyof typeof DataGridRowTypes]; // @public export const dataGridTemplate: FoundationElementTemplate>; @@ -1038,14 +1040,17 @@ export function display(displayValue: CSSDisplayPropertyValue): string; // @public export class Divider extends FoundationElement { orientation: Orientation; - role: DividerRole | "separator" | "presentation"; + role: DividerRole; } // @public -export enum DividerRole { - presentation = "presentation", - separator = "separator" -} +export const DividerRole: { + readonly separator: "separator"; + readonly presentation: "presentation"; +}; + +// @public +export type DividerRole = typeof DividerRole[keyof typeof DividerRole]; // @public export const dividerTemplate: FoundationElementTemplate>; @@ -1116,19 +1121,20 @@ export class FactoryImpl implements Factory { // @public export class Flipper extends FoundationElement { - direction: FlipperDirection | "next" | "previous"; + direction: FlipperDirection; disabled: boolean; hiddenFromAT: boolean; keyupHandler(e: Event & KeyboardEvent): void; } // @public -export enum FlipperDirection { - // (undocumented) - next = "next", - // (undocumented) - previous = "previous" -} +export const FlipperDirection: { + readonly next: "next"; + readonly previous: "previous"; +}; + +// @public +export type FlipperDirection = typeof FlipperDirection[keyof typeof FlipperDirection]; // @public export type FlipperOptions = FoundationElementDefinition & { @@ -1280,14 +1286,14 @@ export class FoundationElementRegistry = LazyFoundationOption; // @public -export enum GenerateHeaderOptions { - // (undocumented) - default = "default", - // (undocumented) - none = "none", - // (undocumented) - sticky = "sticky" -} +export const GenerateHeaderOptions: { + readonly none: "none"; + readonly default: "default"; + readonly sticky: "sticky"; +}; + +// @public +export type GenerateHeaderOptions = typeof GenerateHeaderOptions[keyof typeof GenerateHeaderOptions]; // @public export const getDirection: (rootNode: HTMLElement) => Direction; @@ -1632,7 +1638,7 @@ export class MenuItem extends FoundationElement { handleMouseOver: (e: MouseEvent) => boolean; // @internal (undocumented) hasSubmenu: boolean; - role: MenuItemRole | "menuitem" | "menuitemcheckbox" | "menuitemradio"; + role: MenuItemRole; // @internal (undocumented) startColumnCount: MenuItemColumnCount; // @internal (undocumented) @@ -1658,11 +1664,14 @@ export type MenuItemOptions = FoundationElementDefinition & StartEndOptions & { }; // @public -export enum MenuItemRole { - menuitem = "menuitem", - menuitemcheckbox = "menuitemcheckbox", - menuitemradio = "menuitemradio" -} +export const MenuItemRole: { + readonly menuitem: "menuitem"; + readonly menuitemcheckbox: "menuitemcheckbox"; + readonly menuitemradio: "menuitemradio"; +}; + +// @public +export type MenuItemRole = typeof MenuItemRole[keyof typeof MenuItemRole]; // @public export const menuItemTemplate: FoundationElementTemplate, MenuItemOptions>; @@ -2094,7 +2103,7 @@ export const enum ResolverStrategy { // // @internal (undocumented) export const roleForMenuItem: { - [value in MenuItemRole]: keyof typeof MenuItemRole; + [value in keyof typeof MenuItemRole]: typeof MenuItemRole[value]; }; // @public @@ -2179,8 +2188,8 @@ export class Select extends FormAssociatedSelect { open: boolean; // @internal protected openChanged(prev: boolean | undefined, next: boolean): void; - position: SelectPosition | "above" | "below"; - positionAttribute: SelectPosition | "above" | "below"; + position: SelectPosition; + positionAttribute: SelectPosition; // (undocumented) protected positionChanged(): void; // @internal @@ -2208,12 +2217,13 @@ export type SelectOptions = FoundationElementDefinition & StartEndOptions & { }; // @public -export enum SelectPosition { - // (undocumented) - above = "above", - // (undocumented) - below = "below" -} +export const SelectPosition: { + readonly above: "above"; + readonly below: "below"; +}; + +// @public +export type SelectPosition = typeof SelectPosition[keyof typeof SelectPosition]; // @public export const selectTemplate: FoundationElementTemplate, SelectOptions>; @@ -2351,10 +2361,12 @@ export class SliderLabel extends FoundationElement { export const sliderLabelTemplate: FoundationElementTemplate>; // @public -export enum SliderMode { - // (undocumented) - singleValue = "single-value" -} +export const SliderMode: { + readonly singleValue: "single-value"; +}; + +// @public +export type SliderMode = typeof SliderMode[keyof typeof SliderMode]; // @public export type SliderOptions = FoundationElementDefinition & { @@ -2476,12 +2488,13 @@ export interface Tabs extends StartEnd { export type TabsOptions = FoundationElementDefinition & StartEndOptions; // @public -export enum TabsOrientation { - // (undocumented) - horizontal = "horizontal", - // (undocumented) - vertical = "vertical" -} +export const TabsOrientation: { + readonly vertical: "vertical"; + readonly horizontal: "horizontal"; +}; + +// @public +export type TabsOrientation = typeof TabsOrientation[keyof typeof TabsOrientation]; // @public export const tabsTemplate: FoundationElementTemplate, TabsOptions>; @@ -2512,7 +2525,7 @@ export class TextArea extends FormAssociatedTextArea { name: string; placeholder: string; readOnly: boolean; - resize: TextAreaResize | "none" | "both" | "horizontal" | "vertical"; + resize: TextAreaResize; rows: number; protected select(): void; spellcheck: boolean; @@ -2523,12 +2536,15 @@ export interface TextArea extends DelegatesARIATextbox { } // @public -export enum TextAreaResize { - both = "both", - horizontal = "horizontal", - none = "none", - vertical = "vertical" -} +export const TextAreaResize: { + readonly none: "none"; + readonly both: "both"; + readonly horizontal: "horizontal"; + readonly vertical: "vertical"; +}; + +// @public +export type TextAreaResize = typeof TextAreaResize[keyof typeof TextAreaResize]; // @public export const textAreaTemplate: FoundationElementTemplate>; @@ -2559,7 +2575,7 @@ export class TextField extends FormAssociatedTextField { protected select(): void; size: number; spellcheck: boolean; - type: TextFieldType | "email" | "password" | "tel" | "text" | "url"; + type: TextFieldType; } // @internal @@ -2573,13 +2589,16 @@ export type TextFieldOptions = FoundationElementDefinition & StartEndOptions; export const textFieldTemplate: FoundationElementTemplate, TextFieldOptions>; // @public -export enum TextFieldType { - email = "email", - password = "password", - tel = "tel", - text = "text", - url = "url" -} +export const TextFieldType: { + readonly email: "email"; + readonly password: "password"; + readonly tel: "tel"; + readonly text: "text"; + readonly url: "url"; +}; + +// @public +export type TextFieldType = typeof TextFieldType[keyof typeof TextFieldType]; // Warning: (ae-different-release-tags) This symbol has another declaration with a different release tag // Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "Toolbar" because one of its declarations is marked as @internal @@ -2647,7 +2666,7 @@ export class Tooltip extends FoundationElement { // @internal (undocumented) 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"; + position: TooltipPosition; // @internal region: AnchoredRegion; // @internal (undocumented) @@ -2667,22 +2686,25 @@ export class Tooltip extends FoundationElement { } // @public -export enum TooltipPosition { - bottom = "bottom", - bottomEnd = "bottom-end", - bottomLeft = "bottom-left", - bottomRight = "bottom-right", - bottomStart = "bottom-start", - end = "end", - left = "left", - right = "right", - start = "start", - top = "top", - topEnd = "top-end", - topLeft = "top-left", - topRight = "top-right", - topStart = "top-start" -} +export const TooltipPosition: { + readonly top: "top"; + readonly right: "right"; + readonly bottom: "bottom"; + readonly left: "left"; + readonly start: "start"; + readonly end: "end"; + readonly topLeft: "top-left"; + readonly topRight: "top-right"; + readonly bottomLeft: "bottom-left"; + readonly bottomRight: "bottom-right"; + readonly topStart: "top-start"; + readonly topEnd: "top-end"; + readonly bottomStart: "bottom-start"; + readonly bottomEnd: "bottom-end"; +}; + +// @public +export type TooltipPosition = typeof TooltipPosition[keyof typeof TooltipPosition]; // @public export const tooltipTemplate: FoundationElementTemplate>; diff --git a/packages/web-components/fast-foundation/src/accordion/README.md b/packages/web-components/fast-foundation/src/accordion/README.md index aac8dda56b8..2f9ad9eba2f 100644 --- a/packages/web-components/fast-foundation/src/accordion/README.md +++ b/packages/web-components/fast-foundation/src/accordion/README.md @@ -147,6 +147,14 @@ export const myAccordionItem = AccordionItem.compose({
+### Variables + +| Name | Description | Type | +| --------------------- | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `AccordionExpandMode` | Expand mode for Accordion | `{ /** * Designates only a single @microsoft/fast-foundation#(AccordionItem:class) can be open a time. */ single: "single", /** * Designates multiple [AccordionItems](@microsoft/fast-foundation#(AccordionItem:class)) can be open simultaneously. */ multi: "multi", }` | + +
+ ### class: `AccordionItem` diff --git a/packages/web-components/fast-foundation/src/accordion/accordion.ts b/packages/web-components/fast-foundation/src/accordion/accordion.ts index c739c20e7c3..40a2134fb85 100644 --- a/packages/web-components/fast-foundation/src/accordion/accordion.ts +++ b/packages/web-components/fast-foundation/src/accordion/accordion.ts @@ -13,17 +13,23 @@ import { AccordionItem } from "../accordion-item/accordion-item.js"; * Expand mode for {@link Accordion} * @public */ -export enum AccordionExpandMode { +export const AccordionExpandMode = { /** * Designates only a single {@link @microsoft/fast-foundation#(AccordionItem:class) } can be open a time. */ - single = "single", + single: "single", /** * Designates multiple {@link @microsoft/fast-foundation#(AccordionItem:class) | AccordionItems} can be open simultaneously. */ - multi = "multi", -} + multi: "multi", +} as const; + +/** + * Type for the {@link Accordion} Expand Mode + * @public + */ +export type AccordionExpandMode = typeof AccordionExpandMode[keyof typeof AccordionExpandMode]; /** * An Accordion Custom HTML Element diff --git a/packages/web-components/fast-foundation/src/calendar/date-formatter.ts b/packages/web-components/fast-foundation/src/calendar/date-formatter.ts index da9d1c3df1e..bdd5a25e301 100644 --- a/packages/web-components/fast-foundation/src/calendar/date-formatter.ts +++ b/packages/web-components/fast-foundation/src/calendar/date-formatter.ts @@ -1,23 +1,23 @@ /** - * enum representing the different day formats + * A type representing the different day formats * @public */ export type DayFormat = "2-digit" | "numeric"; /** - * enum representing the different weekday formats + * A type representing the different weekday formats * @public */ export type WeekdayFormat = "long" | "narrow" | "short"; /** - * enum representing the different month formats + * A type representing the different month formats * @public */ export type MonthFormat = "2-digit" | "long" | "narrow" | "numeric" | "short"; /** - * enum representing the different year formats + * A type representing the different year formats * @public */ export type YearFormat = "2-digit" | "numeric"; diff --git a/packages/web-components/fast-foundation/src/combobox/README.md b/packages/web-components/fast-foundation/src/combobox/README.md index 025105b1d2b..b1c9ae47f25 100644 --- a/packages/web-components/fast-foundation/src/combobox/README.md +++ b/packages/web-components/fast-foundation/src/combobox/README.md @@ -87,6 +87,16 @@ See [listbox-option](/docs/components/listbox-option) for more information. +### Variables + +| Name | Description | Type | +| ---------------------- | --------------------------------- | --------------------------------------------------------------------------------- | +| `ComboboxAutocomplete` | Autocomplete values for combobox. | `{ inline: "inline", list: "list", both: "both", none: "none", }` | + +
+ + + ### class: `Combobox` #### Superclass @@ -103,25 +113,25 @@ 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 | -| `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 | `ComboboxAutocomplete 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 | +| `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 diff --git a/packages/web-components/fast-foundation/src/combobox/combobox.options.ts b/packages/web-components/fast-foundation/src/combobox/combobox.options.ts index 09c88b5ceb9..b1328bafbbe 100644 --- a/packages/web-components/fast-foundation/src/combobox/combobox.options.ts +++ b/packages/web-components/fast-foundation/src/combobox/combobox.options.ts @@ -2,9 +2,15 @@ * Autocomplete values for combobox. * @public */ -export enum ComboboxAutocomplete { - inline = "inline", - list = "list", - both = "both", - none = "none", -} +export const ComboboxAutocomplete = { + inline: "inline", + list: "list", + both: "both", + none: "none", +} as const; + +/** + * Autocomplete type for combobox. + * @public + */ +export type ComboboxAutocomplete = typeof ComboboxAutocomplete[keyof typeof ComboboxAutocomplete]; diff --git a/packages/web-components/fast-foundation/src/combobox/combobox.ts b/packages/web-components/fast-foundation/src/combobox/combobox.ts index a9d90a67b4c..63538e6be2b 100644 --- a/packages/web-components/fast-foundation/src/combobox/combobox.ts +++ b/packages/web-components/fast-foundation/src/combobox/combobox.ts @@ -53,7 +53,7 @@ export class Combobox extends FormAssociatedCombobox { * HTML Attribute: autocomplete */ @attr({ attribute: "autocomplete", mode: "fromView" }) - autocomplete: ComboboxAutocomplete | "inline" | "list" | "both" | "none" | undefined; + autocomplete: ComboboxAutocomplete | undefined; /** * Reference to the internal text input element. 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 38f21a3837e..22a8f0e77e5 100644 --- a/packages/web-components/fast-foundation/src/data-grid/README.md +++ b/packages/web-components/fast-foundation/src/data-grid/README.md @@ -104,15 +104,15 @@ export const myDataGrid = DataGrid.compose({ #### Fields -| Name | Privacy | Type | Default | Description | Inherited From | -| ------------------ | ------- | ----------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | -| `cellType` | public | `DataGridCellTypes or "default" or "columnheader" or "rowheader"` | | The type of cell | | -| `gridColumn` | public | `string` | | The column index of the cell. This will be applied to the css grid-column-index value applied to the cell | | -| `rowData` | public | `object or null` | `null` | The base data for the parent row | | -| `columnDefinition` | public | `ColumnDefinition or null` | `null` | The base data for the column | | -| `$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 | +| ------------------ | ------- | ------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | +| `cellType` | public | `DataGridCellTypes` | | The type of cell | | +| `gridColumn` | public | `string` | | The column index of the cell. This will be applied to the css grid-column-index value applied to the cell | | +| `rowData` | public | `object or null` | `null` | The base data for the parent row | | +| `columnDefinition` | public | `ColumnDefinition or null` | `null` | The base data for the column | | +| `$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 @@ -157,18 +157,18 @@ export const myDataGrid = DataGrid.compose({ #### Fields -| Name | Privacy | Type | Default | Description | Inherited From | -| ------------------------ | ------- | -------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | -| `gridTemplateColumns` | public | `string` | | String that gets applied to the the css gridTemplateColumns attribute for the row | | -| `rowType` | public | `DataGridRowTypes or "default" or "header" or "sticky-header"` | | The type of row | | -| `rowData` | public | `object or null` | `null` | The base data for this row | | -| `columnDefinitions` | public | `ColumnDefinition[] or null` | `null` | The column definitions of the row | | -| `cellItemTemplate` | public | `ViewTemplate or undefined` | | The template used to render cells in generated rows. | | -| `headerCellItemTemplate` | public | `ViewTemplate or undefined` | | The template used to render header cells in generated rows. | | -| `rowIndex` | public | `number` | | The index of the row in the parent grid. This is typically set programmatically by the parent grid. | | -| `$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 | +| ------------------------ | ------- | ------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | +| `gridTemplateColumns` | public | `string` | | String that gets applied to the the css gridTemplateColumns attribute for the row | | +| `rowType` | public | `DataGridRowTypes` | | The type of row | | +| `rowData` | public | `object or null` | `null` | The base data for this row | | +| `columnDefinitions` | public | `ColumnDefinition[] or null` | `null` | The column definitions of the row | | +| `cellItemTemplate` | public | `ViewTemplate or undefined` | | The template used to render cells in generated rows. | | +| `headerCellItemTemplate` | public | `ViewTemplate or undefined` | | The template used to render header cells in generated rows. | | +| `rowIndex` | public | `number` | | The index of the row in the parent grid. This is typically set programmatically by the parent grid. | | +| `$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 @@ -203,6 +203,18 @@ export const myDataGrid = DataGrid.compose({ +### Variables + +| Name | Description | Type | +| ----------------------- | ------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | +| `GenerateHeaderOptions` | Enumerates the data grid auto generated header options default option generates a non-sticky header row | `{ none: "none", default: "default", sticky: "sticky", }` | +| `DataGridCellTypes` | Enumerates possible data grid cell types. | `{ default: "default", columnHeader: "columnheader", rowHeader: "rowheader", }` | +| `DataGridRowTypes` | Enumerates possible data grid row types | `{ default: "default", header: "header", stickyHeader: "sticky-header", }` | + +
+ + + ### class: `DataGrid` #### Superclass @@ -219,22 +231,22 @@ export const myDataGrid = DataGrid.compose({ #### Fields -| Name | Privacy | Type | Default | Description | Inherited From | -| ------------------------ | ------- | ---------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | -| `noTabbing` | public | `boolean` | `false` | When true the component will not add itself to the tab queue. Default is false. | | -| `generateHeader` | public | `GenerateHeaderOptions or "none" or "default" or "sticky"` | | Whether the grid should automatically generate a header row and its type | | -| `gridTemplateColumns` | public | `string` | | String that gets applied to the the css gridTemplateColumns attribute of child rows | | -| `rowsData` | public | `object[]` | `[]` | The data being displayed in the grid | | -| `columnDefinitions` | public | `ColumnDefinition[] or null` | `null` | The column definitions of the grid | | -| `rowItemTemplate` | public | `ViewTemplate` | | The template to use for the programmatic generation of rows | | -| `cellItemTemplate` | public | `ViewTemplate or undefined` | | The template used to render cells in generated rows. | | -| `headerCellItemTemplate` | public | `ViewTemplate or undefined` | | The template used to render header cells in generated rows. | | -| `focusRowIndex` | public | `number` | `0` | The index of the row that will receive focus the next time the grid is focused. This value changes as focus moves to different rows within the grid. Changing this value when focus is already within the grid moves focus to the specified row. | | -| `focusColumnIndex` | public | `number` | `0` | The index of the column that will receive focus the next time the grid is focused. This value changes as focus moves to different rows within the grid. Changing this value when focus is already within the grid moves focus to the specified column. | | -| `rowElementTag` | public | `string` | | Set by the component templates. | | -| `$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 | +| ------------------------ | ------- | ------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | +| `noTabbing` | public | `boolean` | `false` | When true the component will not add itself to the tab queue. Default is false. | | +| `generateHeader` | public | `GenerateHeaderOptions` | | Whether the grid should automatically generate a header row and its type | | +| `gridTemplateColumns` | public | `string` | | String that gets applied to the the css gridTemplateColumns attribute of child rows | | +| `rowsData` | public | `object[]` | `[]` | The data being displayed in the grid | | +| `columnDefinitions` | public | `ColumnDefinition[] or null` | `null` | The column definitions of the grid | | +| `rowItemTemplate` | public | `ViewTemplate` | | The template to use for the programmatic generation of rows | | +| `cellItemTemplate` | public | `ViewTemplate or undefined` | | The template used to render cells in generated rows. | | +| `headerCellItemTemplate` | public | `ViewTemplate or undefined` | | The template used to render header cells in generated rows. | | +| `focusRowIndex` | public | `number` | `0` | The index of the row that will receive focus the next time the grid is focused. This value changes as focus moves to different rows within the grid. Changing this value when focus is already within the grid moves focus to the specified row. | | +| `focusColumnIndex` | public | `number` | `0` | The index of the column that will receive focus the next time the grid is focused. This value changes as focus moves to different rows within the grid. Changing this value when focus is already within the grid moves focus to the specified column. | | +| `rowElementTag` | public | `string` | | Set by the component templates. | | +| `$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/data-grid/data-grid-cell.ts b/packages/web-components/fast-foundation/src/data-grid/data-grid-cell.ts index b0a0b8327d9..8e93960a1e4 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 @@ -51,8 +51,7 @@ export class DataGridCell extends FoundationElement { * HTML Attribute: cell-type */ @attr({ attribute: "cell-type" }) - public cellType: DataGridCellTypes | "default" | "columnheader" | "rowheader" = - DataGridCellTypes.default; + public cellType: DataGridCellTypes = DataGridCellTypes.default; private cellTypeChanged(): void { if (this.$fastController.isConnected) { this.updateCellView(); 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 c98ece3a2dc..221e5b1e9bd 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 @@ -48,8 +48,7 @@ export class DataGridRow extends FoundationElement { * HTML Attribute: row-type */ @attr({ attribute: "row-type" }) - public rowType: DataGridRowTypes | "default" | "header" | "sticky-header" = - DataGridRowTypes.default; + public rowType: DataGridRowTypes = DataGridRowTypes.default; private rowTypeChanged(): void { if (this.$fastController.isConnected) { this.updateItemTemplate(); diff --git a/packages/web-components/fast-foundation/src/data-grid/data-grid.options.ts b/packages/web-components/fast-foundation/src/data-grid/data-grid.options.ts index ef9d9a561f8..98558f5db3f 100644 --- a/packages/web-components/fast-foundation/src/data-grid/data-grid.options.ts +++ b/packages/web-components/fast-foundation/src/data-grid/data-grid.options.ts @@ -1,33 +1,54 @@ /** - * Enumerates auto generated header options + * Enumerates the data grid auto generated header options * default option generates a non-sticky header row * * @public */ -export enum GenerateHeaderOptions { - none = "none", - default = "default", - sticky = "sticky", -} +export const GenerateHeaderOptions = { + none: "none", + default: "default", + sticky: "sticky", +} as const; /** - * Enumerates possible cell types. + * The types for the data grid auto generated header options * * @public */ -export enum DataGridCellTypes { - default = "default", - columnHeader = "columnheader", - rowHeader = "rowheader", -} +export type GenerateHeaderOptions = typeof GenerateHeaderOptions[keyof typeof GenerateHeaderOptions]; /** - * Enumerates possible row types + * Enumerates possible data grid cell types. * * @public */ -export enum DataGridRowTypes { - default = "default", - header = "header", - stickyHeader = "sticky-header", -} +export const DataGridCellTypes = { + default: "default", + columnHeader: "columnheader", + rowHeader: "rowheader", +} as const; + +/** + * The possible cell types. + * + * @public + */ +export type DataGridCellTypes = typeof DataGridCellTypes[keyof typeof DataGridCellTypes]; + +/** + * Enumerates possible data grid row types + * + * @public + */ +export const DataGridRowTypes = { + default: "default", + header: "header", + stickyHeader: "sticky-header", +} as const; + +/** + * The possible data grid row types + * + * @public + */ +export type DataGridRowTypes = typeof DataGridRowTypes[keyof typeof DataGridRowTypes]; 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 efad18eeeff..f022a2c5464 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 @@ -161,8 +161,7 @@ export class DataGrid extends FoundationElement { * HTML Attribute: generate-header */ @attr({ attribute: "generate-header" }) - public generateHeader: GenerateHeaderOptions | "none" | "default" | "sticky" = - GenerateHeaderOptions.default; + public generateHeader: GenerateHeaderOptions = GenerateHeaderOptions.default; private generateHeaderChanged(): void { if (this.$fastController.isConnected) { this.toggleGeneratedHeader(); diff --git a/packages/web-components/fast-foundation/src/divider/README.md b/packages/web-components/fast-foundation/src/divider/README.md index 0f17e143215..1c25c090e0e 100644 --- a/packages/web-components/fast-foundation/src/divider/README.md +++ b/packages/web-components/fast-foundation/src/divider/README.md @@ -44,6 +44,16 @@ export const myDivider = Divider.compose({ +### Variables + +| Name | Description | Type | +| ------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `DividerRole` | Divider roles | `{ /** * The divider semantically separates content */ separator: "separator", /** * The divider has no semantic value and is for visual presentation only. */ presentation: "presentation", }` | + +
+ + + ### class: `Divider` #### Superclass @@ -54,13 +64,13 @@ export const myDivider = Divider.compose({ #### Fields -| Name | Privacy | Type | Default | Description | Inherited From | -| --------------- | ------- | ---------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | -| `role` | public | `DividerRole or "separator" or "presentation"` | | The role of the element. | | -| `orientation` | public | `Orientation` | | The orientation of the divider. | | -| `$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 | +| --------------- | ------- | ------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | +| `role` | public | `DividerRole` | | The role of the element. | | +| `orientation` | public | `Orientation` | | The orientation of the divider. | | +| `$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/divider/divider.options.ts b/packages/web-components/fast-foundation/src/divider/divider.options.ts index 0d14b146566..93c36f5b21b 100644 --- a/packages/web-components/fast-foundation/src/divider/divider.options.ts +++ b/packages/web-components/fast-foundation/src/divider/divider.options.ts @@ -2,14 +2,20 @@ * Divider roles * @public */ -export enum DividerRole { +export const DividerRole = { /** * The divider semantically separates content */ - separator = "separator", + separator: "separator", /** * The divider has no semantic value and is for visual presentation only. */ - presentation = "presentation", -} + presentation: "presentation", +} as const; + +/** + * The types for Divider roles + * @public + */ +export type DividerRole = typeof DividerRole[keyof typeof DividerRole]; diff --git a/packages/web-components/fast-foundation/src/divider/divider.ts b/packages/web-components/fast-foundation/src/divider/divider.ts index d0f58c4d10b..9cc4ce8a948 100644 --- a/packages/web-components/fast-foundation/src/divider/divider.ts +++ b/packages/web-components/fast-foundation/src/divider/divider.ts @@ -16,12 +16,11 @@ export class Divider extends FoundationElement { * The role of the element. * * @public - * @defaultValue - {@link DividerRole.separator} * @remarks * HTML Attribute: role */ @attr - public role: DividerRole | "separator" | "presentation" = DividerRole.separator; + public role: DividerRole = DividerRole.separator; /** * The orientation of the divider. diff --git a/packages/web-components/fast-foundation/src/flipper/README.md b/packages/web-components/fast-foundation/src/flipper/README.md index de5be1948e6..2d9f105d8bf 100644 --- a/packages/web-components/fast-foundation/src/flipper/README.md +++ b/packages/web-components/fast-foundation/src/flipper/README.md @@ -77,6 +77,16 @@ export const myFlipper = Flipper.compose({ +### Variables + +| Name | Description | Type | +| ------------------ | ---------------------------------- | ------------------------------------------------- | +| `FlipperDirection` | The direction options for flipper. | `{ next: "next", previous: "previous", }` | + +
+ + + ### class: `Flipper` #### Superclass @@ -87,14 +97,14 @@ export const myFlipper = Flipper.compose({ #### Fields -| Name | Privacy | Type | Default | Description | Inherited From | -| --------------- | ------- | ------------------------------------------ | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | -| `disabled` | public | `boolean` | | The disabled state of the flipper. | | -| `hiddenFromAT` | public | `boolean` | `true` | Indicates the flipper should be hidden from assistive technology. Because flippers are often supplementary navigation, they are often hidden from assistive technology. | | -| `direction` | public | `FlipperDirection or "next" or "previous"` | | The direction that the flipper implies navigating. | | -| `$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 | +| --------------- | ------- | ------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | +| `disabled` | public | `boolean` | | The disabled state of the flipper. | | +| `hiddenFromAT` | public | `boolean` | `true` | Indicates the flipper should be hidden from assistive technology. Because flippers are often supplementary navigation, they are often hidden from assistive technology. | | +| `direction` | public | `FlipperDirection` | | The direction that the flipper implies navigating. | | +| `$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/flipper/flipper.options.ts b/packages/web-components/fast-foundation/src/flipper/flipper.options.ts index 6980b3f77ba..ee462bf0086 100644 --- a/packages/web-components/fast-foundation/src/flipper/flipper.options.ts +++ b/packages/web-components/fast-foundation/src/flipper/flipper.options.ts @@ -2,7 +2,13 @@ * The direction options for flipper. * @public */ -export enum FlipperDirection { - next = "next", - previous = "previous", -} +export const FlipperDirection = { + next: "next", + previous: "previous", +} as const; + +/** + * The types for the flipper direction options. + * @public + */ +export type FlipperDirection = typeof FlipperDirection[keyof typeof FlipperDirection]; diff --git a/packages/web-components/fast-foundation/src/flipper/flipper.ts b/packages/web-components/fast-foundation/src/flipper/flipper.ts index af542c7282b..aec9ac4f11a 100644 --- a/packages/web-components/fast-foundation/src/flipper/flipper.ts +++ b/packages/web-components/fast-foundation/src/flipper/flipper.ts @@ -57,7 +57,7 @@ export class Flipper extends FoundationElement { * HTML Attribute: direction */ @attr - public direction: FlipperDirection | "next" | "previous" = FlipperDirection.next; + public direction: FlipperDirection = FlipperDirection.next; /** * Simulate a click event when the flipper has focus and the user hits enter or space keys diff --git a/packages/web-components/fast-foundation/src/menu-item/menu-item.options.ts b/packages/web-components/fast-foundation/src/menu-item/menu-item.options.ts index 9a11efe151d..aa90793e6a5 100644 --- a/packages/web-components/fast-foundation/src/menu-item/menu-item.options.ts +++ b/packages/web-components/fast-foundation/src/menu-item/menu-item.options.ts @@ -2,27 +2,35 @@ * Menu items roles. * @public */ -export enum MenuItemRole { +export const MenuItemRole = { /** * The menu item has a "menuitem" role */ - menuitem = "menuitem", + menuitem: "menuitem", /** * The menu item has a "menuitemcheckbox" role */ - menuitemcheckbox = "menuitemcheckbox", + menuitemcheckbox: "menuitemcheckbox", /** * The menu item has a "menuitemradio" role */ - menuitemradio = "menuitemradio", -} + menuitemradio: "menuitemradio", +} as const; + +/** + * The types for menu item roles + * @public + */ +export type MenuItemRole = typeof MenuItemRole[keyof typeof MenuItemRole]; /** * @internal */ -export const roleForMenuItem: { [value in MenuItemRole]: keyof typeof MenuItemRole } = { +export const roleForMenuItem: { + [value in keyof typeof MenuItemRole]: typeof MenuItemRole[value]; +} = { [MenuItemRole.menuitem]: "menuitem", [MenuItemRole.menuitemcheckbox]: "menuitemcheckbox", [MenuItemRole.menuitemradio]: "menuitemradio", 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 a734f592d8e..61b2d53c5a5 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 @@ -107,8 +107,7 @@ export class MenuItem extends FoundationElement { * HTML Attribute: role */ @attr - public role: MenuItemRole | "menuitem" | "menuitemcheckbox" | "menuitemradio" = - MenuItemRole.menuitem; + public role: MenuItemRole = MenuItemRole.menuitem; /** * The checked value of the element. diff --git a/packages/web-components/fast-foundation/src/menu/README.md b/packages/web-components/fast-foundation/src/menu/README.md index 0a9c2030342..65f1573c893 100644 --- a/packages/web-components/fast-foundation/src/menu/README.md +++ b/packages/web-components/fast-foundation/src/menu/README.md @@ -171,6 +171,16 @@ export const myMenuItem = MenuItem.compose({ +### Variables + +| Name | Description | Type | +| -------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `MenuItemRole` | Menu items roles. | `{ /** * The menu item has a "menuitem" role */ menuitem: "menuitem", /** * The menu item has a "menuitemcheckbox" role */ menuitemcheckbox: "menuitemcheckbox", /** * The menu item has a "menuitemradio" role */ menuitemradio: "menuitemradio", }` | + +
+ + + ### class: `MenuItem` #### Superclass @@ -181,15 +191,15 @@ export const myMenuItem = MenuItem.compose({ #### Fields -| Name | Privacy | Type | Default | Description | Inherited From | -| --------------- | ------- | --------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | -| `disabled` | public | `boolean` | | The disabled state of the element. | | -| `expanded` | public | `boolean` | | The expanded state of the element. | | -| `role` | public | `MenuItemRole or "menuitem" or "menuitemcheckbox" or "menuitemradio"` | | The role of the element. | | -| `checked` | public | `boolean` | | The checked value of the element. | | -| `$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 | +| --------------- | ------- | ------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | +| `disabled` | public | `boolean` | | The disabled state of the element. | | +| `expanded` | public | `boolean` | | The expanded state of the element. | | +| `role` | public | `MenuItemRole` | | The role of the element. | | +| `checked` | public | `boolean` | | The checked value of the element. | | +| `$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/number-field/README.md b/packages/web-components/fast-foundation/src/number-field/README.md index 16a9725145d..27acae64fae 100644 --- a/packages/web-components/fast-foundation/src/number-field/README.md +++ b/packages/web-components/fast-foundation/src/number-field/README.md @@ -92,7 +92,7 @@ This component is built with the expectation that focus is delegated to the inpu | `autofocus` | public | `boolean` | | Indicates that this element should get focus after the page finishes loading. See [autofocus HTML attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautofocus) for more information. | | | `hideStep` | public | `boolean` | `false` | When true, spin buttons will not be rendered | | | `placeholder` | public | `string` | | Sets the placeholder value of the element, generally used to provide a hint to the user. | | -| `list` | public | `string` | | Allows associating a [datalist](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist) to the element by {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/id}. | | +| `list` | public | `string` | | Allows associating a [datalist](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist) to the element by https://developer.mozilla.org/en-US/docs/Web/API/Element/id. | | | `maxlength` | public | `number` | | The maximum number of characters a user can enter. | | | `minlength` | public | `number` | | The minimum number of characters a user can enter. | | | `size` | public | `number` | | Sets the width of the element to a specified number of characters. | | diff --git a/packages/web-components/fast-foundation/src/search/README.md b/packages/web-components/fast-foundation/src/search/README.md index 8d936eefa22..ba3a8d23c72 100644 --- a/packages/web-components/fast-foundation/src/search/README.md +++ b/packages/web-components/fast-foundation/src/search/README.md @@ -74,7 +74,7 @@ This component is built with the expectation that focus is delegated to the inpu | `readOnly` | public | `boolean` | | When true, the control will be immutable by user interaction. See [readonly HTML attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) for more information. | | | `autofocus` | public | `boolean` | | Indicates that this element should get focus after the page finishes loading. See [autofocus HTML attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautofocus) for more information. | | | `placeholder` | public | `string` | | Sets the placeholder value of the element, generally used to provide a hint to the user. | | -| `list` | public | `string` | | Allows associating a [datalist](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist) to the element by {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/id}. | | +| `list` | public | `string` | | Allows associating a [datalist](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist) to the element by https://developer.mozilla.org/en-US/docs/Web/API/Element/id. | | | `maxlength` | public | `number` | | The maximum number of characters a user can enter. | | | `minlength` | public | `number` | | The minimum number of characters a user can enter. | | | `pattern` | public | `string` | | A regular expression that the value must match to pass validation. | | diff --git a/packages/web-components/fast-foundation/src/select/README.md b/packages/web-components/fast-foundation/src/select/README.md index 64d7a3c7a34..28162a82f46 100644 --- a/packages/web-components/fast-foundation/src/select/README.md +++ b/packages/web-components/fast-foundation/src/select/README.md @@ -77,6 +77,16 @@ See [listbox-option](/docs/components/listbox-option) for more information. +### Variables + +| Name | Description | Type | +| ---------------- | ------------------------------------------------------------- | --------------------------------------------- | +| `SelectPosition` | Positioning directions for the listbox when a select is open. | `{ above: "above", below: "below", }` | + +
+ + + ### class: `Select` #### Superclass @@ -93,25 +103,25 @@ See [listbox-option](/docs/components/listbox-option) for more information. #### Fields -| Name | Privacy | Type | Default | Description | Inherited From | -| ------------------- | --------- | -------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | -| `open` | public | `boolean` | `false` | The open attribute. | | -| `value` | public | | | The value property. | | -| `positionAttribute` | public | `SelectPosition or "above" or "below"` | | Reflects the placement for the listbox when the select is open. | | -| `position` | public | `SelectPosition or "above" or "below"` | | Holds the current state for the calculated position of the listbox. | | -| `displayValue` | public | `string` | | The value displayed on the button. | | -| `proxy` | | | | | FormAssociatedSelect | -| `multiple` | public | `boolean` | | Indicates if the listbox is in multi-selection mode. | ListboxElement | -| `size` | public | `number` | | The maximum number of options to display. | ListboxElement | -| `length` | public | `number` | | The number of options. | Listbox | -| `options` | public | `ListboxOption[]` | | The list of options. | Listbox | -| `typeAheadExpired` | protected | | | | Listbox | -| `disabled` | public | `boolean` | | The disabled state of the listbox. | 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 | +| ------------------- | --------- | ------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | +| `open` | public | `boolean` | `false` | The open attribute. | | +| `value` | public | | | The value property. | | +| `positionAttribute` | public | `SelectPosition` | | Reflects the placement for the listbox when the select is open. | | +| `position` | public | `SelectPosition` | | Holds the current state for the calculated position of the listbox. | | +| `displayValue` | public | `string` | | The value displayed on the button. | | +| `proxy` | | | | | FormAssociatedSelect | +| `multiple` | public | `boolean` | | Indicates if the listbox is in multi-selection mode. | ListboxElement | +| `size` | public | `number` | | The maximum number of options to display. | ListboxElement | +| `length` | public | `number` | | The number of options. | Listbox | +| `options` | public | `ListboxOption[]` | | The list of options. | Listbox | +| `typeAheadExpired` | protected | | | | Listbox | +| `disabled` | public | `boolean` | | The disabled state of the listbox. | 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 diff --git a/packages/web-components/fast-foundation/src/select/select.options.ts b/packages/web-components/fast-foundation/src/select/select.options.ts index 28ff709f5b0..e1b12d28094 100644 --- a/packages/web-components/fast-foundation/src/select/select.options.ts +++ b/packages/web-components/fast-foundation/src/select/select.options.ts @@ -2,7 +2,13 @@ * Positioning directions for the listbox when a select is open. * @public */ -export enum SelectPosition { - above = "above", - below = "below", -} +export const SelectPosition = { + above: "above", + below: "below", +} as const; + +/** + * Types for positioning the select element listbox when open + * @public + */ +export type SelectPosition = typeof SelectPosition[keyof typeof SelectPosition]; diff --git a/packages/web-components/fast-foundation/src/select/select.ts b/packages/web-components/fast-foundation/src/select/select.ts index 51be754ea66..7de6ce2ba4e 100644 --- a/packages/web-components/fast-foundation/src/select/select.ts +++ b/packages/web-components/fast-foundation/src/select/select.ts @@ -195,7 +195,7 @@ export class Select extends FormAssociatedSelect { * @public */ @attr({ attribute: "position" }) - public positionAttribute: SelectPosition | "above" | "below"; + public positionAttribute: SelectPosition; /** * Indicates the initial state of the position attribute. @@ -210,7 +210,7 @@ export class Select extends FormAssociatedSelect { * @public */ @observable - public position: SelectPosition | "above" | "below" = SelectPosition.below; + public position: SelectPosition = SelectPosition.below; protected positionChanged() { this.positionAttribute = this.position; this.setPositioning(); diff --git a/packages/web-components/fast-foundation/src/slider/README.md b/packages/web-components/fast-foundation/src/slider/README.md index 6f101b9edfd..51731294911 100644 --- a/packages/web-components/fast-foundation/src/slider/README.md +++ b/packages/web-components/fast-foundation/src/slider/README.md @@ -193,6 +193,14 @@ export const mySliderLabel = SliderLabel.compose({
+### Variables + +| Name | Description | Type | +| ------------ | ------------------------------------------------------------------- | -------------------------------------- | +| `SliderMode` | The selection modes of a @microsoft/fast-foundation#(Slider:class). | `{ singleValue: "single-value", }` | + +
+ ### class: `SliderLabel` diff --git a/packages/web-components/fast-foundation/src/slider/slider.ts b/packages/web-components/fast-foundation/src/slider/slider.ts index aa72f844ec0..c24d4b431c6 100644 --- a/packages/web-components/fast-foundation/src/slider/slider.ts +++ b/packages/web-components/fast-foundation/src/slider/slider.ts @@ -23,9 +23,15 @@ import { FormAssociatedSlider } from "./slider.form-associated.js"; * The selection modes of a {@link @microsoft/fast-foundation#(Slider:class)}. * @public */ -export enum SliderMode { - singleValue = "single-value", -} +export const SliderMode = { + singleValue: "single-value", +} as const; + +/** + * The types for the selection mode of the slider + * @public + */ +export type SliderMode = typeof SliderMode[keyof typeof SliderMode]; /** * The configuration structure of {@link @microsoft/fast-foundation#(Slider:class)}. diff --git a/packages/web-components/fast-foundation/src/tabs/README.md b/packages/web-components/fast-foundation/src/tabs/README.md index 4c3c8b6ad82..e982331a615 100644 --- a/packages/web-components/fast-foundation/src/tabs/README.md +++ b/packages/web-components/fast-foundation/src/tabs/README.md @@ -167,6 +167,14 @@ export const myTabs = Tabs.compose({
+### Variables + +| Name | Description | Type | +| ----------------- | ------------------------------------------------------------------------ | ------------------------------------------------------------- | +| `TabsOrientation` | The orientation of the @microsoft/fast-foundation#(Tabs:class) component | `{ vertical: "vertical", horizontal: "horizontal", }` | + +
+ ### class: `TabPanel` diff --git a/packages/web-components/fast-foundation/src/tabs/tabs.ts b/packages/web-components/fast-foundation/src/tabs/tabs.ts index c403a0e3f64..2a7625ff44b 100644 --- a/packages/web-components/fast-foundation/src/tabs/tabs.ts +++ b/packages/web-components/fast-foundation/src/tabs/tabs.ts @@ -26,10 +26,16 @@ export type TabsOptions = FoundationElementDefinition & StartEndOptions; * The orientation of the {@link @microsoft/fast-foundation#(Tabs:class)} component * @public */ -export enum TabsOrientation { - vertical = "vertical", - horizontal = "horizontal", -} +export const TabsOrientation = { + vertical: "vertical", + horizontal: "horizontal", +} as const; + +/** + * The types for the Tabs component + * @public + */ +export type TabsOrientation = typeof TabsOrientation[keyof typeof TabsOrientation]; /** * A Tabs Custom HTML Element. 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 90d313dfefd..2ebb69fca78 100644 --- a/packages/web-components/fast-foundation/src/text-area/README.md +++ b/packages/web-components/fast-foundation/src/text-area/README.md @@ -54,6 +54,16 @@ This component is built with the expectation that focus is delegated to the inpu +### Variables + +| Name | Description | Type | +| ---------------- | -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `TextAreaResize` | Resize mode for a TextArea | `{ /** * No resize. */ none: "none", /** * Resize vertically and horizontally. */ both: "both", /** * Resize horizontally. */ horizontal: "horizontal", /** * Resize vertically. */ vertical: "vertical", }` | + +
+ + + ### class: `TextArea` #### Superclass @@ -64,24 +74,24 @@ This component is built with the expectation that focus is delegated to the inpu #### Fields -| Name | Privacy | Type | Default | Description | Inherited From | -| --------------- | ------- | ------------------------------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | -| `readOnly` | public | `boolean` | | When true, the control will be immutable by user interaction. See [readonly HTML attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) for more information. | | -| `resize` | public | `TextAreaResize or "none" or "both" or "horizontal" or "vertical"` | | The resize mode of the element. | | -| `autofocus` | public | `boolean` | | Indicates that this element should get focus after the page finishes loading. | | -| `formId` | public | `string` | | The [id](https://developer.mozilla.org/en-US/docs/Web/HTML/Global\_attributes/id) of the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form or form} the element is associated to | | -| `list` | public | `string` | | Allows associating a [datalist](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist) to the element by {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/id}. | | -| `maxlength` | public | `number` | | The maximum number of characters a user can enter. | | -| `minlength` | public | `number` | | The minimum number of characters a user can enter. | | -| `name` | public | `string` | | The name of the element. | | -| `placeholder` | public | `string` | | Sets the placeholder value of the element, generally used to provide a hint to the user. | | -| `cols` | public | `number` | `20` | Sizes the element horizontally by a number of character columns. | | -| `rows` | public | `number` | | Sizes the element vertically by a number of character rows. | | -| `spellcheck` | public | `boolean` | | Sets if the element is eligible for spell checking but the UA. | | -| `proxy` | | | | | FormAssociatedTextArea | -| `$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 | +| --------------- | ------- | ------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | +| `readOnly` | public | `boolean` | | When true, the control will be immutable by user interaction. See [readonly HTML attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) for more information. | | +| `resize` | public | `TextAreaResize` | | The resize mode of the element. | | +| `autofocus` | public | `boolean` | | Indicates that this element should get focus after the page finishes loading. | | +| `formId` | public | `string` | | The [id](https://developer.mozilla.org/en-US/docs/Web/HTML/Global\_attributes/id) of the [form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) the element is associated to | | +| `list` | public | `string` | | Allows associating a [datalist](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist) to the element by https://developer.mozilla.org/en-US/docs/Web/API/Element/id. | | +| `maxlength` | public | `number` | | The maximum number of characters a user can enter. | | +| `minlength` | public | `number` | | The minimum number of characters a user can enter. | | +| `name` | public | `string` | | The name of the element. | | +| `placeholder` | public | `string` | | Sets the placeholder value of the element, generally used to provide a hint to the user. | | +| `cols` | public | `number` | `20` | Sizes the element horizontally by a number of character columns. | | +| `rows` | public | `number` | | Sizes the element vertically by a number of character rows. | | +| `spellcheck` | public | `boolean` | | Sets if the element is eligible for spell checking but the UA. | | +| `proxy` | | | | | FormAssociatedTextArea | +| `$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/text-area/text-area.options.ts b/packages/web-components/fast-foundation/src/text-area/text-area.options.ts index ed3a842b35c..9a6816eaa3d 100644 --- a/packages/web-components/fast-foundation/src/text-area/text-area.options.ts +++ b/packages/web-components/fast-foundation/src/text-area/text-area.options.ts @@ -2,24 +2,30 @@ * Resize mode for a TextArea * @public */ -export enum TextAreaResize { +export const TextAreaResize = { /** * No resize. */ - none = "none", + none: "none", /** * Resize vertically and horizontally. */ - both = "both", + both: "both", /** * Resize horizontally. */ - horizontal = "horizontal", + horizontal: "horizontal", /** * Resize vertically. */ - vertical = "vertical", -} + vertical: "vertical", +} as const; + +/** + * Types for the Text Area resize mode + * @public + */ +export type TextAreaResize = typeof TextAreaResize[keyof typeof TextAreaResize]; 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 5c23a86c5dd..e0f59f7ac21 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 @@ -40,8 +40,7 @@ export class TextArea extends FormAssociatedTextArea { * HTML Attribute: resize */ @attr - public resize: TextAreaResize | "none" | "both" | "horizontal" | "vertical" = - TextAreaResize.none; + public resize: TextAreaResize = TextAreaResize.none; /** * A reference to the internal textarea element 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 56c27b7d863..24c09ccbe67 100644 --- a/packages/web-components/fast-foundation/src/text-field/README.md +++ b/packages/web-components/fast-foundation/src/text-field/README.md @@ -59,6 +59,16 @@ This component is built with the expectation that focus is delegated to the inpu +### Variables + +| Name | Description | Type | +| --------------- | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `TextFieldType` | Text field sub-types | `{ /** * An email TextField */ email: "email", /** * A password TextField */ password: "password", /** * A telephone TextField */ tel: "tel", /** * A text TextField */ text: "text", /** * A URL TextField */ url: "url", }` | + +
+ + + ### class: `TextField` #### Superclass @@ -69,22 +79,22 @@ This component is built with the expectation that focus is delegated to the inpu #### Fields -| Name | Privacy | Type | Default | Description | Inherited From | -| --------------- | ------- | -------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | -| `readOnly` | public | `boolean` | | When true, the control will be immutable by user interaction. See [readonly HTML attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) for more information. | | -| `autofocus` | public | `boolean` | | Indicates that this element should get focus after the page finishes loading. See [autofocus HTML attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautofocus) for more information. | | -| `placeholder` | public | `string` | | Sets the placeholder value of the element, generally used to provide a hint to the user. | | -| `type` | public | `TextFieldType or "email" or "password" or "tel" or "text" or "url"` | | Allows setting a type or mode of text. | | -| `list` | public | `string` | | Allows associating a [datalist](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist) to the element by {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/id}. | | -| `maxlength` | public | `number` | | The maximum number of characters a user can enter. | | -| `minlength` | public | `number` | | The minimum number of characters a user can enter. | | -| `pattern` | public | `string` | | A regular expression that the value must match to pass validation. | | -| `size` | public | `number` | | Sets the width of the element to a specified number of characters. | | -| `spellcheck` | public | `boolean` | | Controls whether or not to enable spell checking for the input field, or if the default spell checking configuration should be used. | | -| `proxy` | | | | | FormAssociatedTextField | -| `$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 | +| --------------- | ------- | ------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | +| `readOnly` | public | `boolean` | | When true, the control will be immutable by user interaction. See [readonly HTML attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) for more information. | | +| `autofocus` | public | `boolean` | | Indicates that this element should get focus after the page finishes loading. See [autofocus HTML attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautofocus) for more information. | | +| `placeholder` | public | `string` | | Sets the placeholder value of the element, generally used to provide a hint to the user. | | +| `type` | public | `TextFieldType` | | Allows setting a type or mode of text. | | +| `list` | public | `string` | | Allows associating a [datalist](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist) to the element by https://developer.mozilla.org/en-US/docs/Web/API/Element/id. | | +| `maxlength` | public | `number` | | The maximum number of characters a user can enter. | | +| `minlength` | public | `number` | | The minimum number of characters a user can enter. | | +| `pattern` | public | `string` | | A regular expression that the value must match to pass validation. | | +| `size` | public | `number` | | Sets the width of the element to a specified number of characters. | | +| `spellcheck` | public | `boolean` | | Controls whether or not to enable spell checking for the input field, or if the default spell checking configuration should be used. | | +| `proxy` | | | | | FormAssociatedTextField | +| `$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/text-field/text-field.options.ts b/packages/web-components/fast-foundation/src/text-field/text-field.options.ts index 7218cd4c86a..47cd7461d2f 100644 --- a/packages/web-components/fast-foundation/src/text-field/text-field.options.ts +++ b/packages/web-components/fast-foundation/src/text-field/text-field.options.ts @@ -2,29 +2,35 @@ * Text field sub-types * @public */ -export enum TextFieldType { +export const TextFieldType = { /** * An email TextField */ - email = "email", + email: "email", /** * A password TextField */ - password = "password", + password: "password", /** * A telephone TextField */ - tel = "tel", + tel: "tel", /** * A text TextField */ - text = "text", + text: "text", /** * A URL TextField */ - url = "url", -} + url: "url", +} as const; + +/** + * Types for the text field sub-types + * @public + */ +export type TextFieldType = typeof TextFieldType[keyof typeof TextFieldType]; 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 dc3afd2e29e..d27fb48e84f 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 @@ -84,8 +84,7 @@ export class TextField extends FormAssociatedTextField { * HTML Attribute: type */ @attr - public type: TextFieldType | "email" | "password" | "tel" | "text" | "url" = - TextFieldType.text; + public type: TextFieldType = TextFieldType.text; private typeChanged(): void { if (this.proxy instanceof HTMLInputElement) { this.proxy.type = this.type; diff --git a/packages/web-components/fast-foundation/src/tooltip/README.md b/packages/web-components/fast-foundation/src/tooltip/README.md index 7ec9964eee7..3213dcf539d 100644 --- a/packages/web-components/fast-foundation/src/tooltip/README.md +++ b/packages/web-components/fast-foundation/src/tooltip/README.md @@ -47,6 +47,16 @@ export const myTooltip = Tooltip.compose({ +### Variables + +| Name | Description | Type | +| ----------------- | ------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `TooltipPosition` | Enumerates possible tooltip positions | `{ /** * The tooltip is positioned above the element */ top: "top", /** * The tooltip is positioned to the right of the element */ right: "right", /** * The tooltip is positioned below the element */ bottom: "bottom", /** * The tooltip is positioned to the left of the element */ left: "left", /** * The tooltip is positioned before the element */ start: "start", /** * The tooltip is positioned after the element */ end: "end", /** * The tooltip is positioned above the element and to the left */ topLeft: "top-left", /** * The tooltip is positioned above the element and to the right */ topRight: "top-right", /** * The tooltip is positioned below the element and to the left */ bottomLeft: "bottom-left", /** * The tooltip is positioned below the element and to the right */ bottomRight: "bottom-right", /** * The tooltip is positioned above the element and to the left */ topStart: "top-start", /** * The tooltip is positioned above the element and to the right */ topEnd: "top-end", /** * The tooltip is positioned below the element and to the left */ bottomStart: "bottom-start", /** * The tooltip is positioned below the element and to the right */ bottomEnd: "bottom-end", }` | + +
+ + + ### class: `Tooltip` #### Superclass @@ -57,19 +67,19 @@ export const myTooltip = Tooltip.compose({ #### Fields -| Name | Privacy | Type | Default | Description | Inherited From | -| ------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | -| `visible` | public | `boolean` | | Whether the tooltip is visible or not. If undefined tooltip is shown when anchor element is hovered | | -| `anchor` | public | `string` | `""` | The id of the element the tooltip is anchored to | | -| `delay` | public | `number` | `300` | The delay in milliseconds before a tooltip is shown after a hover event | | -| `position` | public | `or TooltipPosition or "top" or "right" or "bottom" or "left" or "start" or "end" or "top-left" or "top-right" or "bottom-left" or "bottom-right" or "top-start" or "top-end" or "bottom-start" or "bottom-end"` | | Controls the placement of the tooltip relative to the anchor. When the position is undefined the tooltip is placed above or below the anchor based on available space. | | -| `autoUpdateMode` | public | `AutoUpdateMode` | `"anchor"` | Controls when the tooltip updates its position, default is 'anchor' which only updates when the anchor is resized. 'auto' will update on scroll/resize events. Corresponds to anchored-region auto-update-mode. | | -| `horizontalViewportLock` | public | `boolean` | | Controls if the tooltip will always remain fully in the viewport on the horizontal axis | | -| `verticalViewportLock` | public | `boolean` | | Controls if the tooltip will always remain fully in the viewport on the vertical axis | | -| `anchorElement` | public | `HTMLElement or null` | `null` | the html element currently being used as anchor. Setting this directly overrides the anchor attribute. | | -| `$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 | +| ------------------------ | ------- | ------------------------------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | +| `visible` | public | `boolean` | | Whether the tooltip is visible or not. If undefined tooltip is shown when anchor element is hovered | | +| `anchor` | public | `string` | `""` | The id of the element the tooltip is anchored to | | +| `delay` | public | `number` | `300` | The delay in milliseconds before a tooltip is shown after a hover event | | +| `position` | public | `TooltipPosition` | | Controls the placement of the tooltip relative to the anchor. When the position is undefined the tooltip is placed above or below the anchor based on available space. | | +| `autoUpdateMode` | public | `AutoUpdateMode` | `"anchor"` | Controls when the tooltip updates its position, default is 'anchor' which only updates when the anchor is resized. 'auto' will update on scroll/resize events. Corresponds to anchored-region auto-update-mode. | | +| `horizontalViewportLock` | public | `boolean` | | Controls if the tooltip will always remain fully in the viewport on the horizontal axis | | +| `verticalViewportLock` | public | `boolean` | | Controls if the tooltip will always remain fully in the viewport on the vertical axis | | +| `anchorElement` | public | `HTMLElement or null` | `null` | the html element currently being used as anchor. Setting this directly overrides the anchor attribute. | | +| `$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/tooltip/tooltip.options.ts b/packages/web-components/fast-foundation/src/tooltip/tooltip.options.ts index 6227a7e2a95..a8bdff606e3 100644 --- a/packages/web-components/fast-foundation/src/tooltip/tooltip.options.ts +++ b/packages/web-components/fast-foundation/src/tooltip/tooltip.options.ts @@ -3,74 +3,81 @@ * * @public */ -export enum TooltipPosition { +export const TooltipPosition = { /** * The tooltip is positioned above the element */ - top = "top", + top: "top", /** * The tooltip is positioned to the right of the element */ - right = "right", + right: "right", /** * The tooltip is positioned below the element */ - bottom = "bottom", + bottom: "bottom", /** * The tooltip is positioned to the left of the element */ - left = "left", + left: "left", /** * The tooltip is positioned before the element */ - start = "start", + start: "start", /** * The tooltip is positioned after the element */ - end = "end", + end: "end", /** * The tooltip is positioned above the element and to the left */ - topLeft = "top-left", + topLeft: "top-left", /** * The tooltip is positioned above the element and to the right */ - topRight = "top-right", + topRight: "top-right", /** * The tooltip is positioned below the element and to the left */ - bottomLeft = "bottom-left", + bottomLeft: "bottom-left", /** * The tooltip is positioned below the element and to the right */ - bottomRight = "bottom-right", + bottomRight: "bottom-right", /** * The tooltip is positioned above the element and to the left */ - topStart = "top-start", + topStart: "top-start", /** * The tooltip is positioned above the element and to the right */ - topEnd = "top-end", + topEnd: "top-end", /** * The tooltip is positioned below the element and to the left */ - bottomStart = "bottom-start", + bottomStart: "bottom-start", /** * The tooltip is positioned below the element and to the right */ - bottomEnd = "bottom-end", -} + bottomEnd: "bottom-end", +} as const; + +/** + * The possible tooltip positions + * + * @public + */ +export type TooltipPosition = typeof TooltipPosition[keyof typeof TooltipPosition]; diff --git a/packages/web-components/fast-foundation/src/tooltip/tooltip.ts b/packages/web-components/fast-foundation/src/tooltip/tooltip.ts index 7bfed1f7cce..a45af39f310 100644 --- a/packages/web-components/fast-foundation/src/tooltip/tooltip.ts +++ b/packages/web-components/fast-foundation/src/tooltip/tooltip.ts @@ -73,22 +73,7 @@ export class Tooltip extends FoundationElement { * HTML Attribute: position */ @attr - public position: - | TooltipPosition - | "top" - | "right" - | "bottom" - | "left" - | "start" - | "end" - | "top-left" - | "top-right" - | "bottom-left" - | "bottom-right" - | "top-start" - | "top-end" - | "bottom-start" - | "bottom-end"; + public position: TooltipPosition; private positionChanged(): void { if ((this as FASTElement).$fastController.isConnected) { this.updateLayout();