q2-tecton-elements 1.45.3 → 1.46.1

package/dist/components/q2-select2.js

@@ -0,0 +1,715 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { l as loc, h as handleAriaLabel, o as overrideFocus, w as waitForNextPaint, t as isRelatedTargetWithinHost, i as isEventFromElement, u as isHostLosingFocus } from './index2.js';
+import { s as shouldShowActionSheet, a as showActionSheetList } from './action-sheet.js';
+import { d as defineCustomElement$8 } from './click-elsewhere2.js';
+import { d as defineCustomElement$7 } from './q2-badge2.js';
+import { d as defineCustomElement$6 } from './q2-btn2.js';
+import { d as defineCustomElement$5 } from './q2-icon2.js';
+import { d as defineCustomElement$4 } from './q2-input2.js';
+import { d as defineCustomElement$3 } from './q2-loading2.js';
+import { d as defineCustomElement$2 } from './q2-option-list2.js';
+import { d as defineCustomElement$1 } 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 = /*@__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();
+        };
+        this.onCustomDisplayClick = (event) => {
+            event.stopPropagation();
+            this.focusInput();
+            this.toggleDropdown();
+        };
+        this.disabled = false;
+        this.errors = undefined;
+        this.hideLabel = undefined;
+        this.clearable = 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() {
+        var _a;
+        const showAsPseudo = !this.searchable;
+        return (h("click-elsewhere", { key: 'a3fbee9295ca05dbb4856eebf5e6fb53a9f9e2a3', class: this.wrapperClasses, onChange: this.clickedElsewhere }, h("div", { key: 'a50de81a29cca3188898f6d4b6e16cbbfb6839f4', "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage), h("q2-input", { key: '6059e00c0d5b86920a9193b9bf3bd06d0de27d92', ref: el => (this.inputField = el), class: "q2-select-input", label: (this.label && loc(this.label)) || '', value: this.selectedDisplay, clearable: (this.clearable && (!!this.value || !!((_a = this.selectedOptions) === null || _a === void 0 ? void 0 : _a.length))) || undefined, 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, _role: "combobox" }, this.renderCustomDisplay()), h("div", { key: '3d0564757940cb634bac20ff556e540ef455f695', class: "custom-display-content", hidden: !this.hasCustomDisplay || !!this.searchText, onClick: this.onCustomDisplayClick }, h("slot", { key: 'dfdfcb9a0ca41f229d2b50c3b300f47cc565cace', 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"],
+        "clearable": [516],
+        "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() {
+    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);
+            }
+            break;
+        case "click-elsewhere":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "q2-badge":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "q2-btn":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "q2-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "q2-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "q2-loading":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "q2-option-list":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "q2-popover":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { Q2Select as Q, defineCustomElement as d };
+
+//# sourceMappingURL=q2-select2.js.map