q2-tecton-elements 1.47.0 → 1.48.1-alpha.0

package/dist/q2-tecton-elements/p-8a8d51f1.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["q2RadioGroupCss","Q2RadioGroupStyle0","Q2RadioGroup","this","_id","createGuid","onMutationObserved","valueUpdated","value","nameUpdated","disabledUpdated","readonlyUpdated","tileLayoutUpdated","tileLayout","onInnerRadioChange","event","stopImmediatePropagation","readonly","change","emit","detail","checkedRadioExists","firstCheckedRadio","radioElements","find","radio","checked","undefined","length","tabIndex","inputId","Array","from","hostElement","querySelectorAll","componentWillLoad","handleDeprecatedTilelayout","tilelayout","componentDidLoad","observer","MutationObserver","observe","childList","mutationObserver","overrideFocus","newVal","forEach","removeAttribute","name","groupDisabled","disabled","groupReadonly","groupTileLayout","setValue","click","onHostElementChange","target","onchange","delegateFocus","isEventFromElement","querySelector","dispatchEvent","FocusEvent","keydownHandler","currentValue","getAttribute","index","findIndex","el","sign","key","Math","max","min","preventDefault","render","showLabel","label","optional","hasError","showLabelRow","h","Fragment","class","labelDOM","type","onChange","inputDom","tileAlignment","alignment","includes"],"sources":["src/components/q2-radio-group/q2-radio-group.scss?tag=q2-radio-group&encapsulation=shadow","src/components/q2-radio-group/q2-radio-group.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    --comp-default-radio-group-margin: #{var-list(var-prefixer(radio-group-margin-top), --app-scale-5x, 25px) 0\n        var-list(var-prefixer(radio-group-margin-bottom), --app-scale-5x, 25px)};\n    display: block;\n    margin: var-list(--tct-radio-group-margin, --comp-default-radio-group-margin);\n}\n\nfieldset {\n    padding: 0;\n    margin: 0;\n    border: 0;\n    position: relative;\n}\n\n.label-row {\n    display: grid;\n    grid-template-columns: 1fr 24px;\n    grid-template-areas: 'label icon';\n    gap: var-list(--app-scale-1x, 5px);\n\n    q2-icon {\n        grid-area: icon;\n        margin-top: -2px;\n        margin-bottom: -2px;\n    }\n}\n\n.group-legend {\n    font-weight: 600;\n}\n\n.optional-tag {\n    margin-left: var-list(var-prefixer(input-label-optional-margin-left), --tct-scale-1, --app-scale-1x, 5px);\n    color: var-list(\n        var-prefixer(input-label-optional-font-color),\n        --t-textA,\n        --t-a11y-gray-color,\n        rgba(77, 77, 77, 0.77)\n    );\n    font-size: var-list(var-prefixer(input-label-optional-font-size), 12px);\n    font-weight: var-list(var-prefixer(input-label-optional-font-weight), 400);\n}\n\n.tile-container {\n    &,\n    .options-container {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-wrap: wrap;\n        flex-grow: 1;\n    }\n}\n\n.options-container {\n    --comp-default-margin: #{var-list(--app-scale-1x, 5px)} 0;\n    --comp-options-margin: #{var-list(var-prefixer(radio-group-options-margin), --comp-default-margin, unquote('5px 0'))};\n    margin: var(--comp-options-margin);\n    padding: var-list(var-prefixer(radio-group-options-padding), --app-scale-0x, 0px);\n    border-width: 1px;\n    border-color: transparent;\n    border-style: solid;\n    border-radius: var-list(--tct-border-radius-1, --app-border-radius-1, 2px);\n\n    :host([has-error]) & {\n        border-color: var-list(--tct-input-error-border-color, --const-stoplight-alert, #d20a0a);\n    }\n    :host([has-error='false']) & {\n        border-color: transparent;\n    }\n}\n\n.tile-container {\n    &.left {\n        justify-content: start;\n    }\n    &.right {\n        justify-content: end;\n    }\n\n    .options-container {\n        gap: var-list(var-prefixer(radio-group-tile-gap), --app-scale-2x, 10px);\n        justify-content: inherit;\n    }\n}\n","import {\n    Component,\n    Prop,\n    Element,\n    h,\n    Listen,\n    EventEmitter,\n    Event,\n    ComponentInterface,\n    Watch,\n    Fragment,\n    Method,\n} from '@stencil/core';\nimport { createGuid, isEventFromElement, overrideFocus, labelDOM } from 'src/utils';\n\n@Component({ tag: 'q2-radio-group', shadow: true, styleUrl: 'q2-radio-group.scss' })\nexport class Q2RadioGroup implements ComponentInterface {\n    /** Determines if all radios in the group are put into a `disabled` state. */\n    @Prop({ reflect: true }) disabled: boolean = false;\n\n    /** Determines if the component should display in an errant state. */\n    @Prop({ reflect: true }) hasError: boolean = false;\n\n    /**\n     * Hide's the group's `<label>` element from view.\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n\n    /**\n     * Text for the fieldset legend describing the radio group.\n     * @localizable\n     */\n    @Prop({ reflect: true }) label: string;\n\n    /** Identifier which ties all radios together for accessibility and DOM selection. */\n    @Prop({ reflect: true }) name: string;\n\n    /** Appends \"(optional)\" to the group label, and sets `aria-required` on the nested input tag to `false`. */\n    @Prop({ reflect: true }) optional: boolean;\n\n    /** Determines if all radios in the group can be focused, but not interacted with. */\n    @Prop({ reflect: true }) readonly: boolean;\n\n    /** Provides alignment direction for tile-style radio group. */\n    @Prop({ reflect: true }) tileAlignment: 'left' | 'center' | 'right' = 'center';\n\n    /** Show the radio group as a horizontal set of tiles. */\n    @Prop({ reflect: true, mutable: true }) tileLayout: boolean;\n\n    /** The `value` of the currently selected `q2-radio` within the `q2-radio-group`. */\n    @Prop({ mutable: true }) value: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) tilelayout: boolean;\n\n    @Element() hostElement: HTMLElement;\n    _id: string = `radio-group-${createGuid()}`;\n    mutationObserver: MutationObserver;\n\n    get inputId() {\n        return this._id;\n    }\n\n    get radioElements() {\n        return Array.from(this.hostElement.querySelectorAll('q2-radio')) as HTMLQ2RadioElement[];\n    }\n\n    onMutationObserved = () => {\n        this.valueUpdated(this.value);\n        this.nameUpdated();\n        this.disabledUpdated();\n        this.readonlyUpdated();\n        this.tileLayoutUpdated(this.tileLayout);\n    };\n\n    onInnerRadioChange = (event: CustomEvent) => {\n        event.stopImmediatePropagation();\n        if (this.readonly) return;\n\n        this.change.emit({ value: event.detail.value });\n    };\n\n    checkedRadioExists = () => {\n        // Returns first checked individual q2-radio or undefined if none are set to checked={true}\n        const firstCheckedRadio = this.radioElements.find(radio => radio.checked === true) || undefined;\n\n        // Changes radio-group[\"value\"] if inital value is not set and if a any individual q2-radio is checked\n        if (!this.value && !!firstCheckedRadio) {\n            this.value = firstCheckedRadio.value;\n        } else if (!this.value && !firstCheckedRadio) {\n            // if no radios are meant to be checked, then assign first radio tabIndex of 0\n            if (this.radioElements.length) this.radioElements[0].tabIndex = 0;\n        }\n    };\n\n    /////// LIFECYCLE HOOK ///////\n    componentWillLoad() {\n        this.checkedRadioExists();\n        this.onMutationObserved();\n        this.handleDeprecatedTilelayout(this.tilelayout);\n    }\n\n    componentDidLoad() {\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true });\n        this.mutationObserver = observer;\n        overrideFocus(this.hostElement);\n        this.checkedRadioExists();\n    }\n\n    /////// OBSERVERS ///////\n\n    @Watch('value')\n    valueUpdated(newVal: string) {\n        this.radioElements.forEach(radio => {\n            radio.checked = newVal === radio.value;\n            // Removes checked attribute from trailing radios, if multiple individual radio's are intially checked (checked={true}) at componentDidLoad\n            if (!radio.checked) {\n                radio.removeAttribute('checked');\n                radio.tabIndex = -1;\n            } else if (radio.checked) {\n                radio.tabIndex = 0;\n            }\n        });\n    }\n\n    @Watch('name')\n    nameUpdated() {\n        this.radioElements.forEach(radio => {\n            radio.name = this.name || this._id;\n        });\n    }\n\n    @Watch('disabled')\n    disabledUpdated() {\n        this.radioElements.forEach(radio => {\n            radio.groupDisabled = this.disabled;\n        });\n    }\n\n    @Watch('readonly')\n    readonlyUpdated() {\n        const readonly = this.readonly;\n        this.radioElements.forEach(radio => (radio.groupReadonly = readonly));\n    }\n\n    @Watch('tilelayout')\n    handleDeprecatedTilelayout(tilelayout: boolean) {\n        if (typeof tilelayout !== 'boolean') return;\n        this.tileLayout = tilelayout;\n        this.tilelayout = undefined;\n    }\n\n    @Watch('tileLayout')\n    tileLayoutUpdated(tileLayout: boolean) {\n        this.radioElements.forEach(radio => {\n            radio.groupTileLayout = tileLayout;\n        });\n    }\n\n    /// Methods ///\n    /**\n     * Emulates clicking the `<q2-radio>` option with the provided value.\n     *\n     * @testOnly\n     */\n    @Method()\n    setValue(value: string) {\n        this.radioElements.forEach(radio => {\n            if (value !== radio.value) return;\n            radio.click();\n        });\n    }\n\n    /////// HOST ELEMENT EVENTS ///////\n\n    /**\n     * Emitted when the value of the radio group changes.\n     * @legacyEvent\n     */\n    @Event() change: EventEmitter<{ value: string }>;\n\n    @Listen('change')\n    onHostElementChange(event: CustomEvent) {\n        if (event.target === this.hostElement) {\n            if (!this.hostElement.onchange) {\n                this.value = event.detail.value;\n            }\n        }\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        const radio = this.hostElement.querySelector('q2-radio[checked]') || this.hostElement.querySelector('q2-radio');\n        radio?.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    @Listen('keydown')\n    keydownHandler(event: KeyboardEvent) {\n        const currentValue = (event.target as HTMLElement).getAttribute('value') || this.value;\n        let index = this.radioElements.findIndex(\n            el => el === event.target || (el as HTMLElement).getAttribute('value') === currentValue\n        );\n        let sign = 0;\n        switch (event.key) {\n            case 'ArrowLeft':\n            case 'ArrowUp':\n                sign = -1;\n                break;\n\n            case 'ArrowRight':\n            case 'ArrowDown':\n                sign = 1;\n                break;\n        }\n\n        if (index === -1 || sign === 0) {\n            return;\n        }\n        index += sign;\n        index = sign < 0 ? Math.max(0, index) : Math.min(this.radioElements.length - 1, index);\n        event.preventDefault();\n        if (!this.readonly) {\n            this.value = this.radioElements[index].value;\n        }\n        this.radioElements[index].dispatchEvent(new FocusEvent('focus'));\n    }\n\n    render() {\n        const showLabel = this.label || this.optional || this.readonly;\n        const { hasError } = this;\n        const showLabelRow = showLabel || hasError;\n        return (\n            <Fragment>\n                {showLabelRow && (\n                    <div class=\"label-row\">\n                        {showLabel && <div class=\"group-legend\">{labelDOM(this)}</div>}\n                        {hasError && (\n                            <q2-icon\n                                type=\"error\"\n                                test-id=\"iconError\"\n                            ></q2-icon>\n                        )}\n                    </div>\n                )}\n                <fieldset\n                    onChange={this.onInnerRadioChange}\n                    aria-invalid={`${this.hasError}`}\n                >\n                    {showLabel && <legend class=\"sr\">{labelDOM(this)}</legend>}\n                    {this.inputDom()}\n                </fieldset>\n            </Fragment>\n        );\n    }\n\n    inputDom() {\n        if (this.tileLayout) {\n            const { tileAlignment } = this;\n            const alignment = ['left', 'center', 'right'].includes(tileAlignment) ? tileAlignment : 'center';\n            return (\n                <div class={`tile-container ${alignment}`}>\n                    <div class=\"options-container\">\n                        <slot />\n                    </div>\n                </div>\n            );\n        } else {\n            return (\n                <div class=\"options-container\">\n                    <slot />\n                </div>\n            );\n        }\n    }\n}\n"],"mappings":"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"}

package/dist/q2-tecton-elements/p-8e60bcaa.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as i,g as s}from"./p-a5f18e27.js";import{l as o,h as l,o as n,w as r,g as a,i as c,j as d}from"./p-84190698.js";import{s as h,a as p}from"./p-780a1d0e.js";const u="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.q2-element-dropdown{display:none;position:absolute;background-color:var(--app-white, #ffffff);color:var(--t-text, #4d4d4d);left:0;width:100%;z-index:100;margin-top:1px;box-shadow:var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3));height:0;overflow:hidden;opacity:0;visibility:hidden;transition:opacity var(--app-tween-1, 0.2s ease);border-radius:var(--tct-dropdown-border-radius, --t-dropdown-border-radius, 0);--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, 3px)));--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}.q2-element-dropdown::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.q2-element-dropdown::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown.sizable{display:block;height:auto}.dropdown-open .q2-element-dropdown{display:block;height:auto;overflow:auto;opacity:1;visibility:visible}:host([alignment=right]) .q2-element-dropdown{left:auto;right:0}:host([block]) q2-btn,:host([block]){display:block}:host{--comp-default-select-margin:var(--tct-select-margin-top, var(--t-select-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-select-margin-bottom, var(--t-select-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-select-margin, var(--comp-default-select-margin))}.q2-select-container{position:relative;display:block}.q2-select-input{margin:0;--tct-input-min-height:var(--tct-select-input-min-height, var(--t-select-input-min-height));--tct-input-max-height:var(--tct-select-input-max-height, var(--t-select-input-max-height, none))}::slotted([slot=_selected-display]){width:100%;min-height:var(--comp-selected-display-height, 44px)}.custom-display-content{position:absolute;bottom:0;left:calc(var(--tct-scale-2, var(--app-scale-2x, 10px)) + 1px);height:44px;width:calc(100% - 34px - var(--tct-scale-3, var(--app-scale-3x, 15px)));overflow:hidden;cursor:pointer;transition:left var(--tct-tween-2, var(--app-tween-1, 0.2s ease))}.custom-display-content:not([hidden]){display:flex;align-items:center}.is-searchable.is-focused .custom-display-content,.is-searchable .custom-display-content:active{left:calc(var(--tct-scale-3, var(--app-scale-3x, 15px)) + 1px)}.has-error .custom-display-content{width:calc(100% - 68px - var(--tct-scale-3, var(--app-scale-3x, 15px)))}.popover-content{display:flex;flex-direction:column-reverse}.popover-bottom-container{position:sticky;bottom:0;z-index:5}.popover-top-container{position:sticky;top:0;z-index:5}.popover-top-container .multi-select-header{padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-2, var(--app-scale-2x, 10px));background:var(--app-white);display:flex;gap:var(--app-scale-2x, 10px);align-items:center}.popover-top-container .multi-select-header fieldset{margin:0;padding:0;border:0;display:flex;gap:var(--app-scale-2x, 10px)}.popover-top-container .multi-select-header legend{padding:0;float:left}.popover-top-container .multi-select-header label{cursor:pointer;padding:var(--tct-select-multi-select-option-padding, var(--t-select-multi-select-option-padding, var(--tct-btn-badge-padding, var(--t-btn-badge-padding, 2px 5px))));font-size:var(--tct-select-multi-select-option-font-size, var(--t-select-multi-select-option-font-size, var(--tct-btn-badge-font-size, var(--t-btn-badge-font-size, inherit))));border-radius:var(--tct-select-multi-select-option-radius, var(--t-select-multi-select-option-radius, var(--tct-btn-badge-border-radius, var(--t-btn-badge-border-radius, var(--app-border-radius-1, 3px)))));background:var(--tct-select-multi-select-option-background, var(--tct-select-multi-select-option-bg, var(--t-select-multi-select-option-bg, var(--tct-badge-background, var(--tct-btn-badge-bg, var(--t-btn-badge-bg, transparent))))));color:var(--tct-select-multi-select-option-color, var(--t-select-multi-select-option-color, var(--tct-btn-badge-font-color, var(--t-btn-badge-font-color, inherit))))}.popover-top-container .multi-select-header label:hover{background:var(--tct-select-multi-select-option-hover-background, var(--tct-select-multi-select-option-hover-background-color, var(--t-select-multi-select-option-hover-background-color, var(--tct-btn-badge-hover-bg, var(--t-btn-badge-hover-bg, var(--tct-gray-14, var(--t-gray-14, var(--app-gray-l3, #f2f2f2))))))));color:var(--tct-select-multi-select-option-hover-color, var(--tct-select-multi-select-option-color, var(--t-select-multi-select-option-color, var(--tct-btn-badge-hover-font-color, var(--t-btn-badge-hover-font-color, var(--tct-gray-5, var(--t-gray-5, var(--app-gray-d2, #404040))))))))}.popover-top-container .multi-select-header input:checked+label,.popover-top-container .multi-select-header input:checked+label:enabled:hover{background:var(--tct-select-multi-select-option-active-background, var(--tct-select-multi-select-option-active-background-color, var(--t-select-multi-select-option-active-background-color, var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e)))));color:var(--tct-select-multi-select-option-active-color, var(--t-select-multi-select-option-active-color, var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--app-white, #ffffff)))))}.popover-top-container .multi-select-header input:disabled+label{opacity:var(--tct-select-multi-select-option-disabled-opacity, var(--t-select-multi-select-option-disabled-opacity, var(--tct-btn-disabled-opacity, var(--t-btn-disabled-opacity, var(--app-disabled-opacity, 0.4)))));cursor:not-allowed}.popover-top-container .multi-select-header input:focus+label{box-shadow:var(--const-double-focus-ring)}";const v=u;const b=class{constructor(i){t(this,i);this.change=e(this,"change",7);this.input=e(this,"input",7);var s;this.scheduledAfterRender=[];this.showSelectedOptions=()=>{this.showSelected=true};this.showAllOptions=()=>{this.showSelected=false};this.onMutationObserved=()=>{const{hostElement:t,hasPopoverTop:e,hasPopoverBottom:i}=this;const s=t.querySelector(".custom-display-content");const o=t.shadowRoot.querySelector('slot[name="q2-select-display"]');const l=!!o?o.assignedNodes().length>0:s.children.length>0;if(this.hasCustomDisplay!==l){this.hasCustomDisplay=l}const n=t.shadowRoot.querySelector('slot[name="popover-top"]');const r=n.assignedNodes().length>0;if(e!==r){this.hasPopoverTop=r}const a=t.shadowRoot.querySelector('slot[name="popover-bottom"]');const c=a.assignedNodes().length>0;if(i!==c){this.hasPopoverBottom=c}this.checkSelectedOptions()};this.onOptionListChange=t=>{t.stopPropagation();const{values:e}=t.detail;if(e.length===0)this.showAllOptions();this.handleSelectionChanges(t.detail)};this.onPopoverState=({detail:{open:t,action:e}})=>{if(!t||this.searchText){if(e!=="select"){this.optionList.setActiveElement(null)}this.inputField.focus()}if(this.open===t)return;this.open=t};this.inputKeydownHandler=t=>{if(this.readonly||this.disabled)return;const e=t.key;const i=this.hasPopoverTop||this.hasPopoverBottom;const s=e==="Tab"&&t.shiftKey;if(i&&(e==="Tab"||e==="Enter"||s))return;if(h(this,t)){return this.executeActionSheet(t)}const o=["ArrowDown","ArrowUp","PageDown","PageUp","Home","End","Escape","Tab"];if(this.searchable&&(e===" "||e==="Enter")&&this.inputField.value==""){t.preventDefault();if(!this.open)this.openDropdownWithoutActiveElement()}if(this.searchable&&!o.includes(e))return;if(this.shouldClearSearchText(t))this.clearSearchText();if(e===" ")t.preventDefault();this.optionList.handleExternalKeydown(t)};this.visibilityToggleKeyDown=t=>{const e=t.key;const i=e==="Tab"&&t.shiftKey;const s=["ArrowLeft","ArrowRight","ArrowUp","ArrowDown"].includes(e);if(s)t.stopPropagation();if(i){t.stopPropagation();if(this.hasPopoverTop)return;this.optionList.setDefaultActiveElement()}};this.inputClickHandler=async t=>{t.stopPropagation();if(h(this)){return this.executeActionSheet(t)}this.toggleDropdown();this.focusInput()};this.inputInputHandler=t=>{t.stopPropagation();const e=t.detail.value;const i=!!this.value;if(i)this.clearValue();if(!this.open)this.openDropdownWithoutActiveElement();this.prioritizeSearch=true;this.searchText=e;this.input.emit({query:e})};this.inputFocusHandler=()=>{this.inputFocused=true};this.inputBlurHandler=()=>{this.inputFocused=false};this.inputChangeHandler=t=>{t.stopPropagation()};this.clickedElsewhere=t=>{const e=t.target;if(e.localName!=="click-elsewhere")return;t.stopPropagation()};this.onCustomDisplayClick=t=>{t.stopPropagation();this.focusInput();this.toggleDropdown()};this.disabled=false;this.errors=undefined;this.hideLabel=undefined;this.clearable=undefined;this.hoist=!!((s=window.Tecton)===null||s===void 0?void 0:s.useActionSheets);this.invalid=undefined;this.label=undefined;this.listLabel=o("tecton.element.select.listLabel");this.minRows=3;this.multilineOptions=false;this.multiple=false;this.optional=false;this.placeholder=undefined;this.popDirection=undefined;this.popoverMode=null;this.readonly=false;this.searchable=false;this.selectedOptions=[];this.value=undefined;this.ariaLabel=undefined;this.open=false;this.showSelected=false;this.searchText="";this.hasCustomDisplay=false;this.hasPopoverTop=false;this.hasPopoverBottom=false;this.inputFocused=false;this.statusMessage=undefined;this.prioritizeSearch=false;this.structuredSelectedOptions=[]}componentWillLoad(){l(this);this.buildStructuredSelectedOptions();this.handleMultilineOptionsUpdate(this.multilineOptions,false)}componentDidLoad(){const t=new MutationObserver(this.onMutationObserved);t.observe(this.hostElement,{childList:true,subtree:true});this.mutationObserver=t;this.onMutationObserved();n(this.hostElement);setTimeout((()=>this.checkSelectedDisplay()),0)}componentDidRender(){setTimeout((()=>{this.scheduledAfterRender.forEach((t=>t()));this.scheduledAfterRender=[]}),25)}disconnectedCallback(){var t;(t=this.mutationObserver)===null||t===void 0?void 0:t.disconnect();this.mutationObserver=null}get innerInputField(){var t,e;return(e=(t=this.inputField)===null||t===void 0?void 0:t.shadowRoot)===null||e===void 0?void 0:e.querySelector(".input-field")}get innerInputContainer(){var t,e;return(e=(t=this.inputField)===null||t===void 0?void 0:t.shadowRoot)===null||e===void 0?void 0:e.querySelector(".input-container")}get badgeValue(){var t,e;if(!this.multiple)return null;const i=(e=(t=this.selectedOptions)===null||t===void 0?void 0:t.length)!==null&&e!==void 0?e:0;if(this.open&&this.searchable)return i?`${i}`:null;else return i>1?`+${i-1}`:null}get popoverMinHeight(){const{minRows:t}=this;const e=this.hostElement.querySelector("q2-option:not([hidden])");let i=e&&window.getComputedStyle(e).minHeight;if(!i||i==="0px")i="44px";return t*parseInt(i)}get selectedDisplay(){if(this.prioritizeSearch||this.searchText)return this.searchText;if(this.hasCustomDisplay)return"";return this.multiple?this.calculateMultiSelectSelectedDisplay():this.calculateSingleSelectSelectedDisplay()}get selectedDisplaySlot(){return this.hostElement.querySelector('[slot="_selected-display"]')}get firstSelectedValue(){var t;return this.multiple?(t=this.selectedOptions)===null||t===void 0?void 0:t[0]:this.value}get firstSelectedOptionElement(){const{firstSelectedValue:t}=this;return t?this.optionElements.find((({value:e})=>e===t)):null}get optionElements(){return Array.from(this.hostElement.querySelectorAll("q2-option"))}get wrapperClasses(){const{errors:t}=this;const e=["q2-select-container"];if(Array.isArray(t)&&t.length>0)e.push("has-error");if(this.inputFocused)e.push("is-focused");if(this.searchable)e.push("is-searchable");return e.join(" ")}buildStructuredSelectedOptions(){const{multiple:t,selectedOptions:e,value:i}=this;if(t){this.structuredSelectedOptions=!!(e===null||e===void 0?void 0:e.length)?e.map((t=>typeof t==="string"?{value:t}:t)):[]}else{this.structuredSelectedOptions=i?[{value:i}]:[]}}ariaLabelObserver(){l(this)}valueUpdated(){if(this.multiple)return;this.clearSearchText()}handleMultilineOptionsUpdate(t,e){if(t===e)return;this.optionElements.forEach((e=>e.multiline=t))}openChanged(t){this.scheduledAfterRender.push((async()=>{await r();const{popoverTopContainer:e,popoverElement:i}=this;const s=t&&(e===null||e===void 0?void 0:e.offsetHeight)||0;if(s){i.style.setProperty("--comp-popover-top-container-height",`${s}px`)}else{i.style.removeProperty("--comp-popover-top-container-height")}}))}_togglePopover(){const{innerInputField:t}=this;t===null||t===void 0?void 0:t.click();t===null||t===void 0?void 0:t.focus();t.dispatchEvent(new FocusEvent("focus"))}async openPopover(){if(this.open||this.disabled)return;this._togglePopover()}async closePopover(){if(!this.open||this.disabled)return;this._togglePopover()}async setValue(t,e={closePopover:true}){const i=new Set(Array.isArray(t)?t:[t]);if(!this.open){await this.openPopover();await r()}i.forEach((t=>{var e;(e=this.optionElements.find((e=>e.value===t)))===null||e===void 0?void 0:e.click()}));if(e.closePopover){await this.closePopover();await r()}}searchOptions(t){if(!this.searchable)return;const{innerInputField:e}=this;e.focus();e.dispatchEvent(new FocusEvent("focus"));e.value=t;e.dispatchEvent(new InputEvent("input"))}keydownHandler(t){this.inputKeydownHandler(t)}onHostElementChange(t){if(this.readonly||this.disabled)return;if(t.target!==this.hostElement||this.hostElement.onchange)return;if(this.multiple){this.value=null;this.selectedOptions=t.detail.selectedOptions}else{this.value=t.detail.value;this.selectedOptions=[]}}onClearHandler(){this.clearValue()}onHostElementInput(t){if(!this.searchable||t.target!==this.hostElement||this.hostElement.oninput)return;const e=this.optionElements;const i=this.searchText.trim().toLocaleLowerCase();let s=0;e.forEach((t=>{var e;if(i===""){t.hidden=false;return}const o=((e=t.firstElementChild)===null||e===void 0?void 0:e.tagName)==="Q2-CARD"?t.firstElementChild.title:null;const{display:l="",innerText:n=""}=t;const r=[l,o,n];const a=r.some((t=>{var e;return(e=t===null||t===void 0?void 0:t.toLocaleLowerCase().includes(i))!==null&&e!==void 0?e:false}));t.hidden=!a;if(a)s++}));const l=i?"tecton.element.select.searchable.results":"tecton.element.select.allOptions";const n=i?s:e.length;this.setStatusMessage(o(l,[n]))}delegateFocus(t){const e=a(t,this.hostElement);const i=this.prioritizeSearch=e&&this.searchable;if(i){this.clearSelectedDisplay()}else if(c(t,this.hostElement)){this.inputField.shadowRoot.querySelector(".input-field").focus()}}handleFocusout(t){const e=d(t,this.hostElement);if(e)this.closeDropdown();this.prioritizeSearch=!e&&this.searchable}handleSelectedDisplay(t){if(this.multiple)return;this.inputField.value=t.detail.display}async executeActionSheet(t){const e=await p(this,t);this.handleSelectionChanges(e)}handleSelectionChanges(t){const{value:e="",values:i=[]}=t;const s=i.map((t=>t.value));const{multiple:o}=this;if(!this.hostElement.onchange){this.selectedOptions=s}this.change.emit({value:o?undefined:e,selectedOptions:o?s:undefined})}clearValue(){const{multiple:t}=this;this.value="";this.selectedOptions=[];this.change.emit({value:t?undefined:"",selectedOptions:t?[]:undefined})}calculateMultiSelectSelectedDisplay(){var t,e,i;const{firstSelectedOptionElement:s,firstSelectedValue:l,multilineOptions:n}=this;if(!l)return"";if(s===null||s===void 0?void 0:s.display)return o(s.display);if(n&&this.searchable)return this.searchText;if(n)return"";return(i=(e=(t=s===null||s===void 0?void 0:s.textContent)===null||t===void 0?void 0:t.trim())!==null&&e!==void 0?e:s===null||s===void 0?void 0:s.value)!==null&&i!==void 0?i:l}calculateSingleSelectSelectedDisplay(){var t;const{firstSelectedOptionElement:e,multilineOptions:i}=this;if(i){return(e===null||e===void 0?void 0:e.display)&&o(e.display)||this.value||""}else{return(e===null||e===void 0?void 0:e.display)&&o(e.display)||((t=e===null||e===void 0?void 0:e.textContent)===null||t===void 0?void 0:t.trim())||this.value||""}}openDropdownWithoutActiveElement(){if(this.readonly||this.disabled)return;this.optionList.setActiveElement(null);this.open=true}closeDropdown(){this.open=false;this.clearSearchText()}clearSearchText(){if(!this.searchText)return;this.searchText="";this.input.emit({query:""})}toggleDropdown(){if(this.readonly||this.disabled)return;if(this.open&&!this.searchText){this.closeDropdown()}else{this.openDropdownWithoutActiveElement()}}focusInput(){var t;(t=this.inputField)===null||t===void 0?void 0:t.dispatchEvent(new FocusEvent("focus"))}setStatusMessage(t){clearTimeout(this.statusMessageTimer);this.statusMessage="";this.statusMessageTimer=setTimeout((()=>{this.statusMessage=t}),1e3)}checkSelectedOptions(){const{multiple:t,selectedOptions:e,value:i}=this;this.optionElements.forEach((s=>{if(t){s.selected=e.includes(s.value)}else{s.selected=s.value===i}}))}clearSelectedDisplay(){var t;(t=this.selectedDisplaySlot)===null||t===void 0?void 0:t.remove()}checkSelectedDisplay(){let t=this.selectedDisplaySlot;const{value:e,multiple:i,selectedOptions:s,multilineOptions:o,firstSelectedOptionElement:l,prioritizeSearch:n}=this;const r=!e&&i&&!(s===null||s===void 0?void 0:s.length);if(n||!o||r)return this.clearSelectedDisplay();if(!l||l.display)return this.clearSelectedDisplay();const a=l.firstElementChild.cloneNode(true);a.querySelectorAll("[hide-on-select]").forEach((t=>t.remove()));if(t){const e=t.clientHeight===0?"auto":`${t.clientHeight}px`;t.style.setProperty("--comp-selected-display-height",e);if(t.firstElementChild.outerHTML!==a.outerHTML){t.replaceChild(a,t.firstElementChild)}}else{t=document.createElement("div");t.slot="_selected-display";t.appendChild(a);this.hostElement.appendChild(t)}return t}checkSelectedDisplayHeight(){const{selectedDisplaySlot:t}=this;if(!t)return;t.style.setProperty("--comp-selected-display-height","44px")}shouldClearSearchText(t){return this.searchable&&!!this.searchText&&t.key==="Escape"}renderCustomDisplay(){const t=this.checkSelectedDisplay();if(!t)return;this.checkSelectedDisplayHeight();return i("slot",{name:"_selected-display",slot:"custom-display"})}render(){var t;return i("click-elsewhere",{key:"421fc4811bdf2f8cfb899ee9823ce20e3301032c",class:this.wrapperClasses,onChange:this.clickedElsewhere},i("div",{key:"1a2b96c2e6dbacfa7dcc8918ff4acab71046dc8d","aria-live":"polite","aria-atomic":"true",role:"status",class:"sr"},this.statusMessage),i("q2-input",{key:"fd678010a8f0d53a4d93c265204bedf72679221a",ref:t=>this.inputField=t,class:"q2-select-input",label:this.label&&o(this.label)||"",value:this.selectedDisplay,clearable:this.clearable&&(!!this.value||!!((t=this.selectedOptions)===null||t===void 0?void 0:t.length))||undefined,errors:Array.isArray(this.errors)&&this.errors.length>0&&this.errors.map((t=>o(t)))||this.invalid&&["tecton.element.select.invalid"]||[],disabled:this.disabled,optional:this.optional,readonly:!!this.readonly,placeholder:this.placeholder||undefined,hideLabel:this.hideLabel,ariaExpanded:`${this.open}`,ariaControls:"option-list",ariaHaspopup:"listbox","test-id":"toggleDropdown","hide-messages":true,iconRight:"chevron-down",onClick:this.inputClickHandler,onInput:this.inputInputHandler,onKeyDown:this.inputKeydownHandler,onFocus:this.inputFocusHandler,onBlur:this.inputBlurHandler,onChange:this.inputChangeHandler,badgeValue:this.badgeValue,badgeTheme:this.inputFocused?"primary":undefined,_role:"combobox",_preventEntry:!this.searchable},this.renderCustomDisplay()),i("div",{key:"26f8c78fb455e7fc9451018ed2745ab53018c270",class:"custom-display-content",hidden:!this.hasCustomDisplay||!!this.searchText,onClick:this.onCustomDisplayClick},i("slot",{key:"4f76ab176fbd88b99aab88ad9e9a3cb87ccb943b",name:"q2-select-display"})),this.optionsDropdown())}optionsDropdown(){return i("q2-popover",{ref:t=>this.popoverElement=t,controlElement:this.innerInputContainer,open:this.open,minHeight:this.popoverMinHeight,direction:this.popDirection,mode:this.popoverMode||undefined,block:true},i("div",{class:"popover-content"},i("q2-option-list",{onPopoverState:this.onPopoverState,ref:t=>this.optionList=t,type:"listbox",id:"option-list","show-selected":this.showSelected,label:this.listLabel,multiple:this.multiple,selectedOptions:this.structuredSelectedOptions,onChange:this.onOptionListChange},i("slot",null)),i("div",{class:"popover-top-container",ref:t=>this.popoverTopContainer=t,hidden:!this.multiple&&!this.hasPopoverTop,tabindex:"-1"},i("slot",{name:"popover-top"}),this.multiple&&this.visibilityToggle())),i("div",{class:"popover-bottom-container",hidden:!this.hasPopoverBottom,tabindex:"-1"},i("slot",{name:"popover-bottom"})))}visibilityToggle(){var t,e;const s=(e=(t=this.selectedOptions)===null||t===void 0?void 0:t.length)!==null&&e!==void 0?e:0;const{showSelected:l}=this;return i("div",{class:"multi-select-header"},i("fieldset",null,i("legend",{"aria-label":o("tecton.element.select.multiHeader.showing")},o("tecton.element.select.multiHeader.showing")),i("div",null,i("input",{class:"sr",type:"radio",id:"all",name:"viewDisplay",value:"all",checked:!l,"aria-label":o("tecton.element.select.multiHeader.allAriaLabel"),"test-id":"allOptionsButton",onClick:this.showAllOptions,onKeyDown:this.visibilityToggleKeyDown}),i("label",{htmlFor:"all"},o("tecton.element.select.multiHeader.all"))),i("div",null,i("input",{class:"sr",type:"radio",id:"selected",disabled:s===0,name:"viewDisplay",value:"selected","aria-label":o("tecton.element.select.multiHeader.selectedAriaLabel",[s]),checked:l,"test-id":"selectedOptionsButton",onClick:this.showSelectedOptions,onKeyDown:this.visibilityToggleKeyDown}),i("label",{htmlFor:"selected"},o("tecton.element.select.multiHeader.selected",[s])))))}get hostElement(){return s(this)}static get watchers(){return{value:["buildStructuredSelectedOptions","valueUpdated"],selectedOptions:["buildStructuredSelectedOptions"],ariaLabel:["ariaLabelObserver"],multilineOptions:["handleMultilineOptionsUpdate"],open:["openChanged"]}}};b.style=v;export{b as q2_select};
+//# sourceMappingURL=p-8e60bcaa.entry.js.map

package/dist/q2-tecton-elements/{p-6eac40be.entry.js.map → p-8e60bcaa.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["q2SelectCss","Q2SelectStyle0","Q2Select","this","scheduledAfterRender","showSelectedOptions","showSelected","showAllOptions","onMutationObserved","hostElement","hasPopoverTop","hasPopoverBottom","slotContainer","querySelector","displaySlot","shadowRoot","hasCustomDisplay","assignedNodes","length","children","popTopSlot","topSlotHasNode","popBottomSlot","bottomSlotHasNode","checkSelectedOptions","onOptionListChange","event","stopPropagation","values","detail","handleSelectionChanges","onPopoverState","open","action","searchText","optionList","setActiveElement","inputField","focus","inputKeydownHandler","readonly","disabled","key","hasSlot","isShiftTab","shiftKey","shouldShowActionSheet","executeActionSheet","keysForOptionListToHandle","searchable","includes","shouldClearSearchText","clearSearchText","preventDefault","handleExternalKeydown","visibilityToggleKeyDown","isRadioControlKey","setDefaultActiveElement","inputClickHandler","async","toggleDropdown","focusInput","inputInputHandler","eventValue","value","shouldClearValue","clearValue","openDropdownWithoutActiveElement","prioritizeSearch","input","emit","query","inputFocusHandler","inputFocused","inputBlurHandler","inputChangeHandler","clickedElsewhere","target","localName","onCustomDisplayClick","_a","window","Tecton","useActionSheets","loc","componentWillLoad","handleAriaLabel","buildStructuredSelectedOptions","handleMultilineOptionsUpdate","multilineOptions","componentDidLoad","observer","MutationObserver","observe","childList","subtree","mutationObserver","overrideFocus","setTimeout","checkSelectedDisplay","componentDidRender","forEach","fn","disconnectedCallback","disconnect","innerInputField","_b","innerInputContainer","badgeValue","multiple","optionsLength","selectedOptions","popoverMinHeight","minRows","firstOption","minHeight","getComputedStyle","parseInt","selectedDisplay","calculateMultiSelectSelectedDisplay","calculateSingleSelectSelectedDisplay","selectedDisplaySlot","firstSelectedValue","firstSelectedOptionElement","optionElements","find","Array","from","querySelectorAll","wrapperClasses","errors","classes","isArray","push","join","structuredSelectedOptions","map","option","ariaLabelObserver","valueUpdated","newValue","oldValue","element","multiline","openChanged","isOpen","waitForNextPaint","popoverTopContainer","popoverElement","height","offsetHeight","style","setProperty","removeProperty","_togglePopover","click","dispatchEvent","FocusEvent","openPopover","closePopover","setValue","options","valuesSet","Set","searchOptions","InputEvent","keydownHandler","onHostElementChange","onchange","onClearHandler","onHostElementInput","oninput","trim","toLocaleLowerCase","matchedCount","hidden","title","firstElementChild","tagName","display","innerText","searchParams","matched","some","text","statusMessageLocString","count","setStatusMessage","delegateFocus","fromHost","isRelatedTargetWithinHost","clearSelectedDisplay","isEventFromElement","handleFocusout","isLeavingHost","isHostLosingFocus","closeDropdown","handleSelectedDisplay","result","showActionSheetList","changeDetails","selectedOptionValues","change","undefined","_c","textContent","message","clearTimeout","statusMessageTimer","statusMessage","selected","remove","namedSlot","hasNoValue","selectionClone","cloneNode","clientHeight","outerHTML","replaceChild","document","createElement","slot","appendChild","checkSelectedDisplayHeight","renderCustomDisplay","hasSelectedDisplay","h","name","render","class","onChange","role","ref","el","label","clearable","error","invalid","optional","placeholder","hideLabel","ariaExpanded","ariaControls","ariaHaspopup","iconRight","onClick","onInput","onKeyDown","onFocus","onBlur","badgeTheme","_role","_preventEntry","optionsDropdown","controlElement","direction","popDirection","mode","popoverMode","block","type","id","listLabel","tabindex","visibilityToggle","selectedOptionsCount","checked","htmlFor"],"sources":["src/components/q2-select/q2-select.scss?tag=q2-select&encapsulation=shadow","src/components/q2-select/q2-select.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../../styles/dropdowns';\n\n:host {\n    --comp-select-margin: #{var-list(\n            --tct-select-margin,\n            unquote(\n                '#{var-list(var-prefixer(select-margin-top), --app-scale-4, 30px)} 0 #{var-list(var-prefixer(select-margin-bottom), --app-scale-4, 30px)}'\n            )\n        )};\n    display: block;\n    margin: var(--comp-select-margin);\n}\n\n.q2-select-container {\n    position: relative;\n    display: block;\n}\n\n.q2-select-input {\n    margin: 0;\n\n    --tct-input-min-height: #{var-list(var-prefixer(select-input-min-height))};\n    --tct-input-max-height: #{var-list(var-prefixer(select-input-max-height), none)};\n}\n\n::slotted([slot='_selected-display']) {\n    width: 100%;\n    min-height: var(--comp-selected-display-height, 44px);\n}\n\n.custom-display-content {\n    position: absolute;\n    bottom: 0;\n    left: calc(var-list(--tct-scale-2, --app-scale-2x, 10px) + 1px);\n    height: 44px;\n    width: calc(100% - 34px - var-list(--tct-scale-3, --app-scale-3x, 15px));\n    overflow: hidden;\n    cursor: pointer;\n    transition: left var-list(--tct-tween-2, --app-tween-1, unquote('0.2s ease'));\n}\n\n.custom-display-content:not([hidden]) {\n    display: flex;\n    align-items: center;\n}\n\n.is-searchable.is-focused .custom-display-content,\n.is-searchable .custom-display-content:active {\n    left: calc(var-list(--tct-scale-3, --app-scale-3x, 15px) + 1px);\n}\n\n.has-error .custom-display-content {\n    width: calc(100% - 68px - var-list(--tct-scale-3, --app-scale-3x, 15px));\n}\n\n.popover-content {\n    display: flex;\n    flex-direction: column-reverse;\n}\n\n.popover-bottom-container {\n    position: sticky;\n    bottom: 0;\n    z-index: 5;\n}\n\n.popover-top-container {\n    position: sticky;\n    top: 0;\n    z-index: 5;\n    .multi-select-header {\n        padding: var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-2, var(--app-scale-2x, 10px));\n        background: var(--app-white);\n        display: flex;\n        gap: var-list(--app-scale-2x, 10px);\n        align-items: center;\n\n        fieldset {\n            margin: 0;\n            padding: 0;\n            border: 0;\n            display: flex;\n            gap: var-list(--app-scale-2x, 10px);\n        }\n\n        legend {\n            padding: 0;\n            float: left;\n        }\n\n        label {\n            cursor: pointer;\n            padding: var-list(\n                var-prefixer(select-multi-select-option-padding),\n                var-prefixer(btn-badge-padding),\n                unquote('2px 5px')\n            );\n            font-size: var-list(\n                var-prefixer(select-multi-select-option-font-size),\n                var-prefixer(btn-badge-font-size),\n                inherit\n            );\n            border-radius: var-list(\n                var-prefixer(select-multi-select-option-radius),\n                var-prefixer(btn-badge-border-radius),\n                --app-border-radius-1,\n                3px\n            );\n            background: var-list(\n                --tct-select-multi-select-option-background,\n                var-prefixer(select-multi-select-option-bg),\n                --tct-badge-background,\n                var-prefixer(btn-badge-bg),\n                transparent\n            );\n            color: var-list(\n                var-prefixer(select-multi-select-option-color),\n                var-prefixer(btn-badge-font-color),\n                inherit\n            );\n\n            &:hover {\n                background: var-list(\n                    --tct-select-multi-select-option-hover-background,\n                    var-prefixer(select-multi-select-option-hover-background-color),\n                    var-prefixer(btn-badge-hover-bg),\n                    var-prefixer(gray-14),\n                    --app-gray-l3,\n                    #f2f2f2\n                );\n                color: var-list(\n                    --tct-select-multi-select-option-hover-color,\n                    var-prefixer(select-multi-select-option-color),\n                    var-prefixer(btn-badge-hover-font-color),\n                    var-prefixer(gray-5),\n                    --app-gray-d2,\n                    #404040\n                );\n            }\n        }\n\n        input {\n            &:checked + label {\n                &,\n                &:enabled:hover {\n                    background: var-list(\n                        --tct-select-multi-select-option-active-background,\n                        var-prefixer(select-multi-select-option-active-background-color),\n                        var-prefixer(btn-primary-bg),\n                        #2e2e2e\n                    );\n                    color: var-list(\n                        var-prefixer(select-multi-select-option-active-color),\n                        var-prefixer(btn-primary-font-color),\n                        --app-white,\n                        #ffffff\n                    );\n                }\n            }\n\n            &:disabled + label {\n                opacity: var-list(\n                    var-prefixer(select-multi-select-option-disabled-opacity),\n                    var-prefixer(btn-disabled-opacity),\n                    --app-disabled-opacity,\n                    0.4\n                );\n                cursor: not-allowed;\n            }\n\n            &:focus + label {\n                box-shadow: var(--const-double-focus-ring);\n            }\n        }\n    }\n}\n","import {\n    Component,\n    Prop,\n    Element,\n    h,\n    Listen,\n    State,\n    EventEmitter,\n    Event,\n    ComponentInterface,\n    Watch,\n    Method,\n} from '@stencil/core';\nimport { IEventDetail, Q2InputCustomEvent, Q2OptionListCustomEvent } from 'src/components';\nimport {\n    handleAriaLabel,\n    isEventFromElement,\n    isHostLosingFocus,\n    isRelatedTargetWithinHost,\n    loc,\n    overrideFocus,\n    waitForNextPaint,\n} from '../../utils';\nimport { IOptionValue } from '../q2-option-list/q2-option-list';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\n\n@Component({ tag: 'q2-select', shadow: true, styleUrl: 'q2-select.scss' })\nexport class Q2Select implements ComponentInterface {\n    /** Disables all interaction with the field and leverages the disabled visual style of `q2-input`. */\n    @Prop({ reflect: true }) 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() 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 }) hideLabel: boolean;\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 }) clearable: 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/ui/q2-card/) component since its styling is managed by Tecton.\n     */\n    @Prop() 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 }) 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 }) label: string;\n\n    /**\n     * Determines the label that is applied to the option list for accessibility purposes.\n     * @localizable\n     */\n    @Prop() 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() 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 }) multilineOptions: boolean = false;\n\n    /** Enables multi-select functionality. */\n    @Prop({ reflect: true }) 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 }) 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 }) placeholder: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true }) popDirection: 'up' | 'down';\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 }) 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 }) readonly: boolean = false;\n\n    /** Enables search functionality. */\n    @Prop({ reflect: true }) 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 }) 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 }) value: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n    @Element() hostElement: HTMLElement;\n\n    @State() open: boolean = false;\n    @State() showSelected: boolean = false;\n    @State() searchText: string = '';\n    @State() hasCustomDisplay: boolean = false;\n    @State() hasPopoverTop: boolean = false;\n    @State() hasPopoverBottom: boolean = false;\n    @State() inputFocused: boolean = false;\n    @State() statusMessage: string;\n    @State() prioritizeSearch: boolean = false;\n    @State() structuredSelectedOptions: IOptionValue[] = [];\n\n    inputField?: HTMLQ2InputElement;\n    optionList: HTMLQ2OptionListElement;\n    popoverElement?: HTMLQ2PopoverElement;\n    popoverTopContainer?: HTMLDivElement;\n    scheduledAfterRender: (() => void)[] = [];\n    mutationObserver: MutationObserver;\n\n    /// Lifecycle Hooks ///\n    componentWillLoad() {\n        handleAriaLabel(this);\n        this.buildStructuredSelectedOptions();\n        this.handleMultilineOptionsUpdate(this.multilineOptions, false);\n    }\n\n    componentDidLoad() {\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, subtree: true });\n        this.mutationObserver = observer;\n        this.onMutationObserved();\n        overrideFocus(this.hostElement);\n        setTimeout(() => this.checkSelectedDisplay(), 0);\n    }\n\n    componentDidRender() {\n        setTimeout(() => {\n            this.scheduledAfterRender.forEach(fn => fn());\n            this.scheduledAfterRender = [];\n        }, 25);\n    }\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    /// Getters ///\n    get innerInputField(): HTMLInputElement | HTMLButtonElement {\n        return this.inputField?.shadowRoot?.querySelector('.input-field');\n    }\n\n    get innerInputContainer(): HTMLElement {\n        return this.inputField?.shadowRoot?.querySelector('.input-container');\n    }\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 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 firstSelectedValue() {\n        return this.multiple ? this.selectedOptions?.[0] : this.value;\n    }\n\n    get firstSelectedOptionElement() {\n        const { firstSelectedValue } = this;\n        return firstSelectedValue ? this.optionElements.find(({ value }) => value === firstSelectedValue) : null;\n    }\n\n    get optionElements() {\n        return Array.from(this.hostElement.querySelectorAll<HTMLQ2OptionElement>('q2-option'));\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    /// Watchers ///\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('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('value')\n    valueUpdated() {\n        if (this.multiple) return;\n        this.clearSearchText();\n    }\n\n    @Watch('multilineOptions')\n    handleMultilineOptionsUpdate(newValue, oldValue) {\n        if (newValue === oldValue) return;\n        this.optionElements.forEach(element => (element.multiline = newValue));\n    }\n\n    @Watch('open')\n    openChanged(isOpen: boolean) {\n        this.scheduledAfterRender.push(async () => {\n            await waitForNextPaint();\n            const { popoverTopContainer, popoverElement } = this;\n            const height = (isOpen && popoverTopContainer?.offsetHeight) || 0;\n            if (height) {\n                popoverElement.style.setProperty('--comp-popover-top-container-height', `${height}px`);\n            } else {\n                popoverElement.style.removeProperty('--comp-popover-top-container-height');\n            }\n        });\n    }\n\n    /// Events ///\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() 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() input: EventEmitter<{ query: string }>;\n\n    /// Methods ///\n    _togglePopover() {\n        const { innerInputField } = this;\n        innerInputField?.click();\n        innerInputField?.focus();\n        innerInputField.dispatchEvent(new FocusEvent('focus'));\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 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 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    /**\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    /// Listeners ///\n    @Listen('keydown')\n    keydownHandler(event: KeyboardEvent) {\n        this.inputKeydownHandler(event);\n    }\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('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('focus')\n    delegateFocus(event: FocusEvent) {\n        const fromHost = isRelatedTargetWithinHost(event, this.hostElement);\n        const prioritizeSearch = (this.prioritizeSearch = fromHost && this.searchable);\n        if (prioritizeSearch) {\n            this.clearSelectedDisplay();\n        } else if (isEventFromElement(event, this.hostElement)) {\n            this.inputField.shadowRoot.querySelector<HTMLElement>('.input-field').focus();\n        }\n    }\n\n    @Listen('focusout')\n    handleFocusout(event: FocusEvent) {\n        const isLeavingHost = isHostLosingFocus(event, this.hostElement);\n        if (isLeavingHost) this.closeDropdown();\n        this.prioritizeSearch = !isLeavingHost && this.searchable;\n    }\n\n    @Listen('displayChanged')\n    handleSelectedDisplay(event: CustomEvent) {\n        if (this.multiple) return;\n        this.inputField.value = event.detail.display;\n    }\n\n    /// Helpers ///\n    async executeActionSheet(event: MouseEvent | KeyboardEvent) {\n        const result = await showActionSheetList(this, event);\n        this.handleSelectionChanges(result);\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    showSelectedOptions = () => {\n        this.showSelected = true;\n    };\n\n    showAllOptions = () => {\n        this.showSelected = false;\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    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    onMutationObserved = () => {\n        const { hostElement, hasPopoverTop, hasPopoverBottom } = this;\n        const slotContainer = hostElement.querySelector('.custom-display-content');\n        const displaySlot = hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"q2-select-display\"]');\n        const hasCustomDisplay = !!displaySlot\n            ? displaySlot.assignedNodes().length > 0\n            : slotContainer.children.length > 0;\n\n        if (this.hasCustomDisplay !== hasCustomDisplay) {\n            this.hasCustomDisplay = hasCustomDisplay;\n        }\n\n        const popTopSlot = hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"popover-top\"]');\n        const topSlotHasNode = popTopSlot.assignedNodes().length > 0;\n        if (hasPopoverTop !== topSlotHasNode) {\n            this.hasPopoverTop = topSlotHasNode;\n        }\n\n        const popBottomSlot = hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"popover-bottom\"]');\n        const bottomSlotHasNode = popBottomSlot.assignedNodes().length > 0;\n        if (hasPopoverBottom !== bottomSlotHasNode) {\n            this.hasPopoverBottom = bottomSlotHasNode;\n        }\n\n        this.checkSelectedOptions();\n    };\n\n    onOptionListChange = (event: Q2OptionListCustomEvent<{ value: string; values: IOptionValue[] }>) => {\n        event.stopPropagation();\n        const { values } = event.detail;\n\n        if (values.length === 0) this.showAllOptions();\n        this.handleSelectionChanges(event.detail);\n    };\n\n    openDropdownWithoutActiveElement() {\n        if (this.readonly || this.disabled) return;\n        this.optionList.setActiveElement(null);\n        this.open = true;\n    }\n\n    closeDropdown() {\n        this.open = false;\n        this.clearSearchText();\n    }\n\n    clearSearchText() {\n        if (!this.searchText) return;\n        this.searchText = '';\n        this.input.emit({ query: '' });\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    focusInput() {\n        this.inputField?.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    statusMessageTimer: NodeJS.Timeout;\n    setStatusMessage(message) {\n        clearTimeout(this.statusMessageTimer);\n        this.statusMessage = '';\n        this.statusMessageTimer = setTimeout(() => {\n            this.statusMessage = message;\n        }, 1000);\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    clearSelectedDisplay() {\n        this.selectedDisplaySlot?.remove();\n    }\n\n    checkSelectedDisplay() {\n        let namedSlot = this.selectedDisplaySlot;\n        const { value, multiple, selectedOptions, multilineOptions, firstSelectedOptionElement, prioritizeSearch } =\n            this;\n        const hasNoValue = !value && multiple && !selectedOptions?.length;\n        if (prioritizeSearch || !multilineOptions || hasNoValue) return this.clearSelectedDisplay();\n\n        if (!firstSelectedOptionElement || firstSelectedOptionElement.display) return this.clearSelectedDisplay();\n\n        // Clone selected option and remove elements with hide-on-select attribute\n        const selectionClone = firstSelectedOptionElement.firstElementChild.cloneNode(true) as HTMLElement;\n        selectionClone.querySelectorAll('[hide-on-select]').forEach(element => element.remove());\n\n        if (namedSlot) {\n            const height = namedSlot.clientHeight === 0 ? 'auto' : `${namedSlot.clientHeight}px`;\n            namedSlot.style.setProperty('--comp-selected-display-height', height);\n            if (namedSlot.firstElementChild.outerHTML !== selectionClone.outerHTML) {\n                namedSlot.replaceChild(selectionClone, namedSlot.firstElementChild);\n            }\n        } else {\n            namedSlot = document.createElement('div');\n            namedSlot.slot = '_selected-display';\n            namedSlot.appendChild(selectionClone);\n            this.hostElement.appendChild(namedSlot);\n        }\n        return namedSlot;\n    }\n\n    checkSelectedDisplayHeight() {\n        const { selectedDisplaySlot } = this;\n        if (!selectedDisplaySlot) return;\n        selectedDisplaySlot.style.setProperty('--comp-selected-display-height', '44px');\n    }\n\n    /// Event handlers ///\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    inputKeydownHandler = (event: KeyboardEvent) => {\n        if (this.readonly || this.disabled) return;\n        const key = event.key;\n        const hasSlot = this.hasPopoverTop || this.hasPopoverBottom;\n        const isShiftTab = key === 'Tab' && event.shiftKey;\n        if (hasSlot && (key === 'Tab' || key === 'Enter' || isShiftTab)) return;\n        if (shouldShowActionSheet(this, event)) {\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        if (this.searchable && !keysForOptionListToHandle.includes(key)) return;\n        if (this.shouldClearSearchText(event)) this.clearSearchText();\n\n        // Prevent click event from firing when spacebar is pressed\n        if (key === ' ') event.preventDefault();\n\n        this.optionList.handleExternalKeydown(event);\n    };\n\n    shouldClearSearchText(event: KeyboardEvent) {\n        return this.searchable && !!this.searchText && event.key === 'Escape';\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    inputClickHandler = async (event: MouseEvent) => {\n        event.stopPropagation();\n        if (shouldShowActionSheet(this)) {\n            return this.executeActionSheet(event);\n        }\n        this.toggleDropdown();\n        this.focusInput();\n    };\n\n    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    inputFocusHandler = () => {\n        this.inputFocused = true;\n    };\n\n    inputBlurHandler = () => {\n        this.inputFocused = false;\n    };\n\n    inputChangeHandler = (event: Event) => {\n        event.stopPropagation();\n    };\n\n    clickedElsewhere = (event: CustomEvent) => {\n        const target = event.target as HTMLClickElsewhereElement;\n        if (target.localName !== 'click-elsewhere') return;\n        event.stopPropagation();\n    };\n\n    onCustomDisplayClick = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.focusInput();\n        this.toggleDropdown();\n    };\n\n    /// DOM ///\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    render() {\n        return (\n            <click-elsewhere\n                class={this.wrapperClasses}\n                onChange={this.clickedElsewhere}\n            >\n                <div\n                    aria-live=\"polite\"\n                    aria-atomic=\"true\"\n                    role=\"status\"\n                    class=\"sr\"\n                >\n                    {this.statusMessage}\n                </div>\n                <q2-input\n                    ref={el => (this.inputField = el)}\n                    class=\"q2-select-input\"\n                    label={(this.label && loc(this.label)) || ''}\n                    value={this.selectedDisplay}\n                    clearable={(this.clearable && (!!this.value || !!this.selectedOptions?.length)) || undefined}\n                    errors={\n                        (Array.isArray(this.errors) &&\n                            this.errors.length > 0 &&\n                            this.errors.map(error => loc(error))) ||\n                        (this.invalid && ['tecton.element.select.invalid']) ||\n                        []\n                    }\n                    disabled={this.disabled}\n                    optional={this.optional}\n                    readonly={!!this.readonly}\n                    placeholder={this.placeholder || undefined}\n                    hideLabel={this.hideLabel}\n                    ariaExpanded={`${this.open}`}\n                    ariaControls=\"option-list\"\n                    ariaHaspopup=\"listbox\"\n                    test-id=\"toggleDropdown\"\n                    hide-messages\n                    iconRight=\"chevron-down\"\n                    onClick={this.inputClickHandler}\n                    onInput={this.inputInputHandler}\n                    onKeyDown={this.inputKeydownHandler}\n                    onFocus={this.inputFocusHandler}\n                    onBlur={this.inputBlurHandler}\n                    onChange={this.inputChangeHandler}\n                    badgeValue={this.badgeValue}\n                    badgeTheme={this.inputFocused ? 'primary' : undefined}\n                    _role=\"combobox\"\n                    _preventEntry={!this.searchable}\n                >\n                    {this.renderCustomDisplay()}\n                </q2-input>\n                <div\n                    class=\"custom-display-content\"\n                    hidden={!this.hasCustomDisplay || !!this.searchText}\n                    onClick={this.onCustomDisplayClick}\n                >\n                    <slot name=\"q2-select-display\" />\n                </div>\n                {this.optionsDropdown()}\n            </click-elsewhere>\n        );\n    }\n\n    optionsDropdown() {\n        return (\n            <q2-popover\n                ref={el => (this.popoverElement = el)}\n                controlElement={this.innerInputContainer}\n                open={this.open}\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.visibilityToggle()}\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    visibilityToggle() {\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"],"mappings":"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"}
+{"version":3,"names":["q2SelectCss","Q2SelectStyle0","Q2Select","this","scheduledAfterRender","showSelectedOptions","showSelected","showAllOptions","onMutationObserved","hostElement","hasPopoverTop","hasPopoverBottom","slotContainer","querySelector","displaySlot","shadowRoot","hasCustomDisplay","assignedNodes","length","children","popTopSlot","topSlotHasNode","popBottomSlot","bottomSlotHasNode","checkSelectedOptions","onOptionListChange","event","stopPropagation","values","detail","handleSelectionChanges","onPopoverState","open","action","searchText","optionList","setActiveElement","inputField","focus","inputKeydownHandler","readonly","disabled","key","hasSlot","isShiftTab","shiftKey","shouldShowActionSheet","executeActionSheet","keysForOptionListToHandle","searchable","value","preventDefault","openDropdownWithoutActiveElement","includes","shouldClearSearchText","clearSearchText","handleExternalKeydown","visibilityToggleKeyDown","isRadioControlKey","setDefaultActiveElement","inputClickHandler","async","toggleDropdown","focusInput","inputInputHandler","eventValue","shouldClearValue","clearValue","prioritizeSearch","input","emit","query","inputFocusHandler","inputFocused","inputBlurHandler","inputChangeHandler","clickedElsewhere","target","localName","onCustomDisplayClick","_a","window","Tecton","useActionSheets","loc","componentWillLoad","handleAriaLabel","buildStructuredSelectedOptions","handleMultilineOptionsUpdate","multilineOptions","componentDidLoad","observer","MutationObserver","observe","childList","subtree","mutationObserver","overrideFocus","setTimeout","checkSelectedDisplay","componentDidRender","forEach","fn","disconnectedCallback","disconnect","innerInputField","_b","innerInputContainer","badgeValue","multiple","optionsLength","selectedOptions","popoverMinHeight","minRows","firstOption","minHeight","getComputedStyle","parseInt","selectedDisplay","calculateMultiSelectSelectedDisplay","calculateSingleSelectSelectedDisplay","selectedDisplaySlot","firstSelectedValue","firstSelectedOptionElement","optionElements","find","Array","from","querySelectorAll","wrapperClasses","errors","classes","isArray","push","join","structuredSelectedOptions","map","option","ariaLabelObserver","valueUpdated","newValue","oldValue","element","multiline","openChanged","isOpen","waitForNextPaint","popoverTopContainer","popoverElement","height","offsetHeight","style","setProperty","removeProperty","_togglePopover","click","dispatchEvent","FocusEvent","openPopover","closePopover","setValue","options","valuesSet","Set","searchOptions","InputEvent","keydownHandler","onHostElementChange","onchange","onClearHandler","onHostElementInput","oninput","trim","toLocaleLowerCase","matchedCount","hidden","title","firstElementChild","tagName","display","innerText","searchParams","matched","some","text","statusMessageLocString","count","setStatusMessage","delegateFocus","fromHost","isRelatedTargetWithinHost","clearSelectedDisplay","isEventFromElement","handleFocusout","isLeavingHost","isHostLosingFocus","closeDropdown","handleSelectedDisplay","result","showActionSheetList","changeDetails","selectedOptionValues","change","undefined","_c","textContent","message","clearTimeout","statusMessageTimer","statusMessage","selected","remove","namedSlot","hasNoValue","selectionClone","cloneNode","clientHeight","outerHTML","replaceChild","document","createElement","slot","appendChild","checkSelectedDisplayHeight","renderCustomDisplay","hasSelectedDisplay","h","name","render","class","onChange","role","ref","el","label","clearable","error","invalid","optional","placeholder","hideLabel","ariaExpanded","ariaControls","ariaHaspopup","iconRight","onClick","onInput","onKeyDown","onFocus","onBlur","badgeTheme","_role","_preventEntry","optionsDropdown","controlElement","direction","popDirection","mode","popoverMode","block","type","id","listLabel","tabindex","visibilityToggle","selectedOptionsCount","checked","htmlFor"],"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                3px\n            );\n            background: var-list(\n                --tct-select-multi-select-option-background,\n                var-prefixer(select-multi-select-option-bg),\n                --tct-badge-background,\n                var-prefixer(btn-badge-bg),\n                transparent\n            );\n            color: var-list(\n                var-prefixer(select-multi-select-option-color),\n                var-prefixer(btn-badge-font-color),\n                inherit\n            );\n\n            &:hover {\n                background: var-list(\n                    --tct-select-multi-select-option-hover-background,\n                    var-prefixer(select-multi-select-option-hover-background-color),\n                    var-prefixer(btn-badge-hover-bg),\n                    var-prefixer(gray-14),\n                    --app-gray-l3,\n                    #f2f2f2\n                );\n                color: var-list(\n                    --tct-select-multi-select-option-hover-color,\n                    var-prefixer(select-multi-select-option-color),\n                    var-prefixer(btn-badge-hover-font-color),\n                    var-prefixer(gray-5),\n                    --app-gray-d2,\n                    #404040\n                );\n            }\n        }\n\n        input {\n            &:checked + label {\n                &,\n                &:enabled:hover {\n                    background: var-list(\n                        --tct-select-multi-select-option-active-background,\n                        var-prefixer(select-multi-select-option-active-background-color),\n                        var-prefixer(btn-primary-bg),\n                        #2e2e2e\n                    );\n                    color: var-list(\n                        var-prefixer(select-multi-select-option-active-color),\n                        var-prefixer(btn-primary-font-color),\n                        --app-white,\n                        #ffffff\n                    );\n                }\n            }\n\n            &:disabled + label {\n                opacity: var-list(\n                    var-prefixer(select-multi-select-option-disabled-opacity),\n                    var-prefixer(btn-disabled-opacity),\n                    --app-disabled-opacity,\n                    0.4\n                );\n                cursor: not-allowed;\n            }\n\n            &:focus + label {\n                box-shadow: var(--const-double-focus-ring);\n            }\n        }\n    }\n}\n","import {\n    Component,\n    Prop,\n    Element,\n    h,\n    Listen,\n    State,\n    EventEmitter,\n    Event,\n    ComponentInterface,\n    Watch,\n    Method,\n} from '@stencil/core';\nimport { IEventDetail, Q2InputCustomEvent, Q2OptionListCustomEvent } from 'src/components';\nimport {\n    handleAriaLabel,\n    isEventFromElement,\n    isHostLosingFocus,\n    isRelatedTargetWithinHost,\n    loc,\n    overrideFocus,\n    waitForNextPaint,\n} from '../../utils';\nimport { IOptionValue } from '../q2-option-list/q2-option-list';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\n\n@Component({ tag: 'q2-select', shadow: true, styleUrl: 'q2-select.scss' })\nexport class Q2Select implements ComponentInterface {\n    /** Disables all interaction with the field and leverages the disabled visual style of `q2-input`. */\n    @Prop({ reflect: true }) 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() 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 }) hideLabel: boolean;\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 }) clearable: 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/ui/q2-card/) component since its styling is managed by Tecton.\n     */\n    @Prop() 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 }) 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 }) label: string;\n\n    /**\n     * Determines the label that is applied to the option list for accessibility purposes.\n     * @localizable\n     */\n    @Prop() 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() 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 }) multilineOptions: boolean = false;\n\n    /** Enables multi-select functionality. */\n    @Prop({ reflect: true }) 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 }) 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 }) placeholder: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true }) popDirection: 'up' | 'down';\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 }) 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 }) readonly: boolean = false;\n\n    /** Enables search functionality. */\n    @Prop({ reflect: true }) 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 }) 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 }) value: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n    @Element() hostElement: HTMLElement;\n\n    @State() open: boolean = false;\n    @State() showSelected: boolean = false;\n    @State() searchText: string = '';\n    @State() hasCustomDisplay: boolean = false;\n    @State() hasPopoverTop: boolean = false;\n    @State() hasPopoverBottom: boolean = false;\n    @State() inputFocused: boolean = false;\n    @State() statusMessage: string;\n    @State() prioritizeSearch: boolean = false;\n    @State() structuredSelectedOptions: IOptionValue[] = [];\n\n    inputField?: HTMLQ2InputElement;\n    optionList: HTMLQ2OptionListElement;\n    popoverElement?: HTMLQ2PopoverElement;\n    popoverTopContainer?: HTMLDivElement;\n    scheduledAfterRender: (() => void)[] = [];\n    mutationObserver: MutationObserver;\n\n    /// Lifecycle Hooks ///\n    componentWillLoad() {\n        handleAriaLabel(this);\n        this.buildStructuredSelectedOptions();\n        this.handleMultilineOptionsUpdate(this.multilineOptions, false);\n    }\n\n    componentDidLoad() {\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, subtree: true });\n        this.mutationObserver = observer;\n        this.onMutationObserved();\n        overrideFocus(this.hostElement);\n        setTimeout(() => this.checkSelectedDisplay(), 0);\n    }\n\n    componentDidRender() {\n        setTimeout(() => {\n            this.scheduledAfterRender.forEach(fn => fn());\n            this.scheduledAfterRender = [];\n        }, 25);\n    }\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    /// Getters ///\n    get innerInputField(): HTMLInputElement | HTMLButtonElement {\n        return this.inputField?.shadowRoot?.querySelector('.input-field');\n    }\n\n    get innerInputContainer(): HTMLElement {\n        return this.inputField?.shadowRoot?.querySelector('.input-container');\n    }\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 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 firstSelectedValue() {\n        return this.multiple ? this.selectedOptions?.[0] : this.value;\n    }\n\n    get firstSelectedOptionElement() {\n        const { firstSelectedValue } = this;\n        return firstSelectedValue ? this.optionElements.find(({ value }) => value === firstSelectedValue) : null;\n    }\n\n    get optionElements() {\n        return Array.from(this.hostElement.querySelectorAll<HTMLQ2OptionElement>('q2-option'));\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    /// Watchers ///\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('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('value')\n    valueUpdated() {\n        if (this.multiple) return;\n        this.clearSearchText();\n    }\n\n    @Watch('multilineOptions')\n    handleMultilineOptionsUpdate(newValue, oldValue) {\n        if (newValue === oldValue) return;\n        this.optionElements.forEach(element => (element.multiline = newValue));\n    }\n\n    @Watch('open')\n    openChanged(isOpen: boolean) {\n        this.scheduledAfterRender.push(async () => {\n            await waitForNextPaint();\n            const { popoverTopContainer, popoverElement } = this;\n            const height = (isOpen && popoverTopContainer?.offsetHeight) || 0;\n            if (height) {\n                popoverElement.style.setProperty('--comp-popover-top-container-height', `${height}px`);\n            } else {\n                popoverElement.style.removeProperty('--comp-popover-top-container-height');\n            }\n        });\n    }\n\n    /// Events ///\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() 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() input: EventEmitter<{ query: string }>;\n\n    /// Methods ///\n    _togglePopover() {\n        const { innerInputField } = this;\n        innerInputField?.click();\n        innerInputField?.focus();\n        innerInputField.dispatchEvent(new FocusEvent('focus'));\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 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 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    /**\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    /// Listeners ///\n    @Listen('keydown')\n    keydownHandler(event: KeyboardEvent) {\n        this.inputKeydownHandler(event);\n    }\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('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('focus')\n    delegateFocus(event: FocusEvent) {\n        const fromHost = isRelatedTargetWithinHost(event, this.hostElement);\n        const prioritizeSearch = (this.prioritizeSearch = fromHost && this.searchable);\n        if (prioritizeSearch) {\n            this.clearSelectedDisplay();\n        } else if (isEventFromElement(event, this.hostElement)) {\n            this.inputField.shadowRoot.querySelector<HTMLElement>('.input-field').focus();\n        }\n    }\n\n    @Listen('focusout')\n    handleFocusout(event: FocusEvent) {\n        const isLeavingHost = isHostLosingFocus(event, this.hostElement);\n        if (isLeavingHost) this.closeDropdown();\n        this.prioritizeSearch = !isLeavingHost && this.searchable;\n    }\n\n    @Listen('displayChanged')\n    handleSelectedDisplay(event: CustomEvent) {\n        if (this.multiple) return;\n        this.inputField.value = event.detail.display;\n    }\n\n    /// Helpers ///\n    async executeActionSheet(event: MouseEvent | KeyboardEvent) {\n        const result = await showActionSheetList(this, event);\n        this.handleSelectionChanges(result);\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    showSelectedOptions = () => {\n        this.showSelected = true;\n    };\n\n    showAllOptions = () => {\n        this.showSelected = false;\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    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    onMutationObserved = () => {\n        const { hostElement, hasPopoverTop, hasPopoverBottom } = this;\n        const slotContainer = hostElement.querySelector('.custom-display-content');\n        const displaySlot = hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"q2-select-display\"]');\n        const hasCustomDisplay = !!displaySlot\n            ? displaySlot.assignedNodes().length > 0\n            : slotContainer.children.length > 0;\n\n        if (this.hasCustomDisplay !== hasCustomDisplay) {\n            this.hasCustomDisplay = hasCustomDisplay;\n        }\n\n        const popTopSlot = hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"popover-top\"]');\n        const topSlotHasNode = popTopSlot.assignedNodes().length > 0;\n        if (hasPopoverTop !== topSlotHasNode) {\n            this.hasPopoverTop = topSlotHasNode;\n        }\n\n        const popBottomSlot = hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"popover-bottom\"]');\n        const bottomSlotHasNode = popBottomSlot.assignedNodes().length > 0;\n        if (hasPopoverBottom !== bottomSlotHasNode) {\n            this.hasPopoverBottom = bottomSlotHasNode;\n        }\n\n        this.checkSelectedOptions();\n    };\n\n    onOptionListChange = (event: Q2OptionListCustomEvent<{ value: string; values: IOptionValue[] }>) => {\n        event.stopPropagation();\n        const { values } = event.detail;\n\n        if (values.length === 0) this.showAllOptions();\n        this.handleSelectionChanges(event.detail);\n    };\n\n    openDropdownWithoutActiveElement() {\n        if (this.readonly || this.disabled) return;\n        this.optionList.setActiveElement(null);\n        this.open = true;\n    }\n\n    closeDropdown() {\n        this.open = false;\n        this.clearSearchText();\n    }\n\n    clearSearchText() {\n        if (!this.searchText) return;\n        this.searchText = '';\n        this.input.emit({ query: '' });\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    focusInput() {\n        this.inputField?.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    statusMessageTimer: NodeJS.Timeout;\n    setStatusMessage(message) {\n        clearTimeout(this.statusMessageTimer);\n        this.statusMessage = '';\n        this.statusMessageTimer = setTimeout(() => {\n            this.statusMessage = message;\n        }, 1000);\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    clearSelectedDisplay() {\n        this.selectedDisplaySlot?.remove();\n    }\n\n    checkSelectedDisplay() {\n        let namedSlot = this.selectedDisplaySlot;\n        const { value, multiple, selectedOptions, multilineOptions, firstSelectedOptionElement, prioritizeSearch } =\n            this;\n        const hasNoValue = !value && multiple && !selectedOptions?.length;\n        if (prioritizeSearch || !multilineOptions || hasNoValue) return this.clearSelectedDisplay();\n\n        if (!firstSelectedOptionElement || firstSelectedOptionElement.display) return this.clearSelectedDisplay();\n\n        // Clone selected option and remove elements with hide-on-select attribute\n        const selectionClone = firstSelectedOptionElement.firstElementChild.cloneNode(true) as HTMLElement;\n        selectionClone.querySelectorAll('[hide-on-select]').forEach(element => element.remove());\n\n        if (namedSlot) {\n            const height = namedSlot.clientHeight === 0 ? 'auto' : `${namedSlot.clientHeight}px`;\n            namedSlot.style.setProperty('--comp-selected-display-height', height);\n            if (namedSlot.firstElementChild.outerHTML !== selectionClone.outerHTML) {\n                namedSlot.replaceChild(selectionClone, namedSlot.firstElementChild);\n            }\n        } else {\n            namedSlot = document.createElement('div');\n            namedSlot.slot = '_selected-display';\n            namedSlot.appendChild(selectionClone);\n            this.hostElement.appendChild(namedSlot);\n        }\n        return namedSlot;\n    }\n\n    checkSelectedDisplayHeight() {\n        const { selectedDisplaySlot } = this;\n        if (!selectedDisplaySlot) return;\n        selectedDisplaySlot.style.setProperty('--comp-selected-display-height', '44px');\n    }\n\n    /// Event handlers ///\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    inputKeydownHandler = (event: KeyboardEvent) => {\n        if (this.readonly || this.disabled) return;\n        const key = event.key;\n        const hasSlot = this.hasPopoverTop || this.hasPopoverBottom;\n        const isShiftTab = key === 'Tab' && event.shiftKey;\n        if (hasSlot && (key === 'Tab' || key === 'Enter' || isShiftTab)) return;\n        if (shouldShowActionSheet(this, event)) {\n            return this.executeActionSheet(event);\n        }\n\n        const keysForOptionListToHandle = [\n            'ArrowDown',\n            'ArrowUp',\n            'PageDown',\n            'PageUp',\n            'Home',\n            'End',\n            'Escape',\n            'Tab',\n        ];\n\n        if (this.searchable && (key === ' ' || key === 'Enter') && this.inputField.value == '') {\n            event.preventDefault();\n            if (!this.open) this.openDropdownWithoutActiveElement();\n        }\n\n        if (this.searchable && !keysForOptionListToHandle.includes(key)) return;\n        if (this.shouldClearSearchText(event)) this.clearSearchText();\n\n        // Prevent click event from firing when spacebar is pressed\n        if (key === ' ') event.preventDefault();\n\n        this.optionList.handleExternalKeydown(event);\n    };\n\n    shouldClearSearchText(event: KeyboardEvent) {\n        return this.searchable && !!this.searchText && event.key === 'Escape';\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    inputClickHandler = async (event: MouseEvent) => {\n        event.stopPropagation();\n        if (shouldShowActionSheet(this)) {\n            return this.executeActionSheet(event);\n        }\n        this.toggleDropdown();\n        this.focusInput();\n    };\n\n    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    inputFocusHandler = () => {\n        this.inputFocused = true;\n    };\n\n    inputBlurHandler = () => {\n        this.inputFocused = false;\n    };\n\n    inputChangeHandler = (event: Event) => {\n        event.stopPropagation();\n    };\n\n    clickedElsewhere = (event: CustomEvent) => {\n        const target = event.target as HTMLClickElsewhereElement;\n        if (target.localName !== 'click-elsewhere') return;\n        event.stopPropagation();\n    };\n\n    onCustomDisplayClick = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.focusInput();\n        this.toggleDropdown();\n    };\n\n    /// DOM ///\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    render() {\n        return (\n            <click-elsewhere\n                class={this.wrapperClasses}\n                onChange={this.clickedElsewhere}\n            >\n                <div\n                    aria-live=\"polite\"\n                    aria-atomic=\"true\"\n                    role=\"status\"\n                    class=\"sr\"\n                >\n                    {this.statusMessage}\n                </div>\n                <q2-input\n                    ref={el => (this.inputField = el)}\n                    class=\"q2-select-input\"\n                    label={(this.label && loc(this.label)) || ''}\n                    value={this.selectedDisplay}\n                    clearable={(this.clearable && (!!this.value || !!this.selectedOptions?.length)) || undefined}\n                    errors={\n                        (Array.isArray(this.errors) &&\n                            this.errors.length > 0 &&\n                            this.errors.map(error => loc(error))) ||\n                        (this.invalid && ['tecton.element.select.invalid']) ||\n                        []\n                    }\n                    disabled={this.disabled}\n                    optional={this.optional}\n                    readonly={!!this.readonly}\n                    placeholder={this.placeholder || undefined}\n                    hideLabel={this.hideLabel}\n                    ariaExpanded={`${this.open}`}\n                    ariaControls=\"option-list\"\n                    ariaHaspopup=\"listbox\"\n                    test-id=\"toggleDropdown\"\n                    hide-messages\n                    iconRight=\"chevron-down\"\n                    onClick={this.inputClickHandler}\n                    onInput={this.inputInputHandler}\n                    onKeyDown={this.inputKeydownHandler}\n                    onFocus={this.inputFocusHandler}\n                    onBlur={this.inputBlurHandler}\n                    onChange={this.inputChangeHandler}\n                    badgeValue={this.badgeValue}\n                    badgeTheme={this.inputFocused ? 'primary' : undefined}\n                    _role=\"combobox\"\n                    _preventEntry={!this.searchable}\n                >\n                    {this.renderCustomDisplay()}\n                </q2-input>\n                <div\n                    class=\"custom-display-content\"\n                    hidden={!this.hasCustomDisplay || !!this.searchText}\n                    onClick={this.onCustomDisplayClick}\n                >\n                    <slot name=\"q2-select-display\" />\n                </div>\n                {this.optionsDropdown()}\n            </click-elsewhere>\n        );\n    }\n\n    optionsDropdown() {\n        return (\n            <q2-popover\n                ref={el => (this.popoverElement = el)}\n                controlElement={this.innerInputContainer}\n                open={this.open}\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.visibilityToggle()}\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    visibilityToggle() {\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"],"mappings":"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"}

package/dist/q2-tecton-elements/p-9a5695db.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as t,F as i,g as s}from"./p-a5f18e27.js";import{d as a}from"./p-b6bcef6a.js";import{l as n}from"./p-84190698.js";const r="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline}";const o=r;const d=class{constructor(t){e(this,t);this.syncTimer=null;this.trimSuffix=false;this.baseDate=undefined;this.locale=document.documentElement.lang||"en-US";this.messageFormat="short";this.numeric="auto";this.sync=true;this.date=undefined;this.unit=undefined;this.displayedMessage=undefined}componentWillLoad(){this.updateMessage()}connectedCallback(){this.syncUpdated()}disconnectedCallback(){window.clearInterval(this.syncTimer);this.syncTimer=null}get shouldShow(){return!!this.displayedMessage}get isValidDate(){const e=new Date(this.date);const t=a.isValid(e);if(!t)console.warn("Error: Invalid date provided to q2-relative-time.");return t}get dateObject(){return new Date(this.date)}get isBaseDateProvided(){return this.baseDate!==undefined}get isValidBaseDate(){const e=new Date(this.baseDate);const t=a.isValid(e);if(!t&&this.isBaseDateProvided){console.warn("Error: Invalid baseDate provided to q2-relative-time.")}return t}get baseDateObject(){if(this.isBaseDateProvided&&this.isValidBaseDate){this.trimSuffix=true;this.sync=false;return new Date(this.baseDate)}else{this.trimSuffix=false;this.sync=true;return new Date}}get isValidUnit(){if(["second","minute","hour","day","month","quarter","year"].includes(this.unit))return true;return false}get handleNumeric(){if(this.isValidBaseDate)return"always";return this.numeric}syncUpdated(){if(this.sync){this.syncTimer=window.setInterval((()=>{this.updateMessage()}),1e3)}else{window.clearInterval(this.syncTimer);this.syncTimer=null}}updateMessage(){const{isValidDate:e,isBaseDateProvided:t,isValidBaseDate:i,dateObject:s,baseDateObject:r,locale:o,handleNumeric:d,messageFormat:h,isValidUnit:l,unit:u,trimSuffix:c}=this;if(!e||t&&!i){this.sync=false;this.displayedMessage=n("tecton.element.relativeTime.invalidDate");return}const p=a.intlFormatDistance(new Date(s),new Date(r),{locale:o,localeMatcher:"best fit",numeric:d,style:h,unit:l?u:null});if(c){this.displayedMessage=this.trimMessage(p)}else{this.displayedMessage=p}}trimMessage(e){return e.replace(/^in\s?/,"").replace(/\sago$/,"")}async displayedMessageValue(){return this.displayedMessage}async validDateProp(){return this.isValidDate}async validBaseDateProp(){return this.isValidBaseDate}render(){const{shouldShow:e,displayedMessage:s}=this;return t(i,{key:"441a46ba1701a606f87b53120a7dc8a696dc85e1"},e?t("time",{dateTime:s},s):null)}get hostElement(){return s(this)}static get watchers(){return{sync:["syncUpdated"],messageFormat:["updateMessage"],locale:["updateMessage"],date:["updateMessage"],baseDate:["updateMessage"],numeric:["updateMessage"],unit:["updateMessage"]}}};d.style=o;export{d as q2_relative_time};
+//# sourceMappingURL=p-9a5695db.entry.js.map

package/dist/q2-tecton-elements/p-9a5695db.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["q2RelativeTimeCss","Q2RelativeTimeStyle0","Q2RelativeTime","this","syncTimer","trimSuffix","document","documentElement","lang","componentWillLoad","updateMessage","connectedCallback","syncUpdated","disconnectedCallback","window","clearInterval","shouldShow","displayedMessage","isValidDate","date","Date","isValid","console","warn","dateObject","isBaseDateProvided","baseDate","undefined","isValidBaseDate","baseDateObject","sync","isValidUnit","includes","unit","handleNumeric","numeric","setInterval","locale","messageFormat","loc","message","intlFormatDistance","localeMatcher","style","trimMessage","replace","displayedMessageValue","validDateProp","validBaseDateProp","render","h","Fragment","key","dateTime"],"sources":["src/components/q2-relative-time/q2-relative-time.scss?tag=q2-relative-time&encapsulation=shadow","src/components/q2-relative-time/q2-relative-time.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline;\n}\n","import { Component, Prop, State, Method, Watch, Element, h, ComponentInterface, Fragment } from '@stencil/core';\nimport { isValid as isValidDate, intlFormatDistance } from 'date-fns';\nimport { loc } from '../../utils';\n\n@Component({ tag: 'q2-relative-time', shadow: true, styleUrl: 'q2-relative-time.scss' })\nexport class Q2RelativeTime implements ComponentInterface {\n    /**\n     * If you want to display the length of time between two specific dates, you can provide a valid `date` and `baseDate`, and the component will display the length of time between the two dates.\n     *\n     * If `baseDate` is not provided, the date and time at render will be used instead and - if `sync` is true - updated every second to reflect the time between the `date` value and the time at render.\n     *\n     * @warning\n     * - Requires a valid `date` value.\n     * - If the provided `baseDate` is invalid, the component will display \"Invalid Date\" and a warning message will be printed in the console.\n     * - Providing a valid `baseDate` will disable `sync` and remove the \"in\"/\"ago\" suffixes in the time message.\n     * - Must be a valid ISO date string.\n     */\n    @Prop({ reflect: true }) baseDate: Date | string;\n\n    /**\n     * The language used for the displayed message.\n     * @info\n     * It is recommended to use the BCP 47 Language Tags in the [\"language-extlang\" format](https://www.w3.org/International/articles/language-tags/).\n     */\n    @Prop({ reflect: true }) locale: string = document.documentElement.lang || 'en-US';\n\n    /** The length of the relative time message. */\n    @Prop({ reflect: true }) messageFormat: 'long' | 'short' | 'narrow' = 'short';\n\n    /**\n     * Determines if the displayed message will use numeric or relative values.\n     *@info\n     * Set this property to `always` to force the use of numeric values (e.g. \"1 day ago\") rather than relative ones (e.g. \"yesterday\").\n     */\n    @Prop({ reflect: true }) numeric: 'always' | 'auto' = 'auto';\n\n    /**\n     * Keep the displayed message updated as time passes in the webpage.\n     * @warning\n     * If a valid `baseDate` is provided, `sync` will be set to `false`.\n     */\n    @Prop({ reflect: true, mutable: true }) sync: boolean = true;\n\n    /**\n     * The date you want to calculate relative time from.\n     *\n     * @warning\n     * - Must be a valid ISO date string.\n     * - If the provided `date` is invalid, the component will display \"Invalid Date\" and a warning message will be printed in the console.\n     */\n    @Prop({ reflect: true }) date: Date | string;\n\n    /** Enforces the use of the provided unit of measurement in the displayed message. */\n    @Prop({ reflect: true }) unit: 'second' | 'minute' | 'hour' | 'day' | 'month' | 'quarter' | 'year';\n\n    /**\n     * @private\n     * Used to manage the sync timer that updates the time since the component was connected to the DOM.\n     * Will be set to null if a valid `baseDate` is provided.\n     */\n    syncTimer = null;\n\n    /** @private Will be set to true if a valid `baseDate` is provided. */\n    trimSuffix: boolean = false;\n\n    @State() displayedMessage: string;\n\n    @Element() hostElement: HTMLElement;\n\n    /// Lifecycle Hooks ///\n\n    componentWillLoad(): void | Promise<void> {\n        this.updateMessage();\n    }\n\n    connectedCallback(): void {\n        this.syncUpdated();\n    }\n\n    disconnectedCallback(): void {\n        window.clearInterval(this.syncTimer);\n        this.syncTimer = null;\n    }\n\n    /// Getters ///\n    get shouldShow(): boolean {\n        return !!this.displayedMessage;\n    }\n\n    get isValidDate(): boolean {\n        const date = new Date(this.date);\n        const isValid = isValidDate(date);\n        if (!isValid) console.warn('Error: Invalid date provided to q2-relative-time.');\n        return isValid;\n    }\n\n    get dateObject(): Date {\n        return new Date(this.date);\n    }\n\n    get isBaseDateProvided(): boolean {\n        return this.baseDate !== undefined;\n    }\n\n    get isValidBaseDate(): boolean {\n        const date = new Date(this.baseDate);\n        const isValid = isValidDate(date);\n        if (!isValid && this.isBaseDateProvided) {\n            console.warn('Error: Invalid baseDate provided to q2-relative-time.');\n        }\n        return isValid;\n    }\n\n    get baseDateObject(): Date {\n        if (this.isBaseDateProvided && this.isValidBaseDate) {\n            this.trimSuffix = true;\n            this.sync = false;\n            return new Date(this.baseDate);\n        } else {\n            this.trimSuffix = false;\n            this.sync = true;\n            return new Date();\n        }\n    }\n\n    get isValidUnit(): boolean {\n        if (['second', 'minute', 'hour', 'day', 'month', 'quarter', 'year'].includes(this.unit)) return true;\n        return false;\n    }\n\n    get handleNumeric(): 'always' | 'auto' {\n        if (this.isValidBaseDate) return 'always';\n        return this.numeric;\n    }\n\n    /// Watchers ///\n    @Watch('sync')\n    syncUpdated() {\n        if (this.sync) {\n            this.syncTimer = window.setInterval(() => {\n                this.updateMessage();\n            }, 1000);\n        } else {\n            window.clearInterval(this.syncTimer);\n            this.syncTimer = null;\n        }\n    }\n\n    @Watch('messageFormat')\n    @Watch('locale')\n    @Watch('date')\n    @Watch('baseDate')\n    @Watch('numeric')\n    @Watch('unit')\n    updateMessage() {\n        const {\n            isValidDate,\n            isBaseDateProvided,\n            isValidBaseDate,\n            dateObject,\n            baseDateObject,\n            locale,\n            handleNumeric,\n            messageFormat,\n            isValidUnit,\n            unit,\n            trimSuffix,\n        } = this;\n\n        if (!isValidDate || (isBaseDateProvided && !isValidBaseDate)) {\n            this.sync = false;\n            this.displayedMessage = loc('tecton.element.relativeTime.invalidDate');\n            return;\n        }\n\n        const message = intlFormatDistance(new Date(dateObject), new Date(baseDateObject), {\n            locale,\n            localeMatcher: 'best fit',\n            numeric: handleNumeric,\n            style: messageFormat,\n            unit: isValidUnit ? unit : null,\n        });\n\n        if (trimSuffix) {\n            this.displayedMessage = this.trimMessage(message);\n        } else {\n            this.displayedMessage = message;\n        }\n    }\n\n    /// Helpers ///\n    trimMessage(message: string): string {\n        return message.replace(/^in\\s?/, '').replace(/\\sago$/, '');\n    }\n\n    /// Methods ///\n    /** Retrieves the value of the displayed messages. */\n    @Method()\n    async displayedMessageValue(): Promise<string> {\n        return this.displayedMessage;\n    }\n\n    /** Checks the provided date prop is a valid date. */\n    @Method()\n    async validDateProp(): Promise<boolean> {\n        return this.isValidDate;\n    }\n\n    /** Checks the provided baseDate prop is a valid date. */\n    @Method()\n    async validBaseDateProp(): Promise<boolean> {\n        return this.isValidBaseDate;\n    }\n\n    /// DOM ///\n\n    render() {\n        const { shouldShow, displayedMessage } = this;\n\n        return <Fragment>{shouldShow ? <time dateTime={displayedMessage}>{displayedMessage}</time> : null}</Fragment>;\n    }\n}\n"],"mappings":"iIAAA,MAAMA,EAAoB,+qBAC1B,MAAAC,EAAeD,E,MCIFE,EAAc,M,yBAuDvBC,KAAAC,UAAY,KAGZD,KAAAE,WAAsB,M,oCAvCoBC,SAASC,gBAAgBC,MAAQ,Q,mBAGL,Q,aAOhB,O,UAOE,K,wEA8BxD,iBAAAC,GACIN,KAAKO,e,CAGT,iBAAAC,GACIR,KAAKS,a,CAGT,oBAAAC,GACIC,OAAOC,cAAcZ,KAAKC,WAC1BD,KAAKC,UAAY,I,CAIrB,cAAIY,GACA,QAASb,KAAKc,gB,CAGlB,eAAIC,GACA,MAAMC,EAAO,IAAIC,KAAKjB,KAAKgB,MAC3B,MAAME,EAAUH,UAAYC,GAC5B,IAAKE,EAASC,QAAQC,KAAK,qDAC3B,OAAOF,C,CAGX,cAAIG,GACA,OAAO,IAAIJ,KAAKjB,KAAKgB,K,CAGzB,sBAAIM,GACA,OAAOtB,KAAKuB,WAAaC,S,CAG7B,mBAAIC,GACA,MAAMT,EAAO,IAAIC,KAAKjB,KAAKuB,UAC3B,MAAML,EAAUH,UAAYC,GAC5B,IAAKE,GAAWlB,KAAKsB,mBAAoB,CACrCH,QAAQC,KAAK,wD,CAEjB,OAAOF,C,CAGX,kBAAIQ,GACA,GAAI1B,KAAKsB,oBAAsBtB,KAAKyB,gBAAiB,CACjDzB,KAAKE,WAAa,KAClBF,KAAK2B,KAAO,MACZ,OAAO,IAAIV,KAAKjB,KAAKuB,S,KAClB,CACHvB,KAAKE,WAAa,MAClBF,KAAK2B,KAAO,KACZ,OAAO,IAAIV,I,EAInB,eAAIW,GACA,GAAI,CAAC,SAAU,SAAU,OAAQ,MAAO,QAAS,UAAW,QAAQC,SAAS7B,KAAK8B,MAAO,OAAO,KAChG,OAAO,K,CAGX,iBAAIC,GACA,GAAI/B,KAAKyB,gBAAiB,MAAO,SACjC,OAAOzB,KAAKgC,O,CAKhB,WAAAvB,GACI,GAAIT,KAAK2B,KAAM,CACX3B,KAAKC,UAAYU,OAAOsB,aAAY,KAChCjC,KAAKO,eAAe,GACrB,I,KACA,CACHI,OAAOC,cAAcZ,KAAKC,WAC1BD,KAAKC,UAAY,I,EAUzB,aAAAM,GACI,MAAMQ,YACFA,EAAWO,mBACXA,EAAkBG,gBAClBA,EAAeJ,WACfA,EAAUK,eACVA,EAAcQ,OACdA,EAAMH,cACNA,EAAaI,cACbA,EAAaP,YACbA,EAAWE,KACXA,EAAI5B,WACJA,GACAF,KAEJ,IAAKe,GAAgBO,IAAuBG,EAAkB,CAC1DzB,KAAK2B,KAAO,MACZ3B,KAAKc,iBAAmBsB,EAAI,2CAC5B,M,CAGJ,MAAMC,EAAUC,qBAAmB,IAAIrB,KAAKI,GAAa,IAAIJ,KAAKS,GAAiB,CAC/EQ,SACAK,cAAe,WACfP,QAASD,EACTS,MAAOL,EACPL,KAAMF,EAAcE,EAAO,OAG/B,GAAI5B,EAAY,CACZF,KAAKc,iBAAmBd,KAAKyC,YAAYJ,E,KACtC,CACHrC,KAAKc,iBAAmBuB,C,EAKhC,WAAAI,CAAYJ,GACR,OAAOA,EAAQK,QAAQ,SAAU,IAAIA,QAAQ,SAAU,G,CAM3D,2BAAMC,GACF,OAAO3C,KAAKc,gB,CAKhB,mBAAM8B,GACF,OAAO5C,KAAKe,W,CAKhB,uBAAM8B,GACF,OAAO7C,KAAKyB,e,CAKhB,MAAAqB,GACI,MAAMjC,WAAEA,EAAUC,iBAAEA,GAAqBd,KAEzC,OAAO+C,EAACC,EAAQ,CAAAC,IAAA,4CAAEpC,EAAakC,EAAA,QAAMG,SAAUpC,GAAmBA,GAA2B,K"}

package/dist/q2-tecton-elements/{p-8fc099f5.entry.js → p-9b65cc28.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as e,g as i}from"./p-a5f18e27.js";import{f as s}from"./p-84190698.js";const o="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host([bordered]:not([bordered=false])) ::slotted(q2-item:not(:last-child)),:host([bordered]:not([bordered=false])) .header{border-style:var(--tct-list-item-border-style, solid);border-width:var(--tct-list-item-border-width, 0 0 1px 0);border-color:var(--tct-list-item-border-color, var(--t-gray-12, #d9d9d9))}.header{--comp-default-header-padding:0 var(--app-scale-4x, 20px);display:flex;gap:var(--app-scale-3x, 12px);padding:var(--tct-list-header-padding, var(--comp-default-header-padding));min-height:var(--tct-list-header-min-height, var(--t-list-header-min-height, 44px))}.header-spacebetween{justify-content:space-between}.header-start{justify-content:flex-start}.header-end{justify-content:flex-end}.header .label{width:100%;height:var(--tct-list-label-height, 44px);line-height:var(--tct-list-label-line-height, 44px);font-size:var(--tct-list-label-font-size, var(--app-font-size, 14px));font-weight:var(--tct-list-label-font-weight, 600);color:var(--tct-list-label-font-color, var(--t-text, #4d4d4d))}.main{grid-column:2;grid-row:1}.main-no-action-nor-bullet{grid-column:1}.main-no-bullet{grid-column:1}";const n=o;const r=class{constructor(e){t(this,e);this.scheduledAfterRender=[];this.onMutationObserved=()=>{this.renderTrigger+=1;this.scheduledAfterRender.push((()=>{Array.from(this.hostElement.children).forEach((t=>{if(t.tagName==="Q2-ITEM")t.role="listitem"}))}))};this.label=undefined;this.renderTrigger=0;this.bordered=undefined}componentDidLoad(){if(typeof MutationObserver==="undefined")return;const t=new MutationObserver(this.onMutationObserved);t.observe(this.hostElement,{childList:true,subtree:true});this.mutationObserver=t;this.onMutationObserved()}componentDidRender(){this.scheduledAfterRender.forEach((t=>t()));this.scheduledAfterRender=[]}disconnectedCallback(){if(this.mutationObserver){this.mutationObserver.disconnect();this.mutationObserver=null}}get hasLabelContent(){return!!this.label}get hasFilterSlot(){return!!this.hostElement.querySelector("q2-pill")||s(this.hostElement,"pill")}get headerClasses(){const t=["header"];if(this.hasLabelContent&&this.hasFilterSlot){t.push("header-spacebetween")}else if(this.hasLabelContent&&!this.hasFilterSlot){t.push("header-start")}else if(!this.hasLabelContent&&this.hasFilterSlot){t.push("header-end")}return t.join(" ")}get listClasses(){const t=["list"];return t.join(" ")}render(){return e("div",{key:"5cf0fbf1cf90821aad8380a082925050834930c5",class:this.listClasses,ref:t=>this.listElement=t},(this.hasFilterSlot||this.hasLabelContent)&&e("div",{key:"e34cb030fc9a5ddd52f3b9668f5e4e6606a90ab3",class:this.headerClasses},e("div",{key:"2c698cdc7359ba6404423c7f508b1f3583385de5",class:"label"},this.label),this.hasFilterSlot&&e("slot",{key:"19e450240e0788440e61ea85bf729533c3dfef5f",name:"filter"})),e("div",{key:"44c1a6503f9c80c01b3d58b48641272b580b0add",role:"list"},e("slot",{key:"941440f0f21772302f0ac5ef70a42d4820cca063"})))}get hostElement(){return i(this)}};r.style=n;export{r as q2_list};
-//# sourceMappingURL=p-8fc099f5.entry.js.map
+import{r as t,h as e,g as i}from"./p-a5f18e27.js";import{f as s}from"./p-84190698.js";const o="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host([bordered]:not([bordered=false])) ::slotted(q2-item:not(:last-child)),:host([bordered]:not([bordered=false])) .header{border-style:var(--tct-list-item-border-style, solid);border-width:var(--tct-list-item-border-width, 0 0 1px 0);border-color:var(--tct-list-item-border-color, var(--t-gray-12, #d9d9d9))}.header{--comp-default-header-padding:0 var(--app-scale-4x, 20px);display:flex;gap:var(--app-scale-3x, 12px);padding:var(--tct-list-header-padding, var(--comp-default-header-padding));min-height:var(--tct-list-header-min-height, var(--t-list-header-min-height, 44px))}.header-spacebetween{justify-content:space-between}.header-start{justify-content:flex-start}.header-end{justify-content:flex-end}.header .label{width:100%;height:var(--tct-list-label-height, 44px);line-height:var(--tct-list-label-line-height, 44px);font-size:var(--tct-list-label-font-size, var(--app-font-size, 14px));font-weight:var(--tct-list-label-font-weight, 600);color:var(--tct-list-label-font-color, var(--t-text, #4d4d4d))}.main{grid-column:2;grid-row:1}.main-no-action-nor-bullet{grid-column:1}.main-no-bullet{grid-column:1}";const n=o;const r=class{constructor(e){t(this,e);this.scheduledAfterRender=[];this.onMutationObserved=()=>{this.renderTrigger+=1;this.scheduledAfterRender.push((()=>{Array.from(this.hostElement.children).forEach((t=>{if(t.tagName==="Q2-ITEM")t.role="listitem"}))}))};this.label=undefined;this.renderTrigger=0;this.bordered=undefined}componentDidLoad(){if(typeof MutationObserver==="undefined")return;const t=new MutationObserver(this.onMutationObserved);t.observe(this.hostElement,{childList:true,subtree:true});this.mutationObserver=t;this.onMutationObserved()}componentDidRender(){this.scheduledAfterRender.forEach((t=>t()));this.scheduledAfterRender=[]}disconnectedCallback(){if(this.mutationObserver){this.mutationObserver.disconnect();this.mutationObserver=null}}get hasLabelContent(){return!!this.label}get hasFilterSlot(){return!!this.hostElement.querySelector("q2-pill")||s(this.hostElement,"pill")}get headerClasses(){const t=["header"];if(this.hasLabelContent&&this.hasFilterSlot){t.push("header-spacebetween")}else if(this.hasLabelContent&&!this.hasFilterSlot){t.push("header-start")}else if(!this.hasLabelContent&&this.hasFilterSlot){t.push("header-end")}return t.join(" ")}get listClasses(){const t=["list"];return t.join(" ")}render(){return e("div",{key:"03d62cc3436abd29994c02efef17db29f3043371",class:this.listClasses,ref:t=>this.listElement=t},(this.hasFilterSlot||this.hasLabelContent)&&e("div",{key:"62aa472c52425d9bd8474c9927ff1f018a94f588",class:this.headerClasses},e("div",{key:"a288af4640d75ae48443d390bd5a5b591f61732a",class:"label"},this.label),this.hasFilterSlot&&e("slot",{key:"44a788d43c1390890b6c1e1bce642fc9d252e517",name:"filter"})),e("div",{key:"6dff69032b9f6b6d5cc9ed2e032a757a9690dc9d",role:"list"},e("slot",{key:"d1ae622b365cf5f071ea6b2ed1df6c700a977a64"})))}get hostElement(){return i(this)}};r.style=n;export{r as q2_list};
+//# sourceMappingURL=p-9b65cc28.entry.js.map