@ni/nimble-components 32.2.9 → 32.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -48,7 +48,7 @@ export class Dialog extends FoundationElement {
48
48
  throw new Error('Dialog is already open');
49
49
  }
50
50
  this.dialogElement.showModal();
51
- return new Promise((resolve, _reject) => {
51
+ return await new Promise((resolve, _reject) => {
52
52
  this.resolveShow = resolve;
53
53
  });
54
54
  }
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/dialog/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { attr, observable } from '@microsoft/fast-element';\nimport {\n applyMixins,\n ARIAGlobalStatesAndProperties,\n DesignSystem,\n FoundationElement\n} from '@microsoft/fast-foundation';\nimport { UserDismissed } from '../patterns/dialog/types';\nimport { styles } from './styles';\nimport { template } from './template';\n\nexport { UserDismissed };\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nimble-dialog': Dialog;\n }\n}\n\n/**\n * A nimble-styled dialog.\n */\n// eslint-disable-next-line @typescript-eslint/no-invalid-void-type\nexport class Dialog<CloseReason = void> extends FoundationElement {\n // We want the member to match the name of the constant\n // eslint-disable-next-line @typescript-eslint/naming-convention\n public static readonly UserDismissed = UserDismissed;\n\n /**\n * @public\n * @description\n * Prevents dismissing the dialog via the Escape key\n */\n @attr({ attribute: 'prevent-dismiss', mode: 'boolean' })\n public preventDismiss = false;\n\n /**\n * @public\n * @description\n * Hides the header of the dialog.\n */\n @attr({ attribute: 'header-hidden', mode: 'boolean' })\n public headerHidden = false;\n\n /**\n * @public\n * @description\n * Hides the footer of the dialog.\n */\n @attr({ attribute: 'footer-hidden', mode: 'boolean' })\n public footerHidden = false;\n\n /**\n * The ref to the internal dialog element.\n *\n * @internal\n */\n public readonly dialogElement!: HTMLDialogElement;\n\n /** @internal */\n @observable\n public footerIsEmpty = true;\n\n /** @internal */\n @observable\n public readonly slottedFooterElements?: HTMLElement[];\n\n /**\n * True if the dialog is open/showing, false otherwise\n */\n public get open(): boolean {\n return this.resolveShow !== undefined;\n }\n\n private resolveShow?: (reason: CloseReason | UserDismissed) => void;\n\n /**\n * Opens the dialog\n * @returns Promise that is resolved when the dialog is closed. The value of the resolved Promise is the reason value passed to the close() method, or UserDismissed if the dialog was closed via the ESC key.\n */\n public async show(): Promise<CloseReason | UserDismissed> {\n if (this.open) {\n throw new Error('Dialog is already open');\n }\n this.dialogElement.showModal();\n return new Promise((resolve, _reject) => {\n this.resolveShow = resolve;\n });\n }\n\n /**\n * Closes the dialog\n * @param reason An optional value indicating how/why the dialog was closed.\n */\n public close(reason: CloseReason): void {\n if (!this.open) {\n throw new Error('Dialog is not open');\n }\n this.dialogElement.close();\n this.doResolveShow(reason);\n }\n\n public slottedFooterElementsChanged(\n _prev: HTMLElement[] | undefined,\n next: HTMLElement[] | undefined\n ): void {\n this.footerIsEmpty = !next?.length;\n }\n\n /**\n * @internal\n */\n public cancelHandler(event: Event): boolean {\n if (this.preventDismiss) {\n event.preventDefault();\n } else {\n this.doResolveShow(UserDismissed);\n }\n return true;\n }\n\n /**\n * @internal\n */\n public closeHandler(event: Event): void {\n if (event.target !== this.dialogElement) {\n return;\n }\n if (this.resolveShow) {\n // If\n // - the browser implements dialogs with the CloseWatcher API, and\n // - the user presses ESC without first interacting with the dialog (e.g. clicking, scrolling),\n // the cancel event is not fired, but the close event still is, and the dialog just closes.\n this.doResolveShow(UserDismissed);\n }\n }\n\n private doResolveShow(reason: CloseReason | UserDismissed): void {\n if (!this.resolveShow) {\n throw new Error(\n 'Do not call doResolveShow unless there is a promise to resolve'\n );\n }\n this.resolveShow(reason);\n this.resolveShow = undefined;\n }\n}\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface Dialog extends ARIAGlobalStatesAndProperties {}\napplyMixins(Dialog, ARIAGlobalStatesAndProperties);\n\nconst nimbleDialog = Dialog.compose({\n baseName: 'dialog',\n template,\n styles,\n baseClass: Dialog\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDialog());\nexport const dialogTag = 'nimble-dialog';\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/dialog/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { attr, observable } from '@microsoft/fast-element';\nimport {\n applyMixins,\n ARIAGlobalStatesAndProperties,\n DesignSystem,\n FoundationElement\n} from '@microsoft/fast-foundation';\nimport { UserDismissed } from '../patterns/dialog/types';\nimport { styles } from './styles';\nimport { template } from './template';\n\nexport { UserDismissed };\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nimble-dialog': Dialog;\n }\n}\n\n/**\n * A nimble-styled dialog.\n */\n// eslint-disable-next-line @typescript-eslint/no-invalid-void-type\nexport class Dialog<CloseReason = void> extends FoundationElement {\n // We want the member to match the name of the constant\n // eslint-disable-next-line @typescript-eslint/naming-convention\n public static readonly UserDismissed = UserDismissed;\n\n /**\n * @public\n * @description\n * Prevents dismissing the dialog via the Escape key\n */\n @attr({ attribute: 'prevent-dismiss', mode: 'boolean' })\n public preventDismiss = false;\n\n /**\n * @public\n * @description\n * Hides the header of the dialog.\n */\n @attr({ attribute: 'header-hidden', mode: 'boolean' })\n public headerHidden = false;\n\n /**\n * @public\n * @description\n * Hides the footer of the dialog.\n */\n @attr({ attribute: 'footer-hidden', mode: 'boolean' })\n public footerHidden = false;\n\n /**\n * The ref to the internal dialog element.\n *\n * @internal\n */\n public readonly dialogElement!: HTMLDialogElement;\n\n /** @internal */\n @observable\n public footerIsEmpty = true;\n\n /** @internal */\n @observable\n public readonly slottedFooterElements?: HTMLElement[];\n\n /**\n * True if the dialog is open/showing, false otherwise\n */\n public get open(): boolean {\n return this.resolveShow !== undefined;\n }\n\n private resolveShow?: (reason: CloseReason | UserDismissed) => void;\n\n /**\n * Opens the dialog\n * @returns Promise that is resolved when the dialog is closed. The value of the resolved Promise is the reason value passed to the close() method, or UserDismissed if the dialog was closed via the ESC key.\n */\n public async show(): Promise<CloseReason | UserDismissed> {\n if (this.open) {\n throw new Error('Dialog is already open');\n }\n this.dialogElement.showModal();\n return await new Promise((resolve, _reject) => {\n this.resolveShow = resolve;\n });\n }\n\n /**\n * Closes the dialog\n * @param reason An optional value indicating how/why the dialog was closed.\n */\n public close(reason: CloseReason): void {\n if (!this.open) {\n throw new Error('Dialog is not open');\n }\n this.dialogElement.close();\n this.doResolveShow(reason);\n }\n\n public slottedFooterElementsChanged(\n _prev: HTMLElement[] | undefined,\n next: HTMLElement[] | undefined\n ): void {\n this.footerIsEmpty = !next?.length;\n }\n\n /**\n * @internal\n */\n public cancelHandler(event: Event): boolean {\n if (this.preventDismiss) {\n event.preventDefault();\n } else {\n this.doResolveShow(UserDismissed);\n }\n return true;\n }\n\n /**\n * @internal\n */\n public closeHandler(event: Event): void {\n if (event.target !== this.dialogElement) {\n return;\n }\n if (this.resolveShow) {\n // If\n // - the browser implements dialogs with the CloseWatcher API, and\n // - the user presses ESC without first interacting with the dialog (e.g. clicking, scrolling),\n // the cancel event is not fired, but the close event still is, and the dialog just closes.\n this.doResolveShow(UserDismissed);\n }\n }\n\n private doResolveShow(reason: CloseReason | UserDismissed): void {\n if (!this.resolveShow) {\n throw new Error(\n 'Do not call doResolveShow unless there is a promise to resolve'\n );\n }\n this.resolveShow(reason);\n this.resolveShow = undefined;\n }\n}\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface Dialog extends ARIAGlobalStatesAndProperties {}\napplyMixins(Dialog, ARIAGlobalStatesAndProperties);\n\nconst nimbleDialog = Dialog.compose({\n baseName: 'dialog',\n template,\n styles,\n baseClass: Dialog\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDialog());\nexport const dialogTag = 'nimble-dialog';\n"]}
@@ -37,7 +37,7 @@ export class Drawer extends FoundationElement {
37
37
  throw new Error('Drawer is already open');
38
38
  }
39
39
  this.openDialog();
40
- return new Promise((resolve, _reject) => {
40
+ return await new Promise((resolve, _reject) => {
41
41
  this.resolveShow = resolve;
42
42
  });
43
43
  }
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/drawer/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { attr } from '@microsoft/fast-element';\nimport {\n applyMixins,\n ARIAGlobalStatesAndProperties,\n DesignSystem,\n FoundationElement\n} from '@microsoft/fast-foundation';\nimport { eventAnimationEnd } from '@microsoft/fast-web-utilities';\nimport { UserDismissed } from '../patterns/dialog/types';\nimport { styles } from './styles';\nimport { template } from './template';\nimport { DrawerLocation } from './types';\n\nexport { UserDismissed };\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nimble-drawer': Drawer;\n }\n}\n\n/**\n * Drawer control. Shows content in a panel on the left / right side of the screen,\n * which animates to be visible with a slide-in / slide-out animation.\n */\n// eslint-disable-next-line @typescript-eslint/no-invalid-void-type\nexport class Drawer<CloseReason = void> extends FoundationElement {\n // We want the member to match the name of the constant\n // eslint-disable-next-line @typescript-eslint/naming-convention\n public static readonly UserDismissed = UserDismissed;\n\n @attr\n public location: DrawerLocation = DrawerLocation.right;\n\n @attr({ attribute: 'prevent-dismiss', mode: 'boolean' })\n public preventDismiss = false;\n\n public dialog!: HTMLDialogElement;\n private closing = false;\n\n private resolveShow?: (reason: CloseReason | UserDismissed) => void;\n private closeReason!: CloseReason | UserDismissed;\n\n /**\n * True if the drawer is open, opening, or closing. Otherwise, false.\n */\n public get open(): boolean {\n return this.resolveShow !== undefined;\n }\n\n /**\n * Opens the drawer\n * @returns Promise that is resolved when the drawer finishes closing. The value of the resolved\n * Promise is the reason value passed to the close() method, or UserDismissed if the drawer was\n * closed via the ESC key.\n */\n public async show(): Promise<CloseReason | UserDismissed> {\n if (this.open) {\n throw new Error('Drawer is already open');\n }\n this.openDialog();\n return new Promise((resolve, _reject) => {\n this.resolveShow = resolve;\n });\n }\n\n /**\n * Closes the drawer\n * @param reason An optional value indicating how/why the drawer was closed.\n */\n public close(reason: CloseReason): void {\n if (!this.open || this.closing) {\n throw new Error('Drawer is not open or already closing');\n }\n this.closeReason = reason;\n this.closeDialog();\n }\n\n /**\n * @internal\n */\n public cancelHandler(event: Event): boolean {\n // Allowing the dialog to close itself bypasses the drawer's animation logic, so we\n // should close the drawer ourselves when preventDismiss is false.\n event.preventDefault();\n\n if (!this.preventDismiss) {\n this.closeReason = UserDismissed;\n this.closeDialog();\n }\n return true;\n }\n\n /**\n * @internal\n */\n public closeHandler(event: Event): void {\n if (event.target !== this.dialog) {\n return;\n }\n if (this.resolveShow) {\n // If\n // - the browser implements dialogs with the CloseWatcher API, and\n // - the user presses ESC without first interacting with the drawer (e.g. clicking, scrolling),\n // the cancel event is not fired, but the close event still is, and the drawer just closes.\n // The animation is never started, so there is no animation end listener to clean up.\n this.doResolveShow(UserDismissed);\n }\n }\n\n private doResolveShow(reason: CloseReason | UserDismissed): void {\n if (!this.resolveShow) {\n throw new Error(\n 'Do not call doResolveShow unless there is a promise to resolve'\n );\n }\n this.resolveShow(reason);\n this.resolveShow = undefined;\n }\n\n private readonly animationEndHandlerFunction = (): void => this.animationEndHandler();\n\n private openDialog(): void {\n this.dialog.showModal();\n this.triggerAnimation();\n }\n\n private closeDialog(): void {\n this.closing = true;\n this.triggerAnimation();\n }\n\n private triggerAnimation(): void {\n // Read the offsetHeight of the dialog to trigger a reflow. This guarantees that the browser\n // has processed the 'animating' class being removed before trying to readd it, even if the previous\n // animation has just finished. Otherwise, problems can occur. For example, trying to close the\n // drawer immediately after the opening animation ends does not actually close the drawer.\n // https://github.com/ni/nimble/issues/1994\n void this.dialog.offsetHeight;\n\n this.dialog.classList.add('animating');\n if (this.closing) {\n this.dialog.classList.add('closing');\n }\n\n this.dialog.addEventListener(\n eventAnimationEnd,\n this.animationEndHandlerFunction\n );\n }\n\n private animationEndHandler(): void {\n this.dialog.removeEventListener(\n eventAnimationEnd,\n this.animationEndHandlerFunction\n );\n this.dialog.classList.remove('animating');\n if (this.closing) {\n this.dialog.classList.remove('closing');\n this.dialog.close();\n this.closing = false;\n this.doResolveShow(this.closeReason);\n }\n }\n}\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface Drawer extends ARIAGlobalStatesAndProperties {}\napplyMixins(Drawer, ARIAGlobalStatesAndProperties);\n\nconst nimbleDrawer = Drawer.compose({\n baseName: 'drawer',\n template,\n styles\n});\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());\nexport const drawerTag = 'nimble-drawer';\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/drawer/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { attr } from '@microsoft/fast-element';\nimport {\n applyMixins,\n ARIAGlobalStatesAndProperties,\n DesignSystem,\n FoundationElement\n} from '@microsoft/fast-foundation';\nimport { eventAnimationEnd } from '@microsoft/fast-web-utilities';\nimport { UserDismissed } from '../patterns/dialog/types';\nimport { styles } from './styles';\nimport { template } from './template';\nimport { DrawerLocation } from './types';\n\nexport { UserDismissed };\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nimble-drawer': Drawer;\n }\n}\n\n/**\n * Drawer control. Shows content in a panel on the left / right side of the screen,\n * which animates to be visible with a slide-in / slide-out animation.\n */\n// eslint-disable-next-line @typescript-eslint/no-invalid-void-type\nexport class Drawer<CloseReason = void> extends FoundationElement {\n // We want the member to match the name of the constant\n // eslint-disable-next-line @typescript-eslint/naming-convention\n public static readonly UserDismissed = UserDismissed;\n\n @attr\n public location: DrawerLocation = DrawerLocation.right;\n\n @attr({ attribute: 'prevent-dismiss', mode: 'boolean' })\n public preventDismiss = false;\n\n public dialog!: HTMLDialogElement;\n private closing = false;\n\n private resolveShow?: (reason: CloseReason | UserDismissed) => void;\n private closeReason!: CloseReason | UserDismissed;\n\n /**\n * True if the drawer is open, opening, or closing. Otherwise, false.\n */\n public get open(): boolean {\n return this.resolveShow !== undefined;\n }\n\n /**\n * Opens the drawer\n * @returns Promise that is resolved when the drawer finishes closing. The value of the resolved\n * Promise is the reason value passed to the close() method, or UserDismissed if the drawer was\n * closed via the ESC key.\n */\n public async show(): Promise<CloseReason | UserDismissed> {\n if (this.open) {\n throw new Error('Drawer is already open');\n }\n this.openDialog();\n return await new Promise((resolve, _reject) => {\n this.resolveShow = resolve;\n });\n }\n\n /**\n * Closes the drawer\n * @param reason An optional value indicating how/why the drawer was closed.\n */\n public close(reason: CloseReason): void {\n if (!this.open || this.closing) {\n throw new Error('Drawer is not open or already closing');\n }\n this.closeReason = reason;\n this.closeDialog();\n }\n\n /**\n * @internal\n */\n public cancelHandler(event: Event): boolean {\n // Allowing the dialog to close itself bypasses the drawer's animation logic, so we\n // should close the drawer ourselves when preventDismiss is false.\n event.preventDefault();\n\n if (!this.preventDismiss) {\n this.closeReason = UserDismissed;\n this.closeDialog();\n }\n return true;\n }\n\n /**\n * @internal\n */\n public closeHandler(event: Event): void {\n if (event.target !== this.dialog) {\n return;\n }\n if (this.resolveShow) {\n // If\n // - the browser implements dialogs with the CloseWatcher API, and\n // - the user presses ESC without first interacting with the drawer (e.g. clicking, scrolling),\n // the cancel event is not fired, but the close event still is, and the drawer just closes.\n // The animation is never started, so there is no animation end listener to clean up.\n this.doResolveShow(UserDismissed);\n }\n }\n\n private doResolveShow(reason: CloseReason | UserDismissed): void {\n if (!this.resolveShow) {\n throw new Error(\n 'Do not call doResolveShow unless there is a promise to resolve'\n );\n }\n this.resolveShow(reason);\n this.resolveShow = undefined;\n }\n\n private readonly animationEndHandlerFunction = (): void => this.animationEndHandler();\n\n private openDialog(): void {\n this.dialog.showModal();\n this.triggerAnimation();\n }\n\n private closeDialog(): void {\n this.closing = true;\n this.triggerAnimation();\n }\n\n private triggerAnimation(): void {\n // Read the offsetHeight of the dialog to trigger a reflow. This guarantees that the browser\n // has processed the 'animating' class being removed before trying to readd it, even if the previous\n // animation has just finished. Otherwise, problems can occur. For example, trying to close the\n // drawer immediately after the opening animation ends does not actually close the drawer.\n // https://github.com/ni/nimble/issues/1994\n void this.dialog.offsetHeight;\n\n this.dialog.classList.add('animating');\n if (this.closing) {\n this.dialog.classList.add('closing');\n }\n\n this.dialog.addEventListener(\n eventAnimationEnd,\n this.animationEndHandlerFunction\n );\n }\n\n private animationEndHandler(): void {\n this.dialog.removeEventListener(\n eventAnimationEnd,\n this.animationEndHandlerFunction\n );\n this.dialog.classList.remove('animating');\n if (this.closing) {\n this.dialog.classList.remove('closing');\n this.dialog.close();\n this.closing = false;\n this.doResolveShow(this.closeReason);\n }\n }\n}\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface Drawer extends ARIAGlobalStatesAndProperties {}\napplyMixins(Drawer, ARIAGlobalStatesAndProperties);\n\nconst nimbleDrawer = Drawer.compose({\n baseName: 'drawer',\n template,\n styles\n});\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());\nexport const drawerTag = 'nimble-drawer';\n"]}
@@ -1,5 +1,6 @@
1
1
  import { RadioGroup as FoundationRadioGroup } from '@microsoft/fast-foundation';
2
2
  import { Orientation } from '@microsoft/fast-web-utilities';
3
+ import type { ErrorPattern } from '../patterns/error/types';
3
4
  declare global {
4
5
  interface HTMLElementTagNameMap {
5
6
  'nimble-radio-group': RadioGroup;
@@ -9,6 +10,8 @@ export { Orientation };
9
10
  /**
10
11
  * A nimble-styled grouping element for radio buttons
11
12
  */
12
- export declare class RadioGroup extends FoundationRadioGroup {
13
+ export declare class RadioGroup extends FoundationRadioGroup implements ErrorPattern {
14
+ errorText?: string;
15
+ errorVisible: boolean;
13
16
  }
14
17
  export declare const radioGroupTag = "nimble-radio-group";
@@ -1,12 +1,25 @@
1
- import { RadioGroup as FoundationRadioGroup, radioGroupTemplate as template, DesignSystem } from '@microsoft/fast-foundation';
1
+ import { __decorate } from "tslib";
2
+ import { RadioGroup as FoundationRadioGroup, DesignSystem } from '@microsoft/fast-foundation';
2
3
  import { Orientation } from '@microsoft/fast-web-utilities';
4
+ import { attr } from '@microsoft/fast-element';
3
5
  import { styles } from './styles';
6
+ import { template } from './template';
4
7
  export { Orientation };
5
8
  /**
6
9
  * A nimble-styled grouping element for radio buttons
7
10
  */
8
11
  export class RadioGroup extends FoundationRadioGroup {
12
+ constructor() {
13
+ super(...arguments);
14
+ this.errorVisible = false;
15
+ }
9
16
  }
17
+ __decorate([
18
+ attr({ attribute: 'error-text' })
19
+ ], RadioGroup.prototype, "errorText", void 0);
20
+ __decorate([
21
+ attr({ attribute: 'error-visible', mode: 'boolean' })
22
+ ], RadioGroup.prototype, "errorVisible", void 0);
10
23
  const nimbleRadioGroup = RadioGroup.compose({
11
24
  baseName: 'radio-group',
12
25
  baseClass: FoundationRadioGroup,
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/radio-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,UAAU,IAAI,oBAAoB,EAClC,kBAAkB,IAAI,QAAQ,EAC9B,YAAY,EACf,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAQlC,OAAO,EAAE,WAAW,EAAE,CAAC;AAEvB;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,oBAAoB;CAAG;AAEvD,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,CAAC;IACxC,QAAQ,EAAE,aAAa;IACvB,SAAS,EAAE,oBAAoB;IAC/B,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;CACJ,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,gBAAgB,EAAE,CAAC,CAAC;AAC7E,MAAM,CAAC,MAAM,aAAa,GAAG,oBAAoB,CAAC","sourcesContent":["import {\n RadioGroup as FoundationRadioGroup,\n radioGroupTemplate as template,\n DesignSystem\n} from '@microsoft/fast-foundation';\nimport { Orientation } from '@microsoft/fast-web-utilities';\nimport { styles } from './styles';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nimble-radio-group': RadioGroup;\n }\n}\n\nexport { Orientation };\n\n/**\n * A nimble-styled grouping element for radio buttons\n */\nexport class RadioGroup extends FoundationRadioGroup {}\n\nconst nimbleRadioGroup = RadioGroup.compose({\n baseName: 'radio-group',\n baseClass: FoundationRadioGroup,\n template,\n styles,\n shadowOptions: {\n delegatesFocus: true\n }\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadioGroup());\nexport const radioGroupTag = 'nimble-radio-group';\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/radio-group/index.ts"],"names":[],"mappings":";AAAA,OAAO,EACH,UAAU,IAAI,oBAAoB,EAClC,YAAY,EACf,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAStC,OAAO,EAAE,WAAW,EAAE,CAAC;AAEvB;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,oBAAoB;IAApD;;QAKW,iBAAY,GAAG,KAAK,CAAC;IAChC,CAAC;CAAA;AAJU;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;6CACR;AAGnB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;gDAC1B;AAGhC,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,CAAC;IACxC,QAAQ,EAAE,aAAa;IACvB,SAAS,EAAE,oBAAoB;IAC/B,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;CACJ,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,gBAAgB,EAAE,CAAC,CAAC;AAC7E,MAAM,CAAC,MAAM,aAAa,GAAG,oBAAoB,CAAC","sourcesContent":["import {\n RadioGroup as FoundationRadioGroup,\n DesignSystem\n} from '@microsoft/fast-foundation';\nimport { Orientation } from '@microsoft/fast-web-utilities';\nimport { attr } from '@microsoft/fast-element';\nimport { styles } from './styles';\nimport { template } from './template';\nimport type { ErrorPattern } from '../patterns/error/types';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nimble-radio-group': RadioGroup;\n }\n}\n\nexport { Orientation };\n\n/**\n * A nimble-styled grouping element for radio buttons\n */\nexport class RadioGroup extends FoundationRadioGroup implements ErrorPattern {\n @attr({ attribute: 'error-text' })\n public errorText?: string;\n\n @attr({ attribute: 'error-visible', mode: 'boolean' })\n public errorVisible = false;\n}\n\nconst nimbleRadioGroup = RadioGroup.compose({\n baseName: 'radio-group',\n baseClass: FoundationRadioGroup,\n template,\n styles,\n shadowOptions: {\n delegatesFocus: true\n }\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadioGroup());\nexport const radioGroupTag = 'nimble-radio-group';\n"]}
@@ -1,12 +1,15 @@
1
1
  import { css } from '@microsoft/fast-element';
2
2
  import { display } from '../utilities/style/display';
3
- import { controlLabelDisabledFontColor, controlLabelFont, controlLabelFontColor, standardPadding } from '../theme-provider/design-tokens';
3
+ import { controlLabelDisabledFontColor, controlLabelFont, controlLabelFontColor, controlLabelFontLineHeight, smallPadding, standardPadding } from '../theme-provider/design-tokens';
4
+ import { styles as errorStyles } from '../patterns/error/styles';
4
5
  export const styles = css `
5
6
  ${display('inline-block')}
7
+ ${errorStyles}
6
8
 
7
9
  .positioning-region {
8
10
  display: flex;
9
11
  gap: ${standardPadding};
12
+ position: relative;
10
13
  }
11
14
 
12
15
  :host([orientation='vertical']) .positioning-region {
@@ -17,6 +20,13 @@ export const styles = css `
17
20
  flex-direction: row;
18
21
  }
19
22
 
23
+ .label-container {
24
+ display: flex;
25
+ height: ${controlLabelFontLineHeight};
26
+ gap: ${smallPadding};
27
+ margin-bottom: ${smallPadding};
28
+ }
29
+
20
30
  slot[name='label'] {
21
31
  font: ${controlLabelFont};
22
32
  color: ${controlLabelFontColor};
@@ -25,5 +35,10 @@ export const styles = css `
25
35
  :host([disabled]) slot[name='label'] {
26
36
  color: ${controlLabelDisabledFontColor};
27
37
  }
38
+
39
+ .error-icon {
40
+ margin-left: auto;
41
+ margin-right: ${smallPadding};
42
+ }
28
43
  `;
29
44
  //# sourceMappingURL=styles.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/radio-group/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,6BAA6B,EAC7B,gBAAgB,EAChB,qBAAqB,EACrB,eAAe,EAClB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;;eAId,eAAe;;;;;;;;;;;;gBAYd,gBAAgB;iBACf,qBAAqB;;;;iBAIrB,6BAA6B;;CAE7C,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\nimport {\n controlLabelDisabledFontColor,\n controlLabelFont,\n controlLabelFontColor,\n standardPadding\n} from '../theme-provider/design-tokens';\n\nexport const styles = css`\n ${display('inline-block')}\n\n .positioning-region {\n display: flex;\n gap: ${standardPadding};\n }\n\n :host([orientation='vertical']) .positioning-region {\n flex-direction: column;\n }\n\n :host([orientation='horizontal']) .positioning-region {\n flex-direction: row;\n }\n\n slot[name='label'] {\n font: ${controlLabelFont};\n color: ${controlLabelFontColor};\n }\n\n :host([disabled]) slot[name='label'] {\n color: ${controlLabelDisabledFontColor};\n }\n`;\n"]}
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/radio-group/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,6BAA6B,EAC7B,gBAAgB,EAChB,qBAAqB,EACrB,0BAA0B,EAC1B,YAAY,EACZ,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEjE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;MACvB,WAAW;;;;eAIF,eAAe;;;;;;;;;;;;;;kBAcZ,0BAA0B;eAC7B,YAAY;yBACF,YAAY;;;;gBAIrB,gBAAgB;iBACf,qBAAqB;;;;iBAIrB,6BAA6B;;;;;wBAKtB,YAAY;;CAEnC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\nimport {\n controlLabelDisabledFontColor,\n controlLabelFont,\n controlLabelFontColor,\n controlLabelFontLineHeight,\n smallPadding,\n standardPadding\n} from '../theme-provider/design-tokens';\nimport { styles as errorStyles } from '../patterns/error/styles';\n\nexport const styles = css`\n ${display('inline-block')}\n ${errorStyles}\n\n .positioning-region {\n display: flex;\n gap: ${standardPadding};\n position: relative;\n }\n\n :host([orientation='vertical']) .positioning-region {\n flex-direction: column;\n }\n\n :host([orientation='horizontal']) .positioning-region {\n flex-direction: row;\n }\n\n .label-container {\n display: flex;\n height: ${controlLabelFontLineHeight};\n gap: ${smallPadding};\n margin-bottom: ${smallPadding};\n }\n\n slot[name='label'] {\n font: ${controlLabelFont};\n color: ${controlLabelFontColor};\n }\n\n :host([disabled]) slot[name='label'] {\n color: ${controlLabelDisabledFontColor};\n }\n\n .error-icon {\n margin-left: auto;\n margin-right: ${smallPadding};\n }\n`;\n"]}
@@ -0,0 +1,2 @@
1
+ import type { RadioGroup } from '.';
2
+ export declare const template: import("@microsoft/fast-element").ViewTemplate<RadioGroup, any>;
@@ -0,0 +1,36 @@
1
+ import { elements, html, slotted } from '@microsoft/fast-element';
2
+ import { Orientation } from '@microsoft/fast-web-utilities';
3
+ import { errorTextTemplate } from '../patterns/error/template';
4
+ import { iconExclamationMarkTag } from '../icons/exclamation-mark';
5
+ /* eslint-disable @typescript-eslint/indent */
6
+ export const template = html `
7
+ <template
8
+ role="radiogroup"
9
+ aria-disabled="${x => x.disabled}"
10
+ aria-readonly="${x => x.readOnly}"
11
+ @click="${(x, c) => x.clickHandler(c.event)}"
12
+ @keydown="${(x, c) => x.keydownHandler(c.event)}"
13
+ @focusout="${(x, c) => x.focusOutHandler(c.event)}"
14
+ >
15
+ <div class="label-container">
16
+ <slot name="label"></slot>
17
+ <${iconExclamationMarkTag}
18
+ severity="error"
19
+ class="error-icon"
20
+ ></${iconExclamationMarkTag}>
21
+ </div>
22
+ <div
23
+ class="positioning-region ${x => (x.orientation === Orientation.horizontal ? 'horizontal' : 'vertical')}"
24
+ part="positioning-region"
25
+ >
26
+ <slot
27
+ ${slotted({
28
+ property: 'slottedRadioButtons',
29
+ filter: elements('[role=radio]')
30
+ })}
31
+ ></slot>
32
+ ${errorTextTemplate}
33
+ </div>
34
+ </template>
35
+ `;
36
+ //# sourceMappingURL=template.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/radio-group/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAE5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AAEnE,8CAA8C;AAC9C,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAY;;;yBAGf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;yBACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;kBACtB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;oBAC7C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAsB,CAAC;qBACnD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAmB,CAAC;;;;eAIxD,sBAAsB;;;iBAGpB,sBAAsB;;;wCAGC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,KAAK,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC;;;;kBAIjG,OAAO,CAAC;IACN,QAAQ,EAAE,qBAAqB;IAC/B,MAAM,EAAE,QAAQ,CAAC,cAAc,CAAC;CACnC,CAAC;;cAEJ,iBAAiB;;;CAG9B,CAAC","sourcesContent":["import { elements, html, slotted } from '@microsoft/fast-element';\nimport { Orientation } from '@microsoft/fast-web-utilities';\nimport type { RadioGroup } from '.';\nimport { errorTextTemplate } from '../patterns/error/template';\nimport { iconExclamationMarkTag } from '../icons/exclamation-mark';\n\n/* eslint-disable @typescript-eslint/indent */\nexport const template = html<RadioGroup>`\n <template\n role=\"radiogroup\"\n aria-disabled=\"${x => x.disabled}\"\n aria-readonly=\"${x => x.readOnly}\"\n @click=\"${(x, c) => x.clickHandler(c.event as MouseEvent)}\"\n @keydown=\"${(x, c) => x.keydownHandler(c.event as KeyboardEvent)}\"\n @focusout=\"${(x, c) => x.focusOutHandler(c.event as FocusEvent)}\"\n >\n <div class=\"label-container\">\n <slot name=\"label\"></slot> \n <${iconExclamationMarkTag}\n severity=\"error\"\n class=\"error-icon\"\n ></${iconExclamationMarkTag}>\n </div>\n <div\n class=\"positioning-region ${x => (x.orientation === Orientation.horizontal ? 'horizontal' : 'vertical')}\"\n part=\"positioning-region\"\n >\n <slot\n ${slotted({\n property: 'slottedRadioButtons',\n filter: elements('[role=radio]')\n })}\n ></slot>\n ${errorTextTemplate}\n </div>\n </template>\n`;\n"]}
@@ -3,7 +3,7 @@ import { DOM } from '@microsoft/fast-element';
3
3
  * Allows test code to wait for components to complete pending asynchronous updates that resulted
4
4
  * from DOM interactions like property or attribute changes.
5
5
  */
6
- export const waitForUpdatesAsync = async () => DOM.nextUpdate();
6
+ export const waitForUpdatesAsync = async () => await DOM.nextUpdate();
7
7
  /**
8
8
  * Allows test code to force components to synchronously complete normally asynchronous pending
9
9
  * updates that resulted from DOM interactions like property or attribute changes.
@@ -1 +1 @@
1
- {"version":3,"file":"async-helpers.js","sourceRoot":"","sources":["../../../src/testing/async-helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAE9C;;;GAGG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,KAAK,IAAmB,EAAE,CAAC,GAAG,CAAC,UAAU,EAAE,CAAC;AAE/E;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,GAAS,EAAE,CAAC,GAAG,CAAC,cAAc,EAAE,CAAC","sourcesContent":["import { DOM } from '@microsoft/fast-element';\n\n/**\n * Allows test code to wait for components to complete pending asynchronous updates that resulted\n * from DOM interactions like property or attribute changes.\n */\nexport const waitForUpdatesAsync = async (): Promise<void> => DOM.nextUpdate();\n\n/**\n * Allows test code to force components to synchronously complete normally asynchronous pending\n * updates that resulted from DOM interactions like property or attribute changes.\n */\nexport const processUpdates = (): void => DOM.processUpdates();\n"]}
1
+ {"version":3,"file":"async-helpers.js","sourceRoot":"","sources":["../../../src/testing/async-helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAE9C;;;GAGG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,KAAK,IAAmB,EAAE,CAAC,MAAM,GAAG,CAAC,UAAU,EAAE,CAAC;AAErF;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,GAAS,EAAE,CAAC,GAAG,CAAC,cAAc,EAAE,CAAC","sourcesContent":["import { DOM } from '@microsoft/fast-element';\n\n/**\n * Allows test code to wait for components to complete pending asynchronous updates that resulted\n * from DOM interactions like property or attribute changes.\n */\nexport const waitForUpdatesAsync = async (): Promise<void> => await DOM.nextUpdate();\n\n/**\n * Allows test code to force components to synchronously complete normally asynchronous pending\n * updates that resulted from DOM interactions like property or attribute changes.\n */\nexport const processUpdates = (): void => DOM.processUpdates();\n"]}
@@ -31,7 +31,7 @@ export async function sendKeyDownEvents(target, keySequence, init) {
31
31
  * The returned promise should be resolved prior to completing a test.
32
32
  */
33
33
  export async function waitForEvent(element, eventName, callback) {
34
- return new Promise(resolve => {
34
+ await new Promise(resolve => {
35
35
  const handler = ((evt) => {
36
36
  callback?.(evt);
37
37
  resolve();
@@ -45,7 +45,7 @@ export async function waitForEvent(element, eventName, callback) {
45
45
  * Waits for a requested animation frame to occur.
46
46
  */
47
47
  export async function waitAnimationFrame() {
48
- return new Promise(resolve => {
48
+ await new Promise(resolve => {
49
49
  requestAnimationFrame(() => resolve());
50
50
  });
51
51
  }
@@ -1 +1 @@
1
- {"version":3,"file":"component.js","sourceRoot":"","sources":["../../../../src/utilities/testing/component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAElE,MAAM,CAAC,KAAK,UAAU,YAAY,CAAC,OAAoB;IACnD,OAAO,CAAC,KAAK,EAAE,CAAC;IAChB,MAAM,mBAAmB,EAAE,CAAC;AAChC,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,gBAAgB,CAClC,MAAmB,EACnB,GAAW,EACX,IAAwB;IAExB,OAAO,CACH,MAAM,iBAAiB,CAAC,MAAM,EAAE,CAAC,GAAG,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CACpE,CAAC,CAAC,CAAE,CAAC;AACV,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,iBAAiB,CACnC,MAAmB,EACnB,WAAqB,EACrB,IAA0B;IAE1B,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC3B,MAAM,IAAI,KAAK,CAAC,8CAA8C,CAAC,CAAC;IACpE,CAAC;IACD,IAAI,IAAI,IAAI,IAAI,CAAC,MAAM,KAAK,WAAW,CAAC,MAAM,EAAE,CAAC;QAC7C,MAAM,IAAI,KAAK,CACX,+DAA+D,CAClE,CAAC;IACN,CAAC;IACD,MAAM,MAAM,GAAoB,EAAE,CAAC;IACnC,KAAK,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,CAAC;QAC/C,MAAM,KAAK,GAAG,IAAI,aAAa,CAAC,SAAS,EAAE;YACvC,GAAG;YACH,UAAU,EAAE,IAAI;YAChB,OAAO,EAAE,IAAI;YACb,GAAG,IAAI,EAAE,CAAC,KAAK,CAAC;SACnB,CAAC,CAAC;QACH,MAAM,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC5B,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACvB,CAAC;IACD,MAAM,mBAAmB,EAAE,CAAC;IAC5B,OAAO,MAAM,CAAC;AAClB,CAAC;AAED;;GAEG;AACH,MAAM,CAAC,KAAK,UAAU,YAAY,CAC9B,OAAoB,EACpB,SAAiB,EACjB,QAA2B;IAE3B,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE;QACzB,MAAM,OAAO,GAAG,CAAC,CAAC,GAAM,EAAQ,EAAE;YAC9B,QAAQ,EAAE,CAAC,GAAG,CAAC,CAAC;YAChB,OAAO,EAAE,CAAC;QACd,CAAC,CAAkB,CAAC;QACpB,OAAO,CAAC,gBAAgB,CAAC,SAAS,EAAE,OAAO,EAAE;YACzC,IAAI,EAAE,IAAI;SACb,CAAC,CAAC;IACP,CAAC,CAAC,CAAC;AACP,CAAC;AAED;;GAEG;AACH,MAAM,CAAC,KAAK,UAAU,kBAAkB;IACpC,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE;QACzB,qBAAqB,CAAC,GAAG,EAAE,CAAC,OAAO,EAAE,CAAC,CAAC;IAC3C,CAAC,CAAC,CAAC;AACP,CAAC","sourcesContent":["import { waitForUpdatesAsync } from '../../testing/async-helpers';\n\nexport async function clickElement(element: HTMLElement): Promise<void> {\n element.click();\n await waitForUpdatesAsync();\n}\n\nexport async function sendKeyDownEvent(\n target: HTMLElement,\n key: string,\n init?: KeyboardEventInit\n): Promise<KeyboardEvent> {\n return (\n await sendKeyDownEvents(target, [key], init ? [init] : undefined)\n )[0]!;\n}\n\nexport async function sendKeyDownEvents(\n target: HTMLElement,\n keySequence: string[],\n init?: KeyboardEventInit[]\n): Promise<KeyboardEvent[]> {\n if (keySequence.length === 0) {\n throw new Error('The key sequence must have at least one key.');\n }\n if (init && init.length !== keySequence.length) {\n throw new Error(\n 'The length of the key sequence and the init array must match.'\n );\n }\n const events: KeyboardEvent[] = [];\n for (const [index, key] of keySequence.entries()) {\n const event = new KeyboardEvent('keydown', {\n key,\n cancelable: true,\n bubbles: true,\n ...init?.[index]\n });\n target.dispatchEvent(event);\n events.push(event);\n }\n await waitForUpdatesAsync();\n return events;\n}\n\n/** A helper function to abstract turning waiting for an event to fire into a promise.\n * The returned promise should be resolved prior to completing a test.\n */\nexport async function waitForEvent<T extends Event>(\n element: HTMLElement,\n eventName: string,\n callback?: (evt: T) => void\n): Promise<void> {\n return new Promise(resolve => {\n const handler = ((evt: T): void => {\n callback?.(evt);\n resolve();\n }) as EventListener;\n element.addEventListener(eventName, handler, {\n once: true\n });\n });\n}\n\n/**\n * Waits for a requested animation frame to occur.\n */\nexport async function waitAnimationFrame(): Promise<void> {\n return new Promise(resolve => {\n requestAnimationFrame(() => resolve());\n });\n}\n"]}
1
+ {"version":3,"file":"component.js","sourceRoot":"","sources":["../../../../src/utilities/testing/component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAElE,MAAM,CAAC,KAAK,UAAU,YAAY,CAAC,OAAoB;IACnD,OAAO,CAAC,KAAK,EAAE,CAAC;IAChB,MAAM,mBAAmB,EAAE,CAAC;AAChC,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,gBAAgB,CAClC,MAAmB,EACnB,GAAW,EACX,IAAwB;IAExB,OAAO,CACH,MAAM,iBAAiB,CAAC,MAAM,EAAE,CAAC,GAAG,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CACpE,CAAC,CAAC,CAAE,CAAC;AACV,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,iBAAiB,CACnC,MAAmB,EACnB,WAAqB,EACrB,IAA0B;IAE1B,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC3B,MAAM,IAAI,KAAK,CAAC,8CAA8C,CAAC,CAAC;IACpE,CAAC;IACD,IAAI,IAAI,IAAI,IAAI,CAAC,MAAM,KAAK,WAAW,CAAC,MAAM,EAAE,CAAC;QAC7C,MAAM,IAAI,KAAK,CACX,+DAA+D,CAClE,CAAC;IACN,CAAC;IACD,MAAM,MAAM,GAAoB,EAAE,CAAC;IACnC,KAAK,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,CAAC;QAC/C,MAAM,KAAK,GAAG,IAAI,aAAa,CAAC,SAAS,EAAE;YACvC,GAAG;YACH,UAAU,EAAE,IAAI;YAChB,OAAO,EAAE,IAAI;YACb,GAAG,IAAI,EAAE,CAAC,KAAK,CAAC;SACnB,CAAC,CAAC;QACH,MAAM,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC5B,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACvB,CAAC;IACD,MAAM,mBAAmB,EAAE,CAAC;IAC5B,OAAO,MAAM,CAAC;AAClB,CAAC;AAED;;GAEG;AACH,MAAM,CAAC,KAAK,UAAU,YAAY,CAC9B,OAAoB,EACpB,SAAiB,EACjB,QAA2B;IAE3B,MAAM,IAAI,OAAO,CAAO,OAAO,CAAC,EAAE;QAC9B,MAAM,OAAO,GAAG,CAAC,CAAC,GAAM,EAAQ,EAAE;YAC9B,QAAQ,EAAE,CAAC,GAAG,CAAC,CAAC;YAChB,OAAO,EAAE,CAAC;QACd,CAAC,CAAkB,CAAC;QACpB,OAAO,CAAC,gBAAgB,CAAC,SAAS,EAAE,OAAO,EAAE;YACzC,IAAI,EAAE,IAAI;SACb,CAAC,CAAC;IACP,CAAC,CAAC,CAAC;AACP,CAAC;AAED;;GAEG;AACH,MAAM,CAAC,KAAK,UAAU,kBAAkB;IACpC,MAAM,IAAI,OAAO,CAAO,OAAO,CAAC,EAAE;QAC9B,qBAAqB,CAAC,GAAG,EAAE,CAAC,OAAO,EAAE,CAAC,CAAC;IAC3C,CAAC,CAAC,CAAC;AACP,CAAC","sourcesContent":["import { waitForUpdatesAsync } from '../../testing/async-helpers';\n\nexport async function clickElement(element: HTMLElement): Promise<void> {\n element.click();\n await waitForUpdatesAsync();\n}\n\nexport async function sendKeyDownEvent(\n target: HTMLElement,\n key: string,\n init?: KeyboardEventInit\n): Promise<KeyboardEvent> {\n return (\n await sendKeyDownEvents(target, [key], init ? [init] : undefined)\n )[0]!;\n}\n\nexport async function sendKeyDownEvents(\n target: HTMLElement,\n keySequence: string[],\n init?: KeyboardEventInit[]\n): Promise<KeyboardEvent[]> {\n if (keySequence.length === 0) {\n throw new Error('The key sequence must have at least one key.');\n }\n if (init && init.length !== keySequence.length) {\n throw new Error(\n 'The length of the key sequence and the init array must match.'\n );\n }\n const events: KeyboardEvent[] = [];\n for (const [index, key] of keySequence.entries()) {\n const event = new KeyboardEvent('keydown', {\n key,\n cancelable: true,\n bubbles: true,\n ...init?.[index]\n });\n target.dispatchEvent(event);\n events.push(event);\n }\n await waitForUpdatesAsync();\n return events;\n}\n\n/** A helper function to abstract turning waiting for an event to fire into a promise.\n * The returned promise should be resolved prior to completing a test.\n */\nexport async function waitForEvent<T extends Event>(\n element: HTMLElement,\n eventName: string,\n callback?: (evt: T) => void\n): Promise<void> {\n await new Promise<void>(resolve => {\n const handler = ((evt: T): void => {\n callback?.(evt);\n resolve();\n }) as EventListener;\n element.addEventListener(eventName, handler, {\n once: true\n });\n });\n}\n\n/**\n * Waits for a requested animation frame to occur.\n */\nexport async function waitAnimationFrame(): Promise<void> {\n await new Promise<void>(resolve => {\n requestAnimationFrame(() => resolve());\n });\n}\n"]}
@@ -1,7 +1,9 @@
1
1
  export async function waitUntilCustomElementsDefinedAsync(elements) {
2
- const definedElements = elements.map(async (item) => (item.matches(':not(:defined)')
3
- ? customElements.whenDefined(item.localName)
4
- : Promise.resolve()));
2
+ const definedElements = elements.map(async (item) => {
3
+ if (item.matches(':not(:defined)')) {
4
+ await customElements.whenDefined(item.localName);
5
+ }
6
+ });
5
7
  await Promise.all(definedElements);
6
8
  }
7
9
  //# sourceMappingURL=wait-until-custom-elements-defined-async.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"wait-until-custom-elements-defined-async.js","sourceRoot":"","sources":["../../../src/utilities/wait-until-custom-elements-defined-async.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,KAAK,UAAU,mCAAmC,CACrD,QAAmB;IAEnB,MAAM,eAAe,GAAG,QAAQ,CAAC,GAAG,CAAC,KAAK,EAAC,IAAI,EAAC,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC;QAC9E,CAAC,CAAC,cAAc,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC;QAC5C,CAAC,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;IAC1B,MAAM,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;AACvC,CAAC","sourcesContent":["export async function waitUntilCustomElementsDefinedAsync(\n elements: Element[]\n): Promise<void> {\n const definedElements = elements.map(async item => (item.matches(':not(:defined)')\n ? customElements.whenDefined(item.localName)\n : Promise.resolve()));\n await Promise.all(definedElements);\n}\n"]}
1
+ {"version":3,"file":"wait-until-custom-elements-defined-async.js","sourceRoot":"","sources":["../../../src/utilities/wait-until-custom-elements-defined-async.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,KAAK,UAAU,mCAAmC,CACrD,QAAmB;IAEnB,MAAM,eAAe,GAAG,QAAQ,CAAC,GAAG,CAAC,KAAK,EAAC,IAAI,EAAC,EAAE;QAC9C,IAAI,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,EAAE,CAAC;YACjC,MAAM,cAAc,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACrD,CAAC;IACL,CAAC,CAAC,CAAC;IACH,MAAM,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;AACvC,CAAC","sourcesContent":["export async function waitUntilCustomElementsDefinedAsync(\n elements: Element[]\n): Promise<void> {\n const definedElements = elements.map(async item => {\n if (item.matches(':not(:defined)')) {\n await customElements.whenDefined(item.localName);\n }\n });\n await Promise.all(definedElements);\n}\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ni/nimble-components",
3
- "version": "32.2.9",
3
+ "version": "32.3.0",
4
4
  "description": "Styled web components for the NI Nimble Design System",
5
5
  "scripts": {
6
6
  "build": "npm run generate-icons && npm run generate-workers && npm run build-components && npm run bundle-components && npm run generate-scss",