q2-tecton-elements 1.60.2 → 1.61.0

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

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

package/dist/q2-tecton-elements/q2-stepper-pane.entry.js

@@ -1,6 +1,6 @@
 import { r as e, c as t, h as i, F as s, H as n, g as a } from "./index-CGkHOjh1.js";
 
-import { c as o, n as h, l as c } from "./index-xCuy-dFb.js";
+import { c as o, n as h, l as c } from "./index-LNnzUeDP.js";
 
 const d = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block;position:relative}";
 

package/dist/q2-tecton-elements/q2-stepper-vertical.entry.js

@@ -1,6 +1,6 @@
 import { r as t, c as e, h as a, F as r, g as i } from "./index-CGkHOjh1.js";
 
-import { o as c, a as s, c as n, l as o } from "./index-xCuy-dFb.js";
+import { o as c, a as s, c as n, l as o } from "./index-LNnzUeDP.js";
 
 const l = '*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:grid;grid-template-columns:var(--tct-stepper-vertical-list-width, var(--tct-advanced-stepper-list-width, var(--t-advanced-stepper-list-width, 180px))) 1fr;gap:var(--tct-stepper-vertical-layout-gap, var(--tct-advanced-stepper-layout-gap, var(--t-advanced-stepper-layout-gap, 120px)))}.step-label,.step-child-label{color:var(--comp-btn-label-color);font-size:var(--comp-btn-label-font-size);font-weight:var(--comp-label-font-weight, 400);min-height:1.5em}.step-label{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-stepper-label-line-count, var(--tct-advanced-stepper-label-line-count, var(--t-advanced-stepper-label-line-count, 2)));-webkit-box-orient:vertical}[aria-selected=true] .step-label{font-weight:var(--tct-stepper-vertical-btn-active-font-weight, var(--tct-advanced-stepper-btn-active-font-weight, var(--t-advanced-stepper-btn-active-font-weight, 600)))}[aria-describedby] .step-label{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-stepper-label-line-count, var(--tct-advanced-stepper-label-line-count, var(--t-advanced-stepper-label-line-count, 1)));-webkit-box-orient:vertical}.step-child-label{grid-area:content;color:var(--comp-btn-label-color)}.step-description{color:var(--tct-stepper-vertical-description-color, var(--tct-advanced-stepper-description-color, var(--t-advanced-stepper-description-color, var(--t-textA, rgba(77, 77, 77, 0.77)))));font-size:var(--tct-stepper-vertical-description-font-size, var(--tct-advanced-stepper-description-font-size, var(--t-advanced-stepper-description-font-size, var(--app-font-size-small, 12px))));padding-bottom:0.2em}ul{--comp-top-btn-icon-size:var(--tct-stepper-vertical-btn-icon-size, var(--tct-advanced-stepper-btn-icon-size, var(--t-advanced-stepper-btn-icon-size, 24px)));--comp-btn-icon-size:var(--comp-top-btn-icon-size);--comp-btn-icon-visibility:var(--tct-stepper-vertical-btn-icon-visibility, visible);--comp-btn-content-gap:var(--tct-stepper-vertical-btn-gap, var(--tct-advanced-stepper-btn-gap, var(--t-advanced-stepper-btn-gap, var(--app-scale-3x, 15px))));--comp-btn-label-font-size:var(--tct-stepper-vertical-btn-label-font-size, var(--tct-advanced-stepper-btn-label-font-size, var(--t-advanced-stepper-btn-label-font-size, 16px)));--comp-btn-label-color:var(--tct-stepper-vertical-label-color, var(--tct-advanced-stepper-label-color, var(--t-advanced-stepper-label-color, var(--t-text, #4d4d4d))));--comp-tween:var(--tct-stepper-vertical-tween, var(--tct-advanced-stepper-tween, var(--t-advanced-stepper-tween, var(--app-tween-1, 0.2s ease))));--comp-bullet-bg:var(--tct-stepper-vertical-bullet-active-background, var(--tct-advanced-stepper-bullet-active-bg, var(--t-advanced-stepper-bullet-active-bg, var(--t-primary, #0079c1))));list-style:none;margin:0;padding:0}ul ul{--comp-btn-icon-size:var(--tct-stepper-vertical-child-btn-icon-size, var(--tct-advanced-stepper-child-btn-icon-size, var(--t-advanced-stepper-child-btn-icon-size, 12px)));--comp-btn-content-gap:var(--tct-stepper-vertical-btn-gap, var(--tct-advanced-stepper-btn-gap, var(--t-advanced-stepper-btn-gap, var(--app-scale-2x, 10px))));--comp-btn-label-font-size:var(--tct-stepper-vertical-child-btn-label-font-size, var(--tct-advanced-stepper-child-btn-label-font-size, var(--t-advanced-stepper-child-btn-label-font-size, var(--app-font-size-small, 12px))))}ul ul[aria-hidden=true]{display:none}.step-btn,.step-child-btn{display:grid;grid-template-columns:var(--comp-btn-icon-size) 1fr;gap:var(--comp-btn-content-gap);text-align:var(--tct-stepper-vertical-btn-text-align, var(--tct-advanced-stepper-btn-text-align, var(--t-advanced-stepper-btn-text-align, start)));grid-template-areas:"icon content";align-items:center;width:100%;position:relative;background:transparent;border:0;cursor:pointer;padding:0;transition-property:box-shadow;outline:none}.step-btn[aria-disabled],.step-child-btn[aria-disabled]{cursor:default;--comp-label-font-weight:300;--comp-btn-label-color:var(--tct-stepper-vertical-btn-locked-color, var(--tct-advanced-stepper-btn-locked-color, var(--t-advanced-stepper-btn-locked-color, var(--t-textA, rgba(77, 77, 77, 0.77)))))}.step-btn[aria-selected=true],.step-child-btn[aria-selected=true]{--comp-label-font-weight:600}.step-btn{min-height:var(--tct-stepper-vertical-btn-height, var(--tct-advanced-stepper-btn-height, var(--t-advanced-stepper-btn-height, 40px)));font-size:var(--tct-stepper-vertical-btn-font-size, var(--tct-advanced-stepper-btn-font-size, var(--t-advanced-stepper-btn-font-size, 16px)));--comp-active-color:var(--comp-bullet-bg)}.step-btn.status-complete{--comp-active-color:var(--const-stoplight-success, #0e8a00);--tct-stoplight-success:var(--comp-active-color)}.step-btn.status-error{--comp-active-color:var(--const-stoplight-alert, #d20a0a);--tct-stoplight-warning:var(--comp-active-color)}.step-btn.status-locked{cursor:not-allowed}.step-child-btn{--comp-active-color:var(--comp-bullet-bg);min-height:var(--tct-stepper-vertical-child-btn-height, var(--tct-advanced-stepper-child-btn-height, var(--t-advanced-stepper-child-btn-height, 30px)));padding-left:var(--tct-stepper-vertical-child-btn-left-padding, var(--tct-advanced-stepper-child-btn-left-padding, var(--t-advanced-stepper-child-btn-left-padding, var(--app-scale-2x, 10px))));font-size:var(--tct-stepper-vertical-child-btn-font-size, var(--tct-advanced-stepper-child-btn-font-size, var(--t-advanced-stepper-child-btn-font-size, 12px)));border-left-width:var(--tct-stepper-vertical-child-btn-left-border-width, var(--tct-advanced-stepper-child-btn-left-border-width, var(--t-advanced-stepper-child-btn-left-border-width, 3px)));border-left-style:var(--tct-stepper-vertical-child-btn-left-border-style, var(--tct-advanced-stepper-child-btn-left-border-style, var(--t-advanced-stepper-child-btn-left-border-style, solid)));border-left-color:transparent}.step-child-btn[aria-selected=true]{--comp-btn-label-color:var(--comp-active-color);border-left-color:var(--comp-active-color)}.step-child-btn.status-error{--comp-btn-label-color:var(--const-stoplight-alert, #d20a0a);--comp-active-color:var(--const-stoplight-alert, #d20a0a)}.step-child-btn.status-locked{cursor:not-allowed}.step-content{grid-area:content}.step-icon,.step-bubble,.step-child-icon{visibility:var(--comp-btn-icon-visibility);grid-area:icon;width:var(--comp-btn-icon-size);height:var(--comp-btn-icon-size);line-height:0}.step-icon q2-icon,.step-bubble q2-icon,.step-child-icon q2-icon{width:var(--comp-btn-icon-size);height:var(--comp-btn-icon-size);--tct-stoplight-warning:var(--comp-active-color)}.step-icon,.step-bubble{background:var(--comp-active-color);color:var(--t-base, #ffffff);border-radius:50%}.status-complete .step-icon,.status-error .step-icon,.status-complete .step-bubble,.status-error .step-bubble{background:var(--comp-active-color)}.step-icon q2-icon:before,.step-bubble q2-icon:before{content:"";display:block;background:var(--t-base, #ffffff);position:absolute;width:80%;height:80%;left:11%;top:11%;border-radius:50%}.status-locked .step-icon,.status-locked .step-bubble{background:var(--t-gray-12, #d9d9d9);color:var(--t-text, #4d4d4d)}[aria-selected=true] .step-icon,[aria-selected=true] .step-bubble{box-shadow:0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color)}.step-bubble{display:flex;justify-content:center;align-items:center;line-height:0}.step-child-icon q2-icon{--tct-icon-stroke-primary:var(--comp-active-color);--tct-icon-stroke-secondary:var(--comp-active-color)}[aria-selected=true] .step-child-icon q2-icon{fill:var(--comp-active-color);--tct-icon-stroke-secondary:var(--t-base, #ffffff)}.spacer{height:0;border-left-width:var(--tct-stepper-vertical-child-border-width, var(--tct-advanced-stepaer-child-border-width, var(--t-advanced-stepaer-child-border-width, 1px)));border-left-style:var(--tct-stepper-vertical-child-border-style, var(--tct-advanced-stepper-child-border-style, var(--t-advanced-stepper-child-border-style, solid)));border-left-color:var(--tct-stepper-vertical-child-border-color, var(--tct-advanced-stepper-child-border-color, var(--t-advanced-stepper-child-border-color, var(--t-gray-12, #d9d9d9))));overflow:hidden;margin-left:calc(var(--comp-top-btn-icon-size) / 2);transition:height var(--comp-tween)}.spacer.has-sibling{height:var(--tct-stepper-vertical-spacer-height, var(--tct-advanced-stepper-spacer-height, var(--t-advanced-stepper-spacer-height, var(--app-scale-6x, 30px))))}.spacer ul{opacity:0;transition:opacity var(--comp-tween)}.spacer.is-opening ul,.spacer.is-open ul{display:block;opacity:1 !important}.spacer.is-open{overflow:visible}';
 
@@ -238,8 +238,8 @@ const p = class {
     const {id: s, label: n, status: l} = t;
     const p = e + 1;
     const d = n && `label-${s}`;
-    const v = s === c;
-    const b = l === "locked";
+    const b = s === c;
+    const v = l === "locked";
     const h = !n && o("tecton.element.advancedStepper.childNumber", [ `${p}`, `${r}`, i ]);
     let u;
     if (l === "error") u = "warning-filled";
@@ -252,13 +252,13 @@ const p = class {
       type: "button",
       "aria-labelledby": d,
       "aria-label": h,
-      "aria-selected": `${v}`,
+      "aria-selected": `${b}`,
       id: s,
-      "aria-disabled": b ? "true" : null,
+      "aria-disabled": v ? "true" : null,
       role: "tab",
-      tabIndex: v ? 0 : -1,
-      onKeyDown: t => !b && this.onStepKeyDown(t, s),
-      onClick: t => !b && this.onStepClick(t, s)
+      tabIndex: b ? 0 : -1,
+      onKeyDown: t => !v && this.onStepKeyDown(t, s),
+      onClick: t => !v && this.onStepClick(t, s)
     }, u && a("div", {
       class: "step-child-icon"
     }, a("q2-icon", {
@@ -284,8 +284,8 @@ const p = class {
     const c = e === i.length - 1;
     const {id: s, label: n, description: l, status: p} = t;
     const d = e + 1;
-    const v = s === r;
-    const b = n && `label-${s}`;
+    const b = s === r;
+    const v = n && `label-${s}`;
     const h = p === "locked";
     const u = n && o(n);
     const f = n && l && `description-${s}`;
@@ -295,21 +295,21 @@ const p = class {
     const w = [ "step-btn" ];
     if (p) w.push(`status-${p}`);
     const x = t.children.map((t => t.id));
-    const y = v || x.includes(r);
+    const y = b || x.includes(r);
     return a("li", {
       role: "presentation"
     }, a("button", {
       class: w.join(" "),
       type: "button",
-      "aria-labelledby": b,
+      "aria-labelledby": v,
       "aria-describedBy": f,
       "aria-label": g,
-      "aria-selected": `${v}`,
+      "aria-selected": `${b}`,
       "aria-expanded": !!t.children.length ? `${y}` : null,
       id: s,
       "aria-disabled": h ? "true" : null,
       role: "tab",
-      tabIndex: v ? 0 : -1,
+      tabIndex: b ? 0 : -1,
       onKeyDown: t => !h && this.onStepKeyDown(t, s),
       onClick: t => !h && this.onStepClick(t, s)
     }, m ? a("div", {
@@ -320,7 +320,7 @@ const p = class {
       class: "step-bubble"
     }, d), n && a("div", null, a("div", {
       class: "step-label",
-      id: b
+      id: v
     }, u), l && a("div", {
       class: "step-description",
       id: f
@@ -328,15 +328,15 @@ const p = class {
   }
   render() {
     return a(r, {
-      key: "8e1964e9a8eb520f38243df45d5c0c3e5438991f"
+      key: "49920bed7d36212b406917d5fccdc7c1de027ccc"
     }, a("ul", {
-      key: "987e124cd272835c43d478e6cfdab8c596abaaed",
+      key: "b7a7bd7c0805012633d6018ce295bd0b8d8835af",
       role: "tablist"
     }, this.structuredPanes.map(((t, e) => this.renderStepBtn(t, e)))), a("div", {
-      key: "c9ce83cf5852a20a4131eb513a0422ff5f6a7bb9",
+      key: "5e27cbe47b487fbf3f23c43a9cd34fda06e36011",
       role: "list"
     }, a("slot", {
-      key: "a85f18a96e01a2a722bb2528f60555cd97f0ebe2"
+      key: "a3748ed9da0f8fcb2335fb0c518aada6c4e0b9ae"
     })));
   }
   get hostElement() {

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

@@ -1,6 +1,6 @@
 import { r as t, c as e, h as r, F as i, g as o } from "./index-CGkHOjh1.js";
 
-import { o as a, a as s, l } from "./index-xCuy-dFb.js";
+import { o as a, a as s, l } from "./index-LNnzUeDP.js";
 
 const c = '*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block;position:relative}ul{--comp-bullet-background:var(--tct-stepper-bullet-active-background, var(--tct-stepper-bullet-active-bg, var(--t-stepper-bullet-active-bg, var(--t-primary, #0079c1))));--comp-divider-color:var(--tct-stepper-bullet-active-divider-color, var(--comp-bullet-background));--comp-bullet-font-color:var(--tct-stepper-bullet-active-font-color, var(--t-stepper-bullet-active-font-color, var(--t-primary-font-color, #ffffff)));--comp-bullet-size:var(--tct-stepper-btn-icon-size, var(--t-stepper-btn-icon-size, 24px));--comp-bullet-gap:var(--tct-stepper-btn-gap, var(--t-stepper-btn-gap, var(--app-scale-3x, 15px)));--comp-bullet-font-size:var(--tct-stepper-btn-label-font-size, var(--t-stepper-btn-label-font-size, 16px));--comp-step-width:var(--tct-stepper-step-width, var(--t-stepper-step-width, var(--t-stepper-step-width, 80px)));--comp-step-gap:var(--tct-stepper-step-gap, var(--t-stepper-step-gap, 5px));--comp-btn-icon-size:var(--tct-stepper-btn-icon-size, var(--t-stepper-btn-icon-size, 24px));--comp-btn-label-font-size:var(--tct-stepper-btn-label-font-size, var(--t-stepper-btn-label-font-size, 16px));--comp-btn-icon-visibility:var(--tct-stepper-btn-icon-visibility, visible);--comp-tween:var(--tct-stepper-tween, var(--t-stepper-tween, var(--app-tween-1, 0.2s ease)));overflow-x:auto;display:flex;justify-content:center;list-style:none;padding:0;padding:var(--tct-stepper-list-padding, var(--t-stepper-list-padding, 2px));margin:0;gap:var(--comp-step-gap);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}ul::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}ul::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}ul::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.has-scroll ul{justify-content:unset}li{min-height:var(--tct-stepper-min-height, var(--t-stepper-min-height, 50px));flex:0 0 auto;position:relative;width:var(--comp-step-width);text-align:center;max-width:150px;min-width:80px}.step-btn{position:relative;background:transparent;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;height:calc(100% - 4px);width:100%;transition:var(--comp-tween);padding:0;transition-property:box-shadow;outline:none;margin-top:2px;--comp-active-color:var(--comp-bullet-background);--comp-default-box-shadow:0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color);--comp-bullet-active-box-shadow:var(--tct-stepper-bullet-active-box-shadow, var(--comp-default-box-shadow))}.step-btn.status-complete{--comp-active-color:var(--const-stoplight-success, #0e8a00);--comp-default-box-shadow:0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color);--comp-bullet-active-box-shadow:var(--tct-stepper-bullet-complete-box-shadow, var(--comp-default-box-shadow));--tct-stoplight-success:var(--comp-active-color)}.step-btn.status-error{--comp-active-color:var(--const-stoplight-alert, #d20a0a);--comp-default-box-shadow:0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color);--comp-bullet-active-box-shadow:var(--tct-stepper-bullet-error-box-shadow, var(--comp-default-box-shadow));--tct-stoplight-warning:var(--comp-active-color)}.step-btn[aria-disabled=true]{cursor:not-allowed}.step-btn[aria-disabled=true],.step-btn[aria-disabled=true]+.step-divider{--comp-bullet-font-color:var(--tct-stepper-bullet-disabled-font-color, var(--tct-stepper-bullet-inactive-font-color, var(--t-stepper-bullet-inactive-font-color, var(--t-text, #4d4d4d))));--comp-bullet-background:var(--tct-stepper-bullet-disabled-background, var(--tct-stepper-bullet-inactive-background, var(--tct-stepper-bullet-inactive-bg, var(--t-stepper-bullet-inactive-bg, var(--t-gray-12, #d9d9d9)))));--comp-divider-color:var(--tct-stepper-bullet-disabled-divider-color, var(--comp-bullet-background));--comp-bullet-inactive-box-shadow:var(--tct-stepper-bullet-disabled-box-shadow, none)}.step-icon,.step-bubble{visibility:var(--comp-btn-icon-visibility);display:flex;justify-content:center;align-items:center;line-height:0;margin:var(--comp-bullet-gap) auto;color:var(--comp-bullet-font-color);width:var(--comp-btn-icon-size);height:var(--comp-btn-icon-size);min-height:var(--comp-btn-icon-size);font-size:var(--comp-bullet-font-size);transition:var(--comp-tween);transition-property:background, color;border-radius:50%;position:relative;box-shadow:var(--comp-bullet-inactive-box-shadow)}.step-icon q2-icon,.step-bubble q2-icon{--tct-icon-fill:var(--comp-active-color)}.step-icon q2-icon:before,.step-bubble q2-icon:before{content:"";display:block;background:var(--comp-bullet-font-color);position:absolute;width:80%;height:80%;left:11%;top:11%;border-radius:50%}.status-complete .step-icon,.status-error .step-icon,.status-complete .step-bubble,.status-error .step-bubble{background:var(--comp-active-color)}[aria-selected=true] .step-icon,[aria-selected=true] .step-bubble{box-shadow:var(--comp-bullet-active-box-shadow);font-weight:var(--tct-stepper-bullet-active-font-weight, var(--t-stepper-bullet-active-font-weight, 600))}.step-bubble{background:var(--comp-bullet-background)}.step-divider{width:calc(var(--comp-step-width) - var(--comp-step-gap) - var(--comp-bullet-gap) - var(--comp-bullet-size));top:calc(var(--comp-bullet-size) / 2 + var(--comp-bullet-gap));left:calc(var(--comp-step-width) * -0.5 + var(--comp-step-gap) + var(--comp-bullet-gap));border:0;border-top:1px solid var(--comp-divider-color);height:0;position:absolute;margin:0;transition:border var(--comp-tween)}.step-container{position:relative}.step-label{color:var(--tct-stepper-label-color, var(--tct-stepper-title-color, var(--t-stepper-title-color, var(--t-text, #4d4d4d))));font-size:var(--tct-stepper-label-font-size, var(--tct-stepper-title-font-size, var(--t-stepper-title-font-size, var(--app-font-size-small, 12px))));line-height:var(--tct-stepper-label-line-height, 1.5em);text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-stepper-label-line-count, 2);-webkit-box-orient:vertical}[aria-selected] .step-label{font-weight:var(--tct-stepper-active-font-weight, var(--t-stepper-active-font-weight, 600))}[aria-describedby] .step-label{-webkit-line-clamp:var(--tct-stepper-label-line-count, 1)}.step-description{color:var(--tct-stepper-description-color, var(--t-stepper-description-color, var(--t-textA, rgba(77, 77, 77, 0.77))));font-size:var(--tct-stepper-description-font-size, var(--t-stepper-description-font-size, var(--app-font-size-small, 12px)));text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-stepper-description-line-count, 4);-webkit-box-orient:vertical;padding-bottom:0.2em}.step-description .ellipsize{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:var(--comp-step-width);display:block}.gradient-left,.gradient-right{z-index:1;position:absolute;top:0;height:100%;width:18px}.gradient-left{background-image:linear-gradient(to left, var(--t-base-a0, rgba(255, 255, 255, 0)), var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%, var(--t-base, #ffffff) 100%);left:0}.gradient-right{background-image:linear-gradient(to right, var(--t-base-a0, rgba(255, 255, 255, 0)), var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%, var(--t-base, #ffffff) 100%);right:0}.btn-left,.btn-right{--tct-icon-size:18px;--tct-btn-icon-hover-background:transparent;--tct-btn-icon-width:22px;--tct-icon-stroke-primary:var(--tct-stepper-scroll-arrow-color, var(--t-stepper-scroll-arrow-color, var(--t-text, #4d4d4d)));position:absolute;top:calc(50% - 22px);z-index:2}.btn-left q2-icon,.btn-right q2-icon{--tct-icon-stroke-width:3}.btn-left{left:0}.btn-right{right:0}';
 
@@ -286,50 +286,50 @@ const n = class {
     const s = [ "step-container" ];
     if (e) s.push("has-scroll");
     return r(i, {
-      key: "510db7bf1074c0091a95a72459fce4cd5af59172"
+      key: "6ff16d96b30c6b5cf5c05ae66d931485d7d69f9b"
     }, r("div", {
-      key: "5d1fe22ad53787b636f3aaaaa95408f78969e68d",
+      key: "7eb7c60585e3a4eb33281b9fac554a51d7f4bc7f",
       class: s.join(" ")
     }, e && r(i, {
-      key: "4fc30af4cd67e403fe1ac3ec2c134e75920d080a"
+      key: "f3528aa64c0764233f1120849e34f85fd3cf196f"
     }, r("div", {
-      key: "c0ef4849f5e0886b2167d50c7b7612cc1d9c45c2",
+      key: "56ee6495da84bdeac44e522fd768c27df42d2429",
       class: "gradient-left",
       hidden: !o
     }), r("div", {
-      key: "69fa4d5a7c6b3ccb621486715286ab86835018de",
+      key: "6328f797de6c47186280031b68e1112d3e53ab86",
       class: "gradient-right",
       hidden: !a
     }), r("q2-btn", {
-      key: "65eb8e5c5016fd9095c5faeef4896af219364843",
+      key: "3c430d952e405a4d003b99ea8736db40192a6e0d",
       class: "btn-left",
       hideLabel: true,
       hidden: !this.showScrollLeft,
       label: l("tecton.element.stepper.scrollLeft"),
       onClick: () => this.onScrollBtnClick("left")
     }, r("q2-icon", {
-      key: "e16b1631da75bc97de28f29dcec2aa1cb6aaa54a",
+      key: "56d8698b0c42e7f504f5b4d7683cf5ba2d348acb",
       type: "chevron-left"
     })), r("q2-btn", {
-      key: "471abd18367a0361a708b98653c70c095f938e58",
+      key: "84ac5f504762e6fdb0c694c7d1c6f5948e2346a8",
       class: "btn-right",
       hideLabel: true,
       hidden: !this.showScrollRight,
       label: l("tecton.element.stepper.scrollRight"),
       onClick: () => this.onScrollBtnClick("right")
     }, r("q2-icon", {
-      key: "613ca7d4eabc76e744c77cce736aa03a6e4ea6ad",
+      key: "95cb395f53e7108491a17d42b2cbcd93ea717b58",
       type: "chevron-right"
     }))), r("ul", {
-      key: "c1ca9c8922c9e676b3146827ddd90065692fc007",
+      key: "c5229e86169d0a1e66d0b8adf28c47bfcabd247a",
       onScroll: this.checkScrollState,
       ref: t => this.listElement = t,
       role: "tablist"
     }, t > 0 && [ ...Array(t).keys() ].map((t => this.renderStepBtn(t))))), r("div", {
-      key: "e514c5977cacfc7a360476fd8d1b872be81e55f7",
+      key: "bdd9fceab93aa251d08b27f748c0ca96f3a86ffe",
       role: "list"
     }, r("slot", {
-      key: "960486c8149a7c43672330dde7119dc92bcfbf02",
+      key: "7b8ade0195934e09587aaf3be6ecb82b1e4bc729",
       onSlotchange: () => this.onSlotChange()
     })));
   }