q2-tecton-elements 1.52.2 → 1.53.0

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    /**\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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"}
+{"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","handleFocusOut","relatedTarget","_a","popoverElement","contains","handleChange","stopPropagation","detail","handleClick","disabled","shouldShowActionSheet","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","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.primaryBtn.focus();\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    handleFocusOut = async (event: FocusEvent) => {\n        const relatedTarget = event.relatedTarget as unknown as HTMLElement;\n        if (this.popoverElement?.contains(relatedTarget)) return;\n        if (this.hostElement.contains(relatedTarget)) return;\n        this.open = false;\n    };\n\n    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.handleFocusOut}\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                        onFocusout={this.handleFocusOut}\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

@@ -486,6 +486,7 @@ const b = class {
   }
   async executeActionSheet(t) {
     const e = await p(this, t);
+    this.focusInput();
     this.handleSelectionChanges(e);
   }
   focusInput() {
@@ -615,17 +616,17 @@ const b = class {
   render() {
     var t;
     return i("click-elsewhere", {
-      key: "8db2d73f63fcc98a05a98f6fcbfeb8d0fa5a5f8a",
+      key: "086f236ba533a899213d2c3228da46a3ea64cd15",
       class: this.wrapperClasses,
       onChange: this.clickedElsewhere
     }, i("div", {
-      key: "b518a4ee41bda2fa4d2245f99ea0df884c52d7b6",
+      key: "1019408b559337bfc78ded5f3d04b6d9a50744fe",
       "aria-live": "polite",
       "aria-atomic": "true",
       role: "status",
       class: "sr"
     }, this.statusMessage), i("q2-input", {
-      key: "17769ac91077819d5abb5d8c08e20fe71d449b2a",
+      key: "a73912ac487196dafe5813fbbe1c347e37076239",
       ref: t => this.inputField = t,
       class: "q2-select-input",
       label: this.label && o(this.label) || "",
@@ -654,12 +655,12 @@ const b = class {
       _role: "combobox",
       _preventEntry: !this.searchable
     }, this.renderCustomDisplay()), i("div", {
-      key: "8871ea56782cd477c70815d1ba38c51a9c9e8f90",
+      key: "88844f3c07fcfa3f5bf2a6170505aab7e25860b2",
       class: "custom-display-content",
       hidden: !this.hasCustomDisplay || !!this.searchText,
       onClick: this.onCustomDisplayClick
     }, i("slot", {
-      key: "05a524b05b18ab0c85c9d57930a81959738c3db1",
+      key: "8b1ba9e210a8a2e7fe9e82a293373881ae2c7dcd",
       name: "q2-select-display"
     })), this.renderOptionsDropdown());
   }

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

@@ -1 +1 @@
-{"version":3,"names":["q2SelectCss","Q2SelectStyle0","Q2Select","this","scheduledAfterRender","clickedElsewhere","event","target","localName","stopPropagation","inputBlurHandler","inputFocused","inputChangeHandler","inputClickHandler","async","shouldShowActionSheet","executeActionSheet","toggleDropdown","focusInput","inputFocusHandler","inputInputHandler","eventValue","detail","value","shouldClearValue","clearValue","open","openDropdownWithoutActiveElement","prioritizeSearch","searchText","input","emit","query","inputKeydownHandler","readonly","disabled","key","shiftKey","isShiftTab","hasSlot","hasPopoverTop","hasPopoverBottom","keysForOptionListToHandle","searchable","inputField","preventDefault","includes","shouldClearSearchText","clearSearchText","optionList","handleExternalKeydown","onCustomDisplayClick","onMutationObserved","hostElement","slotContainer","querySelector","displaySlot","shadowRoot","hasCustomDisplay","assignedNodes","length","children","popTopSlot","topSlotHasNode","popBottomSlot","bottomSlotHasNode","checkSelectedOptions","onOptionListChange","values","showAllOptions","handleSelectionChanges","onPopoverState","action","setActiveElement","focus","showSelected","showSelectedOptions","visibilityToggleKeyDown","isRadioControlKey","setDefaultActiveElement","_a","window","Tecton","useActionSheets","loc","disconnectedCallback","mutationObserver","disconnect","componentWillLoad","handleAriaLabel","buildStructuredSelectedOptions","handleMultilineOptionsUpdate","multilineOptions","componentDidLoad","observer","MutationObserver","observe","childList","subtree","overrideFocus","setTimeout","checkSelectedDisplay","componentDidRender","forEach","fn","onHostElementChange","onchange","multiple","selectedOptions","onClearHandler","handleSelectedDisplay","display","delegateFocus","fromHost","isRelatedTargetWithinHost","clearSelectedDisplay","isEventFromElement","handleFocusout","isLeavingHost","isHostLosingFocus","closeDropdown","onHostElementInput","oninput","options","optionElements","trim","toLocaleLowerCase","matchedCount","option","hidden","title","firstElementChild","tagName","innerText","searchParams","matched","some","text","statusMessageLocString","count","setStatusMessage","keydownHandler","closePopover","_togglePopover","openPopover","searchOptions","innerInputField","dispatchEvent","FocusEvent","InputEvent","setValue","valuesSet","Set","Array","isArray","waitForNextPaint","find","click","ariaLabelObserver","newValue","oldValue","element","multiline","openChanged","isOpen","push","popoverTopContainer","popoverElement","height","offsetHeight","style","setProperty","removeProperty","structuredSelectedOptions","map","valueUpdated","badgeValue","optionsLength","_b","firstSelectedOptionElement","firstSelectedValue","innerInputContainer","from","querySelectorAll","popoverMinHeight","minRows","firstOption","minHeight","getComputedStyle","parseInt","selectedDisplay","calculateMultiSelectSelectedDisplay","calculateSingleSelectSelectedDisplay","selectedDisplaySlot","wrapperClasses","errors","classes","join","_c","textContent","namedSlot","hasNoValue","selectionClone","cloneNode","remove","clientHeight","outerHTML","replaceChild","document","createElement","slot","appendChild","checkSelectedDisplayHeight","selected","change","undefined","result","showActionSheetList","changeDetails","selectedOptionValues","message","clearTimeout","statusMessageTimer","statusMessage","renderCustomDisplay","hasSelectedDisplay","h","name","renderOptionsDropdown","ref","el","controlElement","popoverMaxHeight","direction","popDirection","mode","popoverMode","block","class","type","id","label","listLabel","onChange","tabindex","renderVisibilityToggle","selectedOptionsCount","checked","onClick","onKeyDown","htmlFor","render","role","clearable","error","invalid","optional","placeholder","hideLabel","ariaExpanded","ariaControls","ariaHaspopup","iconRight","onInput","onFocus","onBlur","badgeTheme","_role","_preventEntry"],"sources":["src/components/q2-select/q2-select.scss?tag=q2-select&encapsulation=shadow","src/components/q2-select/q2-select.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../../styles/dropdowns';\n\n:host {\n    --comp-select-margin: #{var-list(\n            --tct-select-margin,\n            unquote(\n                '#{var-list(var-prefixer(select-margin-top), --app-scale-4, 30px)} 0 #{var-list(var-prefixer(select-margin-bottom), --app-scale-4, 30px)}'\n            )\n        )};\n    display: block;\n    margin: var(--comp-select-margin);\n}\n\n.q2-select-container {\n    position: relative;\n    display: block;\n}\n\n.q2-select-input {\n    margin: 0;\n\n    --tct-input-min-height: #{var-list(var-prefixer(select-input-min-height))};\n    --tct-input-max-height: #{var-list(var-prefixer(select-input-max-height), none)};\n}\n\n::slotted([slot='_selected-display']) {\n    width: 100%;\n    min-height: var(--comp-selected-display-height, 44px);\n}\n\n.custom-display-content {\n    position: absolute;\n    bottom: 0;\n    left: calc(var-list(--tct-scale-2, --app-scale-2x, 10px) + 1px);\n    height: 44px;\n    width: calc(100% - 34px - var-list(--tct-scale-3, --app-scale-3x, 15px));\n    overflow: hidden;\n    cursor: pointer;\n    transition: left var-list(--tct-tween-2, --app-tween-1, unquote('0.2s ease'));\n}\n\n.custom-display-content:not([hidden]) {\n    display: flex;\n    align-items: center;\n}\n\n.is-searchable.is-focused .custom-display-content,\n.is-searchable .custom-display-content:active {\n    left: calc(var-list(--tct-scale-3, --app-scale-3x, 15px) + 1px);\n}\n\n.has-error .custom-display-content {\n    width: calc(100% - 68px - var-list(--tct-scale-3, --app-scale-3x, 15px));\n}\n\n.popover-content {\n    display: flex;\n    flex-direction: column-reverse;\n}\n\n.popover-bottom-container {\n    position: sticky;\n    bottom: 0;\n    z-index: 5;\n}\n\n.popover-top-container {\n    position: sticky;\n    top: 0;\n    z-index: 5;\n    .multi-select-header {\n        padding: var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-2, var(--app-scale-2x, 10px));\n        background: var(--app-white);\n        display: flex;\n        gap: var-list(--app-scale-2x, 10px);\n        align-items: center;\n\n        fieldset {\n            margin: 0;\n            padding: 0;\n            border: 0;\n            display: flex;\n            gap: var-list(--app-scale-2x, 10px);\n        }\n\n        legend {\n            padding: 0;\n            float: left;\n        }\n\n        label {\n            cursor: pointer;\n            padding: var-list(\n                var-prefixer(select-multi-select-option-padding),\n                var-prefixer(btn-badge-padding),\n                unquote('2px 5px')\n            );\n            font-size: var-list(\n                var-prefixer(select-multi-select-option-font-size),\n                var-prefixer(btn-badge-font-size),\n                inherit\n            );\n            border-radius: var-list(\n                var-prefixer(select-multi-select-option-radius),\n                var-prefixer(btn-badge-border-radius),\n                --app-border-radius-1,\n                4px\n            );\n            background: var-list(\n                --tct-select-multi-select-option-background,\n                var-prefixer(select-multi-select-option-bg),\n                --tct-badge-background,\n                var-prefixer(btn-badge-bg),\n                transparent\n            );\n            color: var-list(\n                var-prefixer(select-multi-select-option-color),\n                var-prefixer(btn-badge-font-color),\n                inherit\n            );\n\n            &:hover {\n                background: var-list(\n                    --tct-select-multi-select-option-hover-background,\n                    var-prefixer(select-multi-select-option-hover-background-color),\n                    var-prefixer(btn-badge-hover-bg),\n                    var-prefixer(gray-14),\n                    --app-gray-l3,\n                    #f2f2f2\n                );\n                color: var-list(\n                    --tct-select-multi-select-option-hover-color,\n                    var-prefixer(select-multi-select-option-color),\n                    var-prefixer(btn-badge-hover-font-color),\n                    var-prefixer(gray-5),\n                    --app-gray-d2,\n                    #404040\n                );\n            }\n        }\n\n        input {\n            &:checked + label {\n                &,\n                &:enabled:hover {\n                    background: var-list(\n                        --tct-select-multi-select-option-active-background,\n                        var-prefixer(select-multi-select-option-active-background-color),\n                        var-prefixer(btn-primary-bg),\n                        #2e2e2e\n                    );\n                    color: var-list(\n                        var-prefixer(select-multi-select-option-active-color),\n                        var-prefixer(btn-primary-font-color),\n                        --app-white,\n                        #ffffff\n                    );\n                }\n            }\n\n            &:disabled + label {\n                opacity: var-list(\n                    var-prefixer(select-multi-select-option-disabled-opacity),\n                    var-prefixer(btn-disabled-opacity),\n                    --app-disabled-opacity,\n                    0.4\n                );\n                cursor: not-allowed;\n            }\n\n            &:focus + label {\n                box-shadow: var(--const-double-focus-ring);\n            }\n        }\n    }\n}\n","import {\n    Component,\n    Prop,\n    Element,\n    h,\n    Listen,\n    State,\n    EventEmitter,\n    Event,\n    ComponentInterface,\n    Watch,\n    Method,\n} from '@stencil/core';\nimport { IEventDetail, Q2InputCustomEvent, Q2OptionListCustomEvent } from 'src/components';\nimport {\n    handleAriaLabel,\n    isEventFromElement,\n    isHostLosingFocus,\n    isRelatedTargetWithinHost,\n    loc,\n    overrideFocus,\n    waitForNextPaint,\n} from '../../utils';\nimport { IOptionValue } from '../q2-option-list/q2-option-list';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\n\n@Component({ tag: 'q2-select', shadow: true, styleUrl: 'q2-select.scss' })\nexport class Q2Select implements ComponentInterface {\n    // #region Own Properties\n\n    inputField?: HTMLQ2InputElement;\n    mutationObserver: MutationObserver;\n    optionList: HTMLQ2OptionListElement;\n    popoverElement?: HTMLQ2PopoverElement;\n    popoverTopContainer?: HTMLDivElement;\n    scheduledAfterRender: (() => void)[] = [];\n    statusMessageTimer: NodeJS.Timeout;\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    hasCustomDisplay: boolean = false;\n\n    @State()\n    hasPopoverBottom: boolean = false;\n\n    @State()\n    hasPopoverTop: boolean = false;\n\n    @State()\n    inputFocused: boolean = false;\n\n    @State()\n    open: boolean = false;\n\n    @State()\n    prioritizeSearch: boolean = false;\n\n    @State()\n    searchText: string = '';\n\n    @State()\n    showSelected: boolean = false;\n\n    @State()\n    statusMessage: string;\n\n    @State()\n    structuredSelectedOptions: IOptionValue[] = [];\n\n    // #endregion\n    // #region Public Property API\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    /** Renders an icon button when the field is non-empty. Pressing the button clears all input from the field. */\n    @Prop({ reflect: true })\n    clearable: boolean;\n\n    /** Disables all interaction with the field and leverages the disabled visual style of `q2-input`. */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /**\n     * The presence of `errors` will mark the field as invalid, putting it into an error state.\n     * @localizable\n     */\n    @Prop()\n    errors: string[];\n\n    /**\n     * Hide's the field's `<label>` element from view.\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true })\n    hideLabel: boolean;\n\n    /**\n     * Instructs the component to use the action sheet workflow for displaying its options.\n     *\n     * For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).\n     * @warning\n     * If your `q2-select` renders inside of an iframe, and you are using multiline/robust content options,\n     * any custom CSS you apply to your options will not get passed up to the platform which displays the action sheet.\n     * For this reason, we strongly suggest using the [q2-card](https://tecton.q2developer.com/design-system/q2-card/) component since its styling is managed by Tecton.\n     */\n    @Prop()\n    hoist: boolean = !!window.Tecton?.useActionSheets;\n\n    /** Determines whether to show an error state. Its primary use-case is for an unfilled field. */\n    @Prop({ reflect: true })\n    invalid: boolean;\n\n    /**\n     * The text that will be used as the label for the field.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string;\n\n    /**\n     * Determines the label that is applied to the option list for accessibility purposes.\n     * @localizable\n     */\n    @Prop()\n    listLabel: string = loc('tecton.element.select.listLabel');\n\n    /** The minimum number of rows the component will try to display below or above the component when opened. */\n    @Prop()\n    minRows: number = 3;\n\n    /** Enables text wrapping for `q2-option` elements. When `false`, the text truncates and does not wrap. */\n    @Prop({ reflect: true })\n    multilineOptions: boolean = false;\n\n    /** Enables multi-select functionality. */\n    @Prop({ reflect: true })\n    multiple: boolean = false;\n\n    /** Appends \"(optional)\" to the field label, and sets `aria-required` on the nested input tag to `false`. */\n    @Prop({ reflect: true })\n    optional: boolean = false;\n\n    /**\n     * Text that appears within the field when it is blurred and empty.\n     * Placeholder text disappears when the user selects an option.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    placeholder: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true })\n    popDirection: '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    /**\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     * Appends \"(read only)\" to the field label, and field becomes unusable, but remains focusable.\n     * Takes priority over `optional` if both are `true`.\n     */\n    @Prop({ reflect: true })\n    readonly: boolean = false;\n\n    /** Enables search functionality. */\n    @Prop({ reflect: true })\n    searchable: boolean = false;\n\n    /**\n     * Each item in this array should correspond to the value of a `q2-option` element.\n     * This property is only relevant for `multiple` (i.e., multi-select) implementations.\n     */\n    @Prop({ mutable: true })\n    selectedOptions: string[] = [];\n\n    /**\n     * The current value for the select. This should correspond to the value of a nested q2-option element.\n     * This property is only relevant for single-select implementations.\n     */\n    @Prop({ mutable: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when an option is selected or deselected.\n     *\n     * When the multi-select is enabled, the `value` property will be `undefined` and the `selectedOptions` property\n     * will contain the selected option values.\n     *\n     * @legacyEvent\n     */\n    @Event()\n    change: EventEmitter<{ value: string; selectedOptions: string[] }>;\n\n    /**\n     * Emitted when the input value changes.\n     *\n     * Requires the `searchable` prop to be set to `true`.\n     */\n    @Event()\n    input: EventEmitter<{ query: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n        this.buildStructuredSelectedOptions();\n        this.handleMultilineOptionsUpdate(this.multilineOptions, false);\n    }\n\n    componentDidLoad() {\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, subtree: true });\n        this.mutationObserver = observer;\n        this.onMutationObserved();\n        overrideFocus(this.hostElement);\n        setTimeout(() => this.checkSelectedDisplay(), 0);\n    }\n\n    componentDidRender() {\n        setTimeout(() => {\n            this.scheduledAfterRender.forEach(fn => fn());\n            this.scheduledAfterRender = [];\n        }, 25);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('change')\n    onHostElementChange(event: CustomEvent<{ value: string; selectedOptions: string[] }>) {\n        if (this.readonly || this.disabled) return;\n        if (event.target !== this.hostElement || this.hostElement.onchange) return;\n        if (this.multiple) {\n            this.value = null;\n            this.selectedOptions = event.detail.selectedOptions;\n        } else {\n            this.value = event.detail.value;\n            this.selectedOptions = [];\n        }\n    }\n\n    @Listen('clear')\n    onClearHandler() {\n        this.clearValue();\n    }\n\n    @Listen('displayChanged')\n    handleSelectedDisplay(event: CustomEvent) {\n        if (this.multiple) return;\n        this.inputField.value = event.detail.display;\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        const fromHost = isRelatedTargetWithinHost(event, this.hostElement);\n        const prioritizeSearch = (this.prioritizeSearch = fromHost && this.searchable);\n        if (prioritizeSearch) {\n            this.clearSelectedDisplay();\n        } else if (isEventFromElement(event, this.hostElement)) {\n            this.inputField.shadowRoot.querySelector<HTMLElement>('.input-field').focus();\n        }\n    }\n\n    @Listen('focusout')\n    handleFocusout(event: FocusEvent) {\n        const isLeavingHost = isHostLosingFocus(event, this.hostElement);\n        if (isLeavingHost) this.closeDropdown();\n        this.prioritizeSearch = !isLeavingHost && this.searchable;\n    }\n\n    @Listen('input')\n    onHostElementInput(event: CustomEvent) {\n        if (!this.searchable || event.target !== this.hostElement || this.hostElement.oninput) return;\n        const options = this.optionElements;\n        const query = this.searchText.trim().toLocaleLowerCase();\n        let matchedCount = 0;\n        options.forEach(option => {\n            if (query === '') {\n                option.hidden = false;\n                return;\n            }\n\n            const title =\n                option.firstElementChild?.tagName === 'Q2-CARD'\n                    ? (option.firstElementChild as HTMLQ2CardElement).title\n                    : null;\n            const { display = '', innerText = '' } = option;\n            const searchParams = [display, title, innerText];\n            const matched = searchParams.some(text => text?.toLocaleLowerCase().includes(query) ?? false);\n\n            option.hidden = !matched;\n            if (matched) matchedCount++;\n        });\n\n        const statusMessageLocString = query\n            ? 'tecton.element.select.searchable.results'\n            : 'tecton.element.select.allOptions';\n        const count = query ? matchedCount : options.length;\n        this.setStatusMessage(loc(statusMessageLocString, [count]));\n    }\n\n    @Listen('keydown')\n    keydownHandler(event: KeyboardEvent) {\n        this.inputKeydownHandler(event);\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking the `<input>` 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 `<input>` 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 focusing the `<input>`, entering the provided value, and emitting an `input` event.\n     *\n     * @warning\n     * Only applicable when the input is searchable.\n     *\n     * @testOnly\n     */\n    @Method()\n    searchOptions(query: string) {\n        if (!this.searchable) return;\n\n        const { innerInputField } = this;\n        innerInputField.focus();\n        innerInputField.dispatchEvent(new FocusEvent('focus'));\n        innerInputField.value = query;\n        innerInputField.dispatchEvent(new InputEvent('input'));\n    }\n\n    /**\n     * Emulates clicking the `<input>` to display the popover and selecting the option(s) with the specified value(s).\n     *\n     * If the 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 valuesSet = new Set(Array.isArray(values) ? values : [values]);\n        if (!this.open) {\n            await this.openPopover();\n            await waitForNextPaint();\n        }\n\n        valuesSet.forEach(value => {\n            this.optionElements.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('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('multilineOptions')\n    handleMultilineOptionsUpdate(newValue, oldValue) {\n        if (newValue === oldValue) return;\n        this.optionElements.forEach(element => (element.multiline = newValue));\n    }\n\n    @Watch('open')\n    openChanged(isOpen: boolean) {\n        this.scheduledAfterRender.push(async () => {\n            await waitForNextPaint();\n            const { popoverTopContainer, popoverElement } = this;\n            const height = (isOpen && popoverTopContainer?.offsetHeight) || 0;\n            if (height) {\n                popoverElement.style.setProperty('--comp-popover-top-container-height', `${height}px`);\n            } else {\n                popoverElement.style.removeProperty('--comp-popover-top-container-height');\n            }\n        });\n    }\n\n    @Watch('value')\n    @Watch('selectedOptions')\n    buildStructuredSelectedOptions() {\n        const { multiple, selectedOptions, value } = this;\n        if (multiple) {\n            this.structuredSelectedOptions = !!selectedOptions?.length\n                ? selectedOptions.map(option => (typeof option === 'string' ? { value: option } : option))\n                : [];\n        } else {\n            this.structuredSelectedOptions = value ? [{ value }] : [];\n        }\n    }\n\n    @Watch('value')\n    valueUpdated() {\n        if (this.multiple) return;\n        this.clearSearchText();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get badgeValue(): string {\n        if (!this.multiple) return null;\n        const optionsLength = this.selectedOptions?.length ?? 0;\n        if (this.open && this.searchable) return optionsLength ? `${optionsLength}` : null;\n        else return optionsLength > 1 ? `+${optionsLength - 1}` : null;\n    }\n\n    get firstSelectedOptionElement() {\n        const { firstSelectedValue } = this;\n        return firstSelectedValue ? this.optionElements.find(({ value }) => value === firstSelectedValue) : null;\n    }\n\n    get firstSelectedValue() {\n        return this.multiple ? this.selectedOptions?.[0] : this.value;\n    }\n\n    get innerInputContainer(): HTMLElement {\n        return this.inputField?.shadowRoot?.querySelector('.input-container');\n    }\n\n    get innerInputField(): HTMLInputElement | HTMLButtonElement {\n        return this.inputField?.shadowRoot?.querySelector('.input-field');\n    }\n\n    get optionElements() {\n        return Array.from(this.hostElement.querySelectorAll<HTMLQ2OptionElement>('q2-option'));\n    }\n\n    get popoverMinHeight() {\n        const { minRows } = this;\n        const firstOption = this.hostElement.querySelector<HTMLQ2OptionElement>('q2-option:not([hidden])');\n        let minHeight = firstOption && window.getComputedStyle(firstOption).minHeight;\n\n        // Safari doesn't return a min-height for non-visible items\n        if (!minHeight || minHeight === '0px') minHeight = '44px';\n\n        return minRows * parseInt(minHeight);\n    }\n\n    get selectedDisplay() {\n        if (this.prioritizeSearch || this.searchText) return this.searchText;\n        if (this.hasCustomDisplay) return '';\n        return this.multiple ? this.calculateMultiSelectSelectedDisplay() : this.calculateSingleSelectSelectedDisplay();\n    }\n\n    get selectedDisplaySlot() {\n        return this.hostElement.querySelector<HTMLElement>('[slot=\"_selected-display\"]');\n    }\n\n    get wrapperClasses() {\n        const { errors } = this;\n        const classes = ['q2-select-container'];\n        if (Array.isArray(errors) && errors.length > 0) classes.push('has-error');\n        if (this.inputFocused) classes.push('is-focused');\n        if (this.searchable) classes.push('is-searchable');\n        return classes.join(' ');\n    }\n\n    _togglePopover() {\n        const { innerInputField } = this;\n        innerInputField?.click();\n        innerInputField?.focus();\n        innerInputField.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    calculateMultiSelectSelectedDisplay() {\n        const { firstSelectedOptionElement, firstSelectedValue, multilineOptions } = this;\n        if (!firstSelectedValue) return '';\n        if (firstSelectedOptionElement?.display) return loc(firstSelectedOptionElement.display);\n        if (multilineOptions && this.searchable) return this.searchText;\n        if (multilineOptions) return '';\n        return (\n            firstSelectedOptionElement?.textContent?.trim() ?? firstSelectedOptionElement?.value ?? firstSelectedValue\n        );\n    }\n\n    calculateSingleSelectSelectedDisplay() {\n        const { firstSelectedOptionElement, multilineOptions } = this;\n        if (multilineOptions) {\n            return (firstSelectedOptionElement?.display && loc(firstSelectedOptionElement.display)) || this.value || '';\n        } else {\n            return (\n                (firstSelectedOptionElement?.display && loc(firstSelectedOptionElement.display)) ||\n                firstSelectedOptionElement?.textContent?.trim() ||\n                this.value ||\n                ''\n            );\n        }\n    }\n\n    checkSelectedDisplay() {\n        let namedSlot = this.selectedDisplaySlot;\n        const { value, multiple, selectedOptions, multilineOptions, firstSelectedOptionElement, prioritizeSearch } =\n            this;\n        const hasNoValue = !value && multiple && !selectedOptions?.length;\n        if (prioritizeSearch || !multilineOptions || hasNoValue) return this.clearSelectedDisplay();\n\n        if (!firstSelectedOptionElement || firstSelectedOptionElement.display) return this.clearSelectedDisplay();\n\n        // Clone selected option and remove elements with hide-on-select attribute\n        const selectionClone = firstSelectedOptionElement.firstElementChild.cloneNode(true) as HTMLElement;\n        selectionClone.querySelectorAll('[hide-on-select]').forEach(element => element.remove());\n\n        if (namedSlot) {\n            const height = namedSlot.clientHeight === 0 ? 'auto' : `${namedSlot.clientHeight}px`;\n            namedSlot.style.setProperty('--comp-selected-display-height', height);\n            if (namedSlot.firstElementChild.outerHTML !== selectionClone.outerHTML) {\n                namedSlot.replaceChild(selectionClone, namedSlot.firstElementChild);\n            }\n        } else {\n            namedSlot = document.createElement('div');\n            namedSlot.slot = '_selected-display';\n            namedSlot.appendChild(selectionClone);\n            this.hostElement.appendChild(namedSlot);\n        }\n        return namedSlot;\n    }\n\n    checkSelectedDisplayHeight() {\n        const { selectedDisplaySlot } = this;\n        if (!selectedDisplaySlot) return;\n        selectedDisplaySlot.style.setProperty('--comp-selected-display-height', '44px');\n    }\n\n    checkSelectedOptions() {\n        const { multiple, selectedOptions, value } = this;\n        this.optionElements.forEach(option => {\n            if (multiple) {\n                option.selected = selectedOptions.includes(option.value);\n            } else {\n                option.selected = option.value === value;\n            }\n        });\n    }\n\n    clearSearchText() {\n        if (!this.searchText) return;\n        this.searchText = '';\n        this.input.emit({ query: '' });\n    }\n\n    clearSelectedDisplay() {\n        this.selectedDisplaySlot?.remove();\n    }\n\n    clearValue() {\n        const { multiple } = this;\n        this.value = '';\n        this.selectedOptions = [];\n        this.change.emit({ value: multiple ? undefined : '', selectedOptions: multiple ? [] : undefined });\n    }\n\n    clickedElsewhere = (event: CustomEvent) => {\n        const target = event.target as HTMLClickElsewhereElement;\n        if (target.localName !== 'click-elsewhere') return;\n        event.stopPropagation();\n    };\n\n    closeDropdown() {\n        this.open = false;\n        this.clearSearchText();\n    }\n\n    async executeActionSheet(event: MouseEvent | KeyboardEvent) {\n        const result = await showActionSheetList(this, event);\n        this.handleSelectionChanges(result);\n    }\n\n    focusInput() {\n        this.inputField?.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    handleSelectionChanges(changeDetails: { value?: string; values?: IOptionValue[] }) {\n        const { value = '', values = [] } = changeDetails;\n        const selectedOptionValues = values.map(value => value.value);\n        const { multiple } = this;\n        if (!this.hostElement.onchange) {\n            this.selectedOptions = selectedOptionValues;\n        }\n\n        this.change.emit({\n            value: multiple ? undefined : value,\n            selectedOptions: multiple ? selectedOptionValues : undefined,\n        });\n    }\n\n    inputBlurHandler = () => {\n        this.inputFocused = false;\n    };\n\n    inputChangeHandler = (event: Event) => {\n        event.stopPropagation();\n    };\n\n    inputClickHandler = async (event: MouseEvent) => {\n        event.stopPropagation();\n        if (shouldShowActionSheet(this)) {\n            return this.executeActionSheet(event);\n        }\n        this.toggleDropdown();\n        this.focusInput();\n    };\n\n    inputFocusHandler = () => {\n        this.inputFocused = true;\n    };\n\n    inputInputHandler = (event: Q2InputCustomEvent<IEventDetail> & InputEvent) => {\n        event.stopPropagation();\n        const eventValue = event.detail.value;\n        const shouldClearValue = !!this.value;\n\n        if (shouldClearValue) this.clearValue();\n        if (!this.open) this.openDropdownWithoutActiveElement();\n\n        this.prioritizeSearch = true;\n        this.searchText = eventValue;\n        this.input.emit({ query: eventValue });\n    };\n\n    inputKeydownHandler = (event: KeyboardEvent) => {\n        if (this.readonly || this.disabled) return;\n        const { key, shiftKey } = event;\n        const isShiftTab = key === 'Tab' && shiftKey;\n        const hasSlot = this.hasPopoverTop || this.hasPopoverBottom;\n        if (hasSlot && (key === 'Tab' || isShiftTab)) return;\n\n        // slots are incompatible with action sheet\n        if (shouldShowActionSheet(this, event) && !hasSlot) {\n            return this.executeActionSheet(event);\n        }\n\n        const keysForOptionListToHandle = [\n            'ArrowDown',\n            'ArrowUp',\n            'PageDown',\n            'PageUp',\n            'Home',\n            'End',\n            'Escape',\n            'Tab',\n        ];\n\n        if (this.searchable && (key === ' ' || key === 'Enter') && this.inputField.value == '') {\n            event.preventDefault();\n            if (!this.open) this.openDropdownWithoutActiveElement();\n        }\n\n        if (this.searchable && !keysForOptionListToHandle.includes(key)) return;\n        if (this.shouldClearSearchText(event)) this.clearSearchText();\n\n        // Prevent click event from firing when spacebar is pressed\n        if (key === ' ') event.preventDefault();\n\n        this.optionList.handleExternalKeydown(event);\n    };\n\n    onCustomDisplayClick = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.focusInput();\n        this.toggleDropdown();\n    };\n\n    onMutationObserved = () => {\n        const { hostElement, hasPopoverTop, hasPopoverBottom } = this;\n        const slotContainer = hostElement.querySelector('.custom-display-content');\n        const displaySlot = hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"q2-select-display\"]');\n        const hasCustomDisplay = !!displaySlot\n            ? displaySlot.assignedNodes().length > 0\n            : slotContainer.children.length > 0;\n\n        if (this.hasCustomDisplay !== hasCustomDisplay) {\n            this.hasCustomDisplay = hasCustomDisplay;\n        }\n\n        const popTopSlot = hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"popover-top\"]');\n        const topSlotHasNode = popTopSlot?.assignedNodes().length > 0;\n        if (hasPopoverTop !== topSlotHasNode) {\n            this.hasPopoverTop = topSlotHasNode;\n        }\n\n        const popBottomSlot = hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"popover-bottom\"]');\n        const bottomSlotHasNode = popBottomSlot?.assignedNodes().length > 0;\n        if (hasPopoverBottom !== bottomSlotHasNode) {\n            this.hasPopoverBottom = bottomSlotHasNode;\n        }\n\n        this.checkSelectedOptions();\n    };\n\n    onOptionListChange = (event: Q2OptionListCustomEvent<{ value: string; values: IOptionValue[] }>) => {\n        event.stopPropagation();\n        const { values } = event.detail;\n\n        if (values.length === 0) this.showAllOptions();\n        this.handleSelectionChanges(event.detail);\n    };\n\n    onPopoverState = ({\n        detail: { open, action },\n    }: CustomEvent<{ open: boolean; action: 'close' | 'select' | 'open' }>) => {\n        if (!open || this.searchText) {\n            if (action !== 'select') {\n                this.optionList.setActiveElement(null);\n            }\n            this.inputField.focus();\n        }\n\n        if (this.open === open) return;\n        this.open = open;\n    };\n\n    openDropdownWithoutActiveElement() {\n        if (this.readonly || this.disabled) return;\n        this.optionList.setActiveElement(null);\n        this.open = true;\n    }\n\n    setStatusMessage(message) {\n        clearTimeout(this.statusMessageTimer);\n        this.statusMessage = '';\n        this.statusMessageTimer = setTimeout(() => {\n            this.statusMessage = message;\n        }, 1000);\n    }\n\n    shouldClearSearchText(event: KeyboardEvent) {\n        return this.searchable && !!this.searchText && event.key === 'Escape';\n    }\n\n    showAllOptions = () => {\n        this.showSelected = false;\n    };\n\n    showSelectedOptions = () => {\n        this.showSelected = true;\n    };\n\n    toggleDropdown() {\n        if (this.readonly || this.disabled) return;\n\n        if (this.open && !this.searchText) {\n            this.closeDropdown();\n        } else {\n            this.openDropdownWithoutActiveElement();\n        }\n    }\n\n    visibilityToggleKeyDown = (event: KeyboardEvent) => {\n        const key = event.key;\n        const isShiftTab = key === 'Tab' && event.shiftKey;\n        const isRadioControlKey = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(key);\n        if (isRadioControlKey) event.stopPropagation();\n        if (isShiftTab) {\n            event.stopPropagation();\n            // allows shift+tab keys to select the top slot when present\n            if (this.hasPopoverTop) return;\n\n            this.optionList.setDefaultActiveElement();\n        }\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderCustomDisplay() {\n        const hasSelectedDisplay = this.checkSelectedDisplay();\n        if (!hasSelectedDisplay) return;\n        this.checkSelectedDisplayHeight();\n\n        return (\n            <slot\n                name=\"_selected-display\"\n                slot=\"custom-display\"\n            />\n        );\n    }\n\n    renderOptionsDropdown() {\n        return (\n            <q2-popover\n                ref={el => (this.popoverElement = el)}\n                controlElement={this.innerInputContainer}\n                open={this.open}\n                max-height={this.popoverMaxHeight}\n                minHeight={this.popoverMinHeight}\n                direction={this.popDirection}\n                mode={this.popoverMode || undefined}\n                block\n            >\n                <div class=\"popover-content\">\n                    <q2-option-list\n                        onPopoverState={this.onPopoverState}\n                        ref={el => (this.optionList = el)}\n                        type=\"listbox\"\n                        id=\"option-list\"\n                        show-selected={this.showSelected}\n                        label={this.listLabel}\n                        multiple={this.multiple}\n                        selectedOptions={this.structuredSelectedOptions}\n                        onChange={this.onOptionListChange}\n                    >\n                        <slot />\n                    </q2-option-list>\n                    <div\n                        class=\"popover-top-container\"\n                        ref={el => (this.popoverTopContainer = el)}\n                        hidden={!this.multiple && !this.hasPopoverTop}\n                        tabindex=\"-1\"\n                    >\n                        <slot name=\"popover-top\"></slot>\n                        {this.multiple && this.renderVisibilityToggle()}\n                    </div>\n                </div>\n                <div\n                    class=\"popover-bottom-container\"\n                    hidden={!this.hasPopoverBottom}\n                    tabindex=\"-1\"\n                >\n                    <slot name=\"popover-bottom\" />\n                </div>\n            </q2-popover>\n        );\n    }\n\n    renderVisibilityToggle() {\n        const selectedOptionsCount = this.selectedOptions?.length ?? 0;\n        const { showSelected } = this;\n        return (\n            <div class=\"multi-select-header\">\n                <fieldset>\n                    <legend aria-label={loc('tecton.element.select.multiHeader.showing')}>\n                        {loc('tecton.element.select.multiHeader.showing')}\n                    </legend>\n                    <div>\n                        <input\n                            class=\"sr\"\n                            type=\"radio\"\n                            id=\"all\"\n                            name=\"viewDisplay\"\n                            value=\"all\"\n                            checked={!showSelected}\n                            aria-label={loc('tecton.element.select.multiHeader.allAriaLabel')}\n                            test-id=\"allOptionsButton\"\n                            onClick={this.showAllOptions}\n                            onKeyDown={this.visibilityToggleKeyDown}\n                        />\n                        <label htmlFor=\"all\">{loc('tecton.element.select.multiHeader.all')}</label>\n                    </div>\n\n                    <div>\n                        <input\n                            class=\"sr\"\n                            type=\"radio\"\n                            id=\"selected\"\n                            disabled={selectedOptionsCount === 0}\n                            name=\"viewDisplay\"\n                            value=\"selected\"\n                            aria-label={loc('tecton.element.select.multiHeader.selectedAriaLabel', [\n                                selectedOptionsCount,\n                            ])}\n                            checked={showSelected}\n                            test-id=\"selectedOptionsButton\"\n                            onClick={this.showSelectedOptions}\n                            onKeyDown={this.visibilityToggleKeyDown}\n                        />\n                        <label htmlFor=\"selected\">\n                            {loc('tecton.element.select.multiHeader.selected', [selectedOptionsCount])}\n                        </label>\n                    </div>\n                </fieldset>\n            </div>\n        );\n    }\n\n    render() {\n        return (\n            <click-elsewhere\n                class={this.wrapperClasses}\n                onChange={this.clickedElsewhere}\n            >\n                <div\n                    aria-live=\"polite\"\n                    aria-atomic=\"true\"\n                    role=\"status\"\n                    class=\"sr\"\n                >\n                    {this.statusMessage}\n                </div>\n                <q2-input\n                    ref={el => (this.inputField = el)}\n                    class=\"q2-select-input\"\n                    label={(this.label && loc(this.label)) || ''}\n                    value={this.selectedDisplay}\n                    clearable={(this.clearable && (!!this.value || !!this.selectedOptions?.length)) || undefined}\n                    errors={\n                        (Array.isArray(this.errors) &&\n                            this.errors.length > 0 &&\n                            this.errors.map(error => loc(error))) ||\n                        (this.invalid && ['tecton.element.select.invalid']) ||\n                        []\n                    }\n                    disabled={this.disabled}\n                    optional={this.optional}\n                    readonly={!!this.readonly}\n                    placeholder={this.placeholder || undefined}\n                    hideLabel={this.hideLabel}\n                    ariaExpanded={`${this.open}`}\n                    ariaControls=\"option-list\"\n                    ariaHaspopup=\"listbox\"\n                    test-id=\"toggleDropdown\"\n                    hide-messages\n                    iconRight=\"chevron-down\"\n                    onClick={this.inputClickHandler}\n                    onInput={this.inputInputHandler}\n                    onKeyDown={this.inputKeydownHandler}\n                    onFocus={this.inputFocusHandler}\n                    onBlur={this.inputBlurHandler}\n                    onChange={this.inputChangeHandler}\n                    badgeValue={this.badgeValue}\n                    badgeTheme={this.inputFocused ? 'primary' : undefined}\n                    _role=\"combobox\"\n                    _preventEntry={!this.searchable}\n                >\n                    {this.renderCustomDisplay()}\n                </q2-input>\n                <div\n                    class=\"custom-display-content\"\n                    hidden={!this.hasCustomDisplay || !!this.searchText}\n                    onClick={this.onCustomDisplayClick}\n                >\n                    <slot name=\"q2-select-display\" />\n                </div>\n                {this.renderOptionsDropdown()}\n            </click-elsewhere>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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"}
+{"version":3,"names":["q2SelectCss","Q2SelectStyle0","Q2Select","this","scheduledAfterRender","clickedElsewhere","event","target","localName","stopPropagation","inputBlurHandler","inputFocused","inputChangeHandler","inputClickHandler","async","shouldShowActionSheet","executeActionSheet","toggleDropdown","focusInput","inputFocusHandler","inputInputHandler","eventValue","detail","value","shouldClearValue","clearValue","open","openDropdownWithoutActiveElement","prioritizeSearch","searchText","input","emit","query","inputKeydownHandler","readonly","disabled","key","shiftKey","isShiftTab","hasSlot","hasPopoverTop","hasPopoverBottom","keysForOptionListToHandle","searchable","inputField","preventDefault","includes","shouldClearSearchText","clearSearchText","optionList","handleExternalKeydown","onCustomDisplayClick","onMutationObserved","hostElement","slotContainer","querySelector","displaySlot","shadowRoot","hasCustomDisplay","assignedNodes","length","children","popTopSlot","topSlotHasNode","popBottomSlot","bottomSlotHasNode","checkSelectedOptions","onOptionListChange","values","showAllOptions","handleSelectionChanges","onPopoverState","action","setActiveElement","focus","showSelected","showSelectedOptions","visibilityToggleKeyDown","isRadioControlKey","setDefaultActiveElement","_a","window","Tecton","useActionSheets","loc","disconnectedCallback","mutationObserver","disconnect","componentWillLoad","handleAriaLabel","buildStructuredSelectedOptions","handleMultilineOptionsUpdate","multilineOptions","componentDidLoad","observer","MutationObserver","observe","childList","subtree","overrideFocus","setTimeout","checkSelectedDisplay","componentDidRender","forEach","fn","onHostElementChange","onchange","multiple","selectedOptions","onClearHandler","handleSelectedDisplay","display","delegateFocus","fromHost","isRelatedTargetWithinHost","clearSelectedDisplay","isEventFromElement","handleFocusout","isLeavingHost","isHostLosingFocus","closeDropdown","onHostElementInput","oninput","options","optionElements","trim","toLocaleLowerCase","matchedCount","option","hidden","title","firstElementChild","tagName","innerText","searchParams","matched","some","text","statusMessageLocString","count","setStatusMessage","keydownHandler","closePopover","_togglePopover","openPopover","searchOptions","innerInputField","dispatchEvent","FocusEvent","InputEvent","setValue","valuesSet","Set","Array","isArray","waitForNextPaint","find","click","ariaLabelObserver","newValue","oldValue","element","multiline","openChanged","isOpen","push","popoverTopContainer","popoverElement","height","offsetHeight","style","setProperty","removeProperty","structuredSelectedOptions","map","valueUpdated","badgeValue","optionsLength","_b","firstSelectedOptionElement","firstSelectedValue","innerInputContainer","from","querySelectorAll","popoverMinHeight","minRows","firstOption","minHeight","getComputedStyle","parseInt","selectedDisplay","calculateMultiSelectSelectedDisplay","calculateSingleSelectSelectedDisplay","selectedDisplaySlot","wrapperClasses","errors","classes","join","_c","textContent","namedSlot","hasNoValue","selectionClone","cloneNode","remove","clientHeight","outerHTML","replaceChild","document","createElement","slot","appendChild","checkSelectedDisplayHeight","selected","change","undefined","result","showActionSheetList","changeDetails","selectedOptionValues","message","clearTimeout","statusMessageTimer","statusMessage","renderCustomDisplay","hasSelectedDisplay","h","name","renderOptionsDropdown","ref","el","controlElement","popoverMaxHeight","direction","popDirection","mode","popoverMode","block","class","type","id","label","listLabel","onChange","tabindex","renderVisibilityToggle","selectedOptionsCount","checked","onClick","onKeyDown","htmlFor","render","role","clearable","error","invalid","optional","placeholder","hideLabel","ariaExpanded","ariaControls","ariaHaspopup","iconRight","onInput","onFocus","onBlur","badgeTheme","_role","_preventEntry"],"sources":["src/components/q2-select/q2-select.scss?tag=q2-select&encapsulation=shadow","src/components/q2-select/q2-select.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../../styles/dropdowns';\n\n:host {\n    --comp-select-margin: #{var-list(\n            --tct-select-margin,\n            unquote(\n                '#{var-list(var-prefixer(select-margin-top), --app-scale-4, 30px)} 0 #{var-list(var-prefixer(select-margin-bottom), --app-scale-4, 30px)}'\n            )\n        )};\n    display: block;\n    margin: var(--comp-select-margin);\n}\n\n.q2-select-container {\n    position: relative;\n    display: block;\n}\n\n.q2-select-input {\n    margin: 0;\n\n    --tct-input-min-height: #{var-list(var-prefixer(select-input-min-height))};\n    --tct-input-max-height: #{var-list(var-prefixer(select-input-max-height), none)};\n}\n\n::slotted([slot='_selected-display']) {\n    width: 100%;\n    min-height: var(--comp-selected-display-height, 44px);\n}\n\n.custom-display-content {\n    position: absolute;\n    bottom: 0;\n    left: calc(var-list(--tct-scale-2, --app-scale-2x, 10px) + 1px);\n    height: 44px;\n    width: calc(100% - 34px - var-list(--tct-scale-3, --app-scale-3x, 15px));\n    overflow: hidden;\n    cursor: pointer;\n    transition: left var-list(--tct-tween-2, --app-tween-1, unquote('0.2s ease'));\n}\n\n.custom-display-content:not([hidden]) {\n    display: flex;\n    align-items: center;\n}\n\n.is-searchable.is-focused .custom-display-content,\n.is-searchable .custom-display-content:active {\n    left: calc(var-list(--tct-scale-3, --app-scale-3x, 15px) + 1px);\n}\n\n.has-error .custom-display-content {\n    width: calc(100% - 68px - var-list(--tct-scale-3, --app-scale-3x, 15px));\n}\n\n.popover-content {\n    display: flex;\n    flex-direction: column-reverse;\n}\n\n.popover-bottom-container {\n    position: sticky;\n    bottom: 0;\n    z-index: 5;\n}\n\n.popover-top-container {\n    position: sticky;\n    top: 0;\n    z-index: 5;\n    .multi-select-header {\n        padding: var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-2, var(--app-scale-2x, 10px));\n        background: var(--app-white);\n        display: flex;\n        gap: var-list(--app-scale-2x, 10px);\n        align-items: center;\n\n        fieldset {\n            margin: 0;\n            padding: 0;\n            border: 0;\n            display: flex;\n            gap: var-list(--app-scale-2x, 10px);\n        }\n\n        legend {\n            padding: 0;\n            float: left;\n        }\n\n        label {\n            cursor: pointer;\n            padding: var-list(\n                var-prefixer(select-multi-select-option-padding),\n                var-prefixer(btn-badge-padding),\n                unquote('2px 5px')\n            );\n            font-size: var-list(\n                var-prefixer(select-multi-select-option-font-size),\n                var-prefixer(btn-badge-font-size),\n                inherit\n            );\n            border-radius: var-list(\n                var-prefixer(select-multi-select-option-radius),\n                var-prefixer(btn-badge-border-radius),\n                --app-border-radius-1,\n                4px\n            );\n            background: var-list(\n                --tct-select-multi-select-option-background,\n                var-prefixer(select-multi-select-option-bg),\n                --tct-badge-background,\n                var-prefixer(btn-badge-bg),\n                transparent\n            );\n            color: var-list(\n                var-prefixer(select-multi-select-option-color),\n                var-prefixer(btn-badge-font-color),\n                inherit\n            );\n\n            &:hover {\n                background: var-list(\n                    --tct-select-multi-select-option-hover-background,\n                    var-prefixer(select-multi-select-option-hover-background-color),\n                    var-prefixer(btn-badge-hover-bg),\n                    var-prefixer(gray-14),\n                    --app-gray-l3,\n                    #f2f2f2\n                );\n                color: var-list(\n                    --tct-select-multi-select-option-hover-color,\n                    var-prefixer(select-multi-select-option-color),\n                    var-prefixer(btn-badge-hover-font-color),\n                    var-prefixer(gray-5),\n                    --app-gray-d2,\n                    #404040\n                );\n            }\n        }\n\n        input {\n            &:checked + label {\n                &,\n                &:enabled:hover {\n                    background: var-list(\n                        --tct-select-multi-select-option-active-background,\n                        var-prefixer(select-multi-select-option-active-background-color),\n                        var-prefixer(btn-primary-bg),\n                        #2e2e2e\n                    );\n                    color: var-list(\n                        var-prefixer(select-multi-select-option-active-color),\n                        var-prefixer(btn-primary-font-color),\n                        --app-white,\n                        #ffffff\n                    );\n                }\n            }\n\n            &:disabled + label {\n                opacity: var-list(\n                    var-prefixer(select-multi-select-option-disabled-opacity),\n                    var-prefixer(btn-disabled-opacity),\n                    --app-disabled-opacity,\n                    0.4\n                );\n                cursor: not-allowed;\n            }\n\n            &:focus + label {\n                box-shadow: var(--const-double-focus-ring);\n            }\n        }\n    }\n}\n","import {\n    Component,\n    Prop,\n    Element,\n    h,\n    Listen,\n    State,\n    EventEmitter,\n    Event,\n    ComponentInterface,\n    Watch,\n    Method,\n} from '@stencil/core';\nimport { IEventDetail, Q2InputCustomEvent, Q2OptionListCustomEvent } from 'src/components';\nimport {\n    handleAriaLabel,\n    isEventFromElement,\n    isHostLosingFocus,\n    isRelatedTargetWithinHost,\n    loc,\n    overrideFocus,\n    waitForNextPaint,\n} from '../../utils';\nimport { IOptionValue } from '../q2-option-list/q2-option-list';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\n\n@Component({ tag: 'q2-select', shadow: true, styleUrl: 'q2-select.scss' })\nexport class Q2Select implements ComponentInterface {\n    // #region Own Properties\n\n    inputField?: HTMLQ2InputElement;\n    mutationObserver: MutationObserver;\n    optionList: HTMLQ2OptionListElement;\n    popoverElement?: HTMLQ2PopoverElement;\n    popoverTopContainer?: HTMLDivElement;\n    scheduledAfterRender: (() => void)[] = [];\n    statusMessageTimer: NodeJS.Timeout;\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    hasCustomDisplay: boolean = false;\n\n    @State()\n    hasPopoverBottom: boolean = false;\n\n    @State()\n    hasPopoverTop: boolean = false;\n\n    @State()\n    inputFocused: boolean = false;\n\n    @State()\n    open: boolean = false;\n\n    @State()\n    prioritizeSearch: boolean = false;\n\n    @State()\n    searchText: string = '';\n\n    @State()\n    showSelected: boolean = false;\n\n    @State()\n    statusMessage: string;\n\n    @State()\n    structuredSelectedOptions: IOptionValue[] = [];\n\n    // #endregion\n    // #region Public Property API\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    /** Renders an icon button when the field is non-empty. Pressing the button clears all input from the field. */\n    @Prop({ reflect: true })\n    clearable: boolean;\n\n    /** Disables all interaction with the field and leverages the disabled visual style of `q2-input`. */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /**\n     * The presence of `errors` will mark the field as invalid, putting it into an error state.\n     * @localizable\n     */\n    @Prop()\n    errors: string[];\n\n    /**\n     * Hide's the field's `<label>` element from view.\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true })\n    hideLabel: boolean;\n\n    /**\n     * Instructs the component to use the action sheet workflow for displaying its options.\n     *\n     * For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).\n     * @warning\n     * If your `q2-select` renders inside of an iframe, and you are using multiline/robust content options,\n     * any custom CSS you apply to your options will not get passed up to the platform which displays the action sheet.\n     * For this reason, we strongly suggest using the [q2-card](https://tecton.q2developer.com/design-system/q2-card/) component since its styling is managed by Tecton.\n     */\n    @Prop()\n    hoist: boolean = !!window.Tecton?.useActionSheets;\n\n    /** Determines whether to show an error state. Its primary use-case is for an unfilled field. */\n    @Prop({ reflect: true })\n    invalid: boolean;\n\n    /**\n     * The text that will be used as the label for the field.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string;\n\n    /**\n     * Determines the label that is applied to the option list for accessibility purposes.\n     * @localizable\n     */\n    @Prop()\n    listLabel: string = loc('tecton.element.select.listLabel');\n\n    /** The minimum number of rows the component will try to display below or above the component when opened. */\n    @Prop()\n    minRows: number = 3;\n\n    /** Enables text wrapping for `q2-option` elements. When `false`, the text truncates and does not wrap. */\n    @Prop({ reflect: true })\n    multilineOptions: boolean = false;\n\n    /** Enables multi-select functionality. */\n    @Prop({ reflect: true })\n    multiple: boolean = false;\n\n    /** Appends \"(optional)\" to the field label, and sets `aria-required` on the nested input tag to `false`. */\n    @Prop({ reflect: true })\n    optional: boolean = false;\n\n    /**\n     * Text that appears within the field when it is blurred and empty.\n     * Placeholder text disappears when the user selects an option.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    placeholder: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true })\n    popDirection: '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    /**\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     * Appends \"(read only)\" to the field label, and field becomes unusable, but remains focusable.\n     * Takes priority over `optional` if both are `true`.\n     */\n    @Prop({ reflect: true })\n    readonly: boolean = false;\n\n    /** Enables search functionality. */\n    @Prop({ reflect: true })\n    searchable: boolean = false;\n\n    /**\n     * Each item in this array should correspond to the value of a `q2-option` element.\n     * This property is only relevant for `multiple` (i.e., multi-select) implementations.\n     */\n    @Prop({ mutable: true })\n    selectedOptions: string[] = [];\n\n    /**\n     * The current value for the select. This should correspond to the value of a nested q2-option element.\n     * This property is only relevant for single-select implementations.\n     */\n    @Prop({ mutable: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when an option is selected or deselected.\n     *\n     * When the multi-select is enabled, the `value` property will be `undefined` and the `selectedOptions` property\n     * will contain the selected option values.\n     *\n     * @legacyEvent\n     */\n    @Event()\n    change: EventEmitter<{ value: string; selectedOptions: string[] }>;\n\n    /**\n     * Emitted when the input value changes.\n     *\n     * Requires the `searchable` prop to be set to `true`.\n     */\n    @Event()\n    input: EventEmitter<{ query: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n        this.buildStructuredSelectedOptions();\n        this.handleMultilineOptionsUpdate(this.multilineOptions, false);\n    }\n\n    componentDidLoad() {\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, subtree: true });\n        this.mutationObserver = observer;\n        this.onMutationObserved();\n        overrideFocus(this.hostElement);\n        setTimeout(() => this.checkSelectedDisplay(), 0);\n    }\n\n    componentDidRender() {\n        setTimeout(() => {\n            this.scheduledAfterRender.forEach(fn => fn());\n            this.scheduledAfterRender = [];\n        }, 25);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('change')\n    onHostElementChange(event: CustomEvent<{ value: string; selectedOptions: string[] }>) {\n        if (this.readonly || this.disabled) return;\n        if (event.target !== this.hostElement || this.hostElement.onchange) return;\n        if (this.multiple) {\n            this.value = null;\n            this.selectedOptions = event.detail.selectedOptions;\n        } else {\n            this.value = event.detail.value;\n            this.selectedOptions = [];\n        }\n    }\n\n    @Listen('clear')\n    onClearHandler() {\n        this.clearValue();\n    }\n\n    @Listen('displayChanged')\n    handleSelectedDisplay(event: CustomEvent) {\n        if (this.multiple) return;\n        this.inputField.value = event.detail.display;\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        const fromHost = isRelatedTargetWithinHost(event, this.hostElement);\n        const prioritizeSearch = (this.prioritizeSearch = fromHost && this.searchable);\n        if (prioritizeSearch) {\n            this.clearSelectedDisplay();\n        } else if (isEventFromElement(event, this.hostElement)) {\n            this.inputField.shadowRoot.querySelector<HTMLElement>('.input-field').focus();\n        }\n    }\n\n    @Listen('focusout')\n    handleFocusout(event: FocusEvent) {\n        const isLeavingHost = isHostLosingFocus(event, this.hostElement);\n        if (isLeavingHost) this.closeDropdown();\n        this.prioritizeSearch = !isLeavingHost && this.searchable;\n    }\n\n    @Listen('input')\n    onHostElementInput(event: CustomEvent) {\n        if (!this.searchable || event.target !== this.hostElement || this.hostElement.oninput) return;\n        const options = this.optionElements;\n        const query = this.searchText.trim().toLocaleLowerCase();\n        let matchedCount = 0;\n        options.forEach(option => {\n            if (query === '') {\n                option.hidden = false;\n                return;\n            }\n\n            const title =\n                option.firstElementChild?.tagName === 'Q2-CARD'\n                    ? (option.firstElementChild as HTMLQ2CardElement).title\n                    : null;\n            const { display = '', innerText = '' } = option;\n            const searchParams = [display, title, innerText];\n            const matched = searchParams.some(text => text?.toLocaleLowerCase().includes(query) ?? false);\n\n            option.hidden = !matched;\n            if (matched) matchedCount++;\n        });\n\n        const statusMessageLocString = query\n            ? 'tecton.element.select.searchable.results'\n            : 'tecton.element.select.allOptions';\n        const count = query ? matchedCount : options.length;\n        this.setStatusMessage(loc(statusMessageLocString, [count]));\n    }\n\n    @Listen('keydown')\n    keydownHandler(event: KeyboardEvent) {\n        this.inputKeydownHandler(event);\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking the `<input>` 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 `<input>` 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 focusing the `<input>`, entering the provided value, and emitting an `input` event.\n     *\n     * @warning\n     * Only applicable when the input is searchable.\n     *\n     * @testOnly\n     */\n    @Method()\n    searchOptions(query: string) {\n        if (!this.searchable) return;\n\n        const { innerInputField } = this;\n        innerInputField.focus();\n        innerInputField.dispatchEvent(new FocusEvent('focus'));\n        innerInputField.value = query;\n        innerInputField.dispatchEvent(new InputEvent('input'));\n    }\n\n    /**\n     * Emulates clicking the `<input>` to display the popover and selecting the option(s) with the specified value(s).\n     *\n     * If the 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 valuesSet = new Set(Array.isArray(values) ? values : [values]);\n        if (!this.open) {\n            await this.openPopover();\n            await waitForNextPaint();\n        }\n\n        valuesSet.forEach(value => {\n            this.optionElements.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('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('multilineOptions')\n    handleMultilineOptionsUpdate(newValue, oldValue) {\n        if (newValue === oldValue) return;\n        this.optionElements.forEach(element => (element.multiline = newValue));\n    }\n\n    @Watch('open')\n    openChanged(isOpen: boolean) {\n        this.scheduledAfterRender.push(async () => {\n            await waitForNextPaint();\n            const { popoverTopContainer, popoverElement } = this;\n            const height = (isOpen && popoverTopContainer?.offsetHeight) || 0;\n            if (height) {\n                popoverElement.style.setProperty('--comp-popover-top-container-height', `${height}px`);\n            } else {\n                popoverElement.style.removeProperty('--comp-popover-top-container-height');\n            }\n        });\n    }\n\n    @Watch('value')\n    @Watch('selectedOptions')\n    buildStructuredSelectedOptions() {\n        const { multiple, selectedOptions, value } = this;\n        if (multiple) {\n            this.structuredSelectedOptions = !!selectedOptions?.length\n                ? selectedOptions.map(option => (typeof option === 'string' ? { value: option } : option))\n                : [];\n        } else {\n            this.structuredSelectedOptions = value ? [{ value }] : [];\n        }\n    }\n\n    @Watch('value')\n    valueUpdated() {\n        if (this.multiple) return;\n        this.clearSearchText();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get badgeValue(): string {\n        if (!this.multiple) return null;\n        const optionsLength = this.selectedOptions?.length ?? 0;\n        if (this.open && this.searchable) return optionsLength ? `${optionsLength}` : null;\n        else return optionsLength > 1 ? `+${optionsLength - 1}` : null;\n    }\n\n    get firstSelectedOptionElement() {\n        const { firstSelectedValue } = this;\n        return firstSelectedValue ? this.optionElements.find(({ value }) => value === firstSelectedValue) : null;\n    }\n\n    get firstSelectedValue() {\n        return this.multiple ? this.selectedOptions?.[0] : this.value;\n    }\n\n    get innerInputContainer(): HTMLElement {\n        return this.inputField?.shadowRoot?.querySelector('.input-container');\n    }\n\n    get innerInputField(): HTMLInputElement | HTMLButtonElement {\n        return this.inputField?.shadowRoot?.querySelector('.input-field');\n    }\n\n    get optionElements() {\n        return Array.from(this.hostElement.querySelectorAll<HTMLQ2OptionElement>('q2-option'));\n    }\n\n    get popoverMinHeight() {\n        const { minRows } = this;\n        const firstOption = this.hostElement.querySelector<HTMLQ2OptionElement>('q2-option:not([hidden])');\n        let minHeight = firstOption && window.getComputedStyle(firstOption).minHeight;\n\n        // Safari doesn't return a min-height for non-visible items\n        if (!minHeight || minHeight === '0px') minHeight = '44px';\n\n        return minRows * parseInt(minHeight);\n    }\n\n    get selectedDisplay() {\n        if (this.prioritizeSearch || this.searchText) return this.searchText;\n        if (this.hasCustomDisplay) return '';\n        return this.multiple ? this.calculateMultiSelectSelectedDisplay() : this.calculateSingleSelectSelectedDisplay();\n    }\n\n    get selectedDisplaySlot() {\n        return this.hostElement.querySelector<HTMLElement>('[slot=\"_selected-display\"]');\n    }\n\n    get wrapperClasses() {\n        const { errors } = this;\n        const classes = ['q2-select-container'];\n        if (Array.isArray(errors) && errors.length > 0) classes.push('has-error');\n        if (this.inputFocused) classes.push('is-focused');\n        if (this.searchable) classes.push('is-searchable');\n        return classes.join(' ');\n    }\n\n    _togglePopover() {\n        const { innerInputField } = this;\n        innerInputField?.click();\n        innerInputField?.focus();\n        innerInputField.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    calculateMultiSelectSelectedDisplay() {\n        const { firstSelectedOptionElement, firstSelectedValue, multilineOptions } = this;\n        if (!firstSelectedValue) return '';\n        if (firstSelectedOptionElement?.display) return loc(firstSelectedOptionElement.display);\n        if (multilineOptions && this.searchable) return this.searchText;\n        if (multilineOptions) return '';\n        return (\n            firstSelectedOptionElement?.textContent?.trim() ?? firstSelectedOptionElement?.value ?? firstSelectedValue\n        );\n    }\n\n    calculateSingleSelectSelectedDisplay() {\n        const { firstSelectedOptionElement, multilineOptions } = this;\n        if (multilineOptions) {\n            return (firstSelectedOptionElement?.display && loc(firstSelectedOptionElement.display)) || this.value || '';\n        } else {\n            return (\n                (firstSelectedOptionElement?.display && loc(firstSelectedOptionElement.display)) ||\n                firstSelectedOptionElement?.textContent?.trim() ||\n                this.value ||\n                ''\n            );\n        }\n    }\n\n    checkSelectedDisplay() {\n        let namedSlot = this.selectedDisplaySlot;\n        const { value, multiple, selectedOptions, multilineOptions, firstSelectedOptionElement, prioritizeSearch } =\n            this;\n        const hasNoValue = !value && multiple && !selectedOptions?.length;\n        if (prioritizeSearch || !multilineOptions || hasNoValue) return this.clearSelectedDisplay();\n\n        if (!firstSelectedOptionElement || firstSelectedOptionElement.display) return this.clearSelectedDisplay();\n\n        // Clone selected option and remove elements with hide-on-select attribute\n        const selectionClone = firstSelectedOptionElement.firstElementChild.cloneNode(true) as HTMLElement;\n        selectionClone.querySelectorAll('[hide-on-select]').forEach(element => element.remove());\n\n        if (namedSlot) {\n            const height = namedSlot.clientHeight === 0 ? 'auto' : `${namedSlot.clientHeight}px`;\n            namedSlot.style.setProperty('--comp-selected-display-height', height);\n            if (namedSlot.firstElementChild.outerHTML !== selectionClone.outerHTML) {\n                namedSlot.replaceChild(selectionClone, namedSlot.firstElementChild);\n            }\n        } else {\n            namedSlot = document.createElement('div');\n            namedSlot.slot = '_selected-display';\n            namedSlot.appendChild(selectionClone);\n            this.hostElement.appendChild(namedSlot);\n        }\n        return namedSlot;\n    }\n\n    checkSelectedDisplayHeight() {\n        const { selectedDisplaySlot } = this;\n        if (!selectedDisplaySlot) return;\n        selectedDisplaySlot.style.setProperty('--comp-selected-display-height', '44px');\n    }\n\n    checkSelectedOptions() {\n        const { multiple, selectedOptions, value } = this;\n        this.optionElements.forEach(option => {\n            if (multiple) {\n                option.selected = selectedOptions.includes(option.value);\n            } else {\n                option.selected = option.value === value;\n            }\n        });\n    }\n\n    clearSearchText() {\n        if (!this.searchText) return;\n        this.searchText = '';\n        this.input.emit({ query: '' });\n    }\n\n    clearSelectedDisplay() {\n        this.selectedDisplaySlot?.remove();\n    }\n\n    clearValue() {\n        const { multiple } = this;\n        this.value = '';\n        this.selectedOptions = [];\n        this.change.emit({ value: multiple ? undefined : '', selectedOptions: multiple ? [] : undefined });\n    }\n\n    clickedElsewhere = (event: CustomEvent) => {\n        const target = event.target as HTMLClickElsewhereElement;\n        if (target.localName !== 'click-elsewhere') return;\n        event.stopPropagation();\n    };\n\n    closeDropdown() {\n        this.open = false;\n        this.clearSearchText();\n    }\n\n    async executeActionSheet(event: MouseEvent | KeyboardEvent) {\n        const result = await showActionSheetList(this, event);\n        this.focusInput();\n        this.handleSelectionChanges(result);\n    }\n\n    focusInput() {\n        this.inputField?.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    handleSelectionChanges(changeDetails: { value?: string; values?: IOptionValue[] }) {\n        const { value = '', values = [] } = changeDetails;\n        const selectedOptionValues = values.map(value => value.value);\n        const { multiple } = this;\n        if (!this.hostElement.onchange) {\n            this.selectedOptions = selectedOptionValues;\n        }\n\n        this.change.emit({\n            value: multiple ? undefined : value,\n            selectedOptions: multiple ? selectedOptionValues : undefined,\n        });\n    }\n\n    inputBlurHandler = () => {\n        this.inputFocused = false;\n    };\n\n    inputChangeHandler = (event: Event) => {\n        event.stopPropagation();\n    };\n\n    inputClickHandler = async (event: MouseEvent) => {\n        event.stopPropagation();\n        if (shouldShowActionSheet(this)) {\n            return this.executeActionSheet(event);\n        }\n        this.toggleDropdown();\n        this.focusInput();\n    };\n\n    inputFocusHandler = () => {\n        this.inputFocused = true;\n    };\n\n    inputInputHandler = (event: Q2InputCustomEvent<IEventDetail> & InputEvent) => {\n        event.stopPropagation();\n        const eventValue = event.detail.value;\n        const shouldClearValue = !!this.value;\n\n        if (shouldClearValue) this.clearValue();\n        if (!this.open) this.openDropdownWithoutActiveElement();\n\n        this.prioritizeSearch = true;\n        this.searchText = eventValue;\n        this.input.emit({ query: eventValue });\n    };\n\n    inputKeydownHandler = (event: KeyboardEvent) => {\n        if (this.readonly || this.disabled) return;\n        const { key, shiftKey } = event;\n        const isShiftTab = key === 'Tab' && shiftKey;\n        const hasSlot = this.hasPopoverTop || this.hasPopoverBottom;\n        if (hasSlot && (key === 'Tab' || isShiftTab)) return;\n\n        // slots are incompatible with action sheet\n        if (shouldShowActionSheet(this, event) && !hasSlot) {\n            return this.executeActionSheet(event);\n        }\n\n        const keysForOptionListToHandle = [\n            'ArrowDown',\n            'ArrowUp',\n            'PageDown',\n            'PageUp',\n            'Home',\n            'End',\n            'Escape',\n            'Tab',\n        ];\n\n        if (this.searchable && (key === ' ' || key === 'Enter') && this.inputField.value == '') {\n            event.preventDefault();\n            if (!this.open) this.openDropdownWithoutActiveElement();\n        }\n\n        if (this.searchable && !keysForOptionListToHandle.includes(key)) return;\n        if (this.shouldClearSearchText(event)) this.clearSearchText();\n\n        // Prevent click event from firing when spacebar is pressed\n        if (key === ' ') event.preventDefault();\n\n        this.optionList.handleExternalKeydown(event);\n    };\n\n    onCustomDisplayClick = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.focusInput();\n        this.toggleDropdown();\n    };\n\n    onMutationObserved = () => {\n        const { hostElement, hasPopoverTop, hasPopoverBottom } = this;\n        const slotContainer = hostElement.querySelector('.custom-display-content');\n        const displaySlot = hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"q2-select-display\"]');\n        const hasCustomDisplay = !!displaySlot\n            ? displaySlot.assignedNodes().length > 0\n            : slotContainer.children.length > 0;\n\n        if (this.hasCustomDisplay !== hasCustomDisplay) {\n            this.hasCustomDisplay = hasCustomDisplay;\n        }\n\n        const popTopSlot = hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"popover-top\"]');\n        const topSlotHasNode = popTopSlot?.assignedNodes().length > 0;\n        if (hasPopoverTop !== topSlotHasNode) {\n            this.hasPopoverTop = topSlotHasNode;\n        }\n\n        const popBottomSlot = hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"popover-bottom\"]');\n        const bottomSlotHasNode = popBottomSlot?.assignedNodes().length > 0;\n        if (hasPopoverBottom !== bottomSlotHasNode) {\n            this.hasPopoverBottom = bottomSlotHasNode;\n        }\n\n        this.checkSelectedOptions();\n    };\n\n    onOptionListChange = (event: Q2OptionListCustomEvent<{ value: string; values: IOptionValue[] }>) => {\n        event.stopPropagation();\n        const { values } = event.detail;\n\n        if (values.length === 0) this.showAllOptions();\n        this.handleSelectionChanges(event.detail);\n    };\n\n    onPopoverState = ({\n        detail: { open, action },\n    }: CustomEvent<{ open: boolean; action: 'close' | 'select' | 'open' }>) => {\n        if (!open || this.searchText) {\n            if (action !== 'select') {\n                this.optionList.setActiveElement(null);\n            }\n            this.inputField.focus();\n        }\n\n        if (this.open === open) return;\n        this.open = open;\n    };\n\n    openDropdownWithoutActiveElement() {\n        if (this.readonly || this.disabled) return;\n        this.optionList.setActiveElement(null);\n        this.open = true;\n    }\n\n    setStatusMessage(message) {\n        clearTimeout(this.statusMessageTimer);\n        this.statusMessage = '';\n        this.statusMessageTimer = setTimeout(() => {\n            this.statusMessage = message;\n        }, 1000);\n    }\n\n    shouldClearSearchText(event: KeyboardEvent) {\n        return this.searchable && !!this.searchText && event.key === 'Escape';\n    }\n\n    showAllOptions = () => {\n        this.showSelected = false;\n    };\n\n    showSelectedOptions = () => {\n        this.showSelected = true;\n    };\n\n    toggleDropdown() {\n        if (this.readonly || this.disabled) return;\n\n        if (this.open && !this.searchText) {\n            this.closeDropdown();\n        } else {\n            this.openDropdownWithoutActiveElement();\n        }\n    }\n\n    visibilityToggleKeyDown = (event: KeyboardEvent) => {\n        const key = event.key;\n        const isShiftTab = key === 'Tab' && event.shiftKey;\n        const isRadioControlKey = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(key);\n        if (isRadioControlKey) event.stopPropagation();\n        if (isShiftTab) {\n            event.stopPropagation();\n            // allows shift+tab keys to select the top slot when present\n            if (this.hasPopoverTop) return;\n\n            this.optionList.setDefaultActiveElement();\n        }\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderCustomDisplay() {\n        const hasSelectedDisplay = this.checkSelectedDisplay();\n        if (!hasSelectedDisplay) return;\n        this.checkSelectedDisplayHeight();\n\n        return (\n            <slot\n                name=\"_selected-display\"\n                slot=\"custom-display\"\n            />\n        );\n    }\n\n    renderOptionsDropdown() {\n        return (\n            <q2-popover\n                ref={el => (this.popoverElement = el)}\n                controlElement={this.innerInputContainer}\n                open={this.open}\n                max-height={this.popoverMaxHeight}\n                minHeight={this.popoverMinHeight}\n                direction={this.popDirection}\n                mode={this.popoverMode || undefined}\n                block\n            >\n                <div class=\"popover-content\">\n                    <q2-option-list\n                        onPopoverState={this.onPopoverState}\n                        ref={el => (this.optionList = el)}\n                        type=\"listbox\"\n                        id=\"option-list\"\n                        show-selected={this.showSelected}\n                        label={this.listLabel}\n                        multiple={this.multiple}\n                        selectedOptions={this.structuredSelectedOptions}\n                        onChange={this.onOptionListChange}\n                    >\n                        <slot />\n                    </q2-option-list>\n                    <div\n                        class=\"popover-top-container\"\n                        ref={el => (this.popoverTopContainer = el)}\n                        hidden={!this.multiple && !this.hasPopoverTop}\n                        tabindex=\"-1\"\n                    >\n                        <slot name=\"popover-top\"></slot>\n                        {this.multiple && this.renderVisibilityToggle()}\n                    </div>\n                </div>\n                <div\n                    class=\"popover-bottom-container\"\n                    hidden={!this.hasPopoverBottom}\n                    tabindex=\"-1\"\n                >\n                    <slot name=\"popover-bottom\" />\n                </div>\n            </q2-popover>\n        );\n    }\n\n    renderVisibilityToggle() {\n        const selectedOptionsCount = this.selectedOptions?.length ?? 0;\n        const { showSelected } = this;\n        return (\n            <div class=\"multi-select-header\">\n                <fieldset>\n                    <legend aria-label={loc('tecton.element.select.multiHeader.showing')}>\n                        {loc('tecton.element.select.multiHeader.showing')}\n                    </legend>\n                    <div>\n                        <input\n                            class=\"sr\"\n                            type=\"radio\"\n                            id=\"all\"\n                            name=\"viewDisplay\"\n                            value=\"all\"\n                            checked={!showSelected}\n                            aria-label={loc('tecton.element.select.multiHeader.allAriaLabel')}\n                            test-id=\"allOptionsButton\"\n                            onClick={this.showAllOptions}\n                            onKeyDown={this.visibilityToggleKeyDown}\n                        />\n                        <label htmlFor=\"all\">{loc('tecton.element.select.multiHeader.all')}</label>\n                    </div>\n\n                    <div>\n                        <input\n                            class=\"sr\"\n                            type=\"radio\"\n                            id=\"selected\"\n                            disabled={selectedOptionsCount === 0}\n                            name=\"viewDisplay\"\n                            value=\"selected\"\n                            aria-label={loc('tecton.element.select.multiHeader.selectedAriaLabel', [\n                                selectedOptionsCount,\n                            ])}\n                            checked={showSelected}\n                            test-id=\"selectedOptionsButton\"\n                            onClick={this.showSelectedOptions}\n                            onKeyDown={this.visibilityToggleKeyDown}\n                        />\n                        <label htmlFor=\"selected\">\n                            {loc('tecton.element.select.multiHeader.selected', [selectedOptionsCount])}\n                        </label>\n                    </div>\n                </fieldset>\n            </div>\n        );\n    }\n\n    render() {\n        return (\n            <click-elsewhere\n                class={this.wrapperClasses}\n                onChange={this.clickedElsewhere}\n            >\n                <div\n                    aria-live=\"polite\"\n                    aria-atomic=\"true\"\n                    role=\"status\"\n                    class=\"sr\"\n                >\n                    {this.statusMessage}\n                </div>\n                <q2-input\n                    ref={el => (this.inputField = el)}\n                    class=\"q2-select-input\"\n                    label={(this.label && loc(this.label)) || ''}\n                    value={this.selectedDisplay}\n                    clearable={(this.clearable && (!!this.value || !!this.selectedOptions?.length)) || undefined}\n                    errors={\n                        (Array.isArray(this.errors) &&\n                            this.errors.length > 0 &&\n                            this.errors.map(error => loc(error))) ||\n                        (this.invalid && ['tecton.element.select.invalid']) ||\n                        []\n                    }\n                    disabled={this.disabled}\n                    optional={this.optional}\n                    readonly={!!this.readonly}\n                    placeholder={this.placeholder || undefined}\n                    hideLabel={this.hideLabel}\n                    ariaExpanded={`${this.open}`}\n                    ariaControls=\"option-list\"\n                    ariaHaspopup=\"listbox\"\n                    test-id=\"toggleDropdown\"\n                    hide-messages\n                    iconRight=\"chevron-down\"\n                    onClick={this.inputClickHandler}\n                    onInput={this.inputInputHandler}\n                    onKeyDown={this.inputKeydownHandler}\n                    onFocus={this.inputFocusHandler}\n                    onBlur={this.inputBlurHandler}\n                    onChange={this.inputChangeHandler}\n                    badgeValue={this.badgeValue}\n                    badgeTheme={this.inputFocused ? 'primary' : undefined}\n                    _role=\"combobox\"\n                    _preventEntry={!this.searchable}\n                >\n                    {this.renderCustomDisplay()}\n                </q2-input>\n                <div\n                    class=\"custom-display-content\"\n                    hidden={!this.hasCustomDisplay || !!this.searchText}\n                    onClick={this.onCustomDisplayClick}\n                >\n                    <slot name=\"q2-select-display\" />\n                </div>\n                {this.renderOptionsDropdown()}\n            </click-elsewhere>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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"}