q2-tecton-elements 1.53.1 → 1.53.3

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

@@ -1,8 +1,8 @@
 import { r as t, c as o, 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, x as n, d as p } from "./index-99c46474.js";
 
-const n = class {
+const a = class {
   constructor(i) {
     t(this, i);
     this.change = o(this, "change", 7);
@@ -88,23 +88,28 @@ const n = class {
   }
 };
 
-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 c = "*{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 h = c;
 
-const h = class {
+const l = class {
   constructor(i) {
     t(this, i);
     this.popoverStateChanged = o(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 = t => {
+      this.popoverStateChanged.emit({
+        open: t.newState === "open"
+      });
+    };
     this.setAbsoluteCSSProperties = async () => {
       const {controlElement: t, containerElement: o, currentDirection: i, align: e} = this;
       if (e === "right") {
@@ -126,28 +131,42 @@ const h = class {
             await r();
       o.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: h, right: p} = (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 t, o, i;
+      const {controlElement: e, containerElement: s, currentDirection: n, isModule: p, align: a} = this;
+      const {top: c, bottom: h, left: l, right: d} = (o = (t = e === null || e === void 0 ? void 0 : e.getBoundingClientRect) === null || t === void 0 ? void 0 : t.call(e)) !== null && o !== void 0 ? o : {
         top: 0,
         bottom: 0,
         left: 0,
         right: 0
       };
-      const l = h - 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", `${l}px`);
-      e.style.setProperty("--comp-pop-right", `${n.width + n.left - p}px`);
-      if (s === "up") {
-        e.style.setProperty("--comp-pop-bottom", `${n.height + n.top - a}px`);
+      const u = l;
+      const v = ((i = window === null || window === void 0 ? void 0 : window.visualViewport) === null || i === void 0 ? void 0 : i.width) - d;
+      if (a === "right") {
+        s.style.setProperty("--comp-pop-right", `${v - window.scrollX}px`);
+        s.style.setProperty("--comp-pop-left", "unset");
+      } else {
+        s.style.setProperty("--comp-pop-left", `${u + window.scrollX}px`);
+        s.style.setProperty("--comp-pop-right", "unset");
       }
-      if (s === "down") {
-        e.style.setProperty("--comp-pop-top", `${c - n.top}px`);
+      if (this.block) s.style.setProperty("--comp-pop-width", `${(e === null || e === void 0 ? void 0 : e.offsetWidth) || 0}px`);
+      if (n === "up") {
+        if (p) {
+          s.style.setProperty("--comp-pop-bottom", `${window.innerHeight - c}px`);
+        } else {
+          s.style.setProperty("--comp-pop-bottom", `${window.innerHeight - c - window.scrollY}px`);
+        }
+      }
+      if (n === "down") {
+        if (p) {
+          s.style.setProperty("--comp-pop-top", `${h}px`);
+        } else {
+          s.style.setProperty("--comp-pop-top", `${h + window.scrollY}px`);
+        }
       }
       // Wait for one paint to prevent layout thrashing
             await r();
-      e.style.setProperty("--comp-pop-opacity", "1");
+      s.style.setProperty("--comp-pop-opacity", "1");
     };
     this.viewPortChanged = () => {
       if (!this.open) return;
@@ -159,7 +178,7 @@ const h = class {
     };
     this.currentDirection = undefined;
     this.show = false;
-    this.align = undefined;
+    this.align = "left";
     this.block = undefined;
     this.controlElement = undefined;
     this.direction = undefined;
@@ -172,13 +191,20 @@ const h = class {
   // #region Component Lifecycle Events
   disconnectedCallback() {
     this.removeViewportListeners();
+    this.containerElement.removeEventListener("toggle", this.handlePopoverToggleEvent);
     this.containerElement = null;
     this.contentElement = null;
     this.controlElement = null;
-    this.rootElementRect = 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
@@ -203,7 +229,6 @@ const h = class {
     this.handleMinHeight();
   }
   async openChanged(t) {
-    this.setRootElement();
     this.popoverStateChanged.emit({
       open: t
     });
@@ -213,7 +238,11 @@ const h = class {
     } 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();
     }
@@ -237,6 +266,9 @@ const h = class {
       return undefined;
     }
   }
+  get supportsPopoverAPI() {
+    return Object.hasOwn(HTMLElement.prototype, "popover");
+  }
   get validatedMaxHeight() {
     const {maxHeight: t} = this;
     return isNaN(t) ? undefined : t;
@@ -244,15 +276,16 @@ const h = class {
   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
-    });
+    visualViewport === null || visualViewport === void 0 ? void 0 : visualViewport.addEventListener("resize", this.viewPortChanged);
+    if (n(this.hostElement) && !p()) {
+      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("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");
@@ -264,39 +297,42 @@ const h = class {
   }
   async determinePopDirection() {
     var t, o, i;
-    const {containerElement: e, controlElement: s, providedDirection: n, displayBuffer: a} = this;
+    const {containerElement: e, controlElement: s, providedDirection: n, displayBuffer: p} = this;
     if (e) e.style.maxHeight = null;
     await r();
-    const {isModule: c} = this;
-    const {top: h, bottom: p} = (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: 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 : {
       top: 0,
       bottom: 0
     };
     let l;
     let d;
     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 - p;
-      const s = o - (t + p);
-      const r = e < s;
-      l = o;
-      // 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) - a;
-      u = r ? e - a : s - a;
+    if (a) {
+      const {outletOffset: t = 0, innerHeight: o = window.innerHeight, top: e = 0, bottom: s = 0} = ((i = window.Tecton) === null || i === void 0 ? void 0 : i.platformDimensions) || {};
+      const r = window.innerHeight - h;
+      // controlElement position visually on the page
+            const n = t > 0 ? c : c + t - e;
+      const a = t + h - e;
+      // visual space around the controlElement
+            const l = n;
+      const v = o - s - a;
+      // calculate space above and below controlElement
+            const w = r < v;
+      d = l - p;
+      u = w ? r - p : v - p;
     } else {
-      l = window.visualViewport.height;
-      d = h - a;
-      u = l - p - a;
+      l = window.innerHeight;
+      d = c - p;
+      u = l - h - p;
     }
-    const f = 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 w = !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 f = this.currentDirection || n || v;
+    switch (f) {
      case "up":
       if (w) {
         const t = this.validatedMaxHeight || d;
@@ -319,72 +355,47 @@ const h = class {
   removeViewportListeners() {
     var t;
     window.removeEventListener("resize", this.viewPortOrientationChanged);
-    // #region remove when Popover API is supported in iOS
-        window.removeEventListener("scroll", this.viewPortChanged, {
+    visualViewport === null || visualViewport === void 0 ? void 0 : visualViewport.removeEventListener("resize", this.viewPortChanged);
+    window.removeEventListener("scroll", this.viewPortChanged, {
       capture: true
     });
     (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 o = this.open;
+    const o = this.open;
     if (!o) return;
     this.currentDirection = t;
-    this.show = true;
-    if (this.mode === "legacy") {
+    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 ];
+    const t = [ "container", this.currentDirection, this.align ];
     if (this.show) t.push("show");
+    if (this.block) t.push("block");
     if (this.mode === "legacy") t.push("legacy");
     return e("div", {
-      key: "5669de4447eb2f2d28aced78c45310244100d0e4",
+      key: "4cd26a6c090a6fb5b56d2fa6464143f74998c215",
       ref: t => this.containerElement = t,
       class: t.join(" "),
-      "test-id": "outerContainer"
+      "test-id": "outerContainer",
+      tabIndex: -1,
+      popover: "manual"
     }, e("div", {
-      key: "6602ee2fd04336a7857b23b75bd47df228e8592c",
+      key: "545c376ca96c14e129a8f60fadac3a3264b916cf",
       ref: t => this.contentElement = t,
       class: "content"
     }, e("slot", {
-      key: "3fe9913b64d11e3a540fae64c214c4fb0a802ad1"
+      key: "9a2824ab9023f34a2b3a56a76ace4df6a91b5ec6"
     })));
   }
   get hostElement() {
@@ -398,7 +409,7 @@ const h = class {
   }
 };
 
-h.style = c;
+l.style = h;
 
-export { n as click_elsewhere, h as q2_popover };
+export { a as click_elsewhere, l as q2_popover };
 //# sourceMappingURL=click-elsewhere_2.entry.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["ClickElsewhere","constructor","hostRef","this","isCurrentlyFocused","mouseEventList","mouseHandler","event","shadowContains","findActiveElement","aboutToBeFocused","shadowEventTarget","originatesInSlots","target","change","emit","windowBlurHandler","connectedCallback","forEach","eventName","document","addEventListener","window","disconnectedCallback","removeEventListener","componentWillLoad","workingElement","activeElement","shadowRoot","slots","hostElement","querySelectorAll","currentSlot","Array","from","lightNodes","assignedNodes","childNodes","currentNode","contains","child","parentNode","host","composedPath","q2PopoverCss","Q2PopoverStyle0","Q2Popover","displayBuffer","orientationChanged","handleMinHeight","minHeight","handleDeprecationWarning","setAbsoluteCSSProperties","async","controlElement","containerElement","currentDirection","align","style","setProperty","block","controlStyle","getComputedStyle","controlSize","parseInt","height","borderTopWidth","borderBottomWidth","waitForNextPaint","setFixedCSSProperties","rootElementRect","top","controlTop","bottom","controlBottom","left","controlLeft","right","controlRight","_b","_a","getBoundingClientRect","call","popoverLeft","offsetWidth","width","viewPortChanged","open","determinePopDirection","viewPortOrientationChanged","undefined","removeViewportListeners","contentElement","componentDidLoad","popoverStateHandler","detail","stopPropagation","scrollContainerTo","options","scrollTo","toggle","minHeightProvided","openChanged","setRootElement","popoverStateChanged","addViewportListeners","show","clearCSSProperties","isModule","isIframe","hasPlatformDimensions","Object","keys","Tecton","platformDimensions","length","providedDirection","direction","validatedMaxHeight","maxHeight","isNaN","passive","capture","screen","orientation","removeProperty","windowHeight","maxSpaceAbove","maxSpaceBelow","outletOffset","innerHeight","_c","distanceToIframeBottom","visualViewport","viewableSpaceBelow","isIframeShorterThanWindow","directionWithMostSpace","shouldUpdateMaxHeight","getPropertyValue","currentOrDetermineDirection","priorityMaxHeight","Math","min","setDirectionAndShow","isOpen","mode","currentElement","documentElement","computedStyle","transform","filter","perspective","containerType","includes","willChange","contain","rootNode","getRootNode","isRootNodeWebComponent","ShadowRoot","HTMLElement","parentElement","render","containerClasses","push","h","key","ref","el","class","join"],"sources":["src/components/click-elsewhere/click-elsewhere.tsx","src/components/q2-popover/q2-popover.scss?tag=q2-popover&encapsulation=shadow","src/components/q2-popover/q2-popover.tsx"],"sourcesContent":["import { Component, ComponentInterface, Element, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n    tag: 'click-elsewhere',\n    shadow: false,\n})\nexport class ClickElsewhere implements ComponentInterface {\n    // #region Own Properties\n\n    isCurrentlyFocused: boolean = false;\n    /**\n     * Listens for mouse and window events that happen outside this click-elsewhere element so we can close popovers when users click outside them\n     */\n    mouseEventList: string[] = ['mousedown', 'dragstart', 'touchstart'];\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the user clicks outside the element\n     */\n    @Event()\n    change: EventEmitter;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    /* tslint:enable:no-empty */\n\n    connectedCallback() {\n        this.mouseEventList.forEach((eventName: string) => {\n            document.addEventListener(eventName, this.mouseHandler);\n        });\n        window.addEventListener('blur', this.windowBlurHandler);\n    }\n\n    disconnectedCallback() {\n        this.mouseEventList.forEach((eventName: string) => {\n            document.removeEventListener(eventName, this.mouseHandler);\n        });\n        window.removeEventListener('blur', this.windowBlurHandler);\n    }\n\n    /* TODO: Stencil/Rollup is having issues compiling without this here. Will try to remove in future Stencil upgrade. */\n    /* tslint:disable:no-empty */\n    componentWillLoad() {}\n\n    // #endregion\n    // #region Local Methods\n\n    findActiveElement(): Element | null {\n        let workingElement = document.activeElement!;\n        while (true) {\n            if (!workingElement || !workingElement.shadowRoot) {\n                return workingElement;\n            }\n            workingElement = workingElement.shadowRoot.activeElement;\n        }\n    }\n\n    mouseHandler = (event: Event): void => {\n        const isCurrentlyFocused = this.shadowContains(this.findActiveElement());\n        const aboutToBeFocused =\n            this.shadowContains(this.shadowEventTarget(event)) || this.originatesInSlots(event.target as Element);\n\n        if (!aboutToBeFocused && (this.isCurrentlyFocused || isCurrentlyFocused)) {\n            this.isCurrentlyFocused = false;\n            this.change.emit();\n            return;\n        }\n        this.isCurrentlyFocused = aboutToBeFocused || isCurrentlyFocused;\n    };\n\n    originatesInSlots(target: Element): boolean {\n        const slots = this.hostElement.querySelectorAll('slot');\n        for (const currentSlot of Array.from(slots)) {\n            const lightNodes =\n                (currentSlot && currentSlot.assignedNodes && currentSlot.assignedNodes()) ||\n                this.hostElement.childNodes;\n\n            for (const currentNode of Array.from(lightNodes)) {\n                if (currentNode.contains(target)) {\n                    return true;\n                }\n            }\n        }\n        return false;\n    }\n\n    shadowContains(child: any): boolean {\n        /**\n         * shadow-dom enabled version of Node.contains()\n         */\n\n        while (true) {\n            if (child === this.hostElement) {\n                return true;\n            }\n            if (!child) {\n                return false;\n            }\n            child = child.parentNode || child.host;\n        }\n    }\n\n    shadowEventTarget(event: any): Element {\n        return event.composedPath()[0] || event.target;\n    }\n\n    windowBlurHandler = (): void => {\n        this.isCurrentlyFocused = false;\n        this.change.emit();\n    };\n}\n","@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.container {\n    display: none;\n}\n\n.show {\n    display: block;\n    position: fixed;\n    z-index: var-list(--tct-popover-z-index, 50);\n    margin: 0;\n    padding: 0;\n    overflow: auto;\n    background: var-list(--tct-popover-background, --app-white, #ffffff);\n    color: var-list(--tct-popover-font-color, --t-text, #4d4d4d);\n    min-width: var-list(--tct-popover-min-width, 135px);\n    margin-block: var-list(--tct-popover-margin-block, 0);\n    box-shadow: var-list(--tct-popover-box-shadow, --app-shadow-1, unquote(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)\"));\n    border-width: var-list(--tct-popover-border-width, 0);\n    border-style: solid;\n    border-color: var-list(--tct-popover-border-color, transparent);\n    border-radius: var-list(--tct-popover-border-radius, 0);\n    // the following --comp variables are set via JS\n    max-height: var(--comp-pop-max-height);\n    left: var(--comp-pop-left);\n    opacity: var(--comp-pop-opacity, 0);\n\n    :host([block]) & {\n        right: unset;\n        width: var(--comp-pop-width);\n        min-width: var-list(--tct-popover-min-width, unset);\n    }\n\n    :host([align='left']) & {\n        left: var(--comp-pop-left);\n        right: unset;\n    }\n\n    :host([align='right']) & {\n        right: var(--comp-pop-right);\n        left: unset;\n    }\n\n    &.down {\n        top: var-list(--tct-popover-top, --comp-pop-top);\n        bottom: unset;\n    }\n\n    &.up {\n        top: unset;\n        bottom: var(--comp-pop-bottom);\n    }\n\n    &.legacy {\n        position: absolute;\n    }\n\n    @include tiny-scrollbar();\n}\n\nclick-elsewhere {\n    position: relative;\n    display: block;\n}\n","import {\n    Component,\n    Prop,\n    h,\n    ComponentInterface,\n    Element,\n    Watch,\n    Method,\n    Listen,\n    EventEmitter,\n    Event,\n    State,\n} from '@stencil/core';\nimport { handleDeprecationWarning, waitForNextPaint } from '../../utils';\n\n@Component({ tag: 'q2-popover', shadow: true, styleUrl: 'q2-popover.scss' })\nexport class Q2Popover implements ComponentInterface {\n    // #region Own Properties\n\n    containerElement: HTMLDivElement;\n    contentElement: HTMLDivElement;\n    /**\n     * The number of pixels to leave between the popover and the edge of the viewport\n     */\n    displayBuffer = 10;\n    /** remove when Popover API is supported in iOS */\n    orientationChanged: boolean = false;\n    rootElementRect: DOMRect;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    currentDirection: 'down' | 'up' = undefined;\n\n    // remove `show` when Popover API is supported in iOS\n    @State()\n    show: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Aligns the popover to the left or right side of the control element. */\n    @Prop({ reflect: true })\n    align: 'left' | 'right';\n\n    /** Indicates the popover will match the width of its parent element. */\n    @Prop({ reflect: true })\n    block: boolean;\n\n    /** The element that controls the popover's behavior. */\n    @Prop()\n    controlElement: HTMLElement;\n\n    /**\n     * Force the direction of the popover when it opens.\n     * If no value is passed, the component will auto-detect the direction based on available space.\n     */\n    @Prop({ reflect: true })\n    direction: 'up' | 'down';\n\n    /**\n     * Force the maximum height of the popover. This value will be interpreted as pixels.\n     * If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.\n     */\n    @Prop()\n    maxHeight: number;\n\n    /** @deprecated */\n    @Prop()\n    minHeight: number;\n\n    @Prop()\n    mode: 'legacy' = null;\n\n    /** Controls whether the popover is open or closed. */\n    @Prop({ reflect: true, mutable: true })\n    open: boolean;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the popover is opened or closed.\n     */\n    @Event()\n    popoverStateChanged: EventEmitter<{ open: boolean }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.removeViewportListeners();\n        this.containerElement = null;\n        this.contentElement = null;\n        this.controlElement = null;\n        this.rootElementRect = null;\n    }\n\n    componentDidLoad() {\n        this.handleMinHeight();\n        if (this.open) this.determinePopDirection();\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('popoverState')\n    popoverStateHandler(event: CustomEvent<{ open: boolean }>) {\n        const {\n            detail: { open },\n        } = event;\n        if (open === this.open) return;\n\n        this.open = open;\n        event.stopPropagation();\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    @Method()\n    async scrollContainerTo(options: ScrollToOptions) {\n        this.containerElement.scrollTo(options);\n    }\n\n    @Method()\n    async toggle() {\n        this.open = !this.open;\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('minHeight')\n    minHeightProvided() {\n        this.handleMinHeight();\n    }\n\n    @Watch('open')\n    async openChanged(open: boolean) {\n        this.setRootElement();\n        this.popoverStateChanged.emit({ open });\n\n        if (open) {\n            this.addViewportListeners();\n            this.determinePopDirection();\n        } else {\n            this.removeViewportListeners();\n            this.currentDirection = undefined;\n            this.show = false;\n            await waitForNextPaint();\n            this.clearCSSProperties();\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get isModule() {\n        const isIframe = window !== window.top;\n        const hasPlatformDimensions = Object.keys(window.Tecton?.platformDimensions ?? {}).length > 0;\n        return isIframe && hasPlatformDimensions;\n    }\n\n    get providedDirection(): 'up' | 'down' | undefined {\n        const { direction } = this;\n        switch (direction) {\n            case 'up':\n            case 'down':\n                return direction;\n            default:\n                return undefined;\n        }\n    }\n\n    get validatedMaxHeight(): number | undefined {\n        const { maxHeight } = this;\n        return isNaN(maxHeight) ? undefined : maxHeight;\n    }\n\n    addViewportListeners() {\n        window.addEventListener('resize', this.viewPortOrientationChanged);\n        // #region remove when Popover API is supported in iOS\n        window.addEventListener('scroll', this.viewPortChanged, { passive: true, capture: true });\n        screen?.orientation?.addEventListener('orientationchange', this.viewPortOrientationChanged);\n        window.addEventListener('orientationchange', this.viewPortOrientationChanged);\n\n        // #endregion\n    }\n\n    clearCSSProperties() {\n        this.containerElement.style.removeProperty('--comp-pop-max-height');\n        this.containerElement.style.removeProperty('--comp-pop-top');\n        this.containerElement.style.removeProperty('--comp-pop-bottom');\n        this.containerElement.style.removeProperty('--comp-pop-left');\n        this.containerElement.style.removeProperty('--comp-pop-right');\n        this.containerElement.style.removeProperty('--comp-pop-width');\n        this.containerElement.style.removeProperty('--comp-pop-opacity');\n    }\n\n    async determinePopDirection() {\n        const { containerElement, controlElement, providedDirection, displayBuffer } = this;\n        if (containerElement) containerElement.style.maxHeight = null;\n\n        await waitForNextPaint();\n\n        const { isModule } = this;\n        const { top: controlTop, bottom: controlBottom } = controlElement?.getBoundingClientRect?.() ?? {\n            top: 0,\n            bottom: 0,\n        };\n\n        let windowHeight: number;\n        let maxSpaceAbove: number;\n        let maxSpaceBelow: number;\n\n        if (isModule) {\n            const { outletOffset = 0, innerHeight = window.innerHeight } = window.Tecton?.platformDimensions || {};\n            const distanceToIframeBottom = window.visualViewport.height - controlBottom;\n            const viewableSpaceBelow = innerHeight - (outletOffset + controlBottom);\n            const isIframeShorterThanWindow = distanceToIframeBottom < viewableSpaceBelow;\n            windowHeight = innerHeight;\n            // If the top of the module is below the top of the window we just use the controlTop\n            // Otherwise we need to add the outletOffset to the controlTop\n            maxSpaceAbove = (outletOffset > 0 ? controlTop : controlTop + outletOffset) - displayBuffer;\n            maxSpaceBelow = isIframeShorterThanWindow\n                ? distanceToIframeBottom - displayBuffer\n                : viewableSpaceBelow - displayBuffer;\n        } else {\n            windowHeight = window.visualViewport.height;\n            maxSpaceAbove = controlTop - displayBuffer;\n            maxSpaceBelow = windowHeight - controlBottom - displayBuffer;\n        }\n\n        const directionWithMostSpace: 'up' | 'down' = maxSpaceAbove > maxSpaceBelow ? 'up' : 'down';\n\n        // We do not want to update the max height once the popover is open unless the page orientation shifts (resize or mobile use cases)\n        const shouldUpdateMaxHeight =\n            !containerElement.style.getPropertyValue('--comp-pop-max-height') || this.orientationChanged;\n        // we do not want to constantly update the max-height after an orientation change, so we switch this back to false\n        this.orientationChanged = false;\n        const currentOrDetermineDirection = this.currentDirection || providedDirection || directionWithMostSpace;\n\n        switch (currentOrDetermineDirection) {\n            case 'up':\n                if (shouldUpdateMaxHeight) {\n                    const priorityMaxHeight = this.validatedMaxHeight || maxSpaceAbove;\n                    const maxHeight = Math.min(maxSpaceAbove, priorityMaxHeight);\n                    containerElement.style.setProperty('--comp-pop-max-height', `${maxHeight}px`);\n                }\n                this.setDirectionAndShow('up');\n                break;\n            case 'down':\n                if (shouldUpdateMaxHeight) {\n                    const priorityMaxHeight = this.validatedMaxHeight || maxSpaceBelow;\n                    const maxHeight = Math.min(maxSpaceBelow, priorityMaxHeight);\n                    containerElement.style.setProperty('--comp-pop-max-height', `${maxHeight}px`);\n                }\n                this.setDirectionAndShow('down');\n                break;\n            default:\n                break;\n        }\n    }\n\n    handleMinHeight = () => {\n        if (this.minHeight) {\n            handleDeprecationWarning(this, 'minHeight', 'prop');\n        }\n    };\n\n    removeViewportListeners() {\n        window.removeEventListener('resize', this.viewPortOrientationChanged);\n        // #region remove when Popover API is supported in iOS\n        window.removeEventListener('scroll', this.viewPortChanged, { capture: true });\n        screen?.orientation?.removeEventListener('orientationchange', this.viewPortOrientationChanged);\n        window.removeEventListener('orientationchange', this.viewPortOrientationChanged);\n\n        // #endregion\n    }\n\n    setAbsoluteCSSProperties = async () => {\n        const { controlElement, containerElement, currentDirection, align } = this;\n\n        if (align === 'right') {\n            containerElement.style.setProperty('--comp-pop-right', '0');\n            containerElement.style.setProperty('--comp-pop-left', 'unset');\n        } else {\n            containerElement.style.setProperty('--comp-pop-left', '0');\n            containerElement.style.setProperty('--comp-pop-right', 'unset');\n        }\n\n        if (this.block) {\n            containerElement.style.setProperty('--comp-pop-width', '100%');\n        }\n\n        if (currentDirection === 'up') {\n            const controlStyle = getComputedStyle(controlElement);\n            const controlSize =\n                parseInt(controlStyle.height || '0') +\n                parseInt(controlStyle.borderTopWidth || '0') +\n                parseInt(controlStyle.borderBottomWidth || '0');\n\n            containerElement.style.setProperty('--comp-pop-bottom', `${controlSize}px`);\n        }\n\n        // Wait for one paint to prevent layout thrashing\n        await waitForNextPaint();\n        containerElement.style.setProperty('--comp-pop-opacity', '1');\n    };\n\n    setDirectionAndShow(direction: 'up' | 'down') {\n        this.setRootElement();\n        // Due to some runtime inconsistency across devices/browsers we need to add one more check here because the\n        // popover can be closed between the time the popover is opened and the time the direction is determined\n        const isOpen = this.open;\n        if (!isOpen) return;\n\n        this.currentDirection = direction;\n        this.show = true;\n        if (this.mode === 'legacy') {\n            this.setAbsoluteCSSProperties();\n        } else {\n            this.setFixedCSSProperties();\n        }\n    }\n\n    setFixedCSSProperties = async () => {\n        const { controlElement, containerElement, currentDirection, rootElementRect } = this;\n        const {\n            top: controlTop,\n            bottom: controlBottom,\n            left: controlLeft,\n            right: controlRight,\n        } = controlElement?.getBoundingClientRect?.() ?? {\n            top: 0,\n            bottom: 0,\n            left: 0,\n            right: 0,\n        };\n        const popoverLeft: number = controlLeft - rootElementRect.left;\n\n        if (this.block) containerElement.style.setProperty('--comp-pop-width', `${controlElement?.offsetWidth || 0}px`);\n        containerElement.style.setProperty('--comp-pop-left', `${popoverLeft}px`);\n        containerElement.style.setProperty(\n            '--comp-pop-right',\n            `${rootElementRect.width + rootElementRect.left - controlRight}px`\n        );\n\n        if (currentDirection === 'up') {\n            containerElement.style.setProperty(\n                '--comp-pop-bottom',\n                `${rootElementRect.height + rootElementRect.top - controlTop}px`\n            );\n        }\n        if (currentDirection === 'down') {\n            containerElement.style.setProperty('--comp-pop-top', `${controlBottom - rootElementRect.top}px`);\n        }\n\n        // Wait for one paint to prevent layout thrashing\n        await waitForNextPaint();\n        containerElement.style.setProperty('--comp-pop-opacity', '1');\n    };\n\n    setRootElement() {\n        let currentElement: HTMLElement = this.hostElement;\n\n        while (currentElement && currentElement !== document.documentElement) {\n            const computedStyle = window.getComputedStyle(currentElement);\n\n            // Check if the element has any styles applied that create a new containg block\n            if (\n                computedStyle.transform !== 'none' ||\n                computedStyle.filter !== 'none' ||\n                computedStyle.perspective !== 'none' ||\n                computedStyle.containerType !== 'normal' ||\n                ['transform', 'perspective', 'filter'].includes(computedStyle.willChange) ||\n                ['layout', 'paint', 'strict', 'content'].includes(computedStyle.contain)\n            ) {\n                this.rootElementRect = currentElement.getBoundingClientRect();\n                return;\n            }\n\n            const rootNode = currentElement.getRootNode();\n            const isRootNodeWebComponent =\n                typeof ShadowRoot !== 'undefined' &&\n                rootNode instanceof ShadowRoot &&\n                rootNode.host instanceof HTMLElement;\n            if (isRootNodeWebComponent) {\n                currentElement = rootNode.host;\n            } else {\n                currentElement = currentElement.parentElement;\n            }\n        }\n\n        // Return the document's bounding rect if no element is found\n        this.rootElementRect = {\n            top: 0,\n            bottom: 0,\n            left: 0,\n            right: 0,\n            height: window.visualViewport.height,\n            width: window.visualViewport.width,\n        } as DOMRect;\n    }\n\n    viewPortChanged = () => {\n        if (!this.open) return;\n        this.determinePopDirection();\n    };\n\n    viewPortOrientationChanged = () => {\n        this.orientationChanged = true;\n        this.viewPortChanged();\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const containerClasses = ['container', this.currentDirection];\n        if (this.show) containerClasses.push('show');\n        if (this.mode === 'legacy') containerClasses.push('legacy');\n\n        return (\n            <div\n                ref={el => (this.containerElement = el)}\n                class={containerClasses.join(' ')}\n                test-id=\"outerContainer\"\n            >\n                <div\n                    ref={el => (this.contentElement = el)}\n                    class=\"content\"\n                >\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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"}
+{"version":3,"names":["ClickElsewhere","constructor","hostRef","this","isCurrentlyFocused","mouseEventList","mouseHandler","event","shadowContains","findActiveElement","aboutToBeFocused","shadowEventTarget","originatesInSlots","target","change","emit","windowBlurHandler","connectedCallback","forEach","eventName","document","addEventListener","window","disconnectedCallback","removeEventListener","componentWillLoad","workingElement","activeElement","shadowRoot","slots","hostElement","querySelectorAll","currentSlot","Array","from","lightNodes","assignedNodes","childNodes","currentNode","contains","child","parentNode","host","composedPath","q2PopoverCss","Q2PopoverStyle0","Q2Popover","displayBuffer","orientationChanged","handleMinHeight","minHeight","handleDeprecationWarning","handlePopoverToggleEvent","popoverStateChanged","open","newState","setAbsoluteCSSProperties","async","controlElement","containerElement","currentDirection","align","style","setProperty","block","controlStyle","getComputedStyle","controlSize","parseInt","height","borderTopWidth","borderBottomWidth","waitForNextPaint","setPopoverAPICSSProperties","isModule","top","controlTop","bottom","controlBottom","left","controlLeft","right","controlRight","_b","_a","getBoundingClientRect","call","popoverLeft","popoverRight","_c","visualViewport","width","scrollX","offsetWidth","innerHeight","scrollY","viewPortChanged","determinePopDirection","viewPortOrientationChanged","undefined","removeViewportListeners","contentElement","supportsPopoverAPI","console","warn","mode","componentDidLoad","popoverStateHandler","detail","stopPropagation","scrollContainerTo","options","scrollTo","toggle","minHeightProvided","openChanged","addViewportListeners","show","hidePopover","clearCSSProperties","isIframe","hasPlatformDimensions","Object","keys","Tecton","platformDimensions","length","providedDirection","direction","hasOwn","HTMLElement","prototype","validatedMaxHeight","maxHeight","isNaN","isInScrollableContainer","isMobile","passive","capture","screen","orientation","removeProperty","windowHeight","maxSpaceAbove","maxSpaceBelow","outletOffset","topBarHeight","bottomBarHeight","distanceToIframeBottom","visualControlTop","visualControlBottom","viewableSpaceAbove","viewableSpaceBelow","isIframeShorterThanWindow","directionWithMostSpace","shouldUpdateMaxHeight","getPropertyValue","currentOrDetermineDirection","priorityMaxHeight","Math","min","setDirectionAndShow","isOpen","showPopover","render","containerClasses","push","h","key","ref","el","class","join","tabIndex","popover"],"sources":["src/components/click-elsewhere/click-elsewhere.tsx","src/components/q2-popover/q2-popover.scss?tag=q2-popover&encapsulation=shadow","src/components/q2-popover/q2-popover.tsx"],"sourcesContent":["import { Component, ComponentInterface, Element, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n    tag: 'click-elsewhere',\n    shadow: false,\n})\nexport class ClickElsewhere implements ComponentInterface {\n    // #region Own Properties\n\n    isCurrentlyFocused: boolean = false;\n    /**\n     * Listens for mouse and window events that happen outside this click-elsewhere element so we can close popovers when users click outside them\n     */\n    mouseEventList: string[] = ['mousedown', 'dragstart', 'touchstart'];\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the user clicks outside the element\n     */\n    @Event()\n    change: EventEmitter;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    /* tslint:enable:no-empty */\n\n    connectedCallback() {\n        this.mouseEventList.forEach((eventName: string) => {\n            document.addEventListener(eventName, this.mouseHandler);\n        });\n        window.addEventListener('blur', this.windowBlurHandler);\n    }\n\n    disconnectedCallback() {\n        this.mouseEventList.forEach((eventName: string) => {\n            document.removeEventListener(eventName, this.mouseHandler);\n        });\n        window.removeEventListener('blur', this.windowBlurHandler);\n    }\n\n    /* TODO: Stencil/Rollup is having issues compiling without this here. Will try to remove in future Stencil upgrade. */\n    /* tslint:disable:no-empty */\n    componentWillLoad() {}\n\n    // #endregion\n    // #region Local Methods\n\n    findActiveElement(): Element | null {\n        let workingElement = document.activeElement!;\n        while (true) {\n            if (!workingElement || !workingElement.shadowRoot) {\n                return workingElement;\n            }\n            workingElement = workingElement.shadowRoot.activeElement;\n        }\n    }\n\n    mouseHandler = (event: Event): void => {\n        const isCurrentlyFocused = this.shadowContains(this.findActiveElement());\n        const aboutToBeFocused =\n            this.shadowContains(this.shadowEventTarget(event)) || this.originatesInSlots(event.target as Element);\n\n        if (!aboutToBeFocused && (this.isCurrentlyFocused || isCurrentlyFocused)) {\n            this.isCurrentlyFocused = false;\n            this.change.emit();\n            return;\n        }\n        this.isCurrentlyFocused = aboutToBeFocused || isCurrentlyFocused;\n    };\n\n    originatesInSlots(target: Element): boolean {\n        const slots = this.hostElement.querySelectorAll('slot');\n        for (const currentSlot of Array.from(slots)) {\n            const lightNodes =\n                (currentSlot && currentSlot.assignedNodes && currentSlot.assignedNodes()) ||\n                this.hostElement.childNodes;\n\n            for (const currentNode of Array.from(lightNodes)) {\n                if (currentNode.contains(target)) {\n                    return true;\n                }\n            }\n        }\n        return false;\n    }\n\n    shadowContains(child: any): boolean {\n        /**\n         * shadow-dom enabled version of Node.contains()\n         */\n\n        while (true) {\n            if (child === this.hostElement) {\n                return true;\n            }\n            if (!child) {\n                return false;\n            }\n            child = child.parentNode || child.host;\n        }\n    }\n\n    shadowEventTarget(event: any): Element {\n        return event.composedPath()[0] || event.target;\n    }\n\n    windowBlurHandler = (): void => {\n        this.isCurrentlyFocused = false;\n        this.change.emit();\n    };\n}\n","@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.legacy {\n    &.container {\n        display: none;\n    }\n\n    &.show {\n        display: block;\n        z-index: var-list(--tct-popover-z-index, 50);\n    }\n}\n\n:popover-open,\n.show {\n    position: absolute;\n    margin: 0;\n    padding: 0;\n    overflow: auto;\n    background: var-list(--tct-popover-background, --app-white, #ffffff);\n    color: var-list(--tct-popover-font-color, --t-text, #4d4d4d);\n    min-width: var-list(--tct-popover-min-width, 135px);\n    margin-block: var-list(--tct-popover-margin-block, 0);\n    box-shadow: var-list(\n        --tct-popover-box-shadow,\n        --app-shadow-1,\n        unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)')\n    );\n    border-width: var-list(--tct-popover-border-width, 0);\n    border-style: solid;\n    border-color: var-list(--tct-popover-border-color, transparent);\n    border-radius: var-list(--tct-popover-border-radius, 0);\n    // the --comp variables are set via JS\n    max-height: var(--comp-pop-max-height);\n    left: var(--comp-pop-left);\n    opacity: var(--comp-pop-opacity, 0);\n\n    &.block {\n        right: unset;\n        width: var(--comp-pop-width);\n        min-width: var-list(--tct-popover-min-width, unset);\n    }\n\n    &.left {\n        left: var(--comp-pop-left);\n        right: unset;\n    }\n\n    &.right {\n        right: var(--comp-pop-right);\n        left: unset;\n    }\n\n    &.down {\n        top: var-list(--tct-popover-top, --comp-pop-top);\n        bottom: unset;\n    }\n\n    &.up {\n        top: unset;\n        bottom: var(--comp-pop-bottom);\n    }\n\n    @include tiny-scrollbar();\n}\n\nclick-elsewhere {\n    position: relative;\n    display: block;\n}\n","import {\n    Component,\n    Prop,\n    h,\n    ComponentInterface,\n    Element,\n    Watch,\n    Method,\n    Listen,\n    EventEmitter,\n    Event,\n    State,\n} from '@stencil/core';\nimport { handleDeprecationWarning, waitForNextPaint, isMobile, isInScrollableContainer } from '../../utils';\n\n@Component({ tag: 'q2-popover', shadow: true, styleUrl: 'q2-popover.scss' })\nexport class Q2Popover implements ComponentInterface {\n    // #region Own Properties\n\n    containerElement: HTMLDivElement;\n    contentElement: HTMLDivElement;\n    /**\n     * The number of pixels to leave between the popover and the edge of the viewport\n     */\n    displayBuffer = 10;\n    orientationChanged: boolean = false;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    currentDirection: 'down' | 'up' = undefined;\n\n    // remove `show` when Popover API is supported in iOS\n    @State()\n    show: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Aligns the popover to the left or right side of the control element. */\n    @Prop({ reflect: true })\n    align: 'left' | 'right' = 'left';\n\n    /** Indicates the popover will match the width of its parent element. */\n    @Prop({ reflect: true })\n    block: boolean;\n\n    /** The element that controls the popover's behavior. */\n    @Prop()\n    controlElement: HTMLElement;\n\n    /**\n     * Force the direction of the popover when it opens.\n     * If no value is passed, the component will auto-detect the direction based on available space.\n     */\n    @Prop({ reflect: true })\n    direction: 'up' | 'down';\n\n    /**\n     * Force the maximum height of the popover. This value will be interpreted as pixels.\n     * If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.\n     */\n    @Prop()\n    maxHeight: number;\n\n    /** @deprecated */\n    @Prop()\n    minHeight: number;\n\n    @Prop()\n    mode: 'legacy' = null;\n\n    /** Controls whether the popover is open or closed. */\n    @Prop({ reflect: true, mutable: true })\n    open: boolean;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the popover is opened or closed.\n     */\n    @Event()\n    popoverStateChanged: EventEmitter<{ open: boolean }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.removeViewportListeners();\n        this.containerElement.removeEventListener('toggle', this.handlePopoverToggleEvent);\n        this.containerElement = null;\n        this.contentElement = null;\n        this.controlElement = null;\n    }\n\n    componentWillLoad() {\n        if (!this.supportsPopoverAPI) {\n            console.warn(\n                'The Popover API is not supported in this browser. Please update your browser to the latest version. The component will use legacy mode.'\n            );\n            this.mode = 'legacy';\n        }\n    }\n\n    componentDidLoad() {\n        this.handleMinHeight();\n        if (this.supportsPopoverAPI) this.containerElement.addEventListener('toggle', this.handlePopoverToggleEvent);\n        if (this.open) this.determinePopDirection();\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('popoverState')\n    popoverStateHandler(event: CustomEvent<{ open: boolean }>) {\n        const {\n            detail: { open },\n        } = event;\n        if (open === this.open) return;\n\n        this.open = open;\n        event.stopPropagation();\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    @Method()\n    async scrollContainerTo(options: ScrollToOptions) {\n        this.containerElement.scrollTo(options);\n    }\n\n    @Method()\n    async toggle() {\n        this.open = !this.open;\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('minHeight')\n    minHeightProvided() {\n        this.handleMinHeight();\n    }\n\n    @Watch('open')\n    async openChanged(open: boolean) {\n        this.popoverStateChanged.emit({ open });\n\n        if (open) {\n            this.addViewportListeners();\n            this.determinePopDirection();\n        } else {\n            this.removeViewportListeners();\n            this.currentDirection = undefined;\n            if (this.mode === 'legacy' || !this.supportsPopoverAPI) {\n                this.show = false;\n            } else {\n                this.containerElement.hidePopover();\n            }\n\n            await waitForNextPaint();\n            this.clearCSSProperties();\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get isModule() {\n        const isIframe = window !== window.top;\n        const hasPlatformDimensions = Object.keys(window.Tecton?.platformDimensions ?? {}).length > 0;\n        return isIframe && hasPlatformDimensions;\n    }\n\n    get providedDirection(): 'up' | 'down' | undefined {\n        const { direction } = this;\n        switch (direction) {\n            case 'up':\n            case 'down':\n                return direction;\n            default:\n                return undefined;\n        }\n    }\n\n    get supportsPopoverAPI(): boolean {\n        return Object.hasOwn(HTMLElement.prototype, 'popover');\n    }\n\n    get validatedMaxHeight(): number | undefined {\n        const { maxHeight } = this;\n        return isNaN(maxHeight) ? undefined : maxHeight;\n    }\n\n    addViewportListeners() {\n        window.addEventListener('resize', this.viewPortOrientationChanged);\n        visualViewport?.addEventListener('resize', this.viewPortChanged);\n        if (isInScrollableContainer(this.hostElement) && !isMobile()) {\n            window.addEventListener('scroll', this.viewPortChanged, { passive: true, capture: true });\n        }\n        screen?.orientation?.addEventListener('orientationchange', this.viewPortOrientationChanged);\n        window.addEventListener('orientationchange', this.viewPortOrientationChanged);\n    }\n\n    clearCSSProperties() {\n        this.containerElement.style.removeProperty('--comp-pop-max-height');\n        this.containerElement.style.removeProperty('--comp-pop-top');\n        this.containerElement.style.removeProperty('--comp-pop-bottom');\n        this.containerElement.style.removeProperty('--comp-pop-left');\n        this.containerElement.style.removeProperty('--comp-pop-right');\n        this.containerElement.style.removeProperty('--comp-pop-width');\n        this.containerElement.style.removeProperty('--comp-pop-opacity');\n    }\n\n    async determinePopDirection() {\n        const { containerElement, controlElement, providedDirection, displayBuffer } = this;\n        if (containerElement) containerElement.style.maxHeight = null;\n        await waitForNextPaint();\n\n        const { isModule } = this;\n        const { top: controlTop, bottom: controlBottom } = controlElement?.getBoundingClientRect?.() ?? {\n            top: 0,\n            bottom: 0,\n        };\n\n        let windowHeight: number;\n        let maxSpaceAbove: number;\n        let maxSpaceBelow: number;\n        if (isModule) {\n            const {\n                outletOffset = 0,\n                innerHeight = window.innerHeight,\n                top: topBarHeight = 0,\n                bottom: bottomBarHeight = 0,\n            } = window.Tecton?.platformDimensions || {};\n\n            const distanceToIframeBottom = window.innerHeight - controlBottom;\n\n            // controlElement position visually on the page\n            const visualControlTop = outletOffset > 0 ? controlTop : controlTop + outletOffset - topBarHeight;\n            const visualControlBottom = outletOffset + controlBottom - topBarHeight;\n\n            // visual space around the controlElement\n            const viewableSpaceAbove = visualControlTop;\n            const viewableSpaceBelow = innerHeight - bottomBarHeight - visualControlBottom;\n\n            // calculate space above and below controlElement\n            const isIframeShorterThanWindow = distanceToIframeBottom < viewableSpaceBelow;\n            maxSpaceAbove = viewableSpaceAbove - displayBuffer;\n            maxSpaceBelow = isIframeShorterThanWindow\n                ? distanceToIframeBottom - displayBuffer\n                : viewableSpaceBelow - displayBuffer;\n        } else {\n            windowHeight = window.innerHeight;\n            maxSpaceAbove = controlTop - displayBuffer;\n            maxSpaceBelow = windowHeight - controlBottom - displayBuffer;\n        }\n\n        const directionWithMostSpace: 'up' | 'down' = maxSpaceAbove > maxSpaceBelow ? 'up' : 'down';\n\n        // We do not want to update the max height once the popover is open unless the page orientation shifts (resize or mobile use cases)\n        const shouldUpdateMaxHeight =\n            !containerElement.style.getPropertyValue('--comp-pop-max-height') || this.orientationChanged;\n        // we do not want to constantly update the max-height after an orientation change, so we switch this back to false\n        this.orientationChanged = false;\n        const currentOrDetermineDirection = this.currentDirection || providedDirection || directionWithMostSpace;\n\n        switch (currentOrDetermineDirection) {\n            case 'up':\n                if (shouldUpdateMaxHeight) {\n                    const priorityMaxHeight = this.validatedMaxHeight || maxSpaceAbove;\n                    const maxHeight = Math.min(maxSpaceAbove, priorityMaxHeight);\n                    containerElement.style.setProperty('--comp-pop-max-height', `${maxHeight}px`);\n                }\n                this.setDirectionAndShow('up');\n                break;\n            case 'down':\n                if (shouldUpdateMaxHeight) {\n                    const priorityMaxHeight = this.validatedMaxHeight || maxSpaceBelow;\n                    const maxHeight = Math.min(maxSpaceBelow, priorityMaxHeight);\n                    containerElement.style.setProperty('--comp-pop-max-height', `${maxHeight}px`);\n                }\n                this.setDirectionAndShow('down');\n                break;\n            default:\n                break;\n        }\n    }\n\n    handleMinHeight = () => {\n        if (this.minHeight) {\n            handleDeprecationWarning(this, 'minHeight', 'prop');\n        }\n    };\n\n    handlePopoverToggleEvent = (event: ToggleEvent) => {\n        this.popoverStateChanged.emit({ open: event.newState === 'open' });\n    };\n\n    removeViewportListeners() {\n        window.removeEventListener('resize', this.viewPortOrientationChanged);\n        visualViewport?.removeEventListener('resize', this.viewPortChanged);\n        window.removeEventListener('scroll', this.viewPortChanged, { capture: true });\n        screen?.orientation?.removeEventListener('orientationchange', this.viewPortOrientationChanged);\n        window.removeEventListener('orientationchange', this.viewPortOrientationChanged);\n    }\n\n    setAbsoluteCSSProperties = async () => {\n        const { controlElement, containerElement, currentDirection, align } = this;\n\n        if (align === 'right') {\n            containerElement.style.setProperty('--comp-pop-right', '0');\n            containerElement.style.setProperty('--comp-pop-left', 'unset');\n        } else {\n            containerElement.style.setProperty('--comp-pop-left', '0');\n            containerElement.style.setProperty('--comp-pop-right', 'unset');\n        }\n\n        if (this.block) {\n            containerElement.style.setProperty('--comp-pop-width', '100%');\n        }\n\n        if (currentDirection === 'up') {\n            const controlStyle = getComputedStyle(controlElement);\n            const controlSize =\n                parseInt(controlStyle.height || '0') +\n                parseInt(controlStyle.borderTopWidth || '0') +\n                parseInt(controlStyle.borderBottomWidth || '0');\n\n            containerElement.style.setProperty('--comp-pop-bottom', `${controlSize}px`);\n        }\n\n        // Wait for one paint to prevent layout thrashing\n        await waitForNextPaint();\n        containerElement.style.setProperty('--comp-pop-opacity', '1');\n    };\n\n    setDirectionAndShow(direction: 'up' | 'down') {\n        // Due to some runtime inconsistency across devices/browsers we need to add one more check here because the\n        // popover can be closed between the time the popover is opened and the time the direction is determined\n        const isOpen = this.open;\n        if (!isOpen) return;\n\n        this.currentDirection = direction;\n        if (this.mode === 'legacy' || !this.supportsPopoverAPI) {\n            this.show = true;\n            this.setAbsoluteCSSProperties();\n        } else {\n            this.setPopoverAPICSSProperties();\n            this.containerElement.showPopover();\n        }\n    }\n\n    setPopoverAPICSSProperties = async () => {\n        const { controlElement, containerElement, currentDirection, isModule, align } = this;\n        const {\n            top: controlTop,\n            bottom: controlBottom,\n            left: controlLeft,\n            right: controlRight,\n        } = controlElement?.getBoundingClientRect?.() ?? {\n            top: 0,\n            bottom: 0,\n            left: 0,\n            right: 0,\n        };\n\n        const popoverLeft: number = controlLeft;\n        const popoverRight: number = window?.visualViewport?.width - controlRight;\n\n        if (align === 'right') {\n            containerElement.style.setProperty('--comp-pop-right', `${popoverRight - window.scrollX}px`);\n            containerElement.style.setProperty('--comp-pop-left', 'unset');\n        } else {\n            containerElement.style.setProperty('--comp-pop-left', `${popoverLeft + window.scrollX}px`);\n            containerElement.style.setProperty('--comp-pop-right', 'unset');\n        }\n\n        if (this.block) containerElement.style.setProperty('--comp-pop-width', `${controlElement?.offsetWidth || 0}px`);\n\n        if (currentDirection === 'up') {\n            if (isModule) {\n                containerElement.style.setProperty('--comp-pop-bottom', `${window.innerHeight - controlTop}px`);\n            } else {\n                containerElement.style.setProperty(\n                    '--comp-pop-bottom',\n                    `${window.innerHeight - controlTop - window.scrollY}px`\n                );\n            }\n        }\n\n        if (currentDirection === 'down') {\n            if (isModule) {\n                containerElement.style.setProperty('--comp-pop-top', `${controlBottom}px`);\n            } else {\n                containerElement.style.setProperty('--comp-pop-top', `${controlBottom + window.scrollY}px`);\n            }\n        }\n\n        // Wait for one paint to prevent layout thrashing\n        await waitForNextPaint();\n        containerElement.style.setProperty('--comp-pop-opacity', '1');\n    };\n\n    viewPortChanged = () => {\n        if (!this.open) return;\n        this.determinePopDirection();\n    };\n\n    viewPortOrientationChanged = () => {\n        this.orientationChanged = true;\n        this.viewPortChanged();\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const containerClasses = ['container', this.currentDirection, this.align];\n        if (this.show) containerClasses.push('show');\n        if (this.block) containerClasses.push('block');\n        if (this.mode === 'legacy') containerClasses.push('legacy');\n\n        return (\n            <div\n                ref={el => (this.containerElement = el)}\n                class={containerClasses.join(' ')}\n                test-id=\"outerContainer\"\n                tabIndex={-1}\n                popover=\"manual\"\n            >\n                <div\n                    ref={el => (this.contentElement = el)}\n                    class=\"content\"\n                >\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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"}

package/dist/q2-tecton-elements/{index-d18e2a20.js → index-99c46474.js}

@@ -14,22 +14,29 @@ function isMobile() {
   return /Android|webOS|iPhone|iPad|iPod|BlackBerry|Mobile|IEMobile|Windows Phone|Opera Mini/i.test(navigator.userAgent);
 }
 
-function isHostLosingFocus(e, n) {
-  const o = e.type;
-  const i = [ "focusin", "focus" ];
-  const t = i.includes(o);
-  // on focusin: `target` is element losing focus, `relatedTarget` is element gaining focus
-  // on focusout: `target` is element gaining focus, `relatedTarget` is element losing focus
-    const a = t ? e.target : e.relatedTarget;
-  const isElementNestedInHostElement = e => {
-    if (e === n) return true;
-    if (e.parentElement) {
-      return isElementNestedInHostElement(e.parentElement);
+function isInScrollableContainer(e) {
+  let n = e;
+  while (n && n !== document.body && n !== document.documentElement) {
+    // Move to parent
+    if (n.parentElement) {
+      n = n.parentElement;
+    } else {
+      // Try to cross shadow DOM boundary
+      const e = n.getRootNode();
+      if (e && e.host) {
+        n = e.host;
+      } else {
+        break;
+      }
     }
-    return false;
-  };
-  if (!(a instanceof HTMLElement)) return true;
-  return !isElementNestedInHostElement(a);
+    const e = window.getComputedStyle(n);
+    const o = e.overflow === "scroll" || e.overflow === "auto" || e.overflowX === "scroll" || e.overflowX === "auto" || e.overflowY === "scroll" || e.overflowY === "auto";
+    const i = n.scrollHeight > n.clientHeight || n.scrollWidth > n.clientWidth;
+    if (o && i) {
+      return true;
+    }
+  }
+  return false;
 }
 
 function isRelatedTargetWithinHost(e, n) {
@@ -319,5 +326,5 @@ const handleColor = e => {
   return a;
 };
 
-export { handleAriaLabel as a, handleColor as b, createGuid as c, isMobile as d, hasSlotContent as e, renderLabel as f, getAriaValueFromProp as g, handleDeprecationWarning as h, isEventFromElement as i, handleRenamedProp as j, isTouchDevice as k, loc as l, resizeIframe as m, nextPaint as n, overrideFocus as o, debounce as p, isRelatedTargetWithinHost as q, renderMessages as r, setMessageHeight as s, isHostLosingFocus as t, isFirefox as u, getAllText as v, waitForNextPaint as w, isVisible as x };
-//# sourceMappingURL=index-d18e2a20.js.map
+export { handleAriaLabel as a, handleColor as b, createGuid as c, isMobile as d, hasSlotContent as e, renderLabel as f, getAriaValueFromProp as g, handleDeprecationWarning as h, isEventFromElement as i, handleRenamedProp as j, isTouchDevice as k, loc as l, resizeIframe as m, nextPaint as n, overrideFocus as o, debounce as p, isRelatedTargetWithinHost as q, renderMessages as r, setMessageHeight as s, isFirefox as t, getAllText as u, isVisible as v, waitForNextPaint as w, isInScrollableContainer as x };
+//# sourceMappingURL=index-99c46474.js.map