@ni/nimble-components 30.0.7 → 30.1.0

package/dist/esm/dialog/index.js.map

@@ -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"]}
+{"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"]}

package/dist/esm/drawer/index.js.map

@@ -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"]}
+{"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"]}

package/dist/esm/label-provider/base/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/label-provider/base/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC5E,OAAO,EAAY,UAAU,EAAmB,MAAM,yBAAyB,CAAC;AAChF,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAMxD;;GAEG;AACH,MAAM,OAAgB,iBAGlB,SAAQ,iBAAiB;IAH7B;;QAOqB,qBAAgB,GAAa,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IAoD/E,CAAC;IAjDmB,iBAAiB;QAC7B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAC/B,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;IAC1C,CAAC;IAEe,oBAAoB;QAChC,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QACxC,IAAI,IAAI,CAAC,aAAa,EAAE;YACpB,KAAK,MAAM,KAAK,IAAI,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,eAAe,CAAC,EAAE;gBACrD,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;aAC5C;YACD,IAAI,CAAC,aAAa,GAAG,SAAS,CAAC;SAClC;IACL,CAAC;IAEM,YAAY,CACf,QAA4C,EAC5C,QAAkD;QAElD,IAAI,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,EAAE;YAChC,MAAM,KAAK,GAAG,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAE,CAAC;YAC9C,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC;YAC7B,IAAI,IAAI,CAAC,aAAa,EAAE;gBACpB,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,EAAE;oBACvC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;iBAC5C;qBAAM;oBACH,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,aAAa,EAAE,KAAe,CAAC,CAAC;iBAC1D;aACJ;SACJ;IACL,CAAC;IAEO,uBAAuB;QAC3B,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,IAAI,SAAS,CAAC;QACjE,IAAI,IAAI,CAAC,aAAa,EAAE;YACpB,KAAK,MAAM,CAAC,QAAQ,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAC1C,IAAI,CAAC,eAAe,CACvB,EAAE;gBACC,MAAM,KAAK,GAAG,IAAI,CAAC,QAAoD,CAAC,CAAC;gBACzE,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,EAAE;oBACvC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;iBAC5C;qBAAM;oBACH,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,aAAa,EAAE,KAAe,CAAC,CAAC;iBAC1D;aACJ;SACJ;IACL,CAAC;CACJ","sourcesContent":["import { DesignToken, FoundationElement } from '@microsoft/fast-foundation';\nimport { Notifier, Observable, type Subscriber } from '@microsoft/fast-element';\nimport { themeProviderTag } from '../../theme-provider';\n\nexport type DesignTokensFor<ObjectT> = {\n    [key in keyof ObjectT]: string | undefined;\n};\n\n/**\n * Base class for label providers\n */\nexport abstract class LabelProviderBase<\n    SupportedLabels extends { [key: string]: DesignToken<string> }\n>\n    extends FoundationElement\n    implements Subscriber {\n    protected abstract supportedLabels: SupportedLabels;\n\n    private readonly propertyNotifier: Notifier = Observable.getNotifier(this);\n    private themeProvider?: HTMLElement;\n\n    public override connectedCallback(): void {\n        super.connectedCallback();\n        this.initializeThemeProvider();\n        this.propertyNotifier.subscribe(this);\n    }\n\n    public override disconnectedCallback(): void {\n        super.disconnectedCallback();\n        this.propertyNotifier.unsubscribe(this);\n        if (this.themeProvider) {\n            for (const token of Object.values(this.supportedLabels)) {\n                token.deleteValueFor(this.themeProvider);\n            }\n            this.themeProvider = undefined;\n        }\n    }\n\n    public handleChange(\n        _element: LabelProviderBase<SupportedLabels>,\n        property: keyof LabelProviderBase<SupportedLabels>\n    ): void {\n        if (this.supportedLabels[property]) {\n            const token = this.supportedLabels[property]!;\n            const value = this[property];\n            if (this.themeProvider) {\n                if (value === null || value === undefined) {\n                    token.deleteValueFor(this.themeProvider);\n                } else {\n                    token.setValueFor(this.themeProvider, value as string);\n                }\n            }\n        }\n    }\n\n    private initializeThemeProvider(): void {\n        this.themeProvider = this.closest(themeProviderTag) ?? undefined;\n        if (this.themeProvider) {\n            for (const [property, token] of Object.entries(\n                this.supportedLabels\n            )) {\n                const value = this[property as keyof LabelProviderBase<SupportedLabels>];\n                if (value === null || value === undefined) {\n                    token.deleteValueFor(this.themeProvider);\n                } else {\n                    token.setValueFor(this.themeProvider, value as string);\n                }\n            }\n        }\n    }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/label-provider/base/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC5E,OAAO,EAAY,UAAU,EAAmB,MAAM,yBAAyB,CAAC;AAChF,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAMxD;;GAEG;AACH,MAAM,OAAgB,iBAGlB,SAAQ,iBAAiB;IAH7B;;QAOqB,qBAAgB,GAAa,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IAoD/E,CAAC;IAjDmB,iBAAiB;QAC7B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAC/B,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;IAC1C,CAAC;IAEe,oBAAoB;QAChC,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QACxC,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YACrB,KAAK,MAAM,KAAK,IAAI,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,eAAe,CAAC,EAAE,CAAC;gBACtD,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;YAC7C,CAAC;YACD,IAAI,CAAC,aAAa,GAAG,SAAS,CAAC;QACnC,CAAC;IACL,CAAC;IAEM,YAAY,CACf,QAA4C,EAC5C,QAAkD;QAElD,IAAI,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,EAAE,CAAC;YACjC,MAAM,KAAK,GAAG,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAE,CAAC;YAC9C,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC;YAC7B,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;gBACrB,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;oBACxC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;gBAC7C,CAAC;qBAAM,CAAC;oBACJ,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,aAAa,EAAE,KAAe,CAAC,CAAC;gBAC3D,CAAC;YACL,CAAC;QACL,CAAC;IACL,CAAC;IAEO,uBAAuB;QAC3B,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,IAAI,SAAS,CAAC;QACjE,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YACrB,KAAK,MAAM,CAAC,QAAQ,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAC1C,IAAI,CAAC,eAAe,CACvB,EAAE,CAAC;gBACA,MAAM,KAAK,GAAG,IAAI,CAAC,QAAoD,CAAC,CAAC;gBACzE,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;oBACxC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;gBAC7C,CAAC;qBAAM,CAAC;oBACJ,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,aAAa,EAAE,KAAe,CAAC,CAAC;gBAC3D,CAAC;YACL,CAAC;QACL,CAAC;IACL,CAAC;CACJ","sourcesContent":["import { DesignToken, FoundationElement } from '@microsoft/fast-foundation';\nimport { Notifier, Observable, type Subscriber } from '@microsoft/fast-element';\nimport { themeProviderTag } from '../../theme-provider';\n\nexport type DesignTokensFor<ObjectT> = {\n    [key in keyof ObjectT]: string | undefined;\n};\n\n/**\n * Base class for label providers\n */\nexport abstract class LabelProviderBase<\n    SupportedLabels extends { [key: string]: DesignToken<string> }\n>\n    extends FoundationElement\n    implements Subscriber {\n    protected abstract supportedLabels: SupportedLabels;\n\n    private readonly propertyNotifier: Notifier = Observable.getNotifier(this);\n    private themeProvider?: HTMLElement;\n\n    public override connectedCallback(): void {\n        super.connectedCallback();\n        this.initializeThemeProvider();\n        this.propertyNotifier.subscribe(this);\n    }\n\n    public override disconnectedCallback(): void {\n        super.disconnectedCallback();\n        this.propertyNotifier.unsubscribe(this);\n        if (this.themeProvider) {\n            for (const token of Object.values(this.supportedLabels)) {\n                token.deleteValueFor(this.themeProvider);\n            }\n            this.themeProvider = undefined;\n        }\n    }\n\n    public handleChange(\n        _element: LabelProviderBase<SupportedLabels>,\n        property: keyof LabelProviderBase<SupportedLabels>\n    ): void {\n        if (this.supportedLabels[property]) {\n            const token = this.supportedLabels[property]!;\n            const value = this[property];\n            if (this.themeProvider) {\n                if (value === null || value === undefined) {\n                    token.deleteValueFor(this.themeProvider);\n                } else {\n                    token.setValueFor(this.themeProvider, value as string);\n                }\n            }\n        }\n    }\n\n    private initializeThemeProvider(): void {\n        this.themeProvider = this.closest(themeProviderTag) ?? undefined;\n        if (this.themeProvider) {\n            for (const [property, token] of Object.entries(\n                this.supportedLabels\n            )) {\n                const value = this[property as keyof LabelProviderBase<SupportedLabels>];\n                if (value === null || value === undefined) {\n                    token.deleteValueFor(this.themeProvider);\n                } else {\n                    token.setValueFor(this.themeProvider, value as string);\n                }\n            }\n        }\n    }\n}\n"]}

package/dist/esm/list-option/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/list-option/index.ts"],"names":[],"mappings":";AAAA,OAAO,EACH,YAAY,EACZ,aAAa,IAAI,uBAAuB,EAC3C,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAStC;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,uBAAuB;IAAvD;;QAII;;;;;;;WAOG;QAEa,WAAM,GAAG,KAAK,CAAC;QAE/B;;;;;;WAMG;QAEI,mBAAc,GAAG,KAAK,CAAC;QAE9B;;;;;;;WAOG;QAEI,iBAAY,GAAG,KAAK,CAAC;QAE5B,gBAAgB;QAET,gBAAW,GAAG,KAAK,CAAC;IAuC/B,CAAC;IArCG,gBAAgB;IAChB,IAAW,kBAAkB;QACzB,OAAO,IAAI,CAAC,WAAW;aAClB,aAAa,EAAE;aACf,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,CAAC;aACrC,IAAI,CAAC,GAAG,CAAC,CAAC;IACnB,CAAC;IAEe,iBAAiB;QAC7B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,MAAM,KAAK,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;QACxC,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC;IAEO,kBAAkB;QACtB,IAAI,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC;QAEhC,OAAO,MAAM,EAAE;YACX,IAAI,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,EAAE;gBAChC,OAAO,MAAM,CAAC;aACjB;YAED,MAAM,GAAG,MAAM,CAAC,aAAa,CAAC;SACjC;QAED,OAAO,SAAS,CAAC;IACrB,CAAC;IAEO,iBAAiB,CACrB,MAA0B;QAE1B,IAAI,CAAC,MAAM,EAAE;YACT,OAAO,KAAK,CAAC;SAChB;QAED,OAAO,OAAQ,MAA0B,CAAC,cAAc,KAAK,UAAU,CAAC;IAC5E,CAAC;CACJ;AAhEmB;IADf,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;0CACK;AAUxB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;kDAC1B;AAWvB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;gDAC1B;AAIrB;IADN,UAAU;+CACgB;AAyC/B,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,CAAC;IACxC,QAAQ,EAAE,aAAa;IACvB,SAAS,EAAE,uBAAuB;IAClC,QAAQ;IACR,MAAM;CACT,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    DesignSystem,\n    ListboxOption as FoundationListboxOption\n} from '@microsoft/fast-foundation';\nimport { observable, attr } from '@microsoft/fast-element';\nimport { styles } from './styles';\nimport { template } from './template';\nimport type { ListOptionOwner } from '../patterns/dropdown/types';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-list-option': ListOption;\n    }\n}\n\n/**\n * A nimble-styled HTML listbox option\n */\nexport class ListOption extends FoundationListboxOption {\n    /** @internal */\n    public contentSlot!: HTMLSlotElement;\n\n    /**\n     * The hidden state of the element.\n     *\n     * @public\n     * @defaultValue - false\n     * @remarks\n     * HTML Attribute: hidden\n     */\n    @attr({ mode: 'boolean' })\n    public override hidden = false;\n\n    /**\n     * @internal\n     * This attribute is required to allow use-cases that offer dynamic filtering\n     * (like the Select) to visually hide options that are filtered out, but still\n     * allow users to use the native 'hidden' attribute without it being affected\n     * by the filtering process.\n     */\n    @attr({ attribute: 'visually-hidden', mode: 'boolean' })\n    public visuallyHidden = false;\n\n    /**\n     * @internal\n     * This attribute is used to control the visual selected state of an option. This\n     * is handled independently of the public 'selected' attribute, as 'selected' is\n     * representative of the current value of the container control. However, while\n     * a dropdown is open users can navigate through the options (requiring visual\n     * updates) without changing the value of the container control.\n     */\n    @attr({ attribute: 'active-option', mode: 'boolean' })\n    public activeOption = false;\n\n    /** @internal */\n    @observable\n    public hasOverflow = false;\n\n    /** @internal */\n    public get elementTextContent(): string {\n        return this.contentSlot\n            .assignedNodes()\n            .map(node => node.textContent?.trim())\n            .join(' ');\n    }\n\n    public override connectedCallback(): void {\n        super.connectedCallback();\n        const owner = this.getListOptionOwner();\n        owner?.registerOption(this);\n    }\n\n    private getListOptionOwner(): ListOptionOwner | undefined {\n        let parent = this.parentElement;\n\n        while (parent) {\n            if (this.isListOptionOwner(parent)) {\n                return parent;\n            }\n\n            parent = parent.parentElement;\n        }\n\n        return undefined;\n    }\n\n    private isListOptionOwner(\n        parent: HTMLElement | null\n    ): parent is ListOptionOwner {\n        if (!parent) {\n            return false;\n        }\n\n        return typeof (parent as ListOptionOwner).registerOption === 'function';\n    }\n}\n\nconst nimbleListOption = ListOption.compose({\n    baseName: 'list-option',\n    baseClass: FoundationListboxOption,\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());\nexport const listOptionTag = 'nimble-list-option';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/list-option/index.ts"],"names":[],"mappings":";AAAA,OAAO,EACH,YAAY,EACZ,aAAa,IAAI,uBAAuB,EAC3C,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAStC;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,uBAAuB;IAAvD;;QAII;;;;;;;WAOG;QAEa,WAAM,GAAG,KAAK,CAAC;QAE/B;;;;;;WAMG;QAEI,mBAAc,GAAG,KAAK,CAAC;QAE9B;;;;;;;WAOG;QAEI,iBAAY,GAAG,KAAK,CAAC;QAE5B,gBAAgB;QAET,gBAAW,GAAG,KAAK,CAAC;IAuC/B,CAAC;IArCG,gBAAgB;IAChB,IAAW,kBAAkB;QACzB,OAAO,IAAI,CAAC,WAAW;aAClB,aAAa,EAAE;aACf,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,CAAC;aACrC,IAAI,CAAC,GAAG,CAAC,CAAC;IACnB,CAAC;IAEe,iBAAiB;QAC7B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,MAAM,KAAK,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;QACxC,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC;IAEO,kBAAkB;QACtB,IAAI,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC;QAEhC,OAAO,MAAM,EAAE,CAAC;YACZ,IAAI,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,EAAE,CAAC;gBACjC,OAAO,MAAM,CAAC;YAClB,CAAC;YAED,MAAM,GAAG,MAAM,CAAC,aAAa,CAAC;QAClC,CAAC;QAED,OAAO,SAAS,CAAC;IACrB,CAAC;IAEO,iBAAiB,CACrB,MAA0B;QAE1B,IAAI,CAAC,MAAM,EAAE,CAAC;YACV,OAAO,KAAK,CAAC;QACjB,CAAC;QAED,OAAO,OAAQ,MAA0B,CAAC,cAAc,KAAK,UAAU,CAAC;IAC5E,CAAC;CACJ;AAhEmB;IADf,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;0CACK;AAUxB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;kDAC1B;AAWvB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;gDAC1B;AAIrB;IADN,UAAU;+CACgB;AAyC/B,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,CAAC;IACxC,QAAQ,EAAE,aAAa;IACvB,SAAS,EAAE,uBAAuB;IAClC,QAAQ;IACR,MAAM;CACT,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    DesignSystem,\n    ListboxOption as FoundationListboxOption\n} from '@microsoft/fast-foundation';\nimport { observable, attr } from '@microsoft/fast-element';\nimport { styles } from './styles';\nimport { template } from './template';\nimport type { ListOptionOwner } from '../patterns/dropdown/types';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-list-option': ListOption;\n    }\n}\n\n/**\n * A nimble-styled HTML listbox option\n */\nexport class ListOption extends FoundationListboxOption {\n    /** @internal */\n    public contentSlot!: HTMLSlotElement;\n\n    /**\n     * The hidden state of the element.\n     *\n     * @public\n     * @defaultValue - false\n     * @remarks\n     * HTML Attribute: hidden\n     */\n    @attr({ mode: 'boolean' })\n    public override hidden = false;\n\n    /**\n     * @internal\n     * This attribute is required to allow use-cases that offer dynamic filtering\n     * (like the Select) to visually hide options that are filtered out, but still\n     * allow users to use the native 'hidden' attribute without it being affected\n     * by the filtering process.\n     */\n    @attr({ attribute: 'visually-hidden', mode: 'boolean' })\n    public visuallyHidden = false;\n\n    /**\n     * @internal\n     * This attribute is used to control the visual selected state of an option. This\n     * is handled independently of the public 'selected' attribute, as 'selected' is\n     * representative of the current value of the container control. However, while\n     * a dropdown is open users can navigate through the options (requiring visual\n     * updates) without changing the value of the container control.\n     */\n    @attr({ attribute: 'active-option', mode: 'boolean' })\n    public activeOption = false;\n\n    /** @internal */\n    @observable\n    public hasOverflow = false;\n\n    /** @internal */\n    public get elementTextContent(): string {\n        return this.contentSlot\n            .assignedNodes()\n            .map(node => node.textContent?.trim())\n            .join(' ');\n    }\n\n    public override connectedCallback(): void {\n        super.connectedCallback();\n        const owner = this.getListOptionOwner();\n        owner?.registerOption(this);\n    }\n\n    private getListOptionOwner(): ListOptionOwner | undefined {\n        let parent = this.parentElement;\n\n        while (parent) {\n            if (this.isListOptionOwner(parent)) {\n                return parent;\n            }\n\n            parent = parent.parentElement;\n        }\n\n        return undefined;\n    }\n\n    private isListOptionOwner(\n        parent: HTMLElement | null\n    ): parent is ListOptionOwner {\n        if (!parent) {\n            return false;\n        }\n\n        return typeof (parent as ListOptionOwner).registerOption === 'function';\n    }\n}\n\nconst nimbleListOption = ListOption.compose({\n    baseName: 'list-option',\n    baseClass: FoundationListboxOption,\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());\nexport const listOptionTag = 'nimble-list-option';\n"]}

package/dist/esm/list-option-group/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/list-option-group/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';\nimport {\n    observable,\n    attr,\n    volatile,\n    Observable\n} from '@microsoft/fast-element';\nimport { styles } from './styles';\nimport { template } from './template';\nimport { ListOption } from '../list-option';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-list-option-group': ListOptionGroup;\n    }\n}\n\n/**\n * A nimble-styled HTML listbox option group\n */\nexport class ListOptionGroup extends FoundationElement {\n    /**\n     * The label for the group.\n     *\n     * @public\n     * @remarks\n     * If a label is also provided via slotted content, the label attribute\n     * will have precedence.\n     */\n    @attr\n    public label?: string;\n\n    /**\n     * The hidden state of the element.\n     *\n     * @public\n     * @defaultValue - false\n     * @remarks\n     * HTML Attribute: hidden\n     */\n    @attr({ mode: 'boolean' })\n    public override hidden = false;\n\n    /**\n     * @internal\n     * This attribute is required to allow use-cases that offer dynamic filtering\n     * (like the Select) to visually hide groups that are filtered out, but still\n     * allow users to use the native 'hidden' attribute without it being affected\n     * by the filtering process.\n     */\n    @attr({ attribute: 'visually-hidden', mode: 'boolean' })\n    public visuallyHidden = false;\n\n    /**\n     * @internal\n     */\n    @attr({ attribute: 'top-separator-visible', mode: 'boolean' })\n    public topSeparatorVisible = false;\n\n    /**\n     * @internal\n     */\n    @attr({ attribute: 'bottom-separator-visible', mode: 'boolean' })\n    public bottomSeparatorVisible = false;\n\n    /** @internal */\n    @observable\n    public hasOverflow = false;\n\n    /** @internal */\n    public labelSlot!: HTMLSlotElement;\n\n    /** @internal */\n    @observable\n    public listOptions!: ListOption[];\n\n    /** @internal */\n    @volatile\n    public get labelContent(): string {\n        if (this.label) {\n            return this.label;\n        }\n\n        if (!this.$fastController.isConnected) {\n            return '';\n        }\n\n        const nodes = this.labelSlot.assignedNodes();\n        return nodes\n            .filter(node => node.textContent?.trim() !== '')\n            .map(node => node.textContent?.trim())\n            .join(' ');\n    }\n\n    private readonly hiddenOptions: Set<ListOption> = new Set();\n\n    /**\n     * @internal\n     */\n    public clickHandler(e: MouseEvent): void {\n        e.preventDefault();\n        e.stopImmediatePropagation();\n    }\n\n    /**\n     * @internal\n     */\n    public handleChange(source: unknown, propertyName: string): void {\n        if (\n            source instanceof ListOption\n            && (propertyName === 'hidden' || propertyName === 'visuallyHidden')\n        ) {\n            if (source.hidden || source.visuallyHidden) {\n                this.hiddenOptions.add(source);\n            } else {\n                this.hiddenOptions.delete(source);\n            }\n\n            this.visuallyHidden = this.hiddenOptions.size === this.listOptions.length;\n        }\n    }\n\n    private listOptionsChanged(\n        prev: ListOption[] | undefined,\n        next: ListOption[]\n    ): void {\n        this.hiddenOptions.clear();\n        next.filter(o => o.hidden || o.visuallyHidden).forEach(o => this.hiddenOptions.add(o));\n        prev?.forEach(o => {\n            const notifier = Observable.getNotifier(o);\n            notifier.unsubscribe(this, 'hidden');\n            notifier.unsubscribe(this, 'visuallyHidden');\n        });\n\n        let allOptionsHidden = true;\n        next?.forEach(o => {\n            const notifier = Observable.getNotifier(o);\n            notifier.subscribe(this, 'hidden');\n            notifier.subscribe(this, 'visuallyHidden');\n            allOptionsHidden = allOptionsHidden && (o.hidden || o.visuallyHidden);\n        });\n\n        this.visuallyHidden = next.length === 0 || allOptionsHidden;\n    }\n}\n\nconst nimbleListOptionGroup = ListOptionGroup.compose({\n    baseName: 'list-option-group',\n    baseClass: FoundationElement,\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate()\n    .withPrefix('nimble')\n    .register(nimbleListOptionGroup());\nexport const listOptionGroupTag = 'nimble-list-option-group';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/list-option-group/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';\nimport {\n    observable,\n    attr,\n    volatile,\n    Observable\n} from '@microsoft/fast-element';\nimport { styles } from './styles';\nimport { template } from './template';\nimport { ListOption } from '../list-option';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-list-option-group': ListOptionGroup;\n    }\n}\n\n/**\n * A nimble-styled HTML listbox option group\n */\nexport class ListOptionGroup extends FoundationElement {\n    /**\n     * The label for the group.\n     *\n     * @public\n     * @remarks\n     * If a label is also provided via slotted content, the label attribute\n     * will have precedence.\n     */\n    @attr\n    public label?: string;\n\n    /**\n     * The hidden state of the element.\n     *\n     * @public\n     * @defaultValue - false\n     * @remarks\n     * HTML Attribute: hidden\n     */\n    @attr({ mode: 'boolean' })\n    public override hidden = false;\n\n    /**\n     * @internal\n     * This attribute is required to allow use-cases that offer dynamic filtering\n     * (like the Select) to visually hide groups that are filtered out, but still\n     * allow users to use the native 'hidden' attribute without it being affected\n     * by the filtering process.\n     */\n    @attr({ attribute: 'visually-hidden', mode: 'boolean' })\n    public visuallyHidden = false;\n\n    /**\n     * @internal\n     */\n    @attr({ attribute: 'top-separator-visible', mode: 'boolean' })\n    public topSeparatorVisible = false;\n\n    /**\n     * @internal\n     */\n    @attr({ attribute: 'bottom-separator-visible', mode: 'boolean' })\n    public bottomSeparatorVisible = false;\n\n    /** @internal */\n    @observable\n    public hasOverflow = false;\n\n    /** @internal */\n    public labelSlot!: HTMLSlotElement;\n\n    /** @internal */\n    @observable\n    public listOptions!: ListOption[];\n\n    /** @internal */\n    @volatile\n    public get labelContent(): string {\n        if (this.label) {\n            return this.label;\n        }\n\n        if (!this.$fastController.isConnected) {\n            return '';\n        }\n\n        const nodes = this.labelSlot.assignedNodes();\n        return nodes\n            .filter(node => node.textContent?.trim() !== '')\n            .map(node => node.textContent?.trim())\n            .join(' ');\n    }\n\n    private readonly hiddenOptions: Set<ListOption> = new Set();\n\n    /**\n     * @internal\n     */\n    public clickHandler(e: MouseEvent): void {\n        e.preventDefault();\n        e.stopImmediatePropagation();\n    }\n\n    /**\n     * @internal\n     */\n    public handleChange(source: unknown, propertyName: string): void {\n        if (\n            source instanceof ListOption\n            && (propertyName === 'hidden' || propertyName === 'visuallyHidden')\n        ) {\n            if (source.hidden || source.visuallyHidden) {\n                this.hiddenOptions.add(source);\n            } else {\n                this.hiddenOptions.delete(source);\n            }\n\n            this.visuallyHidden = this.hiddenOptions.size === this.listOptions.length;\n        }\n    }\n\n    private listOptionsChanged(\n        prev: ListOption[] | undefined,\n        next: ListOption[]\n    ): void {\n        this.hiddenOptions.clear();\n        next.filter(o => o.hidden || o.visuallyHidden).forEach(o => this.hiddenOptions.add(o));\n        prev?.forEach(o => {\n            const notifier = Observable.getNotifier(o);\n            notifier.unsubscribe(this, 'hidden');\n            notifier.unsubscribe(this, 'visuallyHidden');\n        });\n\n        let allOptionsHidden = true;\n        next?.forEach(o => {\n            const notifier = Observable.getNotifier(o);\n            notifier.subscribe(this, 'hidden');\n            notifier.subscribe(this, 'visuallyHidden');\n            allOptionsHidden = allOptionsHidden && (o.hidden || o.visuallyHidden);\n        });\n\n        this.visuallyHidden = next.length === 0 || allOptionsHidden;\n    }\n}\n\nconst nimbleListOptionGroup = ListOptionGroup.compose({\n    baseName: 'list-option-group',\n    baseClass: FoundationElement,\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate()\n    .withPrefix('nimble')\n    .register(nimbleListOptionGroup());\nexport const listOptionGroupTag = 'nimble-list-option-group';\n"]}

package/dist/esm/mapping/icon/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/mapping/icon/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAEvC,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAQxC,SAAS,WAAW,CAAC,YAAsC;IACvD,OAAO,YAAY,CAAC,SAAS,YAAY,IAAI,CAAC;AAClD,CAAC;AAED;;;;GAIG;AACH,MAAM,OAAO,WAAY,SAAQ,OAAmB;IAApD;;QAWW,eAAU,GAAG,KAAK,CAAC;IA+C9B,CAAC;IArCG,gFAAgF;IACxE,KAAK,CAAC,gBAAgB,CAAC,IAAY;QACvC,IAAI;YACA,kEAAkE;YAClE,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;YAC9B,MAAM,cAAc,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;SAC1C;QAAC,OAAO,EAAE,EAAE;YACT,iEAAiE;YACjE,2FAA2F;YAC3F,iDAAiD;YACjD,OAAO;SACV;QAED,IAAI,IAAI,KAAK,IAAI,CAAC,IAAI,EAAE;YACpB,mEAAmE;YACnE,2FAA2F;YAC3F,iDAAiD;YACjD,OAAO;SACV;QAED,MAAM,YAAY,GAAG,cAAc,CAAC,GAAG,CAAC,IAAI,CAAE,CAAC;QAC/C,IAAI,CAAC,YAAY,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IACrE,CAAC;IAEO,WAAW;QACf,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QACvB,IAAI,CAAC,IAAI,EAAE;YACP,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;YAC9B,OAAO;SACV;QACD,MAAM,YAAY,GAAG,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QAC9C,IAAI,YAAY,EAAE;YACd,IAAI,CAAC,YAAY,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;YACjE,OAAO;SACV;QACD,KAAK,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;IACrC,CAAC;CACJ;AAxDU;IADN,IAAI,EAAE;yCACc;AAGd;IADN,IAAI,EAAE;6CACuB;AAGvB;IADN,IAAI,EAAE;yCACc;AAGd;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;+CAC1B;AAQnB;IADN,UAAU;iDACkB;AAyCjC,MAAM,WAAW,GAAG,WAAW,CAAC,OAAO,CAAC;IACpC,QAAQ,EAAE,cAAc;IACxB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AACH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC,CAAC;AACxE,MAAM,CAAC,MAAM,cAAc,GAAG,qBAAqB,CAAC","sourcesContent":["import { attr, observable } from '@microsoft/fast-element';\nimport { DesignSystem } from '@microsoft/fast-foundation';\nimport { Mapping } from '../base';\nimport { template } from '../base/template';\nimport type { IconSeverity } from '../../icon-base/types';\nimport { Icon } from '../../icon-base';\nimport type { MappingKey } from '../base/types';\nimport { styles } from '../base/styles';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-mapping-icon': MappingIcon;\n    }\n}\n\nfunction isIconClass(elementClass: CustomElementConstructor): boolean {\n    return elementClass.prototype instanceof Icon;\n}\n\n/**\n * Maps a data value to an icon.\n * One or more may be added as children of a nimble-table-column-mapping element to define\n * how specific data values should be displayed as icons in that column's cells.\n */\nexport class MappingIcon extends Mapping<MappingKey> {\n    @attr()\n    public icon?: string;\n\n    @attr()\n    public severity: IconSeverity;\n\n    @attr()\n    public text?: string;\n\n    @attr({ attribute: 'text-hidden', mode: 'boolean' })\n    public textHidden = false;\n\n    /**\n     * @internal\n     * Calculated asynchronously by the icon mapping based on the configured icon value.\n     * When assigned, it corresponds to an element name that is resolved to type of Nimble Icon.\n     */\n    @observable\n    public resolvedIcon?: string;\n\n    // Allow icons to be defined asynchronously from when the property is configured\n    private async resolveIconAsync(icon: string): Promise<void> {\n        try {\n            // Clear the current resolution while waiting for async resolution\n            this.resolvedIcon = undefined;\n            await customElements.whenDefined(icon);\n        } catch (ex) {\n            // If any error (i.e. invalid custom element name) don't continue\n            // Don't update the resolvedIcon as it was already set to undefined before async resolution\n            // (in case other async resolutions were started)\n            return;\n        }\n\n        if (icon !== this.icon) {\n            // Possible the icon has changed while waiting for async resolution\n            // Don't update the resolvedIcon as it was already set to undefined before async resolution\n            // (in case other async resolutions were started)\n            return;\n        }\n\n        const elementClass = customElements.get(icon)!;\n        this.resolvedIcon = isIconClass(elementClass) ? icon : undefined;\n    }\n\n    private iconChanged(): void {\n        const icon = this.icon;\n        if (!icon) {\n            this.resolvedIcon = undefined;\n            return;\n        }\n        const elementClass = customElements.get(icon);\n        if (elementClass) {\n            this.resolvedIcon = isIconClass(elementClass) ? icon : undefined;\n            return;\n        }\n        void this.resolveIconAsync(icon);\n    }\n}\n\nconst iconMapping = MappingIcon.compose({\n    baseName: 'mapping-icon',\n    template,\n    styles\n});\nDesignSystem.getOrCreate().withPrefix('nimble').register(iconMapping());\nexport const mappingIconTag = 'nimble-mapping-icon';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/mapping/icon/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAEvC,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAQxC,SAAS,WAAW,CAAC,YAAsC;IACvD,OAAO,YAAY,CAAC,SAAS,YAAY,IAAI,CAAC;AAClD,CAAC;AAED;;;;GAIG;AACH,MAAM,OAAO,WAAY,SAAQ,OAAmB;IAApD;;QAWW,eAAU,GAAG,KAAK,CAAC;IA+C9B,CAAC;IArCG,gFAAgF;IACxE,KAAK,CAAC,gBAAgB,CAAC,IAAY;QACvC,IAAI,CAAC;YACD,kEAAkE;YAClE,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;YAC9B,MAAM,cAAc,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QAC3C,CAAC;QAAC,OAAO,EAAE,EAAE,CAAC;YACV,iEAAiE;YACjE,2FAA2F;YAC3F,iDAAiD;YACjD,OAAO;QACX,CAAC;QAED,IAAI,IAAI,KAAK,IAAI,CAAC,IAAI,EAAE,CAAC;YACrB,mEAAmE;YACnE,2FAA2F;YAC3F,iDAAiD;YACjD,OAAO;QACX,CAAC;QAED,MAAM,YAAY,GAAG,cAAc,CAAC,GAAG,CAAC,IAAI,CAAE,CAAC;QAC/C,IAAI,CAAC,YAAY,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IACrE,CAAC;IAEO,WAAW;QACf,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QACvB,IAAI,CAAC,IAAI,EAAE,CAAC;YACR,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;YAC9B,OAAO;QACX,CAAC;QACD,MAAM,YAAY,GAAG,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QAC9C,IAAI,YAAY,EAAE,CAAC;YACf,IAAI,CAAC,YAAY,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;YACjE,OAAO;QACX,CAAC;QACD,KAAK,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;IACrC,CAAC;CACJ;AAxDU;IADN,IAAI,EAAE;yCACc;AAGd;IADN,IAAI,EAAE;6CACuB;AAGvB;IADN,IAAI,EAAE;yCACc;AAGd;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;+CAC1B;AAQnB;IADN,UAAU;iDACkB;AAyCjC,MAAM,WAAW,GAAG,WAAW,CAAC,OAAO,CAAC;IACpC,QAAQ,EAAE,cAAc;IACxB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AACH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC,CAAC;AACxE,MAAM,CAAC,MAAM,cAAc,GAAG,qBAAqB,CAAC","sourcesContent":["import { attr, observable } from '@microsoft/fast-element';\nimport { DesignSystem } from '@microsoft/fast-foundation';\nimport { Mapping } from '../base';\nimport { template } from '../base/template';\nimport type { IconSeverity } from '../../icon-base/types';\nimport { Icon } from '../../icon-base';\nimport type { MappingKey } from '../base/types';\nimport { styles } from '../base/styles';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-mapping-icon': MappingIcon;\n    }\n}\n\nfunction isIconClass(elementClass: CustomElementConstructor): boolean {\n    return elementClass.prototype instanceof Icon;\n}\n\n/**\n * Maps a data value to an icon.\n * One or more may be added as children of a nimble-table-column-mapping element to define\n * how specific data values should be displayed as icons in that column's cells.\n */\nexport class MappingIcon extends Mapping<MappingKey> {\n    @attr()\n    public icon?: string;\n\n    @attr()\n    public severity: IconSeverity;\n\n    @attr()\n    public text?: string;\n\n    @attr({ attribute: 'text-hidden', mode: 'boolean' })\n    public textHidden = false;\n\n    /**\n     * @internal\n     * Calculated asynchronously by the icon mapping based on the configured icon value.\n     * When assigned, it corresponds to an element name that is resolved to type of Nimble Icon.\n     */\n    @observable\n    public resolvedIcon?: string;\n\n    // Allow icons to be defined asynchronously from when the property is configured\n    private async resolveIconAsync(icon: string): Promise<void> {\n        try {\n            // Clear the current resolution while waiting for async resolution\n            this.resolvedIcon = undefined;\n            await customElements.whenDefined(icon);\n        } catch (ex) {\n            // If any error (i.e. invalid custom element name) don't continue\n            // Don't update the resolvedIcon as it was already set to undefined before async resolution\n            // (in case other async resolutions were started)\n            return;\n        }\n\n        if (icon !== this.icon) {\n            // Possible the icon has changed while waiting for async resolution\n            // Don't update the resolvedIcon as it was already set to undefined before async resolution\n            // (in case other async resolutions were started)\n            return;\n        }\n\n        const elementClass = customElements.get(icon)!;\n        this.resolvedIcon = isIconClass(elementClass) ? icon : undefined;\n    }\n\n    private iconChanged(): void {\n        const icon = this.icon;\n        if (!icon) {\n            this.resolvedIcon = undefined;\n            return;\n        }\n        const elementClass = customElements.get(icon);\n        if (elementClass) {\n            this.resolvedIcon = isIconClass(elementClass) ? icon : undefined;\n            return;\n        }\n        void this.resolveIconAsync(icon);\n    }\n}\n\nconst iconMapping = MappingIcon.compose({\n    baseName: 'mapping-icon',\n    template,\n    styles\n});\nDesignSystem.getOrCreate().withPrefix('nimble').register(iconMapping());\nexport const mappingIconTag = 'nimble-mapping-icon';\n"]}

package/dist/esm/menu-button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/menu-button/index.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n    attr,\n    nullableNumberConverter,\n    observable\n} from '@microsoft/fast-element';\nimport { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';\nimport {\n    eventChange,\n    keyArrowDown,\n    keyArrowUp,\n    keyEscape\n} from '@microsoft/fast-web-utilities';\nimport {\n    ButtonAppearance,\n    ButtonAppearanceVariant,\n    MenuButtonToggleEventDetail,\n    MenuButtonPosition\n} from './types';\nimport type { ToggleButton } from '../toggle-button';\nimport { styles } from './styles';\nimport { template } from './template';\nimport type { ButtonPattern } from '../patterns/button/types';\nimport type { AnchoredRegion } from '../anchored-region';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-menu-button': MenuButton;\n    }\n}\n\n/**\n * A nimble-styled menu button control.\n */\nexport class MenuButton extends FoundationElement implements ButtonPattern {\n    @attr\n    public appearance: ButtonAppearance = ButtonAppearance.outline;\n\n    @attr({ attribute: 'appearance-variant' })\n    public appearanceVariant: ButtonAppearanceVariant;\n\n    @attr({ mode: 'boolean' })\n    public disabled = false;\n\n    @attr({ attribute: 'content-hidden', mode: 'boolean' })\n    public contentHidden = false;\n\n    @attr({ attribute: 'tabindex', converter: nullableNumberConverter })\n    public override tabIndex!: number;\n\n    /**\n     * Specifies whether or not the menu is open.\n     */\n    @attr({ mode: 'boolean' })\n    public open = false;\n\n    /**\n     * Configures where the menu should be placed relative to the button that opens the menu.\n     */\n    @attr({ attribute: 'position' })\n    public position: MenuButtonPosition = MenuButtonPosition.auto;\n\n    /** @internal */\n    @observable\n    public readonly toggleButton?: ToggleButton;\n\n    /** @internal */\n    @observable\n    public readonly region?: AnchoredRegion;\n\n    /** @internal */\n    @observable\n    public readonly slottedMenus?: HTMLElement[];\n\n    /**\n     * Used to maintain the internal state of whether the last menu item should be focused instead\n     * of the first menu item the next time the menu is opened.\n     */\n    private focusLastItemWhenOpened = false;\n\n    public override disconnectedCallback(): void {\n        super.disconnectedCallback();\n        if (this.region) {\n            this.region.removeEventListener(\n                eventChange,\n                this.menuChangeHandler\n            );\n        }\n    }\n\n    public toggleButtonChanged(\n        _prev: ToggleButton | undefined,\n        _next: ToggleButton | undefined\n    ): void {\n        if (this.region && this.toggleButton) {\n            this.region.anchorElement = this.toggleButton;\n        }\n    }\n\n    public regionChanged(\n        prev: AnchoredRegion | undefined,\n        _next: AnchoredRegion | undefined\n    ): void {\n        if (prev) {\n            prev.removeEventListener(eventChange, this.menuChangeHandler);\n        }\n\n        if (this.region) {\n            if (this.toggleButton) {\n                this.region.anchorElement = this.toggleButton;\n            }\n            this.region.addEventListener(eventChange, this.menuChangeHandler, {\n                capture: true\n            });\n        }\n    }\n\n    public openChanged(_prev: boolean | undefined, _next: boolean): void {\n        if (this.toggleButton) {\n            this.toggleButton.checked = this.open;\n        }\n\n        if (!this.open) {\n            // Only fire an event here if the menu is changing to being closed. Otherwise,\n            // wait until the menu is actually opened before firing the event.\n            const eventDetail: MenuButtonToggleEventDetail = {\n                oldState: true,\n                newState: false\n            };\n            this.$emit('toggle', eventDetail);\n        }\n    }\n\n    public regionLoadedHandler(): void {\n        if (this.focusLastItemWhenOpened) {\n            this.focusLastMenuItem();\n            this.focusLastItemWhenOpened = false;\n        } else {\n            this.focusMenu();\n        }\n\n        const eventDetail: MenuButtonToggleEventDetail = {\n            oldState: false,\n            newState: true\n        };\n        this.$emit('toggle', eventDetail);\n    }\n\n    public focusoutHandler(e: FocusEvent): boolean {\n        if (!this.open) {\n            return true;\n        }\n\n        const focusTarget = e.relatedTarget as HTMLElement;\n        if (\n            !this.contains(focusTarget)\n            && !this.getMenu()?.contains(focusTarget)\n        ) {\n            this.setOpen(false);\n            return false;\n        }\n\n        return true;\n    }\n\n    public toggleButtonCheckedChangeHandler(e: Event): boolean {\n        this.setOpen(this.toggleButton!.checked);\n        // Don't bubble the 'change' event from the toggle button because\n        // the menu button has its own 'toggle' event.\n        e.stopPropagation();\n        return false;\n    }\n\n    public toggleButtonKeyDownHandler(e: KeyboardEvent): boolean {\n        switch (e.key) {\n            case keyArrowUp:\n                this.focusLastItemWhenOpened = true;\n                this.setOpen(true);\n                return false;\n            case keyArrowDown:\n                this.setOpen(true);\n                return false;\n            default:\n                return true;\n        }\n    }\n\n    public menuKeyDownHandler(e: KeyboardEvent): boolean {\n        switch (e.key) {\n            case keyEscape:\n                this.setOpen(false);\n                this.toggleButton!.focus();\n                return false;\n            default:\n                return true;\n        }\n    }\n\n    private setOpen(newValue: boolean): void {\n        if (this.open === newValue) {\n            return;\n        }\n\n        const eventDetail: MenuButtonToggleEventDetail = {\n            oldState: this.open,\n            newState: newValue\n        };\n        this.$emit('beforetoggle', eventDetail);\n\n        this.open = newValue;\n    }\n\n    private getMenu(): HTMLElement | undefined {\n        // Get the menu that is slotted within the menu-button, taking into account\n        // that it may be nested within multiple 'slot' elements, such as when used\n        // within a table.\n        if (!this.slottedMenus?.length) {\n            return undefined;\n        }\n\n        let currentItem: HTMLElement | undefined = this.slottedMenus[0];\n        while (currentItem) {\n            if (currentItem.getAttribute('role') === 'menu') {\n                return currentItem;\n            }\n\n            if (this.isSlotElement(currentItem)) {\n                const firstNode = currentItem.assignedNodes()[0];\n                if (firstNode instanceof HTMLElement) {\n                    currentItem = firstNode;\n                } else {\n                    currentItem = undefined;\n                }\n            } else {\n                return undefined;\n            }\n        }\n\n        return undefined;\n    }\n\n    private isSlotElement(\n        element: HTMLElement | undefined\n    ): element is HTMLSlotElement {\n        return element?.nodeName === 'SLOT';\n    }\n\n    private focusMenu(): void {\n        this.getMenu()?.focus();\n    }\n\n    private focusLastMenuItem(): void {\n        const menuItems = this.getMenu()?.querySelectorAll('[role=menuitem]');\n        if (menuItems?.length) {\n            const lastMenuItem = menuItems[menuItems.length - 1] as HTMLElement;\n            lastMenuItem.focus();\n        }\n    }\n\n    private readonly menuChangeHandler = (): void => {\n        this.setOpen(false);\n        this.toggleButton!.focus();\n    };\n}\n\nconst nimbleMenuButton = MenuButton.compose({\n    baseName: 'menu-button',\n    template,\n    styles,\n    shadowOptions: {\n        delegatesFocus: true\n    }\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuButton());\nexport const menuButtonTag = 'nimble-menu-button';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/menu-button/index.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n    attr,\n    nullableNumberConverter,\n    observable\n} from '@microsoft/fast-element';\nimport { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';\nimport {\n    eventChange,\n    keyArrowDown,\n    keyArrowUp,\n    keyEscape\n} from '@microsoft/fast-web-utilities';\nimport {\n    ButtonAppearance,\n    ButtonAppearanceVariant,\n    MenuButtonToggleEventDetail,\n    MenuButtonPosition\n} from './types';\nimport type { ToggleButton } from '../toggle-button';\nimport { styles } from './styles';\nimport { template } from './template';\nimport type { ButtonPattern } from '../patterns/button/types';\nimport type { AnchoredRegion } from '../anchored-region';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-menu-button': MenuButton;\n    }\n}\n\n/**\n * A nimble-styled menu button control.\n */\nexport class MenuButton extends FoundationElement implements ButtonPattern {\n    @attr\n    public appearance: ButtonAppearance = ButtonAppearance.outline;\n\n    @attr({ attribute: 'appearance-variant' })\n    public appearanceVariant: ButtonAppearanceVariant;\n\n    @attr({ mode: 'boolean' })\n    public disabled = false;\n\n    @attr({ attribute: 'content-hidden', mode: 'boolean' })\n    public contentHidden = false;\n\n    @attr({ attribute: 'tabindex', converter: nullableNumberConverter })\n    public override tabIndex!: number;\n\n    /**\n     * Specifies whether or not the menu is open.\n     */\n    @attr({ mode: 'boolean' })\n    public open = false;\n\n    /**\n     * Configures where the menu should be placed relative to the button that opens the menu.\n     */\n    @attr({ attribute: 'position' })\n    public position: MenuButtonPosition = MenuButtonPosition.auto;\n\n    /** @internal */\n    @observable\n    public readonly toggleButton?: ToggleButton;\n\n    /** @internal */\n    @observable\n    public readonly region?: AnchoredRegion;\n\n    /** @internal */\n    @observable\n    public readonly slottedMenus?: HTMLElement[];\n\n    /**\n     * Used to maintain the internal state of whether the last menu item should be focused instead\n     * of the first menu item the next time the menu is opened.\n     */\n    private focusLastItemWhenOpened = false;\n\n    public override disconnectedCallback(): void {\n        super.disconnectedCallback();\n        if (this.region) {\n            this.region.removeEventListener(\n                eventChange,\n                this.menuChangeHandler\n            );\n        }\n    }\n\n    public toggleButtonChanged(\n        _prev: ToggleButton | undefined,\n        _next: ToggleButton | undefined\n    ): void {\n        if (this.region && this.toggleButton) {\n            this.region.anchorElement = this.toggleButton;\n        }\n    }\n\n    public regionChanged(\n        prev: AnchoredRegion | undefined,\n        _next: AnchoredRegion | undefined\n    ): void {\n        if (prev) {\n            prev.removeEventListener(eventChange, this.menuChangeHandler);\n        }\n\n        if (this.region) {\n            if (this.toggleButton) {\n                this.region.anchorElement = this.toggleButton;\n            }\n            this.region.addEventListener(eventChange, this.menuChangeHandler, {\n                capture: true\n            });\n        }\n    }\n\n    public openChanged(_prev: boolean | undefined, _next: boolean): void {\n        if (this.toggleButton) {\n            this.toggleButton.checked = this.open;\n        }\n\n        if (!this.open) {\n            // Only fire an event here if the menu is changing to being closed. Otherwise,\n            // wait until the menu is actually opened before firing the event.\n            const eventDetail: MenuButtonToggleEventDetail = {\n                oldState: true,\n                newState: false\n            };\n            this.$emit('toggle', eventDetail);\n        }\n    }\n\n    public regionLoadedHandler(): void {\n        if (this.focusLastItemWhenOpened) {\n            this.focusLastMenuItem();\n            this.focusLastItemWhenOpened = false;\n        } else {\n            this.focusMenu();\n        }\n\n        const eventDetail: MenuButtonToggleEventDetail = {\n            oldState: false,\n            newState: true\n        };\n        this.$emit('toggle', eventDetail);\n    }\n\n    public focusoutHandler(e: FocusEvent): boolean {\n        if (!this.open) {\n            return true;\n        }\n\n        const focusTarget = e.relatedTarget as HTMLElement;\n        if (\n            !this.contains(focusTarget)\n            && !this.getMenu()?.contains(focusTarget)\n        ) {\n            this.setOpen(false);\n            return false;\n        }\n\n        return true;\n    }\n\n    public toggleButtonCheckedChangeHandler(e: Event): boolean {\n        this.setOpen(this.toggleButton!.checked);\n        // Don't bubble the 'change' event from the toggle button because\n        // the menu button has its own 'toggle' event.\n        e.stopPropagation();\n        return false;\n    }\n\n    public toggleButtonKeyDownHandler(e: KeyboardEvent): boolean {\n        switch (e.key) {\n            case keyArrowUp:\n                this.focusLastItemWhenOpened = true;\n                this.setOpen(true);\n                return false;\n            case keyArrowDown:\n                this.setOpen(true);\n                return false;\n            default:\n                return true;\n        }\n    }\n\n    public menuKeyDownHandler(e: KeyboardEvent): boolean {\n        switch (e.key) {\n            case keyEscape:\n                this.setOpen(false);\n                this.toggleButton!.focus();\n                return false;\n            default:\n                return true;\n        }\n    }\n\n    private setOpen(newValue: boolean): void {\n        if (this.open === newValue) {\n            return;\n        }\n\n        const eventDetail: MenuButtonToggleEventDetail = {\n            oldState: this.open,\n            newState: newValue\n        };\n        this.$emit('beforetoggle', eventDetail);\n\n        this.open = newValue;\n    }\n\n    private getMenu(): HTMLElement | undefined {\n        // Get the menu that is slotted within the menu-button, taking into account\n        // that it may be nested within multiple 'slot' elements, such as when used\n        // within a table.\n        if (!this.slottedMenus?.length) {\n            return undefined;\n        }\n\n        let currentItem: HTMLElement | undefined = this.slottedMenus[0];\n        while (currentItem) {\n            if (currentItem.getAttribute('role') === 'menu') {\n                return currentItem;\n            }\n\n            if (this.isSlotElement(currentItem)) {\n                const firstNode = currentItem.assignedNodes()[0];\n                if (firstNode instanceof HTMLElement) {\n                    currentItem = firstNode;\n                } else {\n                    currentItem = undefined;\n                }\n            } else {\n                return undefined;\n            }\n        }\n\n        return undefined;\n    }\n\n    private isSlotElement(\n        element: HTMLElement | undefined\n    ): element is HTMLSlotElement {\n        return element?.nodeName === 'SLOT';\n    }\n\n    private focusMenu(): void {\n        this.getMenu()?.focus();\n    }\n\n    private focusLastMenuItem(): void {\n        const menuItems = this.getMenu()?.querySelectorAll('[role=menuitem]');\n        if (menuItems?.length) {\n            const lastMenuItem = menuItems[menuItems.length - 1] as HTMLElement;\n            lastMenuItem.focus();\n        }\n    }\n\n    private readonly menuChangeHandler = (): void => {\n        this.setOpen(false);\n        this.toggleButton!.focus();\n    };\n}\n\nconst nimbleMenuButton = MenuButton.compose({\n    baseName: 'menu-button',\n    template,\n    styles,\n    shadowOptions: {\n        delegatesFocus: true\n    }\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuButton());\nexport const menuButtonTag = 'nimble-menu-button';\n"]}

package/dist/esm/menu-button/testing/menu-button.pageobject.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-button.pageobject.js","sourceRoot":"","sources":["../../../../src/menu-button/testing/menu-button.pageobject.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n    keyArrowDown,\n    keyArrowUp,\n    keyEnter,\n    keyEscape,\n    keySpace\n} from '@microsoft/fast-web-utilities';\nimport type { MenuButton } from '..';\nimport { waitForEventAsync } from '../../utilities/testing/component';\n\n/**\n * Page object for `nimble-menu-button` component to provide consistent ways\n * of querying and interacting with the component during tests.\n *\n * This page object is intended to be used to interact with a `nimble-menu-button`,\n * not the menu slotted into the button or the menu items.\n */\nexport class MenuButtonPageObject {\n    public constructor(protected readonly menuButtonElement: MenuButton) {}\n\n    /**\n     * @returns Whether or not the menu is open.\n     */\n    public isOpen(): boolean {\n        return this.menuButtonElement.open;\n    }\n\n    /**\n     * Opens the menu.\n     * @returns A promise that resolves when the menu opens.\n     */\n    public async openMenu(): Promise<void> {\n        if (this.isOpen()) {\n            return;\n        }\n\n        const toggleEventPromise = waitForEventAsync(\n            this.menuButtonElement,\n            'toggle'\n        );\n        this.clickMenuButton();\n        await toggleEventPromise;\n    }\n\n    /**\n     * Closes the menu by pressing Escape.\n     * Throws an error if the menu is not open.\n     */\n    public closeMenuWithEscape(): void {\n        if (!this.isOpen()) {\n            throw new Error('Cannot close menu when it is not open');\n        }\n\n        const event = new KeyboardEvent('keydown', {\n            key: keyEscape\n        });\n        this.menuButtonElement.region!.dispatchEvent(event);\n    }\n\n    /**\n     * Gets the text in the menu button.\n     * @returns The trimmed text that is slotted into the menu button.\n     */\n    public getLabelText(): string {\n        return this.menuButtonElement.textContent?.trim() ?? '';\n    }\n\n    /**\n     * @returns Whether or not the menu button is focused.\n     */\n    public isFocused(): boolean {\n        return this.menuButtonElement.shadowRoot?.activeElement !== null;\n    }\n\n    /**\n     * @internal\n     * Focuses and clicks the menu button.\n     */\n    public clickMenuButton(): void {\n        // Focus the menu button before calling click() because ordinarily a mouse click\n        // would bring focus to the button, but calling click() directly does not.\n        this.menuButtonElement.focus();\n        this.menuButtonElement.toggleButton!.control.click();\n    }\n\n    /**\n     * @internal\n     * Presses the Enter key on the menu button.\n     */\n    public pressEnterKey(): void {\n        // Focus the menu button before dispatching the event because a key event only makes sense on a focused element.\n        this.menuButtonElement.focus();\n        const event = new KeyboardEvent('keypress', {\n            key: keyEnter\n        });\n        this.menuButtonElement.toggleButton!.control.dispatchEvent(event);\n    }\n\n    /**\n     * @internal\n     * Presses the Space key on the menu button.\n     */\n    public pressSpaceKey(): void {\n        // Focus the menu button before dispatching the event because a key event only makes sense on a focused element.\n        this.menuButtonElement.focus();\n        const event = new KeyboardEvent('keypress', {\n            key: keySpace\n        });\n        this.menuButtonElement.toggleButton!.control.dispatchEvent(event);\n    }\n\n    /**\n     * @internal\n     * Presses the Arrow Up key on the menu button.\n     */\n    public pressArrowUpKey(): void {\n        // Focus the menu button before dispatching the event because a key event only makes sense on a focused element.\n        this.menuButtonElement.focus();\n        const event = new KeyboardEvent('keydown', {\n            key: keyArrowUp\n        });\n        this.menuButtonElement.toggleButton!.dispatchEvent(event);\n    }\n\n    /**\n     * @internal\n     * Presses the Arrow Down key on the menu button.\n     */\n    public pressArrowDownKey(): void {\n        // Focus the menu button before dispatching the event because a key event only makes sense on a focused element.\n        this.menuButtonElement.focus();\n        const event = new KeyboardEvent('keydown', {\n            key: keyArrowDown\n        });\n        this.menuButtonElement.toggleButton!.dispatchEvent(event);\n    }\n\n    /**\n     * @internal\n     */\n    public getTitle(): string {\n        return this.menuButtonElement.title;\n    }\n\n    /**\n     * @internal\n     */\n    public dispatchEvent(event: Event): void {\n        this.menuButtonElement.dispatchEvent(event);\n    }\n}\n"]}
+{"version":3,"file":"menu-button.pageobject.js","sourceRoot":"","sources":["../../../../src/menu-button/testing/menu-button.pageobject.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,SAAS,EACT,QAAQ,EACX,MAAM,+BAA+B,CAAC;AAEvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAEtE;;;;;;GAMG;AACH,MAAM,OAAO,oBAAoB;IAC7B,YAAsC,iBAA6B;QAA7B,sBAAiB,GAAjB,iBAAiB,CAAY;IAAG,CAAC;IAEvE;;OAEG;IACI,MAAM;QACT,OAAO,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;IACvC,CAAC;IAED;;;OAGG;IACI,KAAK,CAAC,QAAQ;QACjB,IAAI,IAAI,CAAC,MAAM,EAAE,EAAE,CAAC;YAChB,OAAO;QACX,CAAC;QAED,MAAM,kBAAkB,GAAG,iBAAiB,CACxC,IAAI,CAAC,iBAAiB,EACtB,QAAQ,CACX,CAAC;QACF,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,MAAM,kBAAkB,CAAC;IAC7B,CAAC;IAED;;;OAGG;IACI,mBAAmB;QACtB,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,EAAE,CAAC;YACjB,MAAM,IAAI,KAAK,CAAC,uCAAuC,CAAC,CAAC;QAC7D,CAAC;QAED,MAAM,KAAK,GAAG,IAAI,aAAa,CAAC,SAAS,EAAE;YACvC,GAAG,EAAE,SAAS;SACjB,CAAC,CAAC;QACH,IAAI,CAAC,iBAAiB,CAAC,MAAO,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACxD,CAAC;IAED;;;OAGG;IACI,YAAY;QACf,OAAO,IAAI,CAAC,iBAAiB,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;IAC5D,CAAC;IAED;;OAEG;IACI,SAAS;QACZ,OAAO,IAAI,CAAC,iBAAiB,CAAC,UAAU,EAAE,aAAa,KAAK,IAAI,CAAC;IACrE,CAAC;IAED;;;OAGG;IACI,eAAe;QAClB,gFAAgF;QAChF,0EAA0E;QAC1E,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,CAAC;QAC/B,IAAI,CAAC,iBAAiB,CAAC,YAAa,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IACzD,CAAC;IAED;;;OAGG;IACI,aAAa;QAChB,gHAAgH;QAChH,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,CAAC;QAC/B,MAAM,KAAK,GAAG,IAAI,aAAa,CAAC,UAAU,EAAE;YACxC,GAAG,EAAE,QAAQ;SAChB,CAAC,CAAC;QACH,IAAI,CAAC,iBAAiB,CAAC,YAAa,CAAC,OAAO,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACtE,CAAC;IAED;;;OAGG;IACI,aAAa;QAChB,gHAAgH;QAChH,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,CAAC;QAC/B,MAAM,KAAK,GAAG,IAAI,aAAa,CAAC,UAAU,EAAE;YACxC,GAAG,EAAE,QAAQ;SAChB,CAAC,CAAC;QACH,IAAI,CAAC,iBAAiB,CAAC,YAAa,CAAC,OAAO,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACtE,CAAC;IAED;;;OAGG;IACI,eAAe;QAClB,gHAAgH;QAChH,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,CAAC;QAC/B,MAAM,KAAK,GAAG,IAAI,aAAa,CAAC,SAAS,EAAE;YACvC,GAAG,EAAE,UAAU;SAClB,CAAC,CAAC;QACH,IAAI,CAAC,iBAAiB,CAAC,YAAa,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9D,CAAC;IAED;;;OAGG;IACI,iBAAiB;QACpB,gHAAgH;QAChH,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,CAAC;QAC/B,MAAM,KAAK,GAAG,IAAI,aAAa,CAAC,SAAS,EAAE;YACvC,GAAG,EAAE,YAAY;SACpB,CAAC,CAAC;QACH,IAAI,CAAC,iBAAiB,CAAC,YAAa,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9D,CAAC;IAED;;OAEG;IACI,QAAQ;QACX,OAAO,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC;IACxC,CAAC;IAED;;OAEG;IACI,aAAa,CAAC,KAAY;QAC7B,IAAI,CAAC,iBAAiB,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAChD,CAAC;CACJ","sourcesContent":["import {\n    keyArrowDown,\n    keyArrowUp,\n    keyEnter,\n    keyEscape,\n    keySpace\n} from '@microsoft/fast-web-utilities';\nimport type { MenuButton } from '..';\nimport { waitForEventAsync } from '../../utilities/testing/component';\n\n/**\n * Page object for `nimble-menu-button` component to provide consistent ways\n * of querying and interacting with the component during tests.\n *\n * This page object is intended to be used to interact with a `nimble-menu-button`,\n * not the menu slotted into the button or the menu items.\n */\nexport class MenuButtonPageObject {\n    public constructor(protected readonly menuButtonElement: MenuButton) {}\n\n    /**\n     * @returns Whether or not the menu is open.\n     */\n    public isOpen(): boolean {\n        return this.menuButtonElement.open;\n    }\n\n    /**\n     * Opens the menu.\n     * @returns A promise that resolves when the menu opens.\n     */\n    public async openMenu(): Promise<void> {\n        if (this.isOpen()) {\n            return;\n        }\n\n        const toggleEventPromise = waitForEventAsync(\n            this.menuButtonElement,\n            'toggle'\n        );\n        this.clickMenuButton();\n        await toggleEventPromise;\n    }\n\n    /**\n     * Closes the menu by pressing Escape.\n     * Throws an error if the menu is not open.\n     */\n    public closeMenuWithEscape(): void {\n        if (!this.isOpen()) {\n            throw new Error('Cannot close menu when it is not open');\n        }\n\n        const event = new KeyboardEvent('keydown', {\n            key: keyEscape\n        });\n        this.menuButtonElement.region!.dispatchEvent(event);\n    }\n\n    /**\n     * Gets the text in the menu button.\n     * @returns The trimmed text that is slotted into the menu button.\n     */\n    public getLabelText(): string {\n        return this.menuButtonElement.textContent?.trim() ?? '';\n    }\n\n    /**\n     * @returns Whether or not the menu button is focused.\n     */\n    public isFocused(): boolean {\n        return this.menuButtonElement.shadowRoot?.activeElement !== null;\n    }\n\n    /**\n     * @internal\n     * Focuses and clicks the menu button.\n     */\n    public clickMenuButton(): void {\n        // Focus the menu button before calling click() because ordinarily a mouse click\n        // would bring focus to the button, but calling click() directly does not.\n        this.menuButtonElement.focus();\n        this.menuButtonElement.toggleButton!.control.click();\n    }\n\n    /**\n     * @internal\n     * Presses the Enter key on the menu button.\n     */\n    public pressEnterKey(): void {\n        // Focus the menu button before dispatching the event because a key event only makes sense on a focused element.\n        this.menuButtonElement.focus();\n        const event = new KeyboardEvent('keypress', {\n            key: keyEnter\n        });\n        this.menuButtonElement.toggleButton!.control.dispatchEvent(event);\n    }\n\n    /**\n     * @internal\n     * Presses the Space key on the menu button.\n     */\n    public pressSpaceKey(): void {\n        // Focus the menu button before dispatching the event because a key event only makes sense on a focused element.\n        this.menuButtonElement.focus();\n        const event = new KeyboardEvent('keypress', {\n            key: keySpace\n        });\n        this.menuButtonElement.toggleButton!.control.dispatchEvent(event);\n    }\n\n    /**\n     * @internal\n     * Presses the Arrow Up key on the menu button.\n     */\n    public pressArrowUpKey(): void {\n        // Focus the menu button before dispatching the event because a key event only makes sense on a focused element.\n        this.menuButtonElement.focus();\n        const event = new KeyboardEvent('keydown', {\n            key: keyArrowUp\n        });\n        this.menuButtonElement.toggleButton!.dispatchEvent(event);\n    }\n\n    /**\n     * @internal\n     * Presses the Arrow Down key on the menu button.\n     */\n    public pressArrowDownKey(): void {\n        // Focus the menu button before dispatching the event because a key event only makes sense on a focused element.\n        this.menuButtonElement.focus();\n        const event = new KeyboardEvent('keydown', {\n            key: keyArrowDown\n        });\n        this.menuButtonElement.toggleButton!.dispatchEvent(event);\n    }\n\n    /**\n     * @internal\n     */\n    public getTitle(): string {\n        return this.menuButtonElement.title;\n    }\n\n    /**\n     * @internal\n     */\n    public dispatchEvent(event: Event): void {\n        this.menuButtonElement.dispatchEvent(event);\n    }\n}\n"]}

package/dist/esm/patterns/dropdown/styles.js

@@ -1,7 +1,7 @@
 import { css } from '@microsoft/fast-element';
 import { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
 import { display } from '../../utilities/style/display';
-import { applicationBackgroundColor, bodyFont, bodyFontColor, bodyDisabledFontColor, borderHoverColor, borderWidth, controlHeight, iconSize, menuMinWidth, popupBorderColor, smallDelay, smallPadding, borderRgbPartialColor, mediumPadding, failColor, elevation2BoxShadow } from '../../theme-provider/design-tokens';
+import { applicationBackgroundColor, bodyFont, bodyFontColor, bodyDisabledFontColor, borderHoverColor, borderWidth, controlHeight, iconSize, menuMinWidth, popupBorderColor, smallDelay, smallPadding, borderRgbPartialColor, mediumPadding, failColor, elevation2BoxShadow, placeholderFontColor } from '../../theme-provider/design-tokens';
 import { Theme } from '../../theme-provider/types';
 import { appearanceBehavior } from '../../utilities/style/appearance';
 import { hexToRgbaCssColor } from '../../utilities/style/colors';
@@ -85,10 +85,6 @@ export const styles = css `
         width: 0px;
     }
 
-    [part='start'] {
-        display: none;
-    }
-
     .control {
         align-items: center;
         cursor: pointer;
@@ -116,10 +112,59 @@ export const styles = css `
         border-bottom-color: ${failColor};
     }
 
+    [part='start'] {
+        display: none;
+    }
+
+    .selected-value {
+        flex: auto;
+        font-family: inherit;
+        text-align: start;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        padding: 0px;
+        padding-left: ${mediumPadding};
+    }
+
+    .selected-value[disabled]::placeholder {
+        color: ${bodyDisabledFontColor};
+    }
+
+    .indicator {
+        flex: none;
+        margin-left: ${smallPadding};
+        padding-right: 8px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .indicator slot[name='indicator'] svg {
+        width: ${iconSize};
+        height: ${iconSize};
+        fill: ${bodyFontColor};
+    }
+
+    :host([disabled]) .indicator slot[name='indicator'] svg {
+        fill: ${bodyDisabledFontColor};
+    }
+
+    [part='end'] {
+        margin-inline-start: auto;
+    }
+
+    :host([open][position='above']) .anchored-region {
+        padding-bottom: ${smallPadding};
+    }
+
+    :host([open][position='below']) .anchored-region {
+        padding-top: ${smallPadding};
+    }
+
     .listbox {
         display: inline-flex;
         flex-direction: column;
-        overflow-y: auto;
         width: 100%;
         --ni-private-listbox-visible-option-count: 10.5;
         --ni-private-listbox-anchor-element-gap: ${smallPadding};
@@ -153,12 +198,6 @@ export const styles = css `
         --ni-private-listbox-loading-indicator-height: ${controlHeight};
     }
 
-    .listbox slot {
-        display: block;
-        background: transparent;
-        padding: var(--ni-private-listbox-padding);
-    }
-
     :host([open][position='above']) .listbox {
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
@@ -169,55 +208,33 @@ export const styles = css `
         border-top-right-radius: 0;
     }
 
-    :host([open][position='above']) .anchored-region {
-        padding-bottom: ${smallPadding};
+    .scrollable-region {
+        overflow-y: auto;
     }
 
-    :host([open][position='below']) .anchored-region {
-        padding-top: ${smallPadding};
+    .listbox slot {
+        display: block;
+        background: transparent;
+        padding: var(--ni-private-listbox-padding);
     }
 
-    .selected-value {
-        flex: auto;
-        font-family: inherit;
-        text-align: start;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        padding: 0px;
-        padding-left: ${mediumPadding};
+    .listbox.empty slot {
+        display: none;
     }
 
-    .selected-value[disabled]::placeholder {
-        color: ${bodyDisabledFontColor};
+    ::slotted([role='option']),
+    ::slotted(option) {
+        flex: none;
     }
 
-    .indicator {
-        flex: none;
-        margin-left: ${smallPadding};
-        padding-right: 8px;
+    .no-results-label {
+        color: ${placeholderFontColor};
+        height: ${controlHeight};
+        display: inline-flex;
         display: flex;
-        justify-content: center;
+        flex: 1 0 auto;
         align-items: center;
-    }
-
-    .indicator slot[name='indicator'] svg {
-        width: ${iconSize};
-        height: ${iconSize};
-        fill: ${bodyFontColor};
-    }
-
-    :host([disabled]) .indicator slot[name='indicator'] svg {
-        fill: ${bodyDisabledFontColor};
-    }
-
-    [part='end'] {
-        margin-inline-start: auto;
-    }
-
-    ::slotted([role='option']),
-    ::slotted(option) {
-        flex: none;
+        padding: ${smallPadding} ${mediumPadding};
     }
 `.withBehaviors(appearanceBehavior(DropdownAppearance.underline, css `
             .control {

package/dist/esm/patterns/dropdown/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/dropdown/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AACxD,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,QAAQ,EACR,YAAY,EACZ,gBAAgB,EAChB,UAAU,EACV,YAAY,EACZ,qBAAqB,EACrB,aAAa,EACb,SAAS,EACT,mBAAmB,EACtB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAEnE,kBAAkB;AAClB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;iBAGX,aAAa;gBACd,QAAQ;kBACN,aAAa;;;UAGrB,cAAc;qBACH,YAAY;;;mDAGkB,WAAW;;;;;;;;uBAQvC,WAAW;;;;yBAIT,gBAAgB;;4BAEb,UAAU;;;;;;;;;YAS1B,YAAY;;;;;+BAKO,SAAS;;;;;;4BAMZ,WAAW;;;;yBAId,gBAAgB;;4BAEb,UAAU;;;;;;;;;;YAU1B,YAAY;;;;;+BAKO,SAAS;;;;;;;;;;;;;;;;;iCAiBP,qBAAqB;;mBAEnC,WAAW;;;;+BAIC,gBAAgB;;;;;iBAK9B,qBAAqB;6BACT,qBAAqB;;;;;;+BAMnB,SAAS;;;;;;;;;mDASW,YAAY;wCACvB,YAAY;;;;;;sBAM9B,WAAW;;kBAEf,aAAa;;;;;;;;;sBAST,mBAAmB;kBACvB,WAAW,UAAU,gBAAgB;4BAC3B,0BAA0B;;;;8CAIR,aAAa;;;;yDAIF,aAAa;;;;;;;;;;;;;;;;;;;;0BAoB5C,YAAY;;;;uBAIf,YAAY;;;;;;;;;;;wBAWX,aAAa;;;;iBAIpB,qBAAqB;;;;;uBAKf,YAAY;;;;;;;;iBAQlB,QAAQ;kBACP,QAAQ;gBACV,aAAa;;;;gBAIb,qBAAqB;;;;;;;;;;;CAWpC,CAAC,aAAa,CACX,kBAAkB,CACd,kBAAkB,CAAC,SAAS,EAC5B,GAAG,CAAA;;uCAE4B,WAAW;;;;;qCAKb,qBAAqB;;SAEjD,CACJ,EACD,kBAAkB,CACd,kBAAkB,CAAC,OAAO,EAC1B,GAAG,CAAA;;gCAEqB,WAAW;;;SAGlC,CACJ,EACD,kBAAkB,CACd,kBAAkB,CAAC,KAAK,EACxB,GAAG,CAAA;;yCAE8B,qBAAqB;;;;uCAIvB,WAAW;;;;;yCAKT,qBAAqB;;SAErD,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;8BAEmB,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;SAEnD,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { display } from '../../utilities/style/display';\nimport {\n    applicationBackgroundColor,\n    bodyFont,\n    bodyFontColor,\n    bodyDisabledFontColor,\n    borderHoverColor,\n    borderWidth,\n    controlHeight,\n    iconSize,\n    menuMinWidth,\n    popupBorderColor,\n    smallDelay,\n    smallPadding,\n    borderRgbPartialColor,\n    mediumPadding,\n    failColor,\n    elevation2BoxShadow\n} from '../../theme-provider/design-tokens';\nimport { Theme } from '../../theme-provider/types';\nimport { appearanceBehavior } from '../../utilities/style/appearance';\nimport { hexToRgbaCssColor } from '../../utilities/style/colors';\nimport { focusVisible } from '../../utilities/style/focus';\nimport { themeBehavior } from '../../utilities/style/theme';\nimport { DropdownAppearance } from './types';\nimport { userSelectNone } from '../../utilities/style/user-select';\n\n// prettier-ignore\nexport const styles = css`\n    ${display('inline-flex')}\n\n    :host {\n        color: ${bodyFontColor};\n        font: ${bodyFont};\n        height: ${controlHeight};\n        position: relative;\n        justify-content: center;\n        ${userSelectNone}\n        min-width: ${menuMinWidth};\n        outline: none;\n        vertical-align: top;\n        --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);\n        --ni-private-focus-indicator-width: 1px;\n        --ni-private-indicator-lines-gap: 1px;\n    }\n\n    :host::before {\n        content: '';\n        position: absolute;\n        bottom: calc(${borderWidth} + var(--ni-private-indicator-lines-gap));\n        width: 0px;\n        height: 0px;\n        justify-self: center;\n        border-bottom: ${borderHoverColor}\n            var(--ni-private-focus-indicator-width) solid;\n        transition: width ${smallDelay} ease-in;\n    }\n\n    @media (prefers-reduced-motion) {\n        :host::before {\n            transition-duration: 0s;\n        }\n    }\n\n    :host(${focusVisible})::before {\n        width: calc(100% - 8px);\n    }\n\n    :host([error-visible]):before {\n        border-bottom-color: ${failColor};\n    }\n\n    :host::after {\n        content: '';\n        position: absolute;\n        bottom: calc(-1 * ${borderWidth});\n        width: 0px;\n        height: 0px;\n        justify-self: center;\n        border-bottom: ${borderHoverColor}\n            var(--ni-private-hover-indicator-width) solid;\n        transition: width ${smallDelay} ease-in;\n    }\n\n    @media (prefers-reduced-motion) {\n        :host::after {\n            transition-duration: 0s;\n        }\n    }\n\n    :host(:hover)::after,\n    :host(${focusVisible})::after {\n        width: 100%;\n    }\n\n    :host([error-visible]):after {\n        border-bottom-color: ${failColor};\n    }\n\n    :host([disabled]:hover)::after {\n        width: 0px;\n    }\n\n    [part='start'] {\n        display: none;\n    }\n\n    .control {\n        align-items: center;\n        cursor: pointer;\n        display: flex;\n        min-height: 100%;\n        width: 100%;\n        border: 0px solid rgba(${borderRgbPartialColor}, 0.3);\n        background-color: transparent;\n        padding: ${borderWidth};\n    }\n\n    :host([open]:not(:hover)) .control {\n        border-bottom-color: ${borderHoverColor};\n    }\n\n    :host([disabled]) .control {\n        cursor: default;\n        color: ${bodyDisabledFontColor};\n        border-color: rgba(${borderRgbPartialColor}, 0.1);\n    }\n\n    :host([error-visible]) .control,\n    :host([error-visible][open]) .control,\n    :host([error-visible][disabled]) .control {\n        border-bottom-color: ${failColor};\n    }\n\n    .listbox {\n        display: inline-flex;\n        flex-direction: column;\n        overflow-y: auto;\n        width: 100%;\n        --ni-private-listbox-visible-option-count: 10.5;\n        --ni-private-listbox-anchor-element-gap: ${smallPadding};\n        --ni-private-listbox-padding: ${smallPadding};\n        --ni-private-listbox-filter-height: 0px;\n        --ni-private-listbox-loading-indicator-height: 0px;\n        max-height: min(\n            calc(\n                var(--ni-private-listbox-anchor-element-gap) + \n                2 * ${borderWidth} + \n                var(--ni-private-listbox-padding) +\n                ${controlHeight} * var(--ni-private-listbox-visible-option-count) +\n                var(--ni-private-listbox-filter-height) +\n                var(--ni-private-listbox-loading-indicator-height)\n            ),\n            calc(\n                var(--ni-private-listbox-available-viewport-height) - \n                var(--ni-private-listbox-anchor-element-gap)\n            )\n        );\n        box-shadow: ${elevation2BoxShadow};\n        border: ${borderWidth} solid ${popupBorderColor};\n        background-color: ${applicationBackgroundColor};\n    }\n\n    .listbox:has(.filter-field) {\n        --ni-private-listbox-filter-height: ${controlHeight};\n    }\n\n    .listbox:has(.loading-container) {\n        --ni-private-listbox-loading-indicator-height: ${controlHeight};\n    }\n\n    .listbox slot {\n        display: block;\n        background: transparent;\n        padding: var(--ni-private-listbox-padding);\n    }\n\n    :host([open][position='above']) .listbox {\n        border-bottom-left-radius: 0;\n        border-bottom-right-radius: 0;\n    }\n\n    :host([open][position='below']) .listbox {\n        border-top-left-radius: 0;\n        border-top-right-radius: 0;\n    }\n\n    :host([open][position='above']) .anchored-region {\n        padding-bottom: ${smallPadding};\n    }\n\n    :host([open][position='below']) .anchored-region {\n        padding-top: ${smallPadding};\n    }\n\n    .selected-value {\n        flex: auto;\n        font-family: inherit;\n        text-align: start;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        padding: 0px;\n        padding-left: ${mediumPadding};\n    }\n\n    .selected-value[disabled]::placeholder {\n        color: ${bodyDisabledFontColor};\n    }\n\n    .indicator {\n        flex: none;\n        margin-left: ${smallPadding};\n        padding-right: 8px;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n    }\n\n    .indicator slot[name='indicator'] svg {\n        width: ${iconSize};\n        height: ${iconSize};\n        fill: ${bodyFontColor};\n    }\n\n    :host([disabled]) .indicator slot[name='indicator'] svg {\n        fill: ${bodyDisabledFontColor};\n    }\n\n    [part='end'] {\n        margin-inline-start: auto;\n    }\n\n    ::slotted([role='option']),\n    ::slotted(option) {\n        flex: none;\n    }\n`.withBehaviors(\n    appearanceBehavior(\n        DropdownAppearance.underline,\n        css`\n            .control {\n                border-bottom-width: ${borderWidth};\n                padding-bottom: 0;\n            }\n\n            :host([disabled]) .control {\n                border-color: rgba(${borderRgbPartialColor}, 0.1);\n            }\n        `\n    ),\n    appearanceBehavior(\n        DropdownAppearance.outline,\n        css`\n            .control {\n                border-width: ${borderWidth};\n                padding: 0;\n            }\n        `\n    ),\n    appearanceBehavior(\n        DropdownAppearance.block,\n        css`\n            .control {\n                background-color: rgba(${borderRgbPartialColor}, 0.1);\n            }\n\n            .control:focus-within {\n                border-bottom-width: ${borderWidth};\n                padding-bottom: 0;\n            }\n\n            :host([disabled]) .control {\n                background-color: rgba(${borderRgbPartialColor}, 0.07);\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.color,\n        css`\n            .listbox slot {\n                background: ${hexToRgbaCssColor(White, 0.15)};\n            }\n        `\n    )\n);\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/dropdown/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AACxD,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,QAAQ,EACR,YAAY,EACZ,gBAAgB,EAChB,UAAU,EACV,YAAY,EACZ,qBAAqB,EACrB,aAAa,EACb,SAAS,EACT,mBAAmB,EACnB,oBAAoB,EACvB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAEnE,kBAAkB;AAClB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;iBAGX,aAAa;gBACd,QAAQ;kBACN,aAAa;;;UAGrB,cAAc;qBACH,YAAY;;;mDAGkB,WAAW;;;;;;;;uBAQvC,WAAW;;;;yBAIT,gBAAgB;;4BAEb,UAAU;;;;;;;;;YAS1B,YAAY;;;;;+BAKO,SAAS;;;;;;4BAMZ,WAAW;;;;yBAId,gBAAgB;;4BAEb,UAAU;;;;;;;;;;YAU1B,YAAY;;;;;+BAKO,SAAS;;;;;;;;;;;;;iCAaP,qBAAqB;;mBAEnC,WAAW;;;;+BAIC,gBAAgB;;;;;iBAK9B,qBAAqB;6BACT,qBAAqB;;;;;;+BAMnB,SAAS;;;;;;;;;;;;;;;wBAehB,aAAa;;;;iBAIpB,qBAAqB;;;;;uBAKf,YAAY;;;;;;;;iBAQlB,QAAQ;kBACP,QAAQ;gBACV,aAAa;;;;gBAIb,qBAAqB;;;;;;;;0BAQX,YAAY;;;;uBAIf,YAAY;;;;;;;;mDAQgB,YAAY;wCACvB,YAAY;;;;;;sBAM9B,WAAW;;kBAEf,aAAa;;;;;;;;;sBAST,mBAAmB;kBACvB,WAAW,UAAU,gBAAgB;4BAC3B,0BAA0B;;;;8CAIR,aAAa;;;;yDAIF,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAiCrD,oBAAoB;kBACnB,aAAa;;;;;mBAKZ,YAAY,IAAI,aAAa;;CAE/C,CAAC,aAAa,CACX,kBAAkB,CACd,kBAAkB,CAAC,SAAS,EAC5B,GAAG,CAAA;;uCAE4B,WAAW;;;;;qCAKb,qBAAqB;;SAEjD,CACJ,EACD,kBAAkB,CACd,kBAAkB,CAAC,OAAO,EAC1B,GAAG,CAAA;;gCAEqB,WAAW;;;SAGlC,CACJ,EACD,kBAAkB,CACd,kBAAkB,CAAC,KAAK,EACxB,GAAG,CAAA;;yCAE8B,qBAAqB;;;;uCAIvB,WAAW;;;;;yCAKT,qBAAqB;;SAErD,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;8BAEmB,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;SAEnD,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { display } from '../../utilities/style/display';\nimport {\n    applicationBackgroundColor,\n    bodyFont,\n    bodyFontColor,\n    bodyDisabledFontColor,\n    borderHoverColor,\n    borderWidth,\n    controlHeight,\n    iconSize,\n    menuMinWidth,\n    popupBorderColor,\n    smallDelay,\n    smallPadding,\n    borderRgbPartialColor,\n    mediumPadding,\n    failColor,\n    elevation2BoxShadow,\n    placeholderFontColor\n} from '../../theme-provider/design-tokens';\nimport { Theme } from '../../theme-provider/types';\nimport { appearanceBehavior } from '../../utilities/style/appearance';\nimport { hexToRgbaCssColor } from '../../utilities/style/colors';\nimport { focusVisible } from '../../utilities/style/focus';\nimport { themeBehavior } from '../../utilities/style/theme';\nimport { DropdownAppearance } from './types';\nimport { userSelectNone } from '../../utilities/style/user-select';\n\n// prettier-ignore\nexport const styles = css`\n    ${display('inline-flex')}\n\n    :host {\n        color: ${bodyFontColor};\n        font: ${bodyFont};\n        height: ${controlHeight};\n        position: relative;\n        justify-content: center;\n        ${userSelectNone}\n        min-width: ${menuMinWidth};\n        outline: none;\n        vertical-align: top;\n        --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);\n        --ni-private-focus-indicator-width: 1px;\n        --ni-private-indicator-lines-gap: 1px;\n    }\n\n    :host::before {\n        content: '';\n        position: absolute;\n        bottom: calc(${borderWidth} + var(--ni-private-indicator-lines-gap));\n        width: 0px;\n        height: 0px;\n        justify-self: center;\n        border-bottom: ${borderHoverColor}\n            var(--ni-private-focus-indicator-width) solid;\n        transition: width ${smallDelay} ease-in;\n    }\n\n    @media (prefers-reduced-motion) {\n        :host::before {\n            transition-duration: 0s;\n        }\n    }\n\n    :host(${focusVisible})::before {\n        width: calc(100% - 8px);\n    }\n\n    :host([error-visible]):before {\n        border-bottom-color: ${failColor};\n    }\n\n    :host::after {\n        content: '';\n        position: absolute;\n        bottom: calc(-1 * ${borderWidth});\n        width: 0px;\n        height: 0px;\n        justify-self: center;\n        border-bottom: ${borderHoverColor}\n            var(--ni-private-hover-indicator-width) solid;\n        transition: width ${smallDelay} ease-in;\n    }\n\n    @media (prefers-reduced-motion) {\n        :host::after {\n            transition-duration: 0s;\n        }\n    }\n\n    :host(:hover)::after,\n    :host(${focusVisible})::after {\n        width: 100%;\n    }\n\n    :host([error-visible]):after {\n        border-bottom-color: ${failColor};\n    }\n\n    :host([disabled]:hover)::after {\n        width: 0px;\n    }\n\n    .control {\n        align-items: center;\n        cursor: pointer;\n        display: flex;\n        min-height: 100%;\n        width: 100%;\n        border: 0px solid rgba(${borderRgbPartialColor}, 0.3);\n        background-color: transparent;\n        padding: ${borderWidth};\n    }\n\n    :host([open]:not(:hover)) .control {\n        border-bottom-color: ${borderHoverColor};\n    }\n\n    :host([disabled]) .control {\n        cursor: default;\n        color: ${bodyDisabledFontColor};\n        border-color: rgba(${borderRgbPartialColor}, 0.1);\n    }\n\n    :host([error-visible]) .control,\n    :host([error-visible][open]) .control,\n    :host([error-visible][disabled]) .control {\n        border-bottom-color: ${failColor};\n    }\n\n    [part='start'] {\n        display: none;\n    }\n\n    .selected-value {\n        flex: auto;\n        font-family: inherit;\n        text-align: start;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        padding: 0px;\n        padding-left: ${mediumPadding};\n    }\n\n    .selected-value[disabled]::placeholder {\n        color: ${bodyDisabledFontColor};\n    }\n\n    .indicator {\n        flex: none;\n        margin-left: ${smallPadding};\n        padding-right: 8px;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n    }\n\n    .indicator slot[name='indicator'] svg {\n        width: ${iconSize};\n        height: ${iconSize};\n        fill: ${bodyFontColor};\n    }\n\n    :host([disabled]) .indicator slot[name='indicator'] svg {\n        fill: ${bodyDisabledFontColor};\n    }\n\n    [part='end'] {\n        margin-inline-start: auto;\n    }\n\n    :host([open][position='above']) .anchored-region {\n        padding-bottom: ${smallPadding};\n    }\n\n    :host([open][position='below']) .anchored-region {\n        padding-top: ${smallPadding};\n    }\n\n    .listbox {\n        display: inline-flex;\n        flex-direction: column;\n        width: 100%;\n        --ni-private-listbox-visible-option-count: 10.5;\n        --ni-private-listbox-anchor-element-gap: ${smallPadding};\n        --ni-private-listbox-padding: ${smallPadding};\n        --ni-private-listbox-filter-height: 0px;\n        --ni-private-listbox-loading-indicator-height: 0px;\n        max-height: min(\n            calc(\n                var(--ni-private-listbox-anchor-element-gap) + \n                2 * ${borderWidth} + \n                var(--ni-private-listbox-padding) +\n                ${controlHeight} * var(--ni-private-listbox-visible-option-count) +\n                var(--ni-private-listbox-filter-height) +\n                var(--ni-private-listbox-loading-indicator-height)\n            ),\n            calc(\n                var(--ni-private-listbox-available-viewport-height) - \n                var(--ni-private-listbox-anchor-element-gap)\n            )\n        );\n        box-shadow: ${elevation2BoxShadow};\n        border: ${borderWidth} solid ${popupBorderColor};\n        background-color: ${applicationBackgroundColor};\n    }\n\n    .listbox:has(.filter-field) {\n        --ni-private-listbox-filter-height: ${controlHeight};\n    }\n\n    .listbox:has(.loading-container) {\n        --ni-private-listbox-loading-indicator-height: ${controlHeight};\n    }\n\n    :host([open][position='above']) .listbox {\n        border-bottom-left-radius: 0;\n        border-bottom-right-radius: 0;\n    }\n\n    :host([open][position='below']) .listbox {\n        border-top-left-radius: 0;\n        border-top-right-radius: 0;\n    }\n\n    .scrollable-region {\n        overflow-y: auto;\n    }\n\n    .listbox slot {\n        display: block;\n        background: transparent;\n        padding: var(--ni-private-listbox-padding);\n    }\n\n    .listbox.empty slot {\n        display: none;\n    }\n\n    ::slotted([role='option']),\n    ::slotted(option) {\n        flex: none;\n    }\n\n    .no-results-label {\n        color: ${placeholderFontColor};\n        height: ${controlHeight};\n        display: inline-flex;\n        display: flex;\n        flex: 1 0 auto;\n        align-items: center;\n        padding: ${smallPadding} ${mediumPadding};\n    }\n`.withBehaviors(\n    appearanceBehavior(\n        DropdownAppearance.underline,\n        css`\n            .control {\n                border-bottom-width: ${borderWidth};\n                padding-bottom: 0;\n            }\n\n            :host([disabled]) .control {\n                border-color: rgba(${borderRgbPartialColor}, 0.1);\n            }\n        `\n    ),\n    appearanceBehavior(\n        DropdownAppearance.outline,\n        css`\n            .control {\n                border-width: ${borderWidth};\n                padding: 0;\n            }\n        `\n    ),\n    appearanceBehavior(\n        DropdownAppearance.block,\n        css`\n            .control {\n                background-color: rgba(${borderRgbPartialColor}, 0.1);\n            }\n\n            .control:focus-within {\n                border-bottom-width: ${borderWidth};\n                padding-bottom: 0;\n            }\n\n            :host([disabled]) .control {\n                background-color: rgba(${borderRgbPartialColor}, 0.07);\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.color,\n        css`\n            .listbox slot {\n                background: ${hexToRgbaCssColor(White, 0.15)};\n            }\n        `\n    )\n);\n"]}

package/dist/esm/rich-text/base/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/rich-text/base/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { Observable, observable, type Notifier } from '@microsoft/fast-element';\nimport { FoundationElement } from '@microsoft/fast-foundation';\nimport { RichTextMention } from '../../rich-text-mention/base';\nimport { MentionInternals } from '../../rich-text-mention/base/models/mention-internals';\nimport { Configuration } from '../models/configuration';\nimport { RichTextUpdateTracker } from '../models/rich-text-tracker';\nimport { RichTextValidator } from '../models/rich-text-validator';\nimport type { RichTextValidity } from './types';\nimport { waitUntilCustomElementsDefinedAsync } from '../../utilities/wait-until-custom-elements-defined-async';\n\n/**\n * Base class for rich text components\n */\nexport abstract class RichText extends FoundationElement {\n    /**\n     * @internal\n     */\n    public mentionInternalsNotifiers: Notifier[] = [];\n\n    /**\n     * @internal\n     */\n    @observable\n    public readonly childItems: Element[] = [];\n\n    @observable\n    protected configuration?: Configuration;\n\n    protected mentionElements!: RichTextMention[];\n\n    protected readonly richTextUpdateTracker = new RichTextUpdateTracker(this);\n\n    protected readonly richTextValidator = new RichTextValidator();\n\n    /**\n     * @public\n     */\n    public get validity(): RichTextValidity {\n        return this.richTextValidator.getValidity();\n    }\n\n    /**\n     * @public\n     */\n    public checkValidity(): boolean {\n        return this.richTextValidator.isValid();\n    }\n\n    /**\n     * @internal\n     */\n    public abstract getMentionedHrefs(): string[];\n\n    /**\n     * @internal\n     */\n    public handleChange(source: unknown, args: unknown): void {\n        if (source instanceof MentionInternals && typeof args === 'string') {\n            this.richTextUpdateTracker.trackMentionInternalsPropertyChanged(\n                args\n            );\n        }\n    }\n\n    /**\n     * @internal\n     */\n    public createConfig(): void {\n        this.validate();\n        if (this.richTextValidator.isValid()) {\n            if (\n                this.richTextUpdateTracker.updateMappingConfigs\n                || this.richTextUpdateTracker.updatePattern\n            ) {\n                this.configuration = new Configuration(this.mentionElements);\n            }\n        } else {\n            this.configuration = undefined;\n        }\n    }\n\n    protected validate(): void {\n        this.richTextValidator.validate(this.mentionElements);\n    }\n\n    private childItemsChanged(\n        prev: Element[] | undefined,\n        _next: Element[]\n    ): void {\n        if (prev !== undefined) {\n            void this.updateMentionElementsFromChildItems();\n        }\n    }\n\n    private async updateMentionElementsFromChildItems(): Promise<void> {\n        await waitUntilCustomElementsDefinedAsync(this.childItems);\n        this.mentionElements = this.childItems.filter(\n            (x): x is RichTextMention => x instanceof RichTextMention\n        );\n        this.observeMentionInternals();\n        this.richTextUpdateTracker.trackMentionElementsInstancesChanged();\n    }\n\n    private observeMentionInternals(): void {\n        this.removeMentionInternalsObservers();\n\n        for (const mention of this.mentionElements) {\n            const notifierInternals = Observable.getNotifier(\n                mention.mentionInternals\n            );\n            notifierInternals.subscribe(this);\n            this.mentionInternalsNotifiers.push(notifierInternals);\n        }\n    }\n\n    private removeMentionInternalsObservers(): void {\n        this.mentionInternalsNotifiers.forEach(notifier => {\n            notifier.unsubscribe(this);\n        });\n        this.mentionInternalsNotifiers = [];\n    }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/rich-text/base/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { Observable, observable, type Notifier } from '@microsoft/fast-element';\nimport { FoundationElement } from '@microsoft/fast-foundation';\nimport { RichTextMention } from '../../rich-text-mention/base';\nimport { MentionInternals } from '../../rich-text-mention/base/models/mention-internals';\nimport { Configuration } from '../models/configuration';\nimport { RichTextUpdateTracker } from '../models/rich-text-tracker';\nimport { RichTextValidator } from '../models/rich-text-validator';\nimport type { RichTextValidity } from './types';\nimport { waitUntilCustomElementsDefinedAsync } from '../../utilities/wait-until-custom-elements-defined-async';\n\n/**\n * Base class for rich text components\n */\nexport abstract class RichText extends FoundationElement {\n    /**\n     * @internal\n     */\n    public mentionInternalsNotifiers: Notifier[] = [];\n\n    /**\n     * @internal\n     */\n    @observable\n    public readonly childItems: Element[] = [];\n\n    @observable\n    protected configuration?: Configuration;\n\n    protected mentionElements!: RichTextMention[];\n\n    protected readonly richTextUpdateTracker = new RichTextUpdateTracker(this);\n\n    protected readonly richTextValidator = new RichTextValidator();\n\n    /**\n     * @public\n     */\n    public get validity(): RichTextValidity {\n        return this.richTextValidator.getValidity();\n    }\n\n    /**\n     * @public\n     */\n    public checkValidity(): boolean {\n        return this.richTextValidator.isValid();\n    }\n\n    /**\n     * @internal\n     */\n    public abstract getMentionedHrefs(): string[];\n\n    /**\n     * @internal\n     */\n    public handleChange(source: unknown, args: unknown): void {\n        if (source instanceof MentionInternals && typeof args === 'string') {\n            this.richTextUpdateTracker.trackMentionInternalsPropertyChanged(\n                args\n            );\n        }\n    }\n\n    /**\n     * @internal\n     */\n    public createConfig(): void {\n        this.validate();\n        if (this.richTextValidator.isValid()) {\n            if (\n                this.richTextUpdateTracker.updateMappingConfigs\n                || this.richTextUpdateTracker.updatePattern\n            ) {\n                this.configuration = new Configuration(this.mentionElements);\n            }\n        } else {\n            this.configuration = undefined;\n        }\n    }\n\n    protected validate(): void {\n        this.richTextValidator.validate(this.mentionElements);\n    }\n\n    private childItemsChanged(\n        prev: Element[] | undefined,\n        _next: Element[]\n    ): void {\n        if (prev !== undefined) {\n            void this.updateMentionElementsFromChildItems();\n        }\n    }\n\n    private async updateMentionElementsFromChildItems(): Promise<void> {\n        await waitUntilCustomElementsDefinedAsync(this.childItems);\n        this.mentionElements = this.childItems.filter(\n            (x): x is RichTextMention => x instanceof RichTextMention\n        );\n        this.observeMentionInternals();\n        this.richTextUpdateTracker.trackMentionElementsInstancesChanged();\n    }\n\n    private observeMentionInternals(): void {\n        this.removeMentionInternalsObservers();\n\n        for (const mention of this.mentionElements) {\n            const notifierInternals = Observable.getNotifier(\n                mention.mentionInternals\n            );\n            notifierInternals.subscribe(this);\n            this.mentionInternalsNotifiers.push(notifierInternals);\n        }\n    }\n\n    private removeMentionInternalsObservers(): void {\n        this.mentionInternalsNotifiers.forEach(notifier => {\n            notifier.unsubscribe(this);\n        });\n        this.mentionInternalsNotifiers = [];\n    }\n}\n"]}