q2-tecton-elements 1.64.0 → 1.64.2

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

@@ -1 +1 @@
-{"version":3,"file":"q2-dropdown-item.entry.js","sources":["src/utils/mirror-emit.ts","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 { ComponentInterface, EventEmitter } from '@stencil/core';\n\n/**\n * Emits specified events from a given component context with the provided detail.\n *\n * @template T - The type of the event detail. Defaults to the type of `CustomEvent['detail']`.\n * @param context - The component context that contains the event emitters.\n * @param events - An array of event names to be emitted.\n * @param detail - The detail payload to be passed to each emitted event.\n */\nconst mirrorEmit = <T = CustomEvent['detail']>(context: ComponentInterface, events: Array<string>, detail: T) => {\n    events.forEach(event => {\n        const eventEntry = context[event] as EventEmitter<T>;\n        if (!eventEntry) return;\n        eventEntry.emit?.(detail);\n    });\n};\n\nexport default mirrorEmit;\n","@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.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    display: flex;\n}\n\n.dropdown-item-button {\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}\n\n.dropdown-item {\n    --comp-default-dropdown-item-padding: var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);\n    --comp-selected-icon-size: #{var-list(var-prefixer(option-selected-icon-size), --tct-scale-3, --app-scale-3x, 15px)};\n    text-align: left;\n    width: 100%;\n    --comp-padding: #{0 var-list(--app-scale-2x, 10px)};\n    padding: var-list(var-prefixer(option-padding), --comp-padding);\n\n    color: var-list(var-prefixer(dropdown-item-font-color), inherit);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    cursor: pointer;\n\n    display: grid;\n    align-items: center;\n    grid-template-columns:\n        var(--comp-selected-icon-size)\n        1fr;\n    grid-template-areas: 'icon content';\n\n    gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n}\n\nslot {\n    grid-area: 'content';\n}\n\n.remove-dropdown-item:focus-visible,\n.dropdown-item: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\n:host(:not([disabled])) {\n    .remove-dropdown-item:hover,\n    .remove-dropdown-item:focus,\n    .dropdown-item:hover,\n    .dropdown-item:focus\n     {\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:hover,\n    .dropdown-item:focus {\n        color: var-list(--tct-dropdown-item-hover-color, var-prefixer(dropdown-item-selected-font-color), inherit);\n    }\n\n    .dropdown-item:focus,\n    .remove-dropdown-item: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\n.remove-dropdown-item {\n    flex: 0 0 44px;\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@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();\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\"\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                    {/* .icon is a placeholder to make the dd-item match the structure of option */}\n                    <div class=\"icon\"></div>\n                    <slot>{loc(this.innerLabel)}</slot>\n                </button>\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                        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=\"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/utils/mirror-emit.ts","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 { ComponentInterface, EventEmitter } from '@stencil/core';\n\n/**\n * Emits specified events from a given component context with the provided detail.\n *\n * @template T - The type of the event detail. Defaults to the type of `CustomEvent['detail']`.\n * @param context - The component context that contains the event emitters.\n * @param events - An array of event names to be emitted.\n * @param detail - The detail payload to be passed to each emitted event.\n */\nconst mirrorEmit = <T = CustomEvent['detail']>(context: ComponentInterface, events: Array<string>, detail: T) => {\n    events.forEach(event => {\n        const eventEntry = context[event] as EventEmitter<T>;\n        if (!eventEntry) return;\n        eventEntry.emit?.(detail);\n    });\n};\n\nexport default mirrorEmit;\n","@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@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();\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                        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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"}

package/dist/q2-tecton-elements/action-sheet-D3xPdhm8.js.map

@@ -1 +1 @@
-{"version":3,"file":"action-sheet-D3xPdhm8.js","sources":["src/utils/action-sheet.ts"],"sourcesContent":["import type {\n    ActionSheetSelectedOption,\n    ActionSheetListCloseData,\n    ActionSheetListData,\n    ActionSheetListOption,\n    ActionSheetListOptgroup,\n} from 'q2-tecton-common/lib/types/action-sheet';\n\ninterface IActionSheetComponent {\n    hoist: boolean;\n}\nexport const shouldShowActionSheet = (component: IActionSheetComponent, event?: KeyboardEvent | MouseEvent) => {\n    const isDialogSupported = 'open' in document.createElement('dialog');\n    if (!isDialogSupported) return false;\n\n    const canShowActionSheet = !!window.TectonElements?.showActionSheet;\n    if (!canShowActionSheet) return false;\n\n    const keysThatTriggerOpen = ['ArrowDown', 'ArrowUp', 'PageDown', 'PageUp', 'Home', 'End', 'Enter', ' '];\n    if (event) {\n        const eventIsKeyboardEvent = event instanceof KeyboardEvent;\n        const eventIsMouseEvent = event instanceof MouseEvent;\n        const keyboardEventShouldTriggerOpen = eventIsKeyboardEvent && keysThatTriggerOpen.includes(event.key);\n        const mouseEventShouldTriggerOpen = eventIsMouseEvent && event.type === 'click';\n        const eventShouldTriggerOpen = mouseEventShouldTriggerOpen || keyboardEventShouldTriggerOpen;\n        if (!eventShouldTriggerOpen) return false;\n    }\n\n    if (component.hoist) return true;\n    return false;\n};\n\nconst parseOptions = (options: (HTMLQ2OptgroupElement | HTMLQ2OptionElement | HTMLQ2DropdownItemElement)[]): any[] => {\n    const defaultOption = {\n        disabled: false,\n        separator: false,\n        display: '',\n        hidden: false,\n        multiline: false,\n        value: '',\n        innerHTML: '',\n    };\n    const optionPropsToGet = Object.keys(defaultOption);\n    const defaultOptgroup = {\n        disabled: false,\n        label: '',\n        options: [],\n    };\n    const optgroupPropsToGet = Object.keys(defaultOptgroup);\n    return options.map(option => {\n        if (option.tagName === 'Q2-OPTGROUP') {\n            const optgroup = option as HTMLQ2OptgroupElement;\n            return optgroupPropsToGet.reduce<ActionSheetListOptgroup>(\n                (acc, prop) => {\n                    if (prop === 'options') {\n                        const options = Array.from(option.children).filter(\n                            child => child.tagName === 'Q2-OPTION' || child.tagName === 'Q2-OPTGROUP'\n                        ) as HTMLQ2OptgroupElement[];\n\n                        acc[prop] = parseOptions(options);\n                    } else {\n                        acc[prop] = optgroup[prop];\n                    }\n                    return acc;\n                },\n                { ...defaultOptgroup }\n            );\n        } else if (option.tagName === 'Q2-OPTION' || option.tagName === 'Q2-DROPDOWN-ITEM') {\n            return optionPropsToGet.reduce<ActionSheetListOption>(\n                (acc, prop) => {\n                    if (option[prop] !== undefined) {\n                        acc[prop] = option[prop];\n                    }\n                    return acc;\n                },\n                { ...defaultOption }\n            );\n        }\n    });\n};\n\nexport const buildListData = async (\n    component: IActionSheetListComponent,\n    event?: MouseEvent | KeyboardEvent\n): Promise<ActionSheetListData> => {\n    return {\n        appearance: 'list',\n        title: component.label || '',\n        description: '',\n        event,\n        listProps: {\n            multiple: !!component.optionList.multiple,\n            selectedOptions: (component.optionList.selectedOptions as ActionSheetSelectedOption[]) || [],\n            noSelect: !!component.optionList.noSelect,\n        },\n        options: parseOptions(await component.optionList.getContents()),\n    };\n};\n\ninterface IActionSheetListComponent {\n    optionList: HTMLQ2OptionListElement;\n    label: string;\n}\nexport const showActionSheetList = async (\n    component: IActionSheetListComponent,\n    event?: MouseEvent | KeyboardEvent\n): Promise<ActionSheetListCloseData> => {\n    const listData = await buildListData(component, event);\n    return window.TectonElements?.showActionSheet(listData);\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"action-sheet-D3xPdhm8.js","sources":["src/utils/action-sheet.ts"],"sourcesContent":["import type {\n    ActionSheetSelectedOption,\n    ActionSheetListCloseData,\n    ActionSheetListData,\n    ActionSheetListOption,\n    ActionSheetListOptgroup,\n} from 'q2-tecton-common/lib/types/action-sheet';\n\ninterface IActionSheetComponent {\n    hoist: boolean;\n}\nexport const shouldShowActionSheet = (component: IActionSheetComponent, event?: KeyboardEvent | MouseEvent) => {\n    const isDialogSupported = 'open' in document.createElement('dialog');\n    if (!isDialogSupported) return false;\n\n    const canShowActionSheet = !!window.TectonElements?.showActionSheet;\n    if (!canShowActionSheet) return false;\n\n    const keysThatTriggerOpen = ['ArrowDown', 'ArrowUp', 'PageDown', 'PageUp', 'Home', 'End', 'Enter', ' '];\n    if (event) {\n        const eventIsKeyboardEvent = event instanceof KeyboardEvent;\n        const eventIsMouseEvent = event instanceof MouseEvent;\n        const keyboardEventShouldTriggerOpen = eventIsKeyboardEvent && keysThatTriggerOpen.includes(event.key);\n        const mouseEventShouldTriggerOpen = eventIsMouseEvent && event.type === 'click';\n        const eventShouldTriggerOpen = mouseEventShouldTriggerOpen || keyboardEventShouldTriggerOpen;\n        if (!eventShouldTriggerOpen) return false;\n    }\n\n    if (component.hoist) return true;\n    return false;\n};\n\nconst parseOptions = (options: (HTMLQ2OptgroupElement | HTMLQ2OptionElement | HTMLQ2DropdownItemElement)[]): any[] => {\n    const defaultOption = {\n        disabled: false,\n        separator: false,\n        display: '',\n        hidden: false,\n        multiline: false,\n        value: '',\n        innerHTML: '',\n    };\n    const optionPropsToGet = Object.keys(defaultOption);\n    const defaultOptgroup = {\n        disabled: false,\n        label: '',\n        options: [],\n    };\n    const optgroupPropsToGet = Object.keys(defaultOptgroup);\n    return options.map(option => {\n        if (option.tagName === 'Q2-OPTGROUP') {\n            const optgroup = option as HTMLQ2OptgroupElement;\n            return optgroupPropsToGet.reduce<ActionSheetListOptgroup>(\n                (acc, prop) => {\n                    if (prop === 'options') {\n                        const options = Array.from(option.children).filter(\n                            child => child.tagName === 'Q2-OPTION' || child.tagName === 'Q2-OPTGROUP'\n                        ) as HTMLQ2OptgroupElement[];\n\n                        acc[prop] = parseOptions(options);\n                    } else {\n                        acc[prop] = optgroup[prop];\n                    }\n                    return acc;\n                },\n                { ...defaultOptgroup }\n            );\n        } else if (option.tagName === 'Q2-OPTION' || option.tagName === 'Q2-DROPDOWN-ITEM') {\n            return optionPropsToGet.reduce<ActionSheetListOption>(\n                (acc, prop) => {\n                    if (option[prop] !== undefined) {\n                        acc[prop] = option[prop];\n                    }\n                    return acc;\n                },\n                { ...defaultOption }\n            );\n        }\n    });\n};\n\nexport const buildListData = async (\n    component: IActionSheetListComponent,\n    event?: MouseEvent | KeyboardEvent\n): Promise<ActionSheetListData> => {\n    return {\n        appearance: 'list',\n        title: component.label || '',\n        description: '',\n        event,\n        listProps: {\n            multiple: !!component.optionList.multiple,\n            selectedOptions: (component.optionList.selectedOptions as ActionSheetSelectedOption[]) || [],\n            noSelect: !!component.optionList.noSelect,\n        },\n        options: parseOptions(await component.optionList.getContents()),\n    };\n};\n\ninterface IActionSheetListComponent {\n    optionList: HTMLQ2OptionListElement;\n    label: string;\n}\nexport const showActionSheetList = async (\n    component: IActionSheetListComponent,\n    event?: MouseEvent | KeyboardEvent\n): Promise<ActionSheetListCloseData> => {\n    const listData = await buildListData(component, event);\n    return window.TectonElements?.showActionSheet(listData);\n};\n"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"q2-dropdown-item.entry.esm.js","sources":["src/utils/mirror-emit.ts","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 { ComponentInterface, EventEmitter } from '@stencil/core';\n\n/**\n * Emits specified events from a given component context with the provided detail.\n *\n * @template T - The type of the event detail. Defaults to the type of `CustomEvent['detail']`.\n * @param context - The component context that contains the event emitters.\n * @param events - An array of event names to be emitted.\n * @param detail - The detail payload to be passed to each emitted event.\n */\nconst mirrorEmit = <T = CustomEvent['detail']>(context: ComponentInterface, events: Array<string>, detail: T) => {\n    events.forEach(event => {\n        const eventEntry = context[event] as EventEmitter<T>;\n        if (!eventEntry) return;\n        eventEntry.emit?.(detail);\n    });\n};\n\nexport default mirrorEmit;\n","@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.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    display: flex;\n}\n\n.dropdown-item-button {\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}\n\n.dropdown-item {\n    --comp-default-dropdown-item-padding: var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);\n    --comp-selected-icon-size: #{var-list(var-prefixer(option-selected-icon-size), --tct-scale-3, --app-scale-3x, 15px)};\n    text-align: left;\n    width: 100%;\n    --comp-padding: #{0 var-list(--app-scale-2x, 10px)};\n    padding: var-list(var-prefixer(option-padding), --comp-padding);\n\n    color: var-list(var-prefixer(dropdown-item-font-color), inherit);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    cursor: pointer;\n\n    display: grid;\n    align-items: center;\n    grid-template-columns:\n        var(--comp-selected-icon-size)\n        1fr;\n    grid-template-areas: 'icon content';\n\n    gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n}\n\nslot {\n    grid-area: 'content';\n}\n\n.remove-dropdown-item:focus-visible,\n.dropdown-item: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\n:host(:not([disabled])) {\n    .remove-dropdown-item:hover,\n    .remove-dropdown-item:focus,\n    .dropdown-item:hover,\n    .dropdown-item:focus\n     {\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:hover,\n    .dropdown-item:focus {\n        color: var-list(--tct-dropdown-item-hover-color, var-prefixer(dropdown-item-selected-font-color), inherit);\n    }\n\n    .dropdown-item:focus,\n    .remove-dropdown-item: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\n.remove-dropdown-item {\n    flex: 0 0 44px;\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@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();\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\"\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                    {/* .icon is a placeholder to make the dd-item match the structure of option */}\n                    <div class=\"icon\"></div>\n                    <slot>{loc(this.innerLabel)}</slot>\n                </button>\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                        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=\"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.esm.js","sources":["src/utils/mirror-emit.ts","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 { ComponentInterface, EventEmitter } from '@stencil/core';\n\n/**\n * Emits specified events from a given component context with the provided detail.\n *\n * @template T - The type of the event detail. Defaults to the type of `CustomEvent['detail']`.\n * @param context - The component context that contains the event emitters.\n * @param events - An array of event names to be emitted.\n * @param detail - The detail payload to be passed to each emitted event.\n */\nconst mirrorEmit = <T = CustomEvent['detail']>(context: ComponentInterface, events: Array<string>, detail: T) => {\n    events.forEach(event => {\n        const eventEntry = context[event] as EventEmitter<T>;\n        if (!eventEntry) return;\n        eventEntry.emit?.(detail);\n    });\n};\n\nexport default mirrorEmit;\n","@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@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();\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                        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":";;;AAEA;;;;;;;AAOG;AACH,MAAM,UAAU,GAAG,CAA4B,OAA2B,EAAE,MAAqB,EAAE,MAAS,KAAI;AAC5G,IAAA,MAAM,CAAC,OAAO,CAAC,KAAK,IAAG;;AACnB,QAAA,MAAM,UAAU,GAAG,OAAO,CAAC,KAAK,CAAoB;AACpD,QAAA,IAAI,CAAC,UAAU;YAAE;AACjB,QAAA,CAAA,EAAA,GAAA,UAAU,CAAC,IAAI,MAAG,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAA,CAAA,UAAA,EAAA,MAAM,CAAC;AAC7B,KAAC,CAAC;AACN,CAAC;;AChBD,MAAM,iBAAiB,GAAG,k0IAAk0I;;MCiB/0I,cAAc,GAAA,MAAA;AAD3B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAoII,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;AAkEJ;;;IA1JG,iBAAiB,GAAA;QACb,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;AACL,QAAA,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE;;IAGhC,cAAc,GAAA;QACV,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE;;;;IAiD5C,aAAa,GAAA;QACT,QACI,WACI,KAAK,EAAE,CAAyB,sBAAA,EAAA,IAAI,CAAC,SAAS,GAAG,WAAW,GAAG,EAAE,CAAA,CAAE,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,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/q2-tecton-elements/q2-dropdown-item.entry.js

@@ -1,6 +1,6 @@
 import { r as t, c as o, h as e, g as r } from "./index-CGkHOjh1.js";
 
-import { l as i, d as a, o as n } from "./index-YJ5sXwiE.js";
+import { l as i, d as n, o as a } from "./index-YJ5sXwiE.js";
 
 /**
  * Emits specified events from a given component context with the provided detail.
@@ -18,9 +18,9 @@ import { l as i, d as a, o as n } from "./index-YJ5sXwiE.js";
   }));
 };
 
-const s = '*{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}.separator{--comp-default-separator-margin:0 var(--tct-scale-1, var(--app-scale-3x, 15px));margin:var(--tct-dropdown-separator-margin, var(--t-dropdown-separator-margin, var(--comp-default-separator-margin)));border-bottom:1px solid var(--tct-dropdown-item-separator-color, var(--t-gray-11, #cccccc))}.dropdown-item-wrapper{display:flex}.dropdown-item-button{--comp-dropdown-item-tween:var(--tct-tween-1, var(--app-tween-1, cubic-bezier(0.4, 0, 0.2, 1)));margin:var(--tct-scale-0, var(--app-scale-0x, 0));padding:var(--tct-scale-0, var(--app-scale-0x, 0));min-height:var(--tct-dropdown-item-min-height, 44px);min-width:44px;border:none;background:transparent;outline:0;transition:var(--tct-dropdown-item-tween, var(--comp-dropdown-item-tween));transition-property:background, color, box-shadow, fill, border-color, border-width}.dropdown-item-button:disabled{opacity:var(--tct-dropdown-item-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4)));cursor:not-allowed}.dropdown-item{--comp-default-dropdown-item-padding:var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);--comp-selected-icon-size:var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3x, 15px))));text-align:left;width:100%;--comp-padding:0 var(--app-scale-2x, 10px);padding:var(--tct-option-padding, var(--t-option-padding, var(--comp-padding)));color:var(--tct-dropdown-item-font-color, var(--t-dropdown-item-font-color, inherit));overflow:hidden;text-overflow:ellipsis;cursor:pointer;display:grid;align-items:center;grid-template-columns:var(--comp-selected-icon-size) 1fr;grid-template-areas:"icon content";gap:var(--tct-scale-1, var(--app-scale-1x, 5px))}slot{grid-area:"content"}.remove-dropdown-item:focus-visible,.dropdown-item:focus-visible{box-shadow:var(--tct-option-focus-box-shadow, var(--const-inset-double-focus-ring, inset var(--const-global-focus, 0 0 0 2px var(--const-focus-color, #0066CC)))) !important}:host(:not([disabled])) .remove-dropdown-item:hover,:host(:not([disabled])) .remove-dropdown-item:focus,:host(:not([disabled])) .dropdown-item:hover,:host(:not([disabled])) .dropdown-item:focus{background:var(--tct-dropdown-item-hover-background, var(--tct-dropdown-item-selected-bg, var(--t-dropdown-item-selected-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, var(--t-base, #f2f2f2))))))));color:var(--tct-option-active-color, inherit)}:host(:not([disabled])) .dropdown-item:hover,:host(:not([disabled])) .dropdown-item:focus{color:var(--tct-dropdown-item-hover-color, var(--tct-dropdown-item-selected-font-color, var(--t-dropdown-item-selected-font-color, inherit)))}:host(:not([disabled])) .dropdown-item:focus,:host(:not([disabled])) .remove-dropdown-item:focus{box-shadow:var(--tct-dropdown-item-focus-box-shadow, var(--const-inset-double-focus-ring, 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)))}.remove-dropdown-item{flex:0 0 44px}';
+const d = "*{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}.dropdown-separator{--comp-default-separator-margin:0 var(--tct-scale-1, var(--app-scale-3x, 15px));margin:var(--tct-dropdown-separator-margin, var(--t-dropdown-separator-margin, var(--comp-default-separator-margin)));border-bottom:1px solid var(--tct-dropdown-item-separator-color, var(--t-gray-11, #cccccc))}.dropdown-item-wrapper{--comp-selected-icon-size:var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3x, 15px))));--comp-default-dropdown-item-padding-x:var(--app-scale-2x, 10px);--comp-default-dropdown-item-padding-y:var(--app-scale-2x, 10px);--comp-default-dropdown-item-padding:var(--comp-default-dropdown-item-padding-y)\n      var(--comp-default-dropdown-item-padding-x);display:grid;align-items:center;gap:var(--tct-scale-1, var(--app-scale-1x, 5px));grid-template-columns:1fr;color:inherit}.dropdown-item-wrapper.removable{grid-template-columns:1fr auto}.dropdown-item-wrapper.removable .dropdown-item{padding-right:0}.dropdown-item-wrapper.removable .remove-dropdown-item{flex:0 0 44px}.dropdown-item-button{--comp-selected-icon-size:var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3x, 15px))));--comp-dropdown-item-tween:var(--tct-tween-1, var(--app-tween-1, cubic-bezier(0.4, 0, 0.2, 1)));margin:var(--tct-scale-0, var(--app-scale-0x, 0));padding:var(--tct-scale-0, var(--app-scale-0x, 0));min-height:var(--tct-dropdown-item-min-height, 44px);min-width:44px;border:none;background:transparent;outline:0;transition:var(--tct-dropdown-item-tween, var(--comp-dropdown-item-tween));transition-property:background, color, box-shadow, fill, border-color, border-width;cursor:pointer}.dropdown-item-button:disabled{opacity:var(--tct-dropdown-item-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4)));cursor:not-allowed}.dropdown-item{--comp-selected-icon-size:var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3x, 15px))));--comp-default-dropdown-item-padding-x:var(--app-scale-2x, 10px);width:100%;display:grid;align-items:center;justify-content:start;grid-template-columns:1fr;gap:var(--tct-scale-1, var(--app-scale-1x, 5px));min-height:var(--tct-dropdown-item-min-height, 44px);padding-left:var(--comp-default-dropdown-item-padding-x);padding-right:var(--comp-default-dropdown-item-padding-x);text-align:left;min-height:var(--tct-dropdown-item-min-height, 44px)}.dropdown-item-button:focus-visible{box-shadow:var(--tct-option-focus-box-shadow, var(--const-inset-double-focus-ring, inset var(--const-global-focus, 0 0 0 2px var(--const-focus-color, #0066CC)))) !important}.dropdown-item-btn-content{display:flex;justify-content:start;color:var(--tct-dropdown-item-font-color, var(--t-dropdown-item-font-color, inherit));overflow:hidden;text-overflow:ellipsis}:host(:not([disabled])) .dropdown-item-button:hover,:host(:not([disabled])) .dropdown-item-button:focus{background:var(--tct-dropdown-item-hover-background, var(--tct-dropdown-item-selected-bg, var(--t-dropdown-item-selected-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, var(--t-base, #f2f2f2))))))));color:var(--tct-option-active-color, inherit)}:host(:not([disabled])) .dropdown-item-button:hover,:host(:not([disabled])) .dropdown-item-button:focus{color:var(--tct-dropdown-item-hover-color, var(--tct-dropdown-item-selected-font-color, var(--t-dropdown-item-selected-font-color, inherit)))}:host(:not([disabled])) .dropdown-item-button:focus{box-shadow:var(--tct-dropdown-item-focus-box-shadow, var(--const-inset-double-focus-ring, 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)))}";
 
-const d = class {
+const s = class {
   constructor(e) {
     t(this, e);
     this.click = o(this, "click", 7);
@@ -60,12 +60,12 @@ const d = class {
   // #endregion
   // #region Component Lifecycle Events
   componentWillLoad() {
-    a(this);
+    n(this);
     this.q2LocValue = this.handleQ2LocValue();
   }
   componentDidLoad() {
     if (this.separator) return;
-    n(this.hostElement);
+    a(this.hostElement);
   }
   // #endregion
   // #region Listeners
@@ -77,7 +77,7 @@ const d = class {
   // #endregion
   // #region Watchers
   ariaLabelObserver() {
-    a(this);
+    n(this);
   }
   // #endregion
   // #region Local Methods
@@ -97,7 +97,7 @@ const d = class {
   // #region Render Methods
   renderItemDOM() {
     return e("div", {
-      class: "dropdown-item-wrapper",
+      class: `dropdown-item-wrapper ${this.removable ? "removable" : ""}`,
       role: "presentation"
     }, e("button", {
       ref: t => this.dropdownItemBtn = t,
@@ -111,8 +111,8 @@ const d = class {
       onFocus: this.onItemFocus,
       "test-id": "dropdownItem"
     }, e("div", {
-      class: "icon"
-    }), e("slot", null, i(this.innerLabel))), this.removable && e("button", {
+      class: "dropdown-item-btn-content"
+    }, e("slot", null, i(this.innerLabel)))), this.removable && e("button", {
       ref: t => this.removeBtn = t,
       class: "dropdown-item-button remove-dropdown-item",
       tabindex: "-1",
@@ -128,7 +128,7 @@ const d = class {
   }
   renderSeparatorDOM() {
     return e("div", {
-      class: "separator",
+      class: "dropdown-separator",
       "test-id": "dropdownItemSeparator",
       role: "separator"
     });
@@ -149,8 +149,8 @@ const d = class {
   }
 };
 
-d.style = s;
+s.style = d;
 
-export { d as q2_dropdown_item };
+export { s as q2_dropdown_item };
 //# sourceMappingURL=q2-dropdown-item.entry.esm.js.map
 //# sourceMappingURL=q2-dropdown-item.entry.js.map

package/dist/q2-tecton-elements/q2-dropdown-item.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["mirrorEmit","context","events","detail","forEach","event","eventEntry","_a","emit","call","q2DropdownItemCss","Q2DropdownItem","constructor","hostRef","this","handleQ2LocValue","locElement","hostElement","querySelector","value","loc","substitutions","innerText","onItemClick","stopImmediatePropagation","type","onItemFocus","stopPropagation","onItemKeydown","key","focusRemoveBtn","onRemoveBtnClick","onRemoveBtnFocus","onRemoveBtnKeydown","focusItem","componentWillLoad","handleAriaLabel","q2LocValue","componentDidLoad","separator","overrideFocus","onHostElementFocus","target","ariaLabelObserver","innerLabel","label","textContent","trim","removeLabel","dropdownItemBtn","focus","removeBtn","renderItemDOM","h","class","role","ref","el","tabindex","disabled","onClick","onKeyDown","onFocus","removable","renderSeparatorDOM","render"],"sources":["src/utils/mirror-emit.ts","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 { ComponentInterface, EventEmitter } from '@stencil/core';\n\n/**\n * Emits specified events from a given component context with the provided detail.\n *\n * @template T - The type of the event detail. Defaults to the type of `CustomEvent['detail']`.\n * @param context - The component context that contains the event emitters.\n * @param events - An array of event names to be emitted.\n * @param detail - The detail payload to be passed to each emitted event.\n */\nconst mirrorEmit = <T = CustomEvent['detail']>(context: ComponentInterface, events: Array<string>, detail: T) => {\n    events.forEach(event => {\n        const eventEntry = context[event] as EventEmitter<T>;\n        if (!eventEntry) return;\n        eventEntry.emit?.(detail);\n    });\n};\n\nexport default mirrorEmit;\n","@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.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    display: flex;\n}\n\n.dropdown-item-button {\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}\n\n.dropdown-item {\n    --comp-default-dropdown-item-padding: var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);\n    --comp-selected-icon-size: #{var-list(var-prefixer(option-selected-icon-size), --tct-scale-3, --app-scale-3x, 15px)};\n    text-align: left;\n    width: 100%;\n    --comp-padding: #{0 var-list(--app-scale-2x, 10px)};\n    padding: var-list(var-prefixer(option-padding), --comp-padding);\n\n    color: var-list(var-prefixer(dropdown-item-font-color), inherit);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    cursor: pointer;\n\n    display: grid;\n    align-items: center;\n    grid-template-columns:\n        var(--comp-selected-icon-size)\n        1fr;\n    grid-template-areas: 'icon content';\n\n    gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n}\n\nslot {\n    grid-area: 'content';\n}\n\n.remove-dropdown-item:focus-visible,\n.dropdown-item: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\n:host(:not([disabled])) {\n    .remove-dropdown-item:hover,\n    .remove-dropdown-item:focus,\n    .dropdown-item:hover,\n    .dropdown-item:focus\n     {\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:hover,\n    .dropdown-item:focus {\n        color: var-list(--tct-dropdown-item-hover-color, var-prefixer(dropdown-item-selected-font-color), inherit);\n    }\n\n    .dropdown-item:focus,\n    .remove-dropdown-item: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\n.remove-dropdown-item {\n    flex: 0 0 44px;\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@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();\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\"\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                    {/* .icon is a placeholder to make the dd-item match the structure of option */}\n                    <div class=\"icon\"></div>\n                    <slot>{loc(this.innerLabel)}</slot>\n                </button>\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                        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=\"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"],"mappings":";;;;;;;;;;;GAUA,OAAMA,aAAa,CAA4BC,GAA6BC,GAAuBC;EAC/FD,EAAOE,SAAQC;;IACX,MAAMC,IAAaL,EAAQI;IAC3B,KAAKC,GAAY;KACjBC,IAAAD,EAAWE,UAAO,QAAAD,WAAA,aAAAA,EAAAE,KAAAH,GAAAH;AAAO;AAC3B;;ACfN,MAAMO,IAAoB;;MCiBbC,IAAc;EAD3B,WAAAC,CAAAC;;;;IAoIIC,KAAgBC,mBAAG;MACf,MAAMC,IAAaF,KAAKG,YAAYC,cAAc;MAClD,KAAKF,GAAY,OAAO;MAExB,OAAOA,EAAWG,QACZC,EAAIJ,EAAWG,OAAOH,EAAWK,iBACjCD,EAAIJ,EAAWM,WAAWN,EAAWK;AAAc;IAG7DP,KAAAS,cAAelB;MACXA,EAAMmB;MAENxB,WAAWc,MAAM,EAAC,SAAS,cAAa;QACpCW,MAAM;QACNN,OAAOL,KAAKK,SAAS;;AACvB;IAGNL,KAAAY,cAAerB;MACXA,EAAMsB;AAAiB;IAG3Bb,KAAAc,gBAAiBvB;MACb,IAAIA,EAAMwB,QAAQ,cAAcf,KAAKgB;AAAgB;IAGzDhB,KAAAiB,mBAAoB1B;MAChBA,EAAMmB;MAENxB,WAAWc,MAAM,EAAC,SAAS,cAAa;QACpCW,MAAM;QACNN,OAAOL,KAAKK,SAAS;;AACvB;IAGNL,KAAAkB,mBAAoB3B;MAChBA,EAAMsB;AAAiB;IAG3Bb,KAAAmB,qBAAsB5B;MAClB,IAAIA,EAAMwB,QAAQ,aAAaf,KAAKoB;AAAW;AAkEtD;;;EAzJG,iBAAAC;IACIC,EAAgBtB;IAChBA,KAAKuB,aAAavB,KAAKC;;EAG3B,gBAAAuB;IACI,IAAIxB,KAAKyB,WAAW;IACpBC,EAAc1B,KAAKG;;;;EAOvB,kBAAAwB,CAAmBpC;IACf,IAAIA,EAAMqC,WAAW5B,KAAKG,aAAa;MACnCH,KAAKoB;;;;;EAQb,iBAAAS;IACIP,EAAgBtB;;;;EAMpB,cAAI8B;IACA,OAAO9B,KAAK+B,SAAS/B,KAAKG,YAAY6B,YAAYC,UAAUjC,KAAKuB;;EAGrE,eAAIW;IACA,OAAO5B,EAAI,sCAAsC,EAACN,KAAK8B,cAAc;;EAGzE,SAAAV;IACIpB,KAAKmC,gBAAgBC;;EAGzB,cAAApB;IACIhB,KAAKqC,aAAarC,KAAKqC,UAAUD;;;;EAiDrC,aAAAE;IACI,OACIC,EAAA;MACIC,OAAM;MACNC,MAAK;OAELF,EACI;MAAAG,KAAKC,KAAO3C,KAAKmC,kBAAkBQ;MAAG,cAC1BrC,EAAIN,KAAK8B;MACrBU,OAAM;MACNI,UAAS;MACTC,UAAU7C,KAAK6C;MACfJ,MAAK;MACLK,SAAS9C,KAAKS;MACdsC,WAAW/C,KAAKc;MAChBkC,SAAShD,KAAKY;MAAW,WACjB;OAGR2B,EAAK;MAAAC,OAAM;QACXD,EAAA,cAAOjC,EAAIN,KAAK8B,eAEnB9B,KAAKiD,aACFV,EAAA;MACIG,KAAKC,KAAO3C,KAAKqC,YAAYM;MAC7BH,OAAM;MACNI,UAAS;MAAI,cACD5C,KAAKkC;MACjBW,UAAU7C,KAAK6C;MACfC,SAAS9C,KAAKiB;MACd8B,WAAW/C,KAAKmB;MAChB6B,SAAShD,KAAKkB;MAAgB,WACtB;OAERqB,EAAS;MAAA5B,MAAK;;;EAOlC,kBAAAuC;IACI,OACIX,EAAA;MACIC,OAAM;MAAW,WACT;MACRC,MAAK;;;EAKjB,MAAAU;IACI,IAAInD,KAAKyB,WAAW;MAChB,OAAOzB,KAAKkD;;IAGhB,OAAOlD,KAAKsC","ignoreList":[]}
+{"version":3,"names":["mirrorEmit","context","events","detail","forEach","event","eventEntry","_a","emit","call","q2DropdownItemCss","Q2DropdownItem","constructor","hostRef","this","handleQ2LocValue","locElement","hostElement","querySelector","value","loc","substitutions","innerText","onItemClick","stopImmediatePropagation","type","onItemFocus","stopPropagation","onItemKeydown","key","focusRemoveBtn","onRemoveBtnClick","onRemoveBtnFocus","onRemoveBtnKeydown","focusItem","componentWillLoad","handleAriaLabel","q2LocValue","componentDidLoad","separator","overrideFocus","onHostElementFocus","target","ariaLabelObserver","innerLabel","label","textContent","trim","removeLabel","dropdownItemBtn","focus","removeBtn","renderItemDOM","h","class","removable","role","ref","el","tabindex","disabled","onClick","onKeyDown","onFocus","renderSeparatorDOM","render"],"sources":["src/utils/mirror-emit.ts","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 { ComponentInterface, EventEmitter } from '@stencil/core';\n\n/**\n * Emits specified events from a given component context with the provided detail.\n *\n * @template T - The type of the event detail. Defaults to the type of `CustomEvent['detail']`.\n * @param context - The component context that contains the event emitters.\n * @param events - An array of event names to be emitted.\n * @param detail - The detail payload to be passed to each emitted event.\n */\nconst mirrorEmit = <T = CustomEvent['detail']>(context: ComponentInterface, events: Array<string>, detail: T) => {\n    events.forEach(event => {\n        const eventEntry = context[event] as EventEmitter<T>;\n        if (!eventEntry) return;\n        eventEntry.emit?.(detail);\n    });\n};\n\nexport default mirrorEmit;\n","@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@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();\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                        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"],"mappings":";;;;;;;;;;;GAUA,OAAMA,aAAa,CAA4BC,GAA6BC,GAAuBC;EAC/FD,EAAOE,SAAQC;;IACX,MAAMC,IAAaL,EAAQI;IAC3B,KAAKC,GAAY;KACjBC,IAAAD,EAAWE,UAAO,QAAAD,WAAA,aAAAA,EAAAE,KAAAH,GAAAH;AAAO;AAC3B;;ACfN,MAAMO,IAAoB;;MCiBbC,IAAc;EAD3B,WAAAC,CAAAC;;;;IAoIIC,KAAgBC,mBAAG;MACf,MAAMC,IAAaF,KAAKG,YAAYC,cAAc;MAClD,KAAKF,GAAY,OAAO;MAExB,OAAOA,EAAWG,QACZC,EAAIJ,EAAWG,OAAOH,EAAWK,iBACjCD,EAAIJ,EAAWM,WAAWN,EAAWK;AAAc;IAG7DP,KAAAS,cAAelB;MACXA,EAAMmB;MAENxB,WAAWc,MAAM,EAAC,SAAS,cAAa;QACpCW,MAAM;QACNN,OAAOL,KAAKK,SAAS;;AACvB;IAGNL,KAAAY,cAAerB;MACXA,EAAMsB;AAAiB;IAG3Bb,KAAAc,gBAAiBvB;MACb,IAAIA,EAAMwB,QAAQ,cAAcf,KAAKgB;AAAgB;IAGzDhB,KAAAiB,mBAAoB1B;MAChBA,EAAMmB;MAENxB,WAAWc,MAAM,EAAC,SAAS,cAAa;QACpCW,MAAM;QACNN,OAAOL,KAAKK,SAAS;;AACvB;IAGNL,KAAAkB,mBAAoB3B;MAChBA,EAAMsB;AAAiB;IAG3Bb,KAAAmB,qBAAsB5B;MAClB,IAAIA,EAAMwB,QAAQ,aAAaf,KAAKoB;AAAW;AAmEtD;;;EA1JG,iBAAAC;IACIC,EAAgBtB;IAChBA,KAAKuB,aAAavB,KAAKC;;EAG3B,gBAAAuB;IACI,IAAIxB,KAAKyB,WAAW;IACpBC,EAAc1B,KAAKG;;;;EAOvB,kBAAAwB,CAAmBpC;IACf,IAAIA,EAAMqC,WAAW5B,KAAKG,aAAa;MACnCH,KAAKoB;;;;;EAQb,iBAAAS;IACIP,EAAgBtB;;;;EAMpB,cAAI8B;IACA,OAAO9B,KAAK+B,SAAS/B,KAAKG,YAAY6B,YAAYC,UAAUjC,KAAKuB;;EAGrE,eAAIW;IACA,OAAO5B,EAAI,sCAAsC,EAACN,KAAK8B,cAAc;;EAGzE,SAAAV;IACIpB,KAAKmC,gBAAgBC;;EAGzB,cAAApB;IACIhB,KAAKqC,aAAarC,KAAKqC,UAAUD;;;;EAiDrC,aAAAE;IACI,OACIC,EAAA;MACIC,OAAO,yBAAyBxC,KAAKyC,YAAY,cAAc;MAC/DC,MAAK;OAELH,EACI;MAAAI,KAAKC,KAAO5C,KAAKmC,kBAAkBS;MAAG,cAC1BtC,EAAIN,KAAK8B;MACrBU,OAAM;MACNK,UAAS;MACTC,UAAU9C,KAAK8C;MACfJ,MAAK;MACLK,SAAS/C,KAAKS;MACduC,WAAWhD,KAAKc;MAChBmC,SAASjD,KAAKY;MAAW,WACjB;OAER2B,EAAK;MAAAC,OAAM;OACPD,EAAO,cAAAjC,EAAIN,KAAK8B,gBAIvB9B,KAAKyC,aACFF,EAAA;MACII,KAAKC,KAAO5C,KAAKqC,YAAYO;MAC7BJ,OAAM;MACNK,UAAS;MAAI,cACD7C,KAAKkC;MACjBY,UAAU9C,KAAK8C;MACfC,SAAS/C,KAAKiB;MACd+B,WAAWhD,KAAKmB;MAChB8B,SAASjD,KAAKkB;MAAgB,WACtB;OAERqB,EAAS;MAAA5B,MAAK;;;EAOlC,kBAAAuC;IACI,OACIX,EAAA;MACIC,OAAM;MAAoB,WAClB;MACRE,MAAK;;;EAKjB,MAAAS;IACI,IAAInD,KAAKyB,WAAW;MAChB,OAAOzB,KAAKkD;;IAGhB,OAAOlD,KAAKsC","ignoreList":[]}

package/dist/q2-tecton-elements/q2-tecton-elements.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-tecton-elements.esm.js","sources":["../../node_modules/.pnpm/@stencil+core@4.32.0/node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.32.0 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, H, promiseResolve, win } from \"@stencil/core\";\nvar patchBrowser = () => {\n  if (BUILD.isDev && !BUILD.isTesting) {\n    consoleDevInfo(\"Running in development mode.\");\n  }\n  if (BUILD.cloneNodeFix) {\n    patchCloneNodeFix(H.prototype);\n  }\n  const scriptElm = BUILD.scriptDataOpts ? win.document && Array.from(win.document.querySelectorAll(\"script\")).find(\n    (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n  ) : null;\n  const importMeta = import.meta.url;\n  const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n  if (importMeta !== \"\") {\n    opts.resourcesUrl = new URL(\".\", importMeta).href;\n  }\n  return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n  const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n  HTMLElementPrototype.cloneNode = function(deep) {\n    if (this.nodeName === \"TEMPLATE\") {\n      return nativeCloneNodeFn.call(this, deep);\n    }\n    const clonedNode = nativeCloneNodeFn.call(this, false);\n    const srcChildNodes = this.childNodes;\n    if (deep) {\n      for (let i = 0; i < srcChildNodes.length; i++) {\n        if (srcChildNodes[i].nodeType !== 2) {\n          clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n        }\n      }\n    }\n    return clonedNode;\n  };\n};\nexport {\n  patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n  await globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"names":[],"mappings":";;;;AAAA;AACA;AACA;;AAKA,IAAI,YAAY,GAAG,MAAM;AACzB,EAAE,IAAI,KAAK,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE;AACvC,IAAI,cAAc,CAAC,8BAA8B,CAAC;AAClD;AACA,EAAE,IAAI,KAAK,CAAC,YAAY,EAAE;AAC1B,IAAI,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC;AAClC;AACA,EAAE,MAAM,SAAS,GAAG,KAAK,CAAC,cAAc,GAAG,GAAG,CAAC,QAAQ,IAAI,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI;AACnH,IAAI,CAAC,CAAC,KAAK,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,uBAAuB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,YAAY,CAAC,wBAAwB,CAAC,KAAK;AAC1H,GAAG,GAAG,IAAI;AACV,EAAE,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG;AACpC,EAAE,MAAM,IAAI,GAAG,KAAK,CAAC,cAAc,GAAG,CAAC,SAAS,IAAI,EAAE,EAAE,WAAW,CAAC,IAAI,EAAE,GAAG,EAAE;AAC/E,EAAE,IAAI,UAAU,KAAK,EAAE,EAAE;AACzB,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI;AACrD;AACA,EAAE,OAAO,cAAc,CAAC,IAAI,CAAC;AAC7B,CAAC;AACD,IAAI,iBAAiB,GAAG,CAAC,oBAAoB,KAAK;AAClD,EAAE,MAAM,iBAAiB,GAAG,oBAAoB,CAAC,SAAS;AAC1D,EAAE,oBAAoB,CAAC,SAAS,GAAG,SAAS,IAAI,EAAE;AAClD,IAAI,IAAI,IAAI,CAAC,QAAQ,KAAK,UAAU,EAAE;AACtC,MAAM,OAAO,iBAAiB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC;AAC/C;AACA,IAAI,MAAM,UAAU,GAAG,iBAAiB,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC;AAC1D,IAAI,MAAM,aAAa,GAAG,IAAI,CAAC,UAAU;AACzC,IAAI,IAAI,IAAI,EAAE;AACd,MAAM,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AACrD,QAAQ,IAAI,aAAa,CAAC,CAAC,CAAC,CAAC,QAAQ,KAAK,CAAC,EAAE;AAC7C,UAAU,UAAU,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;AAClE;AACA;AACA;AACA,IAAI,OAAO,UAAU;AACrB,GAAG;AACH,CAAC;;ACrCD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK;AACvC,EAAE,MAAM,aAAa,EAAE;AACvB,EAAE,OAAO,aAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC;AAC7D,CAAC,CAAC","x_google_ignoreList":[0]}
+{"version":3,"file":"q2-tecton-elements.esm.js","sources":["../../node_modules/.pnpm/@stencil+core@4.32.0/node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.32.0 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, H, promiseResolve, win } from \"@stencil/core\";\nvar patchBrowser = () => {\n  if (BUILD.isDev && !BUILD.isTesting) {\n    consoleDevInfo(\"Running in development mode.\");\n  }\n  if (BUILD.cloneNodeFix) {\n    patchCloneNodeFix(H.prototype);\n  }\n  const scriptElm = BUILD.scriptDataOpts ? win.document && Array.from(win.document.querySelectorAll(\"script\")).find(\n    (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n  ) : null;\n  const importMeta = import.meta.url;\n  const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n  if (importMeta !== \"\") {\n    opts.resourcesUrl = new URL(\".\", importMeta).href;\n  }\n  return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n  const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n  HTMLElementPrototype.cloneNode = function(deep) {\n    if (this.nodeName === \"TEMPLATE\") {\n      return nativeCloneNodeFn.call(this, deep);\n    }\n    const clonedNode = nativeCloneNodeFn.call(this, false);\n    const srcChildNodes = this.childNodes;\n    if (deep) {\n      for (let i = 0; i < srcChildNodes.length; i++) {\n        if (srcChildNodes[i].nodeType !== 2) {\n          clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n        }\n      }\n    }\n    return clonedNode;\n  };\n};\nexport {\n  patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n  await globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"names":[],"mappings":";;;;AAAA;AACA;AACA;;AAKA,IAAI,YAAY,GAAG,MAAM;AAUzB,EAAE,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG;AACpC,EAAE,MAAM,IAAI,GAAiE,EAAE;AAC/E,EAAE,IAAI,UAAU,KAAK,EAAE,EAAE;AACzB,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI;AACrD;AACA,EAAE,OAAO,cAAc,CAAC,IAAI,CAAC;AAC7B,CAAC;;ACnBD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK;AACvC,EAAE,MAAM,aAAa,EAAE;AACvB,EAAE,OAAO,aAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC;AAC7D,CAAC,CAAC","x_google_ignoreList":[0]}

package/package.json

@@ -1,67 +1,65 @@
 {
-    "name": "q2-tecton-elements",
-    "version": "1.64.0",
-    "description": "Q2 Tecton Custom Elements",
-    "license": "MIT",
-    "author": "Q2 Tecton Team",
-    "main": "dist/index.js",
-    "module": "dist/index.mjs",
-    "types": "dist/types/components.d.ts",
-    "collection": "dist/collection/collection-manifest.json",
-    "collection:main": "dist/collection/index.js",
-    "files": [
-        "dist/"
-    ],
-    "publishConfig": {
-        "access": "public"
-    },
-    "scripts": {
-        "build": "stencil build --debug && node ../../build/create-theme-files.js",
-        "build:dev": "stencil build --debug && node ../../build/create-theme-files.js",
-        "build:docs-json": "stencil build --docs-json dist/docs.json",
-        "build:elements": "stencil build",
-        "build:local": "stencil build --dev --watch --serve",
-        "build:linked": "stencil build --watch --serve",
-        "build:network": "stencil build --dev --watch --serve --host 0.0.0.0",
-        "build:prerelease": "stencil build --debug && node ../../build/create-theme-files.js",
-        "build:prod": "stencil build --debug && node ../../build/create-theme-files.js",
-        "clean": "rm -rf dist tmp",
-        "nom": "rm -rf node_modules",
-        "lint": "eslint --config eslint.config.cli.mjs .",
-        "lint:fix": "eslint --fix --config eslint.config.cli.mjs .",
-        "problems": "tsc --noEmit",
-        "style": "node scripts/runApplyStyleGuide.js",
-        "style:fix": "node scripts/runApplyStyleGuide.js --fix",
-        "test:new": "stencil test --spec --e2e --silent --maxWorkers=0 --runInBand -- --json --outputFile=./test-reports-band-1.json",
-        "test": "stencil test --spec --e2e --silent --maxWorkers=0 --runInBand",
-        "test:accessibility-report": "stencil test --e2e --silent --maxWorkers=0 --runInBand --testNamePattern=ridiculousonpurpose -- --json --outputFile=../docs/src/data/accessibility-report.json",
-        "test:ci": "stencil test --spec --e2e --silent --maxWorkers=0 --runInBand",
-        "test:dev": "stencil test --spec --e2e --maxWorkers=0 --runInBand --watchAll"
-    },
-    "dependencies": {
-        "@stencil/core": "~4.32.0",
-        "q2-tecton-common": "workspace:*",
-        "swiper": "8.4.4"
-    },
-    "devDependencies": {
-        "@figma/code-connect": "^1.3.12",
-        "@stencil-community/eslint-plugin": "^0.8.0",
-        "@stencil/react-output-target": "^0.5.3",
-        "@stencil/sass": "3.0.12",
-        "@stencil/vue-output-target": "^0.8.8",
-        "@types/eslint__js": "^8.42.3",
-        "@types/jest": "^29.5.12",
-        "axe-core": "^4.10.3",
-        "cross-env": "^7.0.3",
-        "date-fns": "^3.6.0",
-        "dompurify": "^3.2.4",
-        "echarts": "^5.5.1",
-        "fast-glob": "^3.3.2",
-        "jest-cli": "^29.7.0",
-        "jscodeshift": "^17.0.0",
-        "minimist": "^1.2.8",
-        "puppeteer": "^24.11.1"
-    },
-    "packageManager": "pnpm@10.27.0",
-    "gitHead": "70e23e3b7d6680a31be8abeceee5836b01fb86d2"
-}
+  "name": "q2-tecton-elements",
+  "version": "1.64.2",
+  "description": "Q2 Tecton Custom Elements",
+  "license": "MIT",
+  "author": "Q2 Tecton Team",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/types/components.d.ts",
+  "collection": "dist/collection/collection-manifest.json",
+  "collection:main": "dist/collection/index.js",
+  "files": [
+    "dist/"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@stencil/core": "~4.32.0",
+    "swiper": "8.4.4",
+    "q2-tecton-common": "1.64.2"
+  },
+  "devDependencies": {
+    "@figma/code-connect": "^1.3.12",
+    "@stencil-community/eslint-plugin": "^0.8.0",
+    "@stencil/react-output-target": "^0.5.3",
+    "@stencil/sass": "3.0.12",
+    "@stencil/vue-output-target": "^0.8.8",
+    "@types/eslint__js": "^8.42.3",
+    "@types/jest": "^29.5.12",
+    "axe-core": "^4.10.3",
+    "cross-env": "^7.0.3",
+    "date-fns": "^3.6.0",
+    "dompurify": "^3.2.4",
+    "echarts": "^5.5.1",
+    "fast-glob": "^3.3.2",
+    "jest-cli": "^29.7.0",
+    "jscodeshift": "^17.0.0",
+    "minimist": "^1.2.8",
+    "puppeteer": "^24.11.1"
+  },
+  "scripts": {
+    "build": "stencil build --debug && node ../../build/create-theme-files.js",
+    "build:dev": "stencil build --debug && node ../../build/create-theme-files.js",
+    "build:docs-json": "stencil build --docs-json dist/docs.json",
+    "build:elements": "stencil build",
+    "build:local": "stencil build --dev --watch --serve",
+    "build:linked": "stencil build --watch --serve",
+    "build:network": "stencil build --dev --watch --serve --host 0.0.0.0",
+    "build:prerelease": "stencil build --debug && node ../../build/create-theme-files.js",
+    "build:prod": "stencil build --debug && node ../../build/create-theme-files.js",
+    "clean": "rm -rf dist tmp",
+    "nom": "rm -rf node_modules",
+    "lint": "eslint --config eslint.config.cli.mjs .",
+    "lint:fix": "eslint --fix --config eslint.config.cli.mjs .",
+    "problems": "tsc --noEmit",
+    "style": "node scripts/runApplyStyleGuide.js",
+    "style:fix": "node scripts/runApplyStyleGuide.js --fix",
+    "test:new": "stencil test --spec --e2e --silent --maxWorkers=0 --runInBand -- --json --outputFile=./test-reports-band-1.json",
+    "test": "stencil test --spec --e2e --silent --maxWorkers=0 --runInBand",
+    "test:accessibility-report": "stencil test --e2e --silent --maxWorkers=0 --runInBand --testNamePattern=ridiculousonpurpose -- --json --outputFile=../docs/src/data/accessibility-report.json",
+    "test:ci": "stencil test --spec --e2e --silent --maxWorkers=0 --runInBand",
+    "test:dev": "stencil test --spec --e2e --maxWorkers=0 --runInBand --watchAll"
+  }
+}