q2-tecton-elements 1.57.0 → 1.57.2

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

@@ -1,19 +1,20 @@
-import { r as t, c as e, h as i, a as s } from "./index-YFPMNbDm.js";
+import { r as t, c as e, h as i, F as s, a as o } from "./index-C7zSUT3M.js";
 
-import { c as o, l, e as r, o as n, j as a, a as c, w as h } from "./index-DHD1Dbkd.js";
+import { c as l, l as r, j as n, e as a, o as c, k as h, a as d, w as p } from "./index-y0xcWkDl.js";
 
-import { s as d, a as p } from "./action-sheet-D3xPdhm8.js";
+import { s as u, a as v } from "./action-sheet-D3xPdhm8.js";
 
-const u = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{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-default-select-margin:var(--tct-select-margin-top, var(--t-select-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-select-margin-bottom, var(--t-select-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-select-margin, var(--comp-default-select-margin))}.q2-select-container{position:relative;display:block}.q2-select-input{margin:0;--tct-input-min-height:var(--tct-select-input-min-height, var(--t-select-input-min-height));--tct-input-max-height:var(--tct-select-input-max-height, var(--t-select-input-max-height, none))}::slotted([slot=_selected-display]){width:100%;min-height:var(--comp-selected-display-height, 44px)}.custom-display-content{position:absolute;bottom:0;left:calc(var(--tct-scale-2, var(--app-scale-2x, 10px)) + 1px);height:44px;width:calc(100% - 34px - var(--tct-scale-3, var(--app-scale-3x, 15px)));overflow:hidden;cursor:pointer;transition:left var(--tct-tween-2, var(--app-tween-1, 0.2s ease))}.custom-display-content:not([hidden]){display:flex;align-items:center}.is-searchable.is-focused .custom-display-content,.is-searchable .custom-display-content:active{left:calc(var(--tct-scale-3, var(--app-scale-3x, 15px)) + 1px)}.has-error .custom-display-content{width:calc(100% - 68px - var(--tct-scale-3, var(--app-scale-3x, 15px)))}.popover-content{display:flex;flex-direction:column-reverse}.popover-bottom-container{position:sticky;bottom:0;z-index:5}.popover-top-container{position:sticky;top:0;z-index:5}.popover-top-container .multi-select-header{padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-2, var(--app-scale-2x, 10px));background:var(--app-white);display:flex;gap:var(--app-scale-2x, 10px);align-items:center}.popover-top-container .multi-select-header fieldset{margin:0;padding:0;border:0;display:flex;gap:var(--app-scale-2x, 10px)}.popover-top-container .multi-select-header legend{padding:0;float:left}.popover-top-container .multi-select-header label{cursor:pointer;padding:var(--tct-select-multi-select-option-padding, var(--t-select-multi-select-option-padding, var(--tct-btn-badge-padding, var(--t-btn-badge-padding, 2px 5px))));font-size:var(--tct-select-multi-select-option-font-size, var(--t-select-multi-select-option-font-size, var(--tct-btn-badge-font-size, var(--t-btn-badge-font-size, inherit))));border-radius:var(--tct-select-multi-select-option-radius, var(--t-select-multi-select-option-radius, var(--tct-btn-badge-border-radius, var(--t-btn-badge-border-radius, var(--app-border-radius-1, 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-visible+label{box-shadow:var(--const-double-focus-ring)}";
+const b = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{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-default-select-margin:var(--tct-select-margin-top, var(--t-select-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-select-margin-bottom, var(--t-select-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-select-margin, var(--comp-default-select-margin))}.q2-select-container{position:relative;display:block}.q2-select-input{margin:0;--tct-input-min-height:var(--tct-select-input-min-height, var(--t-select-input-min-height));--tct-input-max-height:var(--tct-select-input-max-height, var(--t-select-input-max-height, none))}::slotted([slot=_selected-display]){width:100%;min-height:var(--comp-selected-display-height, 44px)}.custom-display-content{position:absolute;bottom:0;left:calc(var(--tct-scale-2, var(--app-scale-2x, 10px)) + 1px);height:44px;width:calc(100% - 34px - var(--tct-scale-3, var(--app-scale-3x, 15px)));overflow:hidden;cursor:pointer;transition:left var(--tct-tween-2, var(--app-tween-1, 0.2s ease))}.custom-display-content:not([hidden]){display:flex;align-items:center}.is-searchable.is-focused .custom-display-content,.is-searchable .custom-display-content:active{left:calc(var(--tct-scale-3, var(--app-scale-3x, 15px)) + 1px)}.has-error .custom-display-content{width:calc(100% - 68px - var(--tct-scale-3, var(--app-scale-3x, 15px)))}.popover-content{display:flex;flex-direction:column-reverse}.popover-bottom-container{position:sticky;bottom:0;z-index:5}.popover-top-container{position:sticky;top:0;z-index:5}.popover-top-container .multi-select-header{padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-2, var(--app-scale-2x, 10px));background:var(--app-white);display:flex;gap:var(--app-scale-2x, 10px);align-items:center}.popover-top-container .multi-select-header fieldset{margin:0;padding:0;border:0;display:flex;gap:var(--app-scale-2x, 10px)}.popover-top-container .multi-select-header legend{padding:0;float:left}.popover-top-container .multi-select-header label{cursor:pointer;padding:var(--tct-select-multi-select-option-padding, var(--t-select-multi-select-option-padding, var(--tct-btn-badge-padding, var(--t-btn-badge-padding, 2px 5px))));font-size:var(--tct-select-multi-select-option-font-size, var(--t-select-multi-select-option-font-size, var(--tct-btn-badge-font-size, var(--t-btn-badge-font-size, inherit))));border-radius:var(--tct-select-multi-select-option-radius, var(--t-select-multi-select-option-radius, var(--tct-btn-badge-border-radius, var(--t-btn-badge-border-radius, var(--app-border-radius-1, 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-visible+label{box-shadow:var(--const-double-focus-ring)}";
 
-const v = class {
+const f = 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.guid = o();
     // #endregion
     // #region State Properties
         this.hasCustomDisplay = false;
@@ -38,7 +39,7 @@ const v = class {
     /**
          * Determines the label that is applied to the option list for accessibility purposes.
          * @localizable
-         */    this.listLabel = l("tecton.element.select.listLabel");
+         */    this.listLabel = r("tecton.element.select.listLabel");
     /** The minimum number of rows the component will try to display below or above the component when opened. */    this.minRows = 3;
     /** Enables text wrapping for `q2-option` elements. When `false`, the text truncates and does not wrap. */    this.multilineOptions = false;
     /** Enables multi-select functionality. */    this.multiple = false;
@@ -66,6 +67,44 @@ const v = class {
       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;
@@ -75,7 +114,7 @@ const v = class {
     };
     this.inputClickHandler = async t => {
       t.stopPropagation();
-      if (d(this)) {
+      if (u(this)) {
         return this.executeActionSheet(t);
       }
       this.toggleDropdown();
@@ -103,7 +142,7 @@ const v = class {
       const o = this.hasPopoverTop || this.hasPopoverBottom;
       if ((o || this.multiple) && (e === "Tab" || s)) return;
       // slots are incompatible with action sheet
-            if (d(this, t) && !o) {
+            if (u(this, t) && !o) {
         return this.executeActionSheet(t);
       }
       const l = [ "ArrowDown", "ArrowUp", "PageDown", "PageUp", "Home", "End", "Escape", "Tab" ];
@@ -183,21 +222,19 @@ const v = class {
     var t;
     (t = this.mutationObserver) === null || t === void 0 ? void 0 : t.disconnect();
     this.mutationObserver = null;
+    this.destroyEventListeners();
   }
   componentWillLoad() {
-    r(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();
   }
@@ -229,11 +266,11 @@ const v = class {
     }
   }
   delegateFocus(t) {
-    const e = a(t, this.hostElement);
+    const e = h(t, this.hostElement);
     const i = this.prioritizeSearch = e && this.searchable;
     if (i) {
       this.clearSelectedDisplay();
-    } else if (c(t, this.hostElement)) {
+    } else if (d(t, this.hostElement)) {
       this.inputField.shadowRoot.querySelector(".input-field").focus();
     }
   }
@@ -266,12 +303,15 @@ const v = class {
       if (a) s++;
     }));
     const o = i ? "tecton.element.select.searchable.results" : "tecton.element.select.allOptions";
-    const r = i ? s : e.length;
-    this.setStatusMessage(l(o, [ r ]));
+    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
   /**
@@ -319,7 +359,7 @@ const v = class {
     const i = new Set(Array.isArray(t) ? t : [ t ]);
     if (!this.open) {
       await this.openPopover();
-      await h();
+      await p();
     }
     i.forEach((t => {
       var e;
@@ -327,13 +367,13 @@ const v = class {
     }));
     if (e.closePopover) {
       await this.closePopover();
-      await h();
+      await p();
     }
   }
   // #endregion
   // #region Watchers
   ariaLabelObserver() {
-    r(this);
+    a(this);
   }
   handleMultilineOptionsUpdate(t, e) {
     if (t === e) return;
@@ -341,7 +381,7 @@ const v = class {
   }
   openChanged(t) {
     this.scheduledAfterRender.push((async () => {
-      await h();
+      await p();
       const {popoverTopContainer: e, popoverElement: i} = this;
       const s = t && (e === null || e === void 0 ? void 0 : e.offsetHeight) || 0;
       if (s) {
@@ -369,9 +409,6 @@ const v = class {
   }
   // #endregion
   // #region Local Methods
-  get inputId() {
-    return `select-guid-${this.guid}`;
-  }
   get badgeValue() {
     var t, e;
     if (!this.multiple) return null;
@@ -394,6 +431,15 @@ const v = 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"));
   }
@@ -429,28 +475,20 @@ const v = class {
   }
   calculateMultiSelectSelectedDisplay() {
     var t, e, i;
-    const {firstSelectedOptionElement: s, firstSelectedValue: o, multilineOptions: r} = this;
+    const {firstSelectedOptionElement: s, firstSelectedValue: o, multilineOptions: l} = this;
     if (!o) return "";
-    if (s === null || s === void 0 ? void 0 : s.display) return l(s.display);
-    if (r && this.searchable) return this.searchText;
-    if (r) 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) && l(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) && l(e.display) || ((t = e === null || e === void 0 ? void 0 : e.textContent) === null || t === void 0 ? void 0 : t.trim()) || this.value || "";
-    }
-  }
-  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);
+      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() {
@@ -516,7 +554,7 @@ const v = class {
     this.clearSearchText();
   }
   async executeActionSheet(t) {
-    const e = await p(this, t);
+    const e = await v(this, t);
     this.focusInput();
     this.handleSelectionChanges(e);
   }
@@ -545,6 +583,14 @@ const v = 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 = "";
@@ -611,63 +657,20 @@ const v = 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: o} = this;
-    return i("div", {
-      class: "multi-select-header"
-    }, i("fieldset", null, i("legend", {
-      "aria-label": l("tecton.element.select.multiHeader.showing")
-    }, l("tecton.element.select.multiHeader.showing")), i("div", null, i("input", {
-      class: "sr",
-      type: "radio",
-      id: "all",
-      name: "viewDisplay",
-      value: "all",
-      checked: !o,
-      "aria-label": l("tecton.element.select.multiHeader.allAriaLabel"),
-      "test-id": "allOptionsButton",
-      onClick: this.showAllOptions,
-      onKeyDown: this.visibilityToggleKeyDown
-    }), i("label", {
-      htmlFor: "all"
-    }, l("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": l("tecton.element.select.multiHeader.selectedAriaLabel", [ s ]),
-      checked: o,
-      "test-id": "selectedOptionsButton",
-      onClick: this.showSelectedOptions,
-      onKeyDown: this.visibilityToggleKeyDown
-    }), i("label", {
-      htmlFor: "selected"
-    }, l("tecton.element.select.multiHeader.selected", [ s ])))));
-  }
-  render() {
+  renderSelectField() {
     var t;
-    return i("click-elsewhere", {
-      key: "9012638fc034ef91325cc8fd61f5f7bf61ab840f",
-      class: this.wrapperClasses,
-      onChange: this.clickedElsewhere
-    }, i("div", {
-      key: "debfae57bbd0e979c81ad525fb750821bf25af73",
+    return i(s, null, i("div", {
       "aria-live": "polite",
       "aria-atomic": "true",
       role: "status",
       class: "sr"
     }, this.statusMessage), i("q2-input", {
-      key: "bf2ec67e3fd0ee4a806898bd3eae337eaf245020",
       ref: t => this.inputField = t,
       class: "q2-select-input",
-      label: this.label && l(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 => l(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,
@@ -690,17 +693,59 @@ const v = class {
       _role: "combobox",
       _preventEntry: !this.searchable
     }, this.renderCustomDisplay()), i("div", {
-      key: "9ef1609d3dbe4f364298e0e960dfc8baa561dc4f",
       class: "custom-display-content",
       hidden: !this.hasCustomDisplay || !!this.searchText,
       onClick: this.onCustomDisplayClick
     }, i("slot", {
-      key: "aaa9302d930c0c52e80cd1765bfc94cefd7d30b5",
       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: "6b0afb6d5ce0f7233266a7b808714e33a1ccf243",
+      class: this.wrapperClasses,
+      onChange: this.clickedElsewhere
+    }, this.renderSelectField());
+  }
   get hostElement() {
-    return s(this);
+    return o(this);
   }
   static get watchers() {
     return {
@@ -713,8 +758,8 @@ const v = class {
   }
 };
 
-v.style = u;
+f.style = b;
 
-export { v as q2_select };
+export { f as q2_select };
 //# sourceMappingURL=q2-select.entry.esm.js.map
 //# sourceMappingURL=q2-select.entry.js.map