q2-tecton-elements 1.53.0 → 1.53.2

package/dist/jest.setup.js

@@ -0,0 +1,22 @@
+import { MockHTMLElement } from "@stencil/core/mock-doc";
+/**
+ * mocks for specPage tests
+ */
+global.MutationObserver = class {
+    constructor() {
+        this.observe = jest.fn();
+        this.disconnect = jest.fn();
+        this.takeRecords = jest.fn(() => []);
+    }
+};
+Object.defineProperty(MockHTMLElement.prototype, 'assignedElements', {
+    value: () => [],
+    configurable: true,
+    writable: true,
+});
+Object.defineProperty(MockHTMLElement.prototype, 'assignedNodes', {
+    value: () => [],
+    configurable: true,
+    writable: true,
+});
+//# sourceMappingURL=jest.setup.js.map

package/dist/jest.setup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jest.setup.js","sourceRoot":"","sources":["../jest.setup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAEzD;;GAEG;AAEH,MAAM,CAAC,gBAAgB,GAAG;IAAA;QACtB,YAAO,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QACpB,eAAU,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QACvB,gBAAW,GAAG,IAAI,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,CAAC;IACpC,CAAC;CAAsC,CAAC;AAExC,MAAM,CAAC,cAAc,CAAC,eAAe,CAAC,SAAS,EAAE,kBAAkB,EAAE;IACjE,KAAK,EAAE,GAAG,EAAE,CAAC,EAAE;IACf,YAAY,EAAE,IAAI;IAClB,QAAQ,EAAE,IAAI;CACjB,CAAC,CAAC;AAEH,MAAM,CAAC,cAAc,CAAC,eAAe,CAAC,SAAS,EAAE,eAAe,EAAE;IAC9D,KAAK,EAAE,GAAG,EAAE,CAAC,EAAE;IACf,YAAY,EAAE,IAAI;IAClB,QAAQ,EAAE,IAAI;CACjB,CAAC,CAAC","sourcesContent":["import { MockHTMLElement } from '@stencil/core/mock-doc';\n\n/**\n * mocks for specPage tests\n */\n\nglobal.MutationObserver = class {\n    observe = jest.fn();\n    disconnect = jest.fn();\n    takeRecords = jest.fn(() => []);\n} as unknown as typeof MutationObserver;\n\nObject.defineProperty(MockHTMLElement.prototype, 'assignedElements', {\n    value: () => [],\n    configurable: true,\n    writable: true,\n});\n\nObject.defineProperty(MockHTMLElement.prototype, 'assignedNodes', {\n    value: () => [],\n    configurable: true,\n    writable: true,\n});\n"]}

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

@@ -1,25 +1,25 @@
-import { r as t, c as o, g as i, h as e } from "./index-7a5365e2.js";
+import { r as o, c as t, g as i, h as e } from "./index-7a5365e2.js";
 
-import { h as s, w as r } from "./index-d18e2a20.js";
+import { h as s, w as r } from "./index-504f1a9e.js";
 
 const n = class {
   constructor(i) {
-    t(this, i);
-    this.change = o(this, "change", 7);
+    o(this, i);
+    this.change = t(this, "change", 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 o = this.shadowContains(this.findActiveElement());
-      const i = this.shadowContains(this.shadowEventTarget(t)) || this.originatesInSlots(t.target);
-      if (!i && (this.isCurrentlyFocused || o)) {
+    this.mouseHandler = o => {
+      const t = this.shadowContains(this.findActiveElement());
+      const i = this.shadowContains(this.shadowEventTarget(o)) || this.originatesInSlots(o.target);
+      if (!i && (this.isCurrentlyFocused || t)) {
         this.isCurrentlyFocused = false;
         this.change.emit();
         return;
       }
-      this.isCurrentlyFocused = i || o;
+      this.isCurrentlyFocused = i || t;
     };
     this.windowBlurHandler = () => {
       this.isCurrentlyFocused = false;
@@ -30,14 +30,14 @@ const n = class {
   // #region Component Lifecycle Events
   /* tslint:enable:no-empty */
   connectedCallback() {
-    this.mouseEventList.forEach((t => {
-      document.addEventListener(t, this.mouseHandler);
+    this.mouseEventList.forEach((o => {
+      document.addEventListener(o, this.mouseHandler);
     }));
     window.addEventListener("blur", this.windowBlurHandler);
   }
   disconnectedCallback() {
-    this.mouseEventList.forEach((t => {
-      document.removeEventListener(t, this.mouseHandler);
+    this.mouseEventList.forEach((o => {
+      document.removeEventListener(o, this.mouseHandler);
     }));
     window.removeEventListener("blur", this.windowBlurHandler);
   }
@@ -46,108 +46,127 @@ const n = class {
   // #endregion
   // #region Local Methods
   findActiveElement() {
-    let t = document.activeElement;
+    let o = document.activeElement;
     while (true) {
-      if (!t || !t.shadowRoot) {
-        return t;
+      if (!o || !o.shadowRoot) {
+        return o;
       }
-      t = t.shadowRoot.activeElement;
+      o = o.shadowRoot.activeElement;
     }
   }
-  originatesInSlots(t) {
-    const o = this.hostElement.querySelectorAll("slot");
-    for (const i of Array.from(o)) {
-      const o = i && i.assignedNodes && i.assignedNodes() || this.hostElement.childNodes;
-      for (const i of Array.from(o)) {
-        if (i.contains(t)) {
+  originatesInSlots(o) {
+    const t = this.hostElement.querySelectorAll("slot");
+    for (const i of Array.from(t)) {
+      const t = i && i.assignedNodes && i.assignedNodes() || this.hostElement.childNodes;
+      for (const i of Array.from(t)) {
+        if (i.contains(o)) {
           return true;
         }
       }
     }
     return false;
   }
-  shadowContains(t) {
+  shadowContains(o) {
     /**
          * shadow-dom enabled version of Node.contains()
          */
     while (true) {
-      if (t === this.hostElement) {
+      if (o === this.hostElement) {
         return true;
       }
-      if (!t) {
+      if (!o) {
         return false;
       }
-      t = t.parentNode || t.host;
+      o = o.parentNode || o.host;
     }
   }
-  shadowEventTarget(t) {
-    return t.composedPath()[0] || t.target;
+  shadowEventTarget(o) {
+    return o.composedPath()[0] || o.target;
   }
   get hostElement() {
     return i(this);
   }
 };
 
-const a = "*{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 p = "*{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}.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));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 c = a;
+const a = p;
 
-const p = class {
+const c = class {
   constructor(i) {
-    t(this, i);
-    this.popoverStateChanged = o(this, "popoverStateChanged", 7);
+    o(this, i);
+    this.popoverStateChanged = t(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.orientationChanged = false;
     this.handleMinHeight = () => {
       if (this.minHeight) {
         s(this, "minHeight", "prop");
       }
     };
+    this.handlePopoverToggleEvent = o => {
+      this.popoverStateChanged.emit({
+        open: o.newState === "open"
+      });
+    };
     this.setAbsoluteCSSProperties = async () => {
-      const {controlElement: t, containerElement: o, currentDirection: i, align: e} = this;
+      const {controlElement: o, containerElement: t, currentDirection: i, align: e} = this;
       if (e === "right") {
-        o.style.setProperty("--comp-pop-right", "0");
-        o.style.setProperty("--comp-pop-left", "unset");
+        t.style.setProperty("--comp-pop-right", "0");
+        t.style.setProperty("--comp-pop-left", "unset");
       } else {
-        o.style.setProperty("--comp-pop-left", "0");
-        o.style.setProperty("--comp-pop-right", "unset");
+        t.style.setProperty("--comp-pop-left", "0");
+        t.style.setProperty("--comp-pop-right", "unset");
       }
       if (this.block) {
-        o.style.setProperty("--comp-pop-width", "100%");
+        t.style.setProperty("--comp-pop-width", "100%");
       }
       if (i === "up") {
-        const i = getComputedStyle(t);
+        const i = getComputedStyle(o);
         const e = parseInt(i.height || "0") + parseInt(i.borderTopWidth || "0") + parseInt(i.borderBottomWidth || "0");
-        o.style.setProperty("--comp-pop-bottom", `${e}px`);
+        t.style.setProperty("--comp-pop-bottom", `${e}px`);
       }
       // Wait for one paint to prevent layout thrashing
             await r();
-      o.style.setProperty("--comp-pop-opacity", "1");
+      t.style.setProperty("--comp-pop-opacity", "1");
     };
-    this.setFixedCSSProperties = async () => {
-      var t, o;
-      const {controlElement: i, containerElement: e, currentDirection: s, rootElementRect: n} = this;
-      const {top: a, bottom: c, left: p, right: h} = (o = (t = i === null || i === void 0 ? void 0 : i.getBoundingClientRect) === null || t === void 0 ? void 0 : t.call(i)) !== null && o !== void 0 ? o : {
+    this.setPopoverAPICSSProperties = async () => {
+      var o, t, i, e, s, n;
+      const {controlElement: p, containerElement: a, currentDirection: c, isModule: l, align: h} = this;
+      const {top: d, bottom: u, left: w, right: v} = (t = (o = p === null || p === void 0 ? void 0 : p.getBoundingClientRect) === null || o === void 0 ? void 0 : o.call(p)) !== null && t !== void 0 ? t : {
         top: 0,
         bottom: 0,
         left: 0,
         right: 0
       };
-      const d = p - n.left;
-      if (this.block) e.style.setProperty("--comp-pop-width", `${(i === null || i === void 0 ? void 0 : i.offsetWidth) || 0}px`);
-      e.style.setProperty("--comp-pop-left", `${d}px`);
-      e.style.setProperty("--comp-pop-right", `${n.width + n.left - h}px`);
-      if (s === "up") {
-        e.style.setProperty("--comp-pop-bottom", `${n.height + n.top - a}px`);
+      const b = w;
+      const f = ((i = window === null || window === void 0 ? void 0 : window.visualViewport) === null || i === void 0 ? void 0 : i.width) - v;
+      if (h === "right") {
+        a.style.setProperty("--comp-pop-right", `${f - window.scrollX}px`);
+        a.style.setProperty("--comp-pop-left", "unset");
+      } else {
+        a.style.setProperty("--comp-pop-left", `${b + window.scrollX}px`);
+        a.style.setProperty("--comp-pop-right", "unset");
+      }
+      if (this.block) a.style.setProperty("--comp-pop-width", `${(p === null || p === void 0 ? void 0 : p.offsetWidth) || 0}px`);
+      if (c === "up") {
+        if (l) {
+          a.style.setProperty("--comp-pop-bottom", `${window.innerHeight - d}px`);
+        } else {
+          a.style.setProperty("--comp-pop-bottom", `${window.innerHeight - d - ((e = window === null || window === void 0 ? void 0 : window.visualViewport) === null || e === void 0 ? void 0 : e.offsetTop) - window.scrollY}px`);
+        }
       }
-      if (s === "down") {
-        e.style.setProperty("--comp-pop-top", `${c - n.top}px`);
+      if (c === "down") {
+        if (l) {
+          a.style.setProperty("--comp-pop-top", `${u}px`);
+        } else {
+          a.style.setProperty("--comp-pop-top", `${u + ((n = (s = window === null || window === void 0 ? void 0 : window.visualViewport) === null || s === void 0 ? void 0 : s.offsetTop) !== null && n !== void 0 ? n : 0) + window.scrollY}px`);
+        }
       }
       // Wait for one paint to prevent layout thrashing
             await r();
-      e.style.setProperty("--comp-pop-opacity", "1");
+      a.style.setProperty("--comp-pop-opacity", "1");
     };
     this.viewPortChanged = () => {
       if (!this.open) return;
@@ -159,7 +178,7 @@ const p = class {
     };
     this.currentDirection = undefined;
     this.show = false;
-    this.align = undefined;
+    this.align = "left";
     this.block = undefined;
     this.controlElement = undefined;
     this.direction = undefined;
@@ -172,23 +191,34 @@ const p = class {
   // #region Component Lifecycle Events
   disconnectedCallback() {
     this.removeViewportListeners();
+    this.containerElement.removeEventListener("toggle", this.handlePopoverToggleEvent);
+    this.containerElement = null;
+    this.contentElement = null;
+    this.controlElement = null;
+  }
+  componentWillLoad() {
+    if (!this.supportsPopoverAPI) {
+      console.warn("The Popover API is not supported in this browser. Please update your browser to the latest version. The component will use legacy mode.");
+      this.mode = "legacy";
+    }
   }
   componentDidLoad() {
     this.handleMinHeight();
+    if (this.supportsPopoverAPI) this.containerElement.addEventListener("toggle", this.handlePopoverToggleEvent);
     if (this.open) this.determinePopDirection();
   }
   // #endregion
   // #region Listeners
-  popoverStateHandler(t) {
-    const {detail: {open: o}} = t;
-    if (o === this.open) return;
-    this.open = o;
-    t.stopPropagation();
+  popoverStateHandler(o) {
+    const {detail: {open: t}} = o;
+    if (t === this.open) return;
+    this.open = t;
+    o.stopPropagation();
   }
   // #endregion
   // #region Public Methods API
-  async scrollContainerTo(t) {
-    this.containerElement.scrollTo(t);
+  async scrollContainerTo(o) {
+    this.containerElement.scrollTo(o);
   }
   async toggle() {
     this.open = !this.open;
@@ -198,18 +228,21 @@ const p = class {
   minHeightProvided() {
     this.handleMinHeight();
   }
-  async openChanged(t) {
-    this.setRootElement();
+  async openChanged(o) {
     this.popoverStateChanged.emit({
-      open: t
+      open: o
     });
-    if (t) {
+    if (o) {
       this.addViewportListeners();
       this.determinePopDirection();
     } else {
       this.removeViewportListeners();
       this.currentDirection = undefined;
-      this.show = false;
+      if (this.mode === "legacy" || !this.supportsPopoverAPI) {
+        this.show = false;
+      } else {
+        this.containerElement.hidePopover();
+      }
       await r();
       this.clearCSSProperties();
     }
@@ -217,38 +250,40 @@ const p = class {
   // #endregion
   // #region Local Methods
   get isModule() {
-    var t, o;
+    var o, t;
     const i = window !== window.top;
-    const e = Object.keys((o = (t = window.Tecton) === null || t === void 0 ? void 0 : t.platformDimensions) !== null && o !== void 0 ? o : {}).length > 0;
+    const e = Object.keys((t = (o = window.Tecton) === null || o === void 0 ? void 0 : o.platformDimensions) !== null && t !== void 0 ? t : {}).length > 0;
     return i && e;
   }
   get providedDirection() {
-    const {direction: t} = this;
-    switch (t) {
+    const {direction: o} = this;
+    switch (o) {
      case "up":
      case "down":
-      return t;
+      return o;
 
      default:
       return undefined;
     }
   }
+  get supportsPopoverAPI() {
+    return Object.hasOwn(HTMLElement.prototype, "popover");
+  }
   get validatedMaxHeight() {
-    const {maxHeight: t} = this;
-    return isNaN(t) ? undefined : t;
+    const {maxHeight: o} = this;
+    return isNaN(o) ? undefined : o;
   }
   addViewportListeners() {
-    var t;
+    var o;
     window.addEventListener("resize", this.viewPortOrientationChanged);
-    // #region remove when Popover API is supported in iOS
-        window.addEventListener("scroll", this.viewPortChanged, {
+    visualViewport === null || visualViewport === void 0 ? void 0 : visualViewport.addEventListener("resize", this.viewPortChanged);
+    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);
+    (o = screen === null || screen === void 0 ? void 0 : screen.orientation) === null || o === void 0 ? void 0 : o.addEventListener("orientationchange", this.viewPortOrientationChanged);
     window.addEventListener("orientationchange", this.viewPortOrientationChanged);
-    // #endregion
-    }
+  }
   clearCSSProperties() {
     this.containerElement.style.removeProperty("--comp-pop-max-height");
     this.containerElement.style.removeProperty("--comp-pop-top");
@@ -259,126 +294,103 @@ const p = class {
     this.containerElement.style.removeProperty("--comp-pop-opacity");
   }
   async determinePopDirection() {
-    var t, o, i;
-    const {containerElement: e, controlElement: s, providedDirection: n, displayBuffer: a} = this;
+    var o, t, i;
+    const {containerElement: e, controlElement: s, providedDirection: n, displayBuffer: p} = this;
     if (e) e.style.maxHeight = null;
     await r();
-    const {isModule: c} = this;
-    const {top: p, bottom: h} = (o = (t = s === null || s === void 0 ? void 0 : s.getBoundingClientRect) === null || t === void 0 ? void 0 : t.call(s)) !== null && o !== void 0 ? o : {
+    const {isModule: a} = this;
+    const {top: c, bottom: l} = (t = (o = s === null || s === void 0 ? void 0 : s.getBoundingClientRect) === null || o === void 0 ? void 0 : o.call(s)) !== null && t !== void 0 ? t : {
       top: 0,
       bottom: 0
     };
+    let h;
     let d;
-    let l;
     let u;
-    if (c) {
-      const {outletOffset: t = 0, innerHeight: o = window.innerHeight} = ((i = window.Tecton) === null || i === void 0 ? void 0 : i.platformDimensions) || {};
-      const e = window.visualViewport.height - h;
-      const s = o - (t + h);
+    if (a) {
+      const {outletOffset: o = 0, innerHeight: t = window.innerHeight} = ((i = window.Tecton) === null || i === void 0 ? void 0 : i.platformDimensions) || {};
+      const e = window.visualViewport.height - l;
+      const s = t - (o + l);
       const r = e < s;
-      d = o;
+      h = t;
       // 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
-            l = (t > 0 ? p : p + t) - a;
-      u = r ? e - a : s - a;
+            d = (o > 0 ? c : c + o) - p;
+      u = r ? e - p : s - p;
     } else {
-      d = window.visualViewport.height;
-      l = p - a;
-      u = d - h - a;
+      h = window.visualViewport.height;
+      d = c - p;
+      u = h - l - p;
     }
-    const f = l > u ? "up" : "down";
+    const w = 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 w = !e.style.getPropertyValue("--comp-pop-max-height") || this.orientationChanged;
+        const v = !e.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 m = this.currentDirection || n || f;
-    switch (m) {
+    const b = this.currentDirection || n || w;
+    switch (b) {
      case "up":
-      if (w) {
-        const t = this.validatedMaxHeight || l;
-        const o = Math.min(l, t);
-        e.style.setProperty("--comp-pop-max-height", `${o}px`);
+      if (v) {
+        const o = this.validatedMaxHeight || d;
+        const t = Math.min(d, o);
+        e.style.setProperty("--comp-pop-max-height", `${t}px`);
       }
       this.setDirectionAndShow("up");
       break;
 
      case "down":
-      if (w) {
-        const t = this.validatedMaxHeight || u;
-        const o = Math.min(u, t);
-        e.style.setProperty("--comp-pop-max-height", `${o}px`);
+      if (v) {
+        const o = this.validatedMaxHeight || u;
+        const t = Math.min(u, o);
+        e.style.setProperty("--comp-pop-max-height", `${t}px`);
       }
       this.setDirectionAndShow("down");
       break;
     }
   }
   removeViewportListeners() {
-    var t;
+    var o;
     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);
+    visualViewport === null || visualViewport === void 0 ? void 0 : visualViewport.removeEventListener("resize", this.viewPortChanged);
+    window.removeEventListener("scroll", this.viewPortChanged, {
+      capture: true
+    });
+    (o = screen === null || screen === void 0 ? void 0 : screen.orientation) === null || o === void 0 ? void 0 : o.removeEventListener("orientationchange", this.viewPortOrientationChanged);
     window.removeEventListener("orientationchange", this.viewPortOrientationChanged);
-    // #endregion
-    }
-  setDirectionAndShow(t) {
-    this.setRootElement();
+  }
+  setDirectionAndShow(o) {
     // 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 o = this.open;
-    if (!o) return;
-    this.currentDirection = t;
-    this.show = true;
-    if (this.mode === "legacy") {
+    const t = this.open;
+    if (!t) return;
+    this.currentDirection = o;
+    if (this.mode === "legacy" || !this.supportsPopoverAPI) {
+      this.show = true;
       this.setAbsoluteCSSProperties();
     } else {
-      this.setFixedCSSProperties();
-    }
-  }
-  setRootElement() {
-    let t = this.hostElement;
-    while (t && t !== document.documentElement) {
-      const o = window.getComputedStyle(t);
-      // Check if the element has any styles applied that create a new containg block
-            if (o.transform !== "none" || o.filter !== "none" || o.perspective !== "none" || o.containerType !== "normal" || [ "transform", "perspective", "filter" ].includes(o.willChange) || [ "layout", "paint", "strict", "content" ].includes(o.contain)) {
-        this.rootElementRect = t.getBoundingClientRect();
-        return;
-      }
-      const i = t.getRootNode();
-      const e = typeof ShadowRoot !== "undefined" && i instanceof ShadowRoot && i.host instanceof HTMLElement;
-      if (e) {
-        t = i.host;
-      } else {
-        t = t.parentElement;
-      }
+      this.setPopoverAPICSSProperties();
+      this.containerElement.showPopover();
     }
-    // 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");
+    const o = [ "container", this.currentDirection, this.align ];
+    if (this.show) o.push("show");
+    if (this.block) o.push("block");
+    if (this.mode === "legacy") o.push("legacy");
     return e("div", {
-      key: "ea60a3f8f2005cd25dac56ac3c681aa5dbc27111",
-      ref: t => this.containerElement = t,
-      class: t.join(" "),
-      "test-id": "outerContainer"
+      key: "acaaed8fe34bb4ee949c4032be9a08b61a28b238",
+      ref: o => this.containerElement = o,
+      class: o.join(" "),
+      "test-id": "outerContainer",
+      tabIndex: -1,
+      popover: "auto"
     }, e("div", {
-      key: "92041f64b8d066240de5653f9035bb9165697525",
-      ref: t => this.contentElement = t,
+      key: "b8e93864b158caa9e9e2cde64a84d9ea9288b761",
+      ref: o => this.contentElement = o,
       class: "content"
     }, e("slot", {
-      key: "65db5e767d8992e8c084c045094306b6be42879f"
+      key: "e43fee80ed07626f26aba98271c8408f9d69a37e"
     })));
   }
   get hostElement() {
@@ -392,7 +404,7 @@ const p = class {
   }
 };
 
-p.style = c;
+c.style = a;
 
-export { n as click_elsewhere, p as q2_popover };
+export { n as click_elsewhere, c as q2_popover };
 //# sourceMappingURL=click-elsewhere_2.entry.js.map