q2-tecton-elements 1.65.0 → 1.66.0

package/dist/esm/q2-dropdown-item.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-dropdown-item.entry.js","sources":["src/components/q2-dropdown-item/q2-dropdown-item.scss?tag=q2-dropdown-item&encapsulation=shadow","src/components/q2-dropdown-item/q2-dropdown-item.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.dropdown-separator {\n    --comp-default-separator-margin: 0 #{var-list(--tct-scale-1, --app-scale-3x, 15px)};\n    margin: var-list(var-prefixer(dropdown-separator-margin), --comp-default-separator-margin);\n    border-bottom: 1px solid var-list(--tct-dropdown-item-separator-color --t-gray-11 #cccccc);\n}\n\n.dropdown-item-wrapper {\n    --comp-selected-icon-size: #{var-list(var-prefixer(option-selected-icon-size), --tct-scale-3, --app-scale-3x, 15px)};\n\n    --comp-default-dropdown-item-padding-x: var(--app-scale-2x, 10px);\n    --comp-default-dropdown-item-padding-y: var(--app-scale-2x, 10px);\n    --comp-default-dropdown-item-padding: var(--comp-default-dropdown-item-padding-y)\n        var(--comp-default-dropdown-item-padding-x);\n\n    \n    display: grid;\n    align-items: center;\n    gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n    grid-template-columns: 1fr;\n\n    &.removable {\n        grid-template-columns: 1fr auto;\n        .dropdown-item {\n            padding-right: 0;\n        }\n        .remove-dropdown-item {\n            flex: 0 0 44px;\n        }\n    }\n    color: inherit;\n}\n\n.dropdown-item-button {\n    --comp-selected-icon-size: #{var-list(var-prefixer(option-selected-icon-size), --tct-scale-3, --app-scale-3x, 15px)};\n    --comp-dropdown-item-tween: #{var-list(--tct-tween-1, --app-tween-1, cubic-bezier(0.4, 0, 0.2, 1))};\n    margin: var-list(--tct-scale-0, --app-scale-0x, 0);\n    padding: var-list(--tct-scale-0, --app-scale-0x, 0);\n    min-height: var(--tct-dropdown-item-min-height, 44px);\n    min-width: 44px;\n    border: none;\n    background: transparent;\n    outline: 0;\n    transition: var-list(--tct-dropdown-item-tween, --comp-dropdown-item-tween);\n    transition-property: background, color, box-shadow, fill, border-color, border-width;\n    &:disabled {\n        opacity: var-list(--tct-dropdown-item-disabled-opacity, --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n        cursor: not-allowed;\n    }\n    cursor: pointer;\n}\n\n.dropdown-item {\n    --comp-selected-icon-size: #{var-list(var-prefixer(option-selected-icon-size), --tct-scale-3, --app-scale-3x, 15px)};\n    --comp-default-dropdown-item-padding-x: var(--app-scale-2x, 10px);\n    width: 100%;\n    display: grid;\n    align-items:center;\n    justify-content: start;\n    grid-template-columns: 1fr;\n    gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n    min-height: var(--tct-dropdown-item-min-height, 44px);\n    padding-left: var(--comp-default-dropdown-item-padding-x);\n    padding-right: var(--comp-default-dropdown-item-padding-x);\n    text-align: left;\n    min-height: var(--tct-dropdown-item-min-height, 44px);\n}\n\n.dropdown-item-button:focus-visible {\n    box-shadow: var-list(\n        --tct-option-focus-box-shadow,\n        --const-inset-double-focus-ring,\n        unquote('inset var(--const-global-focus, 0 0 0 2px var(--const-focus-color, #0066CC))')\n    ) !important;\n}\n.dropdown-item-btn-content{\n    display:flex;\n    justify-content: start;\n    color: var-list(var-prefixer(dropdown-item-font-color), inherit);\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n:host(:not([disabled])) {\n    .dropdown-item-button:hover,\n    .dropdown-item-button:focus {\n        background: var-list(\n            --tct-dropdown-item-hover-background,\n            var-prefixer(dropdown-item-selected-bg),\n            var-prefixer(gray-14),\n            --tct-gray-l3,\n            --app-gray-l3,\n            --t-base,\n            #f2f2f2\n        );\n        color: var(--tct-option-active-color, inherit);\n    }\n\n    .dropdown-item-button:hover,\n    .dropdown-item-button:focus {\n        color: var-list(--tct-dropdown-item-hover-color, var-prefixer(dropdown-item-selected-font-color), inherit);\n    }\n\n    .dropdown-item-button:focus {\n        box-shadow: var-list(\n            --tct-dropdown-item-focus-box-shadow,\n            --const-inset-double-focus-ring,\n            unquote(\n                'inset 0 0 0 2px var(--t-base), inset 0 0 0 4px var(--const-focus-color), inset 0 0 0 6px var(--t-base)'\n            )\n        );\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    Prop,\n    State,\n    Element,\n    Event,\n    Listen,\n    Watch,\n    h,\n    EventEmitter,\n} from '@stencil/core';\nimport { loc, handleAriaLabel, overrideFocus } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\nimport { JSX } from '../../components';\n\n/**\n * @name Dropdown Item\n * @category Display\n * @summary Use as a single action item within a Dropdown menu.\n */\n@Component({ tag: 'q2-dropdown-item', shadow: true, styleUrl: 'q2-dropdown-item.scss' })\nexport class Q2DropdownItem implements ComponentInterface {\n    // #region Own Properties\n\n    dropdownItemBtn: HTMLButtonElement;\n    removeBtn: HTMLButtonElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    q2LocValue: string;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Used by q2-option-list to indicate the option is active\n     * @private\n     */\n    @Prop({ reflect: true })\n    active: boolean;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    /** Disables interaction with the item and blocks its click event. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * The text that appears within the dropdown item.\n     *\n     * @info\n     * This will be used as the `aria-label` for this item.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string;\n\n    /**\n     * Renders an icon button in the item.\n     * Clicking on this button will change the `type` on the item's click event detail to \"remove\".\n     */\n    @Prop({ reflect: true })\n    removable: boolean;\n\n    /**\n     * Renders a line in the item instead of text.\n     * Click events from these items will not have details provided.\n     * A `separator` allows for quick visual grouping of items, so interactions should not be bound to these options.\n     */\n    @Prop({ reflect: true })\n    separator: boolean;\n\n    /** A static reference value for the item. This value is returned in the click event detail. */\n    @Prop({ reflect: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Is emitted when the item is clicked.\n     * @deprecated\n     */\n    @Event()\n    click: EventEmitter<{ type: 'select' | 'remove'; value: string }>;\n\n    /**\n     * Is emitted when the item is clicked.\n     */\n    @Event()\n    tctClick: EventEmitter<{ type: 'select' | 'remove'; value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n        this.q2LocValue = this.handleQ2LocValue();\n    }\n\n    componentDidLoad() {\n        if (this.separator) return;\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    onHostElementFocus(event: FocusEvent) {\n        if (event.target === this.hostElement) {\n            this.focusItem();\n        }\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get innerLabel(): string {\n        return this.label || this.hostElement.textContent.trim() || this.q2LocValue;\n    }\n\n    get removeLabel(): string {\n        return loc('tecton.element.dropdownItem.remove', [this.innerLabel || '']);\n    }\n\n    focusItem() {\n        this.dropdownItemBtn.focus({ preventScroll: true });\n    }\n\n    focusRemoveBtn() {\n        this.removeBtn && this.removeBtn.focus();\n    }\n\n    handleQ2LocValue = (): string => {\n        const locElement = this.hostElement.querySelector('q2-loc');\n        if (!locElement) return '';\n\n        return locElement.value\n            ? loc(locElement.value, locElement.substitutions)\n            : loc(locElement.innerText, locElement.substitutions);\n    };\n\n    onItemClick = (event: MouseEvent) => {\n        event.stopImmediatePropagation();\n\n        mirrorEmit(this, ['click', 'tctClick'], {\n            type: 'select',\n            value: this.value || '',\n        });\n    };\n\n    onItemFocus = (event: FocusEvent) => {\n        event.stopPropagation();\n    };\n\n    onItemKeydown = (event: KeyboardEvent) => {\n        if (event.key === 'ArrowRight') this.focusRemoveBtn();\n    };\n\n    onRemoveBtnClick = (event: MouseEvent) => {\n        event.stopImmediatePropagation();\n\n        mirrorEmit(this, ['click', 'tctClick'], {\n            type: 'remove',\n            value: this.value || '',\n        });\n    };\n\n    onRemoveBtnFocus = (event: FocusEvent) => {\n        event.stopPropagation();\n    };\n\n    onRemoveBtnKeydown = (event: KeyboardEvent) => {\n        if (event.key === 'ArrowLeft') this.focusItem();\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderItemDOM(): JSX.IntrinsicElements {\n        return (\n            <div\n                class={`dropdown-item-wrapper ${this.removable ? 'removable' : ''}`}\n                role=\"presentation\"\n            >\n                <button\n                    ref={el => (this.dropdownItemBtn = el)}\n                    aria-label={loc(this.innerLabel)}\n                    class=\"dropdown-item-button dropdown-item\"\n                    tabindex=\"-1\"\n                    disabled={this.disabled}\n                    role=\"menuitem\"\n                    onClick={this.onItemClick}\n                    onKeyDown={this.onItemKeydown}\n                    onFocus={this.onItemFocus}\n                    test-id=\"dropdownItem\"\n                >\n                    <div class=\"dropdown-item-btn-content\">\n                        <slot>{loc(this.innerLabel)}</slot>\n                    </div>\n                </button>\n\n                {this.removable && (\n                    <button\n                        ref={el => (this.removeBtn = el)}\n                        class=\"dropdown-item-button remove-dropdown-item\"\n                        tabindex=\"-1\"\n                        aria-label={this.removeLabel}\n                        disabled={this.disabled}\n                        role=\"menuitem\"\n                        onClick={this.onRemoveBtnClick}\n                        onKeyDown={this.onRemoveBtnKeydown}\n                        onFocus={this.onRemoveBtnFocus}\n                        test-id=\"removeDropdownItem\"\n                    >\n                        <q2-icon type=\"close\" />\n                    </button>\n                )}\n            </div>\n        );\n    }\n\n    renderSeparatorDOM(): JSX.IntrinsicElements {\n        return (\n            <div\n                class=\"dropdown-separator\"\n                test-id=\"dropdownItemSeparator\"\n                role=\"separator\"\n            ></div>\n        );\n    }\n\n    render() {\n        if (this.separator) {\n            return this.renderSeparatorDOM();\n        }\n\n        return this.renderItemDOM();\n    }\n\n    // #endregion\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"q2-dropdown-item.entry.js","sources":["src/components/q2-dropdown-item/q2-dropdown-item.scss?tag=q2-dropdown-item&encapsulation=shadow","src/components/q2-dropdown-item/q2-dropdown-item.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.dropdown-separator {\n    --comp-default-separator-margin: 0 #{var-list(--tct-scale-1, --app-scale-3x, 15px)};\n    margin: var-list(var-prefixer(dropdown-separator-margin), --comp-default-separator-margin);\n    border-bottom: 1px solid var-list(--tct-dropdown-item-separator-color --t-gray-11 #cccccc);\n}\n\n.dropdown-item-wrapper {\n    --comp-selected-icon-size: #{var-list(var-prefixer(option-selected-icon-size), --tct-scale-3, --app-scale-3x, 15px)};\n\n    --comp-default-dropdown-item-padding-x: var(--app-scale-2x, 10px);\n    --comp-default-dropdown-item-padding-y: var(--app-scale-2x, 10px);\n    --comp-default-dropdown-item-padding: var(--comp-default-dropdown-item-padding-y)\n        var(--comp-default-dropdown-item-padding-x);\n\n    \n    display: grid;\n    align-items: center;\n    gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n    grid-template-columns: 1fr;\n\n    &.removable {\n        grid-template-columns: 1fr auto;\n        .dropdown-item {\n            padding-right: 0;\n        }\n        .remove-dropdown-item {\n            flex: 0 0 44px;\n        }\n    }\n    color: inherit;\n}\n\n.dropdown-item-button {\n    --comp-selected-icon-size: #{var-list(var-prefixer(option-selected-icon-size), --tct-scale-3, --app-scale-3x, 15px)};\n    --comp-dropdown-item-tween: #{var-list(--tct-tween-1, --app-tween-1, cubic-bezier(0.4, 0, 0.2, 1))};\n    margin: var-list(--tct-scale-0, --app-scale-0x, 0);\n    padding: var-list(--tct-scale-0, --app-scale-0x, 0);\n    min-height: var(--tct-dropdown-item-min-height, 44px);\n    min-width: 44px;\n    border: none;\n    background: transparent;\n    outline: 0;\n    transition: var-list(--tct-dropdown-item-tween, --comp-dropdown-item-tween);\n    transition-property: background, color, box-shadow, fill, border-color, border-width;\n    &:disabled {\n        opacity: var-list(--tct-dropdown-item-disabled-opacity, --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n        cursor: not-allowed;\n    }\n    cursor: pointer;\n}\n\n.dropdown-item {\n    --comp-selected-icon-size: #{var-list(var-prefixer(option-selected-icon-size), --tct-scale-3, --app-scale-3x, 15px)};\n    --comp-default-dropdown-item-padding-x: var(--app-scale-2x, 10px);\n    width: 100%;\n    display: grid;\n    align-items:center;\n    justify-content: start;\n    grid-template-columns: 1fr;\n    gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n    min-height: var(--tct-dropdown-item-min-height, 44px);\n    padding-left: var(--comp-default-dropdown-item-padding-x);\n    padding-right: var(--comp-default-dropdown-item-padding-x);\n    text-align: left;\n    min-height: var(--tct-dropdown-item-min-height, 44px);\n}\n\n.dropdown-item-button:focus-visible {\n    box-shadow: var-list(\n        --tct-option-focus-box-shadow,\n        --const-inset-double-focus-ring,\n        unquote('inset var(--const-global-focus, 0 0 0 2px var(--const-focus-color, #0066CC))')\n    ) !important;\n}\n.dropdown-item-btn-content{\n    display:flex;\n    justify-content: start;\n    color: var-list(var-prefixer(dropdown-item-font-color), inherit);\n    font-size: var(--tct-dropdown-item-font-size, inherit);\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n:host(:not([disabled])) {\n    .dropdown-item-button:hover,\n    .dropdown-item-button:focus {\n        background: var-list(\n            --tct-dropdown-item-hover-background,\n            var-prefixer(dropdown-item-selected-bg),\n            var-prefixer(gray-14),\n            --tct-gray-l3,\n            --app-gray-l3,\n            --t-base,\n            #f2f2f2\n        );\n        color: var(--tct-option-active-color, inherit);\n    }\n\n    .dropdown-item-button:hover,\n    .dropdown-item-button:focus {\n        color: var-list(--tct-dropdown-item-hover-color, var-prefixer(dropdown-item-selected-font-color), inherit);\n    }\n\n    .dropdown-item-button:focus {\n        box-shadow: var-list(\n            --tct-dropdown-item-focus-box-shadow,\n            --const-inset-double-focus-ring,\n            unquote(\n                'inset 0 0 0 2px var(--t-base), inset 0 0 0 4px var(--const-focus-color), inset 0 0 0 6px var(--t-base)'\n            )\n        );\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    Prop,\n    State,\n    Element,\n    Event,\n    Listen,\n    Watch,\n    h,\n    EventEmitter,\n} from '@stencil/core';\nimport { loc, handleAriaLabel, overrideFocus } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\nimport { JSX } from '../../components';\nimport { hasValidAncestor } from '@/utils/component';\n\n/**\n * @name Dropdown Item\n * @category Display\n * @summary Use as a single action item within a Dropdown menu.\n */\n@Component({ tag: 'q2-dropdown-item', shadow: true, styleUrl: 'q2-dropdown-item.scss' })\nexport class Q2DropdownItem implements ComponentInterface {\n    // #region Own Properties\n\n    dropdownItemBtn: HTMLButtonElement;\n    removeBtn: HTMLButtonElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    q2LocValue: string;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Used by q2-option-list to indicate the option is active\n     * @private\n     */\n    @Prop({ reflect: true })\n    active: boolean;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    /** Disables interaction with the item and blocks its click event. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * The text that appears within the dropdown item.\n     *\n     * @info\n     * This will be used as the `aria-label` for this item.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string;\n\n    /**\n     * Renders an icon button in the item.\n     * Clicking on this button will change the `type` on the item's click event detail to \"remove\".\n     */\n    @Prop({ reflect: true })\n    removable: boolean;\n\n    /**\n     * Renders a line in the item instead of text.\n     * Click events from these items will not have details provided.\n     * A `separator` allows for quick visual grouping of items, so interactions should not be bound to these options.\n     */\n    @Prop({ reflect: true })\n    separator: boolean;\n\n    /** A static reference value for the item. This value is returned in the click event detail. */\n    @Prop({ reflect: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Is emitted when the item is clicked.\n     * @deprecated\n     */\n    @Event()\n    click: EventEmitter<{ type: 'select' | 'remove'; value: string }>;\n\n    /**\n     * Is emitted when the item is clicked.\n     */\n    @Event()\n    tctClick: EventEmitter<{ type: 'select' | 'remove'; value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        hasValidAncestor(this.hostElement, 'q2-dropdown');\n        handleAriaLabel(this);\n        this.q2LocValue = this.handleQ2LocValue();\n    }\n\n    componentDidLoad() {\n        if (this.separator) return;\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    onHostElementFocus(event: FocusEvent) {\n        if (event.target === this.hostElement) {\n            this.focusItem();\n        }\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get innerLabel(): string {\n        return this.label || this.hostElement.textContent.trim() || this.q2LocValue;\n    }\n\n    get removeLabel(): string {\n        return loc('tecton.element.dropdownItem.remove', [this.innerLabel || '']);\n    }\n\n    focusItem() {\n        this.dropdownItemBtn.focus({ preventScroll: true });\n    }\n\n    focusRemoveBtn() {\n        this.removeBtn && this.removeBtn.focus();\n    }\n\n    handleQ2LocValue = (): string => {\n        const locElement = this.hostElement.querySelector('q2-loc');\n        if (!locElement) return '';\n\n        return locElement.value\n            ? loc(locElement.value, locElement.substitutions)\n            : loc(locElement.innerText, locElement.substitutions);\n    };\n\n    onItemClick = (event: MouseEvent) => {\n        event.stopImmediatePropagation();\n\n        mirrorEmit(this, ['click', 'tctClick'], {\n            type: 'select',\n            value: this.value || '',\n        });\n    };\n\n    onItemFocus = (event: FocusEvent) => {\n        event.stopPropagation();\n    };\n\n    onItemKeydown = (event: KeyboardEvent) => {\n        if (event.key === 'ArrowRight') this.focusRemoveBtn();\n    };\n\n    onRemoveBtnClick = (event: MouseEvent) => {\n        event.stopImmediatePropagation();\n\n        mirrorEmit(this, ['click', 'tctClick'], {\n            type: 'remove',\n            value: this.value || '',\n        });\n    };\n\n    onRemoveBtnFocus = (event: FocusEvent) => {\n        event.stopPropagation();\n    };\n\n    onRemoveBtnKeydown = (event: KeyboardEvent) => {\n        if (event.key === 'ArrowLeft') this.focusItem();\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderItemDOM(): JSX.IntrinsicElements {\n        return (\n            <div\n                class={`dropdown-item-wrapper ${this.removable ? 'removable' : ''}`}\n                role=\"presentation\"\n            >\n                <button\n                    ref={el => (this.dropdownItemBtn = el)}\n                    aria-label={loc(this.innerLabel)}\n                    class=\"dropdown-item-button dropdown-item\"\n                    tabindex=\"-1\"\n                    disabled={this.disabled}\n                    role=\"menuitem\"\n                    onClick={this.onItemClick}\n                    onKeyDown={this.onItemKeydown}\n                    onFocus={this.onItemFocus}\n                    test-id=\"dropdownItem\"\n                >\n                    <div class=\"dropdown-item-btn-content\">\n                        <slot>{loc(this.innerLabel)}</slot>\n                    </div>\n                </button>\n\n                {this.removable && (\n                    <button\n                        ref={el => (this.removeBtn = el)}\n                        class=\"dropdown-item-button remove-dropdown-item\"\n                        tabindex=\"-1\"\n                        aria-label={this.removeLabel}\n                        disabled={this.disabled}\n                        role=\"menuitem\"\n                        onClick={this.onRemoveBtnClick}\n                        onKeyDown={this.onRemoveBtnKeydown}\n                        onFocus={this.onRemoveBtnFocus}\n                        test-id=\"removeDropdownItem\"\n                    >\n                        <q2-icon type=\"close\" />\n                    </button>\n                )}\n            </div>\n        );\n    }\n\n    renderSeparatorDOM(): JSX.IntrinsicElements {\n        return (\n            <div\n                class=\"dropdown-separator\"\n                test-id=\"dropdownItemSeparator\"\n                role=\"separator\"\n            ></div>\n        );\n    }\n\n    render() {\n        if (this.separator) {\n            return this.renderSeparatorDOM();\n        }\n\n        return this.renderItemDOM();\n    }\n\n    // #endregion\n}\n"],"names":[],"mappings":";;;;;AAAA,MAAM,iBAAiB,GAAG,w3IAAw3I;;MCuBr4I,cAAc,GAAA,MAAA;AAD3B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAqII,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAa;YAC5B,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,QAAQ,CAAC;AAC3D,YAAA,IAAI,CAAC,UAAU;AAAE,gBAAA,OAAO,EAAE;YAE1B,OAAO,UAAU,CAAC;kBACZ,GAAG,CAAC,UAAU,CAAC,KAAK,EAAE,UAAU,CAAC,aAAa;kBAC9C,GAAG,CAAC,UAAU,CAAC,SAAS,EAAE,UAAU,CAAC,aAAa,CAAC;AAC7D,SAAC;AAED,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,KAAiB,KAAI;YAChC,KAAK,CAAC,wBAAwB,EAAE;YAEhC,UAAU,CAAC,IAAI,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE;AACpC,gBAAA,IAAI,EAAE,QAAQ;AACd,gBAAA,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,EAAE;AAC1B,aAAA,CAAC;AACN,SAAC;AAED,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,KAAiB,KAAI;YAChC,KAAK,CAAC,eAAe,EAAE;AAC3B,SAAC;AAED,QAAA,IAAA,CAAA,aAAa,GAAG,CAAC,KAAoB,KAAI;AACrC,YAAA,IAAI,KAAK,CAAC,GAAG,KAAK,YAAY;gBAAE,IAAI,CAAC,cAAc,EAAE;AACzD,SAAC;AAED,QAAA,IAAA,CAAA,gBAAgB,GAAG,CAAC,KAAiB,KAAI;YACrC,KAAK,CAAC,wBAAwB,EAAE;YAEhC,UAAU,CAAC,IAAI,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE;AACpC,gBAAA,IAAI,EAAE,QAAQ;AACd,gBAAA,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,EAAE;AAC1B,aAAA,CAAC;AACN,SAAC;AAED,QAAA,IAAA,CAAA,gBAAgB,GAAG,CAAC,KAAiB,KAAI;YACrC,KAAK,CAAC,eAAe,EAAE;AAC3B,SAAC;AAED,QAAA,IAAA,CAAA,kBAAkB,GAAG,CAAC,KAAoB,KAAI;AAC1C,YAAA,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW;gBAAE,IAAI,CAAC,SAAS,EAAE;AACnD,SAAC;AAmEJ;;;IA5JG,iBAAiB,GAAA;AACb,QAAA,gBAAgB,CAAC,IAAI,CAAC,WAAW,EAAE,aAAa,CAAC;QACjD,eAAe,CAAC,IAAI,CAAC;AACrB,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,gBAAgB,EAAE;;IAG7C,gBAAgB,GAAA;QACZ,IAAI,IAAI,CAAC,SAAS;YAAE;AACpB,QAAA,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC;;;;AAOnC,IAAA,kBAAkB,CAAC,KAAiB,EAAA;QAChC,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,WAAW,EAAE;YACnC,IAAI,CAAC,SAAS,EAAE;;;;;IAQxB,iBAAiB,GAAA;QACb,eAAe,CAAC,IAAI,CAAC;;;;AAMzB,IAAA,IAAI,UAAU,GAAA;AACV,QAAA,OAAO,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,IAAI,EAAE,IAAI,IAAI,CAAC,UAAU;;AAG/E,IAAA,IAAI,WAAW,GAAA;AACX,QAAA,OAAO,GAAG,CAAC,oCAAoC,EAAE,CAAC,IAAI,CAAC,UAAU,IAAI,EAAE,CAAC,CAAC;;IAG7E,SAAS,GAAA;QACL,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC;;IAGvD,cAAc,GAAA;QACV,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE;;;;IAiD5C,aAAa,GAAA;QACT,QACI,WACI,KAAK,EAAE,CAAA,sBAAA,EAAyB,IAAI,CAAC,SAAS,GAAG,WAAW,GAAG,EAAE,CAAE,CAAA,EACnE,IAAI,EAAC,cAAc,EAAA,EAEnB,CACI,CAAA,QAAA,EAAA,EAAA,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC,gBAC1B,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,EAChC,KAAK,EAAC,oCAAoC,EAC1C,QAAQ,EAAC,IAAI,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,SAAA,EACjB,cAAc,EAAA,EAEtB,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EAClC,CAAO,CAAA,MAAA,EAAA,IAAA,EAAA,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,CAAQ,CACjC,CACD,EAER,IAAI,CAAC,SAAS,KACX,CAAA,CAAA,QAAA,EAAA,EACI,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,EAChC,KAAK,EAAC,2CAA2C,EACjD,QAAQ,EAAC,IAAI,EAAA,YAAA,EACD,IAAI,CAAC,WAAW,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,SAAS,EAAE,IAAI,CAAC,kBAAkB,EAClC,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAA,SAAA,EACtB,oBAAoB,EAAA,EAE5B,CAAS,CAAA,SAAA,EAAA,EAAA,IAAI,EAAC,OAAO,EAAA,CAAG,CACnB,CACZ,CACC;;IAId,kBAAkB,GAAA;QACd,QACI,CAAA,CAAA,KAAA,EAAA,EACI,KAAK,EAAC,oBAAoB,EAAA,SAAA,EAClB,uBAAuB,EAC/B,IAAI,EAAC,WAAW,EAAA,CACb;;IAIf,MAAM,GAAA;AACF,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;AAChB,YAAA,OAAO,IAAI,CAAC,kBAAkB,EAAE;;AAGpC,QAAA,OAAO,IAAI,CAAC,aAAa,EAAE;;;;;;;;;;;"}

package/dist/esm/q2-dropdown.entry.js

@@ -1,8 +1,8 @@
 import { r as registerInstance, h, F as Fragment, g as getElement } from './index-CGkHOjh1.js';
-import { s as shouldShowActionSheet, a as showActionSheetList } from './action-sheet-WwoBwnIp.js';
+import { s as shouldShowActionSheet, a as showActionSheetList } from './action-sheet-B7adb3xs.js';
 import { o as overrideFocus, i as isEventFromElement, w as waitForNextPaint, b as handleRenamedProp, d as handleAriaLabel, l as loc } from './index-B4WYBDS9.js';
 
-const q2DropdownCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-flex}:host([block]){display:block}q2-icon{pointer-events:none;margin-block:-100px}click-elsewhere{position:relative;display:block}q2-popover{--tct-popover-min-width:var(--tct-dropdown-width, var(--t-dropdown-width))}";
+const q2DropdownCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-flex}:host([block]){display:block}:host([full-width]:not([full-width=false])){display:inline-flex;justify-content:center;width:100%}::slotted([slot=popover-top]){padding:var(--tct-dropdown-popover-top-slot-padding, 0);border-bottom:var(--tct-dropdown-slot-border-top)}::slotted([slot=popover-bottom]){padding:var(--tct-dropdown-popover-bottom-slot-padding, 0);border-top:var(--tct-dropdown-slot-border-bottom)}q2-icon{pointer-events:none;margin-block:-100px}click-elsewhere{position:relative;display:block}q2-popover{--tct-popover-min-width:var(--tct-dropdown-width, var(--t-dropdown-width));--tct-popover-padding:var(--tct-dropdown-content-padding)}";
 
 const Q2Dropdown = class {
     constructor(hostRef) {
@@ -120,6 +120,21 @@ const Q2Dropdown = class {
     }
     // #endregion
     // #region Public Methods API
+    /**
+     * Gets the outerHTML for top/bottom slotted elements.
+     */
+    async _getSlotsHtml() {
+        return [
+            ...Array.from(this.hostElement.querySelectorAll(`[slot='popover-top']`)).map(slot => ({
+                slot: 'top',
+                html: slot.outerHTML,
+            })),
+            ...Array.from(this.hostElement.querySelectorAll(`[slot='popover-bottom']`)).map(slot => ({
+                slot: 'bottom',
+                html: slot.outerHTML,
+            })),
+        ];
+    }
     /**
      * Emulates clicking the dropdown `<button>` to hide the popover if it is showing.
      * @testOnly
@@ -139,31 +154,41 @@ const Q2Dropdown = class {
         this._togglePopover();
     }
     /**
-     * Emulates opening the dropdown and selecting a [Dropdown Item](https://tecton.q2developer.com/design-system/q2-dropdown-item/).
+     * Emulates opening the dropdown and selecting a
+     * [Dropdown Item](https://tecton.q2developer.com/design-system/q2-dropdown-item/) or
+     * [Option](https://tecton.q2developer.com/design-system/q2-option/).
      *
      * If the dropdown is closed, this will open it before selecting the item.
      *
-     * If the value does not match any item's value, this method does nothing.
+     * If the value does not match any item's value, or the dropdown is disabled, this method does nothing.
      * @testOnly
      */
     async selectItem(value) {
         var _a;
         const item = this.hostElement.querySelector(`${this.dropdownItemSelector}[value="${value}"]`);
+        const option = this.hostElement.querySelector(`${this.optionSelector}[value="${value}"]`);
         const itemBtn = item === null || item === void 0 ? void 0 : item.shadowRoot.querySelector('.dropdown-item');
-        if (!item || this.disabled)
+        const target = item ? itemBtn : option;
+        if (!target || this.disabled)
             return;
         if (!this.open) {
             (_a = this.controlElement) === null || _a === void 0 ? void 0 : _a.click();
             await waitForNextPaint();
         }
-        itemBtn.click();
+        target.click();
         await waitForNextPaint();
     }
     /**
-     * Emulates opening the dropdown and selecting a [Dropdown Item](https://tecton.q2developer.com/design-system/q2-dropdown-item/)'s *remove* button.
+     * Emulates opening the dropdown and selecting a
+     * [Dropdown Item](https://tecton.q2developer.com/design-system/q2-dropdown-item/)'s *remove* button.
+     *
+     * This method only applies to the deprecated `q2-dropdown-item` element, since
+     * `q2-option` (its replacement) does not support the `removable` attribute.
      *
      * If the dropdown is closed, this will open it before selecting the remove item button.
      *
+     * If the dropdown is disabled, this method does nothing.
+     *
      * Requirements for this method to work properly:
      * - Provided `value` matches the item's `value` property
      * - Item has the `removable` property enabled
@@ -337,7 +362,7 @@ const Q2Dropdown = class {
     // #region Render Methods
     render() {
         const btnProps = this.toggleButtonProps;
-        return (h("click-elsewhere", { key: '8699f2748f1e40e039a8f193e8ae471e8eb4b9a5', class: this.open ? 'dropdown-open' : '', onChange: this.onClickElsewhere, "test-id": "dropdownContainer" }, h("q2-btn", { key: 'ba0eb907db6572f67941108b2b51dc1d65fad0b3', ref: el => (this.controlElement = el), class: btnProps.className, onClick: this.onToggleClick, onKeyDown: this.onToggleKeydown, fab: btnProps.fab, intent: btnProps.intent, onFocusout: this.handleFocusOut, active: btnProps.active, disabled: btnProps.disabled, ariaExpanded: `${!!btnProps.ariaExpanded}`, label: this.hideLabel && this.label ? loc(this.label) : undefined, hideLabel: this.hideLabel, ariaHasPopup: "menu", "test-id": "dropdownButton", block: this.block, description: loc('tecton.element.dropdown.itemCount', [this.determineDropdownItemCount]) }, this.hasCustomControl ? (h("div", { "test-id": "dropdownControl", class: btnProps.custom ? '' : 'hidden' }, h("slot", { name: "control" }))) : (h(Fragment, null, this.label && !this.hideLabel && (h("span", { class: "dropdown-button-text" }, loc(this.label))), this.icon ? h("q2-icon", { type: this.icon }) : ' '))), h("q2-popover", { key: 'b917dbc1c869817a2b1018ef202cdebdcb524787', ref: el => (this.popoverElement = el), controlElement: this.controlElement, open: this.open, "max-height": this.popoverMaxHeight, onFocusout: this.handleFocusOut, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment, mode: this.popoverMode || undefined, block: this.block }, h("q2-option-list", { key: 'dfbe34f10b058e90f16d2354f536b2ae9f1d55ee', onPopoverState: this.onPopoverState, id: "option-list", ref: el => (this.optionList = el), type: "menu", label: loc('tecton.element.optionList.label', [this.optionListLabel]), "no-select": true }, h("slot", { key: 'a57d60688c5d5d4a89216db57fc9b56db13589d2' })))));
+        return (h("click-elsewhere", { key: 'fddcaea136198e746262b9e39145c2cd54ad8818', class: this.open ? 'dropdown-open' : '', onChange: this.onClickElsewhere, "test-id": "dropdownContainer" }, h("q2-btn", { key: '3c10e2db2387b2d2eb3e252e900936ad90c8c4c7', tabIndex: 0, ref: el => (this.controlElement = el), class: btnProps.className, onClick: this.onToggleClick, onKeyDown: this.onToggleKeydown, fab: btnProps.fab, intent: btnProps.intent, onFocusout: this.handleFocusOut, active: btnProps.active, disabled: btnProps.disabled, ariaExpanded: `${!!btnProps.ariaExpanded}`, label: this.hideLabel && this.label ? loc(this.label) : undefined, hideLabel: this.hideLabel, ariaHasPopup: "menu", "test-id": "dropdownButton", block: this.block, description: loc('tecton.element.dropdown.itemCount', [this.determineDropdownItemCount]) }, this.hasCustomControl ? (h("div", { "test-id": "dropdownControl", class: btnProps.custom ? '' : 'hidden' }, h("slot", { name: "control" }))) : (h(Fragment, null, this.label && !this.hideLabel && (h("span", { class: "dropdown-button-text" }, loc(this.label))), this.icon ? h("q2-icon", { type: this.icon }) : ' '))), h("q2-popover", { key: 'ea2a11332207e2ee9d35a9f3acc296e32969efb2', ref: el => (this.popoverElement = el), controlElement: this.controlElement, open: this.open, "max-height": this.popoverMaxHeight, onFocusout: this.handleFocusOut, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment, mode: this.popoverMode || undefined, block: this.block }, h("slot", { key: 'd4604df87b1f646f7703feb16622a136a695b41a', name: "popover-top" }), h("q2-option-list", { key: '31bc9e561470804a7065389c1017b2f9d1bee62f', onPopoverState: this.onPopoverState, id: "option-list", ref: el => (this.optionList = el), type: "menu", label: loc('tecton.element.optionList.label', [this.optionListLabel]), "no-select": true }, h("slot", { key: '23045585b7fe0b271e988f530bf597dbab284abd' })), h("slot", { key: '83c9d50b07e8f30f52e2531e541b4a256a41517c', name: "popover-bottom" }))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/q2-dropdown.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-dropdown.entry.js","sources":["src/components/q2-dropdown/q2-dropdown.scss?tag=q2-dropdown&encapsulation=shadow","src/components/q2-dropdown/q2-dropdown.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-flex;\n}\n\n:host([block]) {\n    display: block;\n}\n\nq2-icon {\n    pointer-events: none;\n    margin-block: -100px;\n}\n\nclick-elsewhere {\n    position: relative;\n    display: block;\n}\n\nq2-popover {\n    --tct-popover-min-width: #{var-list(var-prefixer(dropdown-width))};\n}\n","import { shouldShowActionSheet, showActionSheetList } from '@/utils/action-sheet';\nimport { Component, ComponentInterface, Prop, Method, Element, Watch, h, Fragment, Listen } from '@stencil/core';\nimport {\n    handleAriaLabel,\n    handleRenamedProp,\n    isEventFromElement,\n    loc,\n    overrideFocus,\n    waitForNextPaint,\n} from 'src/utils';\n\n/**\n * @name Dropdown\n * @category Display\n * @summary Use for menus of contextual actions triggered by a button click.\n * @slot control - An optional slot to provide custom content as the clickable interface. The Dropdown **must** have `type=\"custom\"` to use the control slot.\n */\n@Component({ tag: 'q2-dropdown', shadow: true, styleUrl: 'q2-dropdown.scss' })\nexport class Q2Dropdown implements ComponentInterface {\n    // #region Own Properties\n\n    controlElement?: HTMLQ2BtnElement;\n    dropdownItemSelector: string = 'q2-dropdown-item:not([disabled]):not([separator])';\n    optionList: HTMLQ2OptionListElement;\n    optionSelector: string = 'q2-option:not([disabled]):not([separator])';\n    popoverElement?: HTMLQ2PopoverElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    @Prop({ reflect: true })\n    additionalContext: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true })\n    alignment: 'left' | 'right';\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    /** If `true`, component expands to fill the width of its parent element. */\n    @Prop({ reflect: true })\n    block: boolean;\n\n    /**\n     * Tells the outlet what the type of object being passed in as contextValue.\n     * This will allow for the hierarchy resolution logic to work to determine if an option should or should not be shown.\n     *\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true })\n    context: string;\n\n    /**\n     * Passes important information to the outlet (e.g., pass an account id that your platform can use to look up what module to show for that account type).\n     *\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true })\n    contextValue: string;\n\n    /** Indicates the menu cannot be focused or interacted with. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * Hide's the field's `<label>` element from view.\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true })\n    hideLabel: boolean;\n\n    /**\n     * Instructs the component to use the action sheet workflow for displaying its options.\n     *\n     * For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).\n     */\n    @Prop()\n    hoist: boolean = !!window.Tecton?.useActionSheets;\n\n    /** The icon that will render within the toggle button. You may use any of the `q2-icon` types. */\n    @Prop({ reflect: true })\n    icon: string;\n\n    /**\n     * The text that appears within the button.\n     * @warning\n     * This property should not be used if the `type` is `icon`.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string;\n\n    /**\n     * Identifies this menu as an outlet. Used in conjunction with context and, optionally, `contextValue`.\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true })\n    name: string;\n\n    /**\n     * Determine whether the popover is open or closed.\n     *\n     * @readonly\n     */\n    @Prop({ reflect: true, mutable: true })\n    open: boolean;\n\n    /** Determines the label that is applied to the option list for accessibility purposes. */\n    @Prop()\n    optionListLabel: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true })\n    popDirection: 'up' | 'down';\n\n    /** Aligns the popover dropdown to the left or right side of the input field. */\n    @Prop({ mutable: true })\n    popoverAlignment: 'left' | 'right' = 'left'; // being used in dropdown.scss\n\n    /**\n     * Force the direction of the popover dropdown when it opens.\n     * If no value is passed, the component will auto-detect the direction based on available space.\n     */\n    @Prop({ mutable: true })\n    popoverDirection: 'up' | 'down';\n\n    /**\n     * Force the maximum height of the popover. This value will be interpreted as pixels.\n     * If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.\n     */\n    @Prop()\n    popoverMaxHeight: number;\n\n    /** @deprecated */\n    @Prop()\n    popoverMinHeight: number;\n\n    /**\n     * Determines the display mode of the popover.\n     *\n     * Providing a value of `legacy` instructs the popover to use absolute positioning instead of fixed positioning.\n     *\n     * @info\n     * This is a temporary solution to work around styling issues related to using fixed positioning for the popover\n     * when nested inside of elements with transform properties. This will be removed once the popover API is available\n     * for use.\n     */\n    @Prop({ mutable: true })\n    popoverMode: 'legacy' = null;\n\n    /**\n     * Use with `context` to tell the outlet where it appears. It will be matched with the appropriately configured module for that context.\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true })\n    resolvedType: string;\n\n    /** The type of button used as the menu toggle.\n     * @info\n     * Type must be \"custom\" to use the custom button slot.\n     */\n    @Prop({ reflect: true })\n    type: 'icon' | 'fab' | 'custom' | 'primary' | 'secondary' | 'neutral' = 'icon';\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        this._alignOptionStructure();\n        this.popDirectionHandler();\n        this.alignmentHandler();\n        this.ariaLabelHandler();\n    }\n\n    componentDidLoad() {\n        this.orchestrateResolvedMenuItems();\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.focusToggle();\n    }\n\n    @Listen('popoverStateChanged')\n    popoverStateChangeHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n        if (this.open !== open) this.open = open;\n        if (open) {\n            this.popoverElement?.scrollContainerTo({ top: 0 });\n        } else {\n            this.optionList.setActiveElement(null);\n        }\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking the dropdown `<button>` to hide the popover if it is showing.\n     * @testOnly\n     */\n    @Method()\n    async closePopover() {\n        if (!this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates clicking the dropdown `<button>` to show the popover if it is hidden.\n     * @testOnly\n     */\n    @Method()\n    async openPopover() {\n        if (this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates opening the dropdown and selecting a [Dropdown Item](https://tecton.q2developer.com/design-system/q2-dropdown-item/).\n     *\n     * If the dropdown is closed, this will open it before selecting the item.\n     *\n     * If the value does not match any item's value, this method does nothing.\n     * @testOnly\n     */\n    @Method()\n    async selectItem(value: string) {\n        const item = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}[value=\"${value}\"]`\n        );\n        const itemBtn = item?.shadowRoot.querySelector<HTMLButtonElement>('.dropdown-item');\n        if (!item || this.disabled) return;\n        if (!this.open) {\n            this.controlElement?.click();\n            await waitForNextPaint();\n        }\n        itemBtn.click();\n        await waitForNextPaint();\n    }\n\n    /**\n     * Emulates opening the dropdown and selecting a [Dropdown Item](https://tecton.q2developer.com/design-system/q2-dropdown-item/)'s *remove* button.\n     *\n     * If the dropdown is closed, this will open it before selecting the remove item button.\n     *\n     * Requirements for this method to work properly:\n     * - Provided `value` matches the item's `value` property\n     * - Item has the `removable` property enabled\n     * @testOnly\n     */\n    @Method()\n    async selectRemoveItem(value: string) {\n        const item = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}[value=\"${value}\"]`\n        );\n        const removeButton = item?.shadowRoot.querySelector<HTMLButtonElement>('.remove-dropdown-item');\n        if (!item || !removeButton || this.disabled) return;\n        if (!this.open) {\n            this.controlElement?.click();\n            await waitForNextPaint();\n        }\n        removeButton.click();\n        await waitForNextPaint();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('additionalContext')\n    additionalContextHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('alignment')\n    alignmentHandler() {\n        handleRenamedProp(this, 'alignment', 'popoverAlignment');\n    }\n\n    @Watch('ariaLabel')\n    ariaLabelHandler() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('context')\n    contextHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('contextValue')\n    contextValueHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('name')\n    nameHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('popDirection')\n    popDirectionHandler() {\n        handleRenamedProp(this, 'popDirection', 'popoverDirection');\n    }\n\n    @Watch('resolvedType')\n    resolvedTypeHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get determineDropdownItemCount() {\n        return this.hostElement.querySelectorAll(this.dropdownItemSelector).length;\n    }\n\n    get hasCustomControl() {\n        return !!this.hostElement.querySelector('[slot=control]');\n    }\n\n    get toggleButtonProps() {\n        const allowedIntents = ['primary', 'secondary', 'neutral'];\n        const allowedTypes = ['icon', 'fab', 'custom', ...allowedIntents];\n        const type = allowedTypes.includes(this.type) ? this.type : '';\n        const icon = type === 'icon';\n        const fab = type === 'fab';\n        const custom = type === 'custom';\n        let intent;\n        if (allowedIntents.includes(type)) {\n            intent = type === 'neutral' ? type : `workflow-${type}`;\n        }\n        const active = this.open;\n        const disabled = !!this.disabled;\n        const ariaExpanded = this.open;\n        const className = !icon && !fab && !intent ? 'unstyled' : '';\n\n        return {\n            icon,\n            fab,\n            intent,\n            active,\n            disabled,\n            ariaExpanded,\n            className,\n            custom,\n        };\n    }\n\n    _alignOptionStructure(elem: Element = this.hostElement) {\n        Array.from(elem.children).forEach(el => {\n            if (el.tagName === 'Q2-OPTION') {\n                el.setAttribute('_hide-selected-block', '');\n            } else if (el.tagName === 'Q2-OPTGROUP') {\n                this._alignOptionStructure(el);\n            }\n        });\n    }\n\n    _clickItem(value: string) {\n        if (!value || this.disabled) return;\n        const item = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}[value=\"${value}\"]`\n        );\n        const option = this.hostElement.querySelector<HTMLQ2OptionElement>(`${this.optionSelector}[value=\"${value}\"]`);\n        item?.shadowRoot.querySelector<HTMLButtonElement>('.dropdown-item')?.click();\n        option?.click();\n    }\n\n    async _handleActionSheet(event: MouseEvent | KeyboardEvent) {\n        const { value } = await showActionSheetList(this, event);\n        this._clickItem(value);\n        this.controlElement.focus();\n    }\n\n    _togglePopover() {\n        const { controlElement } = this;\n        if (!controlElement) return;\n        controlElement.click();\n        controlElement.focus();\n        controlElement.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    focusToggle = () => {\n        this.controlElement.focus();\n    };\n\n    handleFocusOut = (event: FocusEvent) => {\n        const relatedTarget = event.relatedTarget as unknown as HTMLElement;\n        if (this.popoverElement?.contains(relatedTarget)) return;\n        if (this.hostElement.contains(relatedTarget)) return;\n        this.open = false;\n    };\n\n    onClickElsewhere = (event: CustomEvent) => {\n        const target = event.target as HTMLElement;\n        if (target.localName === 'q2-option-list') {\n            event.stopPropagation();\n        }\n        if (target.localName === 'click-elsewhere') {\n            event.stopPropagation();\n            const { popoverElement } = this;\n            if (!popoverElement) return;\n            popoverElement.open = false;\n        }\n    };\n\n    onPopoverState = (event: CustomEvent<{ open: boolean; action: string }>) => {\n        if (event.detail.open) return;\n        this.controlElement.focus();\n    };\n\n    onToggleClick = async (event: MouseEvent) => {\n        event.stopPropagation();\n        this.popoverElement.controlElement = this.controlElement;\n        if (shouldShowActionSheet(this)) {\n            this._handleActionSheet(event);\n        } else {\n            await this.popoverElement.toggle();\n        }\n    };\n\n    onToggleKeydown = async (event: KeyboardEvent) => {\n        const isTabMetaOrCtrl = event.metaKey || event.ctrlKey || event.key === 'Tab';\n        if (isTabMetaOrCtrl) return;\n\n        event.preventDefault();\n        this.popoverElement.controlElement = this.controlElement;\n        if (shouldShowActionSheet(this, event)) {\n            this._handleActionSheet(event);\n        } else {\n            this.optionList.handleExternalKeydown(event);\n        }\n    };\n\n    orchestrateResolvedMenuItems() {\n        if (!this.name || !this.context) {\n            // this is only for contextual menu outlets\n            this.removeResolvedElements();\n            return;\n        }\n\n        this.resolveMenuItemElements()\n            .then(data => {\n                this.removeResolvedElements();\n                data.forEach(element => {\n                    this.hostElement.appendChild(element);\n                });\n            })\n            .catch(err => {\n                this.removeResolvedElements();\n                throw err;\n            });\n    }\n\n    removeResolvedElements() {\n        const resolvedElements = this.hostElement.querySelectorAll('q2-dropdown-item.resolved-menu-item');\n        resolvedElements.forEach(element => this.hostElement.removeChild(element));\n    }\n\n    resolveMenu() {\n        return (\n            this.name &&\n            window.TectonElements &&\n            window.TectonElements.resolveMenu(this.name, this.contextValue, this.resolvedType, this.additionalContext)\n        );\n    }\n\n    resolveMenuItemElements() {\n        return this.resolveMenu().then(datas => {\n            return datas.map(menuItemData => {\n                let onClickFn;\n                let queryParams;\n                if (menuItemData['tct-ctxid']) {\n                    queryParams = {};\n                    queryParams[menuItemData.contextIdParamName] = menuItemData['tct-ctxid'];\n                }\n\n                switch (menuItemData.action) {\n                    case 'navigateTo':\n                        onClickFn = function () {\n                            return window.TectonElements?.navigateTo?.(\n                                menuItemData.featureName,\n                                menuItemData.moduleName,\n                                queryParams\n                            );\n                        };\n                        break;\n                    case 'showOverpanel':\n                        onClickFn = function () {\n                            return window.TectonElements?.showOverpanel?.(\n                                `${menuItemData.featureName}.${menuItemData.moduleName}`,\n                                queryParams,\n                                undefined,\n                                true\n                            );\n                        };\n                        break;\n                }\n\n                const newDropdownItem = document.createElement('q2-dropdown-item');\n                newDropdownItem.setAttribute('value', menuItemData.itemLabel);\n                newDropdownItem.classList.add('resolved-menu-item');\n                newDropdownItem.textContent = menuItemData.itemLabel;\n                newDropdownItem.onclick = onClickFn;\n\n                return newDropdownItem;\n            });\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const btnProps = this.toggleButtonProps;\n\n        return (\n            <click-elsewhere\n                class={this.open ? 'dropdown-open' : ''}\n                onChange={this.onClickElsewhere}\n                test-id=\"dropdownContainer\"\n            >\n                <q2-btn\n                    ref={el => (this.controlElement = el)}\n                    class={btnProps.className}\n                    onClick={this.onToggleClick}\n                    onKeyDown={this.onToggleKeydown}\n                    fab={btnProps.fab}\n                    intent={btnProps.intent}\n                    onFocusout={this.handleFocusOut}\n                    active={btnProps.active}\n                    disabled={btnProps.disabled}\n                    ariaExpanded={`${!!btnProps.ariaExpanded}`}\n                    label={this.hideLabel && this.label ? loc(this.label) : undefined}\n                    hideLabel={this.hideLabel}\n                    ariaHasPopup=\"menu\"\n                    test-id=\"dropdownButton\"\n                    block={this.block}\n                    description={loc('tecton.element.dropdown.itemCount', [this.determineDropdownItemCount])}\n                >\n                    {this.hasCustomControl ? (\n                        <div\n                            test-id=\"dropdownControl\"\n                            class={btnProps.custom ? '' : 'hidden'}\n                        >\n                            <slot name=\"control\" />\n                        </div>\n                    ) : (\n                        <Fragment>\n                            {this.label && !this.hideLabel && (\n                                <span class=\"dropdown-button-text\">{loc(this.label)}</span>\n                            )}\n                            {this.icon ? <q2-icon type={this.icon} /> : ' '}\n                        </Fragment>\n                    )}\n                </q2-btn>\n                <q2-popover\n                    ref={el => (this.popoverElement = el)}\n                    controlElement={this.controlElement}\n                    open={this.open}\n                    max-height={this.popoverMaxHeight}\n                    onFocusout={this.handleFocusOut}\n                    minHeight={this.popoverMinHeight}\n                    direction={this.popoverDirection}\n                    align={this.popoverAlignment}\n                    mode={this.popoverMode || undefined}\n                    block={this.block}\n                >\n                    <q2-option-list\n                        onPopoverState={this.onPopoverState}\n                        id=\"option-list\"\n                        ref={el => (this.optionList = el)}\n                        type=\"menu\"\n                        label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n                        no-select\n                    >\n                        <slot />\n                    </q2-option-list>\n                </q2-popover>\n            </click-elsewhere>\n        );\n    }\n\n    // #endregion\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"q2-dropdown.entry.js","sources":["src/components/q2-dropdown/q2-dropdown.scss?tag=q2-dropdown&encapsulation=shadow","src/components/q2-dropdown/q2-dropdown.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-flex;\n}\n\n:host([block]) {\n    display: block;\n}\n\n:host([full-width]:not([full-width=\"false\"])) {\n    display: inline-flex;\n    justify-content: center;\n    width: 100%;\n}\n\n::slotted([slot=\"popover-top\"]) {\n    padding: var-list(--tct-dropdown-popover-top-slot-padding, 0);\n    border-bottom: var-list(--tct-dropdown-slot-border-top);\n}\n\n::slotted([slot=\"popover-bottom\"]) {\n    padding: var-list(--tct-dropdown-popover-bottom-slot-padding, 0);\n    border-top: var-list(--tct-dropdown-slot-border-bottom);\n}\n\nq2-icon {\n    pointer-events: none;\n    margin-block: -100px;\n}\n\nclick-elsewhere {\n    position: relative;\n    display: block;\n}\n\nq2-popover {\n    --tct-popover-min-width: #{var-list(var-prefixer(dropdown-width))};\n    --tct-popover-padding: #{var-list(--tct-dropdown-content-padding)};\n}\n","import { shouldShowActionSheet, showActionSheetList } from '@/utils/action-sheet';\nimport { Component, ComponentInterface, Prop, Method, Element, Watch, h, Fragment, Listen } from '@stencil/core';\nimport {\n    handleAriaLabel,\n    handleRenamedProp,\n    isEventFromElement,\n    loc,\n    overrideFocus,\n    waitForNextPaint,\n} from 'src/utils';\n\n/**\n * @name Dropdown\n * @category Display\n * @summary Use for menus of contextual actions triggered by a button click.\n * @slot control - An optional slot to provide custom content as the clickable interface. The Dropdown **must** have `type=\"custom\"` to use the control slot.\n * @slot popover-top - An optional slot to display custom content persistently at the top of the q2-dropdown.\n * @slot popover-bottom - An optional slot to display custom content persistently at the bottom of the q2-dropdown.\n */\n@Component({ tag: 'q2-dropdown', shadow: true, styleUrl: 'q2-dropdown.scss' })\nexport class Q2Dropdown implements ComponentInterface {\n    // #region Own Properties\n\n    controlElement?: HTMLQ2BtnElement;\n    dropdownItemSelector: string = 'q2-dropdown-item:not([disabled]):not([separator])';\n    optionList: HTMLQ2OptionListElement;\n    optionSelector: string = 'q2-option:not([disabled]):not([separator])';\n    popoverElement?: HTMLQ2PopoverElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    @Prop({ reflect: true })\n    additionalContext: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true })\n    alignment: 'left' | 'right';\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    /** If `true`, component expands to fill the width of its parent element. */\n    @Prop({ reflect: true })\n    block: boolean;\n\n    /**\n     * Tells the outlet what the type of object being passed in as contextValue.\n     * This will allow for the hierarchy resolution logic to work to determine if an option should or should not be shown.\n     *\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true })\n    context: string;\n\n    /**\n     * Passes important information to the outlet (e.g., pass an account id that your platform can use to look up what module to show for that account type).\n     *\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true })\n    contextValue: string;\n\n    /** Indicates the menu cannot be focused or interacted with. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /** If `true`, it takes up 100% width. */\n    @Prop({ reflect: true })\n    fullWidth: boolean;\n\n    /**\n     * Hide's the field's `<label>` element from view.\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true })\n    hideLabel: boolean;\n\n    /**\n     * Instructs the component to use the action sheet workflow for displaying its options.\n     *\n     * For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).\n     */\n    @Prop()\n    hoist: boolean = !!window.Tecton?.useActionSheets;\n\n    /** The icon that will render within the toggle button. You may use any of the `q2-icon` types. */\n    @Prop({ reflect: true })\n    icon: string;\n\n    /**\n     * The text that appears within the button.\n     * @warning\n     * This property should not be used if the `type` is `icon`.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string;\n\n    /**\n     * Identifies this menu as an outlet. Used in conjunction with context and, optionally, `contextValue`.\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true })\n    name: string;\n\n    /**\n     * Determine whether the popover is open or closed.\n     *\n     * @readonly\n     */\n    @Prop({ reflect: true, mutable: true })\n    open: boolean;\n\n    /** Determines the label that is applied to the option list for accessibility purposes. */\n    @Prop()\n    optionListLabel: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true })\n    popDirection: 'up' | 'down';\n\n    /** Aligns the popover dropdown to the left or right side of the input field. */\n    @Prop({ mutable: true })\n    popoverAlignment: 'left' | 'right' = 'left'; // being used in dropdown.scss\n\n    /**\n     * Force the direction of the popover dropdown when it opens.\n     * If no value is passed, the component will auto-detect the direction based on available space.\n     */\n    @Prop({ mutable: true })\n    popoverDirection: 'up' | 'down';\n\n    /**\n     * Force the maximum height of the popover. This value will be interpreted as pixels.\n     * If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.\n     */\n    @Prop()\n    popoverMaxHeight: number;\n\n    /** @deprecated */\n    @Prop()\n    popoverMinHeight: number;\n\n    /**\n     * Determines the display mode of the popover.\n     *\n     * Providing a value of `legacy` instructs the popover to use absolute positioning instead of fixed positioning.\n     *\n     * @info\n     * This is a temporary solution to work around styling issues related to using fixed positioning for the popover\n     * when nested inside of elements with transform properties. This will be removed once the popover API is available\n     * for use.\n     */\n    @Prop({ mutable: true })\n    popoverMode: 'legacy' = null;\n\n    /**\n     * Use with `context` to tell the outlet where it appears. It will be matched with the appropriately configured module for that context.\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true })\n    resolvedType: string;\n\n    /** The type of button used as the menu toggle.\n     * @info\n     * Type must be \"custom\" to use the custom button slot.\n     */\n    @Prop({ reflect: true })\n    type: 'icon' | 'fab' | 'custom' | 'primary' | 'secondary' | 'neutral' = 'icon';\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        this._alignOptionStructure();\n        this.popDirectionHandler();\n        this.alignmentHandler();\n        this.ariaLabelHandler();\n    }\n\n    componentDidLoad() {\n        this.orchestrateResolvedMenuItems();\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.focusToggle();\n    }\n\n    @Listen('popoverStateChanged')\n    popoverStateChangeHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n        if (this.open !== open) this.open = open;\n        if (open) {\n            this.popoverElement?.scrollContainerTo({ top: 0 });\n        } else {\n            this.optionList.setActiveElement(null);\n        }\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Gets the outerHTML for top/bottom slotted elements.\n     */\n    @Method()\n    async _getSlotsHtml() {\n        return [\n            ...Array.from(this.hostElement.querySelectorAll(`[slot='popover-top']`)).map(slot => ({\n                slot: 'top',\n                html: slot.outerHTML,\n            })),\n            ...Array.from(this.hostElement.querySelectorAll(`[slot='popover-bottom']`)).map(slot => ({\n                slot: 'bottom',\n                html: slot.outerHTML,\n            })),\n        ];\n    }\n\n    /**\n     * Emulates clicking the dropdown `<button>` to hide the popover if it is showing.\n     * @testOnly\n     */\n    @Method()\n    async closePopover() {\n        if (!this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates clicking the dropdown `<button>` to show the popover if it is hidden.\n     * @testOnly\n     */\n    @Method()\n    async openPopover() {\n        if (this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates opening the dropdown and selecting a\n     * [Dropdown Item](https://tecton.q2developer.com/design-system/q2-dropdown-item/) or\n     * [Option](https://tecton.q2developer.com/design-system/q2-option/).\n     *\n     * If the dropdown is closed, this will open it before selecting the item.\n     *\n     * If the value does not match any item's value, or the dropdown is disabled, this method does nothing.\n     * @testOnly\n     */\n    @Method()\n    async selectItem(value: string) {\n        const item = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}[value=\"${value}\"]`\n        );\n        const option = this.hostElement.querySelector<HTMLQ2OptionElement>(`${this.optionSelector}[value=\"${value}\"]`);\n        const itemBtn = item?.shadowRoot.querySelector<HTMLButtonElement>('.dropdown-item');\n        const target = item ? itemBtn : option;\n        if (!target || this.disabled) return;\n        if (!this.open) {\n            this.controlElement?.click();\n            await waitForNextPaint();\n        }\n        target.click();\n        await waitForNextPaint();\n    }\n\n    /**\n     * Emulates opening the dropdown and selecting a\n     * [Dropdown Item](https://tecton.q2developer.com/design-system/q2-dropdown-item/)'s *remove* button.\n     *\n     * This method only applies to the deprecated `q2-dropdown-item` element, since\n     * `q2-option` (its replacement) does not support the `removable` attribute.\n     *\n     * If the dropdown is closed, this will open it before selecting the remove item button.\n     *\n     * If the dropdown is disabled, this method does nothing.\n     *\n     * Requirements for this method to work properly:\n     * - Provided `value` matches the item's `value` property\n     * - Item has the `removable` property enabled\n     * @testOnly\n     */\n    @Method()\n    async selectRemoveItem(value: string) {\n        const item = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}[value=\"${value}\"]`\n        );\n        const removeButton = item?.shadowRoot.querySelector<HTMLButtonElement>('.remove-dropdown-item');\n        if (!item || !removeButton || this.disabled) return;\n        if (!this.open) {\n            this.controlElement?.click();\n            await waitForNextPaint();\n        }\n        removeButton.click();\n        await waitForNextPaint();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('additionalContext')\n    additionalContextHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('alignment')\n    alignmentHandler() {\n        handleRenamedProp(this, 'alignment', 'popoverAlignment');\n    }\n\n    @Watch('ariaLabel')\n    ariaLabelHandler() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('context')\n    contextHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('contextValue')\n    contextValueHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('name')\n    nameHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('popDirection')\n    popDirectionHandler() {\n        handleRenamedProp(this, 'popDirection', 'popoverDirection');\n    }\n\n    @Watch('resolvedType')\n    resolvedTypeHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get determineDropdownItemCount() {\n        return this.hostElement.querySelectorAll(this.dropdownItemSelector).length;\n    }\n\n    get hasCustomControl() {\n        return !!this.hostElement.querySelector('[slot=control]');\n    }\n\n    get toggleButtonProps() {\n        const allowedIntents = ['primary', 'secondary', 'neutral'];\n        const allowedTypes = ['icon', 'fab', 'custom', ...allowedIntents];\n        const type = allowedTypes.includes(this.type) ? this.type : '';\n        const icon = type === 'icon';\n        const fab = type === 'fab';\n        const custom = type === 'custom';\n        let intent;\n        if (allowedIntents.includes(type)) {\n            intent = type === 'neutral' ? type : `workflow-${type}`;\n        }\n        const active = this.open;\n        const disabled = !!this.disabled;\n        const ariaExpanded = this.open;\n        const className = !icon && !fab && !intent ? 'unstyled' : '';\n\n        return {\n            icon,\n            fab,\n            intent,\n            active,\n            disabled,\n            ariaExpanded,\n            className,\n            custom,\n        };\n    }\n\n    _alignOptionStructure(elem: Element = this.hostElement) {\n        Array.from(elem.children).forEach(el => {\n            if (el.tagName === 'Q2-OPTION') {\n                el.setAttribute('_hide-selected-block', '');\n            } else if (el.tagName === 'Q2-OPTGROUP') {\n                this._alignOptionStructure(el);\n            }\n        });\n    }\n\n    _clickItem(value: string) {\n        if (!value || this.disabled) return;\n        const item = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}[value=\"${value}\"]`\n        );\n        const option = this.hostElement.querySelector<HTMLQ2OptionElement>(`${this.optionSelector}[value=\"${value}\"]`);\n        item?.shadowRoot.querySelector<HTMLButtonElement>('.dropdown-item')?.click();\n        option?.click();\n    }\n\n    async _handleActionSheet(event: MouseEvent | KeyboardEvent) {\n        const { value } = await showActionSheetList(this, event);\n        this._clickItem(value);\n        this.controlElement.focus();\n    }\n\n    _togglePopover() {\n        const { controlElement } = this;\n        if (!controlElement) return;\n        controlElement.click();\n        controlElement.focus();\n        controlElement.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    focusToggle = () => {\n        this.controlElement.focus();\n    };\n\n    handleFocusOut = (event: FocusEvent) => {\n        const relatedTarget = event.relatedTarget as unknown as HTMLElement;\n        if (this.popoverElement?.contains(relatedTarget)) return;\n        if (this.hostElement.contains(relatedTarget)) return;\n        this.open = false;\n    };\n\n    onClickElsewhere = (event: CustomEvent) => {\n        const target = event.target as HTMLElement;\n        if (target.localName === 'q2-option-list') {\n            event.stopPropagation();\n        }\n        if (target.localName === 'click-elsewhere') {\n            event.stopPropagation();\n            const { popoverElement } = this;\n            if (!popoverElement) return;\n            popoverElement.open = false;\n        }\n    };\n\n    onPopoverState = (event: CustomEvent<{ open: boolean; action: string }>) => {\n        if (event.detail.open) return;\n        this.controlElement.focus();\n    };\n\n    onToggleClick = async (event: MouseEvent) => {\n        event.stopPropagation();\n        this.popoverElement.controlElement = this.controlElement;\n        if (shouldShowActionSheet(this)) {\n            this._handleActionSheet(event);\n        } else {\n            await this.popoverElement.toggle();\n        }\n    };\n\n    onToggleKeydown = async (event: KeyboardEvent) => {\n        const isTabMetaOrCtrl = event.metaKey || event.ctrlKey || event.key === 'Tab';\n        if (isTabMetaOrCtrl) return;\n\n        event.preventDefault();\n        this.popoverElement.controlElement = this.controlElement;\n        if (shouldShowActionSheet(this, event)) {\n            this._handleActionSheet(event);\n        } else {\n            this.optionList.handleExternalKeydown(event);\n        }\n    };\n\n    orchestrateResolvedMenuItems() {\n        if (!this.name || !this.context) {\n            // this is only for contextual menu outlets\n            this.removeResolvedElements();\n            return;\n        }\n\n        this.resolveMenuItemElements()\n            .then(data => {\n                this.removeResolvedElements();\n                data.forEach(element => {\n                    this.hostElement.appendChild(element);\n                });\n            })\n            .catch(err => {\n                this.removeResolvedElements();\n                throw err;\n            });\n    }\n\n    removeResolvedElements() {\n        const resolvedElements = this.hostElement.querySelectorAll('q2-dropdown-item.resolved-menu-item');\n        resolvedElements.forEach(element => this.hostElement.removeChild(element));\n    }\n\n    resolveMenu() {\n        return (\n            this.name &&\n            window.TectonElements &&\n            window.TectonElements.resolveMenu(this.name, this.contextValue, this.resolvedType, this.additionalContext)\n        );\n    }\n\n    resolveMenuItemElements() {\n        return this.resolveMenu().then(datas => {\n            return datas.map(menuItemData => {\n                let onClickFn;\n                let queryParams;\n                if (menuItemData['tct-ctxid']) {\n                    queryParams = {};\n                    queryParams[menuItemData.contextIdParamName] = menuItemData['tct-ctxid'];\n                }\n\n                switch (menuItemData.action) {\n                    case 'navigateTo':\n                        onClickFn = function () {\n                            return window.TectonElements?.navigateTo?.(\n                                menuItemData.featureName,\n                                menuItemData.moduleName,\n                                queryParams\n                            );\n                        };\n                        break;\n                    case 'showOverpanel':\n                        onClickFn = function () {\n                            return window.TectonElements?.showOverpanel?.(\n                                `${menuItemData.featureName}.${menuItemData.moduleName}`,\n                                queryParams,\n                                undefined,\n                                true\n                            );\n                        };\n                        break;\n                }\n\n                const newDropdownItem = document.createElement('q2-dropdown-item');\n                newDropdownItem.setAttribute('value', menuItemData.itemLabel);\n                newDropdownItem.classList.add('resolved-menu-item');\n                newDropdownItem.textContent = menuItemData.itemLabel;\n                newDropdownItem.onclick = onClickFn;\n\n                return newDropdownItem;\n            });\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const btnProps = this.toggleButtonProps;\n        return (\n            <click-elsewhere\n                class={this.open ? 'dropdown-open' : ''}\n                onChange={this.onClickElsewhere}\n                test-id=\"dropdownContainer\"\n            >\n                <q2-btn\n                    tabIndex={0}\n                    ref={el => (this.controlElement = el)}\n                    class={btnProps.className}\n                    onClick={this.onToggleClick}\n                    onKeyDown={this.onToggleKeydown}\n                    fab={btnProps.fab}\n                    intent={btnProps.intent}\n                    onFocusout={this.handleFocusOut}\n                    active={btnProps.active}\n                    disabled={btnProps.disabled}\n                    ariaExpanded={`${!!btnProps.ariaExpanded}`}\n                    label={this.hideLabel && this.label ? loc(this.label) : undefined}\n                    hideLabel={this.hideLabel}\n                    ariaHasPopup=\"menu\"\n                    test-id=\"dropdownButton\"\n                    block={this.block}\n                    description={loc('tecton.element.dropdown.itemCount', [this.determineDropdownItemCount])}\n                >\n                    {this.hasCustomControl ? (\n                        <div\n                            test-id=\"dropdownControl\"\n                            class={btnProps.custom ? '' : 'hidden'}\n                        >\n                            <slot name=\"control\" />\n                        </div>\n                    ) : (\n                        <Fragment>\n                            {this.label && !this.hideLabel && (\n                                <span class=\"dropdown-button-text\">{loc(this.label)}</span>\n                            )}\n                            {this.icon ? <q2-icon type={this.icon} /> : ' '}\n                        </Fragment>\n                    )}\n                </q2-btn>\n                <q2-popover\n                    ref={el => (this.popoverElement = el)}\n                    controlElement={this.controlElement}\n                    open={this.open}\n                    max-height={this.popoverMaxHeight}\n                    onFocusout={this.handleFocusOut}\n                    minHeight={this.popoverMinHeight}\n                    direction={this.popoverDirection}\n                    align={this.popoverAlignment}\n                    mode={this.popoverMode || undefined}\n                    block={this.block}\n                >\n                    <slot name=\"popover-top\" />\n                    <q2-option-list\n                        onPopoverState={this.onPopoverState}\n                        id=\"option-list\"\n                        ref={el => (this.optionList = el)}\n                        type=\"menu\"\n                        label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n                        no-select\n                    >\n                        <slot />\n                    </q2-option-list>\n                    <slot name=\"popover-bottom\" />\n                </q2-popover>\n            </click-elsewhere>\n        );\n    }\n\n    // #endregion\n}\n"],"names":[],"mappings":";;;;AAAA,MAAM,aAAa,GAAG,g0CAAg0C;;MCoBz0C,UAAU,GAAA,MAAA;AADvB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAKI,QAAA,IAAoB,CAAA,oBAAA,GAAW,mDAAmD;AAElF,QAAA,IAAc,CAAA,cAAA,GAAW,4CAA4C;AA8DrE;;;;AAIG;AAEH,QAAA,IAAK,CAAA,KAAA,GAAY,CAAC,EAAC,CAAA,EAAA,GAAA,MAAM,CAAC,MAAM,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,eAAe,CAAA;;AAyCjD,QAAA,IAAA,CAAA,gBAAgB,GAAqB,MAAM,CAAC;AAoB5C;;;;;;;;;AASG;AAEH,QAAA,IAAW,CAAA,WAAA,GAAa,IAAI;AAU5B;;;AAGG;AAEH,QAAA,IAAI,CAAA,IAAA,GAAoE,MAAM;AA0P9E,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;AACf,YAAA,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE;AAC/B,SAAC;AAED,QAAA,IAAA,CAAA,cAAc,GAAG,CAAC,KAAiB,KAAI;;AACnC,YAAA,MAAM,aAAa,GAAG,KAAK,CAAC,aAAuC;YACnE,IAAI,CAAA,EAAA,GAAA,IAAI,CAAC,cAAc,0CAAE,QAAQ,CAAC,aAAa,CAAC;gBAAE;AAClD,YAAA,IAAI,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,aAAa,CAAC;gBAAE;AAC9C,YAAA,IAAI,CAAC,IAAI,GAAG,KAAK;AACrB,SAAC;AAED,QAAA,IAAA,CAAA,gBAAgB,GAAG,CAAC,KAAkB,KAAI;AACtC,YAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB;AAC1C,YAAA,IAAI,MAAM,CAAC,SAAS,KAAK,gBAAgB,EAAE;gBACvC,KAAK,CAAC,eAAe,EAAE;;AAE3B,YAAA,IAAI,MAAM,CAAC,SAAS,KAAK,iBAAiB,EAAE;gBACxC,KAAK,CAAC,eAAe,EAAE;AACvB,gBAAA,MAAM,EAAE,cAAc,EAAE,GAAG,IAAI;AAC/B,gBAAA,IAAI,CAAC,cAAc;oBAAE;AACrB,gBAAA,cAAc,CAAC,IAAI,GAAG,KAAK;;AAEnC,SAAC;AAED,QAAA,IAAA,CAAA,cAAc,GAAG,CAAC,KAAqD,KAAI;AACvE,YAAA,IAAI,KAAK,CAAC,MAAM,CAAC,IAAI;gBAAE;AACvB,YAAA,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE;AAC/B,SAAC;AAED,QAAA,IAAA,CAAA,aAAa,GAAG,OAAO,KAAiB,KAAI;YACxC,KAAK,CAAC,eAAe,EAAE;YACvB,IAAI,CAAC,cAAc,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc;AACxD,YAAA,IAAI,qBAAqB,CAAC,IAAI,CAAC,EAAE;AAC7B,gBAAA,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC;;iBAC3B;AACH,gBAAA,MAAM,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE;;AAE1C,SAAC;AAED,QAAA,IAAA,CAAA,eAAe,GAAG,OAAO,KAAoB,KAAI;AAC7C,YAAA,MAAM,eAAe,GAAG,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK;AAC7E,YAAA,IAAI,eAAe;gBAAE;YAErB,KAAK,CAAC,cAAc,EAAE;YACtB,IAAI,CAAC,cAAc,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc;AACxD,YAAA,IAAI,qBAAqB,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE;AACpC,gBAAA,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC;;iBAC3B;AACH,gBAAA,IAAI,CAAC,UAAU,CAAC,qBAAqB,CAAC,KAAK,CAAC;;AAEpD,SAAC;AA0JJ;;;IAjcG,iBAAiB,GAAA;QACb,IAAI,CAAC,qBAAqB,EAAE;QAC5B,IAAI,CAAC,mBAAmB,EAAE;QAC1B,IAAI,CAAC,gBAAgB,EAAE;QACvB,IAAI,CAAC,gBAAgB,EAAE;;IAG3B,gBAAgB,GAAA;QACZ,IAAI,CAAC,4BAA4B,EAAE;AACnC,QAAA,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC;;;;AAOnC,IAAA,aAAa,CAAC,KAAiB,EAAA;QAC3B,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC;YAAE;QAClD,IAAI,CAAC,WAAW,EAAE;;AAItB,IAAA,yBAAyB,CAAC,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,EAAkC,EAAA;;AAC1E,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI;AAAE,YAAA,IAAI,CAAC,IAAI,GAAG,IAAI;QACxC,IAAI,IAAI,EAAE;AACN,YAAA,CAAA,EAAA,GAAA,IAAI,CAAC,cAAc,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,iBAAiB,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC;;aAC/C;AACH,YAAA,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,IAAI,CAAC;;;;;AAO9C;;AAEG;AAEH,IAAA,MAAM,aAAa,GAAA;QACf,OAAO;YACH,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,sBAAsB,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,KAAK;AAClF,gBAAA,IAAI,EAAE,KAAK;gBACX,IAAI,EAAE,IAAI,CAAC,SAAS;AACvB,aAAA,CAAC,CAAC;YACH,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,yBAAyB,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,KAAK;AACrF,gBAAA,IAAI,EAAE,QAAQ;gBACd,IAAI,EAAE,IAAI,CAAC,SAAS;AACvB,aAAA,CAAC,CAAC;SACN;;AAGL;;;AAGG;AAEH,IAAA,MAAM,YAAY,GAAA;AACd,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ;YAAE;QACjC,IAAI,CAAC,cAAc,EAAE;;AAGzB;;;AAGG;AAEH,IAAA,MAAM,WAAW,GAAA;AACb,QAAA,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ;YAAE;QAChC,IAAI,CAAC,cAAc,EAAE;;AAGzB;;;;;;;;;AASG;IAEH,MAAM,UAAU,CAAC,KAAa,EAAA;;AAC1B,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CACvC,CAAG,EAAA,IAAI,CAAC,oBAAoB,CAAA,QAAA,EAAW,KAAK,CAAA,EAAA,CAAI,CACnD;AACD,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAsB,CAAG,EAAA,IAAI,CAAC,cAAc,CAAA,QAAA,EAAW,KAAK,CAAA,EAAA,CAAI,CAAC;QAC9G,MAAM,OAAO,GAAG,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAJ,MAAA,GAAA,MAAA,GAAA,IAAI,CAAE,UAAU,CAAC,aAAa,CAAoB,gBAAgB,CAAC;QACnF,MAAM,MAAM,GAAG,IAAI,GAAG,OAAO,GAAG,MAAM;AACtC,QAAA,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ;YAAE;AAC9B,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACZ,CAAA,EAAA,GAAA,IAAI,CAAC,cAAc,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,EAAE;YAC5B,MAAM,gBAAgB,EAAE;;QAE5B,MAAM,CAAC,KAAK,EAAE;QACd,MAAM,gBAAgB,EAAE;;AAG5B;;;;;;;;;;;;;;;AAeG;IAEH,MAAM,gBAAgB,CAAC,KAAa,EAAA;;AAChC,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CACvC,CAAG,EAAA,IAAI,CAAC,oBAAoB,CAAA,QAAA,EAAW,KAAK,CAAA,EAAA,CAAI,CACnD;QACD,MAAM,YAAY,GAAG,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAJ,MAAA,GAAA,MAAA,GAAA,IAAI,CAAE,UAAU,CAAC,aAAa,CAAoB,uBAAuB,CAAC;QAC/F,IAAI,CAAC,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,QAAQ;YAAE;AAC7C,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACZ,CAAA,EAAA,GAAA,IAAI,CAAC,cAAc,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,EAAE;YAC5B,MAAM,gBAAgB,EAAE;;QAE5B,YAAY,CAAC,KAAK,EAAE;QACpB,MAAM,gBAAgB,EAAE;;;;IAO5B,wBAAwB,GAAA;QACpB,IAAI,CAAC,4BAA4B,EAAE;;IAIvC,gBAAgB,GAAA;AACZ,QAAA,iBAAiB,CAAC,IAAI,EAAE,WAAW,EAAE,kBAAkB,CAAC;;IAI5D,gBAAgB,GAAA;QACZ,eAAe,CAAC,IAAI,CAAC;;IAIzB,cAAc,GAAA;QACV,IAAI,CAAC,4BAA4B,EAAE;;IAIvC,mBAAmB,GAAA;QACf,IAAI,CAAC,4BAA4B,EAAE;;IAIvC,WAAW,GAAA;QACP,IAAI,CAAC,4BAA4B,EAAE;;IAIvC,mBAAmB,GAAA;AACf,QAAA,iBAAiB,CAAC,IAAI,EAAE,cAAc,EAAE,kBAAkB,CAAC;;IAI/D,mBAAmB,GAAA;QACf,IAAI,CAAC,4BAA4B,EAAE;;;;AAMvC,IAAA,IAAI,0BAA0B,GAAA;AAC1B,QAAA,OAAO,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC,MAAM;;AAG9E,IAAA,IAAI,gBAAgB,GAAA;QAChB,OAAO,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,gBAAgB,CAAC;;AAG7D,IAAA,IAAI,iBAAiB,GAAA;QACjB,MAAM,cAAc,GAAG,CAAC,SAAS,EAAE,WAAW,EAAE,SAAS,CAAC;AAC1D,QAAA,MAAM,YAAY,GAAG,CAAC,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,cAAc,CAAC;QACjE,MAAM,IAAI,GAAG,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,GAAG,EAAE;AAC9D,QAAA,MAAM,IAAI,GAAG,IAAI,KAAK,MAAM;AAC5B,QAAA,MAAM,GAAG,GAAG,IAAI,KAAK,KAAK;AAC1B,QAAA,MAAM,MAAM,GAAG,IAAI,KAAK,QAAQ;AAChC,QAAA,IAAI,MAAM;AACV,QAAA,IAAI,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;AAC/B,YAAA,MAAM,GAAG,IAAI,KAAK,SAAS,GAAG,IAAI,GAAG,CAAY,SAAA,EAAA,IAAI,EAAE;;AAE3D,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI;AACxB,QAAA,MAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,QAAQ;AAChC,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI;AAC9B,QAAA,MAAM,SAAS,GAAG,CAAC,IAAI,IAAI,CAAC,GAAG,IAAI,CAAC,MAAM,GAAG,UAAU,GAAG,EAAE;QAE5D,OAAO;YACH,IAAI;YACJ,GAAG;YACH,MAAM;YACN,MAAM;YACN,QAAQ;YACR,YAAY;YACZ,SAAS;YACT,MAAM;SACT;;AAGL,IAAA,qBAAqB,CAAC,IAAA,GAAgB,IAAI,CAAC,WAAW,EAAA;AAClD,QAAA,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,EAAE,IAAG;AACnC,YAAA,IAAI,EAAE,CAAC,OAAO,KAAK,WAAW,EAAE;AAC5B,gBAAA,EAAE,CAAC,YAAY,CAAC,sBAAsB,EAAE,EAAE,CAAC;;AACxC,iBAAA,IAAI,EAAE,CAAC,OAAO,KAAK,aAAa,EAAE;AACrC,gBAAA,IAAI,CAAC,qBAAqB,CAAC,EAAE,CAAC;;AAEtC,SAAC,CAAC;;AAGN,IAAA,UAAU,CAAC,KAAa,EAAA;;AACpB,QAAA,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ;YAAE;AAC7B,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CACvC,CAAG,EAAA,IAAI,CAAC,oBAAoB,CAAA,QAAA,EAAW,KAAK,CAAA,EAAA,CAAI,CACnD;AACD,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAsB,CAAG,EAAA,IAAI,CAAC,cAAc,CAAA,QAAA,EAAW,KAAK,CAAA,EAAA,CAAI,CAAC;QAC9G,CAAA,EAAA,GAAA,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,UAAU,CAAC,aAAa,CAAoB,gBAAgB,CAAC,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,EAAE;AAC5E,QAAA,MAAM,aAAN,MAAM,KAAA,MAAA,GAAA,MAAA,GAAN,MAAM,CAAE,KAAK,EAAE;;IAGnB,MAAM,kBAAkB,CAAC,KAAiC,EAAA;QACtD,MAAM,EAAE,KAAK,EAAE,GAAG,MAAM,mBAAmB,CAAC,IAAI,EAAE,KAAK,CAAC;AACxD,QAAA,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;AACtB,QAAA,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE;;IAG/B,cAAc,GAAA;AACV,QAAA,MAAM,EAAE,cAAc,EAAE,GAAG,IAAI;AAC/B,QAAA,IAAI,CAAC,cAAc;YAAE;QACrB,cAAc,CAAC,KAAK,EAAE;QACtB,cAAc,CAAC,KAAK,EAAE;QACtB,cAAc,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC;;IAuDzD,4BAA4B,GAAA;QACxB,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;;YAE7B,IAAI,CAAC,sBAAsB,EAAE;YAC7B;;QAGJ,IAAI,CAAC,uBAAuB;aACvB,IAAI,CAAC,IAAI,IAAG;YACT,IAAI,CAAC,sBAAsB,EAAE;AAC7B,YAAA,IAAI,CAAC,OAAO,CAAC,OAAO,IAAG;AACnB,gBAAA,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,OAAO,CAAC;AACzC,aAAC,CAAC;AACN,SAAC;aACA,KAAK,CAAC,GAAG,IAAG;YACT,IAAI,CAAC,sBAAsB,EAAE;AAC7B,YAAA,MAAM,GAAG;AACb,SAAC,CAAC;;IAGV,sBAAsB,GAAA;QAClB,MAAM,gBAAgB,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,qCAAqC,CAAC;AACjG,QAAA,gBAAgB,CAAC,OAAO,CAAC,OAAO,IAAI,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;;IAG9E,WAAW,GAAA;QACP,QACI,IAAI,CAAC,IAAI;AACT,YAAA,MAAM,CAAC,cAAc;YACrB,MAAM,CAAC,cAAc,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAAC;;IAIlH,uBAAuB,GAAA;QACnB,OAAO,IAAI,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,KAAK,IAAG;AACnC,YAAA,OAAO,KAAK,CAAC,GAAG,CAAC,YAAY,IAAG;AAC5B,gBAAA,IAAI,SAAS;AACb,gBAAA,IAAI,WAAW;AACf,gBAAA,IAAI,YAAY,CAAC,WAAW,CAAC,EAAE;oBAC3B,WAAW,GAAG,EAAE;oBAChB,WAAW,CAAC,YAAY,CAAC,kBAAkB,CAAC,GAAG,YAAY,CAAC,WAAW,CAAC;;AAG5E,gBAAA,QAAQ,YAAY,CAAC,MAAM;AACvB,oBAAA,KAAK,YAAY;AACb,wBAAA,SAAS,GAAG,YAAA;;AACR,4BAAA,OAAO,MAAA,CAAA,EAAA,GAAA,MAAM,CAAC,cAAc,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,UAAU,MACpC,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAA,CAAA,EAAA,EAAA,YAAY,CAAC,WAAW,EACxB,YAAY,CAAC,UAAU,EACvB,WAAW,CACd;AACL,yBAAC;wBACD;AACJ,oBAAA,KAAK,eAAe;AAChB,wBAAA,SAAS,GAAG,YAAA;;AACR,4BAAA,OAAO,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,MAAM,CAAC,cAAc,0CAAE,aAAa,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAA,CAAA,EAAA,EACvC,CAAG,EAAA,YAAY,CAAC,WAAW,CAAI,CAAA,EAAA,YAAY,CAAC,UAAU,CAAA,CAAE,EACxD,WAAW,EACX,SAAS,EACT,IAAI,CACP;AACL,yBAAC;wBACD;;gBAGR,MAAM,eAAe,GAAG,QAAQ,CAAC,aAAa,CAAC,kBAAkB,CAAC;gBAClE,eAAe,CAAC,YAAY,CAAC,OAAO,EAAE,YAAY,CAAC,SAAS,CAAC;AAC7D,gBAAA,eAAe,CAAC,SAAS,CAAC,GAAG,CAAC,oBAAoB,CAAC;AACnD,gBAAA,eAAe,CAAC,WAAW,GAAG,YAAY,CAAC,SAAS;AACpD,gBAAA,eAAe,CAAC,OAAO,GAAG,SAAS;AAEnC,gBAAA,OAAO,eAAe;AAC1B,aAAC,CAAC;AACN,SAAC,CAAC;;;;IAMN,MAAM,GAAA;AACF,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,iBAAiB;QACvC,QACI,wEACI,KAAK,EAAE,IAAI,CAAC,IAAI,GAAG,eAAe,GAAG,EAAE,EACvC,QAAQ,EAAE,IAAI,CAAC,gBAAgB,EAAA,SAAA,EACvB,mBAAmB,EAAA,EAE3B,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACI,QAAQ,EAAE,CAAC,EACX,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC,EACrC,KAAK,EAAE,QAAQ,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,SAAS,EAAE,IAAI,CAAC,eAAe,EAC/B,GAAG,EAAE,QAAQ,CAAC,GAAG,EACjB,MAAM,EAAE,QAAQ,CAAC,MAAM,EACvB,UAAU,EAAE,IAAI,CAAC,cAAc,EAC/B,MAAM,EAAE,QAAQ,CAAC,MAAM,EACvB,QAAQ,EAAE,QAAQ,CAAC,QAAQ,EAC3B,YAAY,EAAE,CAAA,EAAG,CAAC,CAAC,QAAQ,CAAC,YAAY,CAAE,CAAA,EAC1C,KAAK,EAAE,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,SAAS,EACjE,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,YAAY,EAAC,MAAM,EACX,SAAA,EAAA,gBAAgB,EACxB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,GAAG,CAAC,mCAAmC,EAAE,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAC,EAEvF,EAAA,IAAI,CAAC,gBAAgB,IAClB,CACY,CAAA,KAAA,EAAA,EAAA,SAAA,EAAA,iBAAiB,EACzB,KAAK,EAAE,QAAQ,CAAC,MAAM,GAAG,EAAE,GAAG,QAAQ,EAAA,EAEtC,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,SAAS,EAAG,CAAA,CACrB,KAEN,CAAA,CAAC,QAAQ,EAAA,IAAA,EACJ,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,SAAS,KAC1B,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,sBAAsB,IAAE,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAQ,CAC9D,EACA,IAAI,CAAC,IAAI,GAAG,CAAA,CAAA,SAAA,EAAA,EAAS,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,GAAG,GAAG,CACxC,CACd,CACI,EACT,CAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACI,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC,EACrC,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAA,YAAA,EACH,IAAI,CAAC,gBAAgB,EACjC,UAAU,EAAE,IAAI,CAAC,cAAc,EAC/B,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAChC,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAChC,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAC5B,IAAI,EAAE,IAAI,CAAC,WAAW,IAAI,SAAS,EACnC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAA,EAEjB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,aAAa,EAAG,CAAA,EAC3B,CAAA,CAAA,gBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACI,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,EAAE,EAAC,aAAa,EAChB,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC,EACjC,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,GAAG,CAAC,iCAAiC,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAA,WAAA,EAAA,IAAA,EAAA,EAGrE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACK,EACjB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,gBAAgB,GAAG,CACrB,CACC;;;;;;;;;;;;;;;;;;"}

package/dist/esm/q2-editable-field.entry.js

@@ -209,7 +209,7 @@ const Q2EditableField = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '6773c95b44605f93ae04f2b026459ac76fafa281' }, this.generateEditStateDOM(), this.generateReadStateDOM()));
+        return (h("div", { key: '928f5bdf39983dfd0441ffefe53fd6971633189b' }, this.generateEditStateDOM(), this.generateReadStateDOM()));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/q2-example.entry.js

@@ -125,7 +125,7 @@ const Q2Example = class {
             }, onClick: () => this.tctClick.emit(), role: "menu" }, h("slot", null))));
     }
     render() {
-        return h(Host, { key: '7878622b0f2a455617e109b9aa32290bffc00a92', attribute: "navigation" }, this.renderMenuInner());
+        return h(Host, { key: 'ed54de30e76cc11a2d1ddd548f1ce565a0ba67e3', attribute: "navigation" }, this.renderMenuInner());
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/q2-file-picker.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-CGkHOjh1.js';
 import { l as loc, h as hasSlotContent } from './index-B4WYBDS9.js';
 
-const q2FilePickerCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@keyframes growFromCenterFadeIn{from{transform:scaleX(0.75) scaleY(0.75);opacity:0}to{transform:scaleX(1) scaleY(1);opacity:1}}@keyframes shrinkToCenterFadeOut{from{transform:scaleX(1) scaleY(1);opacity:1}to{transform:scaleX(0.75) scaleY(0.75);opacity:0}}:host{--comp-default-file-picker-margin:var(--tct-file-picker-margin-top, var(--t-file-picker-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-file-picker-margin-bottom, var(--t-file-picker-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-file-picker-margin, var(--comp-default-file-picker-margin))}.browse{text-align:left}.drop-zone-text{color:var(--tct-file-picker-drop-zone-text-color, var(--t-gray-6, #4d4d4d));font-size:var(--tct-file-picker-drop-zone-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-browse-link-font-weight, 700);margin-bottom:0;margin-top:var(--tct-file-picker-drop-zone-text-margin-top, var(--app-scale-2x, 10px))}.description{color:var(--tct-file-picker-description-text-color, var(--t-gray-1, #0d0d0d));font-size:var(--tct-file-picker-description-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-description-font-weight, 400);text-align:var(--tct-file-picker-description-text-align, left)}.drop-zone{align-items:center;background-color:var(--tct-file-picker-drop-zone-background, var(--t-tertiary, #e8f5fc));border-color:var(--tct-file-picker-drop-zone-border-color, var(--t-gray-8, #808080));border-radius:var(--tct-file-picker-drop-zone-border-radius, var(--app-border-radius-2, 6px));border-style:var(--tct-file-picker-drop-zone-border-style, dashed);border-width:var(--tct-file-picker-drop-zone-border-width, 2px);color:var(--tct-file-picker-drop-zone-color, #747474);display:flex;flex-direction:column;font-size:var(--tct-file-picker-drop-zone-font-size, var(--app-font-size, 14px));font-weight:var(--tct-file-picker-drop-zone-font-weight, 400);height:var(--tct-file-picker-drop-zone-height, 150px);justify-content:center;max-width:var(--tct-file-picker-drop-zone-max-width, 640px);min-width:var(--tct-file-picker-drop-zone-min-width, 320px);padding:var(--tct-file-picker-drop-zone-padding, 20px);text-align:center;width:var(--tct-file-picker-drop-zone-width, 100%)}.drop-zone-highlighted{background-color:var(--tct-file-picker-drop-zone-highlighted-background, var(--tertiary-d-1, #bee1f6));border-color:var(--tct-file-picker-drop-zone-highlighted-border, var(--t-gray-8, #808080))}.drop-zone-disabled{opacity:var(--tct-file-picker-drop-zone-disabled-opacity, var(--app-disabled-opacity, 0.4));cursor:not-allowed}.fade-in{animation-fill-mode:both;animation-play-state:running;animation:growFromCenterFadeIn 0.2s ease-in}.fade-out{animation:shrinkToCenterFadeOut 0.1s ease-out;animation-play-state:running;animation-fill-mode:both}.file-item{--tct-btn-icon-border-radius:4px;--tct-btn-neutral-text-active-font-color:var(--tct-file-picker-item-close-btn-active-color, var(--t-gray-1, #0d0d0d));--tct-btn-neutral-text-focus-visible-outer-ring-color:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));--tct-btn-neutral-text-font-color:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));--tct-btn-neutral-text-hover-outer-ring-color:var(--tct-file-picker-item-close-btn-hover-focus-ring-color, var(--t-gray-1, #0d0d0d));--tct-btn-icon-padding:0;--tct-icon-stroke-primary:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));--tct-item-body-font-size:var(--tct-file-picker-item-font-size, var(--app-font-size-small, 12px));--tct-item-body-font-weight:var(--tct-file-picker-item-font-weight, 400);--tct-item-border-radius:var(--tct-file-picker-item-border-radius, var(--app-border-radius-3, 12px));--tct-item-border:var(--tct-file-picker-item-border-width, 1px) solid var(--tct-file-picker-item-border-color, var(--t-gray-8, #808080));--tct-item-header-color:var(--tct-file-picker-item-name-color, var(--t-gray-1, #0d0d0d));--tct-item-header-font-size:var(--tct-file-picker-item-name-font-size, var(--app-font-size-small, 12px));--tct-item-header-font-weight:var(--tct-file-picker-item-name-font-weight, 400);--tct-item-padding:var(--tct-file-picker-item-padding, var(--app-scale-1x, 5px) var(--app-scale-2x, 10px));text-align:left}.file-item-info{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.file-item-loading{font-size:var(--tct-file-picker-file-item-loading-size, var(--app-scale-6x, 30px));margin-bottom:calc(var(--tct-file-picker-file-item-loading-margin-bottom, var(--app-scale-6x, 30px)) / 8.57);margin-left:calc(var(--tct-file-picker-file-item-loading-margin-bottom, var(--app-scale-1x, 5px)) / 2)}.file-list{--tct-list-item-gap:var(--tct-file-picker-section-gap, var(--app-scale-3x, 15px))}.file-list-container{max-height:var(--tct-file-picker-list-max-height, 190px);max-width:var(--tct-file-picker-drop-zone-max-width, 640px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--tct-file-picker-scrollbar-color, var(--t-a11y-gray-color, #949494)) transparent}.file-picker{display:flex;flex-direction:column;gap:var(--tct-file-picker-file-item-gap, var(--app-scale-3x, 15px))}.heading{display:flex;flex-direction:column;gap:var(--tct-file-picker-heading-gap, var(--app-scale-1x, 5px));justify-content:space-between}.icon-success,.icon-error{--tct-icon-size:var(--tct-file-picker-file-item-icon-size, var(--app-scale-6x, 30px));--tct-icon-stroke-width:2px}.label{color:var(--tct-file-picker-label-color, var(--t-gray-1, #0d0d0d));display:inline-block;font-size:var(--tct-file-picker-label-font-size, var(--app-font-size, 14px));font-weight:var(--tct-file-picker-label-font-weight, 600);text-align:var(--tct-file-picker-label-text-align, left)}.loading{font-size:var(--tct-file-picker-loading-size, var(--app-scale-6x, 25px))}.loading-file{color:var(--tct-file-picker-loading-file-color, var(--t-gray-1, #0d0d0d));font-size:var(--tct-file-picker-loading-file-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-loading-file-font-weight, 400);margin:0}.loading-message{color:var(--tct-file-picker-loading-message-color, var(--t-gray-1, #0d0d0d));font-size:var(--tct-file-picker-loading-message-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-loading-message-font-weight, 700);margin-bottom:var(--tct-file-picker-loading-message-margin-bottom, var(--app-scale-2x, 10px));margin-top:var(--tct-file-picker-loading-message-margin-top, var(--app-scale-2x, 10px))}.dismiss-button{height:30px;width:30px}.dismiss-button:hover{--tct-icon-stroke-primary:var(--tct-file-picker-item-close-btn-hover-color, var(--t-gray-1, #0d0d0d))}[slot=action]{display:flex;align-items:center}";
+const q2FilePickerCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@keyframes growFromCenterFadeIn{from{transform:scaleX(0.75) scaleY(0.75);opacity:0}to{transform:scaleX(1) scaleY(1);opacity:1}}@keyframes shrinkToCenterFadeOut{from{transform:scaleX(1) scaleY(1);opacity:1}to{transform:scaleX(0.75) scaleY(0.75);opacity:0}}:host{--comp-default-file-picker-margin:var(--tct-file-picker-margin-top, var(--t-file-picker-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-file-picker-margin-bottom, var(--t-file-picker-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-file-picker-margin, var(--comp-default-file-picker-margin))}.browse{text-align:left}.drop-zone-text{--tct-link-font-weight:var(--tct-file-picker-browse-link-font-weight, 700);color:var(--tct-file-picker-drop-zone-text-color, var(--t-gray-6, #4d4d4d));font-size:var(--tct-file-picker-drop-zone-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-browse-link-font-weight, 700);margin-bottom:0;margin-top:var(--tct-file-picker-drop-zone-text-margin-top, var(--app-scale-2x, 10px))}.description{color:var(--tct-file-picker-description-text-color, var(--t-gray-1, #0d0d0d));font-size:var(--tct-file-picker-description-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-description-font-weight, 400);text-align:var(--tct-file-picker-description-text-align, left)}.drop-zone{--tct-icon-stroke-primary:var(--tct-file-picker-drop-zone-icon-color, var(--t-text, #4d4d4d));--tct-icon-stroke-secondary:var(--tct-file-picker-drop-zone-icon-color, var(--t-text, #4d4d4d));align-items:center;background-color:var(--tct-file-picker-drop-zone-background, var(--t-tertiary, #e8f5fc));border-color:var(--tct-file-picker-drop-zone-border-color, var(--t-gray-8, #808080));border-radius:var(--tct-file-picker-drop-zone-border-radius, var(--app-border-radius-2, 6px));border-style:var(--tct-file-picker-drop-zone-border-style, dashed);border-width:var(--tct-file-picker-drop-zone-border-width, 2px);color:var(--tct-file-picker-drop-zone-color, #747474);display:flex;flex-direction:column;font-size:var(--tct-file-picker-drop-zone-font-size, var(--app-font-size, 14px));font-weight:var(--tct-file-picker-drop-zone-font-weight, 400);height:var(--tct-file-picker-drop-zone-height, 150px);justify-content:center;max-width:var(--tct-file-picker-drop-zone-max-width, 640px);min-width:var(--tct-file-picker-drop-zone-min-width, 320px);padding:var(--tct-file-picker-drop-zone-padding, 20px);text-align:center;width:var(--tct-file-picker-drop-zone-width, 100%)}.drop-zone-highlighted{background-color:var(--tct-file-picker-drop-zone-highlighted-background, var(--tertiary-d-1, #bee1f6));border-color:var(--tct-file-picker-drop-zone-highlighted-border, var(--t-gray-8, #808080))}.drop-zone-disabled{opacity:var(--tct-file-picker-drop-zone-disabled-opacity, var(--app-disabled-opacity, 0.4));cursor:not-allowed}.fade-in{animation-fill-mode:both;animation-play-state:running;animation:growFromCenterFadeIn 0.2s ease-in}.fade-out{animation:shrinkToCenterFadeOut 0.1s ease-out;animation-play-state:running;animation-fill-mode:both}.file-item{--tct-btn-icon-border-radius:var(--tct-file-picker-item-close-btn-border-radius, 4px);--tct-btn-neutral-text-active-font-color:var(--tct-file-picker-item-close-btn-active-color, var(--t-gray-1, #0d0d0d));--tct-btn-neutral-text-focus-visible-outer-ring-color:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));--tct-btn-neutral-text-font-color:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));--tct-btn-neutral-text-hover-outer-ring-color:var(--tct-file-picker-item-close-btn-hover-focus-ring-color, var(--t-gray-1, #0d0d0d));--tct-btn-icon-padding:0;--tct-icon-stroke-primary:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));--tct-item-body-font-size:var(--tct-file-picker-item-font-size, var(--app-font-size-small, 12px));--tct-item-body-font-weight:var(--tct-file-picker-item-font-weight, 400);--tct-item-border-radius:var(--tct-file-picker-item-border-radius, var(--app-border-radius-3, 12px));--tct-item-border:var(--tct-file-picker-item-border-width, 1px) solid var(--tct-file-picker-item-border-color, var(--t-gray-8, #808080));--tct-item-header-color:var(--tct-file-picker-item-name-color, var(--t-gray-1, #0d0d0d));--tct-item-header-font-size:var(--tct-file-picker-item-name-font-size, var(--app-font-size-small, 12px));--tct-item-header-font-weight:var(--tct-file-picker-item-name-font-weight, 400);--tct-item-padding:var(--tct-file-picker-item-padding, var(--app-scale-1x, 5px) var(--app-scale-2x, 10px));text-align:left}.file-item-info{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.file-item-loading{font-size:var(--tct-file-picker-file-item-loading-size, var(--app-scale-6x, 30px));margin-bottom:calc(var(--tct-file-picker-file-item-loading-margin-bottom, var(--app-scale-6x, 30px)) / 8.57);margin-left:calc(var(--tct-file-picker-file-item-loading-margin-bottom, var(--app-scale-1x, 5px)) / 2)}.file-list{--tct-list-item-gap:var(--tct-file-picker-section-gap, var(--app-scale-3x, 15px))}.file-list-container{max-height:var(--tct-file-picker-list-max-height, 190px);max-width:var(--tct-file-picker-drop-zone-max-width, 640px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--tct-file-picker-scrollbar-color, var(--t-a11y-gray-color, #949494)) transparent}.file-picker{display:flex;flex-direction:column;gap:var(--tct-file-picker-file-item-gap, var(--app-scale-3x, 15px))}.heading{display:flex;flex-direction:column;gap:var(--tct-file-picker-heading-gap, var(--app-scale-1x, 5px));justify-content:space-between}.icon-success,.icon-error{--tct-icon-size:var(--tct-file-picker-file-item-icon-size, var(--app-scale-6x, 30px));--tct-icon-stroke-width:2px}.label{color:var(--tct-file-picker-label-color, var(--t-gray-1, #0d0d0d));display:inline-block;font-size:var(--tct-file-picker-label-font-size, var(--app-font-size, 14px));font-weight:var(--tct-file-picker-label-font-weight, 600);text-align:var(--tct-file-picker-label-text-align, left)}.loading{font-size:var(--tct-file-picker-loading-size, var(--app-scale-6x, 25px))}.loading-file{color:var(--tct-file-picker-loading-file-color, var(--t-gray-1, #0d0d0d));font-size:var(--tct-file-picker-loading-file-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-loading-file-font-weight, 400);margin:0}.loading-message{color:var(--tct-file-picker-loading-message-color, var(--t-gray-1, #0d0d0d));font-size:var(--tct-file-picker-loading-message-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-loading-message-font-weight, 700);margin-bottom:var(--tct-file-picker-loading-message-margin-bottom, var(--app-scale-2x, 10px));margin-top:var(--tct-file-picker-loading-message-margin-top, var(--app-scale-2x, 10px))}.dismiss-button{height:30px;width:30px}.dismiss-button:hover{--tct-icon-stroke-primary:var(--tct-file-picker-item-close-btn-hover-color, var(--t-gray-1, #0d0d0d))}[slot=action]{display:flex;align-items:center}";
 
 const Q2FilePicker = class {
     constructor(hostRef) {
@@ -87,7 +87,7 @@ const Q2FilePicker = class {
         // #region Render Methods
         this.render = () => {
             const { disabled } = this;
-            return (h("div", { class: "file-picker" }, (this.hasLabel || this.hasDescription) && (h("div", { class: "heading" }, this.hasLabel && (h("label", { class: "label", htmlFor: "file-field", "test-id": "label" }, !!this.label ? loc(this.label) : this.hasLabelSlotContent ? h("slot", { name: "label" }) : '')), this.hasDescription && (h("div", { class: "description", id: "description", "test-id": "description" }, !!this.description ? (loc(this.description)) : this.hasDescriptionSlotContent ? (h("slot", { name: "description" })) : (''))))), (this.variant === 'browse-drop' && (h("div", { class: this.dropZoneClasses, onDragEnter: this.disableEvent, onDragLeave: this.dimDropZone, onDragOver: this.highlightDropZone, onDrop: this.grabDroppedFiles, ref: el => (this.dropZone = el !== null && el !== void 0 ? el : this.dropZone), "test-id": "drop-zone" }, (this.areFilesUploading && (h(Fragment, null, h("q2-loading", { class: "loading" }), h("p", { class: "drop-zone-text" }, loc('tecton.element.filePicker.uploadingEllipsis'))))) || (h(Fragment, null, h("q2-icon", { type: "upload" }), h("p", { class: "drop-zone-text" }, h("q2-link", { label: loc('tecton.element.filePicker.browse'), onTctClick: () => this.launchFileBrowser(), variant: "inline", "test-id": "browse-link", disabled: disabled, href: "javascript:void(0)" }), loc('tecton.element.filePicker.orDragFilesHere', [this.maxFiles]))))))) || (h("div", { class: "browse", "test-id": "browse" }, h("q2-btn", { disabled: disabled || this.areFilesUploading, intent: "workflow-primary", loading: this.areFilesUploading, onClick: () => this.launchFileBrowser(), size: this.actualButtonSize, "test-id": "browse-button" }, h("q2-icon", { type: "paperclip" }), h("span", null, loc('tecton.element.filePicker.attachFiles', [this.maxFiles]))))), h("input", { "aria-describedby": (!!this.description && 'description') || undefined, class: "sr", id: "file-field", onChange: this.grabSelectedFiles, ref: el => (this.browseButtonInput = el !== null && el !== void 0 ? el : this.browseButtonInput), type: "file", "test-id": "file-input", disabled: disabled, multiple: true, tabIndex: -1 }), h("div", { class: "file-list-container" }, h("q2-list", { class: "file-list" }, this.displayedFiles.map(file => (h("q2-item", { class: this.getFileItemClasses(file.file.name), key: file.file.name, onAnimationEnd: this.getAnimationendHandlerToRemoveFileItem(file.file.name) }, h("div", { slot: "bullet" }, file.status === 'invalid-type' ||
+            return (h("div", { class: "file-picker" }, (this.hasLabel || this.hasDescription) && (h("div", { class: "heading" }, this.hasLabel && (h("label", { class: "label", htmlFor: "file-field", "test-id": "label" }, !!this.label ? loc(this.label) : this.hasLabelSlotContent ? h("slot", { name: "label" }) : '')), this.hasDescription && (h("div", { class: "description", id: "description", "test-id": "description" }, !!this.description ? (loc(this.description)) : this.hasDescriptionSlotContent ? (h("slot", { name: "description" })) : (''))))), (this.variant === 'browse-drop' && (h("div", { class: this.dropZoneClasses, onDragEnter: this.disableEvent, onDragLeave: this.dimDropZone, onDragOver: this.highlightDropZone, onDrop: this.grabDroppedFiles, ref: el => (this.dropZone = el !== null && el !== void 0 ? el : this.dropZone), "test-id": "drop-zone" }, (this.areFilesUploading && (h(Fragment, null, h("q2-loading", { class: "loading" }), h("p", { class: "drop-zone-text" }, loc('tecton.element.filePicker.uploadingEllipsis'))))) || (h(Fragment, null, h("q2-icon", { type: "upload" }), h("p", { class: "drop-zone-text" }, h("q2-link", { class: "browse-link", label: loc('tecton.element.filePicker.browse'), onTctClick: () => this.launchFileBrowser(), variant: "inline", "test-id": "browse-link", disabled: disabled, href: "javascript:void(0)" }), loc('tecton.element.filePicker.orDragFilesHere', [this.maxFiles]))))))) || (h("div", { class: "browse", "test-id": "browse" }, h("q2-btn", { disabled: disabled || this.areFilesUploading, intent: "workflow-primary", loading: this.areFilesUploading, onClick: () => this.launchFileBrowser(), size: this.actualButtonSize, "test-id": "browse-button" }, h("q2-icon", { type: "paperclip" }), h("span", null, loc('tecton.element.filePicker.attachFiles', [this.maxFiles]))))), h("input", { "aria-describedby": (!!this.description && 'description') || undefined, class: "sr", id: "file-field", onChange: this.grabSelectedFiles, ref: el => (this.browseButtonInput = el !== null && el !== void 0 ? el : this.browseButtonInput), type: "file", "test-id": "file-input", disabled: disabled, multiple: true, tabIndex: -1 }), h("div", { class: "file-list-container" }, h("q2-list", { class: "file-list" }, this.displayedFiles.map(file => (h("q2-item", { class: this.getFileItemClasses(file.file.name), key: file.file.name, onAnimationEnd: this.getAnimationendHandlerToRemoveFileItem(file.file.name) }, h("div", { slot: "decorator" }, file.status === 'invalid-type' ||
                 file.status === 'over-size-limit' ||
                 file.status === 'failed' ||
                 file.status === 'over-max-files-limit' ? (h("q2-icon", { class: "icon-error", type: "error" })) : file.status === 'in-progress' ? (h("q2-loading", { class: "file-item-loading", "hide-from-screen-readers": true })) : (h("q2-icon", { class: "icon-success", type: "success" }))), h("div", { slot: "header" }, file.file.name), h("div", { class: "file-item-info", slot: "body" }, this.getFileItemStatusMessage(file)), h("div", { slot: "action" }, h("q2-btn", { class: "dismiss-button", intent: "neutral-text", "hide-label": "true", label: this.getFileItemButtonLabel(file), onClick: this.getClickHandlerToRemoveFileItem(file.file.name), disabled: disabled }, h("q2-icon", { type: "close" }))))))))));