q2-tecton-elements 1.45.3 → 1.46.1

package/dist/components/q2-select.js

@@ -1,714 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { l as loc, h as handleAriaLabel, o as overrideFocus, w as waitForNextPaint, g as isRelatedTargetWithinHost, i as isEventFromElement, j as isHostLosingFocus } from './index2.js';
-import { s as shouldShowActionSheet, a as showActionSheetList } from './action-sheet.js';
-import { d as defineCustomElement$9 } from './click-elsewhere2.js';
-import { d as defineCustomElement$8 } from './q2-badge2.js';
-import { d as defineCustomElement$7 } from './q2-btn2.js';
-import { d as defineCustomElement$6 } from './q2-icon2.js';
-import { d as defineCustomElement$5 } from './q2-input2.js';
-import { d as defineCustomElement$4 } from './q2-loading2.js';
-import { d as defineCustomElement$3 } from './q2-option-list2.js';
-import { d as defineCustomElement$2 } from './q2-popover2.js';
-
-const q2SelectCss = "*{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-select-margin:var(--tct-select-margin, var(--tct-select-margin-top, var(--t-select-margin-top, var(--app-scale-4, 30px))) 0 var(--tct-select-margin-bottom, var(--t-select-margin-bottom, var(--app-scale-4, 30px))));display:block;margin:var(--comp-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 Q2SelectStyle0 = q2SelectCss;
-
-const Q2Select$1 = /*@__PURE__*/ proxyCustomElement(class Q2Select extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.change = createEvent(this, "change", 7);
-        this.input = createEvent(this, "input", 7);
-        var _a;
-        this.scheduledAfterRender = [];
-        this.showSelectedOptions = () => {
-            this.showSelected = true;
-        };
-        this.showAllOptions = () => {
-            this.showSelected = false;
-        };
-        this.onMutationObserved = () => {
-            const { hostElement, hasPopoverTop, hasPopoverBottom } = this;
-            const slotContainer = hostElement.querySelector('.custom-display-content');
-            const displaySlot = hostElement.shadowRoot.querySelector('slot[name="q2-select-display"]');
-            const hasCustomDisplay = !!displaySlot
-                ? displaySlot.assignedNodes().length > 0
-                : slotContainer.children.length > 0;
-            if (this.hasCustomDisplay !== hasCustomDisplay) {
-                this.hasCustomDisplay = hasCustomDisplay;
-            }
-            const popTopSlot = hostElement.shadowRoot.querySelector('slot[name="popover-top"]');
-            const topSlotHasNode = popTopSlot.assignedNodes().length > 0;
-            if (hasPopoverTop !== topSlotHasNode) {
-                this.hasPopoverTop = topSlotHasNode;
-            }
-            const popBottomSlot = hostElement.shadowRoot.querySelector('slot[name="popover-bottom"]');
-            const bottomSlotHasNode = popBottomSlot.assignedNodes().length > 0;
-            if (hasPopoverBottom !== bottomSlotHasNode) {
-                this.hasPopoverBottom = bottomSlotHasNode;
-            }
-            this.checkSelectedOptions();
-        };
-        this.onOptionListChange = (event) => {
-            event.stopPropagation();
-            const { values } = event.detail;
-            if (values.length === 0)
-                this.showAllOptions();
-            this.handleSelectionChanges(event.detail);
-        };
-        /// Event handlers ///
-        this.onPopoverState = ({ detail: { open, action }, }) => {
-            if (!open || this.searchText) {
-                if (action !== 'select') {
-                    this.optionList.setActiveElement(null);
-                }
-                this.inputField.focus();
-            }
-            if (this.open === open)
-                return;
-            this.open = open;
-        };
-        this.inputKeydownHandler = (event) => {
-            if (this.readonly || this.disabled)
-                return;
-            const key = event.key;
-            const hasSlot = this.hasPopoverTop || this.hasPopoverBottom;
-            const isShiftTab = key === 'Tab' && event.shiftKey;
-            if (hasSlot && (key === 'Tab' || key === 'Enter' || isShiftTab))
-                return;
-            if (shouldShowActionSheet(this, event)) {
-                return this.executeActionSheet(event);
-            }
-            const keysForOptionListToHandle = [
-                'ArrowDown',
-                'ArrowUp',
-                'PageDown',
-                'PageUp',
-                'Home',
-                'End',
-                'Escape',
-                'Tab',
-            ];
-            if (this.searchable && !keysForOptionListToHandle.includes(key))
-                return;
-            if (this.shouldClearSearchText(event))
-                this.clearSearchText();
-            // Prevent click event from firing when spacebar is pressed
-            if (key === ' ')
-                event.preventDefault();
-            this.optionList.handleExternalKeydown(event);
-        };
-        this.visibilityToggleKeyDown = (event) => {
-            const key = event.key;
-            const isShiftTab = key === 'Tab' && event.shiftKey;
-            const isRadioControlKey = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(key);
-            if (isRadioControlKey)
-                event.stopPropagation();
-            if (isShiftTab) {
-                event.stopPropagation();
-                // allows shift+tab keys to select the top slot when present
-                if (this.hasPopoverTop)
-                    return;
-                this.optionList.setDefaultActiveElement();
-            }
-        };
-        this.inputClickHandler = async (event) => {
-            event.stopPropagation();
-            if (shouldShowActionSheet(this)) {
-                return this.executeActionSheet(event);
-            }
-            this.toggleDropdown();
-            this.focusInput();
-        };
-        this.inputInputHandler = (event) => {
-            event.stopPropagation();
-            const eventValue = event.detail.value;
-            const shouldClearValue = !!this.value;
-            if (shouldClearValue)
-                this.clearValue();
-            if (!this.open)
-                this.openDropdownWithoutActiveElement();
-            this.prioritizeSearch = true;
-            this.searchText = eventValue;
-            this.input.emit({ query: eventValue });
-        };
-        this.inputFocusHandler = () => {
-            this.inputFocused = true;
-        };
-        this.inputBlurHandler = () => {
-            this.inputFocused = false;
-        };
-        this.inputChangeHandler = (event) => {
-            event.stopPropagation();
-        };
-        this.clickedElsewhere = (event) => {
-            const target = event.target;
-            if (target.localName !== 'click-elsewhere')
-                return;
-            event.stopPropagation();
-            if (!this.open)
-                return;
-            this.closeDropdown();
-        };
-        this.onCustomDisplayClick = (event) => {
-            event.stopPropagation();
-            this.focusInput();
-            this.toggleDropdown();
-        };
-        this.disabled = false;
-        this.errors = undefined;
-        this.hideLabel = undefined;
-        this.hoist = !!((_a = window.Tecton) === null || _a === void 0 ? void 0 : _a.useActionSheets);
-        this.invalid = undefined;
-        this.label = undefined;
-        this.listLabel = loc('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 = [];
-    }
-    /// Lifecycle Hooks ///
-    componentWillLoad() {
-        handleAriaLabel(this);
-        this.buildStructuredSelectedOptions();
-        this.handleMultilineOptionsUpdate(this.multilineOptions, false);
-    }
-    componentDidLoad() {
-        const observer = new MutationObserver(this.onMutationObserved);
-        observer.observe(this.hostElement, { childList: true, subtree: true });
-        this.mutationObserver = observer;
-        this.onMutationObserved();
-        overrideFocus(this.hostElement);
-        setTimeout(() => this.checkSelectedDisplay(), 0);
-    }
-    componentDidRender() {
-        setTimeout(() => {
-            this.scheduledAfterRender.forEach(fn => fn());
-            this.scheduledAfterRender = [];
-        }, 25);
-    }
-    disconnectedCallback() {
-        var _a;
-        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-        this.mutationObserver = null;
-    }
-    /// Getters ///
-    get innerInputField() {
-        var _a, _b;
-        return (_b = (_a = this.inputField) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.input-field');
-    }
-    get innerInputContainer() {
-        var _a, _b;
-        return (_b = (_a = this.inputField) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.input-container');
-    }
-    get badgeValue() {
-        var _a, _b;
-        if (!this.multiple)
-            return null;
-        const optionsLength = (_b = (_a = this.selectedOptions) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
-        if (this.open && this.searchable)
-            return optionsLength ? `${optionsLength}` : null;
-        else
-            return optionsLength > 1 ? `+${optionsLength - 1}` : null;
-    }
-    get popoverMinHeight() {
-        const { minRows } = this;
-        const firstOption = this.hostElement.querySelector('q2-option:not([hidden])');
-        let minHeight = firstOption && window.getComputedStyle(firstOption).minHeight;
-        // Safari doesn't return a min-height for non-visible items
-        if (!minHeight || minHeight === '0px')
-            minHeight = '44px';
-        return minRows * parseInt(minHeight);
-    }
-    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 _a;
-        return this.multiple ? (_a = this.selectedOptions) === null || _a === void 0 ? void 0 : _a[0] : this.value;
-    }
-    get firstSelectedOptionElement() {
-        const { firstSelectedValue } = this;
-        return firstSelectedValue ? this.optionElements.find(({ value }) => value === firstSelectedValue) : null;
-    }
-    get optionElements() {
-        return Array.from(this.hostElement.querySelectorAll('q2-option'));
-    }
-    get wrapperClasses() {
-        const { errors } = this;
-        const classes = ['q2-select-container'];
-        if (Array.isArray(errors) && errors.length > 0)
-            classes.push('has-error');
-        if (this.inputFocused)
-            classes.push('is-focused');
-        if (this.searchable)
-            classes.push('is-searchable');
-        return classes.join(' ');
-    }
-    /// Watchers ///
-    buildStructuredSelectedOptions() {
-        const { multiple, selectedOptions, value } = this;
-        if (multiple) {
-            this.structuredSelectedOptions = !!(selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length)
-                ? selectedOptions.map(option => (typeof option === 'string' ? { value: option } : option))
-                : [];
-        }
-        else {
-            this.structuredSelectedOptions = value ? [{ value }] : [];
-        }
-    }
-    ariaLabelObserver() {
-        handleAriaLabel(this);
-    }
-    valueUpdated() {
-        if (this.multiple)
-            return;
-        this.clearSearchText();
-    }
-    handleMultilineOptionsUpdate(newValue, oldValue) {
-        if (newValue === oldValue)
-            return;
-        this.optionElements.forEach(element => (element.multiline = newValue));
-    }
-    openChanged(isOpen) {
-        this.scheduledAfterRender.push(async () => {
-            await waitForNextPaint();
-            const { popoverTopContainer, popoverElement } = this;
-            const height = (isOpen && (popoverTopContainer === null || popoverTopContainer === void 0 ? void 0 : popoverTopContainer.offsetHeight)) || 0;
-            if (height) {
-                popoverElement.style.setProperty('--comp-popover-top-container-height', `${height}px`);
-            }
-            else {
-                popoverElement.style.removeProperty('--comp-popover-top-container-height');
-            }
-        });
-    }
-    /// Methods ///
-    _togglePopover() {
-        const { innerInputField } = this;
-        innerInputField === null || innerInputField === void 0 ? void 0 : innerInputField.click();
-        innerInputField === null || innerInputField === void 0 ? void 0 : innerInputField.focus();
-        innerInputField.dispatchEvent(new FocusEvent('focus'));
-    }
-    /**
-     * Emulates clicking the `<input>` to display the popover if it is hidden.
-     *
-     * @testOnly
-     */
-    async openPopover() {
-        if (this.open || this.disabled)
-            return;
-        this._togglePopover();
-    }
-    /**
-     * Emulates clicking the `<input>` to hide the popover if it is visible.
-     *
-     * @testOnly
-     */
-    async closePopover() {
-        if (!this.open || this.disabled)
-            return;
-        this._togglePopover();
-    }
-    /**
-     * Emulates clicking the `<input>` to display the popover and selecting the option(s) with the specified value(s).
-     *
-     * If the multi-select is enabled and the `closePopover` argument is `true` (default), the popover will be closed
-     * after the option(s) are selected.
-     *
-     * @testOnly
-     */
-    async setValue(values, options = { closePopover: true }) {
-        const valuesSet = new Set(Array.isArray(values) ? values : [values]);
-        if (!this.open) {
-            await this.openPopover();
-            await waitForNextPaint();
-        }
-        valuesSet.forEach(value => {
-            var _a;
-            (_a = this.optionElements.find(option => option.value === value)) === null || _a === void 0 ? void 0 : _a.click();
-        });
-        if (options.closePopover) {
-            await this.closePopover();
-            await waitForNextPaint();
-        }
-    }
-    /**
-     * Emulates focusing the `<input>`, entering the provided value, and emitting an `input` event.
-     *
-     * @warning
-     * Only applicable when the input is searchable.
-     *
-     * @testOnly
-     */
-    searchOptions(query) {
-        if (!this.searchable)
-            return;
-        const { innerInputField } = this;
-        innerInputField.focus();
-        innerInputField.dispatchEvent(new FocusEvent('focus'));
-        innerInputField.value = query;
-        innerInputField.dispatchEvent(new InputEvent('input'));
-    }
-    /// Listeners ///
-    keydownHandler(event) {
-        this.inputKeydownHandler(event);
-    }
-    onHostElementChange(event) {
-        if (this.readonly || this.disabled)
-            return;
-        if (event.target !== this.hostElement || this.hostElement.onchange)
-            return;
-        if (this.multiple) {
-            this.value = null;
-            this.selectedOptions = event.detail.selectedOptions;
-        }
-        else {
-            this.value = event.detail.value;
-            this.selectedOptions = [];
-        }
-    }
-    onHostElementInput(event) {
-        if (!this.searchable || event.target !== this.hostElement || this.hostElement.oninput)
-            return;
-        const options = this.optionElements;
-        const query = this.searchText.trim().toLocaleLowerCase();
-        let matchedCount = 0;
-        options.forEach(option => {
-            var _a;
-            if (query === '') {
-                option.hidden = false;
-                return;
-            }
-            const title = ((_a = option.firstElementChild) === null || _a === void 0 ? void 0 : _a.tagName) === 'Q2-CARD'
-                ? option.firstElementChild.title
-                : null;
-            const { display = '', innerText = '' } = option;
-            const searchParams = [display, title, innerText];
-            const matched = searchParams.some(text => { var _a; return (_a = text === null || text === void 0 ? void 0 : text.toLocaleLowerCase().includes(query)) !== null && _a !== void 0 ? _a : false; });
-            option.hidden = !matched;
-            if (matched)
-                matchedCount++;
-        });
-        const statusMessageLocString = query
-            ? 'tecton.element.select.searchable.results'
-            : 'tecton.element.select.allOptions';
-        const count = query ? matchedCount : options.length;
-        this.setStatusMessage(loc(statusMessageLocString, [count]));
-    }
-    delegateFocus(event) {
-        const fromHost = isRelatedTargetWithinHost(event, this.hostElement);
-        const prioritizeSearch = (this.prioritizeSearch = fromHost && this.searchable);
-        if (prioritizeSearch) {
-            this.clearSelectedDisplay();
-        }
-        else if (isEventFromElement(event, this.hostElement)) {
-            this.inputField.shadowRoot.querySelector('.input-field').focus();
-        }
-    }
-    handleFocusout(event) {
-        const isLeavingHost = isHostLosingFocus(event, this.hostElement);
-        if (isLeavingHost)
-            this.closeDropdown();
-        this.prioritizeSearch = !isLeavingHost && this.searchable;
-    }
-    handleSelectedDisplay(event) {
-        if (this.multiple)
-            return;
-        this.inputField.value = event.detail.display;
-    }
-    /// Helpers ///
-    async executeActionSheet(event) {
-        const result = await showActionSheetList(this, event);
-        this.handleSelectionChanges(result);
-    }
-    handleSelectionChanges(changeDetails) {
-        const { value = '', values = [] } = changeDetails;
-        const selectedOptionValues = values.map(value => value.value);
-        const { multiple } = this;
-        if (!this.hostElement.onchange) {
-            this.selectedOptions = selectedOptionValues;
-        }
-        this.change.emit({
-            value: multiple ? undefined : value,
-            selectedOptions: multiple ? selectedOptionValues : undefined,
-        });
-    }
-    clearValue() {
-        const { multiple } = this;
-        this.value = '';
-        this.selectedOptions = [];
-        this.change.emit({ value: multiple ? undefined : '', selectedOptions: multiple ? [] : undefined });
-    }
-    calculateMultiSelectSelectedDisplay() {
-        var _a, _b, _c;
-        const { firstSelectedOptionElement, firstSelectedValue, multilineOptions } = this;
-        if (!firstSelectedValue)
-            return '';
-        if (firstSelectedOptionElement === null || firstSelectedOptionElement === void 0 ? void 0 : firstSelectedOptionElement.display)
-            return loc(firstSelectedOptionElement.display);
-        if (multilineOptions && this.searchable)
-            return this.searchText;
-        if (multilineOptions)
-            return '';
-        return ((_c = (_b = (_a = firstSelectedOptionElement === null || firstSelectedOptionElement === void 0 ? void 0 : firstSelectedOptionElement.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : firstSelectedOptionElement === null || firstSelectedOptionElement === void 0 ? void 0 : firstSelectedOptionElement.value) !== null && _c !== void 0 ? _c : firstSelectedValue);
-    }
-    calculateSingleSelectSelectedDisplay() {
-        var _a;
-        const { firstSelectedOptionElement, multilineOptions } = this;
-        if (multilineOptions) {
-            return ((firstSelectedOptionElement === null || firstSelectedOptionElement === void 0 ? void 0 : firstSelectedOptionElement.display) && loc(firstSelectedOptionElement.display)) || this.value || '';
-        }
-        else {
-            return (((firstSelectedOptionElement === null || firstSelectedOptionElement === void 0 ? void 0 : firstSelectedOptionElement.display) && loc(firstSelectedOptionElement.display)) ||
-                ((_a = firstSelectedOptionElement === null || firstSelectedOptionElement === void 0 ? void 0 : firstSelectedOptionElement.textContent) === null || _a === void 0 ? void 0 : _a.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 _a;
-        (_a = this.inputField) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new FocusEvent('focus'));
-    }
-    setStatusMessage(message) {
-        clearTimeout(this.statusMessageTimer);
-        this.statusMessage = '';
-        this.statusMessageTimer = setTimeout(() => {
-            this.statusMessage = message;
-        }, 1000);
-    }
-    checkSelectedOptions() {
-        const { multiple, selectedOptions, value } = this;
-        this.optionElements.forEach(option => {
-            if (multiple) {
-                option.selected = selectedOptions.includes(option.value);
-            }
-            else {
-                option.selected = option.value === value;
-            }
-        });
-    }
-    clearSelectedDisplay() {
-        var _a;
-        (_a = this.selectedDisplaySlot) === null || _a === void 0 ? void 0 : _a.remove();
-    }
-    checkSelectedDisplay() {
-        let namedSlot = this.selectedDisplaySlot;
-        const { value, multiple, selectedOptions, multilineOptions, firstSelectedOptionElement, prioritizeSearch } = this;
-        const hasNoValue = !value && multiple && !(selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length);
-        if (prioritizeSearch || !multilineOptions || hasNoValue)
-            return this.clearSelectedDisplay();
-        if (!firstSelectedOptionElement || firstSelectedOptionElement.display)
-            return this.clearSelectedDisplay();
-        // Clone selected option and remove elements with hide-on-select attribute
-        const selectionClone = firstSelectedOptionElement.firstElementChild.cloneNode(true);
-        selectionClone.querySelectorAll('[hide-on-select]').forEach(element => element.remove());
-        if (namedSlot) {
-            const height = namedSlot.clientHeight === 0 ? 'auto' : `${namedSlot.clientHeight}px`;
-            namedSlot.style.setProperty('--comp-selected-display-height', height);
-            if (namedSlot.firstElementChild.outerHTML !== selectionClone.outerHTML) {
-                namedSlot.replaceChild(selectionClone, namedSlot.firstElementChild);
-            }
-        }
-        else {
-            namedSlot = document.createElement('div');
-            namedSlot.slot = '_selected-display';
-            namedSlot.appendChild(selectionClone);
-            this.hostElement.appendChild(namedSlot);
-        }
-        return namedSlot;
-    }
-    checkSelectedDisplayHeight() {
-        const { selectedDisplaySlot } = this;
-        if (!selectedDisplaySlot)
-            return;
-        selectedDisplaySlot.style.setProperty('--comp-selected-display-height', '44px');
-    }
-    shouldClearSearchText(event) {
-        return this.searchable && !!this.searchText && event.key === 'Escape';
-    }
-    /// DOM ///
-    renderCustomDisplay() {
-        const hasSelectedDisplay = this.checkSelectedDisplay();
-        if (!hasSelectedDisplay)
-            return;
-        this.checkSelectedDisplayHeight();
-        return (h("slot", { name: "_selected-display", slot: "custom-display" }));
-    }
-    render() {
-        const showAsPseudo = !this.searchable;
-        return (h("click-elsewhere", { key: '67f66cfdbe0c4810ffd60851709a13516e5f3589', class: this.wrapperClasses, onChange: this.clickedElsewhere }, h("div", { key: 'b7d99f4b369df5b0cb1690aea89f2668bce06be4', "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage), h("q2-input", { key: '85fafac4a31606f23044ae253fa0b663f84a79da', ref: el => (this.inputField = el), class: "q2-select-input", label: (this.label && loc(this.label)) || '', value: this.selectedDisplay, errors: (Array.isArray(this.errors) &&
-                this.errors.length > 0 &&
-                this.errors.map(error => loc(error))) ||
-                (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", role: "combobox", pseudo: showAsPseudo, "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 }, this.renderCustomDisplay()), h("div", { key: '6c772f768802a3ad6594ffdebb15bc007ef3d5e6', class: "custom-display-content", hidden: !this.hasCustomDisplay || !!this.searchText, onClick: this.onCustomDisplayClick }, h("slot", { key: '52723512795f9f95b780524ea9168e9c8133d81f', name: "q2-select-display" })), this.optionsDropdown()));
-    }
-    optionsDropdown() {
-        return (h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: this.innerInputContainer, open: this.open, minHeight: this.popoverMinHeight, direction: this.popDirection, mode: this.popoverMode || undefined, block: true }, h("div", { class: "popover-content" }, h("q2-option-list", { onPopoverState: this.onPopoverState, ref: el => (this.optionList = el), type: "listbox", id: "option-list", "show-selected": this.showSelected, label: this.listLabel, multiple: this.multiple, selectedOptions: this.structuredSelectedOptions, onChange: this.onOptionListChange }, h("slot", null)), h("div", { class: "popover-top-container", ref: el => (this.popoverTopContainer = el), hidden: !this.multiple && !this.hasPopoverTop, tabindex: "-1" }, h("slot", { name: "popover-top" }), this.multiple && this.visibilityToggle())), h("div", { class: "popover-bottom-container", hidden: !this.hasPopoverBottom, tabindex: "-1" }, h("slot", { name: "popover-bottom" }))));
-    }
-    visibilityToggle() {
-        var _a, _b;
-        const selectedOptionsCount = (_b = (_a = this.selectedOptions) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
-        const { showSelected } = this;
-        return (h("div", { class: "multi-select-header" }, h("fieldset", null, h("legend", { "aria-label": loc('tecton.element.select.multiHeader.showing') }, loc('tecton.element.select.multiHeader.showing')), h("div", null, h("input", { class: "sr", type: "radio", id: "all", name: "viewDisplay", value: "all", checked: !showSelected, "aria-label": loc('tecton.element.select.multiHeader.allAriaLabel'), "test-id": "allOptionsButton", onClick: this.showAllOptions, onKeyDown: this.visibilityToggleKeyDown }), h("label", { htmlFor: "all" }, loc('tecton.element.select.multiHeader.all'))), h("div", null, h("input", { class: "sr", type: "radio", id: "selected", disabled: selectedOptionsCount === 0, name: "viewDisplay", value: "selected", "aria-label": loc('tecton.element.select.multiHeader.selectedAriaLabel', [
-                selectedOptionsCount,
-            ]), checked: showSelected, "test-id": "selectedOptionsButton", onClick: this.showSelectedOptions, onKeyDown: this.visibilityToggleKeyDown }), h("label", { htmlFor: "selected" }, loc('tecton.element.select.multiHeader.selected', [selectedOptionsCount]))))));
-    }
-    get hostElement() { return this; }
-    static get watchers() { return {
-        "value": ["buildStructuredSelectedOptions", "valueUpdated"],
-        "selectedOptions": ["buildStructuredSelectedOptions"],
-        "ariaLabel": ["ariaLabelObserver"],
-        "multilineOptions": ["handleMultilineOptionsUpdate"],
-        "open": ["openChanged"]
-    }; }
-    static get style() { return Q2SelectStyle0; }
-}, [1, "q2-select", {
-        "disabled": [516],
-        "errors": [16],
-        "hideLabel": [1540, "hide-label"],
-        "hoist": [4],
-        "invalid": [516],
-        "label": [1537],
-        "listLabel": [1, "list-label"],
-        "minRows": [2, "min-rows"],
-        "multilineOptions": [516, "multiline-options"],
-        "multiple": [516],
-        "optional": [516],
-        "placeholder": [513],
-        "popDirection": [513, "pop-direction"],
-        "popoverMode": [1025, "popover-mode"],
-        "readonly": [516],
-        "searchable": [516],
-        "selectedOptions": [1040],
-        "value": [1025],
-        "ariaLabel": [1537, "aria-label"],
-        "open": [32],
-        "showSelected": [32],
-        "searchText": [32],
-        "hasCustomDisplay": [32],
-        "hasPopoverTop": [32],
-        "hasPopoverBottom": [32],
-        "inputFocused": [32],
-        "statusMessage": [32],
-        "prioritizeSearch": [32],
-        "structuredSelectedOptions": [32],
-        "openPopover": [64],
-        "closePopover": [64],
-        "setValue": [64],
-        "searchOptions": [64]
-    }, [[0, "keydown", "keydownHandler"], [0, "change", "onHostElementChange"], [0, "input", "onHostElementInput"], [0, "focus", "delegateFocus"], [0, "focusout", "handleFocusout"], [0, "displayChanged", "handleSelectedDisplay"]], {
-        "value": ["buildStructuredSelectedOptions", "valueUpdated"],
-        "selectedOptions": ["buildStructuredSelectedOptions"],
-        "ariaLabel": ["ariaLabelObserver"],
-        "multilineOptions": ["handleMultilineOptionsUpdate"],
-        "open": ["openChanged"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["q2-select", "click-elsewhere", "q2-badge", "q2-btn", "q2-icon", "q2-input", "q2-loading", "q2-option-list", "q2-popover"];
-    components.forEach(tagName => { switch (tagName) {
-        case "q2-select":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, Q2Select$1);
-            }
-            break;
-        case "click-elsewhere":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$9();
-            }
-            break;
-        case "q2-badge":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "q2-btn":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "q2-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "q2-input":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "q2-loading":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "q2-option-list":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "q2-popover":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
+import { Q as Q2Select$1, d as defineCustomElement$1 } from './q2-select2.js';
 
 const Q2Select = Q2Select$1;
 const defineCustomElement = defineCustomElement$1;