q2-tecton-elements 1.67.0 → 1.67.1

package/dist/q2-tecton-elements/click-elsewhere_3.entry.js

@@ -1,30 +1,30 @@
-import { r as t, c as e, g as i, h as o, H as s } from "./index-CGkHOjh1.js";
+import { r as t, c as i, g as e, h as o, H as s } from "./index-CGkHOjh1.js";
 
 import { m as n } from "./mirror-emit-DUjY_ucm.js";
 
 import { b as r } from "./component-DVxzK3WH.js";
 
-import { l as a, n as h, o as c, i as p, w as l, v as d, q as u, x as f, g as m } from "./index-C4PILj1_.js";
+import { l as a, n as h, o as c, i as l, w as p, v as d, q as u, x as f, g as m } from "./index-C4PILj1_.js";
 
-const b = class {
-  constructor(i) {
-    t(this, i);
-    this.change = e(this, "change", 7);
-    this.tctChange = e(this, "tctChange", 7);
+const v = class {
+  constructor(e) {
+    t(this, e);
+    this.change = i(this, "change", 7);
+    this.tctChange = i(this, "tctChange", 7);
     // #region Own Properties
         this.isCurrentlyFocused = false;
     /**
          * Listens for mouse and window events that happen outside this click-elsewhere element so we can close popovers when users click outside them
          */    this.mouseEventList = [ "mousedown", "dragstart", "touchstart" ];
     this.mouseHandler = t => {
-      const e = this.shadowContains(this.findActiveElement());
-      const i = this.shadowContains(this.shadowEventTarget(t)) || this.originatesInSlots(t.target);
-      if (!i && (this.isCurrentlyFocused || e)) {
+      const i = this.shadowContains(this.findActiveElement());
+      const e = this.shadowContains(this.shadowEventTarget(t)) || this.originatesInSlots(t.target);
+      if (!e && (this.isCurrentlyFocused || i)) {
         this.isCurrentlyFocused = false;
         n(this, [ "change", "tctChange" ]);
         return;
       }
-      this.isCurrentlyFocused = i || e;
+      this.isCurrentlyFocused = e || i;
     };
     this.windowBlurHandler = () => {
       this.isCurrentlyFocused = false;
@@ -60,11 +60,11 @@ const b = class {
     }
   }
   originatesInSlots(t) {
-    const e = this.hostElement.querySelectorAll("slot");
-    for (const i of Array.from(e)) {
-      const e = i && i.assignedNodes && i.assignedNodes() || this.hostElement.childNodes;
-      for (const i of Array.from(e)) {
-        if (i.contains(t)) {
+    const i = this.hostElement.querySelectorAll("slot");
+    for (const e of Array.from(i)) {
+      const i = e && e.assignedNodes && e.assignedNodes() || this.hostElement.childNodes;
+      for (const e of Array.from(i)) {
+        if (e.contains(t)) {
           return true;
         }
       }
@@ -89,7 +89,7 @@ const b = class {
     return t.composedPath()[0] || t.target;
   }
   get hostElement() {
-    return i(this);
+    return e(this);
   }
 };
 
@@ -97,15 +97,15 @@ function sanitizeRegexString(t) {
   return t.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
 
-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 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 w = class {
-  constructor(i) {
-    t(this, i);
-    this.change = e(this, "change", 7);
-    this.popoverState = e(this, "popoverState", 7);
-    this.ready = e(this, "ready", 3);
-    this.tctChange = e(this, "tctChange", 7);
+  constructor(e) {
+    t(this, e);
+    this.change = i(this, "change", 7);
+    this.popoverState = i(this, "popoverState", 7);
+    this.ready = i(this, "ready", 3);
+    this.tctChange = i(this, "tctChange", 7);
     this.keyStore = {
       queue: [],
       lastPressedAt: new Date
@@ -115,9 +115,9 @@ const w = class {
     /** 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 => {
-      const e = t.target;
-      const i = e.closest("q2-option:not([separator]):not([separator=true]), q2-dropdown-item:not([separator]):not([separator=true])");
-      this.selectOption(i);
+      const i = t.target;
+      const e = i.closest("q2-option:not([separator]):not([separator=true]), q2-dropdown-item:not([separator]):not([separator=true])");
+      this.selectOption(e);
       if (this.multiple) return;
       this.popoverState.emit({
         open: false,
@@ -125,18 +125,18 @@ const w = class {
       });
     };
     /* tslint:disable:cyclomatic-complexity */    this.externalKeydownHandler = t => {
-      const {key: e} = t;
+      const {key: i} = t;
       // Allow modifier-only keys to propagate without being handled
-            const i = [ "Shift", "Control", "Alt", "Meta" ];
-      if (i.includes(e)) return;
+            const e = [ "Shift", "Control", "Alt", "Meta" ];
+      if (e.includes(i)) return;
       t.stopPropagation();
       const {activeIndex: o, customSearch: s, allOptions: n} = this;
       let r;
-      switch (e) {
+      switch (i) {
        case " ":
         if (this.searchString) {
           if (s) break;
-          this.searchOptions(e, true);
+          this.searchOptions(i, true);
           break;
         } else if (this.type === "menu") {
           this.activeIndex = 0;
@@ -215,28 +215,28 @@ const w = class {
 
        default:
         if (s) break;
-        if (!e.match(/^[\w]$/)) break;
-        this.searchOptions(e, true);
+        if (!i.match(/^[\w]$/)) break;
+        this.searchOptions(i, true);
         break;
       }
     };
     /* tslint:enable:cyclomatic-complexity */    this.focusoutHandler = t => {
-      const {relatedTarget: e} = t;
-      const i = this.allOptions.includes(e);
-      const o = !i && this.hostElement.contains(e);
-      if (i || o) {
+      const {relatedTarget: i} = t;
+      const e = this.allOptions.includes(i);
+      const o = !e && this.hostElement.contains(i);
+      if (e || o) {
         t.stopPropagation();
       }
     };
     this.internalKeydownHandler = t => {
       t.stopPropagation();
-      const {activeIndex: e, customSearch: i, allOptions: o, allVisibleOptions: s, multiple: n} = this;
+      const {activeIndex: i, customSearch: e, allOptions: o, allVisibleOptions: s, multiple: n} = this;
       const {key: r, shiftKey: a} = t;
       let h;
       switch (r) {
        case " ":
         if (this.searchString && !this.multiple) {
-          if (i) break;
+          if (e) break;
           this.searchOptions(r, false);
           break;
         }
@@ -272,30 +272,30 @@ const w = class {
        case "ArrowUp":
         t.preventDefault();
         const c = s[0];
-        const p = c.active;
-        if (p) break;
-        if (e === undefined) {
+        const l = c.active;
+        if (l) break;
+        if (i === undefined) {
           this.setDefaultActiveElement();
           break;
         } else {
           const t = this.getNextVisibleIndex(-1);
           if (t === -1) break;
-          this.adjustActiveOptionAndScroll(t - e);
+          this.adjustActiveOptionAndScroll(t - i);
           break;
         }
 
        case "ArrowDown":
         t.preventDefault();
-        const l = s[s.length - 1];
-        const d = l.active;
+        const p = s[s.length - 1];
+        const d = p.active;
         if (d) break;
-        if (e === undefined) {
+        if (i === undefined) {
           this.setDefaultActiveElement();
           break;
         } else {
           const t = this.getNextVisibleIndex(1);
           if (t === -1) break;
-          this.adjustActiveOptionAndScroll(t - e);
+          this.adjustActiveOptionAndScroll(t - i);
           break;
         }
 
@@ -311,12 +311,12 @@ const w = class {
 
        case "PageUp":
         t.preventDefault();
-        this.openDropdownWithActiveElement(Math.max(e - 10, 0));
+        this.openDropdownWithActiveElement(Math.max(i - 10, 0));
         break;
 
        case "PageDown":
         t.preventDefault();
-        this.openDropdownWithActiveElement(Math.min(e + 10, o.length - 1));
+        this.openDropdownWithActiveElement(Math.min(i + 10, o.length - 1));
         break;
 
        case "Tab":
@@ -344,37 +344,37 @@ const w = class {
         break;
 
        default:
-        if (i) break;
+        if (e) break;
         if (!r.match(/^[\w]$/)) break;
         this.searchOptions(r, false);
         break;
       }
     };
-    this.searchAndFocus = (t, e) => {
+    this.searchAndFocus = (t, i) => {
       // pseudo search in non-searchable select
       const reorder = () => {
         this.pivotIndex = this.pivotIndex === undefined ? 0 : (this.activeIndex || 0) + 1;
-        const t = this.allOptions.map(((t, e) => ({
+        const t = this.allOptions.map(((t, i) => ({
           element: t,
-          index: e
+          index: i
         })));
         return [ ...t.slice(this.pivotIndex), ...t.slice(0, this.pivotIndex) ];
       };
       const buildQueue = () => {
-        const e = new Date;
-        if (e.getTime() - this.keyStore.lastPressedAt.getTime() > 1e3) {
+        const i = new Date;
+        if (i.getTime() - this.keyStore.lastPressedAt.getTime() > 1e3) {
           // empty stored keys if delay > 1s
           this.keyStore.queue.length = 0;
         }
         if (this.keyStore.queue.length !== 1 || this.keyStore.queue[0] !== t) {
           this.keyStore.queue.push(t);
         }
-        this.keyStore.lastPressedAt = e;
+        this.keyStore.lastPressedAt = i;
       };
       const searchIndex = t => {
-        const e = this.keyStore.queue.join("");
-        const i = sanitizeRegexString(e);
-        return t.find((t => !t.element.disabled && t.element.display && (t.element.display.match(new RegExp(`^${i}`, "i")) || t.element.display.replace(/\s/g, "").match(new RegExp(`^${i}`, "i")))));
+        const i = this.keyStore.queue.join("");
+        const e = sanitizeRegexString(i);
+        return t.find((t => !t.element.disabled && t.element.display && (t.element.display.match(new RegExp(`^${e}`, "i")) || t.element.display.replace(/\s/g, "").match(new RegExp(`^${e}`, "i")))));
       };
       const setFocus = ({index: t}) => {
         if (this.multiple) {
@@ -382,7 +382,7 @@ const w = class {
           this.openDropdownWithActiveElement(t);
         } else {
           this.activeIndex = t;
-          if (e) {
+          if (i) {
             this.selectOption(this.allOptions[t]);
             this.popoverState.emit({
               open: false,
@@ -392,9 +392,9 @@ const w = class {
         }
       };
       buildQueue();
-      const i = searchIndex(reorder());
-      if (i) {
-        setFocus(i);
+      const e = searchIndex(reorder());
+      if (e) {
+        setFocus(e);
       }
     };
   }
@@ -420,13 +420,13 @@ const w = class {
     t.stopPropagation();
   }
   delegateFocus(t) {
-    if (!p(t, this.hostElement)) return;
+    if (!l(t, this.hostElement)) return;
     this.popoverState.emit({
       open: true,
       action: "open"
     });
-    const {activeIndex: e} = this;
-    if (typeof e === "number" && e > -1) {
+    const {activeIndex: i} = this;
+    if (typeof i === "number" && i > -1) {
       this.setActiveOption();
       this.setFocusedOption();
     } else {
@@ -468,25 +468,25 @@ const w = class {
       this.showSelected = false;
       return;
     }
-    this.allOptions.forEach((e => {
-      if (!("_multiSelectHidden" in e)) return;
-      e._multiSelectHidden = t ? !e.selected : false;
+    this.allOptions.forEach((i => {
+      if (!("_multiSelectHidden" in i)) return;
+      i._multiSelectHidden = t ? !i.selected : false;
     }));
   }
   // #endregion
   // #region Local Methods
   get allContents() {
     const t = this.getRootSlot(this.hostElement);
-    const e = new Set([ "Q2-OPTGROUP", "Q2-OPTION", "Q2-DROPDOWN-ITEM" ]);
-    return t.filter((t => e.has(t.tagName)));
+    const i = new Set([ "Q2-OPTGROUP", "Q2-OPTION", "Q2-DROPDOWN-ITEM" ]);
+    return t.filter((t => i.has(t.tagName)));
   }
   get allOptions() {
     const t = this.allContents;
-    const extractOptions = t => t.reduce(((t, e) => {
-      if (e.tagName === "Q2-OPTION" || e.tagName === "Q2-DROPDOWN-ITEM") {
-        return e.separator ? t : [ ...t, e ];
-      } else if (e.tagName === "Q2-OPTGROUP") {
-        return [ ...t, ...extractOptions(Array.from(e.children)) ];
+    const extractOptions = t => t.reduce(((t, i) => {
+      if (i.tagName === "Q2-OPTION" || i.tagName === "Q2-DROPDOWN-ITEM") {
+        return i.separator ? t : [ ...t, i ];
+      } else if (i.tagName === "Q2-OPTGROUP") {
+        return [ ...t, ...extractOptions(Array.from(i.children)) ];
       } else {
         return t;
       }
@@ -505,22 +505,22 @@ const w = class {
   checkOptions() {
     const {type: t} = this;
     if (!t) return;
-    const e = t === "menu" ? "menuitem" : "option";
+    const i = t === "menu" ? "menuitem" : "option";
     this.allOptions.forEach((t => {
-      t.role = e;
+      t.role = i;
     }));
   }
   focusSelectedSibling(t) {
-    const {allVisibleOptions: e, allOptions: i} = this;
-    const o = e.length < 2;
+    const {allVisibleOptions: i, allOptions: e} = this;
+    const o = i.length < 2;
     if (o) {
       this.showSelected = false;
       return;
     }
-    const s = e.indexOf(t);
+    const s = i.indexOf(t);
     const n = s ? s - 1 : s + 1;
-    const r = e[n];
-    const a = i.indexOf(r);
+    const r = i[n];
+    const a = e.indexOf(r);
     this.activeIndex = a;
     this.setFocusedOption();
     this.scheduledAfterRender.push((() => {
@@ -530,29 +530,29 @@ const w = class {
   }
   getDefaultActiveIndex() {
     const {allOptions: t} = this;
-    const e = t.findIndex((t => "selected" in t && t.selected));
-    if (e > -1) return e;
-    const i = t.findIndex((t => !t.hidden));
+    const i = t.findIndex((t => "selected" in t && t.selected));
     if (i > -1) return i;
+    const e = t.findIndex((t => !t.hidden));
+    if (e > -1) return e;
     return 0;
   }
   getNextVisibleIndex(t) {
-    const {allVisibleOptions: e, allOptions: i, activeIndex: o} = this;
-    const s = i[o];
-    const n = e.indexOf(s);
+    const {allVisibleOptions: i, allOptions: e, activeIndex: o} = this;
+    const s = e[o];
+    const n = i.indexOf(s);
     let r = n + t;
     if (r < 0) {
-      r = e.length - 1;
-    } else if (r > e.length - 1) {
+      r = i.length - 1;
+    } else if (r > i.length - 1) {
       r = 0;
     }
-    const a = e[r];
-    return i.indexOf(a);
+    const a = i[r];
+    return e.indexOf(a);
   }
   getRootSlot(t) {
-    var e;
-    const i = t.querySelector("slot");
-    const o = (e = i === null || i === void 0 ? void 0 : i.assignedElements()) !== null && e !== void 0 ? e : Array.from(t.children);
+    var i;
+    const e = t.querySelector("slot");
+    const o = (i = e === null || e === void 0 ? void 0 : e.assignedElements()) !== null && i !== void 0 ? i : Array.from(t.children);
     const s = !!o.length && o[0].tagName === "SLOT";
     if (s) {
       return this.getRootSlot(o[0]);
@@ -566,7 +566,7 @@ const w = class {
       open: true,
       action: "open"
     });
-    await l();
+    await p();
     this.activeIndex = t;
     this.setActiveOption();
     this.setFocusedOption();
@@ -583,18 +583,18 @@ const w = class {
   scrollToActiveOption() {
     const t = this.allOptions[this.activeIndex];
     if (!t) return;
-    const {scrollX: e, scrollY: i} = window;
+    const {scrollX: i, scrollY: e} = window;
     t.scrollIntoView({
       block: "center"
     });
-    window.scrollTo(e, i);
+    window.scrollTo(i, e);
   }
-  searchOptions(t, e) {
+  searchOptions(t, i) {
     this.searchString = t;
-    this.searchAndFocus(t, e);
+    this.searchAndFocus(t, i);
   }
   selectOption(t) {
-    const {multiple: e, noSelect: i, showSelected: o} = this;
+    const {multiple: i, noSelect: e, showSelected: o} = this;
     if (!t || t.disabled || "disabledGroup" in t && t.disabledGroup) return;
     const s = t.value;
     const r = "display" in t && t.display ? t.display : t.innerText.trim();
@@ -603,19 +603,19 @@ const w = class {
       display: r
     };
     let h = [];
-    if (e) {
-      const {selectedOptions: e} = this;
-      const i = e.find((t => t.value === s));
-      if (i) {
-        h = e.filter((({value: t}) => t !== s));
+    if (i) {
+      const {selectedOptions: i} = this;
+      const e = i.find((t => t.value === s));
+      if (e) {
+        h = i.filter((({value: t}) => t !== s));
       } else {
-        h = [ ...e, a ];
+        h = [ ...i, a ];
       }
       if (o) this.focusSelectedSibling(t);
     } else {
       h = [ a ];
     }
-    if (i) this.setActiveElement(null); else this.selectedOptions = h;
+    if (e) this.setActiveElement(null); else this.selectedOptions = h;
     n(this, [ "change", "tctChange" ], {
       value: s,
       values: h
@@ -623,35 +623,35 @@ const w = class {
   }
   setActiveOption() {
     const t = this.activeIndex;
-    this.allOptions.forEach(((e, i) => {
-      e.active = t === i;
+    this.allOptions.forEach(((i, e) => {
+      i.active = t === e;
     }));
   }
   setFocusedOption() {
     const t = this.allOptions[this.activeIndex];
     if (!t) return;
-    const e = d(t);
-    if (e) t.focus({
+    const i = d(t);
+    if (i) t.focus({
       preventScroll: true
     }); else h((() => t.focus({
       preventScroll: true
     })));
   }
   updateMultipleOptionAttrs() {
-    const {allOptions: t, selectedOptions: e} = this;
-    const i = e.map((({value: t}) => t));
+    const {allOptions: t, selectedOptions: i} = this;
+    const e = i.map((({value: t}) => t));
     if (this.noSelect) return;
     t.forEach((t => {
       if (!("selected" in t)) return;
-      t.selected = i.includes(t.value);
+      t.selected = e.includes(t.value);
     }));
   }
   updateSingleOptionAttrs() {
     var t;
-    const {allOptions: e, selectedOptions: i} = this;
-    const o = ((t = i[0]) === null || t === void 0 ? void 0 : t.value) || undefined;
+    const {allOptions: i, selectedOptions: e} = this;
+    const o = ((t = e[0]) === null || t === void 0 ? void 0 : t.value) || undefined;
     if (this.noSelect) return;
-    e.forEach((t => {
+    i.forEach((t => {
       if (!("selected" in t)) return;
       t.selected = t.value === o;
     }));
@@ -660,14 +660,14 @@ const w = class {
   // #region Render Methods
   render() {
     return o(s, {
-      key: "05e3dbeb1ffe4910f7c3c922311f51e0e34a4771"
+      key: "99c8a52ef8c6adbd138bdd4ff40340fabe670903"
     }, o("div", {
-      key: "152c7430207325f6d6bcb6b5253c61528f9338eb",
+      key: "632777fab876b3ef838e8658de35df410fc1d3b7",
       class: "content",
       ref: t => this.contentElement = t,
       onFocusout: this.focusoutHandler
     }, o("div", {
-      key: "d94b9d6fe8fe5221b44c59424351cd2fa4e2139b",
+      key: "97079fcb63d10e57ae3e3f1fcbc0a4c307dcda3c",
       class: "options",
       "aria-label": a("tecton.element.optionList.label", [ this.label ]),
       "aria-multiselectable": this.type === "menu" ? undefined : `${!!this.multiple}`,
@@ -675,11 +675,11 @@ const w = class {
       onKeyDown: this.internalKeydownHandler,
       onClick: this.clickHandler
     }, o("slot", {
-      key: "c655e10092d73bdeb985ee08776024c5dbd6fc96"
+      key: "07f07e638defb8427f320db9bf3cfb87f6711f9e"
     }))));
   }
   get hostElement() {
-    return i(this);
+    return e(this);
   }
   static get watchers() {
     return {
@@ -689,19 +689,20 @@ const w = class {
   }
 };
 
-w.style = v;
+w.style = b;
 
 const g = "*{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)}@keyframes popoverOpen{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}@keyframes popoverClose{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0.95)}}: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-3, 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.animating-open,.show.animating-open{animation-name:popoverOpen;animation-duration:var(--tct-popover-open-animation-duration, var(--t-tween-time-in-1, 150ms));animation-timing-function:var(--tct-popover-open-animation-timing-function, ease-out);animation-fill-mode:var(--tct-popover-open-animation-fill-mode, forwards)}:popover-open.animating-close,.show.animating-close{animation-name:popoverClose;animation-duration:var(--tct-popover-close-animation-duration, var(--t-tween-time-out-1, 100ms));animation-timing-function:var(--tct-popover-close-animation-timing-function, ease-in);animation-fill-mode:var(--tct-popover-close-animation-fill-mode, forwards)}@media (prefers-reduced-motion: reduce){:popover-open.animating-open,:popover-open.animating-close,.show.animating-open,.show.animating-close{animation:none}}: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.down.left:not(.mobile),.show.down.left:not(.mobile){transform-origin:top left}:popover-open.down.right:not(.mobile),.show.down.right:not(.mobile){transform-origin:top right}:popover-open.up.left:not(.mobile),.show.up.left:not(.mobile){transform-origin:bottom left}:popover-open.up.right:not(.mobile),.show.up.right:not(.mobile){transform-origin:bottom right}:popover-open.mobile.down,.show.mobile.down{transform-origin:center top}:popover-open.mobile.up,.show.mobile.up{transform-origin:center 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 k = class {
-  constructor(i) {
-    t(this, i);
-    this.popoverStateChanged = e(this, "popoverStateChanged", 7);
-    this.tctPopoverStateChanged = e(this, "tctPopoverStateChanged", 7);
+  constructor(e) {
+    t(this, e);
+    this.popoverStateChanged = i(this, "popoverStateChanged", 7);
+    this.tctPopoverStateChanged = i(this, "tctPopoverStateChanged", 7);
     /**
          * The number of pixels to leave between the popover and the edge of the viewport
          */    this.displayBuffer = 10;
     this.orientationChanged = false;
+    this.pendingAnimationResolve = null;
     // #endregion
     // #region State Properties
         this.animationState = "idle";
@@ -728,37 +729,39 @@ const k = class {
       });
     };
     this.setAbsoluteCSSProperties = async () => {
-      const {controlElement: t, containerElement: e, currentDirection: i, align: o} = this;
+      const {controlElement: t, containerElement: i, currentDirection: e, align: o} = this;
+      if (!i) return;
       if (o === "right") {
-        e.style.setProperty("--comp-pop-right", "0");
-        e.style.setProperty("--comp-pop-left", "unset");
+        i.style.setProperty("--comp-pop-right", "0");
+        i.style.setProperty("--comp-pop-left", "unset");
       } else {
-        e.style.setProperty("--comp-pop-left", "0");
-        e.style.setProperty("--comp-pop-right", "unset");
+        i.style.setProperty("--comp-pop-left", "0");
+        i.style.setProperty("--comp-pop-right", "unset");
       }
       if (this.block) {
-        e.style.setProperty("--comp-pop-width", "100%");
+        i.style.setProperty("--comp-pop-width", "100%");
       }
-      if (i === "up") {
-        const i = getComputedStyle(t);
-        const o = parseInt(i.height || "0") + parseInt(i.borderTopWidth || "0") + parseInt(i.borderBottomWidth || "0");
-        e.style.setProperty("--comp-pop-bottom", `${o}px`);
+      if (e === "up") {
+        const e = getComputedStyle(t);
+        const o = parseInt(e.height || "0") + parseInt(e.borderTopWidth || "0") + parseInt(e.borderBottomWidth || "0");
+        i.style.setProperty("--comp-pop-bottom", `${o}px`);
       }
       // Wait for one paint to prevent layout thrashing
-            await l();
-      e.style.setProperty("--comp-pop-opacity", "1");
+            await p();
+      if (this.containerElement) i.style.setProperty("--comp-pop-opacity", "1");
     };
     this.setPopoverAPICSSProperties = async () => {
-      var t, e, i;
+      var t, i, e;
       const {controlElement: o, containerElement: s, currentDirection: n, isModule: r, align: a} = this;
-      const {top: h, bottom: c, 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 : {
+      if (!s) return;
+      const {top: h, bottom: c, left: l, right: d} = (i = (t = o === null || o === void 0 ? void 0 : o.getBoundingClientRect) === null || t === void 0 ? void 0 : t.call(o)) !== null && i !== void 0 ? i : {
         top: 0,
         bottom: 0,
         left: 0,
         right: 0
       };
-      const u = p;
-      const m = ((i = window === null || window === void 0 ? void 0 : window.visualViewport) === null || i === void 0 ? void 0 : i.width) - d;
+      const u = l;
+      const m = ((e = window === null || window === void 0 ? void 0 : window.visualViewport) === null || e === void 0 ? void 0 : e.width) - d;
       if (a === "right") {
         s.style.setProperty("--comp-pop-right", `${m - window.scrollX}px`);
         s.style.setProperty("--comp-pop-left", "unset");
@@ -767,24 +770,24 @@ const k = class {
         s.style.setProperty("--comp-pop-right", "unset");
       }
       if (this.block) s.style.setProperty("--comp-pop-width", `${(o === null || o === void 0 ? void 0 : o.offsetWidth) || 0}px`);
-      const b = r && f(this.hostElement);
+      const v = r && f(this.hostElement);
       if (n === "up") {
-        if (r && !b) {
+        if (r && !v) {
           s.style.setProperty("--comp-pop-bottom", `${window.innerHeight - h}px`);
         } else {
           s.style.setProperty("--comp-pop-bottom", `${window.innerHeight - h - window.scrollY}px`);
         }
       }
       if (n === "down") {
-        if (r && !b) {
+        if (r && !v) {
           s.style.setProperty("--comp-pop-top", `${c}px`);
         } else {
           s.style.setProperty("--comp-pop-top", `${c + window.scrollY}px`);
         }
       }
       // Wait for one paint to prevent layout thrashing
-            await l();
-      s.style.setProperty("--comp-pop-opacity", "1");
+            await p();
+      if (this.containerElement) s.style.setProperty("--comp-pop-opacity", "1");
     };
     this.viewPortChanged = () => {
       if (!this.open) return;
@@ -798,8 +801,13 @@ const k = class {
   // #endregion
   // #region Component Lifecycle Events
   disconnectedCallback() {
+    var t;
     this.removeViewportListeners();
-    this.containerElement.removeEventListener("toggle", this.handlePopoverToggleEvent);
+    if (this.pendingAnimationResolve) {
+      this.pendingAnimationResolve();
+      this.pendingAnimationResolve = null;
+    }
+    (t = this.containerElement) === null || t === void 0 ? void 0 : t.removeEventListener("toggle", this.handlePopoverToggleEvent);
     this.containerElement = null;
     this.contentElement = null;
     this.controlElement = null;
@@ -811,22 +819,24 @@ const k = class {
     }
   }
   componentDidLoad() {
+    var t;
     this.handleMinHeight();
-    if (this.supportsPopoverAPI) this.containerElement.addEventListener("toggle", this.handlePopoverToggleEvent);
+    if (this.supportsPopoverAPI) (t = this.containerElement) === null || t === void 0 ? void 0 : t.addEventListener("toggle", this.handlePopoverToggleEvent);
     if (this.open) this.determinePopDirection();
   }
   // #endregion
   // #region Listeners
   popoverStateHandler(t) {
-    const {detail: {open: e}} = t;
-    if (e === this.open) return;
-    this.open = e;
+    const {detail: {open: i}} = t;
+    if (i === this.open) return;
+    this.open = i;
     t.stopPropagation();
   }
   // #endregion
   // #region Public Methods API
   async scrollContainerTo(t) {
-    this.containerElement.scrollTo(t);
+    var i;
+    (i = this.containerElement) === null || i === void 0 ? void 0 : i.scrollTo(t);
   }
   async toggle() {
     this.open = !this.open;
@@ -850,16 +860,22 @@ const k = class {
       // Wait for close animation to complete
             if (this.animated) {
         await new Promise((t => {
+          var i;
           const handleAnimationEnd = () => {
-            this.containerElement.removeEventListener("animationend", handleAnimationEnd);
+            var i;
+            this.pendingAnimationResolve = null;
+            (i = this.containerElement) === null || i === void 0 ? void 0 : i.removeEventListener("animationend", handleAnimationEnd);
             t();
           };
-          this.containerElement.addEventListener("animationend", handleAnimationEnd);
+          this.pendingAnimationResolve = handleAnimationEnd;
+          (i = this.containerElement) === null || i === void 0 ? void 0 : i.addEventListener("animationend", handleAnimationEnd);
+          if (!this.containerElement) t();
         }));
       } else {
         // No animation, proceed immediately
-        await l();
+        await p();
       }
+      if (!this.containerElement) return;
       this.currentDirection = undefined;
       this.animationState = "idle";
       if (this.mode === "legacy" || !this.supportsPopoverAPI) {
@@ -867,17 +883,17 @@ const k = class {
       } else {
         this.containerElement.hidePopover();
       }
-      await l();
+      await p();
       this.clearCSSProperties();
     }
   }
   // #endregion
   // #region Local Methods
   get isModule() {
-    var t, e;
-    const i = window !== window.top;
-    const o = Object.keys((e = (t = window.Tecton) === null || t === void 0 ? void 0 : t.platformDimensions) !== null && e !== void 0 ? e : {}).length > 0;
-    return i && o;
+    var t, i;
+    const e = window !== window.top;
+    const o = Object.keys((i = (t = window.Tecton) === null || t === void 0 ? void 0 : t.platformDimensions) !== null && i !== void 0 ? i : {}).length > 0;
+    return e && o;
   }
   get providedDirection() {
     const {direction: t} = this;
@@ -911,6 +927,7 @@ const k = class {
     window.addEventListener("orientationchange", this.viewPortOrientationChanged);
   }
   clearCSSProperties() {
+    if (!this.containerElement) return;
     this.containerElement.style.removeProperty("--comp-pop-max-height");
     this.containerElement.style.removeProperty("--comp-pop-top");
     this.containerElement.style.removeProperty("--comp-pop-bottom");
@@ -920,58 +937,59 @@ const k = class {
     this.containerElement.style.removeProperty("--comp-pop-opacity");
   }
   async determinePopDirection() {
-    var t, e, i;
+    var t, i, e;
     const {containerElement: o, controlElement: s, providedDirection: n, displayBuffer: r} = this;
     if (o) o.style.maxHeight = null;
-    await l();
+    await p();
+    if (!this.containerElement) return;
     const {isModule: a} = this;
-    const {top: h, bottom: c} = (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: h, bottom: c} = (i = (t = s === null || s === void 0 ? void 0 : s.getBoundingClientRect) === null || t === void 0 ? void 0 : t.call(s)) !== null && i !== void 0 ? i : {
       top: 0,
       bottom: 0
     };
-    let p;
+    let l;
     let d;
     let u;
     const m = a && f(this.hostElement);
     if (a && !m) {
-      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 {outletOffset: t = 0, innerHeight: i = window.innerHeight, top: o = 0, bottom: s = 0} = ((e = window.Tecton) === null || e === void 0 ? void 0 : e.platformDimensions) || {};
       const n = window.innerHeight - c;
       // controlElement position visually on the page
             const a = t > 0 ? h : h + t - o;
-      const p = t + c - o;
+      const l = t + c - o;
       // visual space around the controlElement
-            const l = a;
-      const f = e - s - p;
+            const p = a;
+      const f = i - s - l;
       // calculate space above and below controlElement
             const m = n < f;
-      d = l - r;
+      d = p - r;
       u = m ? n - r : f - r;
     } else {
-      p = window.innerHeight;
+      l = window.innerHeight;
       d = h - r;
-      u = p - c - r;
+      u = l - c - r;
     }
-    const b = d > u ? "up" : "down";
+    const v = 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)
-        const v = !o.style.getPropertyValue("--comp-pop-max-height") || this.orientationChanged;
+        const b = !(o === null || o === void 0 ? void 0 : o.style.getPropertyValue("--comp-pop-max-height")) || this.orientationChanged;
     // we do not want to constantly update the max-height after an orientation change, so we switch this back to false
         this.orientationChanged = false;
-    const w = this.currentDirection || n || b;
+    const w = this.currentDirection || n || v;
     switch (w) {
      case "up":
-      if (v) {
+      if (b && o) {
         const t = this.validatedMaxHeight || d;
-        const e = Math.min(d, t);
-        o.style.setProperty("--comp-pop-max-height", `${e}px`);
+        const i = Math.min(d, t);
+        o.style.setProperty("--comp-pop-max-height", `${i}px`);
       }
       this.setDirectionAndShow("up");
       break;
 
      case "down":
-      if (v) {
+      if (b && o) {
         const t = this.validatedMaxHeight || u;
-        const e = Math.min(u, t);
-        o.style.setProperty("--comp-pop-max-height", `${e}px`);
+        const i = Math.min(u, t);
+        o.style.setProperty("--comp-pop-max-height", `${i}px`);
       }
       this.setDirectionAndShow("down");
       break;
@@ -988,17 +1006,18 @@ const k = class {
     window.removeEventListener("orientationchange", this.viewPortOrientationChanged);
   }
   setDirectionAndShow(t) {
+    var i;
     // Due to some runtime inconsistency across devices/browsers we need to add one more check here because the
     // popover can be closed between the time the popover is opened and the time the direction is determined
-    const e = this.open;
-    if (!e) return;
+        const e = this.open;
+    if (!e || !this.containerElement) return;
     this.currentDirection = t;
     if (this.mode === "legacy" || !this.supportsPopoverAPI) {
       this.show = true;
       this.setAbsoluteCSSProperties();
     } else {
       this.setPopoverAPICSSProperties();
-      this.containerElement.showPopover();
+      (i = this.containerElement) === null || i === void 0 ? void 0 : i.showPopover();
     }
   }
   // #endregion
@@ -1012,22 +1031,22 @@ const k = class {
     if (this.animated && this.animationState === "opening") t.push("animating-open");
     if (this.animated && this.animationState === "closing") t.push("animating-close");
     return o("div", {
-      key: "b5166478bf50c313679ce71b381e6fe305e03446",
+      key: "779d18b2765abec3eff0f19ca297b01356a06a7d",
       ref: t => this.containerElement = t,
       class: t.join(" "),
       "test-id": "outerContainer",
       tabIndex: -1,
       popover: "manual"
     }, o("div", {
-      key: "9e939ece2775d98418f726066c9e7b1e7dcb7fde",
+      key: "47eb4c1420bbc63f821333c03804c1843363f946",
       ref: t => this.contentElement = t,
       class: "content"
     }, o("slot", {
-      key: "dc16dc214cf71f050e49057f6f35271bb141b692"
+      key: "8554a334fd61f07cf712e2bdbe797f7835878469"
     })));
   }
   get hostElement() {
-    return i(this);
+    return e(this);
   }
   static get watchers() {
     return {
@@ -1039,6 +1058,6 @@ const k = class {
 
 k.style = g;
 
-export { b as click_elsewhere, w as q2_option_list, k as q2_popover };
+export { v as click_elsewhere, w as q2_option_list, k as q2_popover };
 //# sourceMappingURL=click-elsewhere.q2-option-list.q2-popover.entry.esm.js.map
 //# sourceMappingURL=click-elsewhere_3.entry.js.map