q2-tecton-elements 1.65.0 → 1.66.1

package/dist/q2-tecton-elements/q2-option-list_2.entry.js

@@ -1,16 +1,18 @@
 import { r as t, c as e, h as i, H as o, g as s } from "./index-CGkHOjh1.js";
 
-import { l as n, n as r, o as a, i as c, w as h, v as l, q as p, x as d, g as u } from "./index-B4WYBDS9.js";
+import { b as n } from "./component-DVxzK3WH.js";
 
-import { m as f } from "./mirror-emit-DUjY_ucm.js";
+import { l as r, n as a, o as c, i as h, w as l, v as p, q as d, x as u, g as f } from "./index-B4WYBDS9.js";
+
+import { m as b } from "./mirror-emit-DUjY_ucm.js";
 
 function sanitizeRegexString(t) {
   return t.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
 
-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}:host{position:relative;width:100%;display:block;line-height:var(--tct-option-list-line-height, var(--t-option-list-line-height, var(--app-line-height, 1.428571429em)))}.content{text-align:start}:host([is-sizeable]) .content{display:block;height:auto}";
+const v = "*{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}:host{position:relative;width:100%;display:block;line-height:var(--tct-option-list-line-height, var(--t-option-list-line-height, var(--app-line-height, 1.428571429em)))}.content{text-align:start}:host([is-sizeable]) .content{display:block;height:auto}";
 
-const v = class {
+const w = class {
   constructor(i) {
     t(this, i);
     this.change = e(this, "change", 7);
@@ -22,7 +24,7 @@ const v = class {
       lastPressedAt: new Date
     };
     this.scheduledAfterRender = [];
-    /** Determines the label that is applied to the option list for accessibility purposes. */    this.label = n("tecton.element.optionList.label");
+    /** Determines the label that is applied to the option list for accessibility purposes. */    this.label = r("tecton.element.optionList.label");
     /** A list of the selected options on the element. */    this.selectedOptions = [];
     /** Translates to the role of the option list */    this.type = "listbox";
     this.clickHandler = t => {
@@ -42,7 +44,7 @@ const v = class {
       if (i.includes(e)) return;
       t.stopPropagation();
       const {activeIndex: o, customSearch: s, allOptions: n} = this;
-      let a;
+      let r;
       switch (e) {
        case " ":
         if (this.searchString) {
@@ -54,7 +56,7 @@ const v = class {
           this.openDropdownWithActiveElement(0);
         } else {
           this.setDefaultActiveElement();
-          r((() => this.popoverState.emit({
+          a((() => this.popoverState.emit({
             open: true,
             action: "open"
           })));
@@ -67,7 +69,7 @@ const v = class {
           this.openDropdownWithActiveElement(0);
         } else {
           this.setDefaultActiveElement();
-          r((() => this.popoverState.emit({
+          a((() => this.popoverState.emit({
             open: true,
             action: "open"
           })));
@@ -76,16 +78,16 @@ const v = class {
 
        case "ArrowUp":
         t.preventDefault();
-        a = !!this.selectedOptions.length ? this.getDefaultActiveIndex() : this.getNextVisibleIndex(-1);
-        if (a === -1) break;
-        this.openDropdownWithActiveElement(a);
+        r = !!this.selectedOptions.length ? this.getDefaultActiveIndex() : this.getNextVisibleIndex(-1);
+        if (r === -1) break;
+        this.openDropdownWithActiveElement(r);
         break;
 
        case "ArrowDown":
         t.preventDefault();
-        a = !!this.selectedOptions.length ? this.getDefaultActiveIndex() : this.getNextVisibleIndex(1);
-        if (a === -1) break;
-        this.openDropdownWithActiveElement(a);
+        r = !!this.selectedOptions.length ? this.getDefaultActiveIndex() : this.getNextVisibleIndex(1);
+        if (r === -1) break;
+        this.openDropdownWithActiveElement(r);
         break;
 
        case "Home":
@@ -312,10 +314,11 @@ const v = class {
   // #endregion
   // #region Component Lifecycle Events
   componentWillLoad() {
+    n(this.hostElement, "q2-select, q2-dropdown, q2-pill, q2-popover, q2-action-sheet");
     this.hasOptions = !!this.hostElement.querySelectorAll("q2-option:not([separator]):not([separator=true]), q2-dropdown-item:not([separator]):not([separator=true])").length;
   }
   componentDidLoad() {
-    a(this.hostElement);
+    c(this.hostElement);
     this.checkOptions();
     this.selectedOptionsUpdated();
     this.ready.emit();
@@ -330,7 +333,7 @@ const v = class {
     t.stopPropagation();
   }
   delegateFocus(t) {
-    if (!c(t, this.hostElement)) return;
+    if (!h(t, this.hostElement)) return;
     this.popoverState.emit({
       open: true,
       action: "open"
@@ -476,7 +479,7 @@ const v = class {
       open: true,
       action: "open"
     });
-    await h();
+    await l();
     this.activeIndex = t;
     this.setActiveOption();
     this.setFocusedOption();
@@ -526,7 +529,7 @@ const v = class {
       a = [ r ];
     }
     if (i) this.setActiveElement(null); else this.selectedOptions = a;
-    f(this, [ "change", "tctChange" ], {
+    b(this, [ "change", "tctChange" ], {
       value: s,
       values: a
     });
@@ -540,10 +543,10 @@ const v = class {
   setFocusedOption() {
     const t = this.allOptions[this.activeIndex];
     if (!t) return;
-    const e = l(t);
+    const e = p(t);
     if (e) t.focus({
       preventScroll: true
-    }); else r((() => t.focus({
+    }); else a((() => t.focus({
       preventScroll: true
     })));
   }
@@ -570,22 +573,22 @@ const v = class {
   // #region Render Methods
   render() {
     return i(o, {
-      key: "1f6a9677776ee3ab3790325a8802605deab362cb"
+      key: "e92cb4ca414d54c1160d0fc5446381e1be73585d"
     }, i("div", {
-      key: "7806a70f5e411a3780dd3ce044bfc6c46699f68a",
+      key: "46d5872826db9f911fb58ef4deef6eda47afca84",
       class: "content",
       ref: t => this.contentElement = t,
       onFocusout: this.focusoutHandler
     }, i("div", {
-      key: "dbca75e422c6001af6525ec7f3f688165a1dd802",
+      key: "ea06f918d93721765575bd26ef14ea4a76750d76",
       class: "options",
-      "aria-label": n("tecton.element.optionList.label", [ this.label ]),
+      "aria-label": r("tecton.element.optionList.label", [ this.label ]),
       "aria-multiselectable": this.type === "menu" ? undefined : `${!!this.multiple}`,
       role: this.type || "listbox",
       onKeyDown: this.internalKeydownHandler,
       onClick: this.clickHandler
     }, i("slot", {
-      key: "316d4594e9265f67455f767085062c5719040926"
+      key: "5c1b0d7a46852b3d42156a68a925c6192e6fff8d"
     }))));
   }
   get hostElement() {
@@ -599,11 +602,11 @@ const v = class {
   }
 };
 
-v.style = b;
+w.style = v;
 
-const w = "*{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}.legacy.container{display:none}.legacy.show{display:block;z-index:var(--tct-popover-z-index, 50)}:popover-open,.show{position:absolute;margin:0;padding:0;overflow:auto;background:var(--tct-popover-background, var(--app-white, #ffffff));backdrop-filter:var(--tct-popover-backdrop-filter, none);color:var(--tct-popover-font-color, var(--t-text, #4d4d4d));min-width:var(--tct-popover-min-width, 135px);margin-block:var(--tct-popover-margin-block, 0);box-shadow:var(--tct-popover-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)));border-width:var(--tct-popover-border-width, 0);border-style:solid;border-color:var(--tct-popover-border-color, transparent);border-radius:var(--tct-popover-border-radius, 0);max-height:var(--comp-pop-max-height);left:var(--comp-pop-left);opacity:var(--comp-pop-opacity, 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}:popover-open.block,.show.block{right:unset;width:var(--comp-pop-width);min-width:var(--tct-popover-min-width, unset)}:popover-open.left,.show.left{left:var(--comp-pop-left);right:unset}:popover-open.right,.show.right{right:var(--comp-pop-right);left:unset}:popover-open.down,.show.down{top:var(--tct-popover-top, var(--comp-pop-top));bottom:unset}:popover-open.up,.show.up{top:unset;bottom:var(--comp-pop-bottom)}:popover-open::-webkit-scrollbar,.show::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}:popover-open::-webkit-scrollbar-thumb,.show::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}:popover-open::-webkit-scrollbar-track,.show::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}click-elsewhere{position:relative;display:block}";
+const m = "*{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}.legacy.container{display:none}.legacy.show{display:block;z-index:var(--tct-popover-z-index, 50)}:popover-open,.show{position:absolute;margin:0;padding:var(--tct-popover-padding, 0);overflow:auto;background:var(--tct-popover-background, var(--app-white, #ffffff));backdrop-filter:var(--tct-popover-backdrop-filter, none);color:var(--tct-popover-font-color, var(--t-text, #4d4d4d));min-width:var(--tct-popover-min-width, 135px);margin-block:var(--tct-popover-margin-block, 0);box-shadow:var(--tct-popover-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)));border-width:var(--tct-popover-border-width, 0);border-style:solid;border-color:var(--tct-popover-border-color, transparent);border-radius:var(--tct-popover-border-radius, 0);max-height:var(--comp-pop-max-height);left:var(--comp-pop-left);opacity:var(--comp-pop-opacity, 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}:popover-open.block,.show.block{right:unset;width:var(--comp-pop-width);min-width:var(--tct-popover-min-width, unset)}:popover-open.left,.show.left{left:var(--comp-pop-left);right:unset}:popover-open.right,.show.right{right:var(--comp-pop-right);left:unset}:popover-open.down,.show.down{top:var(--tct-popover-top, var(--comp-pop-top));bottom:unset}:popover-open.up,.show.up{top:unset;bottom:var(--comp-pop-bottom)}:popover-open::-webkit-scrollbar,.show::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}:popover-open::-webkit-scrollbar-thumb,.show::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}:popover-open::-webkit-scrollbar-track,.show::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}click-elsewhere{position:relative;display:block}";
 
-const m = class {
+const g = class {
   constructor(i) {
     t(this, i);
     this.popoverStateChanged = e(this, "popoverStateChanged", 7);
@@ -623,11 +626,11 @@ const m = class {
     this.mode = null;
     this.handleMinHeight = () => {
       if (this.minHeight) {
-        p(this, "minHeight", "prop");
+        d(this, "minHeight", "prop");
       }
     };
     this.handlePopoverToggleEvent = t => {
-      f(this, [ "popoverStateChanged", "tctPopoverStateChanged" ], {
+      b(this, [ "popoverStateChanged", "tctPopoverStateChanged" ], {
         open: t.newState === "open"
       });
     };
@@ -649,13 +652,13 @@ const m = class {
         e.style.setProperty("--comp-pop-bottom", `${o}px`);
       }
       // Wait for one paint to prevent layout thrashing
-            await h();
+            await l();
       e.style.setProperty("--comp-pop-opacity", "1");
     };
     this.setPopoverAPICSSProperties = async () => {
       var t, e, i;
       const {controlElement: o, containerElement: s, currentDirection: n, isModule: r, align: a} = this;
-      const {top: c, bottom: l, left: p, right: d} = (e = (t = o === null || o === void 0 ? void 0 : o.getBoundingClientRect) === null || t === void 0 ? void 0 : t.call(o)) !== null && e !== void 0 ? e : {
+      const {top: c, bottom: h, left: p, right: d} = (e = (t = o === null || o === void 0 ? void 0 : o.getBoundingClientRect) === null || t === void 0 ? void 0 : t.call(o)) !== null && e !== void 0 ? e : {
         top: 0,
         bottom: 0,
         left: 0,
@@ -680,13 +683,13 @@ const m = class {
       }
       if (n === "down") {
         if (r) {
-          s.style.setProperty("--comp-pop-top", `${l}px`);
+          s.style.setProperty("--comp-pop-top", `${h}px`);
         } else {
-          s.style.setProperty("--comp-pop-top", `${l + window.scrollY}px`);
+          s.style.setProperty("--comp-pop-top", `${h + window.scrollY}px`);
         }
       }
       // Wait for one paint to prevent layout thrashing
-            await h();
+            await l();
       s.style.setProperty("--comp-pop-opacity", "1");
     };
     this.viewPortChanged = () => {
@@ -740,7 +743,7 @@ const m = class {
     this.handleMinHeight();
   }
   async openChanged(t) {
-    f(this, [ "popoverStateChanged", "tctPopoverStateChanged" ], {
+    b(this, [ "popoverStateChanged", "tctPopoverStateChanged" ], {
       open: t
     });
     if (t) {
@@ -754,7 +757,7 @@ const m = class {
       } else {
         this.containerElement.hidePopover();
       }
-      await h();
+      await l();
       this.clearCSSProperties();
     }
   }
@@ -788,7 +791,7 @@ const m = class {
     var t;
     window.addEventListener("resize", this.viewPortOrientationChanged);
     visualViewport === null || visualViewport === void 0 ? void 0 : visualViewport.addEventListener("resize", this.viewPortChanged);
-    if (d(this.hostElement) && !u()) {
+    if (u(this.hostElement) && !f()) {
       window.addEventListener("scroll", this.viewPortChanged, {
         passive: true,
         capture: true
@@ -810,9 +813,9 @@ const m = class {
     var t, e, i;
     const {containerElement: o, controlElement: s, providedDirection: n, displayBuffer: r} = this;
     if (o) o.style.maxHeight = null;
-    await h();
+    await l();
     const {isModule: a} = this;
-    const {top: c, bottom: l} = (e = (t = s === null || s === void 0 ? void 0 : s.getBoundingClientRect) === null || t === void 0 ? void 0 : t.call(s)) !== null && e !== void 0 ? e : {
+    const {top: c, bottom: h} = (e = (t = s === null || s === void 0 ? void 0 : s.getBoundingClientRect) === null || t === void 0 ? void 0 : t.call(s)) !== null && e !== void 0 ? e : {
       top: 0,
       bottom: 0
     };
@@ -821,13 +824,13 @@ const m = class {
     let u;
     if (a) {
       const {outletOffset: t = 0, innerHeight: e = window.innerHeight, top: o = 0, bottom: s = 0} = ((i = window.Tecton) === null || i === void 0 ? void 0 : i.platformDimensions) || {};
-      const n = window.innerHeight - l;
+      const n = window.innerHeight - h;
       // controlElement position visually on the page
             const a = t > 0 ? c : c + t - o;
-      const h = t + l - o;
+      const l = t + h - o;
       // visual space around the controlElement
             const p = a;
-      const f = e - s - h;
+      const f = e - s - l;
       // calculate space above and below controlElement
             const b = n < f;
       d = p - r;
@@ -835,7 +838,7 @@ const m = class {
     } else {
       p = window.innerHeight;
       d = c - r;
-      u = p - l - r;
+      u = p - h - r;
     }
     const f = d > u ? "up" : "down";
     // We do not want to update the max height once the popover is open unless the page orientation shifts (resize or mobile use cases)
@@ -895,18 +898,18 @@ const m = class {
     if (this.block) t.push("block");
     if (this.mode === "legacy") t.push("legacy");
     return i("div", {
-      key: "b9d7c97b45795239ad0a03702e7854be04d1a81a",
+      key: "137f3efb3f680289e9ccd9822b251b1c375e7bce",
       ref: t => this.containerElement = t,
       class: t.join(" "),
       "test-id": "outerContainer",
       tabIndex: -1,
       popover: "manual"
     }, i("div", {
-      key: "276f5a2604dff87c0c879dd501ae312fd21f784b",
+      key: "8e7b89067164fa4fe2f96a832d88d80a56970ce7",
       ref: t => this.contentElement = t,
       class: "content"
     }, i("slot", {
-      key: "cf8b2b14f5e5a7f48df335bcce7c6a201bfce0eb"
+      key: "e59f22f0aad5feac408f769abe8ce0583823199d"
     })));
   }
   get hostElement() {
@@ -920,8 +923,8 @@ const m = class {
   }
 };
 
-m.style = w;
+g.style = m;
 
-export { v as q2_option_list, m as q2_popover };
+export { w as q2_option_list, g as q2_popover };
 //# sourceMappingURL=q2-option-list.q2-popover.entry.esm.js.map
 //# sourceMappingURL=q2-option-list_2.entry.js.map