q2-tecton-elements 1.54.2 → 1.54.4

package/dist/q2-tecton-elements/q2-option-list_2.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["sanitizeRegexString","regexString","replace","q2OptionListCss","Q2OptionListStyle0","Q2OptionList","this","keyStore","queue","lastPressedAt","Date","scheduledAfterRender","clickHandler","event","target","option","closest","selectOption","multiple","popoverState","emit","open","action","externalKeydownHandler","stopPropagation","activeIndex","customSearch","allOptions","key","nextIndex","searchString","searchOptions","type","openDropdownWithActiveElement","setDefaultActiveElement","nextPaint","preventDefault","selectedOptions","length","getDefaultActiveIndex","getNextVisibleIndex","Math","max","min","noSelect","setActiveElement","match","focusoutHandler","relatedTarget","isInQ2OptionList","includes","isInLightDom","hostElement","contains","internalKeydownHandler","allVisibleOptions","shiftKey","newOption","find","element","active","disabled","firstVisibleOption","isFirstVisibleOptionActive","undefined","adjustActiveOptionAndScroll","lastVisibleOption","isLastVisibleOptionActive","searchAndFocus","keyValue","shouldSelect","reorder","pivotIndex","list","map","index","slice","buildQueue","now","getTime","push","searchIndex","keyStr","join","sanitizedKeyStr","v","display","RegExp","setFocus","matched","loc","componentWillLoad","hasOptions","querySelectorAll","componentDidLoad","overrideFocus","checkOptions","selectedOptionsUpdated","ready","componentDidRender","forEach","fn","handleClick","delegateFocus","isEventFromElement","setActiveOption","setFocusedOption","getContents","allContents","getOptions","handleExternalKeydown","updateMultipleOptionAttrs","updateSingleOptionAttrs","showSelectedUpdated","showSelected","_multiSelectHidden","selected","rootSlot","getRootSlot","acceptedTags","Set","filter","has","tagName","contents","extractOptions","elements","reduce","acc","separator","Array","from","children","hidden","disabledGroup","numToAdd","scrollToActiveOption","optionRole","role","focusSelectedSibling","hasNoSiblings","selectedOptionVisibleIndex","indexOf","nextVisibleSiblingIndex","nextVisibleSibling","nextSiblingIndex","firstSelected","findIndex","firstEnabled","direction","activeOption","visibleActiveOptionIndex","nextVisibleOptionIndex","nextVisibleOption","slot","querySelector","assignedElements","_a","hasAnotherSlot","waitForNextPaint","resetTimer","searchStringTimer","clearTimeout","window","setTimeout","scrollIntoView","block","selectedOption","selectedValue","value","displayValue","innerText","trim","valueObject","values","isAlreadySelected","change","elementIndex","isOptionVisible","isVisible","focus","selectedValues","render","h","Host","class","ref","el","contentElement","onFocusout","label","onKeyDown","onClick","q2PopoverCss","Q2PopoverStyle0","Q2Popover","displayBuffer","orientationChanged","handleMinHeight","minHeight","handleDeprecationWarning","setAbsoluteCSSProperties","async","controlElement","containerElement","currentDirection","align","style","setProperty","controlStyle","getComputedStyle","controlSize","parseInt","height","borderTopWidth","borderBottomWidth","setFixedCSSProperties","rootElementRect","top","controlTop","bottom","controlBottom","left","controlLeft","right","controlRight","_b","getBoundingClientRect","call","popoverLeft","offsetWidth","width","viewPortChanged","determinePopDirection","viewPortOrientationChanged","disconnectedCallback","removeViewportListeners","popoverStateHandler","detail","scrollContainerTo","options","scrollTo","toggle","minHeightProvided","openChanged","setRootElement","popoverStateChanged","addViewportListeners","show","clearCSSProperties","isModule","isIframe","hasPlatformDimensions","Object","keys","Tecton","platformDimensions","providedDirection","validatedMaxHeight","maxHeight","isNaN","addEventListener","passive","capture","screen","orientation","removeProperty","windowHeight","maxSpaceAbove","maxSpaceBelow","outletOffset","innerHeight","_c","distanceToIframeBottom","visualViewport","viewableSpaceBelow","isIframeShorterThanWindow","directionWithMostSpace","shouldUpdateMaxHeight","getPropertyValue","currentOrDetermineDirection","priorityMaxHeight","setDirectionAndShow","removeEventListener","isOpen","mode","currentElement","document","documentElement","computedStyle","transform","perspective","containerType","willChange","contain","rootNode","getRootNode","isRootNodeWebComponent","ShadowRoot","host","HTMLElement","parentElement","containerClasses","tabIndex"],"sources":["src/utils/sanitize-regex-string.ts","src/components/q2-option-list/q2-option-list.scss?tag=q2-option-list&encapsulation=shadow","src/components/q2-option-list/q2-option-list.tsx","src/components/q2-popover/q2-popover.scss?tag=q2-popover&encapsulation=shadow","src/components/q2-popover/q2-popover.tsx"],"sourcesContent":["export default function sanitizeRegexString(regexString: string) {\n    return regexString.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');\n}\n","@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    position: relative;\n    width: 100%;\n    display: block;\n    line-height: var-list(var-prefixer(option-list-line-height),--app-line-height, 1.428571429em);\n}\n\n.content {\n    text-align: start;\n\n    :host([is-sizeable]) & {\n        display: block;\n        height: auto;\n    }\n}\n","import sanitizeRegexString from '@/utils/sanitize-regex-string';\nimport {\n    Component,\n    Prop,\n    h,\n    Event,\n    State,\n    Element,\n    ComponentInterface,\n    Host,\n    EventEmitter,\n    Method,\n    Watch,\n    Listen,\n} from '@stencil/core';\nimport { isEventFromElement, isVisible, loc, nextPaint, overrideFocus, waitForNextPaint } from 'src/utils';\n\nexport interface IOptionValue {\n    value: string;\n    display?: string;\n}\n\nexport type ValidOptionElements = HTMLQ2OptionElement | HTMLQ2DropdownItemElement;\n\n@Component({ tag: 'q2-option-list', shadow: true, styleUrl: 'q2-option-list.scss' })\nexport class Q2OptionList implements ComponentInterface {\n    // #region Own Properties\n\n    activeIndex: number;\n    contentElement: HTMLElement;\n    keyStore: {\n        queue: string[];\n        lastPressedAt: Date;\n    } = {\n        queue: [],\n        lastPressedAt: new Date(),\n    };\n    pivotIndex: number;\n    scheduledAfterRender: (() => void)[] = [];\n    searchString: string;\n    searchStringTimer: number;\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    hasOptions: boolean;\n\n    // #endregion\n    // #region Public Property API\n\n    @Prop({ reflect: true })\n    align: 'left' | 'right';\n\n    /** Indicates a custom search is being implemented for the option list. */\n    @Prop({ reflect: true })\n    customSearch: boolean;\n\n    /** Disables the option list. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /** Determines the label that is applied to the option list for accessibility purposes. */\n    @Prop()\n    label: string = loc('tecton.element.optionList.label');\n\n    /**\n     * Enables the multi-select ability for the option list.\n     * @info\n     * Only applicable when options are provided.\n     */\n    @Prop({ reflect: true })\n    multiple: boolean;\n\n    /** Disables the logic that handles selecting and focusing an option in the option list. */\n    @Prop({ reflect: true })\n    noSelect: boolean;\n\n    /** A list of the selected options on the element. */\n    @Prop({ mutable: true })\n    selectedOptions: IOptionValue[] = [];\n\n    /** Applies focus to the selected option. */\n    @Prop({ reflect: true, mutable: true })\n    showSelected: boolean;\n\n    /** Translates to the role of the option list */\n    @Prop()\n    type: 'menu' | 'listbox' = 'listbox';\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    @Event()\n    change: EventEmitter<{ value: string; values: IOptionValue[] }>;\n\n    /**\n     * Emitted to indicate the intended state of the popover.\n     * @private\n     */\n    @Event()\n    popoverState: EventEmitter<{ open: boolean; action: 'close' | 'select' | 'open' }>;\n\n    /**\n     * Emitted when the component has finished rendering.\n     * @private\n     */\n    @Event({ bubbles: false })\n    ready: EventEmitter<undefined>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        this.hasOptions = !!this.hostElement.querySelectorAll(\n            'q2-option:not([separator]):not([separator=true]), q2-dropdown-item:not([separator]):not([separator=true])'\n        ).length;\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n        this.checkOptions();\n        this.selectedOptionsUpdated();\n        this.ready.emit();\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('click')\n    handleClick(event: MouseEvent) {\n        event.stopPropagation();\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.popoverState.emit({ open: true, action: 'open' });\n        const { activeIndex } = this;\n        if (typeof activeIndex === 'number' && activeIndex > -1) {\n            this.setActiveOption();\n            this.setFocusedOption();\n        } else {\n            this.setDefaultActiveElement();\n        }\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    @Method()\n    async getContents(): Promise<(HTMLQ2OptgroupElement | ValidOptionElements)[]> {\n        return this.allContents;\n    }\n\n    @Method()\n    async getOptions(): Promise<ValidOptionElements[]> {\n        return this.allOptions;\n    }\n\n    @Method()\n    async handleExternalKeydown(event: KeyboardEvent) {\n        this.externalKeydownHandler(event);\n    }\n\n    @Method()\n    async setActiveElement(index: number) {\n        this.activeIndex = index;\n        this.setActiveOption();\n        this.setFocusedOption();\n    }\n\n    @Method()\n    async setDefaultActiveElement() {\n        this.activeIndex = this.getDefaultActiveIndex();\n        this.setActiveOption();\n        this.setFocusedOption();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('selectedOptions')\n    selectedOptionsUpdated() {\n        if (this.multiple) {\n            this.updateMultipleOptionAttrs();\n        } else {\n            this.updateSingleOptionAttrs();\n        }\n    }\n\n    @Watch('showSelected')\n    showSelectedUpdated(showSelected: boolean) {\n        if (showSelected && this.selectedOptions.length === 0) {\n            this.showSelected = false;\n            return;\n        }\n        this.allOptions.forEach(option => {\n            if (!('_multiSelectHidden' in option)) return;\n            option._multiSelectHidden = showSelected ? !option.selected : false;\n        });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get allContents(): (HTMLQ2OptgroupElement | ValidOptionElements)[] {\n        const rootSlot = this.getRootSlot(this.hostElement);\n        const acceptedTags = new Set(['Q2-OPTGROUP', 'Q2-OPTION', 'Q2-DROPDOWN-ITEM']);\n        return rootSlot.filter(element => acceptedTags.has(element.tagName)) as (\n            | HTMLQ2OptgroupElement\n            | ValidOptionElements\n        )[];\n    }\n\n    get allOptions(): ValidOptionElements[] {\n        const contents = this.allContents;\n\n        const extractOptions = (\n            elements: (HTMLQ2OptgroupElement | ValidOptionElements | Element)[]\n        ): ValidOptionElements[] => {\n            return elements.reduce((acc, element) => {\n                if (element.tagName === 'Q2-OPTION' || element.tagName === 'Q2-DROPDOWN-ITEM') {\n                    return (element as ValidOptionElements).separator ? acc : [...acc, element];\n                } else if (element.tagName === 'Q2-OPTGROUP') {\n                    return [...acc, ...extractOptions(Array.from(element.children))];\n                } else {\n                    return acc;\n                }\n            }, []);\n        };\n\n        return extractOptions(contents);\n    }\n\n    get allVisibleOptions(): ValidOptionElements[] {\n        return this.allOptions.filter(\n            option =>\n                !option.hidden &&\n                (!('_multiSelectHidden' in option) || !option._multiSelectHidden) &&\n                !option.disabled &&\n                (!('disabledGroup' in option) || !option.disabledGroup)\n        );\n    }\n\n    adjustActiveOptionAndScroll(numToAdd: number) {\n        this.activeIndex += numToAdd;\n        this.setActiveOption();\n        this.setFocusedOption();\n        this.scrollToActiveOption();\n    }\n\n    checkOptions() {\n        const { type } = this;\n        if (!type) return;\n        const optionRole = type === 'menu' ? 'menuitem' : 'option';\n        this.allOptions.forEach(option => {\n            option.role = optionRole;\n        });\n    }\n\n    clickHandler = (event: Event) => {\n        const target = event.target as ValidOptionElements;\n        const option = target.closest<ValidOptionElements>(\n            'q2-option:not([separator]):not([separator=true]), q2-dropdown-item:not([separator]):not([separator=true])'\n        );\n        this.selectOption(option);\n        if (this.multiple) return;\n        this.popoverState.emit({ open: false, action: 'select' });\n    };\n\n    /* tslint:disable:cyclomatic-complexity */\n    externalKeydownHandler = (event: KeyboardEvent) => {\n        event.stopPropagation();\n        const { activeIndex, customSearch, allOptions } = this;\n        const { key } = event;\n\n        let nextIndex;\n        switch (key) {\n            case ' ':\n                if (this.searchString) {\n                    if (customSearch) break;\n\n                    this.searchOptions(key, true);\n                    break;\n                } else if (this.type === 'menu') {\n                    this.activeIndex = 0;\n                    this.openDropdownWithActiveElement(0);\n                } else {\n                    this.setDefaultActiveElement();\n                    nextPaint(() => this.popoverState.emit({ open: true, action: 'open' }));\n                }\n                break;\n\n            case 'Enter':\n                if (this.type === 'menu') {\n                    this.activeIndex = 0;\n                    this.openDropdownWithActiveElement(0);\n                } else {\n                    this.setDefaultActiveElement();\n                    nextPaint(() => this.popoverState.emit({ open: true, action: 'open' }));\n                }\n                break;\n\n            case 'ArrowUp':\n                event.preventDefault();\n                nextIndex = !!this.selectedOptions.length ? this.getDefaultActiveIndex() : this.getNextVisibleIndex(-1);\n                if (nextIndex === -1) break;\n                this.openDropdownWithActiveElement(nextIndex);\n                break;\n\n            case 'ArrowDown':\n                event.preventDefault();\n                nextIndex = !!this.selectedOptions.length ? this.getDefaultActiveIndex() : this.getNextVisibleIndex(1);\n                if (nextIndex === -1) break;\n                this.openDropdownWithActiveElement(nextIndex);\n                break;\n\n            case 'Home':\n                event.preventDefault();\n                this.openDropdownWithActiveElement(0);\n                break;\n\n            case 'End':\n                event.preventDefault();\n                this.openDropdownWithActiveElement(allOptions.length - 1);\n                break;\n\n            case 'PageUp':\n                event.preventDefault();\n                this.openDropdownWithActiveElement(Math.max((activeIndex || 0) - 10, 0));\n                break;\n\n            case 'PageDown':\n                event.preventDefault();\n                this.openDropdownWithActiveElement(Math.min((activeIndex || 0) + 10, allOptions.length - 1));\n                break;\n\n            case 'Tab':\n                this.popoverState.emit({ open: false, action: 'close' });\n                break;\n\n            case 'Esc':\n            case 'Escape':\n                if (this.noSelect) this.setActiveElement(null);\n                this.popoverState.emit({ open: false, action: 'close' });\n                break;\n\n            default:\n                if (customSearch) break;\n                if (!key.match(/^[\\w]$/)) break;\n\n                this.searchOptions(key, true);\n                break;\n        }\n    };\n\n    /* tslint:enable:cyclomatic-complexity */\n\n    focusoutHandler = (event: FocusEvent) => {\n        const { relatedTarget } = event as unknown as { relatedTarget: ValidOptionElements };\n        const isInQ2OptionList = this.allOptions.includes(relatedTarget);\n        const isInLightDom = !isInQ2OptionList && this.hostElement.contains(relatedTarget);\n        if (isInQ2OptionList || isInLightDom) {\n            event.stopPropagation();\n        }\n    };\n\n    focusSelectedSibling(option: ValidOptionElements) {\n        const { allVisibleOptions, allOptions } = this;\n        const hasNoSiblings = allVisibleOptions.length < 2;\n        if (hasNoSiblings) {\n            this.showSelected = false;\n            return;\n        }\n\n        const selectedOptionVisibleIndex = allVisibleOptions.indexOf(option);\n        const nextVisibleSiblingIndex = selectedOptionVisibleIndex\n            ? selectedOptionVisibleIndex - 1\n            : selectedOptionVisibleIndex + 1;\n        const nextVisibleSibling = allVisibleOptions[nextVisibleSiblingIndex];\n        const nextSiblingIndex = allOptions.indexOf(nextVisibleSibling);\n\n        this.activeIndex = nextSiblingIndex;\n        this.setFocusedOption();\n        this.scheduledAfterRender.push(() => {\n            if (!('_multiSelectHidden' in option)) return;\n            option._multiSelectHidden = !option.selected;\n        });\n    }\n\n    getDefaultActiveIndex() {\n        const { allOptions } = this;\n        const firstSelected = allOptions.findIndex(element => {\n            return 'selected' in element && element.selected;\n        });\n        if (firstSelected > -1) return firstSelected;\n\n        const firstEnabled = allOptions.findIndex(element => !element.hidden);\n        if (firstEnabled > -1) return firstEnabled;\n\n        return 0;\n    }\n\n    getNextVisibleIndex(direction) {\n        const { allVisibleOptions, allOptions, activeIndex } = this;\n        const activeOption = allOptions[activeIndex];\n        const visibleActiveOptionIndex = allVisibleOptions.indexOf(activeOption);\n        let nextVisibleOptionIndex = visibleActiveOptionIndex + direction;\n\n        if (nextVisibleOptionIndex < 0) {\n            nextVisibleOptionIndex = allVisibleOptions.length - 1;\n        } else if (nextVisibleOptionIndex > allVisibleOptions.length - 1) {\n            nextVisibleOptionIndex = 0;\n        }\n\n        const nextVisibleOption = allVisibleOptions[nextVisibleOptionIndex];\n        return allOptions.indexOf(nextVisibleOption);\n    }\n\n    getRootSlot(element: Element): Element[] {\n        const slot = element.querySelector('slot');\n        const assignedElements = slot?.assignedElements() ?? Array.from(element.children);\n        const hasAnotherSlot = !!assignedElements.length && assignedElements[0].tagName === 'SLOT';\n        if (hasAnotherSlot) {\n            return this.getRootSlot(assignedElements[0]);\n        } else {\n            return assignedElements;\n        }\n    }\n\n    internalKeydownHandler = (event: KeyboardEvent) => {\n        event.stopPropagation();\n        const { activeIndex, customSearch, allOptions, allVisibleOptions, multiple } = this;\n        const { key, shiftKey } = event;\n\n        let newOption: ValidOptionElements;\n        switch (key) {\n            case ' ':\n                if (this.searchString && !this.multiple) {\n                    if (customSearch) break;\n\n                    this.searchOptions(key, false);\n                    break;\n                }\n\n                event.preventDefault();\n                newOption = allOptions.find(element => element.active);\n                if (!newOption || newOption.disabled) break;\n                this.selectOption(newOption);\n                if (multiple) break;\n                this.popoverState.emit({ open: false, action: 'select' });\n                break;\n\n            case 'Enter':\n                event.preventDefault();\n                newOption = allOptions.find(element => element.active);\n                if (!newOption || newOption.disabled) break;\n                this.selectOption(newOption);\n                if (multiple) break;\n                this.popoverState.emit({ open: false, action: 'select' });\n                break;\n\n            case 'ArrowUp':\n                event.preventDefault();\n                const firstVisibleOption = allVisibleOptions[0];\n                const isFirstVisibleOptionActive = firstVisibleOption.active;\n                if (isFirstVisibleOptionActive) break;\n                if (activeIndex === undefined) {\n                    this.setDefaultActiveElement();\n                    break;\n                } else {\n                    const nextIndex = this.getNextVisibleIndex(-1);\n                    if (nextIndex === -1) break;\n                    this.adjustActiveOptionAndScroll(nextIndex - activeIndex);\n                    break;\n                }\n\n            case 'ArrowDown':\n                event.preventDefault();\n                const lastVisibleOption = allVisibleOptions[allVisibleOptions.length - 1];\n                const isLastVisibleOptionActive = lastVisibleOption.active;\n                if (isLastVisibleOptionActive) break;\n                if (activeIndex === undefined) {\n                    this.setDefaultActiveElement();\n                    break;\n                } else {\n                    const nextIndex = this.getNextVisibleIndex(1);\n                    if (nextIndex === -1) break;\n                    this.adjustActiveOptionAndScroll(nextIndex - activeIndex);\n                    break;\n                }\n\n            case 'Home':\n                event.preventDefault();\n                this.openDropdownWithActiveElement(0);\n                break;\n\n            case 'End':\n                event.preventDefault();\n                this.openDropdownWithActiveElement(allOptions.length - 1);\n                break;\n\n            case 'PageUp':\n                event.preventDefault();\n                this.openDropdownWithActiveElement(Math.max(activeIndex - 10, 0));\n                break;\n\n            case 'PageDown':\n                event.preventDefault();\n                this.openDropdownWithActiveElement(Math.min(activeIndex + 10, allOptions.length - 1));\n                break;\n\n            case 'Tab':\n                if (shiftKey) break;\n                if (this.multiple && this.type === 'listbox') break;\n                if (this.type === 'menu') {\n                    this.popoverState.emit({ open: false, action: 'close' });\n                    break;\n                }\n\n                newOption = allOptions.find(element => element.active);\n                if (!newOption || newOption.disabled) return;\n                this.selectOption(newOption);\n                break;\n\n            case 'Esc':\n            case 'Escape':\n                if (this.noSelect) this.setActiveElement(null);\n                this.popoverState.emit({ open: false, action: 'close' });\n                break;\n\n            default:\n                if (customSearch) break;\n                if (!key.match(/^[\\w]$/)) break;\n\n                this.searchOptions(key, false);\n                break;\n        }\n    };\n\n    async openDropdownWithActiveElement(activeIndex: number) {\n        if (this.disabled) return;\n        this.popoverState.emit({ open: true, action: 'open' });\n        await waitForNextPaint();\n        this.activeIndex = activeIndex;\n        this.setActiveOption();\n        this.setFocusedOption();\n        this.scrollToActiveOption();\n    }\n\n    resetTimer() {\n        if (this.searchStringTimer) {\n            clearTimeout(this.searchStringTimer);\n        }\n\n        this.searchStringTimer = window.setTimeout(() => {\n            this.searchString = null;\n        }, 2000);\n    }\n\n    scrollToActiveOption() {\n        const activeOption = this.allOptions[this.activeIndex];\n        activeOption?.scrollIntoView({ block: 'center' });\n    }\n\n    searchAndFocus = (keyValue: string, shouldSelect: boolean) => {\n        // pseudo search in non-searchable select\n        const reorder = () => {\n            this.pivotIndex = this.pivotIndex === undefined ? 0 : (this.activeIndex || 0) + 1;\n            const list = this.allOptions.map((element, index) => ({ element, index }));\n            return [...list.slice(this.pivotIndex), ...list.slice(0, this.pivotIndex)];\n        };\n\n        const buildQueue = () => {\n            const now = new Date();\n            if (now.getTime() - this.keyStore.lastPressedAt.getTime() > 1000) {\n                // empty stored keys if delay > 1s\n                this.keyStore.queue.length = 0;\n            }\n            if (this.keyStore.queue.length !== 1 || this.keyStore.queue[0] !== keyValue) {\n                this.keyStore.queue.push(keyValue);\n            }\n            this.keyStore.lastPressedAt = now;\n        };\n\n        const searchIndex = (list: any[]) => {\n            const keyStr = this.keyStore.queue.join('');\n            const sanitizedKeyStr = sanitizeRegexString(keyStr);\n            return list.find(v => {\n                return (\n                    !v.element.disabled &&\n                    v.element.display &&\n                    (v.element.display.match(new RegExp(`^${sanitizedKeyStr}`, 'i')) ||\n                        v.element.display.replace(/\\s/g, '').match(new RegExp(`^${sanitizedKeyStr}`, 'i')))\n                );\n            });\n        };\n\n        const setFocus = ({ index }) => {\n            if (this.multiple) {\n                // multiple: should open to make sure that which options are selected\n                this.openDropdownWithActiveElement(index);\n            } else {\n                this.activeIndex = index;\n                if (shouldSelect) {\n                    this.selectOption(this.allOptions[index]);\n                    this.popoverState.emit({ open: false, action: 'select' });\n                } else this.setActiveElement(index);\n            }\n        };\n\n        buildQueue();\n        const matched = searchIndex(reorder());\n        if (matched) {\n            setFocus(matched);\n        }\n    };\n\n    searchOptions(key: string, shouldSelect?: boolean) {\n        this.searchString = key;\n        this.searchAndFocus(key, shouldSelect);\n    }\n\n    selectOption(selectedOption: ValidOptionElements) {\n        const { multiple, noSelect, showSelected } = this;\n        if (\n            !selectedOption ||\n            selectedOption.disabled ||\n            ('disabledGroup' in selectedOption && selectedOption.disabledGroup)\n        )\n            return;\n        const selectedValue = selectedOption.value;\n        const displayValue =\n            'display' in selectedOption && selectedOption.display\n                ? selectedOption.display\n                : selectedOption.innerText.trim();\n        const valueObject = {\n            value: selectedValue,\n            display: displayValue,\n        };\n\n        let values: IOptionValue[] = [];\n        if (multiple) {\n            const { selectedOptions } = this;\n            const isAlreadySelected = selectedOptions.find(option => option.value === selectedValue);\n\n            if (isAlreadySelected) {\n                values = selectedOptions.filter(({ value }) => value !== selectedValue);\n            } else {\n                values = [...selectedOptions, valueObject];\n            }\n\n            if (showSelected) this.focusSelectedSibling(selectedOption);\n        } else {\n            values = [valueObject];\n        }\n\n        if (noSelect) this.setActiveElement(null);\n        else this.selectedOptions = values;\n\n        this.change.emit({ value: selectedValue, values });\n    }\n\n    setActiveOption() {\n        const activeIndex = this.activeIndex;\n\n        this.allOptions.forEach((element, elementIndex) => {\n            element.active = activeIndex === elementIndex;\n        });\n    }\n\n    setFocusedOption() {\n        const option = this.allOptions[this.activeIndex];\n        if (!option) return;\n\n        const isOptionVisible = isVisible(option);\n        if (isOptionVisible) option.focus();\n        else nextPaint(() => option.focus());\n    }\n\n    updateMultipleOptionAttrs() {\n        const { allOptions, selectedOptions } = this;\n        const selectedValues = selectedOptions.map(({ value }) => value);\n        if (this.noSelect) return;\n        allOptions.forEach(element => {\n            if (!('selected' in element)) return;\n            element.selected = selectedValues.includes(element.value);\n        });\n    }\n\n    updateSingleOptionAttrs() {\n        const { allOptions, selectedOptions } = this;\n        const selectedValue = selectedOptions[0]?.value || undefined;\n        if (this.noSelect) return;\n        allOptions.forEach(element => {\n            if (!('selected' in element)) return;\n            element.selected = element.value === selectedValue;\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <Host>\n                <div\n                    class=\"content\"\n                    ref={el => (this.contentElement = el)}\n                    onFocusout={this.focusoutHandler}\n                >\n                    <div\n                        class=\"options\"\n                        aria-label={loc('tecton.element.optionList.label', [this.label])}\n                        aria-multiselectable={`${!!this.multiple}`}\n                        role={this.type || 'listbox'}\n                        onKeyDown={this.internalKeydownHandler}\n                        onClick={this.clickHandler}\n                    >\n                        <slot />\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n\n    // #endregion\n}\n","@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.container {\n    display: none;\n}\n\n.show {\n    display: block;\n    position: fixed;\n    z-index: var-list(--tct-popover-z-index, 50);\n    margin: 0;\n    padding: 0;\n    overflow: auto;\n    background: var-list(--tct-popover-background, --app-white, #ffffff);\n    color: var-list(--tct-popover-font-color, --t-text, #4d4d4d);\n    min-width: var-list(--tct-popover-min-width, 135px);\n    margin-block: var-list(--tct-popover-margin-block, 0);\n    box-shadow: var-list(--tct-popover-box-shadow, --app-shadow-1, unquote(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)\"));\n    border-width: var-list(--tct-popover-border-width, 0);\n    border-style: solid;\n    border-color: var-list(--tct-popover-border-color, transparent);\n    border-radius: var-list(--tct-popover-border-radius, 0);\n    // the following --comp variables are set via JS\n    max-height: var(--comp-pop-max-height);\n    left: var(--comp-pop-left);\n    opacity: var(--comp-pop-opacity, 0);\n\n    :host([block]) & {\n        right: unset;\n        width: var(--comp-pop-width);\n        min-width: var-list(--tct-popover-min-width, unset);\n    }\n\n    :host([align='left']) & {\n        left: var(--comp-pop-left);\n        right: unset;\n    }\n\n    :host([align='right']) & {\n        right: var(--comp-pop-right);\n        left: unset;\n    }\n\n    &.down {\n        top: var-list(--tct-popover-top, --comp-pop-top);\n        bottom: unset;\n    }\n\n    &.up {\n        top: unset;\n        bottom: var(--comp-pop-bottom);\n    }\n\n    &.legacy {\n        position: absolute;\n    }\n\n    @include tiny-scrollbar();\n}\n\nclick-elsewhere {\n    position: relative;\n    display: block;\n}\n","import {\n    Component,\n    Prop,\n    h,\n    ComponentInterface,\n    Element,\n    Watch,\n    Method,\n    Listen,\n    EventEmitter,\n    Event,\n    State,\n} from '@stencil/core';\nimport { handleDeprecationWarning, waitForNextPaint } from '../../utils';\n\n@Component({ tag: 'q2-popover', shadow: true, styleUrl: 'q2-popover.scss' })\nexport class Q2Popover implements ComponentInterface {\n    // #region Own Properties\n\n    containerElement: HTMLDivElement;\n    contentElement: HTMLDivElement;\n    /**\n     * The number of pixels to leave between the popover and the edge of the viewport\n     */\n    displayBuffer = 10;\n    /** remove when Popover API is supported in iOS */\n    orientationChanged: boolean = false;\n    rootElementRect: DOMRect;\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    currentDirection: 'down' | 'up' = undefined;\n\n    // remove `show` when Popover API is supported in iOS\n    @State()\n    show: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Aligns the popover to the left or right side of the control element. */\n    @Prop({ reflect: true })\n    align: 'left' | 'right';\n\n    /** Indicates the popover will match the width of its parent element. */\n    @Prop({ reflect: true })\n    block: boolean;\n\n    /** The element that controls the popover's behavior. */\n    @Prop()\n    controlElement: HTMLElement;\n\n    /**\n     * Force the direction of the popover when it opens.\n     * If no value is passed, the component will auto-detect the direction based on available space.\n     */\n    @Prop({ reflect: true })\n    direction: '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    maxHeight: number;\n\n    /** @deprecated */\n    @Prop()\n    minHeight: number;\n\n    @Prop()\n    mode: 'legacy' = null;\n\n    /** Controls whether the popover is open or closed. */\n    @Prop({ reflect: true, mutable: true })\n    open: boolean;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the popover is opened or closed.\n     */\n    @Event()\n    popoverStateChanged: EventEmitter<{ open: boolean }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.removeViewportListeners();\n    }\n\n    componentDidLoad() {\n        this.handleMinHeight();\n        if (this.open) this.determinePopDirection();\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('popoverState')\n    popoverStateHandler(event: CustomEvent<{ open: boolean }>) {\n        const {\n            detail: { open },\n        } = event;\n        if (open === this.open) return;\n\n        this.open = open;\n        event.stopPropagation();\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    @Method()\n    async scrollContainerTo(options: ScrollToOptions) {\n        this.containerElement.scrollTo(options);\n    }\n\n    @Method()\n    async toggle() {\n        this.open = !this.open;\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('minHeight')\n    minHeightProvided() {\n        this.handleMinHeight();\n    }\n\n    @Watch('open')\n    async openChanged(open: boolean) {\n        this.setRootElement();\n        this.popoverStateChanged.emit({ open });\n\n        if (open) {\n            this.addViewportListeners();\n            this.determinePopDirection();\n        } else {\n            this.removeViewportListeners();\n            this.currentDirection = undefined;\n            this.show = false;\n            await waitForNextPaint();\n            this.clearCSSProperties();\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get isModule() {\n        const isIframe = window !== window.top;\n        const hasPlatformDimensions = Object.keys(window.Tecton?.platformDimensions ?? {}).length > 0;\n        return isIframe && hasPlatformDimensions;\n    }\n\n    get providedDirection(): 'up' | 'down' | undefined {\n        const { direction } = this;\n        switch (direction) {\n            case 'up':\n            case 'down':\n                return direction;\n            default:\n                return undefined;\n        }\n    }\n\n    get validatedMaxHeight(): number | undefined {\n        const { maxHeight } = this;\n        return isNaN(maxHeight) ? undefined : maxHeight;\n    }\n\n    addViewportListeners() {\n        window.addEventListener('resize', this.viewPortOrientationChanged);\n        // #region remove when Popover API is supported in iOS\n        window.addEventListener('scroll', this.viewPortChanged, { passive: true, capture: true });\n        screen?.orientation?.addEventListener('change', this.viewPortOrientationChanged);\n        window.addEventListener('orientationchange', this.viewPortOrientationChanged);\n\n        // #endregion\n    }\n\n    clearCSSProperties() {\n        this.containerElement.style.removeProperty('--comp-pop-max-height');\n        this.containerElement.style.removeProperty('--comp-pop-top');\n        this.containerElement.style.removeProperty('--comp-pop-bottom');\n        this.containerElement.style.removeProperty('--comp-pop-left');\n        this.containerElement.style.removeProperty('--comp-pop-right');\n        this.containerElement.style.removeProperty('--comp-pop-width');\n        this.containerElement.style.removeProperty('--comp-pop-opacity');\n    }\n\n    async determinePopDirection() {\n        const { containerElement, controlElement, providedDirection, displayBuffer } = this;\n        if (containerElement) containerElement.style.maxHeight = null;\n\n        await waitForNextPaint();\n\n        const { isModule } = this;\n        const { top: controlTop, bottom: controlBottom } = controlElement?.getBoundingClientRect?.() ?? {\n            top: 0,\n            bottom: 0,\n        };\n\n        let windowHeight: number;\n        let maxSpaceAbove: number;\n        let maxSpaceBelow: number;\n\n        if (isModule) {\n            const { outletOffset = 0, innerHeight = window.innerHeight } = window.Tecton?.platformDimensions || {};\n            const distanceToIframeBottom = window.visualViewport.height - controlBottom;\n            const viewableSpaceBelow = innerHeight - (outletOffset + controlBottom);\n            const isIframeShorterThanWindow = distanceToIframeBottom < viewableSpaceBelow;\n            windowHeight = innerHeight;\n            // If the top of the module is below the top of the window we just use the controlTop\n            // Otherwise we need to add the outletOffset to the controlTop\n            maxSpaceAbove = (outletOffset > 0 ? controlTop : controlTop + outletOffset) - displayBuffer;\n            maxSpaceBelow = isIframeShorterThanWindow\n                ? distanceToIframeBottom - displayBuffer\n                : viewableSpaceBelow - displayBuffer;\n        } else {\n            windowHeight = window.visualViewport.height;\n            maxSpaceAbove = controlTop - displayBuffer;\n            maxSpaceBelow = windowHeight - controlBottom - displayBuffer;\n        }\n\n        const directionWithMostSpace: 'up' | 'down' = maxSpaceAbove > maxSpaceBelow ? 'up' : 'down';\n\n        // We do not want to update the max height once the popover is open unless the page orientation shifts (resize or mobile use cases)\n        const shouldUpdateMaxHeight =\n            !containerElement.style.getPropertyValue('--comp-pop-max-height') || this.orientationChanged;\n        // we do not want to constantly update the max-height after an orientation change, so we switch this back to false\n        this.orientationChanged = false;\n        const currentOrDetermineDirection = this.currentDirection || providedDirection || directionWithMostSpace;\n\n        switch (currentOrDetermineDirection) {\n            case 'up':\n                if (shouldUpdateMaxHeight) {\n                    const priorityMaxHeight = this.validatedMaxHeight || maxSpaceAbove;\n                    const maxHeight = Math.min(maxSpaceAbove, priorityMaxHeight);\n                    containerElement.style.setProperty('--comp-pop-max-height', `${maxHeight}px`);\n                }\n                this.setDirectionAndShow('up');\n                break;\n            case 'down':\n                if (shouldUpdateMaxHeight) {\n                    const priorityMaxHeight = this.validatedMaxHeight || maxSpaceBelow;\n                    const maxHeight = Math.min(maxSpaceBelow, priorityMaxHeight);\n                    containerElement.style.setProperty('--comp-pop-max-height', `${maxHeight}px`);\n                }\n                this.setDirectionAndShow('down');\n                break;\n            default:\n                break;\n        }\n    }\n\n    handleMinHeight = () => {\n        if (this.minHeight) {\n            handleDeprecationWarning(this, 'minHeight', 'prop');\n        }\n    };\n\n    removeViewportListeners() {\n        window.removeEventListener('resize', this.viewPortOrientationChanged);\n        // #region remove when Popover API is supported in iOS\n        window.removeEventListener('scroll', this.viewPortChanged);\n        screen?.orientation?.removeEventListener('orientationchange', this.viewPortOrientationChanged);\n        window.removeEventListener('orientationchange', this.viewPortOrientationChanged);\n\n        // #endregion\n    }\n\n    setAbsoluteCSSProperties = async () => {\n        const { controlElement, containerElement, currentDirection, align } = this;\n\n        if (align === 'right') {\n            containerElement.style.setProperty('--comp-pop-right', '0');\n            containerElement.style.setProperty('--comp-pop-left', 'unset');\n        } else {\n            containerElement.style.setProperty('--comp-pop-left', '0');\n            containerElement.style.setProperty('--comp-pop-right', 'unset');\n        }\n\n        if (this.block) {\n            containerElement.style.setProperty('--comp-pop-width', '100%');\n        }\n\n        if (currentDirection === 'up') {\n            const controlStyle = getComputedStyle(controlElement);\n            const controlSize =\n                parseInt(controlStyle.height || '0') +\n                parseInt(controlStyle.borderTopWidth || '0') +\n                parseInt(controlStyle.borderBottomWidth || '0');\n\n            containerElement.style.setProperty('--comp-pop-bottom', `${controlSize}px`);\n        }\n\n        // Wait for one paint to prevent layout thrashing\n        await waitForNextPaint();\n        containerElement.style.setProperty('--comp-pop-opacity', '1');\n    };\n\n    setDirectionAndShow(direction: 'up' | 'down') {\n        this.setRootElement();\n        // Due to some runtime inconsistency across devices/browsers we need to add one more check here because the\n        // popover can be closed between the time the popover is opened and the time the direction is determined\n        const isOpen = this.open;\n        if (!isOpen) return;\n\n        this.currentDirection = direction;\n        this.show = true;\n        if (this.mode === 'legacy') {\n            this.setAbsoluteCSSProperties();\n        } else {\n            this.setFixedCSSProperties();\n        }\n    }\n\n    setFixedCSSProperties = async () => {\n        const { controlElement, containerElement, currentDirection, rootElementRect } = this;\n        const {\n            top: controlTop,\n            bottom: controlBottom,\n            left: controlLeft,\n            right: controlRight,\n        } = controlElement?.getBoundingClientRect?.() ?? {\n            top: 0,\n            bottom: 0,\n            left: 0,\n            right: 0,\n        };\n        const popoverLeft: number = controlLeft - rootElementRect.left;\n\n        if (this.block) containerElement.style.setProperty('--comp-pop-width', `${controlElement?.offsetWidth || 0}px`);\n        containerElement.style.setProperty('--comp-pop-left', `${popoverLeft}px`);\n        containerElement.style.setProperty(\n            '--comp-pop-right',\n            `${rootElementRect.width + rootElementRect.left - controlRight}px`\n        );\n\n        if (currentDirection === 'up') {\n            containerElement.style.setProperty(\n                '--comp-pop-bottom',\n                `${rootElementRect.height + rootElementRect.top - controlTop}px`\n            );\n        }\n        if (currentDirection === 'down') {\n            containerElement.style.setProperty('--comp-pop-top', `${controlBottom - rootElementRect.top}px`);\n        }\n\n        // Wait for one paint to prevent layout thrashing\n        await waitForNextPaint();\n        containerElement.style.setProperty('--comp-pop-opacity', '1');\n    };\n\n    setRootElement() {\n        let currentElement: HTMLElement = this.hostElement;\n\n        while (currentElement && currentElement !== document.documentElement) {\n            const computedStyle = window.getComputedStyle(currentElement);\n\n            // Check if the element has any styles applied that create a new containg block\n            if (\n                computedStyle.transform !== 'none' ||\n                computedStyle.filter !== 'none' ||\n                computedStyle.perspective !== 'none' ||\n                computedStyle.containerType !== 'normal' ||\n                ['transform', 'perspective', 'filter'].includes(computedStyle.willChange) ||\n                ['layout', 'paint', 'strict', 'content'].includes(computedStyle.contain)\n            ) {\n                this.rootElementRect = currentElement.getBoundingClientRect();\n                return;\n            }\n\n            const rootNode = currentElement.getRootNode();\n            const isRootNodeWebComponent =\n                typeof ShadowRoot !== 'undefined' &&\n                rootNode instanceof ShadowRoot &&\n                rootNode.host instanceof HTMLElement;\n            if (isRootNodeWebComponent) {\n                currentElement = rootNode.host;\n            } else {\n                currentElement = currentElement.parentElement;\n            }\n        }\n\n        // Return the document's bounding rect if no element is found\n        this.rootElementRect = {\n            top: 0,\n            bottom: 0,\n            left: 0,\n            right: 0,\n            height: window.visualViewport.height,\n            width: window.visualViewport.width,\n        } as DOMRect;\n    }\n\n    viewPortChanged = () => {\n        if (!this.open) return;\n        this.determinePopDirection();\n    };\n\n    viewPortOrientationChanged = () => {\n        this.orientationChanged = true;\n        this.viewPortChanged();\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const containerClasses = ['container', this.currentDirection];\n        if (this.show) containerClasses.push('show');\n        if (this.mode === 'legacy') containerClasses.push('legacy');\n\n        return (\n            <div\n                ref={el => (this.containerElement = el)}\n                class={containerClasses.join(' ')}\n                test-id=\"outerContainer\"\n                tabIndex={-1}\n            >\n                <div\n                    ref={el => (this.contentElement = el)}\n                    class=\"content\"\n                >\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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"}
+{"version":3,"names":["sanitizeRegexString","regexString","replace","q2OptionListCss","Q2OptionListStyle0","Q2OptionList","this","keyStore","queue","lastPressedAt","Date","scheduledAfterRender","clickHandler","event","target","option","closest","selectOption","multiple","popoverState","emit","open","action","externalKeydownHandler","stopPropagation","activeIndex","customSearch","allOptions","key","nextIndex","searchString","searchOptions","type","openDropdownWithActiveElement","setDefaultActiveElement","nextPaint","preventDefault","selectedOptions","length","getDefaultActiveIndex","getNextVisibleIndex","Math","max","min","noSelect","setActiveElement","match","focusoutHandler","relatedTarget","isInQ2OptionList","includes","isInLightDom","hostElement","contains","internalKeydownHandler","allVisibleOptions","shiftKey","newOption","find","element","active","disabled","addEventListener","once","firstVisibleOption","isFirstVisibleOptionActive","undefined","adjustActiveOptionAndScroll","lastVisibleOption","isLastVisibleOptionActive","searchAndFocus","keyValue","shouldSelect","reorder","pivotIndex","list","map","index","slice","buildQueue","now","getTime","push","searchIndex","keyStr","join","sanitizedKeyStr","v","display","RegExp","setFocus","matched","loc","componentWillLoad","hasOptions","querySelectorAll","componentDidLoad","overrideFocus","checkOptions","selectedOptionsUpdated","ready","componentDidRender","forEach","fn","handleClick","delegateFocus","isEventFromElement","setActiveOption","setFocusedOption","getContents","allContents","getOptions","handleExternalKeydown","updateMultipleOptionAttrs","updateSingleOptionAttrs","showSelectedUpdated","showSelected","_multiSelectHidden","selected","rootSlot","getRootSlot","acceptedTags","Set","filter","has","tagName","contents","extractOptions","elements","reduce","acc","separator","Array","from","children","hidden","disabledGroup","numToAdd","scrollToActiveOption","optionRole","role","focusSelectedSibling","hasNoSiblings","selectedOptionVisibleIndex","indexOf","nextVisibleSiblingIndex","nextVisibleSibling","nextSiblingIndex","firstSelected","findIndex","firstEnabled","direction","activeOption","visibleActiveOptionIndex","nextVisibleOptionIndex","nextVisibleOption","slot","querySelector","assignedElements","_a","hasAnotherSlot","waitForNextPaint","resetTimer","searchStringTimer","clearTimeout","window","setTimeout","scrollIntoView","block","selectedOption","selectedValue","value","displayValue","innerText","trim","valueObject","values","isAlreadySelected","change","elementIndex","isOptionVisible","isVisible","focus","selectedValues","render","h","Host","class","ref","el","contentElement","onFocusout","label","onKeyDown","onClick","q2PopoverCss","Q2PopoverStyle0","Q2Popover","displayBuffer","orientationChanged","handleMinHeight","minHeight","handleDeprecationWarning","setAbsoluteCSSProperties","async","controlElement","containerElement","currentDirection","align","style","setProperty","controlStyle","getComputedStyle","controlSize","parseInt","height","borderTopWidth","borderBottomWidth","setFixedCSSProperties","rootElementRect","top","controlTop","bottom","controlBottom","left","controlLeft","right","controlRight","_b","getBoundingClientRect","call","popoverLeft","offsetWidth","width","viewPortChanged","determinePopDirection","viewPortOrientationChanged","disconnectedCallback","removeViewportListeners","popoverStateHandler","detail","scrollContainerTo","options","scrollTo","toggle","minHeightProvided","openChanged","setRootElement","popoverStateChanged","addViewportListeners","show","clearCSSProperties","isModule","isIframe","hasPlatformDimensions","Object","keys","Tecton","platformDimensions","providedDirection","validatedMaxHeight","maxHeight","isNaN","passive","capture","screen","orientation","removeProperty","windowHeight","maxSpaceAbove","maxSpaceBelow","outletOffset","innerHeight","_c","distanceToIframeBottom","visualViewport","viewableSpaceBelow","isIframeShorterThanWindow","directionWithMostSpace","shouldUpdateMaxHeight","getPropertyValue","currentOrDetermineDirection","priorityMaxHeight","setDirectionAndShow","removeEventListener","isOpen","mode","currentElement","document","documentElement","computedStyle","transform","perspective","containerType","willChange","contain","rootNode","getRootNode","isRootNodeWebComponent","ShadowRoot","host","HTMLElement","parentElement","containerClasses","tabIndex"],"sources":["src/utils/sanitize-regex-string.ts","src/components/q2-option-list/q2-option-list.scss?tag=q2-option-list&encapsulation=shadow","src/components/q2-option-list/q2-option-list.tsx","src/components/q2-popover/q2-popover.scss?tag=q2-popover&encapsulation=shadow","src/components/q2-popover/q2-popover.tsx"],"sourcesContent":["export default function sanitizeRegexString(regexString: string) {\n    return regexString.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');\n}\n","@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    position: relative;\n    width: 100%;\n    display: block;\n    line-height: var-list(var-prefixer(option-list-line-height),--app-line-height, 1.428571429em);\n}\n\n.content {\n    text-align: start;\n\n    :host([is-sizeable]) & {\n        display: block;\n        height: auto;\n    }\n}\n","import sanitizeRegexString from '@/utils/sanitize-regex-string';\nimport {\n    Component,\n    Prop,\n    h,\n    Event,\n    State,\n    Element,\n    ComponentInterface,\n    Host,\n    EventEmitter,\n    Method,\n    Watch,\n    Listen,\n} from '@stencil/core';\nimport { isEventFromElement, isVisible, loc, nextPaint, overrideFocus, waitForNextPaint } from 'src/utils';\n\nexport interface IOptionValue {\n    value: string;\n    display?: string;\n}\n\nexport type ValidOptionElements = HTMLQ2OptionElement | HTMLQ2DropdownItemElement;\n\n@Component({ tag: 'q2-option-list', shadow: true, styleUrl: 'q2-option-list.scss' })\nexport class Q2OptionList implements ComponentInterface {\n    // #region Own Properties\n\n    activeIndex: number;\n    contentElement: HTMLElement;\n    keyStore: {\n        queue: string[];\n        lastPressedAt: Date;\n    } = {\n        queue: [],\n        lastPressedAt: new Date(),\n    };\n    pivotIndex: number;\n    scheduledAfterRender: (() => void)[] = [];\n    searchString: string;\n    searchStringTimer: number;\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    hasOptions: boolean;\n\n    // #endregion\n    // #region Public Property API\n\n    @Prop({ reflect: true })\n    align: 'left' | 'right';\n\n    /** Indicates a custom search is being implemented for the option list. */\n    @Prop({ reflect: true })\n    customSearch: boolean;\n\n    /** Disables the option list. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /** Determines the label that is applied to the option list for accessibility purposes. */\n    @Prop()\n    label: string = loc('tecton.element.optionList.label');\n\n    /**\n     * Enables the multi-select ability for the option list.\n     * @info\n     * Only applicable when options are provided.\n     */\n    @Prop({ reflect: true })\n    multiple: boolean;\n\n    /** Disables the logic that handles selecting and focusing an option in the option list. */\n    @Prop({ reflect: true })\n    noSelect: boolean;\n\n    /** A list of the selected options on the element. */\n    @Prop({ mutable: true })\n    selectedOptions: IOptionValue[] = [];\n\n    /** Applies focus to the selected option. */\n    @Prop({ reflect: true, mutable: true })\n    showSelected: boolean;\n\n    /** Translates to the role of the option list */\n    @Prop()\n    type: 'menu' | 'listbox' = 'listbox';\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    @Event()\n    change: EventEmitter<{ value: string; values: IOptionValue[] }>;\n\n    /**\n     * Emitted to indicate the intended state of the popover.\n     * @private\n     */\n    @Event()\n    popoverState: EventEmitter<{ open: boolean; action: 'close' | 'select' | 'open' }>;\n\n    /**\n     * Emitted when the component has finished rendering.\n     * @private\n     */\n    @Event({ bubbles: false })\n    ready: EventEmitter<undefined>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        this.hasOptions = !!this.hostElement.querySelectorAll(\n            'q2-option:not([separator]):not([separator=true]), q2-dropdown-item:not([separator]):not([separator=true])'\n        ).length;\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n        this.checkOptions();\n        this.selectedOptionsUpdated();\n        this.ready.emit();\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('click')\n    handleClick(event: MouseEvent) {\n        event.stopPropagation();\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.popoverState.emit({ open: true, action: 'open' });\n        const { activeIndex } = this;\n        if (typeof activeIndex === 'number' && activeIndex > -1) {\n            this.setActiveOption();\n            this.setFocusedOption();\n        } else {\n            this.setDefaultActiveElement();\n        }\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    @Method()\n    async getContents(): Promise<(HTMLQ2OptgroupElement | ValidOptionElements)[]> {\n        return this.allContents;\n    }\n\n    @Method()\n    async getOptions(): Promise<ValidOptionElements[]> {\n        return this.allOptions;\n    }\n\n    @Method()\n    async handleExternalKeydown(event: KeyboardEvent) {\n        this.externalKeydownHandler(event);\n    }\n\n    @Method()\n    async setActiveElement(index: number) {\n        this.activeIndex = index;\n        this.setActiveOption();\n        this.setFocusedOption();\n    }\n\n    @Method()\n    async setDefaultActiveElement() {\n        this.activeIndex = this.getDefaultActiveIndex();\n        this.setActiveOption();\n        this.setFocusedOption();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('selectedOptions')\n    selectedOptionsUpdated() {\n        if (this.multiple) {\n            this.updateMultipleOptionAttrs();\n        } else {\n            this.updateSingleOptionAttrs();\n        }\n    }\n\n    @Watch('showSelected')\n    showSelectedUpdated(showSelected: boolean) {\n        if (showSelected && this.selectedOptions.length === 0) {\n            this.showSelected = false;\n            return;\n        }\n        this.allOptions.forEach(option => {\n            if (!('_multiSelectHidden' in option)) return;\n            option._multiSelectHidden = showSelected ? !option.selected : false;\n        });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get allContents(): (HTMLQ2OptgroupElement | ValidOptionElements)[] {\n        const rootSlot = this.getRootSlot(this.hostElement);\n        const acceptedTags = new Set(['Q2-OPTGROUP', 'Q2-OPTION', 'Q2-DROPDOWN-ITEM']);\n        return rootSlot.filter(element => acceptedTags.has(element.tagName)) as (\n            | HTMLQ2OptgroupElement\n            | ValidOptionElements\n        )[];\n    }\n\n    get allOptions(): ValidOptionElements[] {\n        const contents = this.allContents;\n\n        const extractOptions = (\n            elements: (HTMLQ2OptgroupElement | ValidOptionElements | Element)[]\n        ): ValidOptionElements[] => {\n            return elements.reduce((acc, element) => {\n                if (element.tagName === 'Q2-OPTION' || element.tagName === 'Q2-DROPDOWN-ITEM') {\n                    return (element as ValidOptionElements).separator ? acc : [...acc, element];\n                } else if (element.tagName === 'Q2-OPTGROUP') {\n                    return [...acc, ...extractOptions(Array.from(element.children))];\n                } else {\n                    return acc;\n                }\n            }, []);\n        };\n\n        return extractOptions(contents);\n    }\n\n    get allVisibleOptions(): ValidOptionElements[] {\n        return this.allOptions.filter(\n            option =>\n                !option.hidden &&\n                (!('_multiSelectHidden' in option) || !option._multiSelectHidden) &&\n                !option.disabled &&\n                (!('disabledGroup' in option) || !option.disabledGroup)\n        );\n    }\n\n    adjustActiveOptionAndScroll(numToAdd: number) {\n        this.activeIndex += numToAdd;\n        this.setActiveOption();\n        this.setFocusedOption();\n        this.scrollToActiveOption();\n    }\n\n    checkOptions() {\n        const { type } = this;\n        if (!type) return;\n        const optionRole = type === 'menu' ? 'menuitem' : 'option';\n        this.allOptions.forEach(option => {\n            option.role = optionRole;\n        });\n    }\n\n    clickHandler = (event: Event) => {\n        const target = event.target as ValidOptionElements;\n        const option = target.closest<ValidOptionElements>(\n            'q2-option:not([separator]):not([separator=true]), q2-dropdown-item:not([separator]):not([separator=true])'\n        );\n        this.selectOption(option);\n        if (this.multiple) return;\n        this.popoverState.emit({ open: false, action: 'select' });\n    };\n\n    /* tslint:disable:cyclomatic-complexity */\n    externalKeydownHandler = (event: KeyboardEvent) => {\n        event.stopPropagation();\n        const { activeIndex, customSearch, allOptions } = this;\n        const { key } = event;\n\n        let nextIndex;\n        switch (key) {\n            case ' ':\n                if (this.searchString) {\n                    if (customSearch) break;\n\n                    this.searchOptions(key, true);\n                    break;\n                } else if (this.type === 'menu') {\n                    this.activeIndex = 0;\n                    this.openDropdownWithActiveElement(0);\n                } else {\n                    this.setDefaultActiveElement();\n                    nextPaint(() => this.popoverState.emit({ open: true, action: 'open' }));\n                }\n                break;\n\n            case 'Enter':\n                if (this.type === 'menu') {\n                    this.activeIndex = 0;\n                    this.openDropdownWithActiveElement(0);\n                } else {\n                    this.setDefaultActiveElement();\n                    nextPaint(() => this.popoverState.emit({ open: true, action: 'open' }));\n                }\n                break;\n\n            case 'ArrowUp':\n                event.preventDefault();\n                nextIndex = !!this.selectedOptions.length ? this.getDefaultActiveIndex() : this.getNextVisibleIndex(-1);\n                if (nextIndex === -1) break;\n                this.openDropdownWithActiveElement(nextIndex);\n                break;\n\n            case 'ArrowDown':\n                event.preventDefault();\n                nextIndex = !!this.selectedOptions.length ? this.getDefaultActiveIndex() : this.getNextVisibleIndex(1);\n                if (nextIndex === -1) break;\n                this.openDropdownWithActiveElement(nextIndex);\n                break;\n\n            case 'Home':\n                event.preventDefault();\n                this.openDropdownWithActiveElement(0);\n                break;\n\n            case 'End':\n                event.preventDefault();\n                this.openDropdownWithActiveElement(allOptions.length - 1);\n                break;\n\n            case 'PageUp':\n                event.preventDefault();\n                this.openDropdownWithActiveElement(Math.max((activeIndex || 0) - 10, 0));\n                break;\n\n            case 'PageDown':\n                event.preventDefault();\n                this.openDropdownWithActiveElement(Math.min((activeIndex || 0) + 10, allOptions.length - 1));\n                break;\n\n            case 'Tab':\n                this.popoverState.emit({ open: false, action: 'close' });\n                break;\n\n            case 'Esc':\n            case 'Escape':\n                if (this.noSelect) this.setActiveElement(null);\n                this.popoverState.emit({ open: false, action: 'close' });\n                break;\n\n            default:\n                if (customSearch) break;\n                if (!key.match(/^[\\w]$/)) break;\n\n                this.searchOptions(key, true);\n                break;\n        }\n    };\n\n    /* tslint:enable:cyclomatic-complexity */\n\n    focusoutHandler = (event: FocusEvent) => {\n        const { relatedTarget } = event as unknown as { relatedTarget: ValidOptionElements };\n        const isInQ2OptionList = this.allOptions.includes(relatedTarget);\n        const isInLightDom = !isInQ2OptionList && this.hostElement.contains(relatedTarget);\n        if (isInQ2OptionList || isInLightDom) {\n            event.stopPropagation();\n        }\n    };\n\n    focusSelectedSibling(option: ValidOptionElements) {\n        const { allVisibleOptions, allOptions } = this;\n        const hasNoSiblings = allVisibleOptions.length < 2;\n        if (hasNoSiblings) {\n            this.showSelected = false;\n            return;\n        }\n\n        const selectedOptionVisibleIndex = allVisibleOptions.indexOf(option);\n        const nextVisibleSiblingIndex = selectedOptionVisibleIndex\n            ? selectedOptionVisibleIndex - 1\n            : selectedOptionVisibleIndex + 1;\n        const nextVisibleSibling = allVisibleOptions[nextVisibleSiblingIndex];\n        const nextSiblingIndex = allOptions.indexOf(nextVisibleSibling);\n\n        this.activeIndex = nextSiblingIndex;\n        this.setFocusedOption();\n        this.scheduledAfterRender.push(() => {\n            if (!('_multiSelectHidden' in option)) return;\n            option._multiSelectHidden = !option.selected;\n        });\n    }\n\n    getDefaultActiveIndex() {\n        const { allOptions } = this;\n        const firstSelected = allOptions.findIndex(element => {\n            return 'selected' in element && element.selected;\n        });\n        if (firstSelected > -1) return firstSelected;\n\n        const firstEnabled = allOptions.findIndex(element => !element.hidden);\n        if (firstEnabled > -1) return firstEnabled;\n\n        return 0;\n    }\n\n    getNextVisibleIndex(direction) {\n        const { allVisibleOptions, allOptions, activeIndex } = this;\n        const activeOption = allOptions[activeIndex];\n        const visibleActiveOptionIndex = allVisibleOptions.indexOf(activeOption);\n        let nextVisibleOptionIndex = visibleActiveOptionIndex + direction;\n\n        if (nextVisibleOptionIndex < 0) {\n            nextVisibleOptionIndex = allVisibleOptions.length - 1;\n        } else if (nextVisibleOptionIndex > allVisibleOptions.length - 1) {\n            nextVisibleOptionIndex = 0;\n        }\n\n        const nextVisibleOption = allVisibleOptions[nextVisibleOptionIndex];\n        return allOptions.indexOf(nextVisibleOption);\n    }\n\n    getRootSlot(element: Element): Element[] {\n        const slot = element.querySelector('slot');\n        const assignedElements = slot?.assignedElements() ?? Array.from(element.children);\n        const hasAnotherSlot = !!assignedElements.length && assignedElements[0].tagName === 'SLOT';\n        if (hasAnotherSlot) {\n            return this.getRootSlot(assignedElements[0]);\n        } else {\n            return assignedElements;\n        }\n    }\n\n    internalKeydownHandler = (event: KeyboardEvent) => {\n        event.stopPropagation();\n        const { activeIndex, customSearch, allOptions, allVisibleOptions, multiple } = this;\n        const { key, shiftKey } = event;\n\n        let newOption: ValidOptionElements;\n        switch (key) {\n            case ' ':\n                if (this.searchString && !this.multiple) {\n                    if (customSearch) break;\n\n                    this.searchOptions(key, false);\n                    break;\n                }\n\n                newOption = allOptions.find(element => element.active);\n                if (!newOption || newOption.disabled) break;\n                this.selectOption(newOption);\n                if (multiple) break;\n                this.hostElement.addEventListener(\n                    'tctClick',\n                    () => {\n                        this.popoverState.emit({ open: false, action: 'select' });\n                    },\n                    { once: true }\n                );\n\n                break;\n\n            case 'Enter':\n                newOption = allOptions.find(element => element.active);\n                if (!newOption || newOption.disabled) break;\n                this.selectOption(newOption);\n                if (multiple) break;\n                this.hostElement.addEventListener(\n                    'tctClick',\n                    () => {\n                        this.popoverState.emit({ open: false, action: 'select' });\n                    },\n                    { once: true }\n                );\n                break;\n\n            case 'ArrowUp':\n                event.preventDefault();\n                const firstVisibleOption = allVisibleOptions[0];\n                const isFirstVisibleOptionActive = firstVisibleOption.active;\n                if (isFirstVisibleOptionActive) break;\n                if (activeIndex === undefined) {\n                    this.setDefaultActiveElement();\n                    break;\n                } else {\n                    const nextIndex = this.getNextVisibleIndex(-1);\n                    if (nextIndex === -1) break;\n                    this.adjustActiveOptionAndScroll(nextIndex - activeIndex);\n                    break;\n                }\n\n            case 'ArrowDown':\n                event.preventDefault();\n                const lastVisibleOption = allVisibleOptions[allVisibleOptions.length - 1];\n                const isLastVisibleOptionActive = lastVisibleOption.active;\n                if (isLastVisibleOptionActive) break;\n                if (activeIndex === undefined) {\n                    this.setDefaultActiveElement();\n                    break;\n                } else {\n                    const nextIndex = this.getNextVisibleIndex(1);\n                    if (nextIndex === -1) break;\n                    this.adjustActiveOptionAndScroll(nextIndex - activeIndex);\n                    break;\n                }\n\n            case 'Home':\n                event.preventDefault();\n                this.openDropdownWithActiveElement(0);\n                break;\n\n            case 'End':\n                event.preventDefault();\n                this.openDropdownWithActiveElement(allOptions.length - 1);\n                break;\n\n            case 'PageUp':\n                event.preventDefault();\n                this.openDropdownWithActiveElement(Math.max(activeIndex - 10, 0));\n                break;\n\n            case 'PageDown':\n                event.preventDefault();\n                this.openDropdownWithActiveElement(Math.min(activeIndex + 10, allOptions.length - 1));\n                break;\n\n            case 'Tab':\n                if (shiftKey) break;\n                if (this.multiple && this.type === 'listbox') break;\n                if (this.type === 'menu') {\n                    this.popoverState.emit({ open: false, action: 'close' });\n                    break;\n                }\n\n                newOption = allOptions.find(element => element.active);\n                if (!newOption || newOption.disabled) return;\n                this.selectOption(newOption);\n                break;\n\n            case 'Esc':\n            case 'Escape':\n                if (this.noSelect) this.setActiveElement(null);\n                this.popoverState.emit({ open: false, action: 'close' });\n                break;\n\n            default:\n                if (customSearch) break;\n                if (!key.match(/^[\\w]$/)) break;\n\n                this.searchOptions(key, false);\n                break;\n        }\n    };\n\n    async openDropdownWithActiveElement(activeIndex: number) {\n        if (this.disabled) return;\n        this.popoverState.emit({ open: true, action: 'open' });\n        await waitForNextPaint();\n        this.activeIndex = activeIndex;\n        this.setActiveOption();\n        this.setFocusedOption();\n        this.scrollToActiveOption();\n    }\n\n    resetTimer() {\n        if (this.searchStringTimer) {\n            clearTimeout(this.searchStringTimer);\n        }\n\n        this.searchStringTimer = window.setTimeout(() => {\n            this.searchString = null;\n        }, 2000);\n    }\n\n    scrollToActiveOption() {\n        const activeOption = this.allOptions[this.activeIndex];\n        activeOption?.scrollIntoView({ block: 'center' });\n    }\n\n    searchAndFocus = (keyValue: string, shouldSelect: boolean) => {\n        // pseudo search in non-searchable select\n        const reorder = () => {\n            this.pivotIndex = this.pivotIndex === undefined ? 0 : (this.activeIndex || 0) + 1;\n            const list = this.allOptions.map((element, index) => ({ element, index }));\n            return [...list.slice(this.pivotIndex), ...list.slice(0, this.pivotIndex)];\n        };\n\n        const buildQueue = () => {\n            const now = new Date();\n            if (now.getTime() - this.keyStore.lastPressedAt.getTime() > 1000) {\n                // empty stored keys if delay > 1s\n                this.keyStore.queue.length = 0;\n            }\n            if (this.keyStore.queue.length !== 1 || this.keyStore.queue[0] !== keyValue) {\n                this.keyStore.queue.push(keyValue);\n            }\n            this.keyStore.lastPressedAt = now;\n        };\n\n        const searchIndex = (list: any[]) => {\n            const keyStr = this.keyStore.queue.join('');\n            const sanitizedKeyStr = sanitizeRegexString(keyStr);\n            return list.find(v => {\n                return (\n                    !v.element.disabled &&\n                    v.element.display &&\n                    (v.element.display.match(new RegExp(`^${sanitizedKeyStr}`, 'i')) ||\n                        v.element.display.replace(/\\s/g, '').match(new RegExp(`^${sanitizedKeyStr}`, 'i')))\n                );\n            });\n        };\n\n        const setFocus = ({ index }) => {\n            if (this.multiple) {\n                // multiple: should open to make sure that which options are selected\n                this.openDropdownWithActiveElement(index);\n            } else {\n                this.activeIndex = index;\n                if (shouldSelect) {\n                    this.selectOption(this.allOptions[index]);\n                    this.popoverState.emit({ open: false, action: 'select' });\n                } else this.setActiveElement(index);\n            }\n        };\n\n        buildQueue();\n        const matched = searchIndex(reorder());\n        if (matched) {\n            setFocus(matched);\n        }\n    };\n\n    searchOptions(key: string, shouldSelect?: boolean) {\n        this.searchString = key;\n        this.searchAndFocus(key, shouldSelect);\n    }\n\n    selectOption(selectedOption: ValidOptionElements) {\n        const { multiple, noSelect, showSelected } = this;\n        if (\n            !selectedOption ||\n            selectedOption.disabled ||\n            ('disabledGroup' in selectedOption && selectedOption.disabledGroup)\n        )\n            return;\n        const selectedValue = selectedOption.value;\n        const displayValue =\n            'display' in selectedOption && selectedOption.display\n                ? selectedOption.display\n                : selectedOption.innerText.trim();\n        const valueObject = {\n            value: selectedValue,\n            display: displayValue,\n        };\n\n        let values: IOptionValue[] = [];\n        if (multiple) {\n            const { selectedOptions } = this;\n            const isAlreadySelected = selectedOptions.find(option => option.value === selectedValue);\n\n            if (isAlreadySelected) {\n                values = selectedOptions.filter(({ value }) => value !== selectedValue);\n            } else {\n                values = [...selectedOptions, valueObject];\n            }\n\n            if (showSelected) this.focusSelectedSibling(selectedOption);\n        } else {\n            values = [valueObject];\n        }\n\n        if (noSelect) this.setActiveElement(null);\n        else this.selectedOptions = values;\n\n        this.change.emit({ value: selectedValue, values });\n    }\n\n    setActiveOption() {\n        const activeIndex = this.activeIndex;\n\n        this.allOptions.forEach((element, elementIndex) => {\n            element.active = activeIndex === elementIndex;\n        });\n    }\n\n    setFocusedOption() {\n        const option = this.allOptions[this.activeIndex];\n        if (!option) return;\n\n        const isOptionVisible = isVisible(option);\n        if (isOptionVisible) option.focus();\n        else nextPaint(() => option.focus());\n    }\n\n    updateMultipleOptionAttrs() {\n        const { allOptions, selectedOptions } = this;\n        const selectedValues = selectedOptions.map(({ value }) => value);\n        if (this.noSelect) return;\n        allOptions.forEach(element => {\n            if (!('selected' in element)) return;\n            element.selected = selectedValues.includes(element.value);\n        });\n    }\n\n    updateSingleOptionAttrs() {\n        const { allOptions, selectedOptions } = this;\n        const selectedValue = selectedOptions[0]?.value || undefined;\n        if (this.noSelect) return;\n        allOptions.forEach(element => {\n            if (!('selected' in element)) return;\n            element.selected = element.value === selectedValue;\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <Host>\n                <div\n                    class=\"content\"\n                    ref={el => (this.contentElement = el)}\n                    onFocusout={this.focusoutHandler}\n                >\n                    <div\n                        class=\"options\"\n                        aria-label={loc('tecton.element.optionList.label', [this.label])}\n                        aria-multiselectable={`${!!this.multiple}`}\n                        role={this.type || 'listbox'}\n                        onKeyDown={this.internalKeydownHandler}\n                        onClick={this.clickHandler}\n                    >\n                        <slot />\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n\n    // #endregion\n}\n","@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.container {\n    display: none;\n}\n\n.show {\n    display: block;\n    position: fixed;\n    z-index: var-list(--tct-popover-z-index, 50);\n    margin: 0;\n    padding: 0;\n    overflow: auto;\n    background: var-list(--tct-popover-background, --app-white, #ffffff);\n    color: var-list(--tct-popover-font-color, --t-text, #4d4d4d);\n    min-width: var-list(--tct-popover-min-width, 135px);\n    margin-block: var-list(--tct-popover-margin-block, 0);\n    box-shadow: var-list(--tct-popover-box-shadow, --app-shadow-1, unquote(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)\"));\n    border-width: var-list(--tct-popover-border-width, 0);\n    border-style: solid;\n    border-color: var-list(--tct-popover-border-color, transparent);\n    border-radius: var-list(--tct-popover-border-radius, 0);\n    // the following --comp variables are set via JS\n    max-height: var(--comp-pop-max-height);\n    left: var(--comp-pop-left);\n    opacity: var(--comp-pop-opacity, 0);\n\n    :host([block]) & {\n        right: unset;\n        width: var(--comp-pop-width);\n        min-width: var-list(--tct-popover-min-width, unset);\n    }\n\n    :host([align='left']) & {\n        left: var(--comp-pop-left);\n        right: unset;\n    }\n\n    :host([align='right']) & {\n        right: var(--comp-pop-right);\n        left: unset;\n    }\n\n    &.down {\n        top: var-list(--tct-popover-top, --comp-pop-top);\n        bottom: unset;\n    }\n\n    &.up {\n        top: unset;\n        bottom: var(--comp-pop-bottom);\n    }\n\n    &.legacy {\n        position: absolute;\n    }\n\n    @include tiny-scrollbar();\n}\n\nclick-elsewhere {\n    position: relative;\n    display: block;\n}\n","import {\n    Component,\n    Prop,\n    h,\n    ComponentInterface,\n    Element,\n    Watch,\n    Method,\n    Listen,\n    EventEmitter,\n    Event,\n    State,\n} from '@stencil/core';\nimport { handleDeprecationWarning, waitForNextPaint } from '../../utils';\n\n@Component({ tag: 'q2-popover', shadow: true, styleUrl: 'q2-popover.scss' })\nexport class Q2Popover implements ComponentInterface {\n    // #region Own Properties\n\n    containerElement: HTMLDivElement;\n    contentElement: HTMLDivElement;\n    /**\n     * The number of pixels to leave between the popover and the edge of the viewport\n     */\n    displayBuffer = 10;\n    /** remove when Popover API is supported in iOS */\n    orientationChanged: boolean = false;\n    rootElementRect: DOMRect;\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    currentDirection: 'down' | 'up' = undefined;\n\n    // remove `show` when Popover API is supported in iOS\n    @State()\n    show: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Aligns the popover to the left or right side of the control element. */\n    @Prop({ reflect: true })\n    align: 'left' | 'right';\n\n    /** Indicates the popover will match the width of its parent element. */\n    @Prop({ reflect: true })\n    block: boolean;\n\n    /** The element that controls the popover's behavior. */\n    @Prop()\n    controlElement: HTMLElement;\n\n    /**\n     * Force the direction of the popover when it opens.\n     * If no value is passed, the component will auto-detect the direction based on available space.\n     */\n    @Prop({ reflect: true })\n    direction: '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    maxHeight: number;\n\n    /** @deprecated */\n    @Prop()\n    minHeight: number;\n\n    @Prop()\n    mode: 'legacy' = null;\n\n    /** Controls whether the popover is open or closed. */\n    @Prop({ reflect: true, mutable: true })\n    open: boolean;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the popover is opened or closed.\n     */\n    @Event()\n    popoverStateChanged: EventEmitter<{ open: boolean }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.removeViewportListeners();\n    }\n\n    componentDidLoad() {\n        this.handleMinHeight();\n        if (this.open) this.determinePopDirection();\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('popoverState')\n    popoverStateHandler(event: CustomEvent<{ open: boolean }>) {\n        const {\n            detail: { open },\n        } = event;\n        if (open === this.open) return;\n\n        this.open = open;\n        event.stopPropagation();\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    @Method()\n    async scrollContainerTo(options: ScrollToOptions) {\n        this.containerElement.scrollTo(options);\n    }\n\n    @Method()\n    async toggle() {\n        this.open = !this.open;\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('minHeight')\n    minHeightProvided() {\n        this.handleMinHeight();\n    }\n\n    @Watch('open')\n    async openChanged(open: boolean) {\n        this.setRootElement();\n        this.popoverStateChanged.emit({ open });\n\n        if (open) {\n            this.addViewportListeners();\n            this.determinePopDirection();\n        } else {\n            this.removeViewportListeners();\n            this.currentDirection = undefined;\n            this.show = false;\n            await waitForNextPaint();\n            this.clearCSSProperties();\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get isModule() {\n        const isIframe = window !== window.top;\n        const hasPlatformDimensions = Object.keys(window.Tecton?.platformDimensions ?? {}).length > 0;\n        return isIframe && hasPlatformDimensions;\n    }\n\n    get providedDirection(): 'up' | 'down' | undefined {\n        const { direction } = this;\n        switch (direction) {\n            case 'up':\n            case 'down':\n                return direction;\n            default:\n                return undefined;\n        }\n    }\n\n    get validatedMaxHeight(): number | undefined {\n        const { maxHeight } = this;\n        return isNaN(maxHeight) ? undefined : maxHeight;\n    }\n\n    addViewportListeners() {\n        window.addEventListener('resize', this.viewPortOrientationChanged);\n        // #region remove when Popover API is supported in iOS\n        window.addEventListener('scroll', this.viewPortChanged, { passive: true, capture: true });\n        screen?.orientation?.addEventListener('change', this.viewPortOrientationChanged);\n        window.addEventListener('orientationchange', this.viewPortOrientationChanged);\n\n        // #endregion\n    }\n\n    clearCSSProperties() {\n        this.containerElement.style.removeProperty('--comp-pop-max-height');\n        this.containerElement.style.removeProperty('--comp-pop-top');\n        this.containerElement.style.removeProperty('--comp-pop-bottom');\n        this.containerElement.style.removeProperty('--comp-pop-left');\n        this.containerElement.style.removeProperty('--comp-pop-right');\n        this.containerElement.style.removeProperty('--comp-pop-width');\n        this.containerElement.style.removeProperty('--comp-pop-opacity');\n    }\n\n    async determinePopDirection() {\n        const { containerElement, controlElement, providedDirection, displayBuffer } = this;\n        if (containerElement) containerElement.style.maxHeight = null;\n\n        await waitForNextPaint();\n\n        const { isModule } = this;\n        const { top: controlTop, bottom: controlBottom } = controlElement?.getBoundingClientRect?.() ?? {\n            top: 0,\n            bottom: 0,\n        };\n\n        let windowHeight: number;\n        let maxSpaceAbove: number;\n        let maxSpaceBelow: number;\n\n        if (isModule) {\n            const { outletOffset = 0, innerHeight = window.innerHeight } = window.Tecton?.platformDimensions || {};\n            const distanceToIframeBottom = window.visualViewport.height - controlBottom;\n            const viewableSpaceBelow = innerHeight - (outletOffset + controlBottom);\n            const isIframeShorterThanWindow = distanceToIframeBottom < viewableSpaceBelow;\n            windowHeight = innerHeight;\n            // If the top of the module is below the top of the window we just use the controlTop\n            // Otherwise we need to add the outletOffset to the controlTop\n            maxSpaceAbove = (outletOffset > 0 ? controlTop : controlTop + outletOffset) - displayBuffer;\n            maxSpaceBelow = isIframeShorterThanWindow\n                ? distanceToIframeBottom - displayBuffer\n                : viewableSpaceBelow - displayBuffer;\n        } else {\n            windowHeight = window.visualViewport.height;\n            maxSpaceAbove = controlTop - displayBuffer;\n            maxSpaceBelow = windowHeight - controlBottom - displayBuffer;\n        }\n\n        const directionWithMostSpace: 'up' | 'down' = maxSpaceAbove > maxSpaceBelow ? 'up' : 'down';\n\n        // We do not want to update the max height once the popover is open unless the page orientation shifts (resize or mobile use cases)\n        const shouldUpdateMaxHeight =\n            !containerElement.style.getPropertyValue('--comp-pop-max-height') || this.orientationChanged;\n        // we do not want to constantly update the max-height after an orientation change, so we switch this back to false\n        this.orientationChanged = false;\n        const currentOrDetermineDirection = this.currentDirection || providedDirection || directionWithMostSpace;\n\n        switch (currentOrDetermineDirection) {\n            case 'up':\n                if (shouldUpdateMaxHeight) {\n                    const priorityMaxHeight = this.validatedMaxHeight || maxSpaceAbove;\n                    const maxHeight = Math.min(maxSpaceAbove, priorityMaxHeight);\n                    containerElement.style.setProperty('--comp-pop-max-height', `${maxHeight}px`);\n                }\n                this.setDirectionAndShow('up');\n                break;\n            case 'down':\n                if (shouldUpdateMaxHeight) {\n                    const priorityMaxHeight = this.validatedMaxHeight || maxSpaceBelow;\n                    const maxHeight = Math.min(maxSpaceBelow, priorityMaxHeight);\n                    containerElement.style.setProperty('--comp-pop-max-height', `${maxHeight}px`);\n                }\n                this.setDirectionAndShow('down');\n                break;\n            default:\n                break;\n        }\n    }\n\n    handleMinHeight = () => {\n        if (this.minHeight) {\n            handleDeprecationWarning(this, 'minHeight', 'prop');\n        }\n    };\n\n    removeViewportListeners() {\n        window.removeEventListener('resize', this.viewPortOrientationChanged);\n        // #region remove when Popover API is supported in iOS\n        window.removeEventListener('scroll', this.viewPortChanged);\n        screen?.orientation?.removeEventListener('orientationchange', this.viewPortOrientationChanged);\n        window.removeEventListener('orientationchange', this.viewPortOrientationChanged);\n\n        // #endregion\n    }\n\n    setAbsoluteCSSProperties = async () => {\n        const { controlElement, containerElement, currentDirection, align } = this;\n\n        if (align === 'right') {\n            containerElement.style.setProperty('--comp-pop-right', '0');\n            containerElement.style.setProperty('--comp-pop-left', 'unset');\n        } else {\n            containerElement.style.setProperty('--comp-pop-left', '0');\n            containerElement.style.setProperty('--comp-pop-right', 'unset');\n        }\n\n        if (this.block) {\n            containerElement.style.setProperty('--comp-pop-width', '100%');\n        }\n\n        if (currentDirection === 'up') {\n            const controlStyle = getComputedStyle(controlElement);\n            const controlSize =\n                parseInt(controlStyle.height || '0') +\n                parseInt(controlStyle.borderTopWidth || '0') +\n                parseInt(controlStyle.borderBottomWidth || '0');\n\n            containerElement.style.setProperty('--comp-pop-bottom', `${controlSize}px`);\n        }\n\n        // Wait for one paint to prevent layout thrashing\n        await waitForNextPaint();\n        containerElement.style.setProperty('--comp-pop-opacity', '1');\n    };\n\n    setDirectionAndShow(direction: 'up' | 'down') {\n        this.setRootElement();\n        // Due to some runtime inconsistency across devices/browsers we need to add one more check here because the\n        // popover can be closed between the time the popover is opened and the time the direction is determined\n        const isOpen = this.open;\n        if (!isOpen) return;\n\n        this.currentDirection = direction;\n        this.show = true;\n        if (this.mode === 'legacy') {\n            this.setAbsoluteCSSProperties();\n        } else {\n            this.setFixedCSSProperties();\n        }\n    }\n\n    setFixedCSSProperties = async () => {\n        const { controlElement, containerElement, currentDirection, rootElementRect } = this;\n        const {\n            top: controlTop,\n            bottom: controlBottom,\n            left: controlLeft,\n            right: controlRight,\n        } = controlElement?.getBoundingClientRect?.() ?? {\n            top: 0,\n            bottom: 0,\n            left: 0,\n            right: 0,\n        };\n        const popoverLeft: number = controlLeft - rootElementRect.left;\n\n        if (this.block) containerElement.style.setProperty('--comp-pop-width', `${controlElement?.offsetWidth || 0}px`);\n        containerElement.style.setProperty('--comp-pop-left', `${popoverLeft}px`);\n        containerElement.style.setProperty(\n            '--comp-pop-right',\n            `${rootElementRect.width + rootElementRect.left - controlRight}px`\n        );\n\n        if (currentDirection === 'up') {\n            containerElement.style.setProperty(\n                '--comp-pop-bottom',\n                `${rootElementRect.height + rootElementRect.top - controlTop}px`\n            );\n        }\n        if (currentDirection === 'down') {\n            containerElement.style.setProperty('--comp-pop-top', `${controlBottom - rootElementRect.top}px`);\n        }\n\n        // Wait for one paint to prevent layout thrashing\n        await waitForNextPaint();\n        containerElement.style.setProperty('--comp-pop-opacity', '1');\n    };\n\n    setRootElement() {\n        let currentElement: HTMLElement = this.hostElement;\n\n        while (currentElement && currentElement !== document.documentElement) {\n            const computedStyle = window.getComputedStyle(currentElement);\n\n            // Check if the element has any styles applied that create a new containg block\n            if (\n                computedStyle.transform !== 'none' ||\n                computedStyle.filter !== 'none' ||\n                computedStyle.perspective !== 'none' ||\n                computedStyle.containerType !== 'normal' ||\n                ['transform', 'perspective', 'filter'].includes(computedStyle.willChange) ||\n                ['layout', 'paint', 'strict', 'content'].includes(computedStyle.contain)\n            ) {\n                this.rootElementRect = currentElement.getBoundingClientRect();\n                return;\n            }\n\n            const rootNode = currentElement.getRootNode();\n            const isRootNodeWebComponent =\n                typeof ShadowRoot !== 'undefined' &&\n                rootNode instanceof ShadowRoot &&\n                rootNode.host instanceof HTMLElement;\n            if (isRootNodeWebComponent) {\n                currentElement = rootNode.host;\n            } else {\n                currentElement = currentElement.parentElement;\n            }\n        }\n\n        // Return the document's bounding rect if no element is found\n        this.rootElementRect = {\n            top: 0,\n            bottom: 0,\n            left: 0,\n            right: 0,\n            height: window.visualViewport.height,\n            width: window.visualViewport.width,\n        } as DOMRect;\n    }\n\n    viewPortChanged = () => {\n        if (!this.open) return;\n        this.determinePopDirection();\n    };\n\n    viewPortOrientationChanged = () => {\n        this.orientationChanged = true;\n        this.viewPortChanged();\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const containerClasses = ['container', this.currentDirection];\n        if (this.show) containerClasses.push('show');\n        if (this.mode === 'legacy') containerClasses.push('legacy');\n\n        return (\n            <div\n                ref={el => (this.containerElement = el)}\n                class={containerClasses.join(' ')}\n                test-id=\"outerContainer\"\n                tabIndex={-1}\n            >\n                <div\n                    ref={el => (this.contentElement = el)}\n                    class=\"content\"\n                >\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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"}

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

@@ -1,26 +1,27 @@
-import { r as t, c as i, h as e, H as a, g as o } from "./index-7a5365e2.js";
+import { r as t, c as i, h as e, H as a, g as s } from "./index-7a5365e2.js";
 
-import { u as s, l as n } from "./index-504f1a9e.js";
+import { u as o, l as n } from "./index-504f1a9e.js";
 
 const r = '*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host(:not([separator]):not([separator=false])){--comp-padding:0 var(--app-scale-2x, 10px);--comp-selected-icon-size:var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3x, 15px))));padding:var(--tct-option-padding, var(--t-option-padding, var(--comp-padding)));min-height:44px;align-items:center;cursor:pointer;grid-template-columns:var(--comp-selected-icon-size) 1fr;align-items:center;grid-template-areas:"icon content";gap:var(--tct-scale-1, var(--app-scale-1x, 5px))}:host(:focus),:host(:not([separator]):not([separator=false]):hover),:host([active]){position:relative;z-index:1}:host([multiline]){--comp-padding:var(--app-scale-2, 10px) var(--app-scale-2, 10px);--comp-selected-icon-size:var(--tct-option-selected-multiline-icon-size, var(--t-option-selected-multiline-icon-size, var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, 26px))))}:host([_no-select]){grid-template-columns:1fr;grid-template-areas:"content"}:host([aria-disabled]){cursor:not-allowed;opacity:var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4));pointer-events:none}:host([aria-hidden]){display:none}:host(:not([hidden]):not([aria-hidden])){display:grid}:host(:not([aria-disabled]):not([separator]):not([separator=false]):hover),:host([active]),:host(:focus){background:var(--tct-option-active-background, var(--tct-option-active-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))));color:var(--tct-option-active-color, inherit)}:host(:focus){box-shadow:var(--tct-option-focus-box-shadow, var(--const-inset-double-focus-ring, inset var(--const-global-focus, 0 0 0 2px var(--const-focus-color, #0066CC)))) !important}q2-icon{grid-area:icon;--tct-icon-size:var(--comp-selected-icon-size)}.content{display:block;grid-area:content}:host(:not([multiline])) .content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.separator{--comp-default-separator-margin:0 var(--tct-scale-1, var(--app-scale-3x, 15px));margin:var(--tct-dropdown-separator-margin, var(--t-dropdown-separator-margin, var(--comp-default-separator-margin)));border-bottom:1px solid var(--tct-dropdown-item-separator-color, var(--t-gray-11, #cccccc))}';
 
-const d = r;
+const c = r;
 
-const c = class {
+const d = class {
   constructor(e) {
     t(this, e);
     this.displayChanged = i(this, "displayChanged", 7);
+    this.tctClick = i(this, "tctClick", 7);
     // #endregion
     // #region Local Methods
         this.handleTextContent = async () => {
       if (this.multiline) return;
-      const t = await s(this.hostElement);
+      const t = await o(this.hostElement);
       if (this.display === t) return;
       if (this.display && !t) this.hostElement.textContent = n(this.display);
     };
     this.initDisplay = async () => {
       if (this.multiline) return;
-      const t = await s(this.hostElement);
+      const t = await o(this.hostElement);
       if (this.display) this.displayProvidedAtInit = true;
       this.display = !!this.display ? n(this.display) : t;
       await this.handleTextContent();
@@ -35,7 +36,7 @@ const c = class {
       this.mutationObserver = t;
     };
     this.mutationHandler = async () => {
-      const t = await s(this.hostElement);
+      const t = await o(this.hostElement);
       if (this.display === t || this.multiline) return;
       if (!this.displayProvidedAtInit) this.display = t;
     };
@@ -86,14 +87,33 @@ const c = class {
     });
   }
   renderOption() {
-    const {display: t, disabled: i, disabledGroup: o, selected: s, _multiSelectHidden: r} = this;
-    const d = i || o;
+    const {display: t, disabled: i, disabledGroup: s, selected: o, _multiSelectHidden: r} = this;
+    const c = i || s;
     return e(a, {
       tabindex: "-1",
-      "aria-disabled": d ? "true" : undefined,
-      "aria-selected": `${!!s}`,
+      "aria-disabled": c ? "true" : undefined,
+      "aria-selected": `${!!o}`,
       "aria-hidden": r ? "true" : undefined,
-      display: n(t)
+      display: n(t),
+      onClick: () => {
+        if (c) return;
+        this.tctClick.emit({
+          type: "select",
+          value: this.value
+        });
+      },
+      onKeydown: t => {
+        if (c) return;
+        if (t.key === "Enter" || t.key === " ") {
+          setTimeout((() => {
+            this.tctClick.emit({
+              type: "select",
+              value: this.value
+            });
+          }), 1);
+          t.preventDefault();
+        }
+      }
     }, this.selected && e("q2-icon", {
       type: "checkmark"
     }), e("div", {
@@ -104,7 +124,7 @@ const c = class {
     return this.separator ? this.renderSeparator() : this.renderOption();
   }
   get hostElement() {
-    return o(this);
+    return s(this);
   }
   static get watchers() {
     return {
@@ -114,7 +134,7 @@ const c = class {
   }
 };
 
-c.style = d;
+d.style = c;
 
-export { c as q2_option };
+export { d as q2_option };
 //# sourceMappingURL=q2-option.entry.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["q2OptionCss","Q2OptionStyle0","Q2Option","this","handleTextContent","async","multiline","textContent","getAllText","hostElement","display","loc","initDisplay","displayProvidedAtInit","initMutationObserver","observer","MutationObserver","mutationHandler","observe","childList","subtree","characterData","mutationObserver","allTextContent","disconnectedCallback","_a","disconnect","componentWillLoad","separatorChangedHandler","separator","componentDidLoad","window","role","displayChangedHandler","displayChanged","emit","value","renderSeparator","h","class","renderOption","disabled","disabledGroup","selected","_multiSelectHidden","isDisabled","Host","tabindex","undefined","type","render"],"sources":["src/components/q2-option/q2-option.scss?tag=q2-option&encapsulation=shadow","src/components/q2-option/q2-option.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host(:not([separator]):not([separator='false'])) {\n    --comp-padding: #{0 var-list(--app-scale-2x, 10px)};\n    --comp-selected-icon-size: #{var-list(var-prefixer(option-selected-icon-size), --tct-scale-3, --app-scale-3x, 15px)};\n    padding: var-list(var-prefixer(option-padding), --comp-padding);\n    min-height: 44px;\n    align-items: center;\n    cursor: pointer;\n    grid-template-columns:\n        var(--comp-selected-icon-size)\n        1fr;\n    align-items: center;\n    grid-template-areas: 'icon content';\n    gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n}\n\n:host(:focus),\n:host(:not([separator]):not([separator='false']):hover),\n:host([active]) {\n    position: relative;\n    z-index: 1; // Puts the option above any scroll shadows on the `q2-action-sheet`\n}\n\n:host([multiline]) {\n    --comp-padding: #{var-list(--app-scale-2, 10px) var-list(--app-scale-2, 10px)};\n    --comp-selected-icon-size: #{var-list(\n            var-prefixer(option-selected-multiline-icon-size),\n            var-prefixer(option-selected-icon-size),\n            26px\n        )};\n}\n\n:host([_no-select]) {\n    grid-template-columns: 1fr;\n    grid-template-areas: 'content';\n}\n\n:host([aria-disabled]) {\n    cursor: not-allowed;\n    opacity: var-list(--tct-disabled-opacity, --app-disabled-opacity, 0.4);\n    pointer-events: none;\n}\n\n:host([aria-hidden]) {\n    display: none;\n}\n\n:host(:not([hidden]):not([aria-hidden])) {\n    display: grid;\n}\n\n:host(:not([aria-disabled]):not([separator]):not([separator='false']):hover),\n:host([active]),\n:host(:focus) {\n    background: var-list(\n        --tct-option-active-background,\n        --tct-option-active-bg,\n        --tct-gray-14,\n        --t-gray-14,\n        --tct-gray-l3,\n        --app-gray-l3,\n        #f2f2f2\n    );\n    color: var(--tct-option-active-color, inherit);\n}\n\n:host(:focus) {\n    box-shadow: var-list(\n        --tct-option-focus-box-shadow,\n        --const-inset-double-focus-ring,\n        unquote('inset var(--const-global-focus, 0 0 0 2px var(--const-focus-color, #0066CC))')\n    ) !important;\n}\n\nq2-icon {\n    grid-area: icon;\n    --tct-icon-size: var(--comp-selected-icon-size);\n}\n\n.content {\n    display: block;\n    grid-area: content;\n\n    :host(:not([multiline])) & {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n}\n\n.separator {\n    --comp-default-separator-margin: 0 #{var-list(--tct-scale-1, --app-scale-3x, 15px)};\n    margin: var-list(var-prefixer(dropdown-separator-margin), --comp-default-separator-margin);\n    border-bottom: 1px solid var-list(--tct-dropdown-item-separator-color --t-gray-11 #cccccc);\n}\n","import { Component, Prop, h, Element, ComponentInterface, Host, Event, EventEmitter, Watch } from '@stencil/core';\nimport { getAllText, loc } from '@/utils';\n\n@Component({ tag: 'q2-option', shadow: true, styleUrl: 'q2-option.scss' })\nexport class Q2Option implements ComponentInterface {\n    // #region Own Properties\n\n    displayProvidedAtInit: boolean;\n    mutationObserver: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    @Prop({ reflect: true, attribute: '_multiSelectHidden' })\n    _multiSelectHidden: boolean = false;\n\n    /**\n     * Used by q2-option-list to indicate the option is active\n     * @private\n     */\n    @Prop({ reflect: true })\n    active: boolean;\n\n    /** Disables the option. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * Used by consuming elements to disable all options in the group\n     * @private\n     */\n    @Prop({ reflect: true })\n    disabledGroup: boolean;\n\n    /**\n     * The text that is displayed in the field when selected. If not provided, any text inside the element will be used.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    display: string;\n\n    /**\n     * Used by consuming elements to enable multiline content support\n     * @private\n     */\n    @Prop({ reflect: true })\n    multiline: boolean;\n\n    /**\n     * Used by q2-option-list to set a role on the option\n     * @type {('option' | 'menuitem' | 'separator')}\n     * @private\n     */\n    @Prop({ reflect: true, mutable: true })\n    role: string = 'option';\n\n    /**\n     * Used by q2-option-list to indicate the option is selected\n     * @private\n     */\n    @Prop({ reflect: true })\n    selected: boolean;\n\n    /**\n     * Renders a line in the item instead of text.\n     * Click events from these items will not have details provided.\n     * A `separator` allows for quick visual grouping of items, so interactions should not be bound to these options.\n     */\n    @Prop({ reflect: true })\n    separator: boolean;\n\n    /** Serves as the option's value. */\n    @Prop({ reflect: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Used by consuming elements to indicate the display value of the option has changed.\n     * @private\n     */\n    @Event()\n    displayChanged: EventEmitter<{ value: string; display: 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        this.separatorChangedHandler(this.separator);\n        this.initDisplay();\n    }\n\n    componentDidLoad() {\n        if ('MutationObserver' in window) this.initMutationObserver();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('separator')\n    async separatorChangedHandler(separator: boolean) {\n        if (!separator) return;\n        this.role = 'separator';\n    }\n\n    @Watch('display')\n    async displayChangedHandler() {\n        this.display = loc(this.display);\n        await this.handleTextContent();\n        this.displayChanged.emit({ display: this.display, value: this.value });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    handleTextContent = async () => {\n        if (this.multiline) return;\n        const textContent = await getAllText(this.hostElement);\n        if (this.display === textContent) return;\n        if (this.display && !textContent) this.hostElement.textContent = loc(this.display);\n    };\n\n    initDisplay = async () => {\n        if (this.multiline) return;\n        const textContent = await getAllText(this.hostElement);\n        if (this.display) this.displayProvidedAtInit = true;\n        this.display = !!this.display ? loc(this.display) : textContent;\n        await this.handleTextContent();\n    };\n\n    initMutationObserver = () => {\n        const observer = new MutationObserver(this.mutationHandler);\n        observer.observe(this.hostElement, { childList: true, subtree: true, characterData: true });\n        this.mutationObserver = observer;\n    };\n\n    mutationHandler = async () => {\n        const allTextContent = await getAllText(this.hostElement);\n        if (this.display === allTextContent || this.multiline) return;\n        if (!this.displayProvidedAtInit) this.display = allTextContent;\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderSeparator() {\n        return <div class=\"separator\"></div>;\n    }\n\n    renderOption() {\n        const { display, disabled, disabledGroup, selected, _multiSelectHidden } = this;\n        const isDisabled = disabled || disabledGroup;\n        return (\n            <Host\n                tabindex=\"-1\"\n                aria-disabled={isDisabled ? 'true' : undefined}\n                aria-selected={`${!!selected}`}\n                aria-hidden={_multiSelectHidden ? 'true' : undefined}\n                display={loc(display)}\n            >\n                {this.selected && <q2-icon type=\"checkmark\" />}\n                <div class=\"content\">\n                    <slot />\n                </div>\n            </Host>\n        );\n    }\n\n    render() {\n        return this.separator ? this.renderSeparator() : this.renderOption();\n    }\n\n    // #endregion\n}\n"],"mappings":";;;;AAAA,MAAMA,IAAc;;AACpB,MAAAC,IAAeD;;MCGFE,IAAQ;;;;;;QA2HjBC,KAAAC,oBAAoBC;MAChB,IAAIF,KAAKG,WAAW;MACpB,MAAMC,UAAoBC,EAAWL,KAAKM;MAC1C,IAAIN,KAAKO,YAAYH,GAAa;MAClC,IAAIJ,KAAKO,YAAYH,GAAaJ,KAAKM,YAAYF,cAAcI,EAAIR,KAAKO;AAAQ;IAGtFP,KAAAS,cAAcP;MACV,IAAIF,KAAKG,WAAW;MACpB,MAAMC,UAAoBC,EAAWL,KAAKM;MAC1C,IAAIN,KAAKO,SAASP,KAAKU,wBAAwB;MAC/CV,KAAKO,YAAYP,KAAKO,UAAUC,EAAIR,KAAKO,WAAWH;YAC9CJ,KAAKC;AAAmB;IAGlCD,KAAAW,uBAAuB;MACnB,MAAMC,IAAW,IAAIC,iBAAiBb,KAAKc;MAC3CF,EAASG,QAAQf,KAAKM,aAAa;QAAEU,WAAW;QAAMC,SAAS;QAAMC,eAAe;;MACpFlB,KAAKmB,mBAAmBP;AAAQ;IAGpCZ,KAAAc,kBAAkBZ;MACd,MAAMkB,UAAuBf,EAAWL,KAAKM;MAC7C,IAAIN,KAAKO,YAAYa,KAAkBpB,KAAKG,WAAW;MACvD,KAAKH,KAAKU,uBAAuBV,KAAKO,UAAUa;AAAc;8BAnIpC;;;;;;gBAwCf;;;;;;;EAkCf,oBAAAC;;KACIC,IAAAtB,KAAKmB,sBAAgB,QAAAG,WAAA,aAAAA,EAAEC;IACvBvB,KAAKmB,mBAAmB;;EAG5B,iBAAAK;IACIxB,KAAKyB,wBAAwBzB,KAAK0B;IAClC1B,KAAKS;;EAGT,gBAAAkB;IACI,IAAI,sBAAsBC,QAAQ5B,KAAKW;;;;EAO3C,6BAAMc,CAAwBC;IAC1B,KAAKA,GAAW;IAChB1B,KAAK6B,OAAO;;EAIhB,2BAAMC;IACF9B,KAAKO,UAAUC,EAAIR,KAAKO;UAClBP,KAAKC;IACXD,KAAK+B,eAAeC,KAAK;MAAEzB,SAASP,KAAKO;MAAS0B,OAAOjC,KAAKiC;;;;;EAoClE,eAAAC;IACI,OAAOC,EAAA;MAAKC,OAAM;;;EAGtB,YAAAC;IACI,OAAM9B,SAAEA,GAAO+B,UAAEA,GAAQC,eAAEA,GAAaC,UAAEA,GAAQC,oBAAEA,KAAuBzC;IAC3E,MAAM0C,IAAaJ,KAAYC;IAC/B,OACIJ,EAACQ,GAAI;MACDC,UAAS;MAAI,iBACEF,IAAa,SAASG;MAAS,iBAC/B,KAAKL;MAAU,eACjBC,IAAqB,SAASI;MAC3CtC,SAASC,EAAID;OAEZP,KAAKwC,YAAYL,EAAA;MAASW,MAAK;QAChCX,EAAA;MAAKC,OAAM;OACPD,EAAA;;EAMhB,MAAAY;IACI,OAAO/C,KAAK0B,YAAY1B,KAAKkC,oBAAoBlC,KAAKqC"}
+{"version":3,"names":["q2OptionCss","Q2OptionStyle0","Q2Option","this","handleTextContent","async","multiline","textContent","getAllText","hostElement","display","loc","initDisplay","displayProvidedAtInit","initMutationObserver","observer","MutationObserver","mutationHandler","observe","childList","subtree","characterData","mutationObserver","allTextContent","disconnectedCallback","_a","disconnect","componentWillLoad","separatorChangedHandler","separator","componentDidLoad","window","role","displayChangedHandler","displayChanged","emit","value","renderSeparator","h","class","renderOption","disabled","disabledGroup","selected","_multiSelectHidden","isDisabled","Host","tabindex","undefined","onClick","tctClick","type","onKeydown","event","key","setTimeout","preventDefault","render"],"sources":["src/components/q2-option/q2-option.scss?tag=q2-option&encapsulation=shadow","src/components/q2-option/q2-option.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host(:not([separator]):not([separator='false'])) {\n    --comp-padding: #{0 var-list(--app-scale-2x, 10px)};\n    --comp-selected-icon-size: #{var-list(var-prefixer(option-selected-icon-size), --tct-scale-3, --app-scale-3x, 15px)};\n    padding: var-list(var-prefixer(option-padding), --comp-padding);\n    min-height: 44px;\n    align-items: center;\n    cursor: pointer;\n    grid-template-columns:\n        var(--comp-selected-icon-size)\n        1fr;\n    align-items: center;\n    grid-template-areas: 'icon content';\n    gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n}\n\n:host(:focus),\n:host(:not([separator]):not([separator='false']):hover),\n:host([active]) {\n    position: relative;\n    z-index: 1; // Puts the option above any scroll shadows on the `q2-action-sheet`\n}\n\n:host([multiline]) {\n    --comp-padding: #{var-list(--app-scale-2, 10px) var-list(--app-scale-2, 10px)};\n    --comp-selected-icon-size: #{var-list(\n            var-prefixer(option-selected-multiline-icon-size),\n            var-prefixer(option-selected-icon-size),\n            26px\n        )};\n}\n\n:host([_no-select]) {\n    grid-template-columns: 1fr;\n    grid-template-areas: 'content';\n}\n\n:host([aria-disabled]) {\n    cursor: not-allowed;\n    opacity: var-list(--tct-disabled-opacity, --app-disabled-opacity, 0.4);\n    pointer-events: none;\n}\n\n:host([aria-hidden]) {\n    display: none;\n}\n\n:host(:not([hidden]):not([aria-hidden])) {\n    display: grid;\n}\n\n:host(:not([aria-disabled]):not([separator]):not([separator='false']):hover),\n:host([active]),\n:host(:focus) {\n    background: var-list(\n        --tct-option-active-background,\n        --tct-option-active-bg,\n        --tct-gray-14,\n        --t-gray-14,\n        --tct-gray-l3,\n        --app-gray-l3,\n        #f2f2f2\n    );\n    color: var(--tct-option-active-color, inherit);\n}\n\n:host(:focus) {\n    box-shadow: var-list(\n        --tct-option-focus-box-shadow,\n        --const-inset-double-focus-ring,\n        unquote('inset var(--const-global-focus, 0 0 0 2px var(--const-focus-color, #0066CC))')\n    ) !important;\n}\n\nq2-icon {\n    grid-area: icon;\n    --tct-icon-size: var(--comp-selected-icon-size);\n}\n\n.content {\n    display: block;\n    grid-area: content;\n\n    :host(:not([multiline])) & {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n}\n\n.separator {\n    --comp-default-separator-margin: 0 #{var-list(--tct-scale-1, --app-scale-3x, 15px)};\n    margin: var-list(var-prefixer(dropdown-separator-margin), --comp-default-separator-margin);\n    border-bottom: 1px solid var-list(--tct-dropdown-item-separator-color --t-gray-11 #cccccc);\n}\n","import { Component, Prop, h, Element, ComponentInterface, Host, Event, EventEmitter, Watch } from '@stencil/core';\nimport { getAllText, loc } from '@/utils';\n\n@Component({ tag: 'q2-option', shadow: true, styleUrl: 'q2-option.scss' })\nexport class Q2Option implements ComponentInterface {\n    // #region Own Properties\n\n    displayProvidedAtInit: boolean;\n    mutationObserver: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    @Prop({ reflect: true, attribute: '_multiSelectHidden' })\n    _multiSelectHidden: boolean = false;\n\n    /**\n     * Used by q2-option-list to indicate the option is active\n     * @private\n     */\n    @Prop({ reflect: true })\n    active: boolean;\n\n    /** Disables the option. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * Used by consuming elements to disable all options in the group\n     * @private\n     */\n    @Prop({ reflect: true })\n    disabledGroup: boolean;\n\n    /**\n     * The text that is displayed in the field when selected. If not provided, any text inside the element will be used.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    display: string;\n\n    /**\n     * Used by consuming elements to enable multiline content support\n     * @private\n     */\n    @Prop({ reflect: true })\n    multiline: boolean;\n\n    /**\n     * Used by q2-option-list to set a role on the option\n     * @type {('option' | 'menuitem' | 'separator')}\n     * @private\n     */\n    @Prop({ reflect: true, mutable: true })\n    role: string = 'option';\n\n    /**\n     * Used by q2-option-list to indicate the option is selected\n     * @private\n     */\n    @Prop({ reflect: true })\n    selected: boolean;\n\n    /**\n     * Renders a line in the item instead of text.\n     * Click events from these items will not have details provided.\n     * A `separator` allows for quick visual grouping of items, so interactions should not be bound to these options.\n     */\n    @Prop({ reflect: true })\n    separator: boolean;\n\n    /** Serves as the option's value. */\n    @Prop({ reflect: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Used by consuming elements to indicate the display value of the option has changed.\n     * @private\n     */\n    @Event()\n    displayChanged: EventEmitter<{ value: string; display: string }>;\n\n    /**\n     * Is emitted when the option is clicked.\n     */\n    @Event()\n    tctClick: EventEmitter<{ type: 'select' | 'remove'; value: 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        this.separatorChangedHandler(this.separator);\n        this.initDisplay();\n    }\n\n    componentDidLoad() {\n        if ('MutationObserver' in window) this.initMutationObserver();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('separator')\n    async separatorChangedHandler(separator: boolean) {\n        if (!separator) return;\n        this.role = 'separator';\n    }\n\n    @Watch('display')\n    async displayChangedHandler() {\n        this.display = loc(this.display);\n        await this.handleTextContent();\n        this.displayChanged.emit({ display: this.display, value: this.value });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    handleTextContent = async () => {\n        if (this.multiline) return;\n        const textContent = await getAllText(this.hostElement);\n        if (this.display === textContent) return;\n        if (this.display && !textContent) this.hostElement.textContent = loc(this.display);\n    };\n\n    initDisplay = async () => {\n        if (this.multiline) return;\n        const textContent = await getAllText(this.hostElement);\n        if (this.display) this.displayProvidedAtInit = true;\n        this.display = !!this.display ? loc(this.display) : textContent;\n        await this.handleTextContent();\n    };\n\n    initMutationObserver = () => {\n        const observer = new MutationObserver(this.mutationHandler);\n        observer.observe(this.hostElement, { childList: true, subtree: true, characterData: true });\n        this.mutationObserver = observer;\n    };\n\n    mutationHandler = async () => {\n        const allTextContent = await getAllText(this.hostElement);\n        if (this.display === allTextContent || this.multiline) return;\n        if (!this.displayProvidedAtInit) this.display = allTextContent;\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderSeparator() {\n        return <div class=\"separator\"></div>;\n    }\n\n    renderOption() {\n        const { display, disabled, disabledGroup, selected, _multiSelectHidden } = this;\n        const isDisabled = disabled || disabledGroup;\n        return (\n            <Host\n                tabindex=\"-1\"\n                aria-disabled={isDisabled ? 'true' : undefined}\n                aria-selected={`${!!selected}`}\n                aria-hidden={_multiSelectHidden ? 'true' : undefined}\n                display={loc(display)}\n                onClick={() => {\n                    if (isDisabled) return;\n                    this.tctClick.emit({ type: 'select', value: this.value });\n                }}\n                onKeydown={(event: KeyboardEvent) => {\n                    if (isDisabled) return;\n                    if (event.key === 'Enter' || event.key === ' ') {\n                        setTimeout(() => {\n                            this.tctClick.emit({ type: 'select', value: this.value });\n                        }, 1);\n\n                        event.preventDefault();\n                    }\n                }}\n            >\n                {this.selected && <q2-icon type=\"checkmark\" />}\n                <div class=\"content\">\n                    <slot />\n                </div>\n            </Host>\n        );\n    }\n\n    render() {\n        return this.separator ? this.renderSeparator() : this.renderOption();\n    }\n\n    // #endregion\n}\n"],"mappings":";;;;AAAA,MAAMA,IAAc;;AACpB,MAAAC,IAAeD;;MCGFE,IAAQ;;;;;;;QAiIjBC,KAAAC,oBAAoBC;MAChB,IAAIF,KAAKG,WAAW;MACpB,MAAMC,UAAoBC,EAAWL,KAAKM;MAC1C,IAAIN,KAAKO,YAAYH,GAAa;MAClC,IAAIJ,KAAKO,YAAYH,GAAaJ,KAAKM,YAAYF,cAAcI,EAAIR,KAAKO;AAAQ;IAGtFP,KAAAS,cAAcP;MACV,IAAIF,KAAKG,WAAW;MACpB,MAAMC,UAAoBC,EAAWL,KAAKM;MAC1C,IAAIN,KAAKO,SAASP,KAAKU,wBAAwB;MAC/CV,KAAKO,YAAYP,KAAKO,UAAUC,EAAIR,KAAKO,WAAWH;YAC9CJ,KAAKC;AAAmB;IAGlCD,KAAAW,uBAAuB;MACnB,MAAMC,IAAW,IAAIC,iBAAiBb,KAAKc;MAC3CF,EAASG,QAAQf,KAAKM,aAAa;QAAEU,WAAW;QAAMC,SAAS;QAAMC,eAAe;;MACpFlB,KAAKmB,mBAAmBP;AAAQ;IAGpCZ,KAAAc,kBAAkBZ;MACd,MAAMkB,UAAuBf,EAAWL,KAAKM;MAC7C,IAAIN,KAAKO,YAAYa,KAAkBpB,KAAKG,WAAW;MACvD,KAAKH,KAAKU,uBAAuBV,KAAKO,UAAUa;AAAc;8BAzIpC;;;;;;gBAwCf;;;;;;;EAwCf,oBAAAC;;KACIC,IAAAtB,KAAKmB,sBAAgB,QAAAG,WAAA,aAAAA,EAAEC;IACvBvB,KAAKmB,mBAAmB;;EAG5B,iBAAAK;IACIxB,KAAKyB,wBAAwBzB,KAAK0B;IAClC1B,KAAKS;;EAGT,gBAAAkB;IACI,IAAI,sBAAsBC,QAAQ5B,KAAKW;;;;EAO3C,6BAAMc,CAAwBC;IAC1B,KAAKA,GAAW;IAChB1B,KAAK6B,OAAO;;EAIhB,2BAAMC;IACF9B,KAAKO,UAAUC,EAAIR,KAAKO;UAClBP,KAAKC;IACXD,KAAK+B,eAAeC,KAAK;MAAEzB,SAASP,KAAKO;MAAS0B,OAAOjC,KAAKiC;;;;;EAoClE,eAAAC;IACI,OAAOC,EAAA;MAAKC,OAAM;;;EAGtB,YAAAC;IACI,OAAM9B,SAAEA,GAAO+B,UAAEA,GAAQC,eAAEA,GAAaC,UAAEA,GAAQC,oBAAEA,KAAuBzC;IAC3E,MAAM0C,IAAaJ,KAAYC;IAC/B,OACIJ,EAACQ,GAAI;MACDC,UAAS;MAAI,iBACEF,IAAa,SAASG;MAAS,iBAC/B,KAAKL;MAAU,eACjBC,IAAqB,SAASI;MAC3CtC,SAASC,EAAID;MACbuC,SAAS;QACL,IAAIJ,GAAY;QAChB1C,KAAK+C,SAASf,KAAK;UAAEgB,MAAM;UAAUf,OAAOjC,KAAKiC;;AAAQ;MAE7DgB,WAAYC;QACR,IAAIR,GAAY;QAChB,IAAIQ,EAAMC,QAAQ,WAAWD,EAAMC,QAAQ,KAAK;UAC5CC,YAAW;YACPpD,KAAK+C,SAASf,KAAK;cAAEgB,MAAM;cAAUf,OAAOjC,KAAKiC;;AAAQ,cAC1D;UAEHiB,EAAMG;;;OAIbrD,KAAKwC,YAAYL,EAAA;MAASa,MAAK;QAChCb,EAAA;MAAKC,OAAM;OACPD,EAAA;;EAMhB,MAAAmB;IACI,OAAOtD,KAAK0B,YAAY1B,KAAKkC,oBAAoBlC,KAAKqC"}

package/dist/types/components/q2-dropdown-item/q2-dropdown-item.d.ts

@@ -37,11 +37,19 @@ export declare class Q2DropdownItem implements ComponentInterface {
     value: string;
     /**
      * Is emitted when the item is clicked.
+     * @deprecated
      */
     click: EventEmitter<{
         type: 'select' | 'remove';
         value: string;
     }>;
+    /**
+     * Is emitted when the item is clicked.
+     */
+    tctClick: EventEmitter<{
+        type: 'select' | 'remove';
+        value: string;
+    }>;
     componentWillLoad(): void;
     componentDidLoad(): void;
     onHostElementFocus(event: FocusEvent): void;

package/dist/types/components/q2-option/q2-option.d.ts

@@ -53,6 +53,13 @@ export declare class Q2Option implements ComponentInterface {
         value: string;
         display: string;
     }>;
+    /**
+     * Is emitted when the option is clicked.
+     */
+    tctClick: EventEmitter<{
+        type: 'select' | 'remove';
+        value: string;
+    }>;
     disconnectedCallback(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;

package/dist/types/components.d.ts

@@ -2948,6 +2948,7 @@ declare global {
     };
     interface HTMLQ2DropdownItemElementEventMap {
         "click": { type: 'select' | 'remove'; value: string };
+        "tctClick": { type: 'select' | 'remove'; value: string };
     }
     interface HTMLQ2DropdownItemElement extends Components.Q2DropdownItem, HTMLStencilElement {
         addEventListener<K extends keyof HTMLQ2DropdownItemElementEventMap>(type: K, listener: (this: HTMLQ2DropdownItemElement, ev: Q2DropdownItemCustomEvent<HTMLQ2DropdownItemElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -3153,6 +3154,7 @@ declare global {
     };
     interface HTMLQ2OptionElementEventMap {
         "displayChanged": { value: string; display: string };
+        "tctClick": { type: 'select' | 'remove'; value: string };
     }
     interface HTMLQ2OptionElement extends Components.Q2Option, HTMLStencilElement {
         addEventListener<K extends keyof HTMLQ2OptionElementEventMap>(type: K, listener: (this: HTMLQ2OptionElement, ev: Q2OptionCustomEvent<HTMLQ2OptionElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -4590,8 +4592,13 @@ declare namespace LocalJSX {
         "label"?: string;
         /**
           * Is emitted when the item is clicked.
+          * @deprecated
          */
         "onClick"?: (event: Q2DropdownItemCustomEvent<{ type: 'select' | 'remove'; value: string }>) => void;
+        /**
+          * Is emitted when the item is clicked.
+         */
+        "onTctClick"?: (event: Q2DropdownItemCustomEvent<{ type: 'select' | 'remove'; value: string }>) => void;
         /**
           * Renders an icon button in the item. Clicking on this button will change the `type` on the item's click event detail to "remove".
          */
@@ -5165,6 +5172,10 @@ declare namespace LocalJSX {
           * @private
          */
         "onDisplayChanged"?: (event: Q2OptionCustomEvent<{ value: string; display: string }>) => void;
+        /**
+          * Is emitted when the option is clicked.
+         */
+        "onTctClick"?: (event: Q2OptionCustomEvent<{ type: 'select' | 'remove'; value: string }>) => void;
         /**
           * Used by q2-option-list to set a role on the option
           * @type {('option' | 'menuitem' | 'separator')}

package/dist/types/utils/mirror-emit.d.ts

@@ -0,0 +1,11 @@
+import { ComponentInterface } from '../stencil-public-runtime';
+/**
+ * Emits specified events from a given component context with the provided detail.
+ *
+ * @template T - The type of the event detail. Defaults to the type of `CustomEvent['detail']`.
+ * @param context - The component context that contains the event emitters.
+ * @param events - An array of event names to be emitted.
+ * @param detail - The detail payload to be passed to each emitted event.
+ */
+declare const mirrorEmit: <T = any>(context: ComponentInterface, events: Array<string>, detail: T) => void;
+export default mirrorEmit;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "q2-tecton-elements",
-    "version": "1.54.2",
+    "version": "1.54.4",
     "description": "Q2 Tecton Custom Elements",
     "license": "MIT",
     "author": "Q2 Tecton Team",
@@ -36,7 +36,7 @@
     },
     "dependencies": {
         "@stencil/core": "4.18.0",
-        "q2-tecton-common": "1.54.2",
+        "q2-tecton-common": "1.54.4",
         "swiper": "8.4.4"
     },
     "devDependencies": {
@@ -61,5 +61,5 @@
         "typescript": "5.4.5",
         "typescript-eslint": "^7.11.0"
     },
-    "gitHead": "e352a08118137dc91b68bd5896604ab9e8543eb7"
+    "gitHead": "e19da0b786616b67fc67ad74c6497d3c49d4ba3b"
 }