q2-tecton-elements 1.53.1 → 1.53.2

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

@@ -1,24 +1,64 @@
-import { r as t, c as e, h as i, g as s } from "./index-7a5365e2.js";
+import { r as t, c as e, h as i, F as s, g as o } from "./index-7a5365e2.js";
 
-import { l as o, a as l, o as n, q as r, i as a, w as c, t as d } from "./index-d18e2a20.js";
+import { c as l, d as n, l as r, a, o as c, q as d, i as h, w as p } from "./index-504f1a9e.js";
 
-import { a as h, s as p } from "./action-sheet-e64cb6f7.js";
+import { a as u, s as v } from "./action-sheet-e64cb6f7.js";
 
-const u = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.q2-element-dropdown{display:none;position:absolute;background-color:var(--app-white, #ffffff);color:var(--t-text, #4d4d4d);left:0;width:100%;z-index:100;margin-top:1px;box-shadow:var(--app-shadow-1, 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)}";
+const f = "*{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)}";
 
-const v = u;
+const b = f;
 
-const b = class {
+const m = class {
   constructor(i) {
     t(this, i);
     this.change = e(this, "change", 7);
     this.input = e(this, "input", 7);
     var s;
+    // #region Own Properties
+        this.guid = l();
     this.scheduledAfterRender = [];
     this.clickedElsewhere = t => {
       const e = t.target;
       if (e.localName !== "click-elsewhere") return;
       t.stopPropagation();
+      const {popoverElement: i} = this;
+      if (!i) return;
+      i.open = false;
+    };
+    this.destroyEventListeners = () => {
+      var t;
+      if (!n()) return;
+      (t = screen === null || screen === void 0 ? void 0 : screen.orientation) === null || t === void 0 ? void 0 : t.removeEventListener("change", this.handleOrientationChange);
+      window.removeEventListener("resize", this.handleOrientationChange);
+      visualViewport === null || visualViewport === void 0 ? void 0 : visualViewport.removeEventListener("resize", this.handleOrientationChange);
+    };
+    this.handleOrientationChange = () => {
+      var t, e, i;
+      if (!n()) return;
+      let s;
+      if (this.isModule) {
+        s = (t = window.Tecton) === null || t === void 0 ? void 0 : t.platformDimensions.orientationType.includes("landscape");
+      } else {
+        s = (i = (e = screen === null || screen === void 0 ? void 0 : screen.orientation) === null || e === void 0 ? void 0 : e.type) === null || i === void 0 ? void 0 : i.includes("landscape");
+      }
+      if (s && this.searchable) this.searchable = false;
+      if (!s) this.searchable = this.originalSearchable;
+    };
+    this.initEventListeners = () => {
+      var t;
+      if (!n()) return;
+      (t = screen === null || screen === void 0 ? void 0 : screen.orientation) === null || t === void 0 ? void 0 : t.addEventListener("change", this.handleOrientationChange);
+      window.addEventListener("resize", this.handleOrientationChange);
+      visualViewport === null || visualViewport === void 0 ? void 0 : visualViewport.addEventListener("resize", this.handleOrientationChange);
+    };
+    this.initMutationObserver = () => {
+      const t = new MutationObserver(this.onMutationObserved);
+      t.observe(this.hostElement, {
+        childList: true,
+        subtree: true
+      });
+      this.mutationObserver = t;
+      this.onMutationObserved();
     };
     this.inputBlurHandler = () => {
       this.inputFocused = false;
@@ -28,7 +68,7 @@ const b = class {
     };
     this.inputClickHandler = async t => {
       t.stopPropagation();
-      if (h(this)) {
+      if (u(this)) {
         return this.executeActionSheet(t);
       }
       this.toggleDropdown();
@@ -56,7 +96,7 @@ const b = class {
       const o = this.hasPopoverTop || this.hasPopoverBottom;
       if (o && (e === "Tab" || s)) return;
       // slots are incompatible with action sheet
-            if (h(this, t) && !o) {
+            if (u(this, t) && !o) {
         return this.executeActionSheet(t);
       }
       const l = [ "ArrowDown", "ArrowUp", "PageDown", "PageUp", "Home", "End", "Escape", "Tab" ];
@@ -68,7 +108,7 @@ const b = class {
       if (this.shouldClearSearchText(t)) this.clearSearchText();
       // Prevent click event from firing when spacebar is pressed
             if (e === " ") t.preventDefault();
-      this.optionList.handleExternalKeydown(t);
+      this.handleOptionListExternalKeydown(t);
     };
     this.onCustomDisplayClick = t => {
       t.stopPropagation();
@@ -147,7 +187,7 @@ const b = class {
     this.hoist = !!((s = window.Tecton) === null || s === void 0 ? void 0 : s.useActionSheets);
     this.invalid = undefined;
     this.label = undefined;
-    this.listLabel = o("tecton.element.select.listLabel");
+    this.listLabel = r("tecton.element.select.listLabel");
     this.minRows = 3;
     this.multilineOptions = false;
     this.multiple = false;
@@ -167,22 +207,21 @@ const b = class {
     var t;
     (t = this.mutationObserver) === null || t === void 0 ? void 0 : t.disconnect();
     this.mutationObserver = null;
+    this.destroyEventListeners();
   }
   componentWillLoad() {
-    l(this);
+    this.originalSearchable = this.searchable;
+    a(this);
+    this.handleOrientationChange();
     this.buildStructuredSelectedOptions();
     this.handleMultilineOptionsUpdate(this.multilineOptions, false);
   }
   componentDidLoad() {
-    const t = new MutationObserver(this.onMutationObserved);
-    t.observe(this.hostElement, {
-      childList: true,
-      subtree: true
-    });
-    this.mutationObserver = t;
-    this.onMutationObserved();
-    n(this.hostElement);
+    this.initMutationObserver();
+    this.initEventListeners();
+    c(this.hostElement);
     setTimeout((() => this.checkSelectedDisplay()), 0);
+    this.setCustomLabel();
   }
   componentDidRender() {
     setTimeout((() => {
@@ -211,18 +250,20 @@ const b = class {
     this.inputField.value = t.detail.display;
   }
   delegateFocus(t) {
-    const e = r(t, this.hostElement);
+    const e = d(t, this.hostElement);
     const i = this.prioritizeSearch = e && this.searchable;
     if (i) {
       this.clearSelectedDisplay();
-    } else if (a(t, this.hostElement)) {
+    } else if (h(t, this.hostElement)) {
       this.inputField.shadowRoot.querySelector(".input-field").focus();
     }
   }
   handleFocusout(t) {
-    const e = d(t, this.hostElement);
-    if (e) this.closeDropdown();
-    this.prioritizeSearch = !e && this.searchable;
+    var e;
+    const i = t.relatedTarget;
+    const s = !((e = this.popoverElement) === null || e === void 0 ? void 0 : e.contains(i)) && !this.hostElement.contains(i);
+    if (s) this.closeDropdown();
+    this.prioritizeSearch = !s && this.searchable;
   }
   onHostElementInput(t) {
     if (!this.searchable || t.target !== this.hostElement || this.hostElement.oninput) return;
@@ -245,13 +286,16 @@ const b = class {
       t.hidden = !a;
       if (a) s++;
     }));
-    const l = i ? "tecton.element.select.searchable.results" : "tecton.element.select.allOptions";
-    const n = i ? s : e.length;
-    this.setStatusMessage(o(l, [ n ]));
+    const o = i ? "tecton.element.select.searchable.results" : "tecton.element.select.allOptions";
+    const l = i ? s : e.length;
+    this.setStatusMessage(r(o, [ l ]));
   }
   keydownHandler(t) {
     this.inputKeydownHandler(t);
   }
+  popoverStateChanged({detail: {open: t}}) {
+    if (this.open !== t) this.open = t;
+  }
   // #endregion
   // #region Public Methods API
   /**
@@ -299,7 +343,7 @@ const b = class {
     const i = new Set(Array.isArray(t) ? t : [ t ]);
     if (!this.open) {
       await this.openPopover();
-      await c();
+      await p();
     }
     i.forEach((t => {
       var e;
@@ -307,13 +351,13 @@ const b = class {
     }));
     if (e.closePopover) {
       await this.closePopover();
-      await c();
+      await p();
     }
   }
   // #endregion
   // #region Watchers
   ariaLabelObserver() {
-    l(this);
+    a(this);
   }
   handleMultilineOptionsUpdate(t, e) {
     if (t === e) return;
@@ -321,7 +365,7 @@ const b = class {
   }
   openChanged(t) {
     this.scheduledAfterRender.push((async () => {
-      await c();
+      await p();
       const {popoverTopContainer: e, popoverElement: i} = this;
       const s = t && (e === null || e === void 0 ? void 0 : e.offsetHeight) || 0;
       if (s) {
@@ -371,6 +415,15 @@ const b = class {
     var t, e;
     return (e = (t = this.inputField) === null || t === void 0 ? void 0 : t.shadowRoot) === null || e === void 0 ? void 0 : e.querySelector(".input-field");
   }
+  get inputId() {
+    return `select-guid-${this.guid}`;
+  }
+  get isModule() {
+    var t, e;
+    const i = window !== window.top;
+    const s = Object.keys((e = (t = window.Tecton) === null || t === void 0 ? void 0 : t.platformDimensions) !== null && e !== void 0 ? e : {}).length > 0;
+    return i && s;
+  }
   get optionElements() {
     return Array.from(this.hostElement.querySelectorAll("q2-option"));
   }
@@ -406,20 +459,20 @@ const b = class {
   }
   calculateMultiSelectSelectedDisplay() {
     var t, e, i;
-    const {firstSelectedOptionElement: s, firstSelectedValue: l, multilineOptions: n} = this;
-    if (!l) return "";
-    if (s === null || s === void 0 ? void 0 : s.display) return o(s.display);
-    if (n && this.searchable) return this.searchText;
-    if (n) return "";
-    return (i = (e = (t = s === null || s === void 0 ? void 0 : s.textContent) === null || t === void 0 ? void 0 : t.trim()) !== null && e !== void 0 ? e : s === null || s === void 0 ? void 0 : s.value) !== null && i !== void 0 ? i : l;
+    const {firstSelectedOptionElement: s, firstSelectedValue: o, multilineOptions: l} = this;
+    if (!o) return "";
+    if (s === null || s === void 0 ? void 0 : s.display) return r(s.display);
+    if (l && this.searchable) return this.searchText;
+    if (l) return "";
+    return (i = (e = (t = s === null || s === void 0 ? void 0 : s.textContent) === null || t === void 0 ? void 0 : t.trim()) !== null && e !== void 0 ? e : s === null || s === void 0 ? void 0 : s.value) !== null && i !== void 0 ? i : o;
   }
   calculateSingleSelectSelectedDisplay() {
     var t;
     const {firstSelectedOptionElement: e, multilineOptions: i} = this;
     if (i) {
-      return (e === null || e === void 0 ? void 0 : e.display) && o(e.display) || this.value || "";
+      return (e === null || e === void 0 ? void 0 : e.display) && r(e.display) || this.value || "";
     } else {
-      return (e === null || e === void 0 ? void 0 : e.display) && o(e.display) || ((t = e === null || e === void 0 ? void 0 : e.textContent) === null || t === void 0 ? void 0 : t.trim()) || this.value || "";
+      return (e === null || e === void 0 ? void 0 : e.display) && r(e.display) || ((t = e === null || e === void 0 ? void 0 : e.textContent) === null || t === void 0 ? void 0 : t.trim()) || this.value || "";
     }
   }
   checkSelectedDisplay() {
@@ -485,7 +538,7 @@ const b = class {
     this.clearSearchText();
   }
   async executeActionSheet(t) {
-    const e = await p(this, t);
+    const e = await v(this, t);
     this.focusInput();
     this.handleSelectionChanges(e);
   }
@@ -493,6 +546,10 @@ const b = class {
     var t;
     (t = this.inputField) === null || t === void 0 ? void 0 : t.dispatchEvent(new FocusEvent("focus"));
   }
+  // Helps with checking for calls to handleExternalKeydown in spec tests
+  handleOptionListExternalKeydown(t) {
+    this.optionList.handleExternalKeydown(t);
+  }
   handleSelectionChanges(t) {
     const {value: e = "", values: i = []} = t;
     const s = i.map((t => t.value));
@@ -510,6 +567,14 @@ const b = class {
     this.optionList.setActiveElement(null);
     this.open = true;
   }
+  setCustomLabel() {
+    var t;
+    const e = this.hostElement.querySelector('[slot="label"]');
+    if (e) {
+      (t = this.inputField) === null || t === void 0 ? void 0 : t.appendChild(e.cloneNode(true));
+      this.hostElement.removeChild(e);
+    }
+  }
   setStatusMessage(t) {
     clearTimeout(this.statusMessageTimer);
     this.statusMessage = "";
@@ -576,63 +641,20 @@ const b = class {
       name: "popover-bottom"
     })));
   }
-  renderVisibilityToggle() {
-    var t, e;
-    const s = (e = (t = this.selectedOptions) === null || t === void 0 ? void 0 : t.length) !== null && e !== void 0 ? e : 0;
-    const {showSelected: l} = this;
-    return i("div", {
-      class: "multi-select-header"
-    }, i("fieldset", null, i("legend", {
-      "aria-label": o("tecton.element.select.multiHeader.showing")
-    }, o("tecton.element.select.multiHeader.showing")), i("div", null, i("input", {
-      class: "sr",
-      type: "radio",
-      id: "all",
-      name: "viewDisplay",
-      value: "all",
-      checked: !l,
-      "aria-label": o("tecton.element.select.multiHeader.allAriaLabel"),
-      "test-id": "allOptionsButton",
-      onClick: this.showAllOptions,
-      onKeyDown: this.visibilityToggleKeyDown
-    }), i("label", {
-      htmlFor: "all"
-    }, o("tecton.element.select.multiHeader.all"))), i("div", null, i("input", {
-      class: "sr",
-      type: "radio",
-      id: "selected",
-      disabled: s === 0,
-      name: "viewDisplay",
-      value: "selected",
-      "aria-label": o("tecton.element.select.multiHeader.selectedAriaLabel", [ s ]),
-      checked: l,
-      "test-id": "selectedOptionsButton",
-      onClick: this.showSelectedOptions,
-      onKeyDown: this.visibilityToggleKeyDown
-    }), i("label", {
-      htmlFor: "selected"
-    }, o("tecton.element.select.multiHeader.selected", [ s ])))));
-  }
-  render() {
+  renderSelectField() {
     var t;
-    return i("click-elsewhere", {
-      key: "086f236ba533a899213d2c3228da46a3ea64cd15",
-      class: this.wrapperClasses,
-      onChange: this.clickedElsewhere
-    }, i("div", {
-      key: "1019408b559337bfc78ded5f3d04b6d9a50744fe",
+    return i(s, null, i("div", {
       "aria-live": "polite",
       "aria-atomic": "true",
       role: "status",
       class: "sr"
     }, this.statusMessage), i("q2-input", {
-      key: "a73912ac487196dafe5813fbbe1c347e37076239",
       ref: t => this.inputField = t,
       class: "q2-select-input",
-      label: this.label && o(this.label) || "",
+      label: this.label && r(this.label) || "",
       value: this.selectedDisplay,
       clearable: this.clearable && (!!this.value || !!((t = this.selectedOptions) === null || t === void 0 ? void 0 : t.length)) || undefined,
-      errors: Array.isArray(this.errors) && this.errors.length > 0 && this.errors.map((t => o(t))) || this.invalid && [ "tecton.element.select.invalid" ] || [],
+      errors: Array.isArray(this.errors) && this.errors.length > 0 && this.errors.map((t => r(t))) || this.invalid && [ "tecton.element.select.invalid" ] || [],
       disabled: this.disabled,
       optional: this.optional,
       readonly: !!this.readonly,
@@ -655,17 +677,59 @@ const b = class {
       _role: "combobox",
       _preventEntry: !this.searchable
     }, this.renderCustomDisplay()), i("div", {
-      key: "88844f3c07fcfa3f5bf2a6170505aab7e25860b2",
       class: "custom-display-content",
       hidden: !this.hasCustomDisplay || !!this.searchText,
       onClick: this.onCustomDisplayClick
     }, i("slot", {
-      key: "8b1ba9e210a8a2e7fe9e82a293373881ae2c7dcd",
       name: "q2-select-display"
     })), this.renderOptionsDropdown());
   }
+  renderVisibilityToggle() {
+    var t, e;
+    const s = (e = (t = this.selectedOptions) === null || t === void 0 ? void 0 : t.length) !== null && e !== void 0 ? e : 0;
+    const {showSelected: o} = this;
+    return i("div", {
+      class: "multi-select-header"
+    }, i("fieldset", null, i("legend", {
+      "aria-label": r("tecton.element.select.multiHeader.showing")
+    }, r("tecton.element.select.multiHeader.showing")), i("div", null, i("input", {
+      class: "sr",
+      type: "radio",
+      id: "all",
+      name: "viewDisplay",
+      value: "all",
+      checked: !o,
+      "aria-label": r("tecton.element.select.multiHeader.allAriaLabel"),
+      "test-id": "allOptionsButton",
+      onClick: this.showAllOptions,
+      onKeyDown: this.visibilityToggleKeyDown
+    }), i("label", {
+      htmlFor: "all"
+    }, r("tecton.element.select.multiHeader.all"))), i("div", null, i("input", {
+      class: "sr",
+      type: "radio",
+      id: "selected",
+      disabled: s === 0,
+      name: "viewDisplay",
+      value: "selected",
+      "aria-label": r("tecton.element.select.multiHeader.selectedAriaLabel", [ s ]),
+      checked: o,
+      "test-id": "selectedOptionsButton",
+      onClick: this.showSelectedOptions,
+      onKeyDown: this.visibilityToggleKeyDown
+    }), i("label", {
+      htmlFor: "selected"
+    }, r("tecton.element.select.multiHeader.selected", [ s ])))));
+  }
+  render() {
+    return i("click-elsewhere", {
+      key: "cc2ee6f4381df91ba647f3ab98f9ba31dde6dcf4",
+      class: this.wrapperClasses,
+      onChange: this.clickedElsewhere
+    }, this.renderSelectField());
+  }
   get hostElement() {
-    return s(this);
+    return o(this);
   }
   static get watchers() {
     return {
@@ -678,7 +742,7 @@ const b = class {
   }
 };
 
-b.style = v;
+m.style = b;
 
-export { b as q2_select };
+export { m as q2_select };
 //# sourceMappingURL=q2-select.entry.js.map