q2-tecton-elements 1.52.1 → 1.52.2

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

@@ -1 +1 @@
-{"version":3,"names":["q2DropdownCss","Q2DropdownStyle0","Q2Dropdown","this","dropdownItemSelector","closeDropdown","open","focusFirstItem","async","firstItem","hostElement","querySelector","waitForNextPaint","dispatchEvent","FocusEvent","focusLastItem","lastItem","focusToggle","controlElement","focus","onClickElsewhere","event","target","localName","stopPropagation","popoverElement","onDropdownMenuClick","item","disabled","separator","onDropdownMenuKeydown","key","preventDefault","focusAdjacentItem","onToggleClick","openDropdown","onToggleKeydown","componentWillLoad","popDirectionHandler","alignmentHandler","ariaLabelHandler","componentDidLoad","orchestrateResolvedMenuItems","overrideFocus","delegateFocus","isEventFromElement","popoverStateHandler","detail","_a","scrollContainerTo","top","closePopover","_togglePopover","openPopover","selectItem","value","itemBtn","shadowRoot","click","selectRemoveItem","removeButton","additionalContextHandler","handleRenamedProp","handleAriaLabel","contextHandler","contextValueHandler","nameHandler","resolvedTypeHandler","determineDropdownItemCount","querySelectorAll","length","hasCustomControl","toggleButtonProps","allowedIntents","allowedTypes","type","includes","icon","fab","custom","intent","active","ariaExpanded","className","activeItem","direction","dropdownItems","Array","from","activeIndex","indexOf","targetIndex","targetItem","Event","navigateTo","featureName","moduleName","queryParams","_b","window","TectonElements","call","name","context","removeResolvedElements","resolveMenuItemElements","then","data","forEach","element","appendChild","catch","err","resolvedElements","removeChild","resolveMenu","contextValue","resolvedType","additionalContext","datas","map","menuItemData","onClickFn","contextIdParamName","action","showOverpanel","newDropdownItem","document","createElement","setAttribute","itemLabel","classList","add","textContent","onclick","overpanelPath","params","undefined","render","btnProps","h","class","onChange","ref","el","onClick","onKeyDown","label","hideLabel","loc","ariaHasPopup","block","description","Fragment","popoverMaxHeight","minHeight","popoverMinHeight","popoverDirection","align","popoverAlignment","mode","popoverMode","role"],"sources":["src/components/q2-dropdown/q2-dropdown.scss?tag=q2-dropdown&encapsulation=shadow","src/components/q2-dropdown/q2-dropdown.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-flex;\n}\n\n:host([block]) {\n    display: block;\n}\n\nq2-icon {\n    pointer-events: none;\n    margin-block: -100px;\n}\n\nclick-elsewhere {\n    position: relative;\n    display: block;\n}\n\nq2-popover {\n    --tct-popover-min-width: #{var-list(var-prefixer(dropdown-width))};\n}\n","import { Component, ComponentInterface, Prop, Element, Watch, Method, h, Fragment, Listen, State } from '@stencil/core';\nimport { IDict } from 'src/util';\nimport {\n    handleAriaLabel,\n    handleRenamedProp,\n    isEventFromElement,\n    loc,\n    overrideFocus,\n    waitForNextPaint,\n} from 'src/utils';\n\n@Component({ tag: 'q2-dropdown', shadow: true, styleUrl: 'q2-dropdown.scss' })\nexport class Q2Dropdown implements ComponentInterface {\n    // #region Own Properties\n\n    dropdownItemSelector: string = 'q2-dropdown-item:not([disabled]):not([separator])';\n    popoverElement?: HTMLQ2PopoverElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    controlElement?: HTMLQ2BtnElement;\n\n    // #endregion\n    // #region Public Property API\n\n    @Prop({ reflect: true })\n    additionalContext: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true })\n    alignment: 'left' | 'right';\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    /** If `true`, component expands to fill the width of its parent element. */\n    @Prop({ reflect: true })\n    block: boolean;\n\n    /**\n     * Tells the outlet what the type of object being passed in as contextValue.\n     * This will allow for the hierarchy resolution logic to work to determine if an option should or should not be shown.\n     *\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true })\n    context: string;\n\n    /**\n     * Passes important information to the outlet (e.g., pass an account id that your platform can use to look up what module to show for that account type).\n     *\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true })\n    contextValue: string;\n\n    /** Indicates the menu cannot be focused or interacted with. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * Hide's the field's `<label>` element from view.\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true })\n    hideLabel: boolean;\n\n    /** The icon that will render within the toggle button. You may use any of the `q2-icon` types. */\n    @Prop({ reflect: true })\n    icon: string;\n\n    /**\n     * The text that appears within the button.\n     * @warning\n     * This property should not be used if the `type` is `icon`.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string;\n\n    /**\n     * Identifies this menu as an outlet. Used in conjunction with context and, optionally, `contextValue`.\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true })\n    name: string;\n\n    /** Determine whether the popover is open or closed. */\n    @Prop({ reflect: true, mutable: true })\n    open: boolean;\n\n    /** @deprecated */\n    @Prop({ reflect: true })\n    popDirection: 'up' | 'down';\n\n    /** Aligns the popover dropdown to the left or right side of the input field. */\n    @Prop({ mutable: true })\n    popoverAlignment: 'left' | 'right' = 'left'; // being used in dropdown.scss\n\n    /**\n     * Force the direction of the popover dropdown when it opens.\n     * If no value is passed, the component will auto-detect the direction based on available space.\n     */\n    @Prop({ mutable: true })\n    popoverDirection: 'up' | 'down';\n\n    /**\n     * Force the maximum height of the popover. This value will be interpreted as pixels.\n     * If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.\n     */\n    @Prop()\n    popoverMaxHeight: number;\n\n    /** @deprecated */\n    @Prop()\n    popoverMinHeight: number;\n\n    /**\n     * Determines the display mode of the popover.\n     *\n     * Providing a value of `legacy` instructs the popover to use absolute positioning instead of fixed positioning.\n     *\n     * @info\n     * This is a temporary solution to work around styling issues related to using fixed positioning for the popover\n     * when nested inside of elements with transform properties. This will be removed once the popover API is available\n     * for use.\n     */\n    @Prop({ mutable: true })\n    popoverMode: 'legacy' = null;\n\n    /**\n     * Use with `context` to tell the outlet where it appears. It will be matched with the appropriately configured module for that context.\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true })\n    resolvedType: string;\n\n    /** The type of button used as the menu toggle.\n     * @info\n     * Type must be \"custom\" to use the custom button slot.\n     */\n    @Prop({ reflect: true })\n    type: 'icon' | 'fab' | 'custom' | 'primary' | 'secondary' | 'neutral' = 'icon';\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        this.popDirectionHandler();\n        this.alignmentHandler();\n        this.ariaLabelHandler();\n    }\n\n    componentDidLoad() {\n        this.orchestrateResolvedMenuItems();\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.focusToggle();\n    }\n\n    @Listen('popoverStateChanged')\n    popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n        if (this.open !== open) this.open = open;\n        this.popoverElement?.scrollContainerTo({ top: 0 });\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking the dropdown `<button>` to hide the popover if it is showing.\n     * @testOnly\n     */\n    @Method()\n    async closePopover() {\n        if (!this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates clicking the dropdown `<button>` to show the popover if it is hidden.\n     * @testOnly\n     */\n    @Method()\n    async openPopover() {\n        if (this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates opening the dropdown and selecting a [Dropdown Item](https://tecton.q2developer.com/design-system/q2-dropdown-item/).\n     *\n     * If the dropdown is closed, this will open it before selecting the item.\n     *\n     * If the value does not match any item's value, this method does nothing.\n     * @testOnly\n     */\n    @Method()\n    async selectItem(value: string) {\n        const item = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}[value=\"${value}\"]`\n        );\n        const itemBtn = item?.shadowRoot.querySelector<HTMLButtonElement>('.dropdown-item');\n        if (!item || this.disabled) return;\n        if (!this.open) {\n            this.controlElement?.click();\n            await waitForNextPaint();\n        }\n        itemBtn.click();\n        await waitForNextPaint();\n    }\n\n    /**\n     * Emulates opening the dropdown and selecting a [Dropdown Item](https://tecton.q2developer.com/design-system/q2-dropdown-item/)'s *remove* button.\n     *\n     * If the dropdown is closed, this will open it before selecting the remove item button.\n     *\n     * Requirements for this method to work properly:\n     * - Provided `value` matches the item's `value` property\n     * - Item has the `removable` property enabled\n     * @testOnly\n     */\n    @Method()\n    async selectRemoveItem(value: string) {\n        const item = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}[value=\"${value}\"]`\n        );\n        const removeButton = item?.shadowRoot.querySelector<HTMLButtonElement>('.remove-dropdown-item');\n        if (!item || !removeButton || this.disabled) return;\n        if (!this.open) {\n            this.controlElement?.click();\n            await waitForNextPaint();\n        }\n        removeButton.click();\n        await waitForNextPaint();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('additionalContext')\n    additionalContextHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('alignment')\n    alignmentHandler() {\n        handleRenamedProp(this, 'alignment', 'popoverAlignment');\n    }\n\n    @Watch('ariaLabel')\n    ariaLabelHandler() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('context')\n    contextHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('contextValue')\n    contextValueHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('name')\n    nameHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('popDirection')\n    popDirectionHandler() {\n        handleRenamedProp(this, 'popDirection', 'popoverDirection');\n    }\n\n    @Watch('resolvedType')\n    resolvedTypeHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get determineDropdownItemCount() {\n        return this.hostElement.querySelectorAll(this.dropdownItemSelector).length;\n    }\n\n    get hasCustomControl() {\n        return !!this.hostElement.querySelector('[slot=control]');\n    }\n\n    get toggleButtonProps() {\n        const allowedIntents = ['primary', 'secondary', 'neutral'];\n        const allowedTypes = ['icon', 'fab', 'custom', ...allowedIntents];\n        const type = allowedTypes.includes(this.type) ? this.type : '';\n        const icon = type === 'icon';\n        const fab = type === 'fab';\n        const custom = type === 'custom';\n        let intent;\n        if (allowedIntents.includes(type)) {\n            intent = type === 'neutral' ? type : `workflow-${type}`;\n        }\n        const active = this.open;\n        const disabled = !!this.disabled;\n        const ariaExpanded = this.open;\n        const className = !icon && !fab && !intent ? 'unstyled' : '';\n\n        return {\n            icon,\n            fab,\n            intent,\n            active,\n            disabled,\n            ariaExpanded,\n            className,\n            custom,\n        };\n    }\n\n    _togglePopover() {\n        const { controlElement } = this;\n        if (!controlElement) return;\n        controlElement.click();\n        controlElement.focus();\n        controlElement.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    closeDropdown = () => {\n        if (!this.open) return;\n        this.open = false;\n    };\n\n    focusAdjacentItem(activeItem: HTMLQ2DropdownItemElement, direction: 'next' | 'prev') {\n        const dropdownItems: HTMLQ2DropdownItemElement[] = Array.from(\n            this.hostElement.querySelectorAll(this.dropdownItemSelector)\n        );\n\n        const activeIndex = dropdownItems.indexOf(activeItem);\n\n        if (activeIndex === -1) {\n            return;\n        }\n\n        let targetIndex: number = 0;\n        if (direction === 'next') {\n            targetIndex = activeIndex < dropdownItems.length - 1 ? activeIndex + 1 : 0;\n        } else if (direction === 'prev') {\n            if (activeIndex > 0) {\n                targetIndex = activeIndex - 1;\n            } else {\n                targetIndex = dropdownItems.length - 1;\n            }\n        }\n        const targetItem = dropdownItems[targetIndex];\n        targetItem && targetItem.dispatchEvent(new Event('focus'));\n    }\n\n    focusFirstItem = async () => {\n        const firstItem = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}:first-child`\n        );\n        if (!firstItem) return;\n        await waitForNextPaint();\n        firstItem.dispatchEvent(new FocusEvent('focus'));\n    };\n\n    focusLastItem = async () => {\n        const lastItem = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}:last-child`\n        );\n        if (!lastItem) return;\n        await waitForNextPaint();\n        lastItem.dispatchEvent(new FocusEvent('focus'));\n    };\n\n    focusToggle = () => {\n        this.controlElement.focus();\n    };\n\n    navigateTo(featureName: string, moduleName?: string, queryParams?: IDict<string>) {\n        return window.TectonElements?.navigateTo?.(featureName, moduleName, queryParams);\n    }\n\n    onClickElsewhere = (event: CustomEvent) => {\n        const target = event.target as HTMLClickElsewhereElement;\n        if (target.localName === 'click-elsewhere') {\n            event.stopPropagation();\n            const { popoverElement } = this;\n            if (!popoverElement) return;\n            popoverElement.open = false;\n        }\n    };\n\n    onDropdownMenuClick = async (event: MouseEvent | CustomEvent) => {\n        const item = event.target as HTMLQ2DropdownItemElement;\n        if (item.disabled || item.separator) return;\n        this.closeDropdown();\n        await waitForNextPaint();\n        this.focusToggle();\n    };\n\n    onDropdownMenuKeydown = (event: KeyboardEvent) => {\n        const item = event.target as HTMLQ2DropdownItemElement;\n        switch (event.key) {\n            case 'Escape':\n                this.closeDropdown();\n                this.focusToggle();\n                break;\n\n            case 'Tab':\n                this.closeDropdown();\n                break;\n\n            case 'ArrowUp':\n                event.preventDefault();\n                this.focusAdjacentItem(item, 'prev');\n                break;\n\n            case 'ArrowDown':\n                event.preventDefault();\n                this.focusAdjacentItem(item, 'next');\n                break;\n\n            default:\n                break;\n        }\n    };\n\n    onToggleClick = () => {\n        if (this.open) {\n            this.closeDropdown();\n        } else {\n            this.openDropdown();\n        }\n    };\n\n    onToggleKeydown = async (event: KeyboardEvent) => {\n        switch (event.key) {\n            case 'ArrowUp':\n                event.preventDefault();\n                this.openDropdown();\n                await waitForNextPaint();\n                this.focusLastItem();\n                break;\n\n            case 'ArrowDown':\n                event.preventDefault();\n                this.openDropdown();\n                await waitForNextPaint();\n                this.focusFirstItem();\n                return;\n\n            case 'Escape':\n                event.preventDefault();\n                this.closeDropdown();\n                break;\n\n            case 'Tab':\n                if (this.open) this.closeDropdown();\n                break;\n\n            default:\n                break;\n        }\n    };\n\n    openDropdown = () => {\n        if (this.open) return;\n        this.open = true;\n    };\n\n    orchestrateResolvedMenuItems() {\n        if (!this.name || !this.context) {\n            // this is only for contextual menu outlets\n            this.removeResolvedElements();\n            return;\n        }\n\n        this.resolveMenuItemElements()\n            .then(data => {\n                this.removeResolvedElements();\n                data.forEach(element => {\n                    this.hostElement.appendChild(element);\n                });\n            })\n            .catch(err => {\n                this.removeResolvedElements();\n                throw err;\n            });\n    }\n\n    removeResolvedElements() {\n        const resolvedElements = this.hostElement.querySelectorAll('q2-dropdown-item.resolved-menu-item');\n        resolvedElements.forEach(element => this.hostElement.removeChild(element));\n    }\n\n    resolveMenu() {\n        return (\n            this.name &&\n            window.TectonElements &&\n            window.TectonElements.resolveMenu(this.name, this.contextValue, this.resolvedType, this.additionalContext)\n        );\n    }\n\n    resolveMenuItemElements() {\n        return this.resolveMenu().then(datas => {\n            return datas.map(menuItemData => {\n                let onClickFn;\n                let queryParams;\n                if (menuItemData['tct-ctxid']) {\n                    queryParams = {};\n                    queryParams[menuItemData.contextIdParamName] = menuItemData['tct-ctxid'];\n                }\n\n                switch (menuItemData.action) {\n                    case 'navigateTo':\n                        onClickFn = () =>\n                            this.navigateTo(menuItemData.featureName, menuItemData.moduleName, queryParams);\n                        break;\n                    case 'showOverpanel':\n                        onClickFn = () =>\n                            this.showOverpanel(`${menuItemData.featureName}.${menuItemData.moduleName}`, queryParams);\n                        break;\n                }\n\n                const newDropdownItem = document.createElement('q2-dropdown-item');\n                newDropdownItem.setAttribute('value', menuItemData.itemLabel);\n                newDropdownItem.classList.add('resolved-menu-item');\n                newDropdownItem.textContent = menuItemData.itemLabel;\n                newDropdownItem.onclick = onClickFn;\n\n                return newDropdownItem;\n            });\n        });\n    }\n\n    showOverpanel(overpanelPath: string, params: IDict<string>) {\n        return window.TectonElements?.showOverpanel?.(overpanelPath, params, undefined, true);\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const btnProps = this.toggleButtonProps;\n\n        return (\n            <click-elsewhere\n                class={this.open ? 'dropdown-open' : ''}\n                onChange={this.onClickElsewhere}\n                test-id=\"dropdownContainer\"\n            >\n                <q2-btn\n                    ref={el => (this.controlElement = el)}\n                    class={btnProps.className}\n                    onClick={this.onToggleClick}\n                    onKeyDown={this.onToggleKeydown}\n                    fab={btnProps.fab}\n                    intent={btnProps.intent}\n                    active={btnProps.active}\n                    disabled={btnProps.disabled}\n                    ariaExpanded={`${!!btnProps.ariaExpanded}`}\n                    label={this.hideLabel && this.label ? loc(this.label) : undefined}\n                    hideLabel={this.hideLabel}\n                    ariaHasPopup=\"menu\"\n                    test-id=\"dropdownButton\"\n                    block={this.block}\n                    description={loc('tecton.element.dropdown.itemCount', [this.determineDropdownItemCount])}\n                >\n                    {this.hasCustomControl ? (\n                        <div\n                            test-id=\"dropdownControl\"\n                            class={btnProps.custom ? '' : 'hidden'}\n                        >\n                            <slot name=\"control\" />\n                        </div>\n                    ) : (\n                        <Fragment>\n                            {this.icon ? <q2-icon type={this.icon} /> : ' '}\n                            {this.label && !this.hideLabel && (\n                                <span class=\"dropdown-button-text\">{loc(this.label)}</span>\n                            )}\n                        </Fragment>\n                    )}\n                </q2-btn>\n                <q2-popover\n                    ref={el => (this.popoverElement = el)}\n                    controlElement={this.controlElement}\n                    open={this.open}\n                    max-height={this.popoverMaxHeight}\n                    minHeight={this.popoverMinHeight}\n                    direction={this.popoverDirection}\n                    align={this.popoverAlignment}\n                    mode={this.popoverMode || undefined}\n                    block={this.block}\n                >\n                    <div\n                        onClick={this.onDropdownMenuClick}\n                        onKeyDown={this.onDropdownMenuKeydown}\n                        role=\"menu\"\n                        aria-label={loc(this.label) || undefined}\n                    >\n                        <slot />\n                    </div>\n                </q2-popover>\n            </click-elsewhere>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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"}
+{"version":3,"names":["q2DropdownCss","Q2DropdownStyle0","Q2Dropdown","this","dropdownItemSelector","closeDropdown","open","focusFirstItem","async","firstItem","hostElement","querySelector","waitForNextPaint","dispatchEvent","FocusEvent","focusLastItem","lastItem","focusToggle","controlElement","focus","onClickElsewhere","event","target","localName","stopPropagation","popoverElement","onDropdownMenuClick","item","disabled","separator","onDropdownMenuKeydown","key","preventDefault","focusAdjacentItem","onToggleClick","openDropdown","onToggleKeydown","componentWillLoad","popDirectionHandler","alignmentHandler","ariaLabelHandler","componentDidLoad","orchestrateResolvedMenuItems","overrideFocus","delegateFocus","isEventFromElement","popoverStateHandler","detail","_a","scrollContainerTo","top","closePopover","_togglePopover","openPopover","selectItem","value","itemBtn","shadowRoot","click","selectRemoveItem","removeButton","additionalContextHandler","handleRenamedProp","handleAriaLabel","contextHandler","contextValueHandler","nameHandler","resolvedTypeHandler","determineDropdownItemCount","querySelectorAll","length","hasCustomControl","toggleButtonProps","allowedIntents","allowedTypes","type","includes","icon","fab","custom","intent","active","ariaExpanded","className","activeItem","direction","dropdownItems","Array","from","activeIndex","indexOf","targetIndex","targetItem","Event","navigateTo","featureName","moduleName","queryParams","_b","window","TectonElements","call","name","context","removeResolvedElements","resolveMenuItemElements","then","data","forEach","element","appendChild","catch","err","resolvedElements","removeChild","resolveMenu","contextValue","resolvedType","additionalContext","datas","map","menuItemData","onClickFn","contextIdParamName","action","showOverpanel","newDropdownItem","document","createElement","setAttribute","itemLabel","classList","add","textContent","onclick","overpanelPath","params","undefined","render","btnProps","h","class","onChange","ref","el","onClick","onKeyDown","label","hideLabel","loc","ariaHasPopup","block","description","Fragment","popoverMaxHeight","minHeight","popoverMinHeight","popoverDirection","align","popoverAlignment","mode","popoverMode","role"],"sources":["src/components/q2-dropdown/q2-dropdown.scss?tag=q2-dropdown&encapsulation=shadow","src/components/q2-dropdown/q2-dropdown.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-flex;\n}\n\n:host([block]) {\n    display: block;\n}\n\nq2-icon {\n    pointer-events: none;\n    margin-block: -100px;\n}\n\nclick-elsewhere {\n    position: relative;\n    display: block;\n}\n\nq2-popover {\n    --tct-popover-min-width: #{var-list(var-prefixer(dropdown-width))};\n}\n","import { Component, ComponentInterface, Prop, Method, Element, Watch, h, Fragment, Listen } from '@stencil/core';\nimport { IDict } from 'src/util';\nimport {\n    handleAriaLabel,\n    handleRenamedProp,\n    isEventFromElement,\n    loc,\n    overrideFocus,\n    waitForNextPaint,\n} from 'src/utils';\n\n@Component({ tag: 'q2-dropdown', shadow: true, styleUrl: 'q2-dropdown.scss' })\nexport class Q2Dropdown implements ComponentInterface {\n    // #region Own Properties\n\n    controlElement?: HTMLQ2BtnElement;\n    dropdownItemSelector: string = 'q2-dropdown-item:not([disabled]):not([separator])';\n    popoverElement?: HTMLQ2PopoverElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    @Prop({ reflect: true })\n    additionalContext: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true })\n    alignment: 'left' | 'right';\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    /** If `true`, component expands to fill the width of its parent element. */\n    @Prop({ reflect: true })\n    block: boolean;\n\n    /**\n     * Tells the outlet what the type of object being passed in as contextValue.\n     * This will allow for the hierarchy resolution logic to work to determine if an option should or should not be shown.\n     *\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true })\n    context: string;\n\n    /**\n     * Passes important information to the outlet (e.g., pass an account id that your platform can use to look up what module to show for that account type).\n     *\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true })\n    contextValue: string;\n\n    /** Indicates the menu cannot be focused or interacted with. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * Hide's the field's `<label>` element from view.\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true })\n    hideLabel: boolean;\n\n    /** The icon that will render within the toggle button. You may use any of the `q2-icon` types. */\n    @Prop({ reflect: true })\n    icon: string;\n\n    /**\n     * The text that appears within the button.\n     * @warning\n     * This property should not be used if the `type` is `icon`.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string;\n\n    /**\n     * Identifies this menu as an outlet. Used in conjunction with context and, optionally, `contextValue`.\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true })\n    name: string;\n\n    /**\n     * Determine whether the popover is open or closed.\n     *\n     * @readonly\n     */\n    @Prop({ reflect: true, mutable: true })\n    open: boolean;\n\n    /** @deprecated */\n    @Prop({ reflect: true })\n    popDirection: 'up' | 'down';\n\n    /** Aligns the popover dropdown to the left or right side of the input field. */\n    @Prop({ mutable: true })\n    popoverAlignment: 'left' | 'right' = 'left'; // being used in dropdown.scss\n\n    /**\n     * Force the direction of the popover dropdown when it opens.\n     * If no value is passed, the component will auto-detect the direction based on available space.\n     */\n    @Prop({ mutable: true })\n    popoverDirection: 'up' | 'down';\n\n    /**\n     * Force the maximum height of the popover. This value will be interpreted as pixels.\n     * If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.\n     */\n    @Prop()\n    popoverMaxHeight: number;\n\n    /** @deprecated */\n    @Prop()\n    popoverMinHeight: number;\n\n    /**\n     * Determines the display mode of the popover.\n     *\n     * Providing a value of `legacy` instructs the popover to use absolute positioning instead of fixed positioning.\n     *\n     * @info\n     * This is a temporary solution to work around styling issues related to using fixed positioning for the popover\n     * when nested inside of elements with transform properties. This will be removed once the popover API is available\n     * for use.\n     */\n    @Prop({ mutable: true })\n    popoverMode: 'legacy' = null;\n\n    /**\n     * Use with `context` to tell the outlet where it appears. It will be matched with the appropriately configured module for that context.\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true })\n    resolvedType: string;\n\n    /** The type of button used as the menu toggle.\n     * @info\n     * Type must be \"custom\" to use the custom button slot.\n     */\n    @Prop({ reflect: true })\n    type: 'icon' | 'fab' | 'custom' | 'primary' | 'secondary' | 'neutral' = 'icon';\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        this.popDirectionHandler();\n        this.alignmentHandler();\n        this.ariaLabelHandler();\n    }\n\n    componentDidLoad() {\n        this.orchestrateResolvedMenuItems();\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.focusToggle();\n    }\n\n    @Listen('popoverStateChanged')\n    popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n        if (this.open !== open) this.open = open;\n        this.popoverElement?.scrollContainerTo({ top: 0 });\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking the dropdown `<button>` to hide the popover if it is showing.\n     * @testOnly\n     */\n    @Method()\n    async closePopover() {\n        if (!this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates clicking the dropdown `<button>` to show the popover if it is hidden.\n     * @testOnly\n     */\n    @Method()\n    async openPopover() {\n        if (this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates opening the dropdown and selecting a [Dropdown Item](https://tecton.q2developer.com/design-system/q2-dropdown-item/).\n     *\n     * If the dropdown is closed, this will open it before selecting the item.\n     *\n     * If the value does not match any item's value, this method does nothing.\n     * @testOnly\n     */\n    @Method()\n    async selectItem(value: string) {\n        const item = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}[value=\"${value}\"]`\n        );\n        const itemBtn = item?.shadowRoot.querySelector<HTMLButtonElement>('.dropdown-item');\n        if (!item || this.disabled) return;\n        if (!this.open) {\n            this.controlElement?.click();\n            await waitForNextPaint();\n        }\n        itemBtn.click();\n        await waitForNextPaint();\n    }\n\n    /**\n     * Emulates opening the dropdown and selecting a [Dropdown Item](https://tecton.q2developer.com/design-system/q2-dropdown-item/)'s *remove* button.\n     *\n     * If the dropdown is closed, this will open it before selecting the remove item button.\n     *\n     * Requirements for this method to work properly:\n     * - Provided `value` matches the item's `value` property\n     * - Item has the `removable` property enabled\n     * @testOnly\n     */\n    @Method()\n    async selectRemoveItem(value: string) {\n        const item = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}[value=\"${value}\"]`\n        );\n        const removeButton = item?.shadowRoot.querySelector<HTMLButtonElement>('.remove-dropdown-item');\n        if (!item || !removeButton || this.disabled) return;\n        if (!this.open) {\n            this.controlElement?.click();\n            await waitForNextPaint();\n        }\n        removeButton.click();\n        await waitForNextPaint();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('additionalContext')\n    additionalContextHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('alignment')\n    alignmentHandler() {\n        handleRenamedProp(this, 'alignment', 'popoverAlignment');\n    }\n\n    @Watch('ariaLabel')\n    ariaLabelHandler() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('context')\n    contextHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('contextValue')\n    contextValueHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('name')\n    nameHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('popDirection')\n    popDirectionHandler() {\n        handleRenamedProp(this, 'popDirection', 'popoverDirection');\n    }\n\n    @Watch('resolvedType')\n    resolvedTypeHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get determineDropdownItemCount() {\n        return this.hostElement.querySelectorAll(this.dropdownItemSelector).length;\n    }\n\n    get hasCustomControl() {\n        return !!this.hostElement.querySelector('[slot=control]');\n    }\n\n    get toggleButtonProps() {\n        const allowedIntents = ['primary', 'secondary', 'neutral'];\n        const allowedTypes = ['icon', 'fab', 'custom', ...allowedIntents];\n        const type = allowedTypes.includes(this.type) ? this.type : '';\n        const icon = type === 'icon';\n        const fab = type === 'fab';\n        const custom = type === 'custom';\n        let intent;\n        if (allowedIntents.includes(type)) {\n            intent = type === 'neutral' ? type : `workflow-${type}`;\n        }\n        const active = this.open;\n        const disabled = !!this.disabled;\n        const ariaExpanded = this.open;\n        const className = !icon && !fab && !intent ? 'unstyled' : '';\n\n        return {\n            icon,\n            fab,\n            intent,\n            active,\n            disabled,\n            ariaExpanded,\n            className,\n            custom,\n        };\n    }\n\n    _togglePopover() {\n        const { controlElement } = this;\n        if (!controlElement) return;\n        controlElement.click();\n        controlElement.focus();\n        controlElement.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    closeDropdown = () => {\n        if (!this.open) return;\n        this.open = false;\n    };\n\n    focusAdjacentItem(activeItem: HTMLQ2DropdownItemElement, direction: 'next' | 'prev') {\n        const dropdownItems: HTMLQ2DropdownItemElement[] = Array.from(\n            this.hostElement.querySelectorAll(this.dropdownItemSelector)\n        );\n\n        const activeIndex = dropdownItems.indexOf(activeItem);\n\n        if (activeIndex === -1) {\n            return;\n        }\n\n        let targetIndex: number = 0;\n        if (direction === 'next') {\n            targetIndex = activeIndex < dropdownItems.length - 1 ? activeIndex + 1 : 0;\n        } else if (direction === 'prev') {\n            if (activeIndex > 0) {\n                targetIndex = activeIndex - 1;\n            } else {\n                targetIndex = dropdownItems.length - 1;\n            }\n        }\n        const targetItem = dropdownItems[targetIndex];\n        targetItem && targetItem.dispatchEvent(new Event('focus'));\n    }\n\n    focusFirstItem = async () => {\n        const firstItem = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}:first-child`\n        );\n        if (!firstItem) return;\n        await waitForNextPaint();\n        firstItem.dispatchEvent(new FocusEvent('focus'));\n    };\n\n    focusLastItem = async () => {\n        const lastItem = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}:last-child`\n        );\n        if (!lastItem) return;\n        await waitForNextPaint();\n        lastItem.dispatchEvent(new FocusEvent('focus'));\n    };\n\n    focusToggle = () => {\n        this.controlElement.focus();\n    };\n\n    navigateTo(featureName: string, moduleName?: string, queryParams?: IDict<string>) {\n        return window.TectonElements?.navigateTo?.(featureName, moduleName, queryParams);\n    }\n\n    onClickElsewhere = (event: CustomEvent) => {\n        const target = event.target as HTMLClickElsewhereElement;\n        if (target.localName === 'click-elsewhere') {\n            event.stopPropagation();\n            const { popoverElement } = this;\n            if (!popoverElement) return;\n            popoverElement.open = false;\n        }\n    };\n\n    onDropdownMenuClick = async (event: MouseEvent | CustomEvent) => {\n        const item = event.target as HTMLQ2DropdownItemElement;\n        if (item.disabled || item.separator) return;\n        this.closeDropdown();\n        await waitForNextPaint();\n        this.focusToggle();\n    };\n\n    onDropdownMenuKeydown = (event: KeyboardEvent) => {\n        const item = event.target as HTMLQ2DropdownItemElement;\n        switch (event.key) {\n            case 'Escape':\n                this.closeDropdown();\n                this.focusToggle();\n                break;\n\n            case 'Tab':\n                this.closeDropdown();\n                break;\n\n            case 'ArrowUp':\n                event.preventDefault();\n                this.focusAdjacentItem(item, 'prev');\n                break;\n\n            case 'ArrowDown':\n                event.preventDefault();\n                this.focusAdjacentItem(item, 'next');\n                break;\n\n            default:\n                break;\n        }\n    };\n\n    onToggleClick = () => {\n        if (this.open) {\n            this.closeDropdown();\n        } else {\n            this.openDropdown();\n        }\n    };\n\n    onToggleKeydown = async (event: KeyboardEvent) => {\n        switch (event.key) {\n            case 'ArrowUp':\n                event.preventDefault();\n                this.openDropdown();\n                await waitForNextPaint();\n                this.focusLastItem();\n                break;\n\n            case 'ArrowDown':\n                event.preventDefault();\n                this.openDropdown();\n                await waitForNextPaint();\n                this.focusFirstItem();\n                return;\n\n            case 'Escape':\n                event.preventDefault();\n                this.closeDropdown();\n                break;\n\n            case 'Tab':\n                if (this.open) this.closeDropdown();\n                break;\n\n            default:\n                break;\n        }\n    };\n\n    openDropdown = () => {\n        if (this.open) return;\n        this.open = true;\n    };\n\n    orchestrateResolvedMenuItems() {\n        if (!this.name || !this.context) {\n            // this is only for contextual menu outlets\n            this.removeResolvedElements();\n            return;\n        }\n\n        this.resolveMenuItemElements()\n            .then(data => {\n                this.removeResolvedElements();\n                data.forEach(element => {\n                    this.hostElement.appendChild(element);\n                });\n            })\n            .catch(err => {\n                this.removeResolvedElements();\n                throw err;\n            });\n    }\n\n    removeResolvedElements() {\n        const resolvedElements = this.hostElement.querySelectorAll('q2-dropdown-item.resolved-menu-item');\n        resolvedElements.forEach(element => this.hostElement.removeChild(element));\n    }\n\n    resolveMenu() {\n        return (\n            this.name &&\n            window.TectonElements &&\n            window.TectonElements.resolveMenu(this.name, this.contextValue, this.resolvedType, this.additionalContext)\n        );\n    }\n\n    resolveMenuItemElements() {\n        return this.resolveMenu().then(datas => {\n            return datas.map(menuItemData => {\n                let onClickFn;\n                let queryParams;\n                if (menuItemData['tct-ctxid']) {\n                    queryParams = {};\n                    queryParams[menuItemData.contextIdParamName] = menuItemData['tct-ctxid'];\n                }\n\n                switch (menuItemData.action) {\n                    case 'navigateTo':\n                        onClickFn = () =>\n                            this.navigateTo(menuItemData.featureName, menuItemData.moduleName, queryParams);\n                        break;\n                    case 'showOverpanel':\n                        onClickFn = () =>\n                            this.showOverpanel(`${menuItemData.featureName}.${menuItemData.moduleName}`, queryParams);\n                        break;\n                }\n\n                const newDropdownItem = document.createElement('q2-dropdown-item');\n                newDropdownItem.setAttribute('value', menuItemData.itemLabel);\n                newDropdownItem.classList.add('resolved-menu-item');\n                newDropdownItem.textContent = menuItemData.itemLabel;\n                newDropdownItem.onclick = onClickFn;\n\n                return newDropdownItem;\n            });\n        });\n    }\n\n    showOverpanel(overpanelPath: string, params: IDict<string>) {\n        return window.TectonElements?.showOverpanel?.(overpanelPath, params, undefined, true);\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const btnProps = this.toggleButtonProps;\n\n        return (\n            <click-elsewhere\n                class={this.open ? 'dropdown-open' : ''}\n                onChange={this.onClickElsewhere}\n                test-id=\"dropdownContainer\"\n            >\n                <q2-btn\n                    ref={el => (this.controlElement = el)}\n                    class={btnProps.className}\n                    onClick={this.onToggleClick}\n                    onKeyDown={this.onToggleKeydown}\n                    fab={btnProps.fab}\n                    intent={btnProps.intent}\n                    active={btnProps.active}\n                    disabled={btnProps.disabled}\n                    ariaExpanded={`${!!btnProps.ariaExpanded}`}\n                    label={this.hideLabel && this.label ? loc(this.label) : undefined}\n                    hideLabel={this.hideLabel}\n                    ariaHasPopup=\"menu\"\n                    test-id=\"dropdownButton\"\n                    block={this.block}\n                    description={loc('tecton.element.dropdown.itemCount', [this.determineDropdownItemCount])}\n                >\n                    {this.hasCustomControl ? (\n                        <div\n                            test-id=\"dropdownControl\"\n                            class={btnProps.custom ? '' : 'hidden'}\n                        >\n                            <slot name=\"control\" />\n                        </div>\n                    ) : (\n                        <Fragment>\n                            {this.icon ? <q2-icon type={this.icon} /> : ' '}\n                            {this.label && !this.hideLabel && (\n                                <span class=\"dropdown-button-text\">{loc(this.label)}</span>\n                            )}\n                        </Fragment>\n                    )}\n                </q2-btn>\n                <q2-popover\n                    ref={el => (this.popoverElement = el)}\n                    controlElement={this.controlElement}\n                    open={this.open}\n                    max-height={this.popoverMaxHeight}\n                    minHeight={this.popoverMinHeight}\n                    direction={this.popoverDirection}\n                    align={this.popoverAlignment}\n                    mode={this.popoverMode || undefined}\n                    block={this.block}\n                >\n                    <div\n                        onClick={this.onDropdownMenuClick}\n                        onKeyDown={this.onDropdownMenuKeydown}\n                        role=\"menu\"\n                        aria-label={loc(this.label) || undefined}\n                    >\n                        <slot />\n                    </div>\n                </q2-popover>\n            </click-elsewhere>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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"}

package/dist/q2-tecton-elements/q2-pill.entry.js

@@ -341,19 +341,19 @@ const v = class {
     if (t || i) r.push("has-icon");
     if (t) r.push("has-options");
     return e("click-elsewhere", {
-      key: "3afd3829ed57fafcddebd44fd271417847f5adc3",
+      key: "2e6401852016f9edeb1e27b8b69335755a7a9202",
       onChange: this.onClickElsewhere
     }, e("div", {
-      key: "d70270086ecdfa05b2e960bcf756152c3461dd5b",
+      key: "997b3609f4cbd894fdf412d71624de290558a53c",
       class: r.join(" ")
     }, e("div", {
-      key: "426b60e954850a562aa419f391698af7e47d07df",
+      key: "6326d50ba96228f78ccf29f1ac3ec2f88d4d88aa",
       class: "btn-height-wrapper",
       ref: t => this.primaryBtnWrapper = t,
       onClick: this.handleWrapperClick,
       tabIndex: -1
     }, e("button", {
-      key: "947e21166b91515e26554bcb4bb41d7ad8a22c0c",
+      key: "bf29ea540b04bef1a58c9106b15a0155e8c9f81b",
       class: "btn-primary",
       "test-id": "btn-control",
       type: "button",
@@ -369,10 +369,10 @@ const v = class {
       "aria-label": this.buttonContent,
       "aria-describedby": t && "option-description" || undefined
     }, this.truncatedButtonContent, !t && i && e("span", {
-      key: "76fac7563d911775ede91b6be57da256425083ff",
+      key: "927bcd7ece084b5eb47bea58357f0f3f62d07536",
       class: "sr"
     }, "(", c("tecton.element.pill.active"), ")"))), this.renderIcon(), !!t && this.renderHiddenElement()), this.optionCount > 0 && e("q2-popover", {
-      key: "9bdbdb1e8a0a37682661a11fc99dec9327970431",
+      key: "a87ee59b7a7b9b0f4cecb7d74aa71618e50c57ba",
       ref: t => this.popoverElement = t,
       controlElement: this.primaryBtn,
       open: this.open,
@@ -381,20 +381,20 @@ const v = class {
       direction: this.popoverDirection,
       align: this.popoverAlignment
     }, e("div", {
-      key: "3fdc19446c0ae4a6a8de0809c20c60c448bfe442",
+      key: "3952981f8a3dec4126035529df72e04f59dd3245",
       class: "popover-content"
     }, e("div", {
-      key: "04342edf1cfeca430792a60fd0f318a5d4b0915c",
+      key: "f31e255a8f052cd2d3d1a53506ba51b4fdb936c3",
       ref: t => this.popoverTopContainer = t,
       class: "popover-top-container",
       tabindex: "-1",
       hidden: !this.hasPopoverTop,
       onKeyDown: this.handleKeydown
     }, e("slot", {
-      key: "f392211b50bd9213c06fc3da755c169c66865356",
+      key: "18a55b89efe4ca840cbb80c8266c5aa5cdd2c9d8",
       name: "popover-top"
     })), e("q2-option-list", {
-      key: "bf5a619800c577a36e3839c8ef7576d6c857c4ff",
+      key: "923c991cc3dddc5ad8d8416b488f5c151b215984",
       type: "listbox",
       ref: t => this.optionList = t,
       id: "option-list",
@@ -404,16 +404,16 @@ const v = class {
       onReady: () => this.updateSelectedOptionElements(),
       label: c("tecton.element.optionList.label", [ this.optionListLabel ])
     }, e("slot", {
-      key: "556faf81f6c6bd5907689ce3bcb1f4f5801c5e08"
+      key: "00d05bcff3be94a8de0dad038f67f9650234ef0f"
     })), e("div", {
-      key: "a129af0674717bca4fa1d173e679365346fe6b82",
+      key: "cbbb918f147fe82de2411dba9d7297d18d540c2e",
       ref: t => this.popoverBottomContainer = t,
       class: "popover-bottom-container",
       tabindex: "-1",
       hidden: !this.hasPopoverBottom,
       onKeyDown: this.handleKeydown
     }, e("slot", {
-      key: "4a7ce0d785f02602cc6f229d00e4602b5f6d9fcb",
+      key: "d327cd4e04931acd87f4889229543d69b3340860",
       name: "popover-bottom"
     })))));
   }

package/dist/q2-tecton-elements/q2-pill.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["q2PillCss","Q2PillStyle0","Q2Pill","this","scheduledAfterRender","clearSelectedOptions","selectedOptions","value","active","open","primaryBtn","focus","change","emit","values","push","resizeIframe","determineOptionCount","async","optionList","allOptions","getOptions","optionCount","length","numberOfOptions","hostElement","querySelectorAll","executeActionSheet","event","result","showActionSheetList","handleSelectionChanges","getOption","options","find","option","querySelector","handleButtonFocusout","relatedTarget","tagName","handleChange","stopPropagation","detail","handleClick","disabled","shouldShowActionSheet","popoverElement","toggle","label","isActive","display","handleKeydown","isTabMetaOrCtrl","metaKey","ctrlKey","key","preventDefault","hasSlot","hasPopoverTop","hasPopoverBottom","handleExternalKeydown","changeDetails","multiple","onchange","undefined","selectedOption","handleWrapperClick","click","onClickElsewhere","target","localName","onMutationObserved","updateSlotState","updateSelectedOptionElements","syncValueProperties","selectedOptionsChanged","valueChanged","selectedValues","map","_a","selectedOptionElements","filter","includes","popTopSlot","shadowRoot","popBottomSlot","topSlotHasNode","assignedNodes","bottomSlotHasNode","window","Tecton","useActionSheets","disconnectedCallback","mutationObserver","disconnect","componentWillLoad","observer","MutationObserver","observe","childList","attributes","componentDidLoad","overrideFocus","componentDidRender","forEach","fn","handleSelectedDisplay","delegateFocus","isEventFromElement","popoverStateHandler","setActiveElement","closePopover","_togglePopover","openPopover","setValue","valueSet","Set","Array","isArray","waitForNextPaint","newValue","firstValue","_b","buttonContent","loc","count","truncatedButtonContent","maxLength","substring","dispatchEvent","FocusEvent","renderHiddenElement","h","id","class","renderIcon","isButton","TagName","iconName","onClick","type","render","wrapperClassNames","onChange","join","ref","el","primaryBtnWrapper","tabIndex","role","onKeyDown","onFocusout","controlElement","popoverMaxHeight","minHeight","popoverMinHeight","direction","popoverDirection","align","popoverAlignment","popoverTopContainer","tabindex","hidden","name","onReady","optionListLabel","popoverBottomContainer"],"sources":["src/components/q2-pill/q2-pill.scss?tag=q2-pill&encapsulation=shadow","src/components/q2-pill/q2-pill.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n    position: relative;\n    line-height: 0;\n}\n\n:host(:not(:last-child)) {\n    margin-inline-end: var-list(var-prefixer(pill-margin), --app-scale-2x, 10px);\n}\n\nq2-popover,\n.btn-wrapper {\n    --comp-pill-min-height: #{var-list(var-prefixer(pill-min-height), 44px)};\n    --comp-pill-btn-height: #{var-list(var-prefixer(pill-btn-height), 30px)};\n}\n\n.popover-top-container {\n    position: sticky;\n    top: 0;\n    z-index: 5;\n}\n\n.popover-bottom-container {\n    position: sticky;\n    bottom: 0;\n    z-index: 5;\n}\n\n.btn-wrapper {\n    --comp-pill-btn-border-width: #{var-list(var-prefixer(pill-btn-border-width), 2px)};\n    --comp-close-size: 0px;\n    --comp-btn-background: #{var-list(var-prefixer(pill-btn-background), --t-base, #ffffff)};\n    --comp-hover-btn-background: #{var-list(var-prefixer(pill-hover-btn-background), --t-gray-13, #e6e6e6)};\n    --comp-btn-padding: #{var-list(var-prefixer(pill-btn-padding-inline), --app-scale-3x, 15px)};\n    --comp-btn-color: #{var-list(var-prefixer(pill-btn-color), --t-gray-3, #262626)};\n    --comp-active-btn-color: var(--comp-btn-background);\n    --comp-active-btn-background: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-7, #666666)};\n    --comp-active-btn-border-color: #{var-list(var-prefixer(pill-active-btn-border-color), --t-gray-7, #666666)};\n    --comp-hover-active-btn-background: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-6, #4d4d4d)};\n    --comp-hover-active-btn-border-color: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-6, #4d4d4d)};\n\n    position: relative;\n\n    &.has-options,\n    &.has-icon {\n        --comp-close-size: var(--comp-pill-btn-height);\n    }\n\n    :host([active]) & {\n        --comp-btn-color: #{var-list(var-prefixer(pill-active-btn-color), --t-base, #ffffff)};\n    }\n\n    :host([theme='primary']) & {\n        --comp-active-btn-background: #{var-list(--tct-pill-primary-active-background, --t-primary, #0079c1)};\n        --comp-active-btn-color: #{var-list(--tct-pill-primary-active-font-color, --t-primary-text, #ffffff)};\n        --comp-active-btn-border-color: #{var-list(--tct-pill-primary-active-border-color, --t-primary, #0079c1)};\n        --comp-hover-active-btn-background: #{var-list(\n                --tct-pill-primary-active-hover-background,\n                --t-primary-l3,\n                #21acff\n            )};\n        --comp-hover-active-btn-border-color: #{var-list(\n                --tct-pill-primary-active-hover-border-color,\n                --t-primary-l3,\n                #21acff\n            )};\n    }\n\n    :host([theme='secondary']) & {\n        --comp-active-btn-background: #{var-list(--tct-pill-secondary-active-background, --t-secondary, #b3c2cc)};\n        --comp-active-btn-color: #{var-list(--tct-pill-secondary-active-font-color, --t-secondary-text, #141414)};\n        --comp-active-btn-border-color: #{var-list(--tct-pill-secondary-active-border-color, --t-secondary, #b3c2cc)};\n        --comp-hover-active-btn-background: #{var-list(\n                --tct-pill-secondary-active-hover-background,\n                --t-secondary-l3,\n                #c9d5db\n            )};\n        --comp-hover-active-btn-border-color: #{var-list(\n                --tct-pill-secondary-active-hover-border-color,\n                --t-secondary-l3,\n                #c9d5db\n            )};\n    }\n\n    :host([theme='tertiary']) & {\n        --comp-active-btn-background: #{var-list(--tct-pill-tertiary-active-background, --t-tertiary, #e8f5fc)};\n        --comp-active-btn-color: #{var-list(--tct-pill-tertiary-active-font-color, --t-tertiary-text, #141414)};\n        --comp-active-btn-border-color: #{var-list(--tct-pill-tertiary-active-border-color, --t-tertiary, #e8f5fc)};\n        --comp-hover-active-btn-background: #{var-list(\n                --tct-pill-tertiary-active-hover-background,\n                --t-tertiary-l3,\n                #eff8fd\n            )};\n        --comp-hover-active-btn-border-color: #{var-list(\n                --tct-pill-tertiary-active-hover-border-color,\n                --t-tertiary-l3,\n                #eff8fd\n            )};\n    }\n}\n\n.btn-height-wrapper {\n    height: var(--comp-pill-min-height);\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    &:focus {\n        box-shadow: none;\n    }\n\n    :host([disabled]) & {\n        cursor: not-allowed;\n    }\n}\n\n.btn-close,\n.btn-primary {\n    cursor: pointer;\n    height: var(--comp-pill-btn-height);\n    border-style: solid;\n    border-radius: var-list(var-prefixer(pill-btn-border-radius), 30px);\n    transition-property: background, color, padding, width, opacity;\n    transition: var-list(var-prefixer(pill-btn-tween), --app-tween-1, unquote('0.2s ease'));\n}\n\n.btn-close,\n.btn-primary,\nq2-icon {\n    :host([disabled]) & {\n        opacity: var-list(var-prefixer(pill-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n        cursor: not-allowed;\n    }\n}\n\n.btn-primary {\n    background: var(--comp-btn-background);\n    border-width: var-list(--comp-pill-btn-border-width);\n    border-color: var-list(var-prefixer(pill-btn-border-color), --t-a11y-gray-color-AA, #949494);\n    padding-inline: var(--comp-btn-padding);\n    padding-right: calc(var(--comp-btn-padding) + var(--comp-close-size));\n    font-size: var-list(var-prefixer(pill-btn-font-size), --app-font-size, 14px);\n    color: var(--comp-btn-color);\n    display: block;\n    width: 100%;\n    text-align: start;\n\n    &:focus,\n    &:hover {\n        background: var(--comp-hover-btn-background);\n    }\n\n    .has-options &,\n    .has-icon & {\n        padding-right: calc(#{var-list(var-prefixer(pill-icon-gap), --app-scale-1x, 5px)} + var(--comp-close-size));\n    }\n\n    .has-options & {\n        @include line-clamp(1);\n        max-width: var-list(var-prefixer(pill-max-width), 200px);\n    }\n\n    :host([active]) & {\n        background: var(--comp-active-btn-background);\n        border-color: var(--comp-active-btn-border-color);\n        color: var(--comp-active-btn-color);\n\n        &:focus,\n        &:hover {\n            background: var(--comp-hover-active-btn-background);\n            border-color: var(--comp-hover-active-btn-border-color);\n        }\n    }\n}\n\n.btn-close {\n    background: transparent;\n    border-color: transparent;\n    border-width: var(--comp-pill-btn-border-width);\n    width: var(--comp-close-size);\n    height: var(--comp-close-size);\n    padding: 0;\n    border: 0;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    position: absolute;\n    right: 0;\n    top: 50%;\n    transform: translateY(-50%);\n    opacity: 0;\n    :host([active]) & {\n        color: var(--comp-active-btn-color);\n    }\n\n    .has-options &,\n    .has-icon & {\n        opacity: 1;\n    }\n}\n\nq2-icon {\n    --t-icon-stroke-primary: currentcolor;\n    width: var-list(var-prefixer(pill-icon-size), 14px);\n    height: var-list(var-prefixer(pill-icon-size), 14px);\n    transition-property: transform;\n    transition: var-list(var-prefixer(pill-btn-tween), --app-tween-1, unquote('0.2s ease'));\n}\n\ndiv.btn-close {\n    pointer-events: none;\n\n    :host([open]) & q2-icon {\n        transform: rotate(180deg);\n    }\n}\n\nbutton.btn-close {\n    :host([active]) & {\n        &:focus,\n        &:hover {\n            background: var-list(var-prefixer(pill-hover-close-btn-background), --t-top-a1, rgba(13, 13, 13, 0.35));\n            border-color: var-list(var-prefixer(pill-hover-close-btn-border-color), --t-top-a1, rgba(13, 13, 13, 0.35));\n        }\n    }\n}\n\nq2-popover {\n    top: calc(var(--comp-pill-min-height) - calc(calc(var(--comp-pill-min-height) - var(--comp-pill-btn-height)) / 2));\n}\n\n:host([borderless]:not([borderless='false'])) {\n    button {\n        border-style: none;\n    }\n}\n","import {\n    Component,\n    State,\n    Prop,\n    h,\n    ComponentInterface,\n    Listen,\n    Watch,\n    Element,\n    EventEmitter,\n    Event,\n    Method,\n} from '@stencil/core';\nimport { isEventFromElement, loc, overrideFocus, resizeIframe, waitForNextPaint } from 'src/utils';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\nimport { IOptionValue } from '../q2-option-list/q2-option-list';\n\n@Component({ tag: 'q2-pill', shadow: true, styleUrl: 'q2-pill.scss' })\nexport class Q2Pill implements ComponentInterface {\n    // #region Own Properties\n\n    mutationObserver: MutationObserver;\n    optionList: HTMLQ2OptionListElement;\n    popoverBottomContainer: HTMLElement;\n    popoverElement: HTMLQ2PopoverElement;\n    popoverTopContainer: HTMLElement;\n    primaryBtn: HTMLButtonElement;\n    primaryBtnWrapper: HTMLElement;\n    scheduledAfterRender: (() => void)[] = [];\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    hasPopoverBottom = false;\n\n    @State()\n    hasPopoverTop = false;\n\n    @State()\n    optionCount: number;\n\n    @State()\n    selectedOptionElements: HTMLQ2OptionElement[] = [];\n\n    // #endregion\n    // #region Public Property API\n\n    /** Determine if the elements is in the selected state, with values. */\n    @Prop({ reflect: true, mutable: true })\n    active: boolean;\n\n    /** Indicates that the pill has no border */\n    @Prop({ reflect: true })\n    borderless: boolean;\n\n    /** Indicates the pill cannot be focused or interacted with. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * Instructs the component to use the action sheet workflow for displaying its options.\n     *\n     * For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).\n     */\n    @Prop()\n    hoist: boolean = !!window.Tecton?.useActionSheets;\n\n    /**\n     * The text that populates the label.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /**\n     * The maximum number of characters to display before ellipcizing.\n     * @info\n     * Limitless by default.\n     */\n    @Prop({ reflect: true })\n    maxLength: number;\n\n    /**\n     * Enables the multi-select ability for the dropdown.\n     * @info\n     * Only applicable when options are provided.\n     */\n    @Prop({ reflect: true })\n    multiple: boolean;\n\n    /** Determine whether the popover is open or closed. */\n    @Prop({ reflect: true, mutable: true })\n    open: boolean;\n\n    /** Determines the label that is applied to the option list for accessibility purposes. */\n    @Prop()\n    optionListLabel: string;\n\n    /** Aligns the popover dropdown to the left or right side of the input field. */\n    @Prop({ mutable: true })\n    popoverAlignment: 'left' | 'right' = 'right';\n\n    /**\n     * Force the direction of the popover dropdown when it opens.\n     * If no value is passed, the component will auto-detect the direction based on available space.\n     */\n    @Prop()\n    popoverDirection: 'up' | 'down';\n\n    /**\n     * Force the maximum height of the popover. This value will be interpreted as pixels.\n     * If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.\n     */\n    @Prop()\n    popoverMaxHeight: number;\n\n    /** @deprecated */\n    @Prop()\n    popoverMinHeight: number = 150;\n\n    /** A list of the selected options on the element. */\n    @Prop({ mutable: true })\n    selectedOptions: IOptionValue[] = [];\n\n    /** The color of the element when in the active state. */\n    @Prop({ reflect: true })\n    theme: 'primary' | 'secondary' | 'tertiary';\n\n    /** The value emitted when the component is selected. */\n    @Prop({ reflect: true, mutable: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the pill is clicked or the selected options change.\n     *\n     * When multi-select is enabled, `value` will be `undefined`.\n     * @legacyEvent\n     */\n    @Event()\n    change: EventEmitter<{ value: string; values: IOptionValue[]; active: boolean }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, attributes: true });\n        this.mutationObserver = observer;\n    }\n\n    componentDidLoad() {\n        overrideFocus(this.hostElement);\n        this.syncValueProperties();\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('displayChanged')\n    handleSelectedDisplay() {\n        if (this.multiple) return;\n        this.updateSelectedOptionElements();\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.primaryBtn.focus();\n    }\n\n    @Listen('popoverStateChanged')\n    popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n        if (this.open !== open) this.open = open;\n        if (open) return;\n        this.optionList.setActiveElement(null);\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking the `<button>` to hide the popover if it is visible.\n     *\n     * @testOnly\n     */\n    @Method()\n    async closePopover() {\n        if (!this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates clicking the `<button>` to display the popover if it is hidden.\n     *\n     * @testOnly\n     */\n    @Method()\n    async openPopover() {\n        if (this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates clicking the `<button>` to display the popover and selecting the option(s) with the specified value(s).\n     *\n     * If multi-select is enabled and the `closePopover` argument is `true` (default), the popover will be closed\n     * after the option(s) are selected.\n     *\n     * @testOnly\n     */\n    @Method()\n    async setValue(values: string | string[], options: { closePopover?: boolean } = { closePopover: true }) {\n        const valueSet = new Set(Array.isArray(values) ? values : [values]);\n        const allOptions: HTMLQ2OptionElement[] = await this.optionList?.getOptions();\n        if (!this.open) {\n            await this.openPopover();\n            await waitForNextPaint();\n        }\n\n        valueSet.forEach(value => {\n            allOptions.find(option => option.value === value)?.click();\n        });\n\n        if (options.closePopover) {\n            await this.closePopover();\n            await waitForNextPaint();\n        }\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('selectedOptions')\n    selectedOptionsChanged(newValue) {\n        const { multiple } = this;\n        const firstValue = newValue?.[0]?.value ?? null;\n        if (multiple) {\n            if (this.value) this.value = null;\n            this.updateSelectedOptionElements();\n        } else if (this.value === firstValue) {\n            this.updateSelectedOptionElements();\n        } else {\n            this.value = firstValue;\n        }\n    }\n\n    @Watch('value')\n    async valueChanged(newValue) {\n        const { multiple, selectedOptions } = this;\n        if (multiple) return;\n        const firstValue = selectedOptions?.[0]?.value ?? null;\n        if (newValue === firstValue) this.updateSelectedOptionElements();\n        else {\n            const selectedOption = await this.getOption(newValue);\n            const { value, display } = selectedOption || { value: newValue, display: null };\n            this.selectedOptions = value ? [{ value, display }] : [];\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get buttonContent() {\n        const { label, selectedOptions, selectedOptionElements, optionCount } = this;\n\n        if (!optionCount || selectedOptionElements.length === 0) return loc(label);\n        else if (selectedOptionElements.length === 1) return loc(selectedOptionElements[0].display);\n\n        return loc('tecton.element.pill.activeCount', { count: selectedOptions.length });\n    }\n\n    get truncatedButtonContent() {\n        const { maxLength, buttonContent } = this;\n        if (maxLength && buttonContent.length > maxLength) return `${buttonContent.substring(0, maxLength)}…`;\n        else return buttonContent;\n    }\n\n    _togglePopover() {\n        const { primaryBtn } = this;\n        primaryBtn?.click();\n        primaryBtn?.focus();\n        primaryBtn.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    clearSelectedOptions = () => {\n        this.selectedOptions = [];\n        this.value = null;\n        this.active = false;\n        this.open = false;\n        this.primaryBtn.focus();\n        this.change.emit({ value: null, values: [], active: false });\n        this.scheduledAfterRender.push(resizeIframe);\n    };\n\n    determineOptionCount = async () => {\n        if (this.optionList) {\n            const allOptions = await this.optionList.getOptions();\n            this.optionCount = allOptions.length;\n        } else {\n            const numberOfOptions = this.hostElement.querySelectorAll('q2-option').length;\n            this.optionCount = numberOfOptions;\n        }\n    };\n\n    executeActionSheet = async (event: MouseEvent | KeyboardEvent) => {\n        const result = await showActionSheetList(this, event);\n        this.handleSelectionChanges(result);\n    };\n\n    getOption = async (value: string) => {\n        if (this.optionList) {\n            const options = await this.optionList.getOptions();\n            return options.find(option => option.value === value);\n        } else {\n            return this.hostElement.querySelector<HTMLQ2OptionElement>(`q2-option[value=\"${value}\"]`);\n        }\n    };\n\n    handleButtonFocusout = async (event: FocusEvent) => {\n        const relatedTarget = event.relatedTarget as unknown as HTMLElement;\n        if (relatedTarget?.tagName === 'Q2-OPTION') return;\n        this.open = false;\n    };\n\n    handleChange = event => {\n        event.stopPropagation();\n        if (!this.optionCount) return;\n        this.handleSelectionChanges(event.detail);\n    };\n\n    handleClick = async (event: MouseEvent) => {\n        event.stopPropagation();\n        if (this.disabled) return;\n        if (this.optionCount) {\n            if (shouldShowActionSheet(this)) {\n                this.executeActionSheet(event);\n            } else {\n                await this.popoverElement.toggle();\n            }\n        } else {\n            const { value, label } = this;\n            const isActive = (this.active = !this.active);\n            const values = isActive ? [{ value, display: label }] : [];\n            this.selectedOptions = values;\n            this.change.emit({\n                value,\n                values,\n                active: isActive,\n            });\n        }\n    };\n\n    handleKeydown = async (event: KeyboardEvent) => {\n        const isTabMetaOrCtrl = event.metaKey || event.ctrlKey || event.key === 'Tab';\n        if (!this.optionCount || this.disabled || isTabMetaOrCtrl) return;\n        event.preventDefault();\n        const hasSlot = this.hasPopoverTop || this.hasPopoverBottom;\n\n        // slots are incompatible with action sheet\n        if (shouldShowActionSheet(this, event) && !hasSlot) {\n            this.executeActionSheet(event);\n        } else {\n            this.optionList.handleExternalKeydown(event);\n        }\n    };\n\n    handleSelectionChanges = async (changeDetails: { value?: string; values?: IOptionValue[] }) => {\n        const { multiple } = this;\n        const { value = '', values = [] } = changeDetails;\n        const isActive = multiple ? !!values.length : !!value;\n        if (!this.hostElement.onchange) {\n            if (multiple) {\n                this.selectedOptions = values;\n                this.value = undefined;\n            } else {\n                const selectedOption = await this.getOption(value);\n                this.selectedOptions = selectedOption\n                    ? [{ value: selectedOption.value, display: selectedOption.display }]\n                    : [];\n                this.value = selectedOption?.value || undefined;\n            }\n        }\n\n        this.change.emit({\n            value: multiple ? undefined : value,\n            values,\n            active: isActive,\n        });\n    };\n\n    handleWrapperClick = () => {\n        this.primaryBtn.focus();\n        this.primaryBtn.click();\n    };\n\n    onClickElsewhere = (event: CustomEvent) => {\n        const target = event.target as HTMLClickElsewhereElement;\n        if (target.localName === 'click-elsewhere') {\n            event.stopPropagation();\n            const { popoverElement } = this;\n            if (!popoverElement) return;\n            popoverElement.open = false;\n        }\n    };\n\n    onMutationObserved = () => {\n        this.updateSlotState();\n        this.determineOptionCount();\n        this.updateSelectedOptionElements();\n    };\n\n    syncValueProperties = () => {\n        const { value, selectedOptions } = this;\n        if (!!selectedOptions?.length) this.selectedOptionsChanged(selectedOptions);\n        else if (value) this.valueChanged(value);\n    };\n\n    updateSelectedOptionElements = async () => {\n        const { selectedOptions = [] } = this;\n        const selectedValues = selectedOptions.map(option => option.value);\n        const options = await this.optionList?.getOptions();\n        if (this.optionCount) this.active = !!selectedValues.length;\n        this.selectedOptionElements = options?.filter(option => selectedValues.includes(option.value)) || [];\n    };\n\n    updateSlotState = () => {\n        const { hostElement, hasPopoverTop, hasPopoverBottom } = this;\n        const popTopSlot = hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"popover-top\"]');\n        const popBottomSlot = hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"popover-bottom\"]');\n        const topSlotHasNode = popTopSlot?.assignedNodes().length > 0;\n        const bottomSlotHasNode = popBottomSlot?.assignedNodes().length > 0;\n\n        if (hasPopoverTop !== topSlotHasNode) this.hasPopoverTop = topSlotHasNode;\n        if (hasPopoverBottom !== bottomSlotHasNode) this.hasPopoverBottom = bottomSlotHasNode;\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderHiddenElement() {\n        return (\n            <div\n                id=\"option-description\"\n                class=\"sr\"\n                aria-hidden=\"true\"\n            >\n                {loc('tecton.element.optionList.optionCount', [this.optionCount])}\n            </div>\n        );\n    }\n\n    renderIcon() {\n        const { optionCount, active } = this;\n        const isButton = optionCount && active;\n        const TagName = isButton ? 'button' : 'div';\n        const iconName = isButton || !optionCount ? 'close' : 'chevron-down';\n\n        return (\n            <TagName\n                class=\"btn-close\"\n                onClick={(isButton && this.clearSelectedOptions) || undefined}\n                disabled={(isButton && this.disabled) || undefined}\n                aria-label={(isButton && loc('tecton.element.pill.clearSelection')) || undefined}\n                type={(isButton && 'button') || undefined}\n            >\n                <q2-icon type={iconName}></q2-icon>\n            </TagName>\n        );\n    }\n\n    render() {\n        const { optionCount, active, open } = this;\n        const wrapperClassNames = ['btn-wrapper'];\n        if (optionCount || active) wrapperClassNames.push('has-icon');\n        if (optionCount) wrapperClassNames.push('has-options');\n\n        return (\n            <click-elsewhere onChange={this.onClickElsewhere}>\n                <div class={wrapperClassNames.join(' ')}>\n                    <div\n                        class=\"btn-height-wrapper\"\n                        ref={el => (this.primaryBtnWrapper = el)}\n                        onClick={this.handleWrapperClick}\n                        tabIndex={-1}\n                    >\n                        <button\n                            class=\"btn-primary\"\n                            test-id=\"btn-control\"\n                            type=\"button\"\n                            role={(optionCount && 'combobox') || undefined}\n                            ref={el => (this.primaryBtn = el)}\n                            onClick={this.handleClick}\n                            onKeyDown={this.handleKeydown}\n                            onFocusout={this.handleButtonFocusout}\n                            disabled={this.disabled}\n                            aria-roledescription={!optionCount && 'filter'}\n                            aria-controls={(optionCount && 'option-list') || undefined}\n                            aria-expanded={(optionCount && `${!!open}`) || undefined}\n                            aria-label={this.buttonContent}\n                            aria-describedby={(optionCount && 'option-description') || undefined}\n                        >\n                            {this.truncatedButtonContent}\n                            {!optionCount && active && <span class=\"sr\">({loc('tecton.element.pill.active')})</span>}\n                        </button>\n                    </div>\n                    {this.renderIcon()}\n                    {!!optionCount && this.renderHiddenElement()}\n                </div>\n                {this.optionCount > 0 && (\n                    <q2-popover\n                        ref={el => (this.popoverElement = el)}\n                        controlElement={this.primaryBtn}\n                        open={this.open}\n                        max-height={this.popoverMaxHeight}\n                        minHeight={this.popoverMinHeight}\n                        direction={this.popoverDirection}\n                        align={this.popoverAlignment}\n                    >\n                        <div class=\"popover-content\">\n                            <div\n                                ref={el => (this.popoverTopContainer = el)}\n                                class=\"popover-top-container\"\n                                tabindex=\"-1\"\n                                hidden={!this.hasPopoverTop}\n                                onKeyDown={this.handleKeydown}\n                            >\n                                <slot name=\"popover-top\"></slot>\n                            </div>\n                            <q2-option-list\n                                type=\"listbox\"\n                                ref={el => (this.optionList = el)}\n                                id=\"option-list\"\n                                onChange={this.handleChange}\n                                multiple={this.multiple}\n                                selectedOptions={this.selectedOptions}\n                                onReady={() => this.updateSelectedOptionElements()}\n                                label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n                            >\n                                <slot />\n                            </q2-option-list>\n                            <div\n                                ref={el => (this.popoverBottomContainer = el)}\n                                class=\"popover-bottom-container\"\n                                tabindex=\"-1\"\n                                hidden={!this.hasPopoverBottom}\n                                onKeyDown={this.handleKeydown}\n                            >\n                                <slot name=\"popover-bottom\"></slot>\n                            </div>\n                        </div>\n                    </q2-popover>\n                )}\n            </click-elsewhere>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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"}
+{"version":3,"names":["q2PillCss","Q2PillStyle0","Q2Pill","this","scheduledAfterRender","clearSelectedOptions","selectedOptions","value","active","open","primaryBtn","focus","change","emit","values","push","resizeIframe","determineOptionCount","async","optionList","allOptions","getOptions","optionCount","length","numberOfOptions","hostElement","querySelectorAll","executeActionSheet","event","result","showActionSheetList","handleSelectionChanges","getOption","options","find","option","querySelector","handleButtonFocusout","relatedTarget","tagName","handleChange","stopPropagation","detail","handleClick","disabled","shouldShowActionSheet","popoverElement","toggle","label","isActive","display","handleKeydown","isTabMetaOrCtrl","metaKey","ctrlKey","key","preventDefault","hasSlot","hasPopoverTop","hasPopoverBottom","handleExternalKeydown","changeDetails","multiple","onchange","undefined","selectedOption","handleWrapperClick","click","onClickElsewhere","target","localName","onMutationObserved","updateSlotState","updateSelectedOptionElements","syncValueProperties","selectedOptionsChanged","valueChanged","selectedValues","map","_a","selectedOptionElements","filter","includes","popTopSlot","shadowRoot","popBottomSlot","topSlotHasNode","assignedNodes","bottomSlotHasNode","window","Tecton","useActionSheets","disconnectedCallback","mutationObserver","disconnect","componentWillLoad","observer","MutationObserver","observe","childList","attributes","componentDidLoad","overrideFocus","componentDidRender","forEach","fn","handleSelectedDisplay","delegateFocus","isEventFromElement","popoverStateHandler","setActiveElement","closePopover","_togglePopover","openPopover","setValue","valueSet","Set","Array","isArray","waitForNextPaint","newValue","firstValue","_b","buttonContent","loc","count","truncatedButtonContent","maxLength","substring","dispatchEvent","FocusEvent","renderHiddenElement","h","id","class","renderIcon","isButton","TagName","iconName","onClick","type","render","wrapperClassNames","onChange","join","ref","el","primaryBtnWrapper","tabIndex","role","onKeyDown","onFocusout","controlElement","popoverMaxHeight","minHeight","popoverMinHeight","direction","popoverDirection","align","popoverAlignment","popoverTopContainer","tabindex","hidden","name","onReady","optionListLabel","popoverBottomContainer"],"sources":["src/components/q2-pill/q2-pill.scss?tag=q2-pill&encapsulation=shadow","src/components/q2-pill/q2-pill.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n    position: relative;\n    line-height: 0;\n}\n\n:host(:not(:last-child)) {\n    margin-inline-end: var-list(var-prefixer(pill-margin), --app-scale-2x, 10px);\n}\n\nq2-popover,\n.btn-wrapper {\n    --comp-pill-min-height: #{var-list(var-prefixer(pill-min-height), 44px)};\n    --comp-pill-btn-height: #{var-list(var-prefixer(pill-btn-height), 30px)};\n}\n\n.popover-top-container {\n    position: sticky;\n    top: 0;\n    z-index: 5;\n}\n\n.popover-bottom-container {\n    position: sticky;\n    bottom: 0;\n    z-index: 5;\n}\n\n.btn-wrapper {\n    --comp-pill-btn-border-width: #{var-list(var-prefixer(pill-btn-border-width), 2px)};\n    --comp-close-size: 0px;\n    --comp-btn-background: #{var-list(var-prefixer(pill-btn-background), --t-base, #ffffff)};\n    --comp-hover-btn-background: #{var-list(var-prefixer(pill-hover-btn-background), --t-gray-13, #e6e6e6)};\n    --comp-btn-padding: #{var-list(var-prefixer(pill-btn-padding-inline), --app-scale-3x, 15px)};\n    --comp-btn-color: #{var-list(var-prefixer(pill-btn-color), --t-gray-3, #262626)};\n    --comp-active-btn-color: var(--comp-btn-background);\n    --comp-active-btn-background: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-7, #666666)};\n    --comp-active-btn-border-color: #{var-list(var-prefixer(pill-active-btn-border-color), --t-gray-7, #666666)};\n    --comp-hover-active-btn-background: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-6, #4d4d4d)};\n    --comp-hover-active-btn-border-color: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-6, #4d4d4d)};\n\n    position: relative;\n\n    &.has-options,\n    &.has-icon {\n        --comp-close-size: var(--comp-pill-btn-height);\n    }\n\n    :host([active]) & {\n        --comp-btn-color: #{var-list(var-prefixer(pill-active-btn-color), --t-base, #ffffff)};\n    }\n\n    :host([theme='primary']) & {\n        --comp-active-btn-background: #{var-list(--tct-pill-primary-active-background, --t-primary, #0079c1)};\n        --comp-active-btn-color: #{var-list(--tct-pill-primary-active-font-color, --t-primary-text, #ffffff)};\n        --comp-active-btn-border-color: #{var-list(--tct-pill-primary-active-border-color, --t-primary, #0079c1)};\n        --comp-hover-active-btn-background: #{var-list(\n                --tct-pill-primary-active-hover-background,\n                --t-primary-l3,\n                #21acff\n            )};\n        --comp-hover-active-btn-border-color: #{var-list(\n                --tct-pill-primary-active-hover-border-color,\n                --t-primary-l3,\n                #21acff\n            )};\n    }\n\n    :host([theme='secondary']) & {\n        --comp-active-btn-background: #{var-list(--tct-pill-secondary-active-background, --t-secondary, #b3c2cc)};\n        --comp-active-btn-color: #{var-list(--tct-pill-secondary-active-font-color, --t-secondary-text, #141414)};\n        --comp-active-btn-border-color: #{var-list(--tct-pill-secondary-active-border-color, --t-secondary, #b3c2cc)};\n        --comp-hover-active-btn-background: #{var-list(\n                --tct-pill-secondary-active-hover-background,\n                --t-secondary-l3,\n                #c9d5db\n            )};\n        --comp-hover-active-btn-border-color: #{var-list(\n                --tct-pill-secondary-active-hover-border-color,\n                --t-secondary-l3,\n                #c9d5db\n            )};\n    }\n\n    :host([theme='tertiary']) & {\n        --comp-active-btn-background: #{var-list(--tct-pill-tertiary-active-background, --t-tertiary, #e8f5fc)};\n        --comp-active-btn-color: #{var-list(--tct-pill-tertiary-active-font-color, --t-tertiary-text, #141414)};\n        --comp-active-btn-border-color: #{var-list(--tct-pill-tertiary-active-border-color, --t-tertiary, #e8f5fc)};\n        --comp-hover-active-btn-background: #{var-list(\n                --tct-pill-tertiary-active-hover-background,\n                --t-tertiary-l3,\n                #eff8fd\n            )};\n        --comp-hover-active-btn-border-color: #{var-list(\n                --tct-pill-tertiary-active-hover-border-color,\n                --t-tertiary-l3,\n                #eff8fd\n            )};\n    }\n}\n\n.btn-height-wrapper {\n    height: var(--comp-pill-min-height);\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    &:focus {\n        box-shadow: none;\n    }\n\n    :host([disabled]) & {\n        cursor: not-allowed;\n    }\n}\n\n.btn-close,\n.btn-primary {\n    cursor: pointer;\n    height: var(--comp-pill-btn-height);\n    border-style: solid;\n    border-radius: var-list(var-prefixer(pill-btn-border-radius), 30px);\n    transition-property: background, color, padding, width, opacity;\n    transition: var-list(var-prefixer(pill-btn-tween), --app-tween-1, unquote('0.2s ease'));\n}\n\n.btn-close,\n.btn-primary,\nq2-icon {\n    :host([disabled]) & {\n        opacity: var-list(var-prefixer(pill-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n        cursor: not-allowed;\n    }\n}\n\n.btn-primary {\n    background: var(--comp-btn-background);\n    border-width: var-list(--comp-pill-btn-border-width);\n    border-color: var-list(var-prefixer(pill-btn-border-color), --t-a11y-gray-color-AA, #949494);\n    padding-inline: var(--comp-btn-padding);\n    padding-right: calc(var(--comp-btn-padding) + var(--comp-close-size));\n    font-size: var-list(var-prefixer(pill-btn-font-size), --app-font-size, 14px);\n    color: var(--comp-btn-color);\n    display: block;\n    width: 100%;\n    text-align: start;\n\n    &:focus,\n    &:hover {\n        background: var(--comp-hover-btn-background);\n    }\n\n    .has-options &,\n    .has-icon & {\n        padding-right: calc(#{var-list(var-prefixer(pill-icon-gap), --app-scale-1x, 5px)} + var(--comp-close-size));\n    }\n\n    .has-options & {\n        @include line-clamp(1);\n        max-width: var-list(var-prefixer(pill-max-width), 200px);\n    }\n\n    :host([active]) & {\n        background: var(--comp-active-btn-background);\n        border-color: var(--comp-active-btn-border-color);\n        color: var(--comp-active-btn-color);\n\n        &:focus,\n        &:hover {\n            background: var(--comp-hover-active-btn-background);\n            border-color: var(--comp-hover-active-btn-border-color);\n        }\n    }\n}\n\n.btn-close {\n    background: transparent;\n    border-color: transparent;\n    border-width: var(--comp-pill-btn-border-width);\n    width: var(--comp-close-size);\n    height: var(--comp-close-size);\n    padding: 0;\n    border: 0;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    position: absolute;\n    right: 0;\n    top: 50%;\n    transform: translateY(-50%);\n    opacity: 0;\n    :host([active]) & {\n        color: var(--comp-active-btn-color);\n    }\n\n    .has-options &,\n    .has-icon & {\n        opacity: 1;\n    }\n}\n\nq2-icon {\n    --t-icon-stroke-primary: currentcolor;\n    width: var-list(var-prefixer(pill-icon-size), 14px);\n    height: var-list(var-prefixer(pill-icon-size), 14px);\n    transition-property: transform;\n    transition: var-list(var-prefixer(pill-btn-tween), --app-tween-1, unquote('0.2s ease'));\n}\n\ndiv.btn-close {\n    pointer-events: none;\n\n    :host([open]) & q2-icon {\n        transform: rotate(180deg);\n    }\n}\n\nbutton.btn-close {\n    :host([active]) & {\n        &:focus,\n        &:hover {\n            background: var-list(var-prefixer(pill-hover-close-btn-background), --t-top-a1, rgba(13, 13, 13, 0.35));\n            border-color: var-list(var-prefixer(pill-hover-close-btn-border-color), --t-top-a1, rgba(13, 13, 13, 0.35));\n        }\n    }\n}\n\nq2-popover {\n    top: calc(var(--comp-pill-min-height) - calc(calc(var(--comp-pill-min-height) - var(--comp-pill-btn-height)) / 2));\n}\n\n:host([borderless]:not([borderless='false'])) {\n    button {\n        border-style: none;\n    }\n}\n","import {\n    Component,\n    State,\n    Prop,\n    h,\n    ComponentInterface,\n    Listen,\n    Watch,\n    Element,\n    EventEmitter,\n    Event,\n    Method,\n} from '@stencil/core';\nimport { isEventFromElement, loc, overrideFocus, resizeIframe, waitForNextPaint } from 'src/utils';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\nimport { IOptionValue } from '../q2-option-list/q2-option-list';\n\n@Component({ tag: 'q2-pill', shadow: true, styleUrl: 'q2-pill.scss' })\nexport class Q2Pill implements ComponentInterface {\n    // #region Own Properties\n\n    mutationObserver: MutationObserver;\n    optionList: HTMLQ2OptionListElement;\n    popoverBottomContainer: HTMLElement;\n    popoverElement: HTMLQ2PopoverElement;\n    popoverTopContainer: HTMLElement;\n    primaryBtn: HTMLButtonElement;\n    primaryBtnWrapper: HTMLElement;\n    scheduledAfterRender: (() => void)[] = [];\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    hasPopoverBottom = false;\n\n    @State()\n    hasPopoverTop = false;\n\n    @State()\n    optionCount: number;\n\n    @State()\n    selectedOptionElements: HTMLQ2OptionElement[] = [];\n\n    // #endregion\n    // #region Public Property API\n\n    /** Determine if the elements is in the selected state, with values. */\n    @Prop({ reflect: true, mutable: true })\n    active: boolean;\n\n    /** Indicates that the pill has no border */\n    @Prop({ reflect: true })\n    borderless: boolean;\n\n    /** Indicates the pill cannot be focused or interacted with. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * Instructs the component to use the action sheet workflow for displaying its options.\n     *\n     * For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).\n     */\n    @Prop()\n    hoist: boolean = !!window.Tecton?.useActionSheets;\n\n    /**\n     * The text that populates the label.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /**\n     * The maximum number of characters to display before ellipcizing.\n     * @info\n     * Limitless by default.\n     */\n    @Prop({ reflect: true })\n    maxLength: number;\n\n    /**\n     * Enables the multi-select ability for the dropdown.\n     * @info\n     * Only applicable when options are provided.\n     */\n    @Prop({ reflect: true })\n    multiple: boolean;\n\n    /**\n     * Determine whether the popover is open or closed.\n     *\n     * @readonly\n     */\n    @Prop({ reflect: true, mutable: true })\n    open: boolean;\n\n    /** Determines the label that is applied to the option list for accessibility purposes. */\n    @Prop()\n    optionListLabel: string;\n\n    /** Aligns the popover dropdown to the left or right side of the input field. */\n    @Prop({ mutable: true })\n    popoverAlignment: 'left' | 'right' = 'right';\n\n    /**\n     * Force the direction of the popover dropdown when it opens.\n     * If no value is passed, the component will auto-detect the direction based on available space.\n     */\n    @Prop()\n    popoverDirection: 'up' | 'down';\n\n    /**\n     * Force the maximum height of the popover. This value will be interpreted as pixels.\n     * If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.\n     */\n    @Prop()\n    popoverMaxHeight: number;\n\n    /** @deprecated */\n    @Prop()\n    popoverMinHeight: number = 150;\n\n    /** A list of the selected options on the element. */\n    @Prop({ mutable: true })\n    selectedOptions: IOptionValue[] = [];\n\n    /** The color of the element when in the active state. */\n    @Prop({ reflect: true })\n    theme: 'primary' | 'secondary' | 'tertiary';\n\n    /** The value emitted when the component is selected. */\n    @Prop({ reflect: true, mutable: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the pill is clicked or the selected options change.\n     *\n     * When multi-select is enabled, `value` will be `undefined`.\n     * @legacyEvent\n     */\n    @Event()\n    change: EventEmitter<{ value: string; values: IOptionValue[]; active: boolean }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, attributes: true });\n        this.mutationObserver = observer;\n    }\n\n    componentDidLoad() {\n        overrideFocus(this.hostElement);\n        this.syncValueProperties();\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('displayChanged')\n    handleSelectedDisplay() {\n        if (this.multiple) return;\n        this.updateSelectedOptionElements();\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.primaryBtn.focus();\n    }\n\n    @Listen('popoverStateChanged')\n    popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n        if (this.open !== open) this.open = open;\n        if (open) return;\n        this.optionList.setActiveElement(null);\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking the `<button>` to hide the popover if it is visible.\n     *\n     * @testOnly\n     */\n    @Method()\n    async closePopover() {\n        if (!this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates clicking the `<button>` to display the popover if it is hidden.\n     *\n     * @testOnly\n     */\n    @Method()\n    async openPopover() {\n        if (this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates clicking the `<button>` to display the popover and selecting the option(s) with the specified value(s).\n     *\n     * If multi-select is enabled and the `closePopover` argument is `true` (default), the popover will be closed\n     * after the option(s) are selected.\n     *\n     * @testOnly\n     */\n    @Method()\n    async setValue(values: string | string[], options: { closePopover?: boolean } = { closePopover: true }) {\n        const valueSet = new Set(Array.isArray(values) ? values : [values]);\n        const allOptions: HTMLQ2OptionElement[] = await this.optionList?.getOptions();\n        if (!this.open) {\n            await this.openPopover();\n            await waitForNextPaint();\n        }\n\n        valueSet.forEach(value => {\n            allOptions.find(option => option.value === value)?.click();\n        });\n\n        if (options.closePopover) {\n            await this.closePopover();\n            await waitForNextPaint();\n        }\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('selectedOptions')\n    selectedOptionsChanged(newValue) {\n        const { multiple } = this;\n        const firstValue = newValue?.[0]?.value ?? null;\n        if (multiple) {\n            if (this.value) this.value = null;\n            this.updateSelectedOptionElements();\n        } else if (this.value === firstValue) {\n            this.updateSelectedOptionElements();\n        } else {\n            this.value = firstValue;\n        }\n    }\n\n    @Watch('value')\n    async valueChanged(newValue) {\n        const { multiple, selectedOptions } = this;\n        if (multiple) return;\n        const firstValue = selectedOptions?.[0]?.value ?? null;\n        if (newValue === firstValue) this.updateSelectedOptionElements();\n        else {\n            const selectedOption = await this.getOption(newValue);\n            const { value, display } = selectedOption || { value: newValue, display: null };\n            this.selectedOptions = value ? [{ value, display }] : [];\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get buttonContent() {\n        const { label, selectedOptions, selectedOptionElements, optionCount } = this;\n\n        if (!optionCount || selectedOptionElements.length === 0) return loc(label);\n        else if (selectedOptionElements.length === 1) return loc(selectedOptionElements[0].display);\n\n        return loc('tecton.element.pill.activeCount', { count: selectedOptions.length });\n    }\n\n    get truncatedButtonContent() {\n        const { maxLength, buttonContent } = this;\n        if (maxLength && buttonContent.length > maxLength) return `${buttonContent.substring(0, maxLength)}…`;\n        else return buttonContent;\n    }\n\n    _togglePopover() {\n        const { primaryBtn } = this;\n        primaryBtn?.click();\n        primaryBtn?.focus();\n        primaryBtn.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    clearSelectedOptions = () => {\n        this.selectedOptions = [];\n        this.value = null;\n        this.active = false;\n        this.open = false;\n        this.primaryBtn.focus();\n        this.change.emit({ value: null, values: [], active: false });\n        this.scheduledAfterRender.push(resizeIframe);\n    };\n\n    determineOptionCount = async () => {\n        if (this.optionList) {\n            const allOptions = await this.optionList.getOptions();\n            this.optionCount = allOptions.length;\n        } else {\n            const numberOfOptions = this.hostElement.querySelectorAll('q2-option').length;\n            this.optionCount = numberOfOptions;\n        }\n    };\n\n    executeActionSheet = async (event: MouseEvent | KeyboardEvent) => {\n        const result = await showActionSheetList(this, event);\n        this.handleSelectionChanges(result);\n    };\n\n    getOption = async (value: string) => {\n        if (this.optionList) {\n            const options = await this.optionList.getOptions();\n            return options.find(option => option.value === value);\n        } else {\n            return this.hostElement.querySelector<HTMLQ2OptionElement>(`q2-option[value=\"${value}\"]`);\n        }\n    };\n\n    handleButtonFocusout = async (event: FocusEvent) => {\n        const relatedTarget = event.relatedTarget as unknown as HTMLElement;\n        if (relatedTarget?.tagName === 'Q2-OPTION') return;\n        this.open = false;\n    };\n\n    handleChange = event => {\n        event.stopPropagation();\n        if (!this.optionCount) return;\n        this.handleSelectionChanges(event.detail);\n    };\n\n    handleClick = async (event: MouseEvent) => {\n        event.stopPropagation();\n        if (this.disabled) return;\n        if (this.optionCount) {\n            if (shouldShowActionSheet(this)) {\n                this.executeActionSheet(event);\n            } else {\n                await this.popoverElement.toggle();\n            }\n        } else {\n            const { value, label } = this;\n            const isActive = (this.active = !this.active);\n            const values = isActive ? [{ value, display: label }] : [];\n            this.selectedOptions = values;\n            this.change.emit({\n                value,\n                values,\n                active: isActive,\n            });\n        }\n    };\n\n    handleKeydown = async (event: KeyboardEvent) => {\n        const isTabMetaOrCtrl = event.metaKey || event.ctrlKey || event.key === 'Tab';\n        if (!this.optionCount || this.disabled || isTabMetaOrCtrl) return;\n        event.preventDefault();\n        const hasSlot = this.hasPopoverTop || this.hasPopoverBottom;\n\n        // slots are incompatible with action sheet\n        if (shouldShowActionSheet(this, event) && !hasSlot) {\n            this.executeActionSheet(event);\n        } else {\n            this.optionList.handleExternalKeydown(event);\n        }\n    };\n\n    handleSelectionChanges = async (changeDetails: { value?: string; values?: IOptionValue[] }) => {\n        const { multiple } = this;\n        const { value = '', values = [] } = changeDetails;\n        const isActive = multiple ? !!values.length : !!value;\n        if (!this.hostElement.onchange) {\n            if (multiple) {\n                this.selectedOptions = values;\n                this.value = undefined;\n            } else {\n                const selectedOption = await this.getOption(value);\n                this.selectedOptions = selectedOption\n                    ? [{ value: selectedOption.value, display: selectedOption.display }]\n                    : [];\n                this.value = selectedOption?.value || undefined;\n            }\n        }\n\n        this.change.emit({\n            value: multiple ? undefined : value,\n            values,\n            active: isActive,\n        });\n    };\n\n    handleWrapperClick = () => {\n        this.primaryBtn.focus();\n        this.primaryBtn.click();\n    };\n\n    onClickElsewhere = (event: CustomEvent) => {\n        const target = event.target as HTMLClickElsewhereElement;\n        if (target.localName === 'click-elsewhere') {\n            event.stopPropagation();\n            const { popoverElement } = this;\n            if (!popoverElement) return;\n            popoverElement.open = false;\n        }\n    };\n\n    onMutationObserved = () => {\n        this.updateSlotState();\n        this.determineOptionCount();\n        this.updateSelectedOptionElements();\n    };\n\n    syncValueProperties = () => {\n        const { value, selectedOptions } = this;\n        if (!!selectedOptions?.length) this.selectedOptionsChanged(selectedOptions);\n        else if (value) this.valueChanged(value);\n    };\n\n    updateSelectedOptionElements = async () => {\n        const { selectedOptions = [] } = this;\n        const selectedValues = selectedOptions.map(option => option.value);\n        const options = await this.optionList?.getOptions();\n        if (this.optionCount) this.active = !!selectedValues.length;\n        this.selectedOptionElements = options?.filter(option => selectedValues.includes(option.value)) || [];\n    };\n\n    updateSlotState = () => {\n        const { hostElement, hasPopoverTop, hasPopoverBottom } = this;\n        const popTopSlot = hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"popover-top\"]');\n        const popBottomSlot = hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"popover-bottom\"]');\n        const topSlotHasNode = popTopSlot?.assignedNodes().length > 0;\n        const bottomSlotHasNode = popBottomSlot?.assignedNodes().length > 0;\n\n        if (hasPopoverTop !== topSlotHasNode) this.hasPopoverTop = topSlotHasNode;\n        if (hasPopoverBottom !== bottomSlotHasNode) this.hasPopoverBottom = bottomSlotHasNode;\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderHiddenElement() {\n        return (\n            <div\n                id=\"option-description\"\n                class=\"sr\"\n                aria-hidden=\"true\"\n            >\n                {loc('tecton.element.optionList.optionCount', [this.optionCount])}\n            </div>\n        );\n    }\n\n    renderIcon() {\n        const { optionCount, active } = this;\n        const isButton = optionCount && active;\n        const TagName = isButton ? 'button' : 'div';\n        const iconName = isButton || !optionCount ? 'close' : 'chevron-down';\n\n        return (\n            <TagName\n                class=\"btn-close\"\n                onClick={(isButton && this.clearSelectedOptions) || undefined}\n                disabled={(isButton && this.disabled) || undefined}\n                aria-label={(isButton && loc('tecton.element.pill.clearSelection')) || undefined}\n                type={(isButton && 'button') || undefined}\n            >\n                <q2-icon type={iconName}></q2-icon>\n            </TagName>\n        );\n    }\n\n    render() {\n        const { optionCount, active, open } = this;\n        const wrapperClassNames = ['btn-wrapper'];\n        if (optionCount || active) wrapperClassNames.push('has-icon');\n        if (optionCount) wrapperClassNames.push('has-options');\n\n        return (\n            <click-elsewhere onChange={this.onClickElsewhere}>\n                <div class={wrapperClassNames.join(' ')}>\n                    <div\n                        class=\"btn-height-wrapper\"\n                        ref={el => (this.primaryBtnWrapper = el)}\n                        onClick={this.handleWrapperClick}\n                        tabIndex={-1}\n                    >\n                        <button\n                            class=\"btn-primary\"\n                            test-id=\"btn-control\"\n                            type=\"button\"\n                            role={(optionCount && 'combobox') || undefined}\n                            ref={el => (this.primaryBtn = el)}\n                            onClick={this.handleClick}\n                            onKeyDown={this.handleKeydown}\n                            onFocusout={this.handleButtonFocusout}\n                            disabled={this.disabled}\n                            aria-roledescription={!optionCount && 'filter'}\n                            aria-controls={(optionCount && 'option-list') || undefined}\n                            aria-expanded={(optionCount && `${!!open}`) || undefined}\n                            aria-label={this.buttonContent}\n                            aria-describedby={(optionCount && 'option-description') || undefined}\n                        >\n                            {this.truncatedButtonContent}\n                            {!optionCount && active && <span class=\"sr\">({loc('tecton.element.pill.active')})</span>}\n                        </button>\n                    </div>\n                    {this.renderIcon()}\n                    {!!optionCount && this.renderHiddenElement()}\n                </div>\n                {this.optionCount > 0 && (\n                    <q2-popover\n                        ref={el => (this.popoverElement = el)}\n                        controlElement={this.primaryBtn}\n                        open={this.open}\n                        max-height={this.popoverMaxHeight}\n                        minHeight={this.popoverMinHeight}\n                        direction={this.popoverDirection}\n                        align={this.popoverAlignment}\n                    >\n                        <div class=\"popover-content\">\n                            <div\n                                ref={el => (this.popoverTopContainer = el)}\n                                class=\"popover-top-container\"\n                                tabindex=\"-1\"\n                                hidden={!this.hasPopoverTop}\n                                onKeyDown={this.handleKeydown}\n                            >\n                                <slot name=\"popover-top\"></slot>\n                            </div>\n                            <q2-option-list\n                                type=\"listbox\"\n                                ref={el => (this.optionList = el)}\n                                id=\"option-list\"\n                                onChange={this.handleChange}\n                                multiple={this.multiple}\n                                selectedOptions={this.selectedOptions}\n                                onReady={() => this.updateSelectedOptionElements()}\n                                label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n                            >\n                                <slot />\n                            </q2-option-list>\n                            <div\n                                ref={el => (this.popoverBottomContainer = el)}\n                                class=\"popover-bottom-container\"\n                                tabindex=\"-1\"\n                                hidden={!this.hasPopoverBottom}\n                                onKeyDown={this.handleKeydown}\n                            >\n                                <slot name=\"popover-bottom\"></slot>\n                            </div>\n                        </div>\n                    </q2-popover>\n                )}\n            </click-elsewhere>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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"}

package/dist/q2-tecton-elements/q2-select.entry.js

@@ -132,7 +132,6 @@ const b = class {
     this.hasCustomDisplay = false;
     this.hasPopoverBottom = false;
     this.hasPopoverTop = false;
-    this.inputField = undefined;
     this.inputFocused = false;
     this.open = false;
     this.prioritizeSearch = false;
@@ -542,7 +541,7 @@ const b = class {
   renderOptionsDropdown() {
     return i("q2-popover", {
       ref: t => this.popoverElement = t,
-      controlElement: this.inputField,
+      controlElement: this.innerInputContainer,
       open: this.open,
       "max-height": this.popoverMaxHeight,
       minHeight: this.popoverMinHeight,
@@ -616,17 +615,17 @@ const b = class {
   render() {
     var t;
     return i("click-elsewhere", {
-      key: "c9478c6061b87d0f7c0590a8135d69408534c4d4",
+      key: "8db2d73f63fcc98a05a98f6fcbfeb8d0fa5a5f8a",
       class: this.wrapperClasses,
       onChange: this.clickedElsewhere
     }, i("div", {
-      key: "a52c90a0014b752743707be50b3ae0a4b49c3a7a",
+      key: "b518a4ee41bda2fa4d2245f99ea0df884c52d7b6",
       "aria-live": "polite",
       "aria-atomic": "true",
       role: "status",
       class: "sr"
     }, this.statusMessage), i("q2-input", {
-      key: "5093b5dbc49a2ad20726313f6f1f98a0b8c82871",
+      key: "17769ac91077819d5abb5d8c08e20fe71d449b2a",
       ref: t => this.inputField = t,
       class: "q2-select-input",
       label: this.label && o(this.label) || "",
@@ -655,12 +654,12 @@ const b = class {
       _role: "combobox",
       _preventEntry: !this.searchable
     }, this.renderCustomDisplay()), i("div", {
-      key: "950b2786d4e641a64eb20118bee882cc94bc4b3e",
+      key: "8871ea56782cd477c70815d1ba38c51a9c9e8f90",
       class: "custom-display-content",
       hidden: !this.hasCustomDisplay || !!this.searchText,
       onClick: this.onCustomDisplayClick
     }, i("slot", {
-      key: "92b13e80f4643421cc7101304954f0bc7635c26c",
+      key: "05a524b05b18ab0c85c9d57930a81959738c3db1",
       name: "q2-select-display"
     })), this.renderOptionsDropdown());
   }