@kong-ui-public/dashboard-renderer 1.2.1 → 1.2.2

package/dist/dashboard-renderer.es.js

@@ -3,17 +3,17 @@ var Ye = (u) => {
   throw TypeError(u);
 };
 var At = (u, e, t) => e in u ? Nt(u, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : u[e] = t;
-var Xe = (u, e, t) => At(u, typeof e != "symbol" ? e + "" : e, t), qe = (u, e, t) => e.has(u) || Ye("Cannot " + t);
-var v = (u, e, t) => (qe(u, e, "read from private field"), t ? t.call(u) : e.get(u)), H = (u, e, t) => e.has(u) ? Ye("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(u) : e.set(u, t), k = (u, e, t, i) => (qe(u, e, "write to private field"), i ? i.call(u, t) : e.set(u, t), t), O = (u, e, t) => (qe(u, e, "access private method"), t);
-var ge = (u, e, t, i) => ({
+var Xe = (u, e, t) => At(u, typeof e != "symbol" ? e + "" : e, t), Pe = (u, e, t) => e.has(u) || Ye("Cannot " + t);
+var _ = (u, e, t) => (Pe(u, e, "read from private field"), t ? t.call(u) : e.get(u)), H = (u, e, t) => e.has(u) ? Ye("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(u) : e.set(u, t), k = (u, e, t, i) => (Pe(u, e, "write to private field"), i ? i.call(u, t) : e.set(u, t), t), O = (u, e, t) => (Pe(u, e, "access private method"), t);
+var me = (u, e, t, i) => ({
   set _(s) {
     k(u, e, s, t);
   },
   get _() {
-    return v(u, e, i);
+    return _(u, e, i);
   }
 });
-import { ref as $, watchEffect as Ht, inject as oe, provide as Ot, defineComponent as F, onUnmounted as Fe, computed as N, watch as De, resolveComponent as se, unref as S, openBlock as D, createBlock as A, withCtx as M, createTextVNode as pe, toDisplayString as J, renderSlot as Oe, createCommentVNode as V, useCssVars as Le, createElementVNode as le, createVNode as Z, mergeProps as lt, createSlots as ht, createElementBlock as q, normalizeProps as Lt, guardReactiveProps as Mt, defineAsyncComponent as It, nextTick as dt, normalizeClass as ut, resolveDynamicComponent as ct, onMounted as ft, Fragment as gt, renderList as pt, normalizeStyle as je } from "vue";
+import { ref as F, watchEffect as Ht, inject as le, provide as Ot, defineComponent as U, onUnmounted as $e, computed as N, watch as Fe, resolveComponent as re, unref as D, openBlock as R, createBlock as A, withCtx as M, createTextVNode as ye, toDisplayString as Z, renderSlot as He, createCommentVNode as V, useCssVars as Oe, createElementVNode as de, createVNode as ee, mergeProps as lt, createSlots as ht, createElementBlock as B, normalizeProps as Lt, guardReactiveProps as Mt, defineAsyncComponent as It, nextTick as dt, normalizeClass as ut, resolveDynamicComponent as ct, onMounted as ft, Fragment as gt, renderList as pt, normalizeStyle as je } from "vue";
 import { stripUnknownFilters as Pt, Timeframe as qt, TimePeriods as mt, TIMEFRAME_LOOKUP as Bt, formatTime as Qe, msToGranularity as $t } from "@kong-ui-public/analytics-utilities";
 import { SimpleChart as Ft, AnalyticsChart as Ut, TopNTable as Gt, CsvExportModal as Wt } from "@kong-ui-public/analytics-chart";
 import Kt from "swrv";
@@ -28,8 +28,8 @@ const Zt = (u) => {
   return u ? !!// TODO: revisit: currently only the first check ever matters?
   ((e = Object.keys(u)) != null && e.length || (t = u.data) != null && t.length || (s = (i = u.data) == null ? void 0 : i.data) != null && s.length || !((r = u.data) != null && r.data) && typeof u.data == "object" && Object.keys(u == null ? void 0 : u.data).length) : !1;
 };
-function ei(u = $({}), e, t, i = Zt) {
-  const s = $(
+function ei(u = F({}), e, t, i = Zt) {
+  const s = F(
     "PENDING"
     /* PENDING */
   );
@@ -93,9 +93,9 @@ function oi() {
     // Translation component <i18n-t>
   };
 }
-const Ue = 170, re = "analytics-query-provider", Je = "{entity-id}", ai = "{cp-id}", li = "{timeframe}", hi = 30 * 1e3;
+const Ue = 170, ne = "analytics-query-provider", Je = "{entity-id}", ai = "{cp-id}", li = "{timeframe}", hi = 30 * 1e3;
 function di() {
-  const u = oe(re);
+  const u = le(ne);
   return {
     evaluateFeatureFlag: (t, i) => u ? u.evaluateFeatureFlagFn(t, i) : i
   };
@@ -115,8 +115,8 @@ var _t = { exports: {} };
   function r(d, l, a, h, f) {
     if (typeof a != "function")
       throw new TypeError("The listener must be a function");
-    var g = new s(a, h || d, f), m = t ? t + l : l;
-    return d._events[m] ? d._events[m].fn ? d._events[m] = [d._events[m], g] : d._events[m].push(g) : (d._events[m] = g, d._eventsCount++), d;
+    var p = new s(a, h || d, f), m = t ? t + l : l;
+    return d._events[m] ? d._events[m].fn ? d._events[m] = [d._events[m], p] : d._events[m].push(p) : (d._events[m] = p, d._eventsCount++), d;
   }
   function o(d, l) {
     --d._eventsCount === 0 ? d._events = new i() : delete d._events[l];
@@ -134,54 +134,54 @@ var _t = { exports: {} };
     var a = t ? t + l : l, h = this._events[a];
     if (!h) return [];
     if (h.fn) return [h.fn];
-    for (var f = 0, g = h.length, m = new Array(g); f < g; f++)
+    for (var f = 0, p = h.length, m = new Array(p); f < p; f++)
       m[f] = h[f].fn;
     return m;
   }, n.prototype.listenerCount = function(l) {
     var a = t ? t + l : l, h = this._events[a];
     return h ? h.fn ? 1 : h.length : 0;
-  }, n.prototype.emit = function(l, a, h, f, g, m) {
+  }, n.prototype.emit = function(l, a, h, f, p, m) {
     var y = t ? t + l : l;
     if (!this._events[y]) return !1;
-    var p = this._events[y], C = arguments.length, E, x;
-    if (p.fn) {
-      switch (p.once && this.removeListener(l, p.fn, void 0, !0), C) {
+    var g = this._events[y], C = arguments.length, S, v;
+    if (g.fn) {
+      switch (g.once && this.removeListener(l, g.fn, void 0, !0), C) {
         case 1:
-          return p.fn.call(p.context), !0;
+          return g.fn.call(g.context), !0;
         case 2:
-          return p.fn.call(p.context, a), !0;
+          return g.fn.call(g.context, a), !0;
         case 3:
-          return p.fn.call(p.context, a, h), !0;
+          return g.fn.call(g.context, a, h), !0;
         case 4:
-          return p.fn.call(p.context, a, h, f), !0;
+          return g.fn.call(g.context, a, h, f), !0;
         case 5:
-          return p.fn.call(p.context, a, h, f, g), !0;
+          return g.fn.call(g.context, a, h, f, p), !0;
         case 6:
-          return p.fn.call(p.context, a, h, f, g, m), !0;
+          return g.fn.call(g.context, a, h, f, p, m), !0;
       }
-      for (x = 1, E = new Array(C - 1); x < C; x++)
-        E[x - 1] = arguments[x];
-      p.fn.apply(p.context, E);
+      for (v = 1, S = new Array(C - 1); v < C; v++)
+        S[v - 1] = arguments[v];
+      g.fn.apply(g.context, S);
     } else {
-      var R = p.length, T;
-      for (x = 0; x < R; x++)
-        switch (p[x].once && this.removeListener(l, p[x].fn, void 0, !0), C) {
+      var z = g.length, x;
+      for (v = 0; v < z; v++)
+        switch (g[v].once && this.removeListener(l, g[v].fn, void 0, !0), C) {
           case 1:
-            p[x].fn.call(p[x].context);
+            g[v].fn.call(g[v].context);
             break;
           case 2:
-            p[x].fn.call(p[x].context, a);
+            g[v].fn.call(g[v].context, a);
             break;
           case 3:
-            p[x].fn.call(p[x].context, a, h);
+            g[v].fn.call(g[v].context, a, h);
             break;
           case 4:
-            p[x].fn.call(p[x].context, a, h, f);
+            g[v].fn.call(g[v].context, a, h, f);
             break;
           default:
-            if (!E) for (T = 1, E = new Array(C - 1); T < C; T++)
-              E[T - 1] = arguments[T];
-            p[x].fn.apply(p[x].context, E);
+            if (!S) for (x = 1, S = new Array(C - 1); x < C; x++)
+              S[x - 1] = arguments[x];
+            g[v].fn.apply(g[v].context, S);
         }
     }
     return !0;
@@ -190,17 +190,17 @@ var _t = { exports: {} };
   }, n.prototype.once = function(l, a, h) {
     return r(this, l, a, h, !0);
   }, n.prototype.removeListener = function(l, a, h, f) {
-    var g = t ? t + l : l;
-    if (!this._events[g]) return this;
+    var p = t ? t + l : l;
+    if (!this._events[p]) return this;
     if (!a)
-      return o(this, g), this;
-    var m = this._events[g];
+      return o(this, p), this;
+    var m = this._events[p];
     if (m.fn)
-      m.fn === a && (!f || m.once) && (!h || m.context === h) && o(this, g);
+      m.fn === a && (!f || m.once) && (!h || m.context === h) && o(this, p);
     else {
-      for (var y = 0, p = [], C = m.length; y < C; y++)
-        (m[y].fn !== a || f && !m[y].once || h && m[y].context !== h) && p.push(m[y]);
-      p.length ? this._events[g] = p.length === 1 ? p[0] : p : o(this, g);
+      for (var y = 0, g = [], C = m.length; y < C; y++)
+        (m[y].fn !== a || f && !m[y].once || h && m[y].context !== h) && g.push(m[y]);
+      g.length ? this._events[p] = g.length === 1 ? g[0] : g : o(this, p);
     }
     return this;
   }, n.prototype.removeAllListeners = function(l) {
@@ -236,10 +236,10 @@ function pi(u, e) {
     if (typeof t != "number" || Math.sign(t) !== 1)
       throw new TypeError(`Expected \`milliseconds\` to be a positive number, got \`${t}\``);
     if (e.signal) {
-      const { signal: g } = e;
-      g.aborted && h(et(g)), n = () => {
-        h(et(g));
-      }, g.addEventListener("abort", n, { once: !0 });
+      const { signal: p } = e;
+      p.aborted && h(et(p)), n = () => {
+        h(et(p));
+      }, p.addEventListener("abort", n, { once: !0 });
     }
     if (t === Number.POSITIVE_INFINITY) {
       u.then(a, h);
@@ -250,8 +250,8 @@ function pi(u, e) {
       if (i) {
         try {
           a(i());
-        } catch (g) {
-          h(g);
+        } catch (p) {
+          h(p);
         }
         return;
       }
@@ -259,8 +259,8 @@ function pi(u, e) {
     }, t), (async () => {
       try {
         a(await u);
-      } catch (g) {
-        h(g);
+      } catch (p) {
+        h(p);
       }
     })();
   }).finally(() => {
@@ -279,10 +279,10 @@ function mi(u, e, t) {
   }
   return i;
 }
-var U;
+var G;
 class yi {
   constructor() {
-    H(this, U, []);
+    H(this, G, []);
   }
   enqueue(e, t) {
     t = {
@@ -294,56 +294,56 @@ class yi {
       id: t.id,
       run: e
     };
-    if (this.size === 0 || v(this, U)[this.size - 1].priority >= t.priority) {
-      v(this, U).push(i);
+    if (this.size === 0 || _(this, G)[this.size - 1].priority >= t.priority) {
+      _(this, G).push(i);
       return;
     }
-    const s = mi(v(this, U), i, (r, o) => o.priority - r.priority);
-    v(this, U).splice(s, 0, i);
+    const s = mi(_(this, G), i, (r, o) => o.priority - r.priority);
+    _(this, G).splice(s, 0, i);
   }
   setPriority(e, t) {
-    const i = v(this, U).findIndex((r) => r.id === e);
+    const i = _(this, G).findIndex((r) => r.id === e);
     if (i === -1)
       throw new ReferenceError(`No promise function with the id "${e}" exists in the queue.`);
-    const [s] = v(this, U).splice(i, 1);
+    const [s] = _(this, G).splice(i, 1);
     this.enqueue(s.run, { priority: t, id: e });
   }
   dequeue() {
-    const e = v(this, U).shift();
+    const e = _(this, G).shift();
     return e == null ? void 0 : e.run;
   }
   filter(e) {
-    return v(this, U).filter((t) => t.priority === e.priority).map((t) => t.run);
+    return _(this, G).filter((t) => t.priority === e.priority).map((t) => t.run);
   }
   get size() {
-    return v(this, U).length;
+    return _(this, G).length;
   }
 }
-U = new WeakMap();
-var he, de, ie, ve, ue, _e, G, ce, P, be, W, fe, Q, we, He, z, wt, Et, xt, Ct, Rt, Ce, Be, $e, Re, Tt, Te;
+G = new WeakMap();
+var ue, ce, se, be, fe, we, W, ge, P, Ee, K, pe, J, xe, Ae, T, wt, Et, xt, Ct, Rt, Ce, qe, Be, Re, Tt, Te;
 class vi extends fi {
   // TODO: The `throwOnTimeout` option should affect the return types of `add()` and `addAll()`
   constructor(t) {
     var i, s;
     super();
-    H(this, z);
-    H(this, he);
-    H(this, de);
-    H(this, ie, 0);
-    H(this, ve);
+    H(this, T);
     H(this, ue);
-    H(this, _e, 0);
-    H(this, G);
     H(this, ce);
-    H(this, P);
+    H(this, se, 0);
     H(this, be);
-    H(this, W, 0);
-    // The `!` is needed because of https://github.com/microsoft/TypeScript/issues/32194
     H(this, fe);
-    H(this, Q);
-    H(this, we);
+    H(this, we, 0);
+    H(this, W);
+    H(this, ge);
+    H(this, P);
+    H(this, Ee);
+    H(this, K, 0);
+    // The `!` is needed because of https://github.com/microsoft/TypeScript/issues/32194
+    H(this, pe);
+    H(this, J);
+    H(this, xe);
     // Use to assign a unique identifier to a promise function, if not explicitly specified
-    H(this, He, 1n);
+    H(this, Ae, 1n);
     /**
         Per-operation timeout in milliseconds. Operations fulfill once `timeout` elapses if they haven't already.
     
@@ -362,15 +362,15 @@ class vi extends fi {
       throw new TypeError(`Expected \`intervalCap\` to be a number from 1 and up, got \`${((i = t.intervalCap) == null ? void 0 : i.toString()) ?? ""}\` (${typeof t.intervalCap})`);
     if (t.interval === void 0 || !(Number.isFinite(t.interval) && t.interval >= 0))
       throw new TypeError(`Expected \`interval\` to be a finite number >= 0, got \`${((s = t.interval) == null ? void 0 : s.toString()) ?? ""}\` (${typeof t.interval})`);
-    k(this, he, t.carryoverConcurrencyCount), k(this, de, t.intervalCap === Number.POSITIVE_INFINITY || t.interval === 0), k(this, ve, t.intervalCap), k(this, ue, t.interval), k(this, P, new t.queueClass()), k(this, be, t.queueClass), this.concurrency = t.concurrency, this.timeout = t.timeout, k(this, we, t.throwOnTimeout === !0), k(this, Q, t.autoStart === !1);
+    k(this, ue, t.carryoverConcurrencyCount), k(this, ce, t.intervalCap === Number.POSITIVE_INFINITY || t.interval === 0), k(this, be, t.intervalCap), k(this, fe, t.interval), k(this, P, new t.queueClass()), k(this, Ee, t.queueClass), this.concurrency = t.concurrency, this.timeout = t.timeout, k(this, xe, t.throwOnTimeout === !0), k(this, J, t.autoStart === !1);
   }
   get concurrency() {
-    return v(this, fe);
+    return _(this, pe);
   }
   set concurrency(t) {
     if (!(typeof t == "number" && t >= 1))
       throw new TypeError(`Expected \`concurrency\` to be a number from 1 and up, got \`${t}\` (${typeof t})`);
-    k(this, fe, t), O(this, z, Re).call(this);
+    k(this, pe, t), O(this, T, Re).call(this);
   }
   /**
       Updates the priority of a promise function by its id, affecting its execution order. Requires a defined concurrency limit to take effect.
@@ -409,21 +409,21 @@ class vi extends fi {
       Here, the promise function with `id: '🦀'` executes last.
       */
   setPriority(t, i) {
-    v(this, P).setPriority(t, i);
+    _(this, P).setPriority(t, i);
   }
   async add(t, i = {}) {
-    return i.id ?? (i.id = (ge(this, He)._++).toString()), i = {
+    return i.id ?? (i.id = (me(this, Ae)._++).toString()), i = {
       timeout: this.timeout,
-      throwOnTimeout: v(this, we),
+      throwOnTimeout: _(this, xe),
       ...i
     }, new Promise((s, r) => {
-      v(this, P).enqueue(async () => {
+      _(this, P).enqueue(async () => {
         var o;
-        ge(this, W)._++, ge(this, ie)._++;
+        me(this, K)._++, me(this, se)._++;
         try {
           (o = i.signal) == null || o.throwIfAborted();
           let n = t({ signal: i.signal });
-          i.timeout && (n = pi(Promise.resolve(n), { milliseconds: i.timeout })), i.signal && (n = Promise.race([n, O(this, z, Tt).call(this, i.signal)]));
+          i.timeout && (n = pi(Promise.resolve(n), { milliseconds: i.timeout })), i.signal && (n = Promise.race([n, O(this, T, Tt).call(this, i.signal)]));
           const d = await n;
           s(d), this.emit("completed", d);
         } catch (n) {
@@ -433,9 +433,9 @@ class vi extends fi {
           }
           r(n), this.emit("error", n);
         } finally {
-          O(this, z, xt).call(this);
+          O(this, T, xt).call(this);
         }
-      }, i), this.emit("add"), O(this, z, Ce).call(this);
+      }, i), this.emit("add"), O(this, T, Ce).call(this);
     });
   }
   async addAll(t, i) {
@@ -445,19 +445,19 @@ class vi extends fi {
   Start (or resume) executing enqueued tasks within concurrency limit. No need to call this if queue is not paused (via `options.autoStart = false` or by `.pause()` method.)
   */
   start() {
-    return v(this, Q) ? (k(this, Q, !1), O(this, z, Re).call(this), this) : this;
+    return _(this, J) ? (k(this, J, !1), O(this, T, Re).call(this), this) : this;
   }
   /**
   Put queue execution on hold.
   */
   pause() {
-    k(this, Q, !0);
+    k(this, J, !0);
   }
   /**
   Clear the queue.
   */
   clear() {
-    k(this, P, new (v(this, be))());
+    k(this, P, new (_(this, Ee))());
   }
   /**
       Can be called multiple times. Useful if you for example add additional items at a later time.
@@ -465,7 +465,7 @@ class vi extends fi {
       @returns A promise that settles when the queue becomes empty.
       */
   async onEmpty() {
-    v(this, P).size !== 0 && await O(this, z, Te).call(this, "empty");
+    _(this, P).size !== 0 && await O(this, T, Te).call(this, "empty");
   }
   /**
       @returns A promise that settles when the queue size is less than the given limit: `queue.size < limit`.
@@ -475,7 +475,7 @@ class vi extends fi {
       Note that this only limits the number of items waiting to start. There could still be up to `concurrency` jobs already running that this call does not include in its calculation.
       */
   async onSizeLessThan(t) {
-    v(this, P).size < t || await O(this, z, Te).call(this, "next", () => v(this, P).size < t);
+    _(this, P).size < t || await O(this, T, Te).call(this, "next", () => _(this, P).size < t);
   }
   /**
       The difference with `.onEmpty` is that `.onIdle` guarantees that all work from the queue has finished. `.onEmpty` merely signals that the queue is empty, but it could mean that some promises haven't completed yet.
@@ -483,13 +483,13 @@ class vi extends fi {
       @returns A promise that settles when the queue becomes empty, and all promises have completed; `queue.size === 0 && queue.pending === 0`.
       */
   async onIdle() {
-    v(this, W) === 0 && v(this, P).size === 0 || await O(this, z, Te).call(this, "idle");
+    _(this, K) === 0 && _(this, P).size === 0 || await O(this, T, Te).call(this, "idle");
   }
   /**
   Size of the queue, the number of queued items waiting to run.
   */
   get size() {
-    return v(this, P).size;
+    return _(this, P).size;
   }
   /**
       Size of the queue, filtered by the given options.
@@ -497,63 +497,63 @@ class vi extends fi {
       For example, this can be used to find the number of items remaining in the queue with a specific priority level.
       */
   sizeBy(t) {
-    return v(this, P).filter(t).length;
+    return _(this, P).filter(t).length;
   }
   /**
   Number of running items (no longer in the queue).
   */
   get pending() {
-    return v(this, W);
+    return _(this, K);
   }
   /**
   Whether the queue is currently paused.
   */
   get isPaused() {
-    return v(this, Q);
+    return _(this, J);
   }
 }
-he = new WeakMap(), de = new WeakMap(), ie = new WeakMap(), ve = new WeakMap(), ue = new WeakMap(), _e = new WeakMap(), G = new WeakMap(), ce = new WeakMap(), P = new WeakMap(), be = new WeakMap(), W = new WeakMap(), fe = new WeakMap(), Q = new WeakMap(), we = new WeakMap(), He = new WeakMap(), z = new WeakSet(), wt = function() {
-  return v(this, de) || v(this, ie) < v(this, ve);
+ue = new WeakMap(), ce = new WeakMap(), se = new WeakMap(), be = new WeakMap(), fe = new WeakMap(), we = new WeakMap(), W = new WeakMap(), ge = new WeakMap(), P = new WeakMap(), Ee = new WeakMap(), K = new WeakMap(), pe = new WeakMap(), J = new WeakMap(), xe = new WeakMap(), Ae = new WeakMap(), T = new WeakSet(), wt = function() {
+  return _(this, ce) || _(this, se) < _(this, be);
 }, Et = function() {
-  return v(this, W) < v(this, fe);
+  return _(this, K) < _(this, pe);
 }, xt = function() {
-  ge(this, W)._--, O(this, z, Ce).call(this), this.emit("next");
+  me(this, K)._--, O(this, T, Ce).call(this), this.emit("next");
 }, Ct = function() {
-  O(this, z, $e).call(this), O(this, z, Be).call(this), k(this, ce, void 0);
+  O(this, T, Be).call(this), O(this, T, qe).call(this), k(this, ge, void 0);
 }, Rt = function() {
   const t = Date.now();
-  if (v(this, G) === void 0) {
-    const i = v(this, _e) - t;
+  if (_(this, W) === void 0) {
+    const i = _(this, we) - t;
     if (i < 0)
-      k(this, ie, v(this, he) ? v(this, W) : 0);
+      k(this, se, _(this, ue) ? _(this, K) : 0);
     else
-      return v(this, ce) === void 0 && k(this, ce, setTimeout(() => {
-        O(this, z, Ct).call(this);
+      return _(this, ge) === void 0 && k(this, ge, setTimeout(() => {
+        O(this, T, Ct).call(this);
       }, i)), !0;
   }
   return !1;
 }, Ce = function() {
-  if (v(this, P).size === 0)
-    return v(this, G) && clearInterval(v(this, G)), k(this, G, void 0), this.emit("empty"), v(this, W) === 0 && this.emit("idle"), !1;
-  if (!v(this, Q)) {
-    const t = !v(this, z, Rt);
-    if (v(this, z, wt) && v(this, z, Et)) {
-      const i = v(this, P).dequeue();
-      return i ? (this.emit("active"), i(), t && O(this, z, Be).call(this), !0) : !1;
+  if (_(this, P).size === 0)
+    return _(this, W) && clearInterval(_(this, W)), k(this, W, void 0), this.emit("empty"), _(this, K) === 0 && this.emit("idle"), !1;
+  if (!_(this, J)) {
+    const t = !_(this, T, Rt);
+    if (_(this, T, wt) && _(this, T, Et)) {
+      const i = _(this, P).dequeue();
+      return i ? (this.emit("active"), i(), t && O(this, T, qe).call(this), !0) : !1;
     }
   }
   return !1;
+}, qe = function() {
+  _(this, ce) || _(this, W) !== void 0 || (k(this, W, setInterval(() => {
+    O(this, T, Be).call(this);
+  }, _(this, fe))), k(this, we, Date.now() + _(this, fe)));
 }, Be = function() {
-  v(this, de) || v(this, G) !== void 0 || (k(this, G, setInterval(() => {
-    O(this, z, $e).call(this);
-  }, v(this, ue))), k(this, _e, Date.now() + v(this, ue)));
-}, $e = function() {
-  v(this, ie) === 0 && v(this, W) === 0 && v(this, G) && (clearInterval(v(this, G)), k(this, G, void 0)), k(this, ie, v(this, he) ? v(this, W) : 0), O(this, z, Re).call(this);
+  _(this, se) === 0 && _(this, K) === 0 && _(this, W) && (clearInterval(_(this, W)), k(this, W, void 0)), k(this, se, _(this, ue) ? _(this, K) : 0), O(this, T, Re).call(this);
 }, /**
 Executes all queued functions until it reaches the limit.
 */
 Re = function() {
-  for (; O(this, z, Ce).call(this); )
+  for (; O(this, T, Ce).call(this); )
     ;
 }, Tt = async function(t) {
   return new Promise((i, s) => {
@@ -570,7 +570,7 @@ Re = function() {
   });
 };
 const _i = () => {
-  const u = yt(), e = oe(re);
+  const u = yt(), e = le(ne);
   if (!e)
     return;
   if (e.queryFnOverride) {
@@ -587,12 +587,12 @@ const _i = () => {
     queryFnOverride: !0,
     queryFn: (s, r) => t.add(() => e.queryFn(s, r), { throwOnTimeout: !0 })
   };
-  Ot(re, i);
-}, ee = {
+  Ot(ne, i);
+}, te = {
   useI18n: oi,
   useEvaluateFeatureFlag: di,
   useRequestQueue: _i
-}, Ge = /* @__PURE__ */ F({
+}, Ge = /* @__PURE__ */ U({
   __name: "QueryDataProvider",
   props: {
     context: {},
@@ -602,73 +602,73 @@ const _i = () => {
   },
   emits: ["chart-data", "queryComplete"],
   setup(u, { emit: e }) {
-    const t = u, i = e, { i18n: s } = ee.useI18n(), r = oe(re), o = () => t.queryReady && r ? JSON.stringify([t.query, t.context, t.refreshCounter]) : null, n = new AbortController();
-    Fe(() => {
+    const t = u, i = e, { i18n: s } = te.useI18n(), r = le(ne), o = () => t.queryReady && r ? JSON.stringify([t.query, t.context, t.refreshCounter]) : null, n = new AbortController();
+    $e(() => {
       n.abort();
     });
-    const d = (C, E, x) => {
-      const R = [];
-      return E && R.push(...E), R.push(...Pt(C, x)), R;
+    const d = (C, S, v) => {
+      const z = [];
+      return S && z.push(...S), z.push(...Pt(C, v)), z;
     }, { data: l, error: a, isValidating: h } = Kt(o, async () => {
-      var C, E, x, R;
+      var C, S, v, z;
       try {
         let {
-          datasource: T,
-          ...ne
+          datasource: x,
+          ...q
         } = t.query;
-        T || (T = "basic");
-        const Ee = d(T, t.query.filters, t.context.filters);
-        let K = t.query.time_range;
-        K ? K.tz || (K = {
-          ...K,
+        x || (x = "basic");
+        const oe = d(x, t.query.filters, t.context.filters);
+        let Q = t.query.time_range;
+        Q ? Q.tz || (Q = {
+          ...Q,
           tz: t.context.tz
-        }) : K = {
+        }) : Q = {
           ...t.context.timeSpec,
           tz: t.context.tz
         };
-        const xe = {
-          datasource: T,
+        const ae = {
+          datasource: x,
           query: {
-            ...ne,
-            time_range: K,
-            filters: Ee
+            ...q,
+            time_range: Q,
+            filters: oe
           }
         };
-        return r == null ? void 0 : r.queryFn(xe, n);
-      } catch (T) {
-        m.value = ((E = (C = T == null ? void 0 : T.response) == null ? void 0 : C.data) == null ? void 0 : E.message) === "Range not allowed for this tier" ? s.t("queryDataProvider.timeRangeExceeded") : ((R = (x = T == null ? void 0 : T.response) == null ? void 0 : x.data) == null ? void 0 : R.message) || (T == null ? void 0 : T.message);
+        return r == null ? void 0 : r.queryFn(ae, n);
+      } catch (x) {
+        m.value = ((S = (C = x == null ? void 0 : x.response) == null ? void 0 : C.data) == null ? void 0 : S.message) === "Range not allowed for this tier" ? s.t("queryDataProvider.timeRangeExceeded") : ((z = (v = x == null ? void 0 : x.response) == null ? void 0 : v.data) == null ? void 0 : z.message) || (x == null ? void 0 : x.message);
       } finally {
         i("queryComplete");
       }
     }, {
       refreshInterval: t.context.refreshInterval,
       revalidateOnFocus: !1
-    }), { state: f, swrvState: g } = ei(l, a, h), m = $(null), y = N(() => f.value === g.ERROR || !!m.value), p = N(() => !t.queryReady || f.value === g.PENDING);
-    return De(l, (C) => {
+    }), { state: f, swrvState: p } = ei(l, a, h), m = F(null), y = N(() => f.value === p.ERROR || !!m.value), g = N(() => !t.queryReady || f.value === p.PENDING);
+    return Fe(l, (C) => {
       C && i("chart-data", C);
-    }), (C, E) => {
-      const x = se("KSkeleton"), R = se("KEmptyState");
-      return p.value || !S(l) && !y.value ? (D(), A(x, {
+    }), (C, S) => {
+      const v = re("KSkeleton"), z = re("KEmptyState");
+      return g.value || !D(l) && !y.value ? (R(), A(v, {
         key: 0,
         class: "chart-skeleton",
         type: "table"
-      })) : y.value ? (D(), A(R, {
+      })) : y.value ? (R(), A(z, {
         key: 1,
         "action-button-visible": !1,
         "data-testid": "chart-empty-state",
         "icon-variant": "error"
       }, {
         default: M(() => [
-          pe(J(m.value), 1)
+          ye(Z(m.value), 1)
         ]),
         _: 1
-      })) : S(l) ? Oe(C.$slots, "default", {
+      })) : D(l) ? He(C.$slots, "default", {
         key: 2,
-        data: S(l)
+        data: D(l)
       }) : V("", !0);
     };
   }
-}), bi = { class: "analytics-chart" }, wi = /* @__PURE__ */ F({
+}), bi = { class: "analytics-chart" }, wi = /* @__PURE__ */ U({
   __name: "SimpleChartRenderer",
   props: {
     query: {},
@@ -679,19 +679,19 @@ const _i = () => {
     refreshCounter: {}
   },
   setup(u) {
-    Le((t) => ({
+    Oe((t) => ({
       c40c0e86: `${t.height}px`
     }));
     const e = u;
-    return (t, i) => (D(), A(Ge, {
+    return (t, i) => (R(), A(Ge, {
       context: t.context,
       query: t.query,
       "query-ready": t.queryReady,
       "refresh-counter": t.refreshCounter
     }, {
       default: M(({ data: s }) => [
-        le("div", bi, [
-          Z(S(Ft), {
+        de("div", bi, [
+          ee(D(Ft), {
             "chart-data": s,
             "chart-options": e.chartOptions,
             "synthetics-data-key": t.chartOptions.syntheticsDataKey
@@ -701,12 +701,12 @@ const _i = () => {
       _: 1
     }, 8, ["context", "query", "query-ready", "refresh-counter"]));
   }
-}), ae = (u, e) => {
+}), he = (u, e) => {
   const t = u.__vccOpts || u;
   for (const [i, s] of e)
     t[i] = s;
   return t;
-}, Ei = /* @__PURE__ */ ae(wi, [["__scopeId", "data-v-694cf637"]]), xi = { class: "analytics-chart" }, Ci = /* @__PURE__ */ F({
+}, Ei = /* @__PURE__ */ he(wi, [["__scopeId", "data-v-694cf637"]]), xi = { class: "analytics-chart" }, Ci = /* @__PURE__ */ U({
   __name: "BaseAnalyticsChartRenderer",
   props: {
     query: {},
@@ -719,7 +719,7 @@ const _i = () => {
   },
   emits: ["edit-tile", "chart-data"],
   setup(u, { emit: e }) {
-    const t = u, i = e, s = oe(re), { i18n: r } = ee.useI18n(), { evaluateFeatureFlag: o } = ee.useEvaluateFeatureFlag(), n = o("ma-3043-analytics-chart-kebab-menu", !1), d = N(() => ({
+    const t = u, i = e, s = le(ne), { i18n: r } = te.useI18n(), { evaluateFeatureFlag: o } = te.useEvaluateFeatureFlag(), n = o("ma-3043-analytics-chart-kebab-menu", !1), d = N(() => ({
       type: t.chartOptions.type,
       stacked: t.chartOptions.stacked ?? !1,
       chartDatasetColors: t.chartOptions.chartDatasetColors,
@@ -731,8 +731,8 @@ const _i = () => {
           metrics: t.query.metrics ?? [],
           dimensions: t.query.dimensions ?? [],
           time_range: t.query.time_range || t.context.timeSpec
-        }, g = ["advanced", "ai"].includes(t.query.datasource) ? t.query.datasource : "advanced";
-        return `${s.exploreBaseUrl()}?q=${JSON.stringify(f)}&d=${g}&c=${t.chartOptions.type}`;
+        }, p = ["advanced", "ai"].includes(t.query.datasource) ? t.query.datasource : "advanced";
+        return `${s.exploreBaseUrl()}?q=${JSON.stringify(f)}&d=${p}&c=${t.chartOptions.type}`;
       }
       return "";
     }), a = () => {
@@ -740,9 +740,9 @@ const _i = () => {
     }, h = (f) => {
       i("chart-data", f);
     };
-    return (f, g) => {
-      const m = se("KDropdownItem");
-      return D(), A(Ge, {
+    return (f, p) => {
+      const m = re("KDropdownItem");
+      return R(), A(Ge, {
         context: f.context,
         query: f.query,
         "query-ready": f.queryReady,
@@ -750,12 +750,12 @@ const _i = () => {
         onChartData: h
       }, {
         default: M(({ data: y }) => [
-          le("div", xi, [
-            Z(S(Ut), lt({
+          de("div", xi, [
+            ee(D(Ut), lt({
               "allow-csv-export": f.chartOptions.allowCsvExport,
               "chart-data": y,
               "chart-options": d.value,
-              "chart-title": !S(n) && f.chartOptions.chartTitle || "",
+              "chart-title": !D(n) && f.chartOptions.chartTitle || "",
               "go-to-explore": l.value,
               "legend-position": "bottom",
               "show-menu": f.context.editable,
@@ -765,9 +765,9 @@ const _i = () => {
               f.context.editable ? {
                 name: "menu-items",
                 fn: M(() => [
-                  Z(m, { onClick: a }, {
+                  ee(m, { onClick: a }, {
                     default: M(() => [
-                      pe(J(S(r).t("renderer.edit")), 1)
+                      ye(Z(D(r).t("renderer.edit")), 1)
                     ]),
                     _: 1
                   })
@@ -781,7 +781,7 @@ const _i = () => {
       }, 8, ["context", "query", "query-ready", "refresh-counter"]);
     };
   }
-}), We = /* @__PURE__ */ ae(Ci, [["__scopeId", "data-v-9bca4ef8"]]), tt = /* @__PURE__ */ F({
+}), We = /* @__PURE__ */ he(Ci, [["__scopeId", "data-v-9bca4ef8"]]), tt = /* @__PURE__ */ U({
   __name: "BarChartRenderer",
   props: {
     query: {},
@@ -792,7 +792,7 @@ const _i = () => {
     refreshCounter: {}
   },
   setup(u) {
-    return (e, t) => (D(), A(We, {
+    return (e, t) => (R(), A(We, {
       "chart-options": e.chartOptions,
       context: e.context,
       "extra-props": { showAnnotations: !1 },
@@ -802,7 +802,7 @@ const _i = () => {
       "refresh-counter": e.refreshCounter
     }, null, 8, ["chart-options", "context", "height", "query", "query-ready", "refresh-counter"]));
   }
-}), it = /* @__PURE__ */ F({
+}), it = /* @__PURE__ */ U({
   __name: "TimeseriesChartRenderer",
   props: {
     query: {},
@@ -813,7 +813,7 @@ const _i = () => {
     refreshCounter: {}
   },
   setup(u) {
-    return (e, t) => (D(), A(We, {
+    return (e, t) => (R(), A(We, {
       "chart-options": e.chartOptions,
       context: e.context,
       height: e.height,
@@ -822,7 +822,7 @@ const _i = () => {
       "refresh-counter": e.refreshCounter
     }, null, 8, ["chart-options", "context", "height", "query", "query-ready", "refresh-counter"]));
   }
-}), Ri = { class: "metric-card-tile-wrapper" }, Ti = /* @__PURE__ */ F({
+}), Ri = { class: "metric-card-tile-wrapper" }, Ti = /* @__PURE__ */ U({
   __name: "GoldenSignalsRenderer",
   props: {
     query: {},
@@ -833,12 +833,12 @@ const _i = () => {
     refreshCounter: {}
   },
   setup(u) {
-    Le((o) => ({
-      "926e3b48": S(i) ? "90%" : "100%",
-      "7be2893e": S(i) ? "auto" : "100%",
-      "0d55c162": S(i) ? "100%" : "none"
+    Oe((o) => ({
+      "926e3b48": D(i) ? "90%" : "100%",
+      "7be2893e": D(i) ? "auto" : "100%",
+      "0d55c162": D(i) ? "100%" : "none"
     }));
-    const e = u, { evaluateFeatureFlag: t } = ee.useEvaluateFeatureFlag(), i = t("ma-3043-analytics-chart-kebab-menu", !1), s = N(() => {
+    const e = u, { evaluateFeatureFlag: t } = te.useEvaluateFeatureFlag(), i = t("ma-3043-analytics-chart-kebab-menu", !1), s = N(() => {
       const o = e.context.timeSpec;
       if (o.type === "absolute")
         return new qt({
@@ -877,27 +877,27 @@ const _i = () => {
         refreshCounter: e.refreshCounter
       };
     });
-    return (o, n) => (D(), q("div", Ri, [
-      Z(S(Xt), Lt(Mt(r.value)), {
+    return (o, n) => (R(), B("div", Ri, [
+      ee(D(Xt), Lt(Mt(r.value)), {
         default: M(() => [
-          Z(S(jt))
+          ee(D(jt))
         ]),
         _: 1
       }, 16)
     ]));
   }
-}), Di = /* @__PURE__ */ ae(Ti, [["__scopeId", "data-v-0f571079"]]), st = "#6c7489", rt = "20px", Dt = "20px", zi = {
+}), Di = /* @__PURE__ */ he(Ti, [["__scopeId", "data-v-0f571079"]]), st = "#6c7489", rt = "20px", Dt = "20px", zi = {
   class: "fallback-entity-link",
   "data-testid": "entity-link-parent"
-}, nt = /* @__PURE__ */ F({
+}, nt = /* @__PURE__ */ U({
   __name: "FallbackEntityLink",
   props: {
     entityLinkData: {}
   },
   setup(u) {
-    return (e, t) => (D(), q("div", zi, J(e.entityLinkData.label), 1));
+    return (e, t) => (R(), B("div", zi, Z(e.entityLinkData.label), 1));
   }
-}), Si = /* @__PURE__ */ F({
+}), Si = /* @__PURE__ */ U({
   __name: "TopNTableRenderer",
   props: {
     query: {},
@@ -908,7 +908,7 @@ const _i = () => {
     refreshCounter: {}
   },
   setup(u) {
-    const e = u, { evaluateFeatureFlag: t } = ee.useEvaluateFeatureFlag(), i = t("ma-3043-analytics-chart-kebab-menu", !1), s = oe(re), r = It(async () => {
+    const e = u, { evaluateFeatureFlag: t } = te.useEvaluateFeatureFlag(), i = t("ma-3043-analytics-chart-kebab-menu", !1), s = le(ne), r = It(async () => {
       if (s != null && s.fetchComponent)
         try {
           return await s.fetchComponent("EntityLink");
@@ -926,23 +926,23 @@ const _i = () => {
           return e.chartOptions.entityLink.replace(Je, n.id);
       return "";
     };
-    return (n, d) => (D(), A(Ge, {
+    return (n, d) => (R(), A(Ge, {
       context: n.context,
       query: n.query,
       "query-ready": n.queryReady,
       "refresh-counter": n.refreshCounter
     }, {
       default: M(({ data: l }) => [
-        Z(S(Gt), {
+        ee(D(Gt), {
           data: l,
-          description: !S(i) && n.chartOptions.description || "",
+          description: !D(i) && n.chartOptions.description || "",
           "synthetics-data-key": n.chartOptions.syntheticsDataKey,
-          title: !S(i) && n.chartOptions.chartTitle || ""
+          title: !D(i) && n.chartOptions.chartTitle || ""
         }, ht({ _: 2 }, [
           e.chartOptions.entityLink ? {
             name: "name",
             fn: M(({ record: a }) => [
-              Z(S(r), {
+              ee(D(r), {
                 "entity-link-data": {
                   id: a.id,
                   label: a.name,
@@ -958,7 +958,7 @@ const _i = () => {
       _: 1
     }, 8, ["context", "query", "query-ready", "refresh-counter"]));
   }
-}), ki = /* @__PURE__ */ F({
+}), ki = /* @__PURE__ */ U({
   __name: "DoughnutChartRenderer",
   props: {
     query: {},
@@ -969,7 +969,7 @@ const _i = () => {
     refreshCounter: {}
   },
   setup(u) {
-    return (e, t) => (D(), A(We, {
+    return (e, t) => (R(), A(We, {
       "chart-options": e.chartOptions,
       context: e.context,
       height: e.height,
@@ -981,7 +981,7 @@ const _i = () => {
 }), Ni = ["data-testid"], Ai = {
   key: 0,
   class: "tile-header"
-}, Hi = ["data-testid"], Oi = ["data-testid"], Li = ["data-testid"], Mi = ["data-testid"], Ii = /* @__PURE__ */ F({
+}, Hi = ["data-testid"], Oi = ["data-testid"], Li = ["data-testid"], Mi = ["data-testid"], Ii = /* @__PURE__ */ U({
   __name: "DashboardTile",
   props: {
     definition: {},
@@ -993,29 +993,29 @@ const _i = () => {
   },
   emits: ["edit-tile", "remove-tile"],
   setup(u, { emit: e }) {
-    Le((w) => ({
-      "315496d0": `${w.height}px`
+    Oe((E) => ({
+      "315496d0": `${E.height}px`
     }));
-    const t = parseInt(Dt, 10), i = u, s = e, r = oe(re), { evaluateFeatureFlag: o } = ee.useEvaluateFeatureFlag(), { i18n: n } = ee.useI18n(), d = o("ma-3043-analytics-chart-kebab-menu", !1), l = $(), a = $(!1), h = $(), f = $(!1);
-    De(() => i.definition, async () => {
+    const t = parseInt(Dt, 10), i = u, s = e, r = le(ne), { evaluateFeatureFlag: o } = te.useEvaluateFeatureFlag(), { i18n: n } = te.useI18n(), d = o("ma-3043-analytics-chart-kebab-menu", !1), l = F(), a = F(!1), h = F(), f = F(!1);
+    Fe(() => i.definition, async () => {
       await dt(), h.value && (f.value = h.value.scrollWidth > h.value.clientWidth);
     }, { immediate: !0, deep: !0 });
-    const g = N(() => {
-      const w = [...i.context.filters, ...i.definition.query.filters ?? []], te = i.definition.query.dimensions ?? [];
-      if (w.some((L) => "dimension" in L && L.dimension === "portal" || "field" in L && L.field === "portal") || te.some((L) => L === "portal"))
+    const p = N(() => {
+      const E = [...i.context.filters, ...i.definition.query.filters ?? []], ie = i.definition.query.dimensions ?? [];
+      if (E.some((L) => "dimension" in L && L.dimension === "portal" || "field" in L && L.field === "portal") || ie.some((L) => L === "portal"))
         return "";
       if (r && r.exploreBaseUrl) {
         const L = {
-          filters: w,
+          filters: E,
           metrics: i.definition.query.metrics ?? [],
-          dimensions: te,
+          dimensions: ie,
           time_range: i.definition.query.time_range || i.context.timeSpec,
-          granularity: i.definition.query.granularity || T.value
-        }, Ie = ["advanced", "ai"].includes(i.definition.query.datasource) ? i.definition.query.datasource : "advanced";
-        return `${r.exploreBaseUrl()}?q=${JSON.stringify(L)}&d=${Ie}&c=${i.definition.chart.type}`;
+          granularity: i.definition.query.granularity || x.value
+        }, Me = ["advanced", "ai"].includes(i.definition.query.datasource) ? i.definition.query.datasource : "advanced";
+        return `${r.exploreBaseUrl()}?q=${JSON.stringify(L)}&d=${Me}&c=${i.definition.chart.type}`;
       }
       return "";
-    }), m = N(() => n.t("csvExport.defaultFilename")), y = N(() => p.value && (C.value || i.context.editable) || !!R.value), p = N(() => d && !["golden_signals", "top_n", "gauge"].includes(i.definition.chart.type)), C = N(() => !!g.value || "allowCsvExport" in i.definition.chart && i.definition.chart.allowCsvExport || i.context.editable), E = {
+    }), m = N(() => n.t("csvExport.defaultFilename")), y = N(() => g.value && (C.value || i.context.editable) || !!z.value), g = N(() => d && !["golden_signals", "top_n", "gauge"].includes(i.definition.chart.type)), C = N(() => !!p.value || "allowCsvExport" in i.definition.chart && i.definition.chart.allowCsvExport || i.context.editable), S = {
       timeseries_line: it,
       timeseries_bar: it,
       horizontal_bar: tt,
@@ -1025,10 +1025,10 @@ const _i = () => {
       golden_signals: Di,
       top_n: Si,
       slottable: void 0
-    }, x = N(() => {
-      const w = E[i.definition.chart.type];
-      return w && {
-        component: w,
+    }, v = N(() => {
+      const E = S[i.definition.chart.type];
+      return E && {
+        component: E,
         rendererProps: {
           query: i.definition.query,
           context: i.context,
@@ -1038,139 +1038,139 @@ const _i = () => {
           refreshCounter: i.refreshCounter
         }
       };
-    }), R = N(() => {
-      var te;
-      const w = (te = i.definition.query) == null ? void 0 : te.time_range;
-      if ((w == null ? void 0 : w.type) === "relative") {
-        const L = mt.get(Bt[w.time_range]);
-        return L ? L.display : (console.warn("Did not recognize the given relative time range:", w.time_range), w.time_range);
-      } else if ((w == null ? void 0 : w.type) === "absolute") {
-        const L = w.tz || "Etc/UTC";
-        return `${Qe(w.start, { short: !0, tz: L })} - ${Qe(w.end, { short: !0, tz: L })}`;
+    }), z = N(() => {
+      var ie;
+      const E = (ie = i.definition.query) == null ? void 0 : ie.time_range;
+      if ((E == null ? void 0 : E.type) === "relative") {
+        const L = mt.get(Bt[E.time_range]);
+        return L ? L.display : (console.warn("Did not recognize the given relative time range:", E.time_range), E.time_range);
+      } else if ((E == null ? void 0 : E.type) === "absolute") {
+        const L = E.tz || "Etc/UTC";
+        return `${Qe(E.start, { short: !0, tz: L })} - ${Qe(E.end, { short: !0, tz: L })}`;
       }
       return null;
-    }), T = N(() => l.value ? $t(l.value.meta.granularity_ms) : void 0), ne = () => {
+    }), x = N(() => l.value ? $t(l.value.meta.granularity_ms) : void 0), q = () => {
       s("edit-tile", i.definition);
-    }, Ee = () => {
+    }, oe = () => {
       s("remove-tile", i.definition);
-    }, K = (w) => {
-      l.value = w;
-    }, xe = (w) => {
-      a.value = w;
+    }, Q = (E) => {
+      l.value = E;
+    }, ae = (E) => {
+      a.value = E;
     }, St = () => {
-      xe(!0);
+      ae(!0);
     };
-    return (w, te) => {
-      const L = se("KTooltip"), Ie = se("KBadge"), Pe = se("KDropdownItem"), kt = se("KDropdown");
-      return D(), q("div", {
-        class: ut(["tile-boundary", { editable: w.context.editable }]),
-        "data-testid": `tile-${w.tileId}`
+    return (E, ie) => {
+      const L = re("KTooltip"), Me = re("KBadge"), Ie = re("KDropdownItem"), kt = re("KDropdown");
+      return R(), B("div", {
+        class: ut(["tile-boundary", { editable: E.context.editable }]),
+        "data-testid": `tile-${E.tileId}`
       }, [
-        S(d) && w.definition.chart.type !== "slottable" ? (D(), q("div", Ai, [
-          Z(L, {
+        D(d) && E.definition.chart.type !== "slottable" ? (R(), B("div", Ai, [
+          ee(L, {
             class: "title-tooltip",
             disabled: !f.value,
             "max-width": "500",
-            text: w.definition.chart.chartTitle
+            text: E.definition.chart.chartTitle
           }, {
             default: M(() => [
-              le("div", {
+              de("div", {
                 ref_key: "titleRef",
                 ref: h,
                 class: "title"
-              }, J(w.definition.chart.chartTitle), 513)
+              }, Z(E.definition.chart.chartTitle), 513)
             ]),
             _: 1
           }, 8, ["disabled", "text"]),
-          y.value ? (D(), q("div", {
+          y.value ? (R(), B("div", {
             key: 0,
             class: "tile-actions",
-            "data-testid": `tile-actions-${w.tileId}`
+            "data-testid": `tile-actions-${E.tileId}`
           }, [
-            R.value ? (D(), A(Ie, { key: 0 }, {
+            z.value ? (R(), A(Me, { key: 0 }, {
               default: M(() => [
-                pe(J(R.value), 1)
+                ye(Z(z.value), 1)
               ]),
               _: 1
             })) : V("", !0),
-            p.value && w.context.editable ? (D(), A(S(Qt), {
+            g.value && E.context.editable ? (R(), A(D(Qt), {
               key: 1,
               class: "edit-icon",
-              color: S(st),
-              "data-testid": `edit-tile-${w.tileId}`,
-              size: S(rt),
-              onClick: ne
+              color: D(st),
+              "data-testid": `edit-tile-${E.tileId}`,
+              size: D(rt),
+              onClick: q
             }, null, 8, ["color", "data-testid", "size"])) : V("", !0),
-            p.value && C.value ? (D(), A(kt, {
+            g.value && C.value ? (R(), A(kt, {
               key: 2,
               class: "dropdown",
-              "data-testid": `chart-action-menu-${w.tileId}`,
+              "data-testid": `chart-action-menu-${E.tileId}`,
               "kpop-attributes": { placement: "bottom-end" }
             }, {
               items: M(() => [
-                g.value ? (D(), A(Pe, {
+                p.value ? (R(), A(Ie, {
                   key: 0,
-                  "data-testid": `chart-jump-to-explore-${w.tileId}`,
-                  item: { label: S(n).t("jumpToExplore"), to: g.value }
+                  "data-testid": `chart-jump-to-explore-${E.tileId}`,
+                  item: { label: D(n).t("jumpToExplore"), to: p.value }
                 }, null, 8, ["data-testid", "item"])) : V("", !0),
-                "allowCsvExport" in w.definition.chart && w.definition.chart.allowCsvExport ? (D(), A(Pe, {
+                "allowCsvExport" in E.definition.chart && E.definition.chart.allowCsvExport ? (R(), A(Ie, {
                   key: 1,
                   class: "chart-export-button",
-                  "data-testid": `chart-csv-export-${w.tileId}`,
-                  onClick: te[0] || (te[0] = (Zi) => St())
+                  "data-testid": `chart-csv-export-${E.tileId}`,
+                  onClick: ie[0] || (ie[0] = (Zi) => St())
                 }, {
                   default: M(() => [
-                    le("span", {
+                    de("span", {
                       class: "chart-export-trigger",
-                      "data-testid": `csv-export-button-${w.tileId}`
-                    }, J(S(n).t("csvExport.exportAsCsv")), 9, Oi)
+                      "data-testid": `csv-export-button-${E.tileId}`
+                    }, Z(D(n).t("csvExport.exportAsCsv")), 9, Oi)
                   ]),
                   _: 1
                 }, 8, ["data-testid"])) : V("", !0),
-                w.context.editable ? (D(), A(Pe, {
+                E.context.editable ? (R(), A(Ie, {
                   key: 2,
-                  "data-testid": `remove-tile-${w.tileId}`,
-                  onClick: Ee
+                  "data-testid": `remove-tile-${E.tileId}`,
+                  onClick: oe
                 }, {
                   default: M(() => [
-                    pe(J(S(n).t("renderer.remove")), 1)
+                    ye(Z(D(n).t("renderer.remove")), 1)
                   ]),
                   _: 1
                 }, 8, ["data-testid"])) : V("", !0)
               ]),
               default: M(() => [
-                Z(S(Jt), {
+                ee(D(Jt), {
                   class: "kebab-action-menu",
-                  color: S(st),
-                  "data-testid": `kebab-action-menu-${w.tileId}`,
-                  size: S(rt)
+                  color: D(st),
+                  "data-testid": `kebab-action-menu-${E.tileId}`,
+                  size: D(rt)
                 }, null, 8, ["color", "data-testid", "size"])
               ]),
               _: 1
             }, 8, ["data-testid"])) : V("", !0)
-          ], 8, Hi)) : "description" in w.definition.chart ? (D(), q("div", {
+          ], 8, Hi)) : "description" in E.definition.chart ? (R(), B("div", {
             key: 1,
             class: "header-description",
-            "data-testid": `tile-description-${w.tileId}`
-          }, J(w.definition.chart.description), 9, Li)) : V("", !0),
-          a.value ? (D(), A(S(Wt), {
+            "data-testid": `tile-description-${E.tileId}`
+          }, Z(E.definition.chart.description), 9, Li)) : V("", !0),
+          a.value ? (R(), A(D(Wt), {
             key: 2,
             "chart-data": l.value,
-            "data-testid": `csv-export-modal-${w.tileId}`,
+            "data-testid": `csv-export-modal-${E.tileId}`,
             filename: m.value,
-            onToggleModal: xe
+            onToggleModal: ae
           }, null, 8, ["chart-data", "data-testid", "filename"])) : V("", !0)
         ])) : V("", !0),
-        le("div", {
+        de("div", {
           class: "tile-content",
-          "data-testid": `tile-content-${w.tileId}`
+          "data-testid": `tile-content-${E.tileId}`
         }, [
-          x.value ? (D(), A(ct(x.value.component), lt({ key: 0 }, x.value.rendererProps, { onChartData: K }), null, 16)) : V("", !0)
+          v.value ? (R(), A(ct(v.value.component), lt({ key: 0 }, v.value.rendererProps, { onChartData: Q }), null, 16)) : V("", !0)
         ], 8, Mi)
       ], 10, Ni);
     };
   }
-}), Pi = /* @__PURE__ */ ae(Ii, [["__scopeId", "data-v-e8cb21ac"]]), qi = (u, e, t) => {
+}), Pi = /* @__PURE__ */ he(Ii, [["__scopeId", "data-v-e8cb21ac"]]), qi = (u, e, t) => {
   const i = /* @__PURE__ */ new Map();
   t.forEach((r) => {
     const o = r.layout.position.row, n = i.get(o), d = r.layout.size.rows === 1 && !!r.layout.size.fitToContent;
@@ -1180,7 +1180,7 @@ const _i = () => {
   for (let r = 0; r < u; r++)
     i.get(r) ? s.push("auto") : s.push(`${e}px`);
   return s;
-}, Bi = /* @__PURE__ */ F({
+}, Bi = /* @__PURE__ */ U({
   __name: "GridLayout",
   props: {
     gridSize: {
@@ -1198,18 +1198,18 @@ const _i = () => {
     }
   },
   setup(u) {
-    Le((n) => ({
+    Oe((n) => ({
       "3bc5e939": u.gridSize.cols,
       "77aa3028": r.value
     }));
-    const e = u, t = $(null), i = $(0), s = new ResizeObserver((n) => {
+    const e = u, t = F(null), i = F(0), s = new ResizeObserver((n) => {
       window.requestAnimationFrame(() => {
         !Array.isArray(n) || !n.length || (i.value = n[0].contentRect.width);
       });
     });
     ft(() => {
       t.value && s.observe(t.value);
-    }), Fe(() => {
+    }), $e(() => {
       t.value && s.unobserve(t.value);
     });
     const r = N(() => {
@@ -1225,26 +1225,26 @@ const _i = () => {
         "grid-row-end": n.layout.position.row + 1 + n.layout.size.rows
       }
     })));
-    return (n, d) => (D(), q("div", {
+    return (n, d) => (R(), B("div", {
       ref_key: "gridContainer",
       ref: t,
       class: "kong-ui-public-grid-layout"
     }, [
-      (D(!0), q(gt, null, pt(o.value, (l) => (D(), q("div", {
+      (R(!0), B(gt, null, pt(o.value, (l) => (R(), B("div", {
         key: l.key,
         class: ut(["grid-cell", {
           "empty-cell": !l.tile
         }]),
         style: je(l.style)
       }, [
-        Oe(n.$slots, "tile", {
+        He(n.$slots, "tile", {
           style: je(l.style),
           tile: l.tile
         }, void 0, !0)
       ], 6))), 128))
     ], 512));
   }
-}), $i = /* @__PURE__ */ ae(Bi, [["__scopeId", "data-v-f43eb7b8"]]);
+}), $i = /* @__PURE__ */ he(Bi, [["__scopeId", "data-v-f43eb7b8"]]);
 function Fi(u, e, t, i, s) {
   const r = (...o) => (console.warn("gridstack.js: Function `" + t + "` is deprecated in " + s + " and has been replaced with `" + i + "`. It will be **removed** in a future release"), e.apply(u, o));
   return r.prototype = e.prototype, r;
@@ -1286,11 +1286,11 @@ class c {
     const i = c.createDiv(["grid-stack-item", e]), s = c.createDiv(["grid-stack-item-content"], i);
     return t.lazyLoad || ((n = (o = t.grid) == null ? void 0 : o.opts) == null ? void 0 : n.lazyLoad) && t.lazyLoad !== !1 ? t.visibleObservable || (t.visibleObservable = new IntersectionObserver(([d]) => {
       var l;
-      d.isIntersecting && ((l = t.visibleObservable) == null || l.disconnect(), delete t.visibleObservable, _.renderCB(s, t));
+      d.isIntersecting && ((l = t.visibleObservable) == null || l.disconnect(), delete t.visibleObservable, b.renderCB(s, t));
     }), window.setTimeout(() => {
       var d;
       return (d = t.visibleObservable) == null ? void 0 : d.observe(i);
-    })) : _.renderCB(s, t), i;
+    })) : b.renderCB(s, t), i;
   }
   /** create a div with the given classes */
   static createDiv(e, t) {
@@ -1930,8 +1930,8 @@ class X {
       const h = e._moving && !t.nested;
       let f = h ? this.directionCollideCoverage(e, t, n) : n[0];
       if (h && f && ((a = (l = e.grid) == null ? void 0 : l.opts) != null && a.subGridDynamic) && !e.grid._isTemp) {
-        const g = c.areaIntercept(t.rect, f._rect), m = c.area(t.rect), y = c.area(f._rect);
-        g / (m < y ? m : y) > 0.8 && (f.grid.makeSubGrid(f.el, void 0, e), f = void 0);
+        const p = c.areaIntercept(t.rect, f._rect), m = c.area(t.rect), y = c.area(f._rect);
+        p / (m < y ? m : y) > 0.8 && (f.grid.makeSubGrid(f.el, void 0, e), f = void 0);
       }
       f ? d = !this._fixCollisions(e, r, f, t) : (d = !1, i && delete t.pack);
     }
@@ -2074,7 +2074,7 @@ class X {
   }
 }
 X._idSeq = 0;
-const B = {
+const $ = {
   alwaysShowResizeHandle: "mobile",
   animate: !0,
   auto: !0,
@@ -2104,12 +2104,12 @@ const B = {
   // styleInHead: false,
   //removable
 };
-class b {
+class w {
 }
 const Y = typeof window < "u" && typeof document < "u" && ("ontouchstart" in document || "ontouchstart" in window || window.DocumentTouch && document instanceof window.DocumentTouch || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0);
 class j {
 }
-function ze(u, e) {
+function De(u, e) {
   if (u.touches.length > 1)
     return;
   u.cancelable && u.preventDefault();
@@ -2183,46 +2183,46 @@ function zt(u, e) {
     // relatedTarget
   ), u.target.dispatchEvent(t);
 }
+function ze(u) {
+  j.touchHandled || (j.touchHandled = !0, De(u, "mousedown"));
+}
 function Se(u) {
-  j.touchHandled || (j.touchHandled = !0, ze(u, "mousedown"));
+  j.touchHandled && De(u, "mousemove");
 }
 function ke(u) {
-  j.touchHandled && ze(u, "mousemove");
-}
-function Ne(u) {
   if (!j.touchHandled)
     return;
   j.pointerLeaveTimeout && (window.clearTimeout(j.pointerLeaveTimeout), delete j.pointerLeaveTimeout);
-  const e = !!b.dragElement;
-  ze(u, "mouseup"), e || ze(u, "click"), j.touchHandled = !1;
+  const e = !!w.dragElement;
+  De(u, "mouseup"), e || De(u, "click"), j.touchHandled = !1;
 }
-function Ae(u) {
+function Ne(u) {
   u.pointerType !== "mouse" && u.target.releasePointerCapture(u.pointerId);
 }
 function ot(u) {
-  b.dragElement && u.pointerType !== "mouse" && zt(u, "mouseenter");
+  w.dragElement && u.pointerType !== "mouse" && zt(u, "mouseenter");
 }
 function at(u) {
-  b.dragElement && u.pointerType !== "mouse" && (j.pointerLeaveTimeout = window.setTimeout(() => {
+  w.dragElement && u.pointerType !== "mouse" && (j.pointerLeaveTimeout = window.setTimeout(() => {
     delete j.pointerLeaveTimeout, zt(u, "mouseleave");
   }, 10));
 }
-class Me {
+class Le {
   constructor(e, t, i) {
     this.host = e, this.dir = t, this.option = i, this.moving = !1, this._mouseDown = this._mouseDown.bind(this), this._mouseMove = this._mouseMove.bind(this), this._mouseUp = this._mouseUp.bind(this), this._keyEvent = this._keyEvent.bind(this), this._init();
   }
   /** @internal */
   _init() {
     const e = this.el = document.createElement("div");
-    return e.classList.add("ui-resizable-handle"), e.classList.add(`${Me.prefix}${this.dir}`), e.style.zIndex = "100", e.style.userSelect = "none", this.host.appendChild(this.el), this.el.addEventListener("mousedown", this._mouseDown), Y && (this.el.addEventListener("touchstart", Se), this.el.addEventListener("pointerdown", Ae)), this;
+    return e.classList.add("ui-resizable-handle"), e.classList.add(`${Le.prefix}${this.dir}`), e.style.zIndex = "100", e.style.userSelect = "none", this.host.appendChild(this.el), this.el.addEventListener("mousedown", this._mouseDown), Y && (this.el.addEventListener("touchstart", ze), this.el.addEventListener("pointerdown", Ne)), this;
   }
   /** call this when resize handle needs to be removed and cleaned up */
   destroy() {
-    return this.moving && this._mouseUp(this.mouseDownEvent), this.el.removeEventListener("mousedown", this._mouseDown), Y && (this.el.removeEventListener("touchstart", Se), this.el.removeEventListener("pointerdown", Ae)), this.host.removeChild(this.el), delete this.el, delete this.host, this;
+    return this.moving && this._mouseUp(this.mouseDownEvent), this.el.removeEventListener("mousedown", this._mouseDown), Y && (this.el.removeEventListener("touchstart", ze), this.el.removeEventListener("pointerdown", Ne)), this.host.removeChild(this.el), delete this.el, delete this.host, this;
   }
   /** @internal called on mouse down on us: capture move on the entire document (mouse might not stay on us) until we release the mouse */
   _mouseDown(e) {
-    this.mouseDownEvent = e, document.addEventListener("mousemove", this._mouseMove, { capture: !0, passive: !0 }), document.addEventListener("mouseup", this._mouseUp, !0), Y && (this.el.addEventListener("touchmove", ke), this.el.addEventListener("touchend", Ne)), e.stopPropagation(), e.preventDefault();
+    this.mouseDownEvent = e, document.addEventListener("mousemove", this._mouseMove, { capture: !0, passive: !0 }), document.addEventListener("mouseup", this._mouseUp, !0), Y && (this.el.addEventListener("touchmove", Se), this.el.addEventListener("touchend", ke)), e.stopPropagation(), e.preventDefault();
   }
   /** @internal */
   _mouseMove(e) {
@@ -2231,7 +2231,7 @@ class Me {
   }
   /** @internal */
   _mouseUp(e) {
-    this.moving && (this._triggerEvent("stop", e), document.removeEventListener("keydown", this._keyEvent)), document.removeEventListener("mousemove", this._mouseMove, !0), document.removeEventListener("mouseup", this._mouseUp, !0), Y && (this.el.removeEventListener("touchmove", ke), this.el.removeEventListener("touchend", Ne)), delete this.moving, delete this.mouseDownEvent, e.stopPropagation(), e.preventDefault();
+    this.moving && (this._triggerEvent("stop", e), document.removeEventListener("keydown", this._keyEvent)), document.removeEventListener("mousemove", this._mouseMove, !0), document.removeEventListener("mouseup", this._mouseUp, !0), Y && (this.el.removeEventListener("touchmove", Se), this.el.removeEventListener("touchend", ke)), delete this.moving, delete this.mouseDownEvent, e.stopPropagation(), e.preventDefault();
   }
   /** @internal call when keys are being pressed - use Esc to cancel */
   _keyEvent(e) {
@@ -2243,7 +2243,7 @@ class Me {
     return this.option[e] && this.option[e](t), this;
   }
 }
-Me.prefix = "ui-resizable-";
+Le.prefix = "ui-resizable-";
 class Ke {
   constructor() {
     this._eventRegister = {};
@@ -2272,7 +2272,7 @@ class Ke {
       return this._eventRegister[e](t);
   }
 }
-class me extends Ke {
+class ve extends Ke {
   // have to be public else complains for HTMLElementExtendOpt ?
   constructor(e, t = {}) {
     super(), this.el = e, this.option = t, this.rectScale = { x: 1, y: 1 }, this._ui = () => {
@@ -2328,21 +2328,21 @@ class me extends Ke {
   }
   /** @internal turns auto hide on/off */
   _setupAutoHide(e) {
-    return e ? (this.el.classList.add("ui-resizable-autohide"), this.el.addEventListener("mouseover", this._mouseOver), this.el.addEventListener("mouseout", this._mouseOut)) : (this.el.classList.remove("ui-resizable-autohide"), this.el.removeEventListener("mouseover", this._mouseOver), this.el.removeEventListener("mouseout", this._mouseOut), b.overResizeElement === this && delete b.overResizeElement), this;
+    return e ? (this.el.classList.add("ui-resizable-autohide"), this.el.addEventListener("mouseover", this._mouseOver), this.el.addEventListener("mouseout", this._mouseOut)) : (this.el.classList.remove("ui-resizable-autohide"), this.el.removeEventListener("mouseover", this._mouseOver), this.el.removeEventListener("mouseout", this._mouseOut), w.overResizeElement === this && delete w.overResizeElement), this;
   }
   /** @internal */
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   _mouseOver(e) {
-    b.overResizeElement || b.dragElement || (b.overResizeElement = this, this.el.classList.remove("ui-resizable-autohide"));
+    w.overResizeElement || w.dragElement || (w.overResizeElement = this, this.el.classList.remove("ui-resizable-autohide"));
   }
   /** @internal */
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   _mouseOut(e) {
-    b.overResizeElement === this && (delete b.overResizeElement, this.el.classList.add("ui-resizable-autohide"));
+    w.overResizeElement === this && (delete w.overResizeElement, this.el.classList.add("ui-resizable-autohide"));
   }
   /** @internal */
   _setupHandlers() {
-    return this.handlers = this.option.handles.split(",").map((e) => e.trim()).map((e) => new Me(this.el, e, {
+    return this.handlers = this.option.handles.split(",").map((e) => e.trim()).map((e) => new Le(this.el, e, {
       start: (t) => {
         this._resizeStart(t);
       },
@@ -2373,7 +2373,7 @@ class me extends Ke {
   }
   /** @internal */
   _setupHelper() {
-    this.elOriginStyleVal = me._originStyleProp.map((i) => this.el.style[i]), this.parentOriginStylePosition = this.el.parentElement.style.position;
+    this.elOriginStyleVal = ve._originStyleProp.map((i) => this.el.style[i]), this.parentOriginStylePosition = this.el.parentElement.style.position;
     const e = this.el.parentElement, t = c.getValuesFromTransformedElement(e);
     return this.rectScale = {
       x: t.xScale,
@@ -2382,7 +2382,7 @@ class me extends Ke {
   }
   /** @internal */
   _cleanHelper() {
-    return me._originStyleProp.forEach((e, t) => {
+    return ve._originStyleProp.forEach((e, t) => {
       this.el.style[e] = this.elOriginStyleVal[t] || null;
     }), this.el.parentElement.style.position = this.parentOriginStylePosition || null, this;
   }
@@ -2421,9 +2421,9 @@ class me extends Ke {
     return this.handlers.forEach((e) => e.destroy()), delete this.handlers, this;
   }
 }
-me._originStyleProp = ["width", "height", "position", "left", "top", "opacity", "zIndex"];
+ve._originStyleProp = ["width", "height", "position", "left", "top", "opacity", "zIndex"];
 const Ui = 'input,textarea,button,select,option,[contenteditable="true"],.ui-resizable-handle';
-class ye extends Ke {
+class _e extends Ke {
   constructor(e, t = {}) {
     var r;
     super(), this.el = e, this.option = t, this.dragTransform = {
@@ -2443,12 +2443,12 @@ class ye extends Ke {
   }
   enable() {
     this.disabled !== !1 && (super.enable(), this.dragEls.forEach((e) => {
-      e.addEventListener("mousedown", this._mouseDown), Y && (e.addEventListener("touchstart", Se), e.addEventListener("pointerdown", Ae));
+      e.addEventListener("mousedown", this._mouseDown), Y && (e.addEventListener("touchstart", ze), e.addEventListener("pointerdown", Ne));
     }), this.el.classList.remove("ui-draggable-disabled"));
   }
   disable(e = !1) {
     this.disabled !== !0 && (super.disable(), this.dragEls.forEach((t) => {
-      t.removeEventListener("mousedown", this._mouseDown), Y && (t.removeEventListener("touchstart", Se), t.removeEventListener("pointerdown", Ae));
+      t.removeEventListener("mousedown", this._mouseDown), Y && (t.removeEventListener("touchstart", ze), t.removeEventListener("pointerdown", Ne));
     }), e || this.el.classList.add("ui-draggable-disabled"));
   }
   destroy() {
@@ -2459,8 +2459,8 @@ class ye extends Ke {
   }
   /** @internal call when mouse goes down before a dragstart happens */
   _mouseDown(e) {
-    if (!b.mouseHandled)
-      return e.button !== 0 || !this.dragEls.find((t) => t === e.target) && e.target.closest(Ui) || this.option.cancel && e.target.closest(this.option.cancel) || (this.mouseDownEvent = e, delete this.dragging, delete b.dragElement, delete b.dropElement, document.addEventListener("mousemove", this._mouseMove, { capture: !0, passive: !0 }), document.addEventListener("mouseup", this._mouseUp, !0), Y && (e.currentTarget.addEventListener("touchmove", ke), e.currentTarget.addEventListener("touchend", Ne)), e.preventDefault(), document.activeElement && document.activeElement.blur(), b.mouseHandled = !0), !0;
+    if (!w.mouseHandled)
+      return e.button !== 0 || !this.dragEls.find((t) => t === e.target) && e.target.closest(Ui) || this.option.cancel && e.target.closest(this.option.cancel) || (this.mouseDownEvent = e, delete this.dragging, delete w.dragElement, delete w.dropElement, document.addEventListener("mousemove", this._mouseMove, { capture: !0, passive: !0 }), document.addEventListener("mouseup", this._mouseUp, !0), Y && (e.currentTarget.addEventListener("touchmove", Se), e.currentTarget.addEventListener("touchend", ke)), e.preventDefault(), document.activeElement && document.activeElement.blur(), w.mouseHandled = !0), !0;
   }
   /** @internal method to call actual drag event */
   _callDrag(e) {
@@ -2474,15 +2474,15 @@ class ye extends Ke {
     var i;
     const t = this.mouseDownEvent;
     if (this.lastDrag = e, this.dragging)
-      if (this._dragFollow(e), b.pauseDrag) {
-        const s = Number.isInteger(b.pauseDrag) ? b.pauseDrag : 100;
+      if (this._dragFollow(e), w.pauseDrag) {
+        const s = Number.isInteger(w.pauseDrag) ? w.pauseDrag : 100;
         this.dragTimeout && window.clearTimeout(this.dragTimeout), this.dragTimeout = window.setTimeout(() => this._callDrag(e), s);
       } else
         this._callDrag(e);
     else if (Math.abs(e.x - t.x) + Math.abs(e.y - t.y) > 3) {
-      this.dragging = !0, b.dragElement = this;
+      this.dragging = !0, w.dragElement = this;
       const s = (i = this.el.gridstackNode) == null ? void 0 : i.grid;
-      s ? b.dropElement = s.el.ddElement.ddDroppable : delete b.dropElement, this.helper = this._createHelper(), this._setupHelperContainmentStyle(), this.dragTransform = c.getValuesFromTransformedElement(this.helperContainment), this.dragOffset = this._getDragOffset(e, this.el, this.helperContainment), this._setupHelperStyle(e);
+      s ? w.dropElement = s.el.ddElement.ddDroppable : delete w.dropElement, this.helper = this._createHelper(), this._setupHelperContainmentStyle(), this.dragTransform = c.getValuesFromTransformedElement(this.helperContainment), this.dragOffset = this._getDragOffset(e, this.el, this.helperContainment), this._setupHelperStyle(e);
       const r = c.initEvent(e, { target: this.el, type: "dragstart" });
       this.option.start && this.option.start(r, this.ui()), this.triggerEvent("dragstart", r), document.addEventListener("keydown", this._keyEvent);
     }
@@ -2491,17 +2491,17 @@ class ye extends Ke {
   /** @internal call when the mouse gets released to drop the item at current location */
   _mouseUp(e) {
     var t, i;
-    if (document.removeEventListener("mousemove", this._mouseMove, !0), document.removeEventListener("mouseup", this._mouseUp, !0), Y && e.currentTarget && (e.currentTarget.removeEventListener("touchmove", ke, !0), e.currentTarget.removeEventListener("touchend", Ne, !0)), this.dragging) {
-      delete this.dragging, (t = this.el.gridstackNode) == null || delete t._origRotate, document.removeEventListener("keydown", this._keyEvent), ((i = b.dropElement) == null ? void 0 : i.el) === this.el.parentElement && delete b.dropElement, this.helperContainment.style.position = this.parentOriginStylePosition || null, this.helper !== this.el && this.helper.remove(), this._removeHelperStyle();
+    if (document.removeEventListener("mousemove", this._mouseMove, !0), document.removeEventListener("mouseup", this._mouseUp, !0), Y && e.currentTarget && (e.currentTarget.removeEventListener("touchmove", Se, !0), e.currentTarget.removeEventListener("touchend", ke, !0)), this.dragging) {
+      delete this.dragging, (t = this.el.gridstackNode) == null || delete t._origRotate, document.removeEventListener("keydown", this._keyEvent), ((i = w.dropElement) == null ? void 0 : i.el) === this.el.parentElement && delete w.dropElement, this.helperContainment.style.position = this.parentOriginStylePosition || null, this.helper !== this.el && this.helper.remove(), this._removeHelperStyle();
       const s = c.initEvent(e, { target: this.el, type: "dragstop" });
-      this.option.stop && this.option.stop(s), this.triggerEvent("dragstop", s), b.dropElement && b.dropElement.drop(e);
+      this.option.stop && this.option.stop(s), this.triggerEvent("dragstop", s), w.dropElement && w.dropElement.drop(e);
     }
-    delete this.helper, delete this.mouseDownEvent, delete b.dragElement, delete b.dropElement, delete b.mouseHandled, e.preventDefault();
+    delete this.helper, delete this.mouseDownEvent, delete w.dragElement, delete w.dropElement, delete w.mouseHandled, e.preventDefault();
   }
   /** @internal call when keys are being pressed - use Esc to cancel, R to rotate */
   _keyEvent(e) {
     var s, r;
-    const t = this.el.gridstackNode, i = (t == null ? void 0 : t.grid) || ((r = (s = b.dropElement) == null ? void 0 : s.el) == null ? void 0 : r.gridstack);
+    const t = this.el.gridstackNode, i = (t == null ? void 0 : t.grid) || ((r = (s = w.dropElement) == null ? void 0 : s.el) == null ? void 0 : r.gridstack);
     if (e.key === "Escape")
       t && t._origRotate && (t._orig = t._origRotate, delete t._origRotate), i == null || i.cancelDrag(), this._mouseUp(this.mouseDownEvent);
     else if (t && i && (e.key === "r" || e.key === "R")) {
@@ -2513,7 +2513,7 @@ class ye extends Ke {
   /** @internal create a clone copy (or user defined method) of the original drag item if set */
   _createHelper() {
     let e = this.el;
-    return typeof this.option.helper == "function" ? e = this.option.helper(this.el) : this.option.helper === "clone" && (e = c.cloneNode(this.el)), document.body.contains(e) || c.appendTo(e, this.option.appendTo === "parent" ? this.el.parentElement : this.option.appendTo), this.dragElementOriginStyle = ye.originStyleProp.map((t) => this.el.style[t]), e;
+    return typeof this.option.helper == "function" ? e = this.option.helper(this.el) : this.option.helper === "clone" && (e = c.cloneNode(this.el)), document.body.contains(e) || c.appendTo(e, this.option.appendTo === "parent" ? this.el.parentElement : this.option.appendTo), this.dragElementOriginStyle = _e.originStyleProp.map((t) => this.el.style[t]), e;
   }
   /** @internal set the fix position of the dragged item */
   _setupHelperStyle(e) {
@@ -2530,7 +2530,7 @@ class ye extends Ke {
     const e = (t = this.helper) == null ? void 0 : t.gridstackNode;
     if (!(e != null && e._isAboutToRemove) && this.dragElementOriginStyle) {
       const i = this.helper, s = this.dragElementOriginStyle.transition || null;
-      i.style.transition = this.dragElementOriginStyle.transition = "none", ye.originStyleProp.forEach((r) => i.style[r] = this.dragElementOriginStyle[r] || null), setTimeout(() => i.style.transition = s, 50);
+      i.style.transition = this.dragElementOriginStyle.transition = "none", _e.originStyleProp.forEach((r) => i.style[r] = this.dragElementOriginStyle[r] || null), setTimeout(() => i.style.transition = s, 50);
     }
     return delete this.dragElementOriginStyle, this;
   }
@@ -2572,7 +2572,7 @@ class ye extends Ke {
     };
   }
 }
-ye.originStyleProp = ["width", "height", "transform", "transform-origin", "transition", "pointerEvents", "position", "left", "top", "minWidth", "willChange"];
+_e.originStyleProp = ["width", "height", "transform", "transform-origin", "transition", "pointerEvents", "position", "left", "top", "minWidth", "willChange"];
 class Gi extends Ke {
   constructor(e, t = {}) {
     super(), this.el = e, this.option = t, this._mouseEnter = this._mouseEnter.bind(this), this._mouseLeave = this._mouseLeave.bind(this), this.enable(), this._setupAccept();
@@ -2597,20 +2597,20 @@ class Gi extends Ke {
   }
   /** @internal called when the cursor enters our area - prepare for a possible drop and track leaving */
   _mouseEnter(e) {
-    if (!b.dragElement || !this._canDrop(b.dragElement.el))
+    if (!w.dragElement || !this._canDrop(w.dragElement.el))
       return;
-    e.preventDefault(), e.stopPropagation(), b.dropElement && b.dropElement !== this && b.dropElement._mouseLeave(e, !0), b.dropElement = this;
+    e.preventDefault(), e.stopPropagation(), w.dropElement && w.dropElement !== this && w.dropElement._mouseLeave(e, !0), w.dropElement = this;
     const t = c.initEvent(e, { target: this.el, type: "dropover" });
-    this.option.over && this.option.over(t, this._ui(b.dragElement)), this.triggerEvent("dropover", t), this.el.classList.add("ui-droppable-over");
+    this.option.over && this.option.over(t, this._ui(w.dragElement)), this.triggerEvent("dropover", t), this.el.classList.add("ui-droppable-over");
   }
   /** @internal called when the item is leaving our area, stop tracking if we had moving item */
   _mouseLeave(e, t = !1) {
     var s;
-    if (!b.dragElement || b.dropElement !== this)
+    if (!w.dragElement || w.dropElement !== this)
       return;
     e.preventDefault(), e.stopPropagation();
     const i = c.initEvent(e, { target: this.el, type: "dropout" });
-    if (this.option.out && this.option.out(i, this._ui(b.dragElement)), this.triggerEvent("dropout", i), b.dropElement === this && (delete b.dropElement, !t)) {
+    if (this.option.out && this.option.out(i, this._ui(w.dragElement)), this.triggerEvent("dropout", i), w.dropElement === this && (delete w.dropElement, !t)) {
       let r, o = this.el.parentElement;
       for (; !r && o; )
         r = (s = o.ddElement) == null ? void 0 : s.ddDroppable, o = o.parentElement;
@@ -2621,7 +2621,7 @@ class Gi extends Ke {
   drop(e) {
     e.preventDefault();
     const t = c.initEvent(e, { target: this.el, type: "drop" });
-    this.option.drop && this.option.drop(t, this._ui(b.dragElement)), this.triggerEvent("drop", t);
+    this.option.drop && this.option.drop(t, this._ui(w.dragElement)), this.triggerEvent("drop", t);
   }
   /** @internal true if element matches the string/method accept option */
   _canDrop(e) {
@@ -2653,13 +2653,13 @@ class Ve {
     return this.ddDraggable && ["drag", "dragstart", "dragstop"].indexOf(e) > -1 ? this.ddDraggable.off(e) : this.ddDroppable && ["drop", "dropover", "dropout"].indexOf(e) > -1 ? this.ddDroppable.off(e) : this.ddResizable && ["resizestart", "resize", "resizestop"].indexOf(e) > -1 && this.ddResizable.off(e), this;
   }
   setupDraggable(e) {
-    return this.ddDraggable ? this.ddDraggable.updateOption(e) : this.ddDraggable = new ye(this.el, e), this;
+    return this.ddDraggable ? this.ddDraggable.updateOption(e) : this.ddDraggable = new _e(this.el, e), this;
   }
   cleanDraggable() {
     return this.ddDraggable && (this.ddDraggable.destroy(), delete this.ddDraggable), this;
   }
   setupResizable(e) {
-    return this.ddResizable ? this.ddResizable.updateOption(e) : this.ddResizable = new me(this.el, e), this;
+    return this.ddResizable ? this.ddResizable.updateOption(e) : this.ddResizable = new ve(this.el, e), this;
   }
   cleanResizable() {
     return this.ddResizable && (this.ddResizable.destroy(), delete this.ddResizable), this;
@@ -2741,7 +2741,7 @@ class Wi {
   }
   on(e, t, i) {
     return this._getDDElements(e).forEach((s) => s.on(t, (r) => {
-      i(r, b.dragElement ? b.dragElement.el : r.target, b.dragElement ? b.dragElement.helper : null);
+      i(r, w.dragElement ? w.dragElement.el : r.target, w.dragElement ? w.dragElement.helper : null);
     })), this;
   }
   off(e, t) {
@@ -2764,7 +2764,7 @@ class Wi {
  * see root license https://github.com/gridstack/gridstack.js/tree/master/LICENSE
  */
 const I = new Wi();
-class _ {
+class b {
   /**
    * initializing the HTML element, or selector string, into a grid will return the grid. Calling it again will
    * simply return the existing instance (ignore any passed options). There is also an initAll() version that support
@@ -2781,8 +2781,8 @@ class _ {
   static init(e = {}, t = ".grid-stack") {
     if (typeof document > "u")
       return null;
-    const i = _.getGridElement(t);
-    return i ? (i.gridstack || (i.gridstack = new _(i, c.cloneDeep(e))), i.gridstack) : (console.error(typeof t == "string" ? 'GridStack.initAll() no grid was found with selector "' + t + `" - element missing or wrong selector ?
+    const i = b.getGridElement(t);
+    return i ? (i.gridstack || (i.gridstack = new b(i, c.cloneDeep(e))), i.gridstack) : (console.error(typeof t == "string" ? 'GridStack.initAll() no grid was found with selector "' + t + `" - element missing or wrong selector ?
 Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the default selector.` : "GridStack.init() no grid element was passed."), null);
   }
   /**
@@ -2796,8 +2796,8 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
    */
   static initAll(e = {}, t = ".grid-stack") {
     const i = [];
-    return typeof document > "u" || (_.getGridElements(t).forEach((s) => {
-      s.gridstack || (s.gridstack = new _(s, c.cloneDeep(e))), i.push(s.gridstack);
+    return typeof document > "u" || (b.getGridElements(t).forEach((s) => {
+      s.gridstack || (s.gridstack = new b(s, c.cloneDeep(e))), i.push(s.gridstack);
     }), i.length === 0 && console.error('GridStack.initAll() no grid was found with selector "' + t + `" - element missing or wrong selector ?
 Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the default selector.`)), i;
   }
@@ -2816,19 +2816,19 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
       const o = i.gridstack;
       return t && (o.opts = { ...o.opts, ...t }), t.children !== void 0 && o.load(t.children), o;
     }
-    return (!e.classList.contains("grid-stack") || _.addRemoveCB) && (_.addRemoveCB ? i = _.addRemoveCB(e, t, !0, !0) : i = c.createDiv(["grid-stack", t.class], e)), _.init(t, i);
+    return (!e.classList.contains("grid-stack") || b.addRemoveCB) && (b.addRemoveCB ? i = b.addRemoveCB(e, t, !0, !0) : i = c.createDiv(["grid-stack", t.class], e)), b.init(t, i);
   }
   /** call this method to register your engine instead of the default one.
    * See instead `GridStackOptions.engineClass` if you only need to
    * replace just one instance.
    */
   static registerEngine(e) {
-    _.engineClass = e;
+    b.engineClass = e;
   }
   /** @internal create placeholder DIV as needed */
   get placeholder() {
     if (!this._placeholder) {
-      this._placeholder = c.createDiv([this.opts.placeholderClass, B.itemClass, this.opts.itemClass]);
+      this._placeholder = c.createDiv([this.opts.placeholderClass, $.itemClass, this.opts.itemClass]);
       const e = c.createDiv(["placeholder-content"], this._placeholder);
       this.opts.placeholderText && (e.textContent = this.opts.placeholderText);
     }
@@ -2840,7 +2840,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
    * @param opts grid options - public for classes to access, but use methods to modify!
    */
   constructor(e, t = {}) {
-    var h, f, g;
+    var h, f, p;
     this.el = e, this.opts = t, this.animationDelay = 310, this._gsEventHandler = {}, this._extraDragRow = 0, this.dragTransform = { xScale: 1, yScale: 1, xOffset: 0, yOffset: 0 }, e.gridstack = this, this.opts = t = t || {}, e.classList.contains("grid-stack") || this.el.classList.add("grid-stack"), t.row && (t.minRow = t.maxRow = t.row, delete t.row);
     const i = c.toNumber(e.getAttribute("gs-row"));
     t.column === "auto" && delete t.column, t.alwaysShowResizeHandle !== void 0 && (t._alwaysShowResizeHandle = t.alwaysShowResizeHandle);
@@ -2849,48 +2849,48 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
     if (r.oneColumnModeDomSort && (delete r.oneColumnModeDomSort, console.log("warning: Gridstack oneColumnModeDomSort no longer supported. Use GridStackOptions.columnOpts instead.")), r.oneColumnSize || r.disableOneColumnMode === !1) {
       const m = r.oneColumnSize || 768;
       delete r.oneColumnSize, delete r.disableOneColumnMode, t.columnOpts = t.columnOpts || {}, s = t.columnOpts.breakpoints = t.columnOpts.breakpoints || [];
-      let y = s.find((p) => p.c === 1);
+      let y = s.find((g) => g.c === 1);
       y ? y.w = m : (y = { c: 1, w: m }, s.push(y, { c: 12, w: m + 1 }));
     }
     const o = t.columnOpts;
     o && (!o.columnWidth && !((f = o.breakpoints) != null && f.length) ? (delete t.columnOpts, s = void 0) : o.columnMax = o.columnMax || 12), (s == null ? void 0 : s.length) > 1 && s.sort((m, y) => (y.w || 0) - (m.w || 0));
     const n = {
-      ...c.cloneDeep(B),
-      column: c.toNumber(e.getAttribute("gs-column")) || B.column,
-      minRow: i || c.toNumber(e.getAttribute("gs-min-row")) || B.minRow,
-      maxRow: i || c.toNumber(e.getAttribute("gs-max-row")) || B.maxRow,
-      staticGrid: c.toBool(e.getAttribute("gs-static")) || B.staticGrid,
+      ...c.cloneDeep($),
+      column: c.toNumber(e.getAttribute("gs-column")) || $.column,
+      minRow: i || c.toNumber(e.getAttribute("gs-min-row")) || $.minRow,
+      maxRow: i || c.toNumber(e.getAttribute("gs-max-row")) || $.maxRow,
+      staticGrid: c.toBool(e.getAttribute("gs-static")) || $.staticGrid,
       sizeToContent: c.toBool(e.getAttribute("gs-size-to-content")) || void 0,
       draggable: {
-        handle: (t.handleClass ? "." + t.handleClass : t.handle ? t.handle : "") || B.draggable.handle
+        handle: (t.handleClass ? "." + t.handleClass : t.handle ? t.handle : "") || $.draggable.handle
       },
       removableOptions: {
-        accept: t.itemClass || B.removableOptions.accept,
-        decline: B.removableOptions.decline
+        accept: t.itemClass || $.removableOptions.accept,
+        decline: $.removableOptions.decline
       }
     };
     e.getAttribute("gs-animate") && (n.animate = c.toBool(e.getAttribute("gs-animate"))), t = c.defaults(t, n), this._initMargin(), this.checkDynamicColumn(), this.el.classList.add("gs-" + t.column), t.rtl === "auto" && (t.rtl = e.style.direction === "rtl"), t.rtl && this.el.classList.add("grid-stack-rtl");
-    const d = this.el.closest("." + B.itemClass), l = d == null ? void 0 : d.gridstackNode;
-    l && (l.subGrid = this, this.parentGridNode = l, this.el.classList.add("grid-stack-nested"), l.el.classList.add("grid-stack-sub-grid")), this._isAutoCellHeight = t.cellHeight === "auto", this._isAutoCellHeight || t.cellHeight === "initial" ? this.cellHeight(void 0, !1) : (typeof t.cellHeight == "number" && t.cellHeightUnit && t.cellHeightUnit !== B.cellHeightUnit && (t.cellHeight = t.cellHeight + t.cellHeightUnit, delete t.cellHeightUnit), this.cellHeight(t.cellHeight, !1)), t.alwaysShowResizeHandle === "mobile" && (t.alwaysShowResizeHandle = Y), this._styleSheetClass = "gs-id-" + X._idSeq++, this.el.classList.add(this._styleSheetClass), this._setStaticClass();
-    const a = t.engineClass || _.engineClass || X;
+    const d = this.el.closest("." + $.itemClass), l = d == null ? void 0 : d.gridstackNode;
+    l && (l.subGrid = this, this.parentGridNode = l, this.el.classList.add("grid-stack-nested"), l.el.classList.add("grid-stack-sub-grid")), this._isAutoCellHeight = t.cellHeight === "auto", this._isAutoCellHeight || t.cellHeight === "initial" ? this.cellHeight(void 0, !1) : (typeof t.cellHeight == "number" && t.cellHeightUnit && t.cellHeightUnit !== $.cellHeightUnit && (t.cellHeight = t.cellHeight + t.cellHeightUnit, delete t.cellHeightUnit), this.cellHeight(t.cellHeight, !1)), t.alwaysShowResizeHandle === "mobile" && (t.alwaysShowResizeHandle = Y), this._styleSheetClass = "gs-id-" + X._idSeq++, this.el.classList.add(this._styleSheetClass), this._setStaticClass();
+    const a = t.engineClass || b.engineClass || X;
     if (this.engine = new a({
       column: this.getColumn(),
       float: t.float,
       maxRow: t.maxRow,
       onChange: (m) => {
         let y = 0;
-        this.engine.nodes.forEach((p) => {
-          y = Math.max(y, p.y + p.h);
-        }), m.forEach((p) => {
-          const C = p.el;
-          C && (p._removeDOM ? (C && C.remove(), delete p._removeDOM) : this._writePosAttr(C, p));
+        this.engine.nodes.forEach((g) => {
+          y = Math.max(y, g.y + g.h);
+        }), m.forEach((g) => {
+          const C = g.el;
+          C && (g._removeDOM ? (C && C.remove(), delete g._removeDOM) : this._writePosAttr(C, g));
         }), this._updateStyles(!1, y);
       }
     }), this._updateStyles(!1, 0), t.auto && (this.batchUpdate(), this.engine._loading = !0, this.getGridItems().forEach((m) => this._prepareElement(m)), delete this.engine._loading, this.batchUpdate(!1)), t.children) {
       const m = t.children;
       delete t.children, m.length && this.load(m);
     }
-    this.setAnimation(), t.subGridDynamic && !b.pauseDrag && (b.pauseDrag = !0), ((g = t.draggable) == null ? void 0 : g.pause) !== void 0 && (b.pauseDrag = t.draggable.pause), this._setupRemoveDrop(), this._setupAcceptWidget(), this._updateResizeEvent();
+    this.setAnimation(), t.subGridDynamic && !w.pauseDrag && (w.pauseDrag = !0), ((p = t.draggable) == null ? void 0 : p.pause) !== void 0 && (w.pauseDrag = t.draggable.pause), this._setupRemoveDrop(), this._setupAcceptWidget(), this._updateResizeEvent();
   }
   /**
    * add a new widget and returns it.
@@ -2913,7 +2913,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
     if (e.ELEMENT_NODE)
       return console.error("V11: GridStack.addWidget() does not support HTMLElement anymore. use makeWidget()"), this.makeWidget(e);
     let t, i = e;
-    if (i.grid = this, i != null && i.el ? t = i.el : _.addRemoveCB ? t = _.addRemoveCB(this.el, e, !0, !1) : t = c.createWidgetDivs(this.opts.itemClass, i), !t)
+    if (i.grid = this, i != null && i.el ? t = i.el : b.addRemoveCB ? t = b.addRemoveCB(this.el, e, !0, !1) : t = c.createWidgetDivs(this.opts.itemClass, i), !t)
       return;
     if (i = t.gridstackNode, i && t.parentElement === this.el && this.engine.nodes.find((r) => r._id === i._id))
       return t;
@@ -2930,9 +2930,9 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
    * @returns newly created grid
    */
   makeSubGrid(e, t, i, s = !0) {
-    var g, m, y;
+    var p, m, y;
     let r = e.gridstackNode;
-    if (r || (r = this.makeWidget(e).gridstackNode), (g = r.subGrid) != null && g.el)
+    if (r || (r = this.makeWidget(e).gridstackNode), (p = r.subGrid) != null && p.el)
       return r.subGrid;
     let o, n = this;
     for (; n && !o; )
@@ -2952,11 +2952,11 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
     let d;
     t.column === "auto" && (d = !0, t.column = Math.max(r.w || 1, (i == null ? void 0 : i.w) || 1), delete t.columnOpts);
     let l = r.el.querySelector(".grid-stack-item-content"), a, h;
-    if (s && (this._removeDD(r.el), h = { ...r, x: 0, y: 0 }, c.removeInternalForSave(h), delete h.subGridOpts, r.content && (h.content = r.content, delete r.content), _.addRemoveCB ? a = _.addRemoveCB(this.el, h, !0, !1) : (a = c.createDiv(["grid-stack-item"]), a.appendChild(l), l = c.createDiv(["grid-stack-item-content"], r.el)), this._prepareDragDropByNode(r)), i) {
-      const p = d ? t.column : r.w, C = r.h + i.h, E = r.el.style;
-      E.transition = "none", this.update(r.el, { w: p, h: C }), setTimeout(() => E.transition = null);
+    if (s && (this._removeDD(r.el), h = { ...r, x: 0, y: 0 }, c.removeInternalForSave(h), delete h.subGridOpts, r.content && (h.content = r.content, delete r.content), b.addRemoveCB ? a = b.addRemoveCB(this.el, h, !0, !1) : (a = c.createDiv(["grid-stack-item"]), a.appendChild(l), l = c.createDiv(["grid-stack-item-content"], r.el)), this._prepareDragDropByNode(r)), i) {
+      const g = d ? t.column : r.w, C = r.h + i.h, S = r.el.style;
+      S.transition = "none", this.update(r.el, { w: g, h: C }), setTimeout(() => S.transition = null);
     }
-    const f = r.subGrid = _.addGrid(l, t);
+    const f = r.subGrid = b.addGrid(l, t);
     return i != null && i._moving && (f._isTemp = !0), d && (f._autoColumn = !0), s && f.makeWidget(a, h), i && (i._moving ? window.setTimeout(() => c.simulateMouseEvent(i._event, "mouseenter", f.el), 0) : f.makeWidget(r.el, r)), this.resizeToContentCheck(!1, r), f;
   }
   /**
@@ -2979,7 +2979,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
    * @param saveCB callback for each node -> widget, so application can insert additional data to be saved into the widget data structure.
    * @returns list of widgets or full grid option, including .children list of widgets
    */
-  save(e = !0, t = !1, i = _.saveCB) {
+  save(e = !0, t = !1, i = b.saveCB) {
     const s = this.engine.save(e, i);
     if (s.forEach((r) => {
       var o;
@@ -2995,7 +2995,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
       const r = c.cloneDeep(this.opts);
       r.marginBottom === r.marginTop && r.marginRight === r.marginLeft && r.marginTop === r.marginRight && (r.margin = r.marginTop, delete r.marginTop, delete r.marginRight, delete r.marginBottom, delete r.marginLeft), r.rtl === (this.el.style.direction === "rtl") && (r.rtl = "auto"), this._isAutoCellHeight && (r.cellHeight = "auto"), this._autoColumn && (r.column = "auto");
       const o = r._alwaysShowResizeHandle;
-      return delete r._alwaysShowResizeHandle, o !== void 0 ? r.alwaysShowResizeHandle = o : delete r.alwaysShowResizeHandle, c.removeInternalAndSame(r, B), r.children = s, r;
+      return delete r._alwaysShowResizeHandle, o !== void 0 ? r.alwaysShowResizeHandle = o : delete r.alwaysShowResizeHandle, c.removeInternalAndSame(r, $), r.children = s, r;
     }
     return s;
   }
@@ -3009,7 +3009,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
    * @example
    * see http://gridstackjs.com/demo/serialization.html
    */
-  load(e, t = _.addRemoveCB || !0) {
+  load(e, t = b.addRemoveCB || !0) {
     var l;
     e = c.cloneDeep(e);
     const i = this.getColumn();
@@ -3020,15 +3020,15 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
     e.forEach((a) => {
       s = Math.max(s, (a.x || 0) + a.w);
     }), s > this.engine.defaultColumn && (this.engine.defaultColumn = s), s > i && this.engine.cacheLayout(e, s, !0);
-    const r = _.addRemoveCB;
-    typeof t == "function" && (_.addRemoveCB = t);
+    const r = b.addRemoveCB;
+    typeof t == "function" && (b.addRemoveCB = t);
     const o = [];
     this.batchUpdate();
     const n = !this.engine.nodes.length;
     n && this.setAnimation(!1), !n && t && [...this.engine.nodes].forEach((h) => {
       if (!h.id)
         return;
-      c.find(e, h.id) || (_.addRemoveCB && _.addRemoveCB(this.el, h, !1, !1), o.push(h), this.removeWidget(h.el, !0, !1));
+      c.find(e, h.id) || (b.addRemoveCB && b.addRemoveCB(this.el, h, !1, !1), o.push(h), this.removeWidget(h.el, !0, !1));
     }), this.engine._loading = !0;
     const d = [];
     return this.engine.nodes = this.engine.nodes.filter((a) => c.find(e, a.id) ? (d.push(a), !1) : !0), e.forEach((a) => {
@@ -3036,11 +3036,11 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
       const h = c.find(d, a.id);
       if (h) {
         if (c.shouldSizeToContent(h) && (a.h = h.h), this.engine.nodeBoundFix(a), (a.autoPosition || a.x === void 0 || a.y === void 0) && (a.w = a.w || h.w, a.h = a.h || h.h, this.engine.findEmptyPosition(a)), this.engine.nodes.push(h), c.samePos(h, a) && this.engine.nodes.length > 1 && (this.moveNode(h, { ...a, forceCollide: !0 }), c.copyPos(a, h)), this.update(h.el, a), (f = a.subGridOpts) != null && f.children) {
-          const g = h.el.querySelector(".grid-stack");
-          g && g.gridstack && g.gridstack.load(a.subGridOpts.children);
+          const p = h.el.querySelector(".grid-stack");
+          p && p.gridstack && p.gridstack.load(a.subGridOpts.children);
         }
       } else t && this.addWidget(a);
-    }), delete this.engine._loading, this.engine.removedNodes = o, this.batchUpdate(!1), delete this._ignoreLayoutsNodeChange, delete this.engine.skipCacheUpdate, r ? _.addRemoveCB = r : delete _.addRemoveCB, n && ((l = this.opts) != null && l.animate) && this.setAnimation(this.opts.animate, !0), this;
+    }), delete this.engine._loading, this.engine.removedNodes = o, this.batchUpdate(!1), delete this._ignoreLayoutsNodeChange, delete this.engine.skipCacheUpdate, r ? b.addRemoveCB = r : delete b.addRemoveCB, n && ((l = this.opts) != null && l.animate) && this.setAnimation(this.opts.animate, !0), this;
   }
   /**
    * use before calling a bunch of `addWidget()` to prevent un-necessary relayouts in between (more efficient)
@@ -3229,7 +3229,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
    * grid.makeWidget('2', {w:2, content: 'hello'});
    */
   makeWidget(e, t) {
-    const i = _.getElement(e);
+    const i = b.getElement(e);
     if (!i)
       return;
     i.parentElement || this.el.appendChild(i), this._prepareElement(i, !0, t);
@@ -3261,11 +3261,11 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
    * @param triggerEvent if `false` (quiet mode) element will not be added to removed list and no 'removed' callbacks will be called (Default? true).
    */
   removeWidget(e, t = !0, i = !0) {
-    return e ? (_.getElements(e).forEach((s) => {
+    return e ? (b.getElements(e).forEach((s) => {
       if (s.parentElement && s.parentElement !== this.el)
         return;
       let r = s.gridstackNode;
-      r || (r = this.engine.nodes.find((o) => s === o.el)), r && (t && _.addRemoveCB && _.addRemoveCB(this.el, r, !1, !1), delete s.gridstackNode, this._removeDD(s), this.engine.removeNode(r, t, i), t && s.parentElement && s.remove());
+      r || (r = this.engine.nodes.find((o) => s === o.el)), r && (t && b.addRemoveCB && b.addRemoveCB(this.el, r, !1, !1), delete s.gridstackNode, this._removeDD(s), this.engine.removeNode(r, t, i), t && s.parentElement && s.remove());
     }), i && (this._triggerRemoveEvent(), this._triggerChangeEvent()), this) : (console.error("Error: GridStack.removeWidget(undefined) called"), this);
   }
   /**
@@ -3275,7 +3275,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
    */
   removeAll(e = !0, t = !0) {
     return this.engine.nodes.forEach((i) => {
-      e && _.addRemoveCB && _.addRemoveCB(this.el, i, !1, !1), delete i.el.gridstackNode, this.opts.staticGrid || this._removeDD(i.el);
+      e && b.addRemoveCB && b.addRemoveCB(this.el, i, !1, !1), delete i.el.gridstackNode, this.opts.staticGrid || this._removeDD(i.el);
     }), this.engine.removeAll(e, t), t && this._triggerRemoveEvent(), this;
   }
   /**
@@ -3316,7 +3316,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
       let s = 1;
       return t = { x: i[s++], y: i[s++], w: i[s++], h: i[s++] }, this.update(e, t);
     }
-    return _.getElements(e).forEach((i) => {
+    return b.getElements(e).forEach((i) => {
       var a;
       const s = i == null ? void 0 : i.gridstackNode;
       if (!s)
@@ -3329,7 +3329,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
         n[h] = r[h] !== void 0 ? r[h] : s[h], delete r[h];
       })), !n && (r.minW || r.minH || r.maxW || r.maxH) && (n = {}), r.content !== void 0) {
         const h = i.querySelector(".grid-stack-item-content");
-        h && h.textContent !== r.content && (s.content = r.content, _.renderCB(h, r), (a = s.subGrid) != null && a.el && (h.appendChild(s.subGrid.el), s.subGrid.opts.styleInHead || s.subGrid._updateStyles(!0))), delete r.content;
+        h && h.textContent !== r.content && (s.content = r.content, b.renderCB(h, r), (a = s.subGrid) != null && a.el && (h.appendChild(s.subGrid.el), s.subGrid.opts.styleInHead || s.subGrid._updateStyles(!0))), delete r.content;
       }
       let d = !1, l = !1;
       for (const h in r)
@@ -3352,7 +3352,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
    * @param useNodeH set to true if GridStackNode.h should be used instead of actual container height when we don't need to wait for animation to finish to get actual DOM heights
    */
   resizeToContent(e) {
-    var f, g;
+    var f, p;
     if (!e || (e.classList.remove("size-to-content-max"), !e.clientHeight))
       return;
     const t = e.gridstackNode;
@@ -3365,7 +3365,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
     if (!s)
       return;
     let r = t.h ? t.h * s : e.clientHeight, o;
-    if (t.resizeToContentParent && (o = e.querySelector(t.resizeToContentParent)), o || (o = e.querySelector(_.resizeToContentParent)), !o)
+    if (t.resizeToContentParent && (o = e.querySelector(t.resizeToContentParent)), o || (o = e.querySelector(b.resizeToContentParent)), !o)
       return;
     const n = e.clientHeight - o.clientHeight, d = t.h ? t.h * s - n : o.clientHeight;
     let l;
@@ -3374,12 +3374,12 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
       const m = t.subGrid.el.getBoundingClientRect(), y = t.subGrid.el.parentElement.getBoundingClientRect();
       l += m.top - y.top;
     } else {
-      if ((g = (f = t.subGridOpts) == null ? void 0 : f.children) != null && g.length)
+      if ((p = (f = t.subGridOpts) == null ? void 0 : f.children) != null && p.length)
         return;
       {
         const m = o.firstElementChild;
         if (!m) {
-          console.error(`Error: GridStack.resizeToContent() widget id:${t.id} '${_.resizeToContentParent}'.firstElementChild is null, make sure to have a div like container. Skipping sizing.`);
+          console.error(`Error: GridStack.resizeToContent() widget id:${t.id} '${b.resizeToContentParent}'.firstElementChild is null, make sure to have a div like container. Skipping sizing.`);
           return;
         }
         l = m.getBoundingClientRect().height || d;
@@ -3394,14 +3394,14 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
   }
   /** call the user resize (so they can do extra work) else our build in version */
   resizeToContentCBCheck(e) {
-    _.resizeToContentCB ? _.resizeToContentCB(e) : this.resizeToContent(e);
+    b.resizeToContentCB ? b.resizeToContentCB(e) : this.resizeToContent(e);
   }
   /** rotate (by swapping w & h) the passed in node - called when user press 'r' during dragging
    * @param els  widget or selector of objects to modify
    * @param relative optional pixel coord relative to upper/left corner to rotate around (will keep that cell under cursor)
    */
   rotate(e, t) {
-    return _.getElements(e).forEach((i) => {
+    return b.getElements(e).forEach((i) => {
       const s = i.gridstackNode;
       if (!c.canBeRotated(s))
         return;
@@ -3542,7 +3542,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
   }
   /** @internal */
   _prepareElement(e, t = !1, i) {
-    i = i || this._readAttr(e), e.gridstackNode = i, i.el = e, i.grid = this, i = this.engine.addNode(i, t), this._writeAttr(e, i), e.classList.add(B.itemClass, this.opts.itemClass);
+    i = i || this._readAttr(e), e.gridstackNode = i, i.el = e, i.grid = this, i = this.engine.addNode(i, t), this._writeAttr(e, i), e.classList.add($.itemClass, this.opts.itemClass);
     const s = c.shouldSizeToContent(i);
     return s ? e.classList.add("size-to-content") : e.classList.remove("size-to-content"), s && this.resizeToContentCheck(!1, i), this._prepareDragDropByNode(i), this;
   }
@@ -3628,7 +3628,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
   }
   /** @internal */
   static getGridElement(e) {
-    return _.getElement(e);
+    return b.getElement(e);
   }
   /** @internal */
   static getGridElements(e) {
@@ -3658,7 +3658,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
    * @param root optional root which defaults to document (for shadow dom pass the parent HTMLDocument)
    */
   static setupDragIn(e, t, i, s = document) {
-    (t == null ? void 0 : t.pause) !== void 0 && (b.pauseDrag = t.pause), t = { appendTo: "body", helper: "clone", ...t || {} }, (typeof e == "string" ? c.getElements(e, s) : e).forEach((o, n) => {
+    (t == null ? void 0 : t.pause) !== void 0 && (w.pauseDrag = t.pause), t = { appendTo: "body", helper: "clone", ...t || {} }, (typeof e == "string" ? c.getElements(e, s) : e).forEach((o, n) => {
       I.isDraggable(o) || I.dragIn(o, t), i != null && i[n] && (o.gridstackNode = i[n]);
     });
   }
@@ -3669,7 +3669,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
    * @param val if true widget will be draggable, assuming the parent grid isn't noMove or static.
    */
   movable(e, t) {
-    return this.opts.staticGrid ? this : (_.getElements(e).forEach((i) => {
+    return this.opts.staticGrid ? this : (b.getElements(e).forEach((i) => {
       const s = i.gridstackNode;
       s && (t ? delete s.noMove : s.noMove = !0, this._prepareDragDropByNode(s));
     }), this);
@@ -3680,7 +3680,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
    * @param val  if true widget will be resizable, assuming the parent grid isn't noResize or static.
    */
   resizable(e, t) {
-    return this.opts.staticGrid ? this : (_.getElements(e).forEach((i) => {
+    return this.opts.staticGrid ? this : (b.getElements(e).forEach((i) => {
       const s = i.gridstackNode;
       s && (t ? delete s.noResize : s.noResize = !0, this._prepareDragDropByNode(s));
     }), this);
@@ -3734,7 +3734,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
   cancelDrag() {
     var t;
     const e = (t = this._placeholder) == null ? void 0 : t.gridstackNode;
-    e && (e._isExternal ? (e._isAboutToRemove = !0, this.engine.removeNode(e)) : e._isAboutToRemove && _._itemRemoving(e.el, !1), this.engine.restoreInitial());
+    e && (e._isExternal ? (e._isAboutToRemove = !0, this.engine.removeNode(e)) : e._isAboutToRemove && b._itemRemoving(e.el, !1), this.engine.restoreInitial());
   }
   /** @internal removes any drag&drop present (called during destroy) */
   _removeDD(e) {
@@ -3753,8 +3753,8 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
         return;
       if (!((f = n.grid) != null && f.el)) {
         o.style.transform = `scale(${1 / this.dragTransform.xScale},${1 / this.dragTransform.yScale})`;
-        const g = o.getBoundingClientRect();
-        o.style.left = g.x + (this.dragTransform.xScale - 1) * (s.clientX - g.x) / this.dragTransform.xScale + "px", o.style.top = g.y + (this.dragTransform.yScale - 1) * (s.clientY - g.y) / this.dragTransform.yScale + "px", o.style.transformOrigin = "0px 0px";
+        const p = o.getBoundingClientRect();
+        o.style.left = p.x + (this.dragTransform.xScale - 1) * (s.clientX - p.x) / this.dragTransform.xScale + "px", o.style.top = p.y + (this.dragTransform.yScale - 1) * (s.clientY - p.y) / this.dragTransform.yScale + "px", o.style.transformOrigin = "0px 0px";
       }
       let { top: d, left: l } = o.getBoundingClientRect();
       const a = this.el.getBoundingClientRect();
@@ -3816,12 +3816,12 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
       n.grid || (n.el || (n = { ...n }), n._isExternal = !0, o.gridstackNode = n);
       const d = n.w || Math.round(o.offsetWidth / t) || 1, l = n.h || Math.round(o.offsetHeight / e) || 1;
       return n.grid && n.grid !== this ? (r._gridstackNodeOrig || (r._gridstackNodeOrig = n), r.gridstackNode = n = { ...n, w: d, h: l, grid: this }, delete n.x, delete n.y, this.engine.cleanupNode(n).nodeBoundFix(n), n._initDD = n._isExternal = // DOM needs to be re-parented on a drop
-      n._temporaryRemoved = !0) : (n.w = d, n.h = l, n._temporaryRemoved = !0), _._itemRemoving(n.el, !1), I.on(r, "drag", i), i(s, r, o), !1;
+      n._temporaryRemoved = !0) : (n.w = d, n.h = l, n._temporaryRemoved = !0), b._itemRemoving(n.el, !1), I.on(r, "drag", i), i(s, r, o), !1;
     }).on(this.el, "dropout", (s, r, o) => {
       const n = (o == null ? void 0 : o.gridstackNode) || r.gridstackNode;
       return n && (!n.grid || n.grid === this) && (this._leave(r, o), this._isTemp && this.removeAsSubGrid(n)), !1;
     }).on(this.el, "drop", (s, r, o) => {
-      var g, m, y;
+      var p, m, y;
       const n = (o == null ? void 0 : o.gridstackNode) || r.gridstackNode;
       if ((n == null ? void 0 : n.grid) === this && !n._isExternal)
         return !1;
@@ -3831,13 +3831,13 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
       a && this.setAnimation(!1);
       const h = r._gridstackNodeOrig;
       if (delete r._gridstackNodeOrig, d && (h != null && h.grid) && h.grid !== this) {
-        const p = h.grid;
-        p.engine.removeNodeFromLayoutCache(h), p.engine.removedNodes.push(h), p._triggerRemoveEvent()._triggerChangeEvent(), p.parentGridNode && !p.engine.nodes.length && p.opts.subGridDynamic && p.removeAsSubGrid();
+        const g = h.grid;
+        g.engine.removeNodeFromLayoutCache(h), g.engine.removedNodes.push(h), g._triggerRemoveEvent()._triggerChangeEvent(), g.parentGridNode && !g.engine.nodes.length && g.opts.subGridDynamic && g.removeAsSubGrid();
       }
-      if (!n || (d && (this.engine.cleanupNode(n), n.grid = this), (g = n.grid) == null || delete g._isTemp, I.off(r, "drag"), o !== r ? (o.remove(), r = o) : r.remove(), this._removeDD(r), !d))
+      if (!n || (d && (this.engine.cleanupNode(n), n.grid = this), (p = n.grid) == null || delete p._isTemp, I.off(r, "drag"), o !== r ? (o.remove(), r = o) : r.remove(), this._removeDD(r), !d))
         return !1;
       const f = (y = (m = n.subGrid) == null ? void 0 : m.el) == null ? void 0 : y.gridstack;
-      return c.copyPos(n, this._readAttr(this.placeholder)), c.removePositioningStyles(r), l && (n.content || n.subGridOpts || _.addRemoveCB) ? (delete n.el, r = this.addWidget(n)) : (this._prepareElement(r, !0, n), this.el.appendChild(r), this.resizeToContentCheck(!1, n), f && (f.parentGridNode = n, f.opts.styleInHead || f._updateStyles(!0)), this._updateContainerHeight()), this.engine.addedNodes.push(n), this._triggerAddEvent(), this._triggerChangeEvent(), this.engine.endUpdate(), this._gsEventHandler.dropped && this._gsEventHandler.dropped({ ...s, type: "dropped" }, h && h.grid ? h : void 0, n), a && this.setAnimation(this.opts.animate, !0), !1;
+      return c.copyPos(n, this._readAttr(this.placeholder)), c.removePositioningStyles(r), l && (n.content || n.subGridOpts || b.addRemoveCB) ? (delete n.el, r = this.addWidget(n)) : (this._prepareElement(r, !0, n), this.el.appendChild(r), this.resizeToContentCheck(!1, n), f && (f.parentGridNode = n, f.opts.styleInHead || f._updateStyles(!0)), this._updateContainerHeight()), this.engine.addedNodes.push(n), this._triggerAddEvent(), this._triggerChangeEvent(), this.engine.endUpdate(), this._gsEventHandler.dropped && this._gsEventHandler.dropped({ ...s, type: "dropped" }, h && h.grid ? h : void 0, n), a && this.setAnimation(this.opts.animate, !0), !1;
     }), this;
   }
   /** @internal mark item for removal */
@@ -3852,7 +3852,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
     if (typeof this.opts.removable != "string")
       return this;
     const e = document.querySelector(this.opts.removable);
-    return e ? (!this.opts.staticGrid && !I.isDroppable(e) && I.droppable(e, this.opts.removableOptions).on(e, "dropover", (t, i) => _._itemRemoving(i, !0)).on(e, "dropout", (t, i) => _._itemRemoving(i, !1)), this) : this;
+    return e ? (!this.opts.staticGrid && !I.isDroppable(e) && I.droppable(e, this.opts.removableOptions).on(e, "dropover", (t, i) => b._itemRemoving(i, !0)).on(e, "dropout", (t, i) => b._itemRemoving(i, !1)), this) : this;
   }
   /** @internal prepares the element for drag&drop */
   _prepareDragDropByNode(e) {
@@ -3870,8 +3870,8 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
         const h = e.w !== e._orig.w, f = a.target;
         if (!(!f.gridstackNode || f.gridstackNode.grid !== this)) {
           if (e.el = f, e._isAboutToRemove) {
-            const g = t.gridstackNode.grid;
-            g._gsEventHandler[a.type] && g._gsEventHandler[a.type](a, f), g.engine.nodes.push(e), g.removeWidget(t, !0, !0);
+            const p = t.gridstackNode.grid;
+            p._gsEventHandler[a.type] && p._gsEventHandler[a.type](a, f), p.engine.nodes.push(e), p.removeWidget(t, !0, !0);
           } else
             c.removePositioningStyles(f), e._temporaryRemoved ? (c.copyPos(e, e._orig), this._writePosAttr(f, e), this.engine.addNode(e)) : this._writePosAttr(f, e), this._gsEventHandler[a.type] && this._gsEventHandler[a.type](a, f);
           this._extraDragRow = 0, this._updateContainerHeight(), this._triggerChangeEvent(), this.engine.endUpdate(), a.type === "resizestop" && (Number.isInteger(e.sizeToContent) && (e.sizeToContent = e.h), this.resizeToContentCheck(h, e));
@@ -3913,28 +3913,28 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
   _dragOrResize(e, t, i, s, r, o) {
     const n = { ...s._orig };
     let d, l = this.opts.marginLeft, a = this.opts.marginRight, h = this.opts.marginTop, f = this.opts.marginBottom;
-    const g = Math.round(o * 0.1), m = Math.round(r * 0.1);
-    if (l = Math.min(l, m), a = Math.min(a, m), h = Math.min(h, g), f = Math.min(f, g), t.type === "drag") {
+    const p = Math.round(o * 0.1), m = Math.round(r * 0.1);
+    if (l = Math.min(l, m), a = Math.min(a, m), h = Math.min(h, p), f = Math.min(f, p), t.type === "drag") {
       if (s._temporaryRemoved)
         return;
-      const p = i.position.top - s._prevYPix;
-      s._prevYPix = i.position.top, this.opts.draggable.scroll !== !1 && c.updateScrollPosition(e, i.position, p);
-      const C = i.position.left + (i.position.left > s._lastUiPosition.left ? -a : l), E = i.position.top + (i.position.top > s._lastUiPosition.top ? -f : h);
-      n.x = Math.round(C / r), n.y = Math.round(E / o);
-      const x = this._extraDragRow;
+      const g = i.position.top - s._prevYPix;
+      s._prevYPix = i.position.top, this.opts.draggable.scroll !== !1 && c.updateScrollPosition(e, i.position, g);
+      const C = i.position.left + (i.position.left > s._lastUiPosition.left ? -a : l), S = i.position.top + (i.position.top > s._lastUiPosition.top ? -f : h);
+      n.x = Math.round(C / r), n.y = Math.round(S / o);
+      const v = this._extraDragRow;
       if (this.engine.collide(s, n)) {
-        const R = this.getRow();
-        let T = Math.max(0, n.y + s.h - R);
-        this.opts.maxRow && R + T > this.opts.maxRow && (T = Math.max(0, this.opts.maxRow - R)), this._extraDragRow = T;
+        const z = this.getRow();
+        let x = Math.max(0, n.y + s.h - z);
+        this.opts.maxRow && z + x > this.opts.maxRow && (x = Math.max(0, this.opts.maxRow - z)), this._extraDragRow = x;
       } else
         this._extraDragRow = 0;
-      if (this._extraDragRow !== x && this._updateContainerHeight(), s.x === n.x && s.y === n.y)
+      if (this._extraDragRow !== v && this._updateContainerHeight(), s.x === n.x && s.y === n.y)
         return;
     } else if (t.type === "resize") {
       if (n.x < 0 || (c.updateScrollResize(t, e, o), n.w = Math.round((i.size.width - l) / r), n.h = Math.round((i.size.height - h) / o), s.w === n.w && s.h === n.h) || s._lastTried && s._lastTried.w === n.w && s._lastTried.h === n.h)
         return;
-      const p = i.position.left + l, C = i.position.top + h;
-      n.x = Math.round(p / r), n.y = Math.round(C / o), d = !0;
+      const g = i.position.left + l, C = i.position.top + h;
+      n.x = Math.round(g / r), n.y = Math.round(C / o), d = !0;
     }
     s._event = t, s._lastTried = n;
     const y = {
@@ -3945,8 +3945,8 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
     };
     if (this.engine.moveNodeCheck(s, { ...n, cellWidth: r, cellHeight: o, rect: y, resizing: d })) {
       s._lastUiPosition = i.position, this.engine.cacheRects(r, o, h, a, f, l), delete s._skipDown, d && s.subGrid && s.subGrid.onResize(), this._extraDragRow = 0, this._updateContainerHeight();
-      const p = t.target;
-      this._writePosAttr(p, s), this._gsEventHandler[t.type] && this._gsEventHandler[t.type](t, p);
+      const g = t.target;
+      this._writePosAttr(g, s), this._gsEventHandler[t.type] && this._gsEventHandler[t.type](t, g);
     }
   }
   /** @internal called when item leaving our area by either cursor dropout event
@@ -3956,21 +3956,21 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
   _leave(e, t) {
     t = t || e;
     const i = t.gridstackNode;
-    i && (t.style.transform = t.style.transformOrigin = null, I.off(e, "drag"), !i._temporaryRemoved && (i._temporaryRemoved = !0, this.engine.removeNode(i), i.el = i._isExternal && t ? t : e, i._isExternal && this.engine.cleanupNode(i), this.opts.removable === !0 && _._itemRemoving(e, !0), e._gridstackNodeOrig ? (e.gridstackNode = e._gridstackNodeOrig, delete e._gridstackNodeOrig) : i._isExternal && this.engine.restoreInitial()));
+    i && (t.style.transform = t.style.transformOrigin = null, I.off(e, "drag"), !i._temporaryRemoved && (i._temporaryRemoved = !0, this.engine.removeNode(i), i.el = i._isExternal && t ? t : e, i._isExternal && this.engine.cleanupNode(i), this.opts.removable === !0 && b._itemRemoving(e, !0), e._gridstackNodeOrig ? (e.gridstackNode = e._gridstackNodeOrig, delete e._gridstackNodeOrig) : i._isExternal && this.engine.restoreInitial()));
   }
   // legacy method removed
   commit() {
     return Fi(this, this.batchUpdate(!1), "commit", "batchUpdate", "5.2"), this;
   }
 }
-_.renderCB = (u, e) => {
+b.renderCB = (u, e) => {
   u && (e != null && e.content) && (u.textContent = e.content);
 };
-_.resizeToContentParent = ".grid-stack-item-content";
-_.Utils = c;
-_.Engine = X;
-_.GDRev = "11.3.0";
-const Ki = ["data-id", "gs-h", "gs-w", "gs-x", "gs-y"], Vi = { class: "grid-stack-item-content" }, Yi = /* @__PURE__ */ F({
+b.resizeToContentParent = ".grid-stack-item-content";
+b.Utils = c;
+b.Engine = X;
+b.GDRev = "11.3.0";
+const Ki = ["data-id", "gs-h", "gs-w", "gs-x", "gs-y"], Vi = { class: "grid-stack-item-content" }, Yi = /* @__PURE__ */ U({
   __name: "DraggableGridLayout",
   props: {
     tiles: {},
@@ -3979,71 +3979,61 @@ const Ki = ["data-id", "gs-h", "gs-w", "gs-x", "gs-y"], Vi = { class: "grid-stac
   },
   emits: ["update-tiles"],
   setup(u, { expose: e, emit: t }) {
-    const i = u, s = t, r = $(null), o = $(new Map(i.tiles.map((g) => [`${g.id}`, g])));
+    const i = u, s = t, r = F(null), o = F(new Map(i.tiles.map((p) => [`${p.id}`, p])));
     let n = null;
-    const d = (g) => `[data-id="${g}"]`, l = (g) => Array.from(o.value.values()).map((m) => {
-      var p, C, E, x;
-      const y = g.find((R) => R.getAttribute("data-id") === `${m.id}`);
-      return y ? {
-        ...m,
-        layout: {
-          position: { col: Number((p = y.gridstackNode) == null ? void 0 : p.x), row: Number((C = y.gridstackNode) == null ? void 0 : C.y) },
-          size: { cols: Number((E = y.gridstackNode) == null ? void 0 : E.w), rows: Number((x = y.gridstackNode) == null ? void 0 : x.h) }
-        }
-      } : m;
-    }), a = () => {
-      if (n) {
-        const g = n.getGridItems();
-        l(g).forEach((y) => {
-          o.value.set(`${y.id}`, y);
-        }), s("update-tiles", Array.from(o.value.values()));
-      }
-    }, h = (g, m) => {
+    const d = (p) => `[data-id="${p}"]`, l = (p) => p.map((m) => {
+      var g;
+      const y = o.value.get(`${(g = m.el) == null ? void 0 : g.getAttribute("data-id")}`);
+      if (y)
+        return {
+          ...y,
+          layout: {
+            position: { col: Number(m.x), row: Number(m.y) },
+            size: { cols: Number(m.w), rows: Number(m.h) }
+          }
+        };
+    }).filter((m) => m !== void 0), a = (p, m) => {
+      n && (l(m).forEach((g) => {
+        o.value.set(`${g.id}`, g);
+      }), s("update-tiles", Array.from(o.value.values())));
+    }, h = (p, m) => {
       m.forEach((y) => {
-        var p;
-        o.value.delete(`${(p = y.el) == null ? void 0 : p.getAttribute("data-id")}`);
+        var g;
+        o.value.delete(`${(g = y.el) == null ? void 0 : g.getAttribute("data-id")}`);
       }), s("update-tiles", Array.from(o.value.values()));
     };
     ft(() => {
-      r.value && (n = _.init({
+      r.value && (n = b.init({
         column: i.gridSize.cols,
         cellHeight: i.tileHeight,
         resizable: { handles: "se, sw" },
         handle: ".tile-header"
       }, r.value), n.on("change", a), n.on("added", a), n.on("removed", h));
-    }), Fe(() => {
+    }), $e(() => {
       n && n.destroy(!1);
     });
-    const f = (g) => {
+    const f = (p) => {
       if (n && r.value) {
-        const m = r.value.querySelector(d(g));
+        const m = r.value.querySelector(d(p));
         m && n.removeWidget(m);
       }
     };
-    return De(() => i.tiles.length, async (g, m) => {
-      if (g > m && n) {
+    return Fe(() => i.tiles.length, async (p, m) => {
+      if (p > m && n) {
         const y = i.tiles.slice(m);
-        for (const p of y)
-          o.value.set(`${p.id}`, p), await dt(), n.makeWidget(d(p.id), {
+        for (const g of y)
+          o.value.set(`${g.id}`, g), await dt(), n.makeWidget(d(g.id), {
             autoPosition: !0,
-            w: p.layout.size.cols,
-            h: p.layout.size.rows
+            w: g.layout.size.cols,
+            h: g.layout.size.rows
           });
       }
-    }), De(() => i.tiles, (g, m) => {
-      g.length === m.length && g.forEach((y) => {
-        const p = o.value.get(`${y.id}`);
-        p && o.value.set(`${y.id}`, {
-          ...p,
-          meta: y.meta
-        });
-      });
-    }, { deep: !0 }), e({ removeWidget: f }), (g, m) => (D(), q("div", {
+    }), e({ removeWidget: f }), (p, m) => (R(), B("div", {
       ref_key: "gridContainer",
       ref: r,
       class: "grid-stack"
     }, [
-      (D(!0), q(gt, null, pt(o.value.values(), (y) => (D(), q("div", {
+      (R(!0), B(gt, null, pt(i.tiles, (y) => (R(), B("div", {
         key: y.id,
         class: "grid-stack-item",
         "data-id": `${y.id}`,
@@ -4053,16 +4043,16 @@ const Ki = ["data-id", "gs-h", "gs-w", "gs-x", "gs-y"], Vi = { class: "grid-stac
         "gs-x": y.layout.position.col,
         "gs-y": y.layout.position.row
       }, [
-        le("div", Vi, [
-          Oe(g.$slots, "tile", { tile: y }, void 0, !0)
+        de("div", Vi, [
+          He(p.$slots, "tile", { tile: y }, void 0, !0)
         ])
       ], 8, Ki))), 128))
     ], 512));
   }
-}), Xi = /* @__PURE__ */ ae(Yi, [["__scopeId", "data-v-f2aed6d7"]]), ji = { class: "kong-ui-public-dashboard-renderer" }, Qi = {
+}), Xi = /* @__PURE__ */ he(Yi, [["__scopeId", "data-v-eecf4859"]]), ji = { class: "kong-ui-public-dashboard-renderer" }, Qi = {
   key: 0,
   class: "tile-container slottable-tile"
-}, Ji = /* @__PURE__ */ F({
+}, Ji = /* @__PURE__ */ U({
   __name: "DashboardRenderer",
   props: {
     context: {},
@@ -4070,102 +4060,105 @@ const Ki = ["data-id", "gs-h", "gs-w", "gs-x", "gs-y"], Vi = { class: "grid-stac
   },
   emits: ["edit-tile", "update-tiles"],
   setup(u, { expose: e, emit: t }) {
-    const i = u, s = t, { i18n: r } = ee.useI18n(), o = $(0), n = $(null), d = oe(re);
-    d || (console.warn("Analytics dashboards require a query bridge supplied via provide / inject."), console.warn("Please ensure your application has a query bridge provided under the key 'analytics-query-provider', as described in"), console.warn("https://github.com/Kong/public-ui-components/blob/main/packages/analytics/dashboard-renderer/README.md#requirements")), ee.useRequestQueue();
+    const i = u, s = t, { i18n: r } = te.useI18n(), o = F(0), n = F(null), d = le(ne);
+    d || (console.warn("Analytics dashboards require a query bridge supplied via provide / inject."), console.warn("Please ensure your application has a query bridge provided under the key 'analytics-query-provider', as described in"), console.warn("https://github.com/Kong/public-ui-components/blob/main/packages/analytics/dashboard-renderer/README.md#requirements")), te.useRequestQueue();
     const l = yt(), a = N(() => i.context.timeSpec ? i.context.timeSpec : {
       type: "relative",
       time_range: l.defaultQueryTimeForOrg
-    }), h = N(() => !!i.context.timeSpec || !l.loading), f = N(() => i.config.tiles.map((E, x) => {
-      var T;
-      let R = E.definition;
-      if ("description" in R.chart) {
-        const ne = (T = R.chart.description) == null ? void 0 : T.replace(li, () => {
-          const K = `renderer.trendRange.${a.value.type === "absolute" ? "custom" : a.value.time_range}`;
-          return r.te(K) ? r.t(K) : "";
+    }), h = N(() => !!i.context.timeSpec || !l.loading), f = (v, z) => {
+      const x = v.layout.position.row - z.layout.position.row;
+      return x !== 0 ? x : v.layout.position.col - z.layout.position.col;
+    }, p = N(() => i.config.tiles.map((v, z) => {
+      var q;
+      let x = v.definition;
+      if ("description" in x.chart) {
+        const oe = (q = x.chart.description) == null ? void 0 : q.replace(li, () => {
+          const ae = `renderer.trendRange.${a.value.type === "absolute" ? "custom" : a.value.time_range}`;
+          return r.te(ae) ? r.t(ae) : "";
         });
-        R = {
-          ...R,
+        x = {
+          ...x,
           chart: {
-            ...R.chart,
-            description: ne
+            ...x.chart,
+            description: oe
           }
         };
       }
-      return i.context.editable && !E.id && console.warn(
+      return i.context.editable && !v.id && console.warn(
         "No id provided for tile. One will be generated automatically,",
         "however tracking changes to this tile may not work as expected.",
-        E
+        v
       ), {
-        layout: E.layout,
-        meta: R,
+        layout: v.layout,
+        meta: x,
         // Add a unique key to each tile internally.
-        id: E.id ?? crypto.randomUUID()
+        id: v.id ?? crypto.randomUUID()
       };
-    })), g = N(() => {
-      let { tz: E, refreshInterval: x, editable: R } = i.context;
-      return E || (E = new Intl.DateTimeFormat().resolvedOptions().timeZone), x === void 0 && (x = hi), R === void 0 && (R = !1), {
+    })), m = N(() => {
+      let { tz: v, refreshInterval: z, editable: x } = i.context;
+      return v || (v = new Intl.DateTimeFormat().resolvedOptions().timeZone), z === void 0 && (z = hi), x === void 0 && (x = !1), {
         ...i.context,
-        tz: E,
+        tz: v,
         timeSpec: a.value,
-        refreshInterval: x,
-        editable: R
+        refreshInterval: z,
+        editable: x
       };
-    }), m = (E) => {
-      s("edit-tile", E);
-    }, y = (E) => {
-      n.value && n.value.removeWidget(E.id);
-    }, p = () => {
+    }), y = (v) => {
+      s("edit-tile", v);
+    }, g = (v) => {
+      n.value && n.value.removeWidget(v.id);
+    }, C = () => {
       o.value++;
-    }, C = (E) => {
-      const x = E.map((R) => ({
-        id: R.id,
-        layout: R.layout,
-        definition: R.meta
+    }, S = (v) => {
+      const z = v.map((x) => ({
+        id: x.id,
+        layout: x.layout,
+        definition: x.meta
       }));
-      s("update-tiles", x);
+      s("update-tiles", z.sort(f));
     };
-    return e({ refresh: p }), (E, x) => {
-      const R = se("KAlert");
-      return D(), q("div", ji, [
-        S(d) ? (D(), A(ct(E.context.editable ? Xi : $i), {
+    return e({ refresh: C }), (v, z) => {
+      const x = re("KAlert");
+      return R(), B("div", ji, [
+        D(d) ? (R(), A(ct(v.context.editable ? Xi : $i), {
           key: 1,
           ref_key: "gridLayoutRef",
           ref: n,
-          "grid-size": E.config.gridSize,
-          "tile-height": E.config.tileHeight,
-          tiles: f.value,
-          onUpdateTiles: C
+          "grid-size": v.config.gridSize,
+          "tile-height": v.config.tileHeight,
+          tiles: p.value,
+          onUpdateTiles: S
         }, {
-          tile: M(({ tile: T }) => [
-            T.meta.chart.type === "slottable" ? (D(), q("div", Qi, [
-              Oe(E.$slots, T.meta.chart.id, {}, void 0, !0)
-            ])) : (D(), A(Pi, {
+          tile: M(({ tile: q }) => [
+            q.meta.chart.type === "slottable" ? (R(), B("div", Qi, [
+              He(v.$slots, q.meta.chart.id, {}, void 0, !0)
+            ])) : (R(), A(Pi, {
               key: 1,
               class: "tile-container",
-              context: g.value,
-              definition: T.meta,
-              height: T.layout.size.rows * (E.config.tileHeight || S(Ue)) + parseInt(S(Dt), 10),
+              context: m.value,
+              definition: q.meta,
+              height: q.layout.size.rows * (v.config.tileHeight || D(Ue)) + parseInt(D(Dt), 10),
               "query-ready": h.value,
               "refresh-counter": o.value,
-              "tile-id": T.id,
-              onEditTile: (ne) => m(T),
-              onRemoveTile: (ne) => y(T)
+              "tile-id": q.id,
+              onEditTile: (oe) => y(q),
+              onRemoveTile: (oe) => g(q)
             }, null, 8, ["context", "definition", "height", "query-ready", "refresh-counter", "tile-id", "onEditTile", "onRemoveTile"]))
           ]),
           _: 3
-        }, 40, ["grid-size", "tile-height", "tiles"])) : (D(), A(R, {
+        }, 40, ["grid-size", "tile-height", "tiles"])) : (R(), A(x, {
           key: 0,
           appearance: "danger"
         }, {
           default: M(() => [
-            pe(J(S(r).t("renderer.noQueryBridge")), 1)
+            ye(Z(D(r).t("renderer.noQueryBridge")), 1)
           ]),
           _: 1
         }))
       ]);
     };
   }
-}), ds = /* @__PURE__ */ ae(Ji, [["__scopeId", "data-v-86a29c55"]]);
+}), ds = /* @__PURE__ */ he(Ji, [["__scopeId", "data-v-1f29868e"]]);
 export {
   ai as CP_ID_TOKEN,
   Ue as DEFAULT_TILE_HEIGHT,
@@ -4173,6 +4166,6 @@ export {
   ds as DashboardRenderer,
   Je as ENTITY_ID_TOKEN,
   $i as GridLayout,
-  re as INJECT_QUERY_PROVIDER,
+  ne as INJECT_QUERY_PROVIDER,
   li as TIMEFRAME_TOKEN
 };