q2-tecton-elements 1.71.4 → 1.73.0

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

@@ -4,7 +4,7 @@ import { m as n } from "./mirror-emit-DUjY_ucm.js";
 
 import { b as r } from "./component-DaQM9u3s.js";
 
-import { l as a, n as h, o as p, i as c, w as l, v as d, q as m, x as u, y as b, g as v } from "./index-Cps4jSQM.js";
+import { l as a, n as h, o as p, i as l, w as c, v as d, q as u, x as m, y as v, g as b } from "./index-CP8pXJ-l.js";
 
 const f = class {
   constructor(o) {
@@ -333,7 +333,7 @@ const w = class {
     t.stopPropagation();
   }
   delegateFocus(t) {
-    if (!c(t, this.hostElement)) return;
+    if (!l(t, this.hostElement)) return;
     this.popoverState.emit({
       open: !0,
       action: "open"
@@ -393,6 +393,20 @@ const w = class {
       "menu" === t && "q2-dropdown-item" === o.tagName.toLowerCase() || (o.role = i);
     }));
   }
+  findScrollableAncestor(t) {
+    var i, o;
+    let e = t;
+    for (;e; ) {
+      if (e instanceof HTMLElement && e !== t) {
+        const t = getComputedStyle(e).overflowY;
+        // Skip html/body so page-level scroll isn't treated as our container.
+                if (("auto" === t || "scroll" === t) && e !== document.documentElement && e !== document.body) return e;
+      }
+      const s = e.assignedSlot, n = e.parentNode, r = e.host;
+      e = null !== (o = null !== (i = null != s ? s : n) && void 0 !== i ? i : r) && void 0 !== o ? o : null;
+    }
+    return null;
+  }
   focusSelectedSibling(t) {
     const {allVisibleOptions: i, allOptions: o} = this;
     if (i.length < 2) return void (this.showSelected = !1);
@@ -423,7 +437,7 @@ const w = class {
     this.disabled || (this.popoverState.emit({
       open: !0,
       action: "open"
-    }), await l(), this.activeIndex = t, this.setActiveOption(), this.setFocusedOption(), 
+    }), await c(), this.activeIndex = t, this.setActiveOption(), this.setFocusedOption(), 
     this.scrollToActiveOption());
   }
   resetTimer() {
@@ -434,10 +448,16 @@ const w = class {
   scrollToActiveOption() {
     const t = this.allOptions[this.activeIndex];
     if (!t) return;
-    const {scrollX: i, scrollY: o} = window;
-    t.scrollIntoView({
-      block: "center"
-    }), window.scrollTo(i, o);
+    // Do our own scroll math so `scrollIntoView` doesn't cascade to the parent window in an SDK iframe.
+        const i = this.findScrollableAncestor(t);
+    if (i) {
+      if (i.scrollHeight > i.clientHeight) {
+        const o = t.getBoundingClientRect(), e = i.getBoundingClientRect(), s = o.top - e.top + o.height / 2;
+        i.scrollTop += s - e.height / 2;
+      }
+    } else t.scrollIntoView({
+      block: "nearest"
+    });
   }
   searchOptions(t, i) {
     this.searchString = t, this.searchAndFocus(t, i);
@@ -492,14 +512,14 @@ const w = class {
   // #region Render Methods
   render() {
     return e(s, {
-      key: "14f2a8ab97077ed7b93d746b75f89b98f416a55d"
+      key: "19cadb5668db33a912951df4ec0e81a74b2b78ce"
     }, e("div", {
-      key: "1184c5d8d4cf8af63a60bef1282d6442b8539cf6",
+      key: "1d5a8f310ee97bc2189b839ee3d87e08bf0fa269",
       class: "content",
       ref: t => this.contentElement = t,
       onFocusout: this.focusoutHandler
     }, e("div", {
-      key: "5dcb6a82f1759e46d5e742e72075bf3dfa3c6d70",
+      key: "24b1616962a9b544fb6215acc1e6edb4f12a5a03",
       class: "options",
       "aria-label": a("tecton.element.optionList.label", [ this.label ]),
       "aria-multiselectable": "menu" === this.type ? void 0 : this.multiple ? "true" : void 0,
@@ -507,7 +527,7 @@ const w = class {
       onKeyDown: this.internalKeydownHandler,
       onClick: this.clickHandler
     }, e("slot", {
-      key: "39372ab91b081ba124ff4c4dc04fc0c84be7a4ad"
+      key: "eeb0342b7c319f5f5af95daa54dcaa732c3159d9"
     }))));
   }
   get hostElement() {
@@ -534,6 +554,7 @@ const g = class {
          * The number of pixels to leave between the popover and the edge of the viewport
          */
     this.displayBuffer = 10, this.orientationChanged = !1, this.pendingAnimationResolve = null, 
+    this.platformScrollUnsubscribe = null, 
     // #endregion
     // #region State Properties
     this.animationState = "idle", this.currentDirection = void 0, 
@@ -542,8 +563,15 @@ const g = class {
     // #endregion
     // #region Public Property API
     /** Aligns the popover to the left or right side of the control element. */
-    this.align = "left", this.mode = null, this.handleMinHeight = () => {
-      this.minHeight && m(this, "minHeight", "prop");
+    this.align = "left", this.mode = null, this.handleInsideScroll = t => {
+      const {containerElement: i} = this;
+      i && (i.scrollHeight > i.clientHeight || t.preventDefault());
+    }, this.handleMinHeight = () => {
+      this.minHeight && u(this, "minHeight", "prop");
+    }, this.handleOutsideScroll = t => {
+      this.open && (t.composedPath().includes(this.hostElement) || (this.open = !1));
+    }, this.handlePlatformScroll = () => {
+      this.open && (this.open = !1);
     }, this.handlePopoverToggleEvent = t => {
       n(this, [ "popoverStateChanged", "tctPopoverStateChanged" ], {
         open: "open" === t.newState
@@ -558,26 +586,26 @@ const g = class {
           i.style.setProperty("--comp-pop-bottom", `${e}px`);
         }
         // Wait for one paint to prevent layout thrashing
-                await l(), this.containerElement && i.style.setProperty("--comp-pop-opacity", "1");
+                await c(), this.containerElement && i.style.setProperty("--comp-pop-opacity", "1");
       }
     }, this.setPopoverAPICSSProperties = async () => {
       var t, i, o;
       const {controlElement: e, containerElement: s, currentDirection: n, isModule: r, align: a} = this;
       if (!s) return;
-      const {top: h, bottom: p, left: c, right: d} = null !== (i = null === (t = null == e ? void 0 : e.getBoundingClientRect) || void 0 === t ? void 0 : t.call(e)) && void 0 !== i ? i : {
+      const {top: h, bottom: p, left: l, right: d} = null !== (i = null === (t = null == e ? void 0 : e.getBoundingClientRect) || void 0 === t ? void 0 : t.call(e)) && void 0 !== i ? i : {
         top: 0,
         bottom: 0,
         left: 0,
         right: 0
-      }, m = c, v = (null === (o = null === window || void 0 === window ? void 0 : window.visualViewport) || void 0 === o ? void 0 : o.width) - d, f = u(e), w = f ? 0 : window.scrollX, g = f ? 0 : window.scrollY;
-      s.style.setProperty("--comp-pop-position", f ? "fixed" : "absolute"), "right" === a ? (s.style.setProperty("--comp-pop-right", v - w + "px"), 
-      s.style.setProperty("--comp-pop-left", "unset")) : (s.style.setProperty("--comp-pop-left", `${m + w}px`), 
+      }, u = l, b = (null === (o = null === window || void 0 === window ? void 0 : window.visualViewport) || void 0 === o ? void 0 : o.width) - d, f = m(e), w = f ? 0 : window.scrollX, g = f ? 0 : window.scrollY;
+      s.style.setProperty("--comp-pop-position", f ? "fixed" : "absolute"), "right" === a ? (s.style.setProperty("--comp-pop-right", b - w + "px"), 
+      s.style.setProperty("--comp-pop-left", "unset")) : (s.style.setProperty("--comp-pop-left", `${u + w}px`), 
       s.style.setProperty("--comp-pop-right", "unset")), this.block && s.style.setProperty("--comp-pop-width", `${(null == e ? void 0 : e.offsetWidth) || 0}px`);
-      const k = r && b(this.hostElement);
-      "up" === n && (r && !k ? s.style.setProperty("--comp-pop-bottom", window.innerHeight - h + "px") : s.style.setProperty("--comp-pop-bottom", window.innerHeight - h - g + "px")), 
+      const k = r && v(this.hostElement);
+      "up" === n && (r && !k ? s.style.setProperty("--comp-pop-top", `${h}px`) : s.style.setProperty("--comp-pop-top", `${h + g}px`)), 
       "down" === n && (r && !k ? s.style.setProperty("--comp-pop-top", `${p}px`) : s.style.setProperty("--comp-pop-top", `${p + g}px`)), 
       // Wait for one paint to prevent layout thrashing
-      await l(), this.containerElement && s.style.setProperty("--comp-pop-opacity", "1");
+      await c(), this.containerElement && s.style.setProperty("--comp-pop-opacity", "1");
     }, this.viewPortChanged = () => {
       this.open && this.determinePopDirection();
     }, this.viewPortOrientationChanged = () => {
@@ -599,7 +627,7 @@ const g = class {
   componentDidLoad() {
     var t;
     this.handleMinHeight(), this.supportsPopoverAPI && (null === (t = this.containerElement) || void 0 === t || t.addEventListener("toggle", this.handlePopoverToggleEvent)), 
-    this.open && this.determinePopDirection();
+    this.open && (this.addViewportListeners(), this.determinePopDirection());
   }
   // #endregion
   // #region Listeners
@@ -640,7 +668,7 @@ const g = class {
       if (!this.containerElement) return;
       if (this.open) return;
       this.currentDirection = void 0, this.animationState = "idle", "legacy" !== this.mode && this.supportsPopoverAPI ? null === (i = this.containerElement) || void 0 === i || i.hidePopover() : this.show = !1, 
-      await l(), this.clearCSSProperties();
+      await c(), this.clearCSSProperties();
     }
   }
   // #endregion
@@ -669,13 +697,21 @@ const g = class {
     return isNaN(t) ? void 0 : t;
   }
   addViewportListeners() {
-    var t;
-    window.addEventListener("resize", this.viewPortOrientationChanged), null === visualViewport || void 0 === visualViewport || visualViewport.addEventListener("resize", this.viewPortChanged), 
-    b(this.hostElement) && !v() && window.addEventListener("scroll", this.viewPortChanged, {
+    var t, i, o, e, s, n, r, a, h, p, l;
+    window.addEventListener("resize", this.viewPortOrientationChanged), null === (i = null === (t = window.visualViewport) || void 0 === t ? void 0 : t.addEventListener) || void 0 === i || i.call(t, "resize", this.viewPortChanged), 
+    v(this.hostElement) && !b() && window.addEventListener("scroll", this.viewPortChanged, {
+      passive: !0,
+      capture: !0
+    }), null === (s = null === (e = null === (o = window.screen) || void 0 === o ? void 0 : o.orientation) || void 0 === e ? void 0 : e.addEventListener) || void 0 === s || s.call(e, "orientationchange", this.viewPortOrientationChanged), 
+    window.addEventListener("orientationchange", this.viewPortOrientationChanged), b() || window.addEventListener("scroll", this.handleOutsideScroll, {
       passive: !0,
       capture: !0
-    }), null === (t = null === screen || void 0 === screen ? void 0 : screen.orientation) || void 0 === t || t.addEventListener("orientationchange", this.viewPortOrientationChanged), 
-    window.addEventListener("orientationchange", this.viewPortOrientationChanged);
+    }), null === (n = this.containerElement) || void 0 === n || n.addEventListener("wheel", this.handleInsideScroll, {
+      passive: !1
+    }), null === (r = this.containerElement) || void 0 === r || r.addEventListener("touchmove", this.handleInsideScroll, {
+      passive: !1
+    }), null === (a = this.platformScrollUnsubscribe) || void 0 === a || a.call(this), 
+    this.platformScrollUnsubscribe = null !== (l = null === (p = null === (h = window.TectonElements) || void 0 === h ? void 0 : h.platformScrollChanged) || void 0 === p ? void 0 : p.call(h, this.handlePlatformScroll)) && void 0 !== l ? l : null;
   }
   clearCSSProperties() {
     this.containerElement && (this.containerElement.style.removeProperty("--comp-pop-max-height"), 
@@ -685,47 +721,55 @@ const g = class {
     this.containerElement.style.removeProperty("--comp-pop-position"));
   }
   async determinePopDirection() {
-    var t, i, o;
-    const {containerElement: e, controlElement: s, providedDirection: n, displayBuffer: r} = this;
-    if (e && (e.style.maxHeight = null), await l(), !this.containerElement) return;
-    const {isModule: a} = this, {top: h, bottom: p} = null !== (i = null === (t = null == s ? void 0 : s.getBoundingClientRect) || void 0 === t ? void 0 : t.call(s)) && void 0 !== i ? i : {
+    var t, i, o, e;
+    const {containerElement: s, controlElement: n, providedDirection: r, displayBuffer: a} = this;
+    if (s && (s.style.maxHeight = null), await c(), !this.containerElement) return;
+    const {isModule: h} = this, {top: p, bottom: l} = null !== (i = null === (t = null == n ? void 0 : n.getBoundingClientRect) || void 0 === t ? void 0 : t.call(n)) && void 0 !== i ? i : {
       top: 0,
       bottom: 0
     };
-    let c, d, m;
-    const u = a && b(this.hostElement);
-    if (a && !u) {
-      const {outletOffset: t = 0, innerHeight: i = window.innerHeight, top: e = 0, bottom: s = 0} = (null === (o = window.Tecton) || void 0 === o ? void 0 : o.platformDimensions) || {}, n = window.innerHeight - p, a = i - s - (t + p - e);
-      d = (t > 0 ? h : h + t - e) - r, m = n < a ? n - r : a - r;
-    } else c = window.innerHeight, d = h - r, m = c - p - r;
-    const v = d > m ? "up" : "down", f = !(null == e ? void 0 : e.style.getPropertyValue("--comp-pop-max-height")) || this.orientationChanged;
+    let d, u, m;
+    const b = h && v(this.hostElement);
+    if (h && !b) {
+      const {outletOffset: t = 0, innerHeight: i = window.innerHeight, top: e = 0, bottom: s = 0} = (null === (o = window.Tecton) || void 0 === o ? void 0 : o.platformDimensions) || {}, n = window.innerHeight - l, r = i - s - (t + l - e);
+      u = (t > 0 ? p : p + t - e) - a, m = n < r ? n - a : r - a;
+    } else {
+      const {height: t = window.innerHeight, offsetTop: i = 0} = null !== (e = window.visualViewport) && void 0 !== e ? e : {};
+      d = t, u = p - i - a, m = i + d - l - a;
+    }
+    const f = u > m ? "up" : "down", w = !(null == s ? void 0 : s.style.getPropertyValue("--comp-pop-max-height")) || this.orientationChanged;
     // We do not want to update the max height once the popover is open unless the page orientation shifts (resize or mobile use cases)
         // we do not want to constantly update the max-height after an orientation change, so we switch this back to false
     this.orientationChanged = !1;
-    switch (this.currentDirection || n || v) {
+    switch (this.currentDirection || r || f) {
      case "up":
-      if (f && e) {
-        const t = this.validatedMaxHeight || d, i = Math.min(d, t);
-        e.style.setProperty("--comp-pop-max-height", `${i}px`);
+      if (w && s) {
+        const t = this.validatedMaxHeight || u, i = Math.min(u, t);
+        s.style.setProperty("--comp-pop-max-height", `${i}px`);
       }
       this.setDirectionAndShow("up");
       break;
 
      case "down":
-      if (f && e) {
+      if (w && s) {
         const t = this.validatedMaxHeight || m, i = Math.min(m, t);
-        e.style.setProperty("--comp-pop-max-height", `${i}px`);
+        s.style.setProperty("--comp-pop-max-height", `${i}px`);
       }
       this.setDirectionAndShow("down");
     }
   }
   removeViewportListeners() {
-    var t;
-    window.removeEventListener("resize", this.viewPortOrientationChanged), null === visualViewport || void 0 === visualViewport || visualViewport.removeEventListener("resize", this.viewPortChanged), 
+    var t, i, o, e, s, n, r, a;
+    window.removeEventListener("resize", this.viewPortOrientationChanged), null === (i = null === (t = window.visualViewport) || void 0 === t ? void 0 : t.removeEventListener) || void 0 === i || i.call(t, "resize", this.viewPortChanged), 
     window.removeEventListener("scroll", this.viewPortChanged, {
       capture: !0
-    }), null === (t = null === screen || void 0 === screen ? void 0 : screen.orientation) || void 0 === t || t.removeEventListener("orientationchange", this.viewPortOrientationChanged), 
-    window.removeEventListener("orientationchange", this.viewPortOrientationChanged);
+    }), null === (s = null === (e = null === (o = window.screen) || void 0 === o ? void 0 : o.orientation) || void 0 === e ? void 0 : e.removeEventListener) || void 0 === s || s.call(e, "orientationchange", this.viewPortOrientationChanged), 
+    window.removeEventListener("orientationchange", this.viewPortOrientationChanged), 
+    window.removeEventListener("scroll", this.handleOutsideScroll, {
+      capture: !0
+    }), null === (n = this.containerElement) || void 0 === n || n.removeEventListener("wheel", this.handleInsideScroll), 
+    null === (r = this.containerElement) || void 0 === r || r.removeEventListener("touchmove", this.handleInsideScroll), 
+    null === (a = this.platformScrollUnsubscribe) || void 0 === a || a.call(this), this.platformScrollUnsubscribe = null;
   }
   setDirectionAndShow(t) {
     var i;
@@ -739,21 +783,21 @@ const g = class {
   // #region Render Methods
   render() {
     const t = [ "container", this.currentDirection, this.align ];
-    return v() && t.push("mobile"), this.show && t.push("show"), this.block && t.push("block"), 
+    return b() && t.push("mobile"), this.show && t.push("show"), this.block && t.push("block"), 
     "legacy" === this.mode && t.push("legacy"), "opening" === this.animationState && t.push("animating-open"), 
     "closing" === this.animationState && t.push("animating-close"), e("div", {
-      key: "4fe0c06793144eb83fe53cfc568af81226f78345",
+      key: "f608766723c6ae6737181318b5baf8b52ed7fc0f",
       ref: t => this.containerElement = t,
       class: t.join(" "),
       "test-id": "outerContainer",
       tabIndex: -1,
       popover: "manual"
     }, e("div", {
-      key: "ed5d7c9f5efba8b129d580e68ab6692849332cf4",
+      key: "477f1a209cf4abc984a82324d0c6fc07ede82160",
       ref: t => this.contentElement = t,
       class: "content"
     }, e("slot", {
-      key: "4c5d5b9682014b2e94b153ca33a3e0c4dd58d6bb"
+      key: "5b48ff13907b952a2cdcffc1b6e271e4982c78ad"
     })));
   }
   get hostElement() {
@@ -771,6 +815,6 @@ const g = class {
   }
 };
 
-g.style = '*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}.legacy.container{display:none}.legacy.show{display:block;z-index:var(--tct-popover-z-index, 50)}@keyframes popoverOpen{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}@keyframes popoverClose{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0.95)}}:popover-open,.show{position:var(--comp-pop-position, absolute);margin:0;padding:var(--tct-popover-padding, 0);overflow:auto;background:var(--tct-popover-background, var(--app-white, #ffffff));backdrop-filter:var(--tct-popover-backdrop-filter, none);color:var(--tct-popover-font-color, inherit);min-width:var(--tct-popover-min-width, 135px);width:var(--tct-popover-width, auto);margin-block:var(--tct-popover-margin-block, 0);box-shadow:var(--tct-popover-box-shadow, var(--app-shadow-3, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)));border-width:var(--tct-popover-border-width, 0);border-style:solid;border-color:var(--tct-popover-border-color, transparent);border-radius:var(--tct-popover-border-radius, 0);max-height:var(--comp-pop-max-height);left:var(--comp-pop-left);opacity:var(--comp-pop-opacity, 0);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}:popover-open.animating-open,.show.animating-open{animation-name:popoverOpen;animation-duration:var(--tct-popover-open-animation-duration, var(--t-tween-time-in-1, 150ms));animation-timing-function:var(--tct-popover-open-animation-timing-function, ease-out);animation-fill-mode:var(--tct-popover-open-animation-fill-mode, forwards)}:popover-open.animating-close,.show.animating-close{animation-name:popoverClose;animation-duration:var(--tct-popover-close-animation-duration, var(--t-tween-time-out-1, 100ms));animation-timing-function:var(--tct-popover-close-animation-timing-function, ease-in);animation-fill-mode:var(--tct-popover-close-animation-fill-mode, forwards)}:popover-open.block,.show.block{right:unset;width:var(--comp-pop-width);min-width:var(--tct-popover-min-width, unset)}:popover-open.left,.show.left{left:var(--comp-pop-left);right:unset}:popover-open.right,.show.right{right:var(--comp-pop-right);left:unset}:popover-open.down,.show.down{top:var(--tct-popover-top, var(--comp-pop-top));bottom:unset}:popover-open.up,.show.up{top:unset;bottom:var(--comp-pop-bottom)}:popover-open.down.left:not(.mobile),.show.down.left:not(.mobile){transform-origin:top left}:popover-open.down.right:not(.mobile),.show.down.right:not(.mobile){transform-origin:top right}:popover-open.up.left:not(.mobile),.show.up.left:not(.mobile){transform-origin:bottom left}:popover-open.up.right:not(.mobile),.show.up.right:not(.mobile){transform-origin:bottom right}:popover-open.mobile.down,.show.mobile.down{transform-origin:center top}:popover-open.mobile.up,.show.mobile.up{transform-origin:center bottom}:popover-open::-webkit-scrollbar,.show::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}:popover-open::-webkit-scrollbar-thumb,.show::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}:popover-open::-webkit-scrollbar-track,.show::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}click-elsewhere{position:relative;display:block}';
+g.style = '*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}.legacy.container{display:none}.legacy.show{display:block;z-index:var(--tct-popover-z-index, 50)}@keyframes popoverOpen{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}@keyframes popoverClose{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0.95)}}:popover-open,.show{position:var(--comp-pop-position, absolute);margin:0;padding:var(--tct-popover-padding, 0);overflow:auto;overscroll-behavior:contain;background:var(--tct-popover-background, var(--app-white, #ffffff));backdrop-filter:var(--tct-popover-backdrop-filter, none);color:var(--tct-popover-font-color, inherit);min-width:var(--tct-popover-min-width, 135px);width:var(--tct-popover-width, auto);margin-block:var(--tct-popover-margin-block, 0);box-shadow:var(--tct-popover-box-shadow, var(--app-shadow-3, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)));border-width:var(--tct-popover-border-width, 0);border-style:solid;border-color:var(--tct-popover-border-color, transparent);border-radius:var(--tct-popover-border-radius, 0);max-height:var(--comp-pop-max-height);left:var(--comp-pop-left);opacity:var(--comp-pop-opacity, 0);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}:popover-open.animating-open,.show.animating-open{animation-name:popoverOpen;animation-duration:var(--tct-popover-open-animation-duration, var(--t-tween-time-in-1, 150ms));animation-timing-function:var(--tct-popover-open-animation-timing-function, ease-out);animation-fill-mode:var(--tct-popover-open-animation-fill-mode, forwards)}:popover-open.animating-close,.show.animating-close{animation-name:popoverClose;animation-duration:var(--tct-popover-close-animation-duration, var(--t-tween-time-out-1, 100ms));animation-timing-function:var(--tct-popover-close-animation-timing-function, ease-in);animation-fill-mode:var(--tct-popover-close-animation-fill-mode, forwards)}: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:var(--comp-pop-top);bottom:unset;translate:0 calc(-100% - var(--app-scale-2x, 10px))}:popover-open.down.left:not(.mobile),.show.down.left:not(.mobile){transform-origin:top left}:popover-open.down.right:not(.mobile),.show.down.right:not(.mobile){transform-origin:top right}:popover-open.up.left:not(.mobile),.show.up.left:not(.mobile){transform-origin:bottom left}:popover-open.up.right:not(.mobile),.show.up.right:not(.mobile){transform-origin:bottom right}:popover-open.mobile.down,.show.mobile.down{transform-origin:center top}:popover-open.mobile.up,.show.mobile.up{transform-origin:center bottom}:popover-open::-webkit-scrollbar,.show::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}:popover-open::-webkit-scrollbar-thumb,.show::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}:popover-open::-webkit-scrollbar-track,.show::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}click-elsewhere{position:relative;display:block}';
 
 export { f as click_elsewhere, w as q2_option_list, g as q2_popover }

package/dist/q2-tecton-elements/{dataSample-Dm1zpQNi.js → dataSample-CP_VKNqt.js}

@@ -1,4 +1,4 @@
-import { v as t, aH as i, aD as n, g as e, a1 as r, aI as a, aJ as s, aK as o, aL as l, aM as u, F as c, aN as h, aO as f, E as x, aP as d, o as v, aQ as b, aR as y, m as A, aS as g, aT as m, aU as C, aV as p, aW as w, _ as M, aX as L, aY as k, d as T, aZ as G, a_ as V, a$ as S, b0 as D, b1 as I, i as N, B, b2 as z, b3 as O, b4 as P, b5 as Z, b6 as F, b7 as E, ai as W, z as _, b8 as R, b9 as U, ba as j, bb as X, k as Y, bc as $, bd as K, be as q, U as H, O as J, bf as Q, bg as tt, V as it, bh as nt, bi as et, bj as rt, bk as at, bl as st, a4 as ot, bm as lt, r as ut, ar as ct, bn as ht, bo as ft, h as xt, bp as dt, R as vt, y as bt, bq as yt } from "./charting-DOZct-UB.js";
+import { v as t, aJ as i, aF as n, g as e, a1 as r, aK as a, aL as s, aM as o, aN as l, aO as u, F as c, aP as h, aQ as f, E as x, aR as d, o as v, aS as b, aT as y, m as A, aU as g, aV as m, aW as C, aX as p, aY as w, _ as M, aZ as L, a_ as k, d as T, a$ as G, b0 as V, b1 as S, b2 as D, b3 as N, i as I, B, b4 as z, b5 as F, b6 as P, b7 as O, b8 as Z, b9 as E, ak as W, z as _, ba as R, bb as U, bc as X, bd as j, k as Y, be as $, bf as K, bg as q, U as J, O as Q, bh as H, bi as tt, V as it, bj as nt, bk as et, bl as rt, bm as at, bn as st, a4 as ot, bo as lt, r as ut, at as ct, bp as ht, bq as ft, h as xt, br as dt, R as vt, y as bt, bs as yt } from "./charting-DFXJklqs.js";
 
 /**
  * @class
@@ -753,7 +753,7 @@ function axisModelCreator(i, n, e, r) {
         G(t, r.get(a + "Axis")), G(t, this.getDefaultOption()), t.type = getAxisType(t), 
         n && S(t, e, n);
       }, AxisModel.prototype.optionUpdated = function() {
-        "category" === this.option.type && (this.__ordinalMeta = I.createByAxisModel(this));
+        "category" === this.option.type && (this.__ordinalMeta = N.createByAxisModel(this));
       }, 
       /**
        * Should not be called before all of 'getInitailData' finished.
@@ -801,7 +801,7 @@ function canCalculateAffineTransform(t) {
   return "interval" === t.type || "time" === t.type;
 }
 
-var It = /** @class */ function(t) {
+var Nt = /** @class */ function(t) {
   function Cartesian2D() {
     var i = null !== t && t.apply(this, arguments) || this;
     return i.type = "cartesian2d", i.dimensions = Dt, i;
@@ -817,7 +817,7 @@ var It = /** @class */ function(t) {
       if (s && o) {
         // Accelerate data to point calculation on the special large time series data.
         var l = (a[0] - r[0]) / s, u = (a[1] - r[1]) / o, c = r[0] - n[0] * l, h = r[1] - e[0] * u, f = this._transform = [ l, 0, 0, u, c, h ];
-        this._invTransform = N([], f);
+        this._invTransform = I([], f);
       }
     }
   }, 
@@ -864,7 +864,7 @@ var It = /** @class */ function(t) {
     var i = this.getAxis("x").getGlobalExtent(), n = this.getAxis("y").getGlobalExtent(), e = Math.min(i[0], i[1]) - t, r = Math.min(n[0], n[1]) - t, a = Math.max(i[0], i[1]) - e + t, s = Math.max(n[0], n[1]) - r + t;
     return new B(e, r, a, s);
   }, Cartesian2D;
-}(St), Nt = /** @class */ function(t) {
+}(St), It = /** @class */ function(t) {
   function Axis2D(i, n, e, r, a) {
     var s = t.call(this, i, n, e) || this;
     /**
@@ -930,7 +930,7 @@ var zt = /** @class */ function() {
         // PENDING. Should we find the axis that both set interval, min, max and align to this one?
                 a.length && (n || (n = a.pop(), K(n.scale, n.model)), t(a, (function(t) {
           !function(t, i, n) {
-            var e = O.prototype, r = e.getTicks.call(n), a = e.getTicks.call(n, !0), s = r.length - 1, o = e.getInterval.call(n), l = P(t, i), u = l.extent, c = l.fixMin, h = l.fixMax;
+            var e = F.prototype, r = e.getTicks.call(n), a = e.getTicks.call(n, !0), s = r.length - 1, o = e.getInterval.call(n), l = P(t, i), u = l.extent, c = l.fixMin, h = l.fixMax;
             // NOTE: There is a precondition for log scale  here:
             // In log scale we store _interval and _extent of exponent value.
             // So if we use the method of InternalScale to set/get these data.
@@ -953,10 +953,10 @@ var zt = /** @class */ function() {
             // User set min, max, divide to get new interval
             d = (b - v) / s; else if (c) 
             // User set min, expand extent on the other side
-            for (b = u[0] + d * s; b < u[1] && isFinite(b) && isFinite(u[1]); ) d = Z(d), b = u[0] + d * s; else if (h) for (
+            for (b = u[0] + d * s; b < u[1] && isFinite(b) && isFinite(u[1]); ) d = O(d), b = u[0] + d * s; else if (h) for (
             // User set max, expand extent on the other side
-            v = u[1] - d * s; v > u[0] && isFinite(v) && isFinite(u[0]); ) d = Z(d), v = u[1] - d * s; else {
-              t.getTicks().length - 1 > s && (d = Z(d));
+            v = u[1] - d * s; v > u[0] && isFinite(v) && isFinite(u[0]); ) d = O(d), v = u[1] - d * s; else {
+              t.getTicks().length - 1 > s && (d = O(d));
               var y = d * s;
               b = Math.ceil(u[1] / d) * d, 
               // Not change the result that crossing zero.
@@ -987,7 +987,7 @@ var zt = /** @class */ function() {
    * Resize the grid
    */
   Grid.prototype.resize = function(i, n, e) {
-    var r = i.getBoxLayoutParams(), a = !e && i.get("containLabel"), s = F(r, {
+    var r = i.getBoxLayoutParams(), a = !e && i.get("containLabel"), s = Z(r, {
       width: n.getWidth(),
       height: n.getHeight()
     });
@@ -1106,7 +1106,7 @@ var zt = /** @class */ function() {
           "left" !== r && "right" !== r && (
           // Default left of Y
           r = s.left ? "right" : "left"), s[r] = !0;
-          var u = new Nt(t, R(n), [ 0, 0 ], n.get("type"), r), c = "category" === u.type;
+          var u = new It(t, R(n), [ 0, 0 ], n.get("type"), r), c = "category" === u.type;
           u.onBand = c && n.get("boundaryGap"), u.inverse = n.get("inverse"), 
           // Inject axis into axisModel
           n.axis = u, 
@@ -1123,7 +1123,7 @@ var zt = /** @class */ function() {
     // Create cartesian2d
     t(o.x, (function(n, e) {
       t(o.y, (function(t, a) {
-        var s = "x" + e + "y" + a, o = new It(s);
+        var s = "x" + e + "y" + a, o = new Nt(s);
         o.master = r, o.model = i, r._coordsMap[s] = o, r._coordsList.push(o), o.addAxis(n), 
         o.addAxis(t);
       }));
@@ -1134,7 +1134,7 @@ var zt = /** @class */ function() {
    */
   Grid.prototype._updateScale = function(i, n) {
     function unionExtent(i, n) {
-      t(X(i, n.dim), (function(t) {
+      t(j(i, n.dim), (function(t) {
         n.scale.unionExtentFromData(i, t);
       }));
     }
@@ -1146,7 +1146,7 @@ var zt = /** @class */ function() {
       }
     })), i.eachSeries((function(t) {
       if (U(t)) {
-        var i = j(t), e = i.xAxisModel, r = i.yAxisModel;
+        var i = X(t), e = i.xAxisModel, r = i.yAxisModel;
         if (!isAxisUsedInTheGrid(e, n) || !isAxisUsedInTheGrid(r, n)) return;
         var a = this.getCartesian(e.componentIndex, r.componentIndex), s = t.getData(), o = a.getAxis("x"), l = a.getAxis("y");
         unionExtent(s, o), unionExtent(s, l);
@@ -1177,7 +1177,7 @@ var zt = /** @class */ function() {
     // Inject the coordinateSystems into seriesModel
     t.eachSeries((function(t) {
       if (U(t)) {
-        var i = j(t), n = i.xAxisModel, e = i.yAxisModel, r = n.getCoordSysModel().coordinateSystem;
+        var i = X(t), n = i.xAxisModel, e = i.yAxisModel, r = n.getCoordSysModel().coordinateSystem;
         t.coordinateSystem = r.getCartesian(n.componentIndex, e.componentIndex);
       }
     })), n;
@@ -1222,9 +1222,9 @@ function canOnZeroToAxis(t) {
   return t && "category" !== t.type && "time" !== t.type && q(t);
 }
 
-var Ot = A();
+var Ft = A();
 
-var Pt = [ "axisLine", "axisTickLabel", "axisName" ], Zt = [ "splitArea", "splitLine", "minorSplitLine" ], Ft = /** @class */ function(i) {
+var Pt = [ "axisLine", "axisTickLabel", "axisName" ], Ot = [ "splitArea", "splitLine", "minorSplitLine" ], Zt = /** @class */ function(i) {
   function CartesianAxisView() {
     var t = null !== i && i.apply(this, arguments) || this;
     return t.type = CartesianAxisView.type, t.axisPointerClass = "CartesianAxisPointer", 
@@ -1235,8 +1235,8 @@ var Pt = [ "axisLine", "axisTickLabel", "axisName" ], Zt = [ "splitArea", "split
    */  return M(CartesianAxisView, i), CartesianAxisView.prototype.render = function(n, e, r, a) {
     this.group.removeAll();
     var s = this._axisGroup;
-    if (this._axisGroup = new J, this.group.add(this._axisGroup), n.get("show")) {
-      var o = n.getCoordSysModel(), l = Q(o, n), u = new tt(n, it({
+    if (this._axisGroup = new Q, this.group.add(this._axisGroup), n.get("show")) {
+      var o = n.getCoordSysModel(), l = H(o, n), u = new tt(n, it({
         handleAutoShown: function(t) {
           for (var i = o.coordinateSystem.getCartesians(), e = 0; e < i.length; e++) if ($(i[e].getOtherAxis(n.axis).scale)) 
           // Still show axis tick or axisLine if other axis is value / log
@@ -1245,13 +1245,13 @@ var Pt = [ "axisLine", "axisTickLabel", "axisName" ], Zt = [ "splitArea", "split
                     return !1;
         }
       }, l));
-      t(Pt, u.add, u), this._axisGroup.add(u.getGroup()), t(Zt, (function(t) {
+      t(Pt, u.add, u), this._axisGroup.add(u.getGroup()), t(Ot, (function(t) {
         n.get([ t, "show" ]) && Et[t](this, this._axisGroup, n, o);
       }), this), a && "changeAxisOrder" === a.type && a.isInitSort || nt(s, this._axisGroup, n), 
       i.prototype.render.call(this, n, e, r, a);
     }
   }, CartesianAxisView.prototype.remove = function() {
-    Ot(this).splitAreaColors = null;
+    Ft(this).splitAreaColors = null;
   }, CartesianAxisView.type = "cartesianAxis", CartesianAxisView;
 }(et), Et = {
   splitLine: function(t, i, n, e) {
@@ -1319,7 +1319,7 @@ var Pt = [ "axisLine", "axisTickLabel", "axisName" ], Zt = [ "splitArea", "split
         if (c.length) {
           // For Making appropriate splitArea animation, the color and anid
           // should be corresponding to previous one if possible.
-          var h = l.length, f = Ot(t).splitAreaColors, d = n(), v = 0;
+          var h = l.length, f = Ft(t).splitAreaColors, d = n(), v = 0;
           if (f) for (var b = 0; b < c.length; b++) {
             var y = f.get(c[b].tickValue);
             if (null != y) {
@@ -1333,7 +1333,7 @@ var Pt = [ "axisLine", "axisTickLabel", "axisName" ], Zt = [ "splitArea", "split
             a.isHorizontal() ? (C = A, p = u.y, w = m - C, M = u.height, A = C + w) : (C = u.x, 
             p = A, w = u.width, A = p + (M = m - p));
             var L = c[b - 1].tickValue;
-            null != L && d.set(L, v), i.add(new H({
+            null != L && d.set(L, v), i.add(new J({
               anid: null != L ? "area_" + L : null,
               shape: {
                 x: C,
@@ -1348,7 +1348,7 @@ var Pt = [ "axisLine", "axisTickLabel", "axisName" ], Zt = [ "splitArea", "split
               silent: !0
             })), v = (v + 1) % h;
           }
-          Ot(t).splitAreaColors = d;
+          Ft(t).splitAreaColors = d;
         }
       }
     }(t, i, e, r);
@@ -1359,19 +1359,19 @@ var Pt = [ "axisLine", "axisTickLabel", "axisName" ], Zt = [ "splitArea", "split
     return i.type = CartesianXAxisView.type, i;
   }
   return M(CartesianXAxisView, t), CartesianXAxisView.type = "xAxis", CartesianXAxisView;
-}(Ft), _t = /** @class */ function(t) {
+}(Zt), _t = /** @class */ function(t) {
   function CartesianYAxisView() {
     var i = null !== t && t.apply(this, arguments) || this;
     return i.type = Wt.type, i;
   }
   return M(CartesianYAxisView, t), CartesianYAxisView.type = "yAxis", CartesianYAxisView;
-}(Ft), Rt = /** @class */ function(t) {
+}(Zt), Rt = /** @class */ function(t) {
   function GridView() {
     var i = null !== t && t.apply(this, arguments) || this;
     return i.type = "grid", i;
   }
   return M(GridView, t), GridView.prototype.render = function(t, i) {
-    this.group.removeAll(), t.get("show") && this.group.add(new H({
+    this.group.removeAll(), t.get("show") && this.group.add(new J({
       shape: t.coordinateSystem.getRect(),
       style: T({
         fill: t.get("backgroundColor")
@@ -1399,7 +1399,7 @@ function install$1(t) {
   ot(install$2), ot(lt);
 }
 
-var jt = /** @class */ function(t) {
+var Xt = /** @class */ function(t) {
   function TitleModel() {
     var i = null !== t && t.apply(this, arguments) || this;
     return i.type = TitleModel.type, i.layoutMode = {
@@ -1432,7 +1432,7 @@ var jt = /** @class */ function(t) {
       color: "#6E7079"
     }
   }, TitleModel;
-}(L), Xt = /** @class */ function(t) {
+}(L), jt = /** @class */ function(t) {
   function TitleView() {
     var i = null !== t && t.apply(this, arguments) || this;
     return i.type = TitleView.type, i;
@@ -1469,7 +1469,7 @@ var jt = /** @class */ function(t) {
       // If no subText, but add subTextEl, there will be an empty line.
       var v = e.getBoundingRect(), b = t.getBoxLayoutParams();
       b.width = v.width, b.height = v.height;
-      var y = F(b, {
+      var y = Z(b, {
         width: n.getWidth(),
         height: n.getHeight()
       }, t.get("padding"));
@@ -1493,7 +1493,7 @@ var jt = /** @class */ function(t) {
       v = e.getBoundingRect();
       var g = y.margin, m = t.getItemStyle([ "color", "opacity" ]);
       m.fill = t.get("backgroundColor");
-      var C = new H({
+      var C = new J({
         shape: {
           x: v.x - g[3],
           y: v.y - g[0],
@@ -1512,7 +1512,7 @@ var jt = /** @class */ function(t) {
 
 // View
 function install(t) {
-  t.registerComponentModel(jt), t.registerComponentView(Xt);
+  t.registerComponentModel(Xt), t.registerComponentView(jt);
 }
 
 /**
@@ -1590,7 +1590,7 @@ function createGridClipPath(t, i, n, r, a) {
   u = Math.ceil(u), o !== Math.floor(o) && (o = Math.floor(o), 
   // if no extra 1px on `width`, it will still be clipped since `x` is floored
   u++);
-  var f = new H({
+  var f = new J({
     shape: {
       x: o,
       y: l,