q2-tecton-elements 1.53.0 → 1.54.0

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

@@ -0,0 +1,902 @@
+import { r as t, c as e, h as i, H as s, g as o } from "./index-7a5365e2.js";
+
+import { n, l as r, o as a, i as h, w as c, v as l, h as p } from "./index-504f1a9e.js";
+
+function sanitizeRegexString(t) {
+  return t.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+const d = "*{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}: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 f = d;
+
+const u = 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.keyStore = {
+      queue: [],
+      lastPressedAt: new Date
+    };
+    this.scheduledAfterRender = [];
+    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);
+      if (this.multiple) return;
+      this.popoverState.emit({
+        open: false,
+        action: "select"
+      });
+    };
+    /* tslint:disable:cyclomatic-complexity */    this.externalKeydownHandler = t => {
+      t.stopPropagation();
+      const {activeIndex: e, customSearch: i, allOptions: s} = this;
+      const {key: o} = t;
+      let r;
+      switch (o) {
+       case " ":
+        if (this.searchString) {
+          if (i) break;
+          this.searchOptions(o, true);
+          break;
+        } else if (this.type === "menu") {
+          this.activeIndex = 0;
+          this.openDropdownWithActiveElement(0);
+        } else {
+          this.setDefaultActiveElement();
+          n((() => this.popoverState.emit({
+            open: true,
+            action: "open"
+          })));
+        }
+        break;
+
+       case "Enter":
+        if (this.type === "menu") {
+          this.activeIndex = 0;
+          this.openDropdownWithActiveElement(0);
+        } else {
+          this.setDefaultActiveElement();
+          n((() => this.popoverState.emit({
+            open: true,
+            action: "open"
+          })));
+        }
+        break;
+
+       case "ArrowUp":
+        t.preventDefault();
+        r = !!this.selectedOptions.length ? this.getDefaultActiveIndex() : this.getNextVisibleIndex(-1);
+        if (r === -1) break;
+        this.openDropdownWithActiveElement(r);
+        break;
+
+       case "ArrowDown":
+        t.preventDefault();
+        r = !!this.selectedOptions.length ? this.getDefaultActiveIndex() : this.getNextVisibleIndex(1);
+        if (r === -1) break;
+        this.openDropdownWithActiveElement(r);
+        break;
+
+       case "Home":
+        t.preventDefault();
+        this.openDropdownWithActiveElement(0);
+        break;
+
+       case "End":
+        t.preventDefault();
+        this.openDropdownWithActiveElement(s.length - 1);
+        break;
+
+       case "PageUp":
+        t.preventDefault();
+        this.openDropdownWithActiveElement(Math.max((e || 0) - 10, 0));
+        break;
+
+       case "PageDown":
+        t.preventDefault();
+        this.openDropdownWithActiveElement(Math.min((e || 0) + 10, s.length - 1));
+        break;
+
+       case "Tab":
+        this.popoverState.emit({
+          open: false,
+          action: "close"
+        });
+        break;
+
+       case "Esc":
+       case "Escape":
+        if (this.noSelect) this.setActiveElement(null);
+        this.popoverState.emit({
+          open: false,
+          action: "close"
+        });
+        break;
+
+       default:
+        if (i) break;
+        if (!o.match(/^[\w]$/)) break;
+        this.searchOptions(o, true);
+        break;
+      }
+    };
+    /* tslint:enable:cyclomatic-complexity */    this.focusoutHandler = t => {
+      const {relatedTarget: e} = t;
+      const i = this.allOptions.includes(e);
+      const s = !i && this.hostElement.contains(e);
+      if (i || s) {
+        t.stopPropagation();
+      }
+    };
+    this.internalKeydownHandler = t => {
+      t.stopPropagation();
+      const {activeIndex: e, customSearch: i, allOptions: s, allVisibleOptions: o, multiple: n} = this;
+      const {key: r, shiftKey: a} = t;
+      let h;
+      switch (r) {
+       case " ":
+        if (this.searchString && !this.multiple) {
+          if (i) break;
+          this.searchOptions(r, false);
+          break;
+        }
+        t.preventDefault();
+        h = s.find((t => t.active));
+        if (!h || h.disabled) break;
+        this.selectOption(h);
+        if (n) break;
+        this.popoverState.emit({
+          open: false,
+          action: "select"
+        });
+        break;
+
+       case "Enter":
+        t.preventDefault();
+        h = s.find((t => t.active));
+        if (!h || h.disabled) break;
+        this.selectOption(h);
+        if (n) break;
+        this.popoverState.emit({
+          open: false,
+          action: "select"
+        });
+        break;
+
+       case "ArrowUp":
+        t.preventDefault();
+        const c = o[0];
+        const l = c.active;
+        if (l) break;
+        if (e === undefined) {
+          this.setDefaultActiveElement();
+          break;
+        } else {
+          const t = this.getNextVisibleIndex(-1);
+          if (t === -1) break;
+          this.adjustActiveOptionAndScroll(t - e);
+          break;
+        }
+
+       case "ArrowDown":
+        t.preventDefault();
+        const p = o[o.length - 1];
+        const d = p.active;
+        if (d) break;
+        if (e === undefined) {
+          this.setDefaultActiveElement();
+          break;
+        } else {
+          const t = this.getNextVisibleIndex(1);
+          if (t === -1) break;
+          this.adjustActiveOptionAndScroll(t - e);
+          break;
+        }
+
+       case "Home":
+        t.preventDefault();
+        this.openDropdownWithActiveElement(0);
+        break;
+
+       case "End":
+        t.preventDefault();
+        this.openDropdownWithActiveElement(s.length - 1);
+        break;
+
+       case "PageUp":
+        t.preventDefault();
+        this.openDropdownWithActiveElement(Math.max(e - 10, 0));
+        break;
+
+       case "PageDown":
+        t.preventDefault();
+        this.openDropdownWithActiveElement(Math.min(e + 10, s.length - 1));
+        break;
+
+       case "Tab":
+        if (a) break;
+        if (this.multiple && this.type === "listbox") break;
+        if (this.type === "menu") {
+          this.popoverState.emit({
+            open: false,
+            action: "close"
+          });
+          break;
+        }
+        h = s.find((t => t.active));
+        if (!h || h.disabled) return;
+        this.selectOption(h);
+        break;
+
+       case "Esc":
+       case "Escape":
+        if (this.noSelect) this.setActiveElement(null);
+        this.popoverState.emit({
+          open: false,
+          action: "close"
+        });
+        break;
+
+       default:
+        if (i) break;
+        if (!r.match(/^[\w]$/)) break;
+        this.searchOptions(r, false);
+        break;
+      }
+    };
+    this.searchAndFocus = (t, e) => {
+      // 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) => ({
+          element: t,
+          index: e
+        })));
+        return [ ...t.slice(this.pivotIndex), ...t.slice(0, this.pivotIndex) ];
+      };
+      const buildQueue = () => {
+        const e = new Date;
+        if (e.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;
+      };
+      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 setFocus = ({index: t}) => {
+        if (this.multiple) {
+          // multiple: should open to make sure that which options are selected
+          this.openDropdownWithActiveElement(t);
+        } else {
+          this.activeIndex = t;
+          if (e) {
+            this.selectOption(this.allOptions[t]);
+            this.popoverState.emit({
+              open: false,
+              action: "select"
+            });
+          } else this.setActiveElement(t);
+        }
+      };
+      buildQueue();
+      const i = searchIndex(reorder());
+      if (i) {
+        setFocus(i);
+      }
+    };
+    this.hasOptions = undefined;
+    this.align = undefined;
+    this.customSearch = undefined;
+    this.disabled = undefined;
+    this.label = r("tecton.element.optionList.label");
+    this.multiple = undefined;
+    this.noSelect = undefined;
+    this.selectedOptions = [];
+    this.showSelected = undefined;
+    this.type = "listbox";
+  }
+  // #endregion
+  // #region Component Lifecycle Events
+  componentWillLoad() {
+    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);
+    this.checkOptions();
+    this.selectedOptionsUpdated();
+    this.ready.emit();
+  }
+  componentDidRender() {
+    this.scheduledAfterRender.forEach((t => t()));
+    this.scheduledAfterRender = [];
+  }
+  // #endregion
+  // #region Listeners
+  handleClick(t) {
+    t.stopPropagation();
+  }
+  delegateFocus(t) {
+    if (!h(t, this.hostElement)) return;
+    this.popoverState.emit({
+      open: true,
+      action: "open"
+    });
+    const {activeIndex: e} = this;
+    if (typeof e === "number" && e > -1) {
+      this.setActiveOption();
+      this.setFocusedOption();
+    } else {
+      this.setDefaultActiveElement();
+    }
+  }
+  // #endregion
+  // #region Public Methods API
+  async getContents() {
+    return this.allContents;
+  }
+  async getOptions() {
+    return this.allOptions;
+  }
+  async handleExternalKeydown(t) {
+    this.externalKeydownHandler(t);
+  }
+  async setActiveElement(t) {
+    this.activeIndex = t;
+    this.setActiveOption();
+    this.setFocusedOption();
+  }
+  async setDefaultActiveElement() {
+    this.activeIndex = this.getDefaultActiveIndex();
+    this.setActiveOption();
+    this.setFocusedOption();
+  }
+  // #endregion
+  // #region Watchers
+  selectedOptionsUpdated() {
+    if (this.multiple) {
+      this.updateMultipleOptionAttrs();
+    } else {
+      this.updateSingleOptionAttrs();
+    }
+  }
+  showSelectedUpdated(t) {
+    if (t && this.selectedOptions.length === 0) {
+      this.showSelected = false;
+      return;
+    }
+    this.allOptions.forEach((e => {
+      if (!("_multiSelectHidden" in e)) return;
+      e._multiSelectHidden = t ? !e.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)));
+  }
+  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)) ];
+      } else {
+        return t;
+      }
+    }), []);
+    return extractOptions(t);
+  }
+  get allVisibleOptions() {
+    return this.allOptions.filter((t => !t.hidden && (!("_multiSelectHidden" in t) || !t._multiSelectHidden) && !t.disabled && (!("disabledGroup" in t) || !t.disabledGroup)));
+  }
+  adjustActiveOptionAndScroll(t) {
+    this.activeIndex += t;
+    this.setActiveOption();
+    this.setFocusedOption();
+    this.scrollToActiveOption();
+  }
+  checkOptions() {
+    const {type: t} = this;
+    if (!t) return;
+    const e = t === "menu" ? "menuitem" : "option";
+    this.allOptions.forEach((t => {
+      t.role = e;
+    }));
+  }
+  focusSelectedSibling(t) {
+    const {allVisibleOptions: e, allOptions: i} = this;
+    const s = e.length < 2;
+    if (s) {
+      this.showSelected = false;
+      return;
+    }
+    const o = e.indexOf(t);
+    const n = o ? o - 1 : o + 1;
+    const r = e[n];
+    const a = i.indexOf(r);
+    this.activeIndex = a;
+    this.setFocusedOption();
+    this.scheduledAfterRender.push((() => {
+      if (!("_multiSelectHidden" in t)) return;
+      t._multiSelectHidden = !t.selected;
+    }));
+  }
+  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));
+    if (i > -1) return i;
+    return 0;
+  }
+  getNextVisibleIndex(t) {
+    const {allVisibleOptions: e, allOptions: i, activeIndex: s} = this;
+    const o = i[s];
+    const n = e.indexOf(o);
+    let r = n + t;
+    if (r < 0) {
+      r = e.length - 1;
+    } else if (r > e.length - 1) {
+      r = 0;
+    }
+    const a = e[r];
+    return i.indexOf(a);
+  }
+  getRootSlot(t) {
+    var e;
+    const i = t.querySelector("slot");
+    const s = (e = i === null || i === void 0 ? void 0 : i.assignedElements()) !== null && e !== void 0 ? e : Array.from(t.children);
+    const o = !!s.length && s[0].tagName === "SLOT";
+    if (o) {
+      return this.getRootSlot(s[0]);
+    } else {
+      return s;
+    }
+  }
+  async openDropdownWithActiveElement(t) {
+    if (this.disabled) return;
+    this.popoverState.emit({
+      open: true,
+      action: "open"
+    });
+    await c();
+    this.activeIndex = t;
+    this.setActiveOption();
+    this.setFocusedOption();
+    this.scrollToActiveOption();
+  }
+  resetTimer() {
+    if (this.searchStringTimer) {
+      clearTimeout(this.searchStringTimer);
+    }
+    this.searchStringTimer = window.setTimeout((() => {
+      this.searchString = null;
+    }), 2e3);
+  }
+  scrollToActiveOption() {
+    const t = this.allOptions[this.activeIndex];
+    t === null || t === void 0 ? void 0 : t.scrollIntoView({
+      block: "center"
+    });
+  }
+  searchOptions(t, e) {
+    this.searchString = t;
+    this.searchAndFocus(t, e);
+  }
+  selectOption(t) {
+    const {multiple: e, noSelect: i, showSelected: s} = this;
+    if (!t || t.disabled || "disabledGroup" in t && t.disabledGroup) return;
+    const o = t.value;
+    const n = "display" in t && t.display ? t.display : t.innerText.trim();
+    const r = {
+      value: o,
+      display: n
+    };
+    let a = [];
+    if (e) {
+      const {selectedOptions: e} = this;
+      const i = e.find((t => t.value === o));
+      if (i) {
+        a = e.filter((({value: t}) => t !== o));
+      } else {
+        a = [ ...e, r ];
+      }
+      if (s) this.focusSelectedSibling(t);
+    } else {
+      a = [ r ];
+    }
+    if (i) this.setActiveElement(null); else this.selectedOptions = a;
+    this.change.emit({
+      value: o,
+      values: a
+    });
+  }
+  setActiveOption() {
+    const t = this.activeIndex;
+    this.allOptions.forEach(((e, i) => {
+      e.active = t === i;
+    }));
+  }
+  setFocusedOption() {
+    const t = this.allOptions[this.activeIndex];
+    if (!t) return;
+    const e = l(t);
+    if (e) t.focus(); else n((() => t.focus()));
+  }
+  updateMultipleOptionAttrs() {
+    const {allOptions: t, selectedOptions: e} = this;
+    const i = e.map((({value: t}) => t));
+    if (this.noSelect) return;
+    t.forEach((t => {
+      if (!("selected" in t)) return;
+      t.selected = i.includes(t.value);
+    }));
+  }
+  updateSingleOptionAttrs() {
+    var t;
+    const {allOptions: e, selectedOptions: i} = this;
+    const s = ((t = i[0]) === null || t === void 0 ? void 0 : t.value) || undefined;
+    if (this.noSelect) return;
+    e.forEach((t => {
+      if (!("selected" in t)) return;
+      t.selected = t.value === s;
+    }));
+  }
+  // #endregion
+  // #region Render Methods
+  render() {
+    return i(s, {
+      key: "16e12e08dcd1d6514aa59ad8dd20dbf33d352bbe"
+    }, i("div", {
+      key: "b0eb152206ccb8b93e98d11c32894cb136ffc9a9",
+      class: "content",
+      ref: t => this.contentElement = t,
+      onFocusout: this.focusoutHandler
+    }, i("div", {
+      key: "bccbd0eb8bc8fc92db4629be02ab23e050e32fe9",
+      class: "options",
+      "aria-label": r("tecton.element.optionList.label", [ this.label ]),
+      "aria-multiselectable": `${!!this.multiple}`,
+      role: this.type || "listbox",
+      onKeyDown: this.internalKeydownHandler,
+      onClick: this.clickHandler
+    }, i("slot", {
+      key: "9b5a130d4d0a1a5f594b47669607febf39c0ea87"
+    }))));
+  }
+  get hostElement() {
+    return o(this);
+  }
+  static get watchers() {
+    return {
+      selectedOptions: [ "selectedOptionsUpdated" ],
+      showSelected: [ "showSelectedUpdated" ]
+    };
+  }
+};
+
+u.style = f;
+
+const b = "*{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}.container{display:none}.show{display:block;position:fixed;z-index:var(--tct-popover-z-index, 50);margin:0;padding:0;overflow:auto;background:var(--tct-popover-background, var(--app-white, #ffffff));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}:host([block]) .show{right:unset;width:var(--comp-pop-width);min-width:var(--tct-popover-min-width, unset)}:host([align=left]) .show{left:var(--comp-pop-left);right:unset}:host([align=right]) .show{right:var(--comp-pop-right);left:unset}.show.down{top:var(--tct-popover-top, var(--comp-pop-top));bottom:unset}.show.up{top:unset;bottom:var(--comp-pop-bottom)}.show.legacy{position:absolute}.show::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.show::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.show::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}click-elsewhere{position:relative;display:block}";
+
+const v = b;
+
+const w = class {
+  constructor(i) {
+    t(this, i);
+    this.popoverStateChanged = e(this, "popoverStateChanged", 7);
+    /**
+         * The number of pixels to leave between the popover and the edge of the viewport
+         */    this.displayBuffer = 10;
+    /** remove when Popover API is supported in iOS */    this.orientationChanged = false;
+    this.handleMinHeight = () => {
+      if (this.minHeight) {
+        p(this, "minHeight", "prop");
+      }
+    };
+    this.setAbsoluteCSSProperties = async () => {
+      const {controlElement: t, containerElement: e, currentDirection: i, align: s} = this;
+      if (s === "right") {
+        e.style.setProperty("--comp-pop-right", "0");
+        e.style.setProperty("--comp-pop-left", "unset");
+      } else {
+        e.style.setProperty("--comp-pop-left", "0");
+        e.style.setProperty("--comp-pop-right", "unset");
+      }
+      if (this.block) {
+        e.style.setProperty("--comp-pop-width", "100%");
+      }
+      if (i === "up") {
+        const i = getComputedStyle(t);
+        const s = parseInt(i.height || "0") + parseInt(i.borderTopWidth || "0") + parseInt(i.borderBottomWidth || "0");
+        e.style.setProperty("--comp-pop-bottom", `${s}px`);
+      }
+      // Wait for one paint to prevent layout thrashing
+            await c();
+      e.style.setProperty("--comp-pop-opacity", "1");
+    };
+    this.setFixedCSSProperties = async () => {
+      var t, e;
+      const {controlElement: i, containerElement: s, currentDirection: o, rootElementRect: n} = this;
+      const {top: r, bottom: a, left: h, right: l} = (e = (t = i === null || i === void 0 ? void 0 : i.getBoundingClientRect) === null || t === void 0 ? void 0 : t.call(i)) !== null && e !== void 0 ? e : {
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0
+      };
+      const p = h - n.left;
+      if (this.block) s.style.setProperty("--comp-pop-width", `${(i === null || i === void 0 ? void 0 : i.offsetWidth) || 0}px`);
+      s.style.setProperty("--comp-pop-left", `${p}px`);
+      s.style.setProperty("--comp-pop-right", `${n.width + n.left - l}px`);
+      if (o === "up") {
+        s.style.setProperty("--comp-pop-bottom", `${n.height + n.top - r}px`);
+      }
+      if (o === "down") {
+        s.style.setProperty("--comp-pop-top", `${a - n.top}px`);
+      }
+      // Wait for one paint to prevent layout thrashing
+            await c();
+      s.style.setProperty("--comp-pop-opacity", "1");
+    };
+    this.viewPortChanged = () => {
+      if (!this.open) return;
+      this.determinePopDirection();
+    };
+    this.viewPortOrientationChanged = () => {
+      this.orientationChanged = true;
+      this.viewPortChanged();
+    };
+    this.currentDirection = undefined;
+    this.show = false;
+    this.align = undefined;
+    this.block = undefined;
+    this.controlElement = undefined;
+    this.direction = undefined;
+    this.maxHeight = undefined;
+    this.minHeight = undefined;
+    this.mode = null;
+    this.open = undefined;
+  }
+  // #endregion
+  // #region Component Lifecycle Events
+  disconnectedCallback() {
+    this.removeViewportListeners();
+  }
+  componentDidLoad() {
+    this.handleMinHeight();
+    if (this.open) this.determinePopDirection();
+  }
+  // #endregion
+  // #region Listeners
+  popoverStateHandler(t) {
+    const {detail: {open: e}} = t;
+    if (e === this.open) return;
+    this.open = e;
+    t.stopPropagation();
+  }
+  // #endregion
+  // #region Public Methods API
+  async scrollContainerTo(t) {
+    this.containerElement.scrollTo(t);
+  }
+  async toggle() {
+    this.open = !this.open;
+  }
+  // #endregion
+  // #region Watchers
+  minHeightProvided() {
+    this.handleMinHeight();
+  }
+  async openChanged(t) {
+    this.setRootElement();
+    this.popoverStateChanged.emit({
+      open: t
+    });
+    if (t) {
+      this.addViewportListeners();
+      this.determinePopDirection();
+    } else {
+      this.removeViewportListeners();
+      this.currentDirection = undefined;
+      this.show = false;
+      await c();
+      this.clearCSSProperties();
+    }
+  }
+  // #endregion
+  // #region Local Methods
+  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 providedDirection() {
+    const {direction: t} = this;
+    switch (t) {
+     case "up":
+     case "down":
+      return t;
+
+     default:
+      return undefined;
+    }
+  }
+  get validatedMaxHeight() {
+    const {maxHeight: t} = this;
+    return isNaN(t) ? undefined : t;
+  }
+  addViewportListeners() {
+    var t;
+    window.addEventListener("resize", this.viewPortOrientationChanged);
+    // #region remove when Popover API is supported in iOS
+        window.addEventListener("scroll", this.viewPortChanged, {
+      passive: true,
+      capture: true
+    });
+    (t = screen === null || screen === void 0 ? void 0 : screen.orientation) === null || t === void 0 ? void 0 : t.addEventListener("change", this.viewPortOrientationChanged);
+    window.addEventListener("orientationchange", this.viewPortOrientationChanged);
+    // #endregion
+    }
+  clearCSSProperties() {
+    this.containerElement.style.removeProperty("--comp-pop-max-height");
+    this.containerElement.style.removeProperty("--comp-pop-top");
+    this.containerElement.style.removeProperty("--comp-pop-bottom");
+    this.containerElement.style.removeProperty("--comp-pop-left");
+    this.containerElement.style.removeProperty("--comp-pop-right");
+    this.containerElement.style.removeProperty("--comp-pop-width");
+    this.containerElement.style.removeProperty("--comp-pop-opacity");
+  }
+  async determinePopDirection() {
+    var t, e, i;
+    const {containerElement: s, controlElement: o, providedDirection: n, displayBuffer: r} = this;
+    if (s) s.style.maxHeight = null;
+    await c();
+    const {isModule: a} = this;
+    const {top: h, bottom: l} = (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
+    };
+    let p;
+    let d;
+    let f;
+    if (a) {
+      const {outletOffset: t = 0, innerHeight: e = window.innerHeight} = ((i = window.Tecton) === null || i === void 0 ? void 0 : i.platformDimensions) || {};
+      const s = window.visualViewport.height - l;
+      const o = e - (t + l);
+      const n = s < o;
+      p = e;
+      // If the top of the module is below the top of the window we just use the controlTop
+      // Otherwise we need to add the outletOffset to the controlTop
+            d = (t > 0 ? h : h + t) - r;
+      f = n ? s - r : o - r;
+    } else {
+      p = window.visualViewport.height;
+      d = h - r;
+      f = p - l - r;
+    }
+    const u = d > f ? "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 b = !s.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 v = this.currentDirection || n || u;
+    switch (v) {
+     case "up":
+      if (b) {
+        const t = this.validatedMaxHeight || d;
+        const e = Math.min(d, t);
+        s.style.setProperty("--comp-pop-max-height", `${e}px`);
+      }
+      this.setDirectionAndShow("up");
+      break;
+
+     case "down":
+      if (b) {
+        const t = this.validatedMaxHeight || f;
+        const e = Math.min(f, t);
+        s.style.setProperty("--comp-pop-max-height", `${e}px`);
+      }
+      this.setDirectionAndShow("down");
+      break;
+    }
+  }
+  removeViewportListeners() {
+    var t;
+    window.removeEventListener("resize", this.viewPortOrientationChanged);
+    // #region remove when Popover API is supported in iOS
+        window.removeEventListener("scroll", this.viewPortChanged);
+    (t = screen === null || screen === void 0 ? void 0 : screen.orientation) === null || t === void 0 ? void 0 : t.removeEventListener("orientationchange", this.viewPortOrientationChanged);
+    window.removeEventListener("orientationchange", this.viewPortOrientationChanged);
+    // #endregion
+    }
+  setDirectionAndShow(t) {
+    this.setRootElement();
+    // 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;
+    this.currentDirection = t;
+    this.show = true;
+    if (this.mode === "legacy") {
+      this.setAbsoluteCSSProperties();
+    } else {
+      this.setFixedCSSProperties();
+    }
+  }
+  setRootElement() {
+    let t = this.hostElement;
+    while (t && t !== document.documentElement) {
+      const e = window.getComputedStyle(t);
+      // Check if the element has any styles applied that create a new containg block
+            if (e.transform !== "none" || e.filter !== "none" || e.perspective !== "none" || e.containerType !== "normal" || [ "transform", "perspective", "filter" ].includes(e.willChange) || [ "layout", "paint", "strict", "content" ].includes(e.contain)) {
+        this.rootElementRect = t.getBoundingClientRect();
+        return;
+      }
+      const i = t.getRootNode();
+      const s = typeof ShadowRoot !== "undefined" && i instanceof ShadowRoot && i.host instanceof HTMLElement;
+      if (s) {
+        t = i.host;
+      } else {
+        t = t.parentElement;
+      }
+    }
+    // Return the document's bounding rect if no element is found
+        this.rootElementRect = {
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+      height: window.visualViewport.height,
+      width: window.visualViewport.width
+    };
+  }
+  // #endregion
+  // #region Render Methods
+  render() {
+    const t = [ "container", this.currentDirection ];
+    if (this.show) t.push("show");
+    if (this.mode === "legacy") t.push("legacy");
+    return i("div", {
+      key: "ec69329181e23e7c8f46fc2d2f5b9453f0f866d1",
+      ref: t => this.containerElement = t,
+      class: t.join(" "),
+      "test-id": "outerContainer",
+      tabIndex: -1
+    }, i("div", {
+      key: "7814ab2ab64fe363d76d1ed34005b7512c877d17",
+      ref: t => this.contentElement = t,
+      class: "content"
+    }, i("slot", {
+      key: "7a3fec41c603d97be3bcaa0d7fd48c0517b92f7c"
+    })));
+  }
+  get hostElement() {
+    return o(this);
+  }
+  static get watchers() {
+    return {
+      minHeight: [ "minHeightProvided" ],
+      open: [ "openChanged" ]
+    };
+  }
+};
+
+w.style = v;
+
+export { u as q2_option_list, w as q2_popover };
+//# sourceMappingURL=q2-option-list_2.entry.js.map