q2-tecton-elements 1.51.0 → 1.52.0

package/dist/q2-tecton-elements/{p-a5d0e252.entry.js.map → q2-option-list.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","isFirstVisibleOptionActive","undefined","adjustActiveOptionAndScroll","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","filter","tagName","contents","extractOptions","elements","reduce","acc","Array","from","children","hidden","disabledGroup","numToAdd","scrollToActiveOption","options","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","valueObject","innerText","trim","values","isAlreadySelected","change","elementIndex","isOptionVisible","isVisible","focus","selectedValues","render","h","Host","class","ref","el","contentElement","onFocusout","label","onKeyDown","onClick"],"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"],"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\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('q2-option').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 | HTMLQ2OptionElement)[]> {\n        return this.allContents;\n    }\n\n    @Method()\n    async getOptions(): Promise<HTMLQ2OptionElement[]> {\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 => (option._multiSelectHidden = showSelected ? !option.selected : false));\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get allContents(): (HTMLQ2OptgroupElement | HTMLQ2OptionElement)[] {\n        const rootSlot = this.getRootSlot(this.hostElement);\n        const acceptedTags = ['Q2-OPTGROUP', 'Q2-OPTION'];\n        return rootSlot.filter(element => acceptedTags.includes(element.tagName)) as (\n            | HTMLQ2OptgroupElement\n            | HTMLQ2OptionElement\n        )[];\n    }\n\n    get allOptions(): HTMLQ2OptionElement[] {\n        const contents = this.allContents;\n\n        const extractOptions = (\n            elements: (HTMLQ2OptgroupElement | HTMLQ2OptionElement | Element)[]\n        ): HTMLQ2OptionElement[] => {\n            return elements.reduce((acc, element) => {\n                if (element.tagName === 'Q2-OPTGROUP') {\n                    return [...acc, ...extractOptions(Array.from(element.children))];\n                } else if (element.tagName === 'Q2-OPTION') {\n                    return [...acc, element];\n                } else {\n                    return acc;\n                }\n            }, []);\n        };\n\n        return extractOptions(contents);\n    }\n\n    get allVisibleOptions(): HTMLQ2OptionElement[] {\n        return this.allOptions.filter(\n            option => !option.hidden && !option._multiSelectHidden && !option.disabled && !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    async checkOptions() {\n        const { type } = this;\n        const options = await this.getOptions();\n        if (!type) return;\n        const optionRole = type === 'menu' ? 'menuitem' : 'option';\n        options.forEach(option => {\n            option.role = optionRole;\n        });\n    }\n\n    clickHandler = (event: Event) => {\n        const target = event.target as HTMLQ2OptionElement;\n        const option = target.closest('q2-option');\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: HTMLQ2OptionElement };\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: HTMLQ2OptionElement) {\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            option._multiSelectHidden = !option.selected;\n        });\n    }\n\n    getDefaultActiveIndex() {\n        const { allOptions } = this;\n        const firstSelected = allOptions.findIndex(element => element.selected);\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: HTMLQ2OptionElement;\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 isFirstVisibleOptionActive = allVisibleOptions[0].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 isLastVisibleOptionActive = allVisibleOptions[allVisibleOptions.length - 1].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: HTMLQ2OptionElement) {\n        const { multiple, noSelect, showSelected } = this;\n        if (!selectedOption || selectedOption.disabled || selectedOption.disabledGroup) return;\n        const selectedValue = selectedOption.value;\n        const valueObject = {\n            value: selectedValue,\n            display: selectedOption.display || selectedOption.innerText.trim(),\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        allOptions.forEach(element => {\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        allOptions.forEach(element => {\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"],"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","isFirstVisibleOptionActive","undefined","adjustActiveOptionAndScroll","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","filter","tagName","contents","extractOptions","elements","reduce","acc","Array","from","children","hidden","disabledGroup","numToAdd","scrollToActiveOption","options","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","valueObject","innerText","trim","values","isAlreadySelected","change","elementIndex","isOptionVisible","isVisible","focus","selectedValues","render","h","Host","class","ref","el","contentElement","onFocusout","label","onKeyDown","onClick"],"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"],"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\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('q2-option').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 | HTMLQ2OptionElement)[]> {\n        return this.allContents;\n    }\n\n    @Method()\n    async getOptions(): Promise<HTMLQ2OptionElement[]> {\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 => (option._multiSelectHidden = showSelected ? !option.selected : false));\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get allContents(): (HTMLQ2OptgroupElement | HTMLQ2OptionElement)[] {\n        const rootSlot = this.getRootSlot(this.hostElement);\n        const acceptedTags = ['Q2-OPTGROUP', 'Q2-OPTION'];\n        return rootSlot.filter(element => acceptedTags.includes(element.tagName)) as (\n            | HTMLQ2OptgroupElement\n            | HTMLQ2OptionElement\n        )[];\n    }\n\n    get allOptions(): HTMLQ2OptionElement[] {\n        const contents = this.allContents;\n\n        const extractOptions = (\n            elements: (HTMLQ2OptgroupElement | HTMLQ2OptionElement | Element)[]\n        ): HTMLQ2OptionElement[] => {\n            return elements.reduce((acc, element) => {\n                if (element.tagName === 'Q2-OPTGROUP') {\n                    return [...acc, ...extractOptions(Array.from(element.children))];\n                } else if (element.tagName === 'Q2-OPTION') {\n                    return [...acc, element];\n                } else {\n                    return acc;\n                }\n            }, []);\n        };\n\n        return extractOptions(contents);\n    }\n\n    get allVisibleOptions(): HTMLQ2OptionElement[] {\n        return this.allOptions.filter(\n            option => !option.hidden && !option._multiSelectHidden && !option.disabled && !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    async checkOptions() {\n        const { type } = this;\n        const options = await this.getOptions();\n        if (!type) return;\n        const optionRole = type === 'menu' ? 'menuitem' : 'option';\n        options.forEach(option => {\n            option.role = optionRole;\n        });\n    }\n\n    clickHandler = (event: Event) => {\n        const target = event.target as HTMLQ2OptionElement;\n        const option = target.closest('q2-option');\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: HTMLQ2OptionElement };\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: HTMLQ2OptionElement) {\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            option._multiSelectHidden = !option.selected;\n        });\n    }\n\n    getDefaultActiveIndex() {\n        const { allOptions } = this;\n        const firstSelected = allOptions.findIndex(element => element.selected);\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: HTMLQ2OptionElement;\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 isFirstVisibleOptionActive = allVisibleOptions[0].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 isLastVisibleOptionActive = allVisibleOptions[allVisibleOptions.length - 1].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: HTMLQ2OptionElement) {\n        const { multiple, noSelect, showSelected } = this;\n        if (!selectedOption || selectedOption.disabled || selectedOption.disabledGroup) return;\n        const selectedValue = selectedOption.value;\n        const valueObject = {\n            value: selectedValue,\n            display: selectedOption.display || selectedOption.innerText.trim(),\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        allOptions.forEach(element => {\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        allOptions.forEach(element => {\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"],"mappings":"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"}

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

@@ -0,0 +1,110 @@
+import { r as t, c as i, h as e, H as s, g as o } from "./index-7a5365e2.js";
+
+import { v as a, l as n } from "./index-d18e2a20.js";
+
+const d = '*{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{--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(: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]):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}';
+
+const r = d;
+
+const c = class {
+  constructor(e) {
+    t(this, e);
+    this.displayChanged = i(this, "displayChanged", 7);
+    // #endregion
+    // #region Local Methods
+        this.handleTextContent = async () => {
+      if (this.multiline) return;
+      const t = await a(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 a(this.hostElement);
+      if (this.display) this.displayProvidedAtInit = true;
+      this.display = !!this.display ? n(this.display) : t;
+      await this.handleTextContent();
+    };
+    this.initMutationObserver = () => {
+      const t = new MutationObserver(this.mutationHandler);
+      t.observe(this.hostElement, {
+        childList: true,
+        subtree: true,
+        characterData: true
+      });
+      this.mutationObserver = t;
+    };
+    this.mutationHandler = async () => {
+      const t = await a(this.hostElement);
+      if (this.display === t || this.multiline) return;
+      if (!this.displayProvidedAtInit) this.display = t;
+    };
+    this._multiSelectHidden = false;
+    this.active = undefined;
+    this.disabled = undefined;
+    this.disabledGroup = undefined;
+    this.display = undefined;
+    this.multiline = undefined;
+    this.role = "option";
+    this.selected = undefined;
+    this.value = undefined;
+  }
+  // #endregion
+  // #region Component Lifecycle Events
+  disconnectedCallback() {
+    var t;
+    (t = this.mutationObserver) === null || t === void 0 ? void 0 : t.disconnect();
+    this.mutationObserver = null;
+  }
+  componentWillLoad() {
+    this.initDisplay();
+  }
+  componentDidLoad() {
+    if ("MutationObserver" in window) this.initMutationObserver();
+  }
+  // #endregion
+  // #region Watchers
+  async displayChangedHandler() {
+    this.display = n(this.display);
+    await this.handleTextContent();
+    this.displayChanged.emit({
+      display: this.display,
+      value: this.value
+    });
+  }
+  // #endregion
+  // #region Render Methods
+  render() {
+    const {display: t, disabled: i, disabledGroup: o, selected: a, _multiSelectHidden: d} = this;
+    const r = i || o;
+    return e(s, {
+      key: "70d5ca1da1b82a1406cdeb6f2db5e0f0ade4d727",
+      tabindex: "-1",
+      "aria-disabled": r ? "true" : undefined,
+      "aria-selected": `${!!a}`,
+      "aria-hidden": d ? "true" : undefined,
+      display: n(t)
+    }, this.selected && e("q2-icon", {
+      key: "2803339b76a90830b9db0ba482cbaf2a66c1e8a4",
+      type: "checkmark"
+    }), e("div", {
+      key: "77ed1a226afe2f65c3e08d42e4f380e1e3a6e1f4",
+      class: "content"
+    }, e("slot", {
+      key: "569d40708b0736d1ff693104fd7af7fe4842931c"
+    })));
+  }
+  get hostElement() {
+    return o(this);
+  }
+  static get watchers() {
+    return {
+      display: [ "displayChangedHandler" ]
+    };
+  }
+};
+
+c.style = r;
+
+export { c as q2_option };
+//# sourceMappingURL=q2-option.entry.js.map

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

@@ -0,0 +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","componentDidLoad","window","displayChangedHandler","displayChanged","emit","value","render","disabled","disabledGroup","selected","_multiSelectHidden","isDisabled","h","Host","key","tabindex","undefined","type","class"],"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 {\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(: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]):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","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')}\n     * @private\n     */\n    @Prop({ reflect: 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    /** 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.initDisplay();\n    }\n\n    componentDidLoad() {\n        if ('MutationObserver' in window) this.initMutationObserver();\n    }\n\n    // #endregion\n    // #region Watchers\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    render() {\n        const { display, disabled, disabledGroup, selected, _multiSelectHidden } = this;\n        const isDisabled = disabled || disabledGroup;\n\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    // #endregion\n}\n"],"mappings":";;;;AAAA,MAAMA,IAAc;;AACpB,MAAAC,IAAeD;;MCGFE,IAAQ;;;;;;QA4GjBC,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;8BApHpC;;;;;;gBAwCf;;;;;;EA0Bf,oBAAAC;;KACIC,IAAAtB,KAAKmB,sBAAgB,QAAAG,WAAA,aAAAA,EAAEC;IACvBvB,KAAKmB,mBAAmB;;EAG5B,iBAAAK;IACIxB,KAAKS;;EAGT,gBAAAgB;IACI,IAAI,sBAAsBC,QAAQ1B,KAAKW;;;;EAO3C,2BAAMgB;IACF3B,KAAKO,UAAUC,EAAIR,KAAKO;UAClBP,KAAKC;IACXD,KAAK4B,eAAeC,KAAK;MAAEtB,SAASP,KAAKO;MAASuB,OAAO9B,KAAK8B;;;;;EAoClE,MAAAC;IACI,OAAMxB,SAAEA,GAAOyB,UAAEA,GAAQC,eAAEA,GAAaC,UAAEA,GAAQC,oBAAEA,KAAuBnC;IAC3E,MAAMoC,IAAaJ,KAAYC;IAE/B,OACII,EAACC,GAAI;MAAAC,KAAA;MACDC,UAAS;MAAI,iBACEJ,IAAa,SAASK;MAAS,iBAC/B,KAAKP;MAAU,eACjBC,IAAqB,SAASM;MAC3ClC,SAASC,EAAID;OAEZP,KAAKkC,YAAYG,EAAA;MAAAE,KAAA;MAASG,MAAK;QAChCL,EAAA;MAAAE,KAAA;MAAKI,OAAM;OACPN,EAAA;MAAAE,KAAA"}