q2-tecton-elements 1.53.2 → 1.53.3

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

@@ -1,25 +1,25 @@
-import { r as o, c as t, g as i, h as e } from "./index-7a5365e2.js";
+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-504f1a9e.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) {
-    o(this, i);
-    this.change = t(this, "change", 7);
+    t(this, i);
+    this.change = o(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 = o => {
-      const t = this.shadowContains(this.findActiveElement());
-      const i = this.shadowContains(this.shadowEventTarget(o)) || this.originatesInSlots(o.target);
-      if (!i && (this.isCurrentlyFocused || t)) {
+    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.isCurrentlyFocused = false;
         this.change.emit();
         return;
       }
-      this.isCurrentlyFocused = i || t;
+      this.isCurrentlyFocused = i || o;
     };
     this.windowBlurHandler = () => {
       this.isCurrentlyFocused = false;
@@ -30,14 +30,14 @@ const n = class {
   // #region Component Lifecycle Events
   /* tslint:enable:no-empty */
   connectedCallback() {
-    this.mouseEventList.forEach((o => {
-      document.addEventListener(o, this.mouseHandler);
+    this.mouseEventList.forEach((t => {
+      document.addEventListener(t, this.mouseHandler);
     }));
     window.addEventListener("blur", this.windowBlurHandler);
   }
   disconnectedCallback() {
-    this.mouseEventList.forEach((o => {
-      document.removeEventListener(o, this.mouseHandler);
+    this.mouseEventList.forEach((t => {
+      document.removeEventListener(t, this.mouseHandler);
     }));
     window.removeEventListener("blur", this.windowBlurHandler);
   }
@@ -46,56 +46,56 @@ const n = class {
   // #endregion
   // #region Local Methods
   findActiveElement() {
-    let o = document.activeElement;
+    let t = document.activeElement;
     while (true) {
-      if (!o || !o.shadowRoot) {
-        return o;
+      if (!t || !t.shadowRoot) {
+        return t;
       }
-      o = o.shadowRoot.activeElement;
+      t = t.shadowRoot.activeElement;
     }
   }
-  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)) {
+  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)) {
           return true;
         }
       }
     }
     return false;
   }
-  shadowContains(o) {
+  shadowContains(t) {
     /**
          * shadow-dom enabled version of Node.contains()
          */
     while (true) {
-      if (o === this.hostElement) {
+      if (t === this.hostElement) {
         return true;
       }
-      if (!o) {
+      if (!t) {
         return false;
       }
-      o = o.parentNode || o.host;
+      t = t.parentNode || t.host;
     }
   }
-  shadowEventTarget(o) {
-    return o.composedPath()[0] || o.target;
+  shadowEventTarget(t) {
+    return t.composedPath()[0] || t.target;
   }
   get hostElement() {
     return i(this);
   }
 };
 
-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 = "*{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 a = p;
+const h = c;
 
-const c = class {
+const l = class {
   constructor(i) {
-    o(this, i);
-    this.popoverStateChanged = t(this, "popoverStateChanged", 7);
+    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;
@@ -105,68 +105,68 @@ const c = class {
         s(this, "minHeight", "prop");
       }
     };
-    this.handlePopoverToggleEvent = o => {
+    this.handlePopoverToggleEvent = t => {
       this.popoverStateChanged.emit({
-        open: o.newState === "open"
+        open: t.newState === "open"
       });
     };
     this.setAbsoluteCSSProperties = async () => {
-      const {controlElement: o, containerElement: t, currentDirection: i, align: e} = this;
+      const {controlElement: t, containerElement: o, currentDirection: i, align: e} = this;
       if (e === "right") {
-        t.style.setProperty("--comp-pop-right", "0");
-        t.style.setProperty("--comp-pop-left", "unset");
+        o.style.setProperty("--comp-pop-right", "0");
+        o.style.setProperty("--comp-pop-left", "unset");
       } else {
-        t.style.setProperty("--comp-pop-left", "0");
-        t.style.setProperty("--comp-pop-right", "unset");
+        o.style.setProperty("--comp-pop-left", "0");
+        o.style.setProperty("--comp-pop-right", "unset");
       }
       if (this.block) {
-        t.style.setProperty("--comp-pop-width", "100%");
+        o.style.setProperty("--comp-pop-width", "100%");
       }
       if (i === "up") {
-        const i = getComputedStyle(o);
+        const i = getComputedStyle(t);
         const e = parseInt(i.height || "0") + parseInt(i.borderTopWidth || "0") + parseInt(i.borderBottomWidth || "0");
-        t.style.setProperty("--comp-pop-bottom", `${e}px`);
+        o.style.setProperty("--comp-pop-bottom", `${e}px`);
       }
       // Wait for one paint to prevent layout thrashing
             await r();
-      t.style.setProperty("--comp-pop-opacity", "1");
+      o.style.setProperty("--comp-pop-opacity", "1");
     };
     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 : {
+      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 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");
+      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 {
-        a.style.setProperty("--comp-pop-left", `${b + window.scrollX}px`);
-        a.style.setProperty("--comp-pop-right", "unset");
+        s.style.setProperty("--comp-pop-left", `${u + window.scrollX}px`);
+        s.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`);
+      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 {
-          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`);
+          s.style.setProperty("--comp-pop-bottom", `${window.innerHeight - c - window.scrollY}px`);
         }
       }
-      if (c === "down") {
-        if (l) {
-          a.style.setProperty("--comp-pop-top", `${u}px`);
+      if (n === "down") {
+        if (p) {
+          s.style.setProperty("--comp-pop-top", `${h}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`);
+          s.style.setProperty("--comp-pop-top", `${h + window.scrollY}px`);
         }
       }
       // Wait for one paint to prevent layout thrashing
             await r();
-      a.style.setProperty("--comp-pop-opacity", "1");
+      s.style.setProperty("--comp-pop-opacity", "1");
     };
     this.viewPortChanged = () => {
       if (!this.open) return;
@@ -209,16 +209,16 @@ const c = class {
   }
   // #endregion
   // #region Listeners
-  popoverStateHandler(o) {
-    const {detail: {open: t}} = o;
-    if (t === this.open) return;
-    this.open = t;
-    o.stopPropagation();
+  popoverStateHandler(t) {
+    const {detail: {open: o}} = t;
+    if (o === this.open) return;
+    this.open = o;
+    t.stopPropagation();
   }
   // #endregion
   // #region Public Methods API
-  async scrollContainerTo(o) {
-    this.containerElement.scrollTo(o);
+  async scrollContainerTo(t) {
+    this.containerElement.scrollTo(t);
   }
   async toggle() {
     this.open = !this.open;
@@ -228,11 +228,11 @@ const c = class {
   minHeightProvided() {
     this.handleMinHeight();
   }
-  async openChanged(o) {
+  async openChanged(t) {
     this.popoverStateChanged.emit({
-      open: o
+      open: t
     });
-    if (o) {
+    if (t) {
       this.addViewportListeners();
       this.determinePopDirection();
     } else {
@@ -250,17 +250,17 @@ const c = class {
   // #endregion
   // #region Local Methods
   get isModule() {
-    var o, t;
+    var t, o;
     const i = window !== window.top;
-    const e = Object.keys((t = (o = window.Tecton) === null || o === void 0 ? void 0 : o.platformDimensions) !== null && t !== void 0 ? t : {}).length > 0;
+    const e = Object.keys((o = (t = window.Tecton) === null || t === void 0 ? void 0 : t.platformDimensions) !== null && o !== void 0 ? o : {}).length > 0;
     return i && e;
   }
   get providedDirection() {
-    const {direction: o} = this;
-    switch (o) {
+    const {direction: t} = this;
+    switch (t) {
      case "up":
      case "down":
-      return o;
+      return t;
 
      default:
       return undefined;
@@ -270,18 +270,20 @@ const c = class {
     return Object.hasOwn(HTMLElement.prototype, "popover");
   }
   get validatedMaxHeight() {
-    const {maxHeight: o} = this;
-    return isNaN(o) ? undefined : o;
+    const {maxHeight: t} = this;
+    return isNaN(t) ? undefined : t;
   }
   addViewportListeners() {
-    var o;
+    var t;
     window.addEventListener("resize", this.viewPortOrientationChanged);
     visualViewport === null || visualViewport === void 0 ? void 0 : visualViewport.addEventListener("resize", this.viewPortChanged);
-    window.addEventListener("scroll", this.viewPortChanged, {
-      passive: true,
-      capture: true
-    });
-    (o = screen === null || screen === void 0 ? void 0 : screen.orientation) === null || o === void 0 ? void 0 : o.addEventListener("orientationchange", this.viewPortOrientationChanged);
+    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);
   }
   clearCSSProperties() {
@@ -294,75 +296,78 @@ const c = class {
     this.containerElement.style.removeProperty("--comp-pop-opacity");
   }
   async determinePopDirection() {
-    var o, t, i;
+    var t, o, i;
     const {containerElement: e, controlElement: s, providedDirection: n, displayBuffer: p} = this;
     if (e) e.style.maxHeight = null;
     await r();
     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 : {
+    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 h;
+    let l;
     let d;
     let u;
     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;
-      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
-            d = (o > 0 ? c : c + o) - p;
-      u = r ? e - p : s - p;
+      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 {
-      h = window.visualViewport.height;
+      l = window.innerHeight;
       d = c - p;
-      u = h - l - p;
+      u = l - h - p;
     }
-    const w = d > u ? "up" : "down";
+    const v = d > u ? "up" : "down";
     // We do not want to update the max height once the popover is open unless the page orientation shifts (resize or mobile use cases)
-        const v = !e.style.getPropertyValue("--comp-pop-max-height") || this.orientationChanged;
+        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 b = this.currentDirection || n || w;
-    switch (b) {
+    const f = this.currentDirection || n || v;
+    switch (f) {
      case "up":
-      if (v) {
-        const o = this.validatedMaxHeight || d;
-        const t = Math.min(d, o);
-        e.style.setProperty("--comp-pop-max-height", `${t}px`);
+      if (w) {
+        const t = this.validatedMaxHeight || d;
+        const o = Math.min(d, t);
+        e.style.setProperty("--comp-pop-max-height", `${o}px`);
       }
       this.setDirectionAndShow("up");
       break;
 
      case "down":
-      if (v) {
-        const o = this.validatedMaxHeight || u;
-        const t = Math.min(u, o);
-        e.style.setProperty("--comp-pop-max-height", `${t}px`);
+      if (w) {
+        const t = this.validatedMaxHeight || u;
+        const o = Math.min(u, t);
+        e.style.setProperty("--comp-pop-max-height", `${o}px`);
       }
       this.setDirectionAndShow("down");
       break;
     }
   }
   removeViewportListeners() {
-    var o;
+    var t;
     window.removeEventListener("resize", 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);
+    (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);
   }
-  setDirectionAndShow(o) {
+  setDirectionAndShow(t) {
     // 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 t = this.open;
-    if (!t) return;
-    this.currentDirection = o;
+    const o = this.open;
+    if (!o) return;
+    this.currentDirection = t;
     if (this.mode === "legacy" || !this.supportsPopoverAPI) {
       this.show = true;
       this.setAbsoluteCSSProperties();
@@ -374,23 +379,23 @@ const c = class {
   // #endregion
   // #region Render Methods
   render() {
-    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");
+    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: "acaaed8fe34bb4ee949c4032be9a08b61a28b238",
-      ref: o => this.containerElement = o,
-      class: o.join(" "),
+      key: "4cd26a6c090a6fb5b56d2fa6464143f74998c215",
+      ref: t => this.containerElement = t,
+      class: t.join(" "),
       "test-id": "outerContainer",
       tabIndex: -1,
-      popover: "auto"
+      popover: "manual"
     }, e("div", {
-      key: "b8e93864b158caa9e9e2cde64a84d9ea9288b761",
-      ref: o => this.contentElement = o,
+      key: "545c376ca96c14e129a8f60fadac3a3264b916cf",
+      ref: t => this.contentElement = t,
       class: "content"
     }, e("slot", {
-      key: "e43fee80ed07626f26aba98271c8408f9d69a37e"
+      key: "9a2824ab9023f34a2b3a56a76ace4df6a91b5ec6"
     })));
   }
   get hostElement() {
@@ -404,7 +409,7 @@ const c = class {
   }
 };
 
-c.style = a;
+l.style = h;
 
-export { n as click_elsewhere, c as q2_popover };
+export { a as click_elsewhere, l as q2_popover };
 //# sourceMappingURL=click-elsewhere_2.entry.js.map