q2-tecton-elements 1.49.2 → 1.49.4

package/dist/esm/q2-select.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-1e1ce94e.js';
-import { l as loc, h as handleAriaLabel, o as overrideFocus, g as isRelatedTargetWithinHost, i as isEventFromElement, w as waitForNextPaint, j as isHostLosingFocus } from './index-3c5cd75e.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-1e1ce94e.js';
+import { c as createGuid, d as isMobile, l as loc, h as handleAriaLabel, o as overrideFocus, g as isRelatedTargetWithinHost, i as isEventFromElement, w as waitForNextPaint } from './index-73081b4d.js';
 import { s as shouldShowActionSheet, a as showActionSheetList } from './action-sheet-dd527168.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, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14));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, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.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, 4px)))));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)}";
@@ -11,12 +11,74 @@ const Q2Select = class {
         this.change = createEvent(this, "change", 7);
         this.input = createEvent(this, "input", 7);
         var _a;
+        // #region Own Properties
+        this.guid = createGuid();
+        this.lastTouchWasInPopover = false;
         this.scheduledAfterRender = [];
+        this.addTouchEventListeners = () => {
+            if (!isMobile() || !this.popoverElement)
+                return;
+            this.popoverElement.addEventListener('touchstart', this.handleTouchStart, { passive: true });
+        };
         this.clickedElsewhere = (event) => {
             const target = event.target;
             if (target.localName !== 'click-elsewhere')
                 return;
             event.stopPropagation();
+            const { popoverElement } = this;
+            if (!popoverElement)
+                return;
+            popoverElement.open = false;
+            this.innerInputField.blur();
+        };
+        this.destroyEventListeners = () => {
+            var _a;
+            if (!isMobile())
+                return;
+            (_a = screen === null || screen === void 0 ? void 0 : screen.orientation) === null || _a === void 0 ? void 0 : _a.removeEventListener('change', this.handleOrientationChange);
+            window.removeEventListener('resize', this.handleOrientationChange);
+            visualViewport === null || visualViewport === void 0 ? void 0 : visualViewport.removeEventListener('resize', this.handleOrientationChange);
+            this.removeTouchEventListeners();
+        };
+        this.handleOrientationChange = () => {
+            var _a, _b, _c;
+            if (!isMobile())
+                return;
+            let isLandscape;
+            if (this.isModule) {
+                isLandscape = (_a = window.Tecton) === null || _a === void 0 ? void 0 : _a.platformDimensions.orientationType.includes('landscape');
+            }
+            else {
+                isLandscape = (_c = (_b = screen === null || screen === void 0 ? void 0 : screen.orientation) === null || _b === void 0 ? void 0 : _b.type) === null || _c === void 0 ? void 0 : _c.includes('landscape');
+            }
+            if (isLandscape && this.searchable)
+                this.searchable = false;
+            if (!isLandscape)
+                this.searchable = this.originalSearchable;
+        };
+        this.handleTouchStart = (event) => {
+            if (document.activeElement === this.hostElement) {
+                const target = event.target;
+                if (target && target !== this.hostElement) {
+                    this.inputFocused = false;
+                    this.lastTouchWasInPopover = true;
+                    target.focus();
+                }
+            }
+        };
+        this.initEventListeners = () => {
+            var _a;
+            if (!isMobile())
+                return;
+            (_a = screen === null || screen === void 0 ? void 0 : screen.orientation) === null || _a === void 0 ? void 0 : _a.addEventListener('change', this.handleOrientationChange);
+            window.addEventListener('resize', this.handleOrientationChange);
+            visualViewport === null || visualViewport === void 0 ? void 0 : visualViewport.addEventListener('resize', this.handleOrientationChange);
+        };
+        this.initMutationObserver = () => {
+            const observer = new MutationObserver(this.onMutationObserved);
+            observer.observe(this.hostElement, { childList: true, subtree: true });
+            this.mutationObserver = observer;
+            this.onMutationObserved();
         };
         this.inputBlurHandler = () => {
             this.inputFocused = false;
@@ -26,6 +88,16 @@ const Q2Select = class {
         };
         this.inputClickHandler = async (event) => {
             event.stopPropagation();
+            // Check if the last interaction was a touch within the popover
+            // If so, don't toggle the dropdown as the user is likely continuing to interact
+            if (this.lastTouchWasInPopover && this.open && this.searchable) {
+                // Reset the flag and don't toggle
+                this.lastTouchWasInPopover = false;
+                this.focusInput();
+                return;
+            }
+            // Reset the flag for any other click
+            this.lastTouchWasInPopover = false;
             if (shouldShowActionSheet(this)) {
                 return this.executeActionSheet(event);
             }
@@ -50,12 +122,13 @@ const Q2Select = class {
         this.inputKeydownHandler = (event) => {
             if (this.readonly || this.disabled)
                 return;
-            const key = event.key;
+            const { key, shiftKey } = event;
+            const isShiftTab = key === 'Tab' && shiftKey;
             const hasSlot = this.hasPopoverTop || this.hasPopoverBottom;
-            const isShiftTab = key === 'Tab' && event.shiftKey;
-            if (hasSlot && (key === 'Tab' || key === 'Enter' || isShiftTab))
+            if (hasSlot && (key === 'Tab' || isShiftTab))
                 return;
-            if (shouldShowActionSheet(this, event)) {
+            // slots are incompatible with action sheet
+            if (shouldShowActionSheet(this, event) && !hasSlot) {
                 return this.executeActionSheet(event);
             }
             const keysForOptionListToHandle = [
@@ -80,7 +153,7 @@ const Q2Select = class {
             // Prevent click event from firing when spacebar is pressed
             if (key === ' ')
                 event.preventDefault();
-            this.optionList.handleExternalKeydown(event);
+            this.handleOptionListExternalKeydown(event);
         };
         this.onCustomDisplayClick = (event) => {
             event.stopPropagation();
@@ -98,12 +171,12 @@ const Q2Select = class {
                 this.hasCustomDisplay = hasCustomDisplay;
             }
             const popTopSlot = hostElement.shadowRoot.querySelector('slot[name="popover-top"]');
-            const topSlotHasNode = popTopSlot.assignedNodes().length > 0;
+            const topSlotHasNode = (popTopSlot === null || popTopSlot === void 0 ? void 0 : 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;
+            const bottomSlotHasNode = (popBottomSlot === null || popBottomSlot === void 0 ? void 0 : popBottomSlot.assignedNodes().length) > 0;
             if (hasPopoverBottom !== bottomSlotHasNode) {
                 this.hasPopoverBottom = bottomSlotHasNode;
             }
@@ -127,6 +200,11 @@ const Q2Select = class {
                 return;
             this.open = open;
         };
+        this.removeTouchEventListeners = () => {
+            if (!isMobile() || !this.popoverElement)
+                return;
+            this.popoverElement.removeEventListener('touchstart', this.handleTouchStart);
+        };
         this.showAllOptions = () => {
             this.showSelected = false;
         };
@@ -172,6 +250,7 @@ const Q2Select = class {
         this.optional = false;
         this.placeholder = undefined;
         this.popDirection = undefined;
+        this.popoverMaxHeight = undefined;
         this.popoverMode = null;
         this.readonly = false;
         this.searchable = false;
@@ -184,19 +263,21 @@ const Q2Select = class {
         var _a;
         (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
         this.mutationObserver = null;
+        this.destroyEventListeners();
     }
     componentWillLoad() {
+        this.originalSearchable = this.searchable;
         handleAriaLabel(this);
+        this.handleOrientationChange();
         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();
+        this.initMutationObserver();
+        this.initEventListeners();
         overrideFocus(this.hostElement);
         setTimeout(() => this.checkSelectedDisplay(), 0);
+        this.setCustomLabel();
     }
     componentDidRender() {
         setTimeout(() => {
@@ -224,9 +305,9 @@ const Q2Select = class {
         this.clearValue();
     }
     handleSelectedDisplay(event) {
-        if (this.multiple)
-            return;
-        this.inputField.value = event.detail.display;
+        if (!this.multiple && !!this.value && this.value === event.detail.value) {
+            this.inputField.value = event.detail.display;
+        }
     }
     delegateFocus(event) {
         const fromHost = isRelatedTargetWithinHost(event, this.hostElement);
@@ -235,11 +316,13 @@ const Q2Select = class {
             this.clearSelectedDisplay();
         }
         else if (isEventFromElement(event, this.hostElement)) {
-            this.inputField.shadowRoot.querySelector('.input-field').focus();
+            this.innerInputField.focus();
         }
     }
     handleFocusout(event) {
-        const isLeavingHost = isHostLosingFocus(event, this.hostElement);
+        var _a;
+        const relatedTarget = event.relatedTarget;
+        const isLeavingHost = !((_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.contains(relatedTarget)) && !this.hostElement.contains(relatedTarget);
         if (isLeavingHost)
             this.closeDropdown();
         this.prioritizeSearch = !isLeavingHost && this.searchable;
@@ -275,6 +358,10 @@ const Q2Select = class {
     keydownHandler(event) {
         this.inputKeydownHandler(event);
     }
+    popoverStateChanged({ detail: { open } }) {
+        if (this.open !== open)
+            this.open = open;
+    }
     // #endregion
     // #region Public Methods API
     /**
@@ -348,6 +435,12 @@ const Q2Select = class {
         this.optionElements.forEach(element => (element.multiline = newValue));
     }
     openChanged(isOpen) {
+        if (isOpen) {
+            this.addTouchEventListeners();
+        }
+        else {
+            this.removeTouchEventListeners();
+        }
         this.scheduledAfterRender.push(async () => {
             await waitForNextPaint();
             const { popoverTopContainer, popoverElement } = this;
@@ -404,6 +497,15 @@ const Q2Select = class {
         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 inputId() {
+        return `select-guid-${this.guid}`;
+    }
+    get isModule() {
+        var _a, _b;
+        const isIframe = window !== window.top;
+        const hasPlatformDimensions = Object.keys((_b = (_a = window.Tecton) === null || _a === void 0 ? void 0 : _a.platformDimensions) !== null && _b !== void 0 ? _b : {}).length > 0;
+        return isIframe && hasPlatformDimensions;
+    }
     get optionElements() {
         return Array.from(this.hostElement.querySelectorAll('q2-option'));
     }
@@ -530,16 +632,22 @@ const Q2Select = class {
     }
     closeDropdown() {
         this.open = false;
+        this.lastTouchWasInPopover = false;
         this.clearSearchText();
     }
     async executeActionSheet(event) {
         const result = await showActionSheetList(this, event);
+        this.focusInput();
         this.handleSelectionChanges(result);
     }
     focusInput() {
         var _a;
         (_a = this.inputField) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new FocusEvent('focus'));
     }
+    // Helps with checking for calls to handleExternalKeydown in spec tests
+    handleOptionListExternalKeydown(event) {
+        this.optionList.handleExternalKeydown(event);
+    }
     handleSelectionChanges(changeDetails) {
         const { value = '', values = [] } = changeDetails;
         const selectedOptionValues = values.map(value => value.value);
@@ -558,8 +666,13 @@ const Q2Select = class {
         this.optionList.setActiveElement(null);
         this.open = true;
     }
-    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" }))));
+    setCustomLabel() {
+        var _a;
+        const customLabel = this.hostElement.querySelector('[slot="label"]');
+        if (customLabel) {
+            (_a = this.inputField) === null || _a === void 0 ? void 0 : _a.appendChild(customLabel.cloneNode(true));
+            this.hostElement.removeChild(customLabel);
+        }
     }
     setStatusMessage(message) {
         clearTimeout(this.statusMessageTimer);
@@ -581,14 +694,6 @@ const Q2Select = class {
             this.openDropdownWithoutActiveElement();
         }
     }
-    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]))))));
-    }
     // #endregion
     // #region Render Methods
     renderCustomDisplay() {
@@ -598,13 +703,27 @@ const Q2Select = class {
         this.checkSelectedDisplayHeight();
         return (h("slot", { name: "_selected-display", slot: "custom-display" }));
     }
-    render() {
+    renderOptionsDropdown() {
+        return (h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: this.innerInputContainer, open: this.open, "max-height": this.popoverMaxHeight, 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.renderVisibilityToggle())), h("div", { class: "popover-bottom-container", hidden: !this.hasPopoverBottom, tabindex: "-1" }, h("slot", { name: "popover-bottom" }))));
+    }
+    renderSelectField() {
         var _a;
-        return (h("click-elsewhere", { key: 'ee1f153325884056a488d4bdfda9b5ef501cf3be', class: this.wrapperClasses, onChange: this.clickedElsewhere }, h("div", { key: 'd60cf7a63ba2d5af7f67e2a811336255506ad422', "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage), h("q2-input", { key: '2a6c022291b99e1561e090bc74c5014fd5628bc4', 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) &&
+        return (h(Fragment, null, h("div", { "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage), h("q2-input", { 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", "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()), h("div", { key: 'a29711927968b10f9225994ed41367d8ad35c1a9', class: "custom-display-content", hidden: !this.hasCustomDisplay || !!this.searchText, onClick: this.onCustomDisplayClick }, h("slot", { key: '3e63c82e5bb6a12638f6d5a8f6af8eb246b105a6', name: "q2-select-display" })), this.optionsDropdown()));
+                [], 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()), h("div", { class: "custom-display-content", hidden: !this.hasCustomDisplay || !!this.searchText, onClick: this.onCustomDisplayClick }, h("slot", { name: "q2-select-display" })), this.renderOptionsDropdown()));
+    }
+    renderVisibilityToggle() {
+        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]))))));
+    }
+    render() {
+        return (h("click-elsewhere", { key: 'fc1a03ff20dbce5b036f753bf5eee835004b16b6', class: this.wrapperClasses, onChange: this.clickedElsewhere }, this.renderSelectField()));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {