@kong-ui-public/dashboard-renderer 7.0.19 → 7.1.0

package/dist/index-D8hJwMTc.js

@@ -0,0 +1,4282 @@
+var ei = Object.defineProperty;
+var nt = (c) => {
+  throw TypeError(c);
+};
+var ti = (c, e, t) => e in c ? ei(c, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : c[e] = t;
+var ot = (c, e, t) => ti(c, typeof e != "symbol" ? e + "" : e, t), Ge = (c, e, t) => e.has(c) || nt("Cannot " + t);
+var _ = (c, e, t) => (Ge(c, e, "read from private field"), t ? t.call(c) : e.get(c)), P = (c, e, t) => e.has(c) ? nt("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(c) : e.set(c, t), L = (c, e, t, i) => (Ge(c, e, "write to private field"), i ? i.call(c, t) : e.set(c, t), t), $ = (c, e, t) => (Ge(c, e, "access private method"), t);
+var we = (c, e, t, i) => ({
+  set _(s) {
+    L(c, e, s, t);
+  },
+  get _() {
+    return _(c, e, i);
+  }
+});
+import { ref as B, watchEffect as Et, inject as be, provide as ii, defineComponent as Q, onUnmounted as We, computed as S, watch as Ke, resolveComponent as de, createBlock as M, renderSlot as Pe, createCommentVNode as X, unref as k, openBlock as C, withCtx as I, createVNode as se, createTextVNode as Ee, toDisplayString as te, useCssVars as Ve, createElementVNode as le, normalizeClass as Ye, mergeProps as xt, createSlots as je, createElementBlock as V, normalizeProps as si, guardReactiveProps as ri, defineAsyncComponent as Ct, onMounted as Xe, nextTick as Rt, resolveDynamicComponent as Tt, toHandlers as ni, Fragment as zt, renderList as Dt, normalizeStyle as at, mergeModels as lt, useModel as oi, getCurrentInstance as ai } from "vue";
+import { stripUnknownFilters as li, Timeframe as hi, TimePeriods as kt, TIMEFRAME_LOOKUP as di, formatTime as ht, msToGranularity as dt, getFieldDataSources as ui } from "@kong-ui-public/analytics-utilities";
+import { SimpleChart as ci, AnalyticsChart as fi, TopNTable as gi, CsvExportModal as mi } from "@kong-ui-public/analytics-chart";
+import pi from "swrv";
+import "axios";
+import { createI18n as yi, i18nTComponent as vi } from "@kong-ui-public/i18n";
+import { useAnalyticsConfigStore as St } from "@kong-ui-public/analytics-config-store";
+import { VisibilityOffIcon as _i, WarningIcon as bi, EditIcon as wi, MoreIcon as Ei } from "@kong/icons";
+import { MetricsProvider as xi, MetricsConsumer as Ci } from "@kong-ui-public/analytics-metric-provider";
+var Nt = /* @__PURE__ */ ((c) => (c.VALIDATING = "VALIDATING", c.VALIDATING_HAS_DATA = "VALIDATING_HAS_DATA", c.PENDING = "PENDING", c.SUCCESS = "SUCCESS", c.SUCCESS_HAS_DATA = "SUCCESS_HAS_DATA", c.ERROR = "ERROR", c.STALE_IF_ERROR = "STALE_IF_ERROR", c))(Nt || {});
+const Ri = (c) => {
+  var e, t, i, s, r;
+  return c ? !!// TODO: revisit: currently only the first check ever matters?
+  ((e = Object.keys(c)) != null && e.length || (t = c.data) != null && t.length || (s = (i = c.data) == null ? void 0 : i.data) != null && s.length || !((r = c.data) != null && r.data) && typeof c.data == "object" && Object.keys(c == null ? void 0 : c.data).length) : !1;
+};
+function Ti(c = B({}), e, t, i = Ri) {
+  const s = B(
+    "PENDING"
+    /* PENDING */
+  );
+  return Et(() => {
+    const r = i(c.value);
+    if (c.value && r && t.value) {
+      s.value = "VALIDATING_HAS_DATA";
+      return;
+    }
+    if (c.value && t.value) {
+      s.value = "VALIDATING";
+      return;
+    }
+    if (c.value && e.value) {
+      s.value = "STALE_IF_ERROR";
+      return;
+    }
+    if (c.value === void 0 && !e.value) {
+      s.value = "PENDING";
+      return;
+    }
+    if (c.value && !e.value && r) {
+      s.value = "SUCCESS_HAS_DATA";
+      return;
+    }
+    if (c.value && !e.value) {
+      s.value = "SUCCESS";
+      return;
+    }
+    c.value === void 0 && e && (s.value = "ERROR");
+  }), {
+    state: s,
+    swrvState: Nt
+  };
+}
+const zi = {
+  noQueryBridge: "No query bridge provided.  Unable to render dashboard.",
+  trendRange: {
+    "24h": "Last 24-hour summary",
+    "7d": "Last 7-day summary",
+    "30d": "Last 30-day summary"
+  },
+  edit: "Edit",
+  duplicateTile: "Duplicate",
+  remove: "Remove",
+  delete: "Delete"
+}, Di = {
+  forbidden: "To access this data, either filter for an entity you have access to or request analytics viewer access from your administrator.",
+  timeRangeExceeded: "The time range for this report is outside of your organization's data retention period",
+  timeout: "Query timed out.  Consider querying a shorter time range."
+}, ki = {
+  defaultFilename: "Chart export",
+  exportAsCsv: "Export as CSV"
+}, Si = "Explore", Ni = "View requests", Ai = "This tile was configured with {savedGranularity} granularity, which is no longer available. It now shows {currentGranularity} data, the closest available granularity.", Oi = {
+  daily: "1 day",
+  fiveMinutely: "5 minutes",
+  hourly: "1 hour",
+  minutely: "1 minute",
+  tenMinutely: "10 minutes",
+  tensecondly: "10 seconds",
+  thirtyMinutely: "30 minutes",
+  thirtySecondly: "30 seconds",
+  twelveHourly: "12 hours",
+  twoHourly: "2 hours",
+  weekly: "1 week",
+  unknown: "Unknown"
+}, Hi = {
+  renderer: zi,
+  queryDataProvider: Di,
+  csvExport: ki,
+  jumpToExplore: Si,
+  jumpToRequests: Ni,
+  query_aged_out_warning: Ai,
+  granularities: Oi
+};
+function Li() {
+  const c = yi("en-us", Hi);
+  return {
+    i18n: c,
+    i18nT: vi(c)
+    // Translation component <i18n-t>
+  };
+}
+const $e = 170, At = 6, ue = "analytics-query-provider", ut = "{entity-id}", Mi = "{cp-id}", Ii = "{timeframe}", qi = 30 * 1e3;
+function Pi() {
+  const c = be(ue);
+  return {
+    evaluateFeatureFlag: (t, i) => c ? c.evaluateFeatureFlagFn(t, i) : i
+  };
+}
+function $i(c) {
+  return c && c.__esModule && Object.prototype.hasOwnProperty.call(c, "default") ? c.default : c;
+}
+var Ot = { exports: {} };
+(function(c) {
+  var e = Object.prototype.hasOwnProperty, t = "~";
+  function i() {
+  }
+  Object.create && (i.prototype = /* @__PURE__ */ Object.create(null), new i().__proto__ || (t = !1));
+  function s(h, l, d) {
+    this.fn = h, this.context = l, this.once = d || !1;
+  }
+  function r(h, l, d, a, f) {
+    if (typeof d != "function")
+      throw new TypeError("The listener must be a function");
+    var y = new s(d, a || h, f), g = t ? t + l : l;
+    return h._events[g] ? h._events[g].fn ? h._events[g] = [h._events[g], y] : h._events[g].push(y) : (h._events[g] = y, h._eventsCount++), h;
+  }
+  function o(h, l) {
+    --h._eventsCount === 0 ? h._events = new i() : delete h._events[l];
+  }
+  function n() {
+    this._events = new i(), this._eventsCount = 0;
+  }
+  n.prototype.eventNames = function() {
+    var l = [], d, a;
+    if (this._eventsCount === 0) return l;
+    for (a in d = this._events)
+      e.call(d, a) && l.push(t ? a.slice(1) : a);
+    return Object.getOwnPropertySymbols ? l.concat(Object.getOwnPropertySymbols(d)) : l;
+  }, n.prototype.listeners = function(l) {
+    var d = t ? t + l : l, a = this._events[d];
+    if (!a) return [];
+    if (a.fn) return [a.fn];
+    for (var f = 0, y = a.length, g = new Array(y); f < y; f++)
+      g[f] = a[f].fn;
+    return g;
+  }, n.prototype.listenerCount = function(l) {
+    var d = t ? t + l : l, a = this._events[d];
+    return a ? a.fn ? 1 : a.length : 0;
+  }, n.prototype.emit = function(l, d, a, f, y, g) {
+    var v = t ? t + l : l;
+    if (!this._events[v]) return !1;
+    var p = this._events[v], R = arguments.length, H, T;
+    if (p.fn) {
+      switch (p.once && this.removeListener(l, p.fn, void 0, !0), R) {
+        case 1:
+          return p.fn.call(p.context), !0;
+        case 2:
+          return p.fn.call(p.context, d), !0;
+        case 3:
+          return p.fn.call(p.context, d, a), !0;
+        case 4:
+          return p.fn.call(p.context, d, a, f), !0;
+        case 5:
+          return p.fn.call(p.context, d, a, f, y), !0;
+        case 6:
+          return p.fn.call(p.context, d, a, f, y, g), !0;
+      }
+      for (T = 1, H = new Array(R - 1); T < R; T++)
+        H[T - 1] = arguments[T];
+      p.fn.apply(p.context, H);
+    } else {
+      var q = p.length, x;
+      for (T = 0; T < q; T++)
+        switch (p[T].once && this.removeListener(l, p[T].fn, void 0, !0), R) {
+          case 1:
+            p[T].fn.call(p[T].context);
+            break;
+          case 2:
+            p[T].fn.call(p[T].context, d);
+            break;
+          case 3:
+            p[T].fn.call(p[T].context, d, a);
+            break;
+          case 4:
+            p[T].fn.call(p[T].context, d, a, f);
+            break;
+          default:
+            if (!H) for (x = 1, H = new Array(R - 1); x < R; x++)
+              H[x - 1] = arguments[x];
+            p[T].fn.apply(p[T].context, H);
+        }
+    }
+    return !0;
+  }, n.prototype.on = function(l, d, a) {
+    return r(this, l, d, a, !1);
+  }, n.prototype.once = function(l, d, a) {
+    return r(this, l, d, a, !0);
+  }, n.prototype.removeListener = function(l, d, a, f) {
+    var y = t ? t + l : l;
+    if (!this._events[y]) return this;
+    if (!d)
+      return o(this, y), this;
+    var g = this._events[y];
+    if (g.fn)
+      g.fn === d && (!f || g.once) && (!a || g.context === a) && o(this, y);
+    else {
+      for (var v = 0, p = [], R = g.length; v < R; v++)
+        (g[v].fn !== d || f && !g[v].once || a && g[v].context !== a) && p.push(g[v]);
+      p.length ? this._events[y] = p.length === 1 ? p[0] : p : o(this, y);
+    }
+    return this;
+  }, n.prototype.removeAllListeners = function(l) {
+    var d;
+    return l ? (d = t ? t + l : l, this._events[d] && o(this, d)) : (this._events = new i(), this._eventsCount = 0), this;
+  }, n.prototype.off = n.prototype.removeListener, n.prototype.addListener = n.prototype.on, n.prefixed = t, n.EventEmitter = n, c.exports = n;
+})(Ot);
+var Bi = Ot.exports;
+const Gi = /* @__PURE__ */ $i(Bi);
+class Ht extends Error {
+  constructor(e) {
+    super(e), this.name = "TimeoutError";
+  }
+}
+class Ui extends Error {
+  constructor(e) {
+    super(), this.name = "AbortError", this.message = e;
+  }
+}
+const ct = (c) => globalThis.DOMException === void 0 ? new Ui(c) : new DOMException(c), ft = (c) => {
+  const e = c.reason === void 0 ? ct("This operation was aborted.") : c.reason;
+  return e instanceof Error ? e : ct(e);
+};
+function Fi(c, e) {
+  const {
+    milliseconds: t,
+    fallback: i,
+    message: s,
+    customTimers: r = { setTimeout, clearTimeout }
+  } = e;
+  let o, n;
+  const l = new Promise((d, a) => {
+    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: y } = e;
+      y.aborted && a(ft(y)), n = () => {
+        a(ft(y));
+      }, y.addEventListener("abort", n, { once: !0 });
+    }
+    if (t === Number.POSITIVE_INFINITY) {
+      c.then(d, a);
+      return;
+    }
+    const f = new Ht();
+    o = r.setTimeout.call(void 0, () => {
+      if (i) {
+        try {
+          d(i());
+        } catch (y) {
+          a(y);
+        }
+        return;
+      }
+      typeof c.cancel == "function" && c.cancel(), s === !1 ? d() : s instanceof Error ? a(s) : (f.message = s ?? `Promise timed out after ${t} milliseconds`, a(f));
+    }, t), (async () => {
+      try {
+        d(await c);
+      } catch (y) {
+        a(y);
+      }
+    })();
+  }).finally(() => {
+    l.clear(), n && e.signal && e.signal.removeEventListener("abort", n);
+  });
+  return l.clear = () => {
+    r.clearTimeout.call(void 0, o), o = void 0;
+  }, l;
+}
+function Wi(c, e, t) {
+  let i = 0, s = c.length;
+  for (; s > 0; ) {
+    const r = Math.trunc(s / 2);
+    let o = i + r;
+    t(c[o], e) <= 0 ? (i = ++o, s -= r + 1) : s = r;
+  }
+  return i;
+}
+var Z;
+class Ki {
+  constructor() {
+    P(this, Z, []);
+  }
+  enqueue(e, t) {
+    t = {
+      priority: 0,
+      ...t
+    };
+    const i = {
+      priority: t.priority,
+      id: t.id,
+      run: e
+    };
+    if (this.size === 0 || _(this, Z)[this.size - 1].priority >= t.priority) {
+      _(this, Z).push(i);
+      return;
+    }
+    const s = Wi(_(this, Z), i, (r, o) => o.priority - r.priority);
+    _(this, Z).splice(s, 0, i);
+  }
+  setPriority(e, t) {
+    const i = _(this, Z).findIndex((r) => r.id === e);
+    if (i === -1)
+      throw new ReferenceError(`No promise function with the id "${e}" exists in the queue.`);
+    const [s] = _(this, Z).splice(i, 1);
+    this.enqueue(s.run, { priority: t, id: e });
+  }
+  dequeue() {
+    const e = _(this, Z).shift();
+    return e == null ? void 0 : e.run;
+  }
+  filter(e) {
+    return _(this, Z).filter((t) => t.priority === e.priority).map((t) => t.run);
+  }
+  get size() {
+    return _(this, Z).length;
+  }
+}
+Z = new WeakMap();
+var ge, me, he, Re, pe, Te, J, ye, K, ze, ee, ve, ae, De, qe, D, Lt, Mt, It, qt, Pt, Se, Ue, Fe, Ne, $t, Ae;
+class Vi extends Gi {
+  // TODO: The `throwOnTimeout` option should affect the return types of `add()` and `addAll()`
+  constructor(t) {
+    var i, s;
+    super();
+    P(this, D);
+    P(this, ge);
+    P(this, me);
+    P(this, he, 0);
+    P(this, Re);
+    P(this, pe);
+    P(this, Te, 0);
+    P(this, J);
+    P(this, ye);
+    P(this, K);
+    P(this, ze);
+    P(this, ee, 0);
+    // The `!` is needed because of https://github.com/microsoft/TypeScript/issues/32194
+    P(this, ve);
+    P(this, ae);
+    P(this, De);
+    // Use to assign a unique identifier to a promise function, if not explicitly specified
+    P(this, qe, 1n);
+    /**
+        Per-operation timeout in milliseconds. Operations fulfill once `timeout` elapses if they haven't already.
+    
+        Applies to each future operation.
+        */
+    ot(this, "timeout");
+    if (t = {
+      carryoverConcurrencyCount: !1,
+      intervalCap: Number.POSITIVE_INFINITY,
+      interval: 0,
+      concurrency: Number.POSITIVE_INFINITY,
+      autoStart: !0,
+      queueClass: Ki,
+      ...t
+    }, !(typeof t.intervalCap == "number" && t.intervalCap >= 1))
+      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})`);
+    L(this, ge, t.carryoverConcurrencyCount), L(this, me, t.intervalCap === Number.POSITIVE_INFINITY || t.interval === 0), L(this, Re, t.intervalCap), L(this, pe, t.interval), L(this, K, new t.queueClass()), L(this, ze, t.queueClass), this.concurrency = t.concurrency, this.timeout = t.timeout, L(this, De, t.throwOnTimeout === !0), L(this, ae, t.autoStart === !1);
+  }
+  get concurrency() {
+    return _(this, ve);
+  }
+  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})`);
+    L(this, ve, t), $(this, D, Ne).call(this);
+  }
+  /**
+      Updates the priority of a promise function by its id, affecting its execution order. Requires a defined concurrency limit to take effect.
+  
+      For example, this can be used to prioritize a promise function to run earlier.
+  
+      ```js
+      import PQueue from 'p-queue';
+  
+      const queue = new PQueue({concurrency: 1});
+  
+      queue.add(async () => '🦄', {priority: 1});
+      queue.add(async () => '🦀', {priority: 0, id: '🦀'});
+      queue.add(async () => '🦄', {priority: 1});
+      queue.add(async () => '🦄', {priority: 1});
+  
+      queue.setPriority('🦀', 2);
+      ```
+  
+      In this case, the promise function with `id: '🦀'` runs second.
+  
+      You can also deprioritize a promise function to delay its execution:
+  
+      ```js
+      import PQueue from 'p-queue';
+  
+      const queue = new PQueue({concurrency: 1});
+  
+      queue.add(async () => '🦄', {priority: 1});
+      queue.add(async () => '🦀', {priority: 1, id: '🦀'});
+      queue.add(async () => '🦄');
+      queue.add(async () => '🦄', {priority: 0});
+  
+      queue.setPriority('🦀', -1);
+      ```
+      Here, the promise function with `id: '🦀'` executes last.
+      */
+  setPriority(t, i) {
+    _(this, K).setPriority(t, i);
+  }
+  async add(t, i = {}) {
+    return i.id ?? (i.id = (we(this, qe)._++).toString()), i = {
+      timeout: this.timeout,
+      throwOnTimeout: _(this, De),
+      ...i
+    }, new Promise((s, r) => {
+      _(this, K).enqueue(async () => {
+        var o;
+        we(this, ee)._++, we(this, he)._++;
+        try {
+          (o = i.signal) == null || o.throwIfAborted();
+          let n = t({ signal: i.signal });
+          i.timeout && (n = Fi(Promise.resolve(n), { milliseconds: i.timeout })), i.signal && (n = Promise.race([n, $(this, D, $t).call(this, i.signal)]));
+          const h = await n;
+          s(h), this.emit("completed", h);
+        } catch (n) {
+          if (n instanceof Ht && !i.throwOnTimeout) {
+            s();
+            return;
+          }
+          r(n), this.emit("error", n);
+        } finally {
+          $(this, D, It).call(this);
+        }
+      }, i), this.emit("add"), $(this, D, Se).call(this);
+    });
+  }
+  async addAll(t, i) {
+    return Promise.all(t.map(async (s) => this.add(s, i)));
+  }
+  /**
+  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 _(this, ae) ? (L(this, ae, !1), $(this, D, Ne).call(this), this) : this;
+  }
+  /**
+  Put queue execution on hold.
+  */
+  pause() {
+    L(this, ae, !0);
+  }
+  /**
+  Clear the queue.
+  */
+  clear() {
+    L(this, K, new (_(this, ze))());
+  }
+  /**
+      Can be called multiple times. Useful if you for example add additional items at a later time.
+  
+      @returns A promise that settles when the queue becomes empty.
+      */
+  async onEmpty() {
+    _(this, K).size !== 0 && await $(this, D, Ae).call(this, "empty");
+  }
+  /**
+      @returns A promise that settles when the queue size is less than the given limit: `queue.size < limit`.
+  
+      If you want to avoid having the queue grow beyond a certain size you can `await queue.onSizeLessThan()` before adding a new item.
+  
+      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) {
+    _(this, K).size < t || await $(this, D, Ae).call(this, "next", () => _(this, K).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.
+  
+      @returns A promise that settles when the queue becomes empty, and all promises have completed; `queue.size === 0 && queue.pending === 0`.
+      */
+  async onIdle() {
+    _(this, ee) === 0 && _(this, K).size === 0 || await $(this, D, Ae).call(this, "idle");
+  }
+  /**
+  Size of the queue, the number of queued items waiting to run.
+  */
+  get size() {
+    return _(this, K).size;
+  }
+  /**
+      Size of the queue, filtered by the given options.
+  
+      For example, this can be used to find the number of items remaining in the queue with a specific priority level.
+      */
+  sizeBy(t) {
+    return _(this, K).filter(t).length;
+  }
+  /**
+  Number of running items (no longer in the queue).
+  */
+  get pending() {
+    return _(this, ee);
+  }
+  /**
+  Whether the queue is currently paused.
+  */
+  get isPaused() {
+    return _(this, ae);
+  }
+}
+ge = new WeakMap(), me = new WeakMap(), he = new WeakMap(), Re = new WeakMap(), pe = new WeakMap(), Te = new WeakMap(), J = new WeakMap(), ye = new WeakMap(), K = new WeakMap(), ze = new WeakMap(), ee = new WeakMap(), ve = new WeakMap(), ae = new WeakMap(), De = new WeakMap(), qe = new WeakMap(), D = new WeakSet(), Lt = function() {
+  return _(this, me) || _(this, he) < _(this, Re);
+}, Mt = function() {
+  return _(this, ee) < _(this, ve);
+}, It = function() {
+  we(this, ee)._--, $(this, D, Se).call(this), this.emit("next");
+}, qt = function() {
+  $(this, D, Fe).call(this), $(this, D, Ue).call(this), L(this, ye, void 0);
+}, Pt = function() {
+  const t = Date.now();
+  if (_(this, J) === void 0) {
+    const i = _(this, Te) - t;
+    if (i < 0)
+      L(this, he, _(this, ge) ? _(this, ee) : 0);
+    else
+      return _(this, ye) === void 0 && L(this, ye, setTimeout(() => {
+        $(this, D, qt).call(this);
+      }, i)), !0;
+  }
+  return !1;
+}, Se = function() {
+  if (_(this, K).size === 0)
+    return _(this, J) && clearInterval(_(this, J)), L(this, J, void 0), this.emit("empty"), _(this, ee) === 0 && this.emit("idle"), !1;
+  if (!_(this, ae)) {
+    const t = !_(this, D, Pt);
+    if (_(this, D, Lt) && _(this, D, Mt)) {
+      const i = _(this, K).dequeue();
+      return i ? (this.emit("active"), i(), t && $(this, D, Ue).call(this), !0) : !1;
+    }
+  }
+  return !1;
+}, Ue = function() {
+  _(this, me) || _(this, J) !== void 0 || (L(this, J, setInterval(() => {
+    $(this, D, Fe).call(this);
+  }, _(this, pe))), L(this, Te, Date.now() + _(this, pe)));
+}, Fe = function() {
+  _(this, he) === 0 && _(this, ee) === 0 && _(this, J) && (clearInterval(_(this, J)), L(this, J, void 0)), L(this, he, _(this, ge) ? _(this, ee) : 0), $(this, D, Ne).call(this);
+}, /**
+Executes all queued functions until it reaches the limit.
+*/
+Ne = function() {
+  for (; $(this, D, Se).call(this); )
+    ;
+}, $t = async function(t) {
+  return new Promise((i, s) => {
+    t.addEventListener("abort", () => {
+      s(t.reason);
+    }, { once: !0 });
+  });
+}, Ae = async function(t, i) {
+  return new Promise((s) => {
+    const r = () => {
+      i && !i() || (this.off(t, r), s());
+    };
+    this.on(t, r);
+  });
+};
+const Yi = () => {
+  const c = St(), e = be(ue);
+  if (!e)
+    return;
+  if (e.queryFnOverride) {
+    console.warn("Detected incorrect use of useRequestQueue.  This composable should not be used in nested components.  Please discuss with team-data or report an issue if you feel you have a use case.");
+    return;
+  }
+  const t = new Vi({
+    carryoverConcurrencyCount: !0,
+    concurrency: c.maxParallelRequests,
+    interval: c.requestInterval,
+    intervalCap: c.requestIntervalCap
+  }), i = {
+    ...e,
+    queryFnOverride: !0,
+    queryFn: (s, r) => t.add(() => e.queryFn(s, r), { throwOnTimeout: !0 })
+  };
+  ii(ue, i);
+}, _e = {
+  useI18n: Li,
+  useEvaluateFeatureFlag: Pi,
+  useRequestQueue: Yi
+}, Qe = /* @__PURE__ */ Q({
+  __name: "QueryDataProvider",
+  props: {
+    context: {},
+    query: {},
+    queryReady: { type: Boolean },
+    refreshCounter: {}
+  },
+  emits: ["chart-data", "queryComplete"],
+  setup(c, { emit: e }) {
+    const t = c, i = e, { i18n: s } = _e.useI18n(), r = be(ue), o = () => t.queryReady && r ? JSON.stringify([t.query, t.context, t.refreshCounter]) : null, n = new AbortController();
+    We(() => {
+      n.abort();
+    });
+    const h = (R, H, T) => {
+      const q = [];
+      return H && q.push(...H), q.push(...li(R, T)), q;
+    }, { data: l, error: d, isValidating: a } = pi(o, async () => {
+      var R, H, T, q;
+      try {
+        let {
+          datasource: x,
+          ...E
+        } = t.query;
+        x || (x = "basic");
+        const A = h(x, t.query.filters, t.context.filters);
+        let N = t.query.time_range;
+        N ? N.tz || (N = {
+          ...N,
+          tz: t.context.tz
+        }) : N = {
+          ...t.context.timeSpec,
+          tz: t.context.tz
+        };
+        const G = {
+          datasource: x,
+          query: {
+            ...E,
+            time_range: N,
+            filters: A
+          }
+        }, U = await (r == null ? void 0 : r.queryFn(G, n));
+        return g.value = null, U;
+      } catch (x) {
+        throw (x == null ? void 0 : x.status) === 403 ? g.value = {
+          message: s.t("queryDataProvider.forbidden"),
+          type: "forbidden"
+        } : (x == null ? void 0 : x.status) === 408 ? g.value = {
+          message: s.t("queryDataProvider.timeout"),
+          type: "timeout"
+        } : ((H = (R = x == null ? void 0 : x.response) == null ? void 0 : R.data) == null ? void 0 : H.message) === "Range not allowed for this tier" ? g.value = {
+          message: s.t("queryDataProvider.timeRangeExceeded"),
+          type: "range_exceeded"
+        } : g.value = {
+          message: ((q = (T = x == null ? void 0 : x.response) == null ? void 0 : T.data) == null ? void 0 : q.message) || (x == null ? void 0 : x.message),
+          type: "other"
+        }, x;
+      } finally {
+        i("queryComplete");
+      }
+    }, {
+      refreshInterval: t.context.refreshInterval,
+      revalidateOnFocus: !1,
+      shouldRetryOnError: !1
+    }), { state: f, swrvState: y } = Ti(l, d, a), g = B(null), v = S(() => f.value === y.ERROR || !!g.value), p = S(() => !t.queryReady || f.value === y.PENDING);
+    return Ke(l, (R) => {
+      R && i("chart-data", R);
+    }), (R, H) => {
+      var x;
+      const T = de("KSkeleton"), q = de("KEmptyState");
+      return p.value || !k(l) && !v.value ? (C(), M(T, {
+        key: 0,
+        class: "chart-skeleton",
+        type: "table"
+      })) : v.value && ((x = g.value) == null ? void 0 : x.type) === "forbidden" ? (C(), M(q, {
+        key: 1,
+        "action-button-visible": !1,
+        "data-testid": "chart-forbidden-state"
+      }, {
+        default: I(() => [
+          Ee(te(g.value.message), 1)
+        ]),
+        icon: I(() => [
+          se(k(_i))
+        ]),
+        _: 1
+      })) : v.value ? (C(), M(q, {
+        key: 2,
+        "action-button-visible": !1,
+        "data-testid": "chart-empty-state",
+        "icon-variant": "error"
+      }, {
+        default: I(() => {
+          var E;
+          return [
+            Ee(te((E = g.value) == null ? void 0 : E.message), 1)
+          ];
+        }),
+        _: 1
+      })) : k(l) ? Pe(R.$slots, "default", {
+        key: 3,
+        data: k(l)
+      }) : X("", !0);
+    };
+  }
+}), ji = /* @__PURE__ */ Q({
+  __name: "SimpleChartRenderer",
+  props: {
+    query: {},
+    context: {},
+    queryReady: { type: Boolean },
+    chartOptions: {},
+    height: {},
+    refreshCounter: {},
+    requestsLink: {}
+  },
+  setup(c) {
+    Ve((i) => ({
+      "088169ae": `${i.height}px`
+    }));
+    const e = c, t = S(() => e.chartOptions.type === "single_value");
+    return (i, s) => (C(), M(Qe, {
+      context: i.context,
+      query: i.query,
+      "query-ready": i.queryReady,
+      "refresh-counter": i.refreshCounter
+    }, {
+      default: I(({ data: r }) => [
+        le("div", {
+          class: Ye(["analytics-chart", { "single-value": t.value }])
+        }, [
+          se(k(ci), {
+            "chart-data": r,
+            "chart-options": i.chartOptions,
+            "synthetics-data-key": t.value ? void 0 : i.chartOptions.synthetics_data_key
+          }, null, 8, ["chart-data", "chart-options", "synthetics-data-key"])
+        ], 2)
+      ]),
+      _: 1
+    }, 8, ["context", "query", "query-ready", "refresh-counter"]));
+  }
+}), ce = (c, e) => {
+  const t = c.__vccOpts || c;
+  for (const [i, s] of e)
+    t[i] = s;
+  return t;
+}, gt = /* @__PURE__ */ ce(ji, [["__scopeId", "data-v-1e9ff912"]]), Xi = { class: "analytics-chart" }, Qi = /* @__PURE__ */ Q({
+  __name: "BaseAnalyticsChartRenderer",
+  props: {
+    query: {},
+    context: {},
+    queryReady: { type: Boolean },
+    chartOptions: {},
+    height: {},
+    refreshCounter: {},
+    requestsLink: {},
+    extraProps: {}
+  },
+  emits: ["edit-tile", "chart-data", "zoom-time-range", "view-requests", "select-chart-range"],
+  setup(c, { emit: e }) {
+    const t = c, i = e, { i18n: s } = _e.useI18n(), { evaluateFeatureFlag: r } = _e.useEvaluateFeatureFlag(), o = r("ma-4135-allow-zooming-all-dashboard-tiles", !1), n = S(() => ({
+      type: t.chartOptions.type,
+      stacked: t.chartOptions.stacked ?? !1,
+      chartDatasetColors: t.chartOptions.chart_dataset_colors,
+      threshold: t.chartOptions.threshold
+    })), h = S(() => o ? t.context.zoomable : t.context.zoomable && !t.query.time_range), l = () => {
+      i("edit-tile");
+    }, d = (a) => {
+      i("chart-data", a);
+    };
+    return (a, f) => {
+      const y = de("KDropdownItem");
+      return C(), M(Qe, {
+        context: a.context,
+        query: a.query,
+        "query-ready": a.queryReady,
+        "refresh-counter": a.refreshCounter,
+        onChartData: d
+      }, {
+        default: I(({ data: g }) => [
+          le("div", Xi, [
+            se(k(fi), xt({
+              "chart-data": g,
+              "chart-options": n.value,
+              "legend-position": "bottom",
+              "requests-link": a.requestsLink,
+              "synthetics-data-key": a.chartOptions.synthetics_data_key,
+              "timeseries-zoom": h.value,
+              "tooltip-title": ""
+            }, a.extraProps, {
+              onSelectChartRange: f[0] || (f[0] = (v) => i("select-chart-range", v)),
+              onZoomTimeRange: f[1] || (f[1] = (v) => i("zoom-time-range", v))
+            }), je({ _: 2 }, [
+              a.context.editable ? {
+                name: "menu-items",
+                fn: I(() => [
+                  se(y, { onClick: l }, {
+                    default: I(() => [
+                      Ee(te(k(s).t("renderer.edit")), 1)
+                    ]),
+                    _: 1
+                  })
+                ]),
+                key: "0"
+              } : void 0
+            ]), 1040, ["chart-data", "chart-options", "requests-link", "synthetics-data-key", "timeseries-zoom"])
+          ])
+        ]),
+        _: 1
+      }, 8, ["context", "query", "query-ready", "refresh-counter"]);
+    };
+  }
+}), Ze = /* @__PURE__ */ ce(Qi, [["__scopeId", "data-v-959ffa20"]]), mt = /* @__PURE__ */ Q({
+  __name: "BarChartRenderer",
+  props: {
+    query: {},
+    context: {},
+    queryReady: { type: Boolean },
+    chartOptions: {},
+    height: {},
+    refreshCounter: {},
+    requestsLink: {}
+  },
+  setup(c) {
+    return (e, t) => (C(), M(Ze, {
+      "chart-options": e.chartOptions,
+      context: e.context,
+      "extra-props": { showAnnotations: !1 },
+      height: e.height,
+      query: e.query,
+      "query-ready": e.queryReady,
+      "refresh-counter": e.refreshCounter
+    }, null, 8, ["chart-options", "context", "height", "query", "query-ready", "refresh-counter"]));
+  }
+}), pt = /* @__PURE__ */ Q({
+  __name: "TimeseriesChartRenderer",
+  props: {
+    query: {},
+    context: {},
+    queryReady: { type: Boolean },
+    chartOptions: {},
+    height: {},
+    refreshCounter: {},
+    requestsLink: {}
+  },
+  emits: ["zoom-time-range", "select-chart-range"],
+  setup(c, { emit: e }) {
+    const t = e;
+    return (i, s) => (C(), M(Ze, {
+      "chart-options": i.chartOptions,
+      context: i.context,
+      height: i.height,
+      query: i.query,
+      "query-ready": i.queryReady,
+      "refresh-counter": i.refreshCounter,
+      "requests-link": i.requestsLink,
+      onSelectChartRange: s[0] || (s[0] = (r) => t("select-chart-range", r)),
+      onZoomTimeRange: s[1] || (s[1] = (r) => t("zoom-time-range", r))
+    }, null, 8, ["chart-options", "context", "height", "query", "query-ready", "refresh-counter", "requests-link"]));
+  }
+}), Zi = { class: "metric-card-tile-wrapper" }, Ji = /* @__PURE__ */ Q({
+  __name: "GoldenSignalsRenderer",
+  props: {
+    query: {},
+    context: {},
+    queryReady: { type: Boolean },
+    chartOptions: {},
+    height: {},
+    refreshCounter: {},
+    requestsLink: {}
+  },
+  setup(c) {
+    const e = c, t = S(() => {
+      const s = e.context.timeSpec;
+      if (s.type === "absolute")
+        return new hi({
+          key: "custom",
+          timeframeText: "custom",
+          display: "custom",
+          startCustom: s.start,
+          endCustom: s.end,
+          timeframeLength: () => s.end.getTime() - s.start.getTime(),
+          defaultResponseGranularity: "daily",
+          dataGranularity: "daily",
+          isRelative: !1,
+          allowedTiers: ["free", "plus", "enterprise"]
+        });
+      const r = kt.get(s.time_range);
+      if (!r)
+        throw new Error("Unknown time range");
+      return r;
+    }), i = S(() => {
+      var r, o;
+      const s = (r = e.query) == null ? void 0 : r.datasource;
+      if (s && s !== "api_usage" && s !== "basic")
+        throw new Error(`Invalid datasource value: ${s}`);
+      return {
+        datasource: (o = e.query) == null ? void 0 : o.datasource,
+        overrideTimeframe: t.value,
+        tz: e.context.tz,
+        additionalFilter: e.context.filters,
+        // TODO: Decide how to handle metric card filters.
+        longCardTitles: e.chartOptions.long_card_titles,
+        percentileLatency: e.chartOptions.percentile_latency,
+        refreshInterval: e.context.refreshInterval,
+        queryReady: e.queryReady,
+        refreshCounter: e.refreshCounter
+      };
+    });
+    return (s, r) => (C(), V("div", Zi, [
+      se(k(xi), si(ri(i.value)), {
+        default: I(() => [
+          se(k(Ci))
+        ]),
+        _: 1
+      }, 16)
+    ]));
+  }
+}), es = /* @__PURE__ */ ce(Ji, [["__scopeId", "data-v-7e1b1cc1"]]), yt = "#6c7489", ts = "12px", vt = "20px", Bt = "20px", is = {
+  class: "fallback-entity-link",
+  "data-testid": "entity-link-parent"
+}, _t = /* @__PURE__ */ Q({
+  __name: "FallbackEntityLink",
+  props: {
+    entityLinkData: {}
+  },
+  setup(c) {
+    return (e, t) => (C(), V("div", is, te(e.entityLinkData.label), 1));
+  }
+}), ss = /* @__PURE__ */ Q({
+  __name: "TopNTableRenderer",
+  props: {
+    query: {},
+    context: {},
+    queryReady: { type: Boolean },
+    chartOptions: {},
+    height: {},
+    refreshCounter: {},
+    requestsLink: {}
+  },
+  setup(c) {
+    const e = c, t = be(ue), i = Ct(async () => {
+      if (t != null && t.fetchComponent)
+        try {
+          return await t.fetchComponent("EntityLink");
+        } catch {
+          return _t;
+        }
+      return _t;
+    }), s = (r) => {
+      var o;
+      if ((o = e.chartOptions) != null && o.entity_link)
+        if (r.id.includes(":")) {
+          const [n, h] = r.id.split(":");
+          return e.chartOptions.entity_link.replace(Mi, n).replace(ut, h);
+        } else
+          return e.chartOptions.entity_link.replace(ut, r.id);
+      return "";
+    };
+    return (r, o) => (C(), M(Qe, {
+      context: r.context,
+      query: r.query,
+      "query-ready": r.queryReady,
+      "refresh-counter": r.refreshCounter
+    }, {
+      default: I(({ data: n }) => [
+        se(k(gi), {
+          data: n,
+          "synthetics-data-key": r.chartOptions.synthetics_data_key
+        }, je({ _: 2 }, [
+          e.chartOptions.entity_link ? {
+            name: "name",
+            fn: I(({ record: h }) => [
+              se(k(i), {
+                "entity-link-data": {
+                  id: h.id,
+                  label: h.name,
+                  deleted: h.deleted
+                },
+                "external-link": s(h)
+              }, null, 8, ["entity-link-data", "external-link"])
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["data", "synthetics-data-key"])
+      ]),
+      _: 1
+    }, 8, ["context", "query", "query-ready", "refresh-counter"]));
+  }
+}), rs = /* @__PURE__ */ Q({
+  __name: "DonutChartRenderer",
+  props: {
+    query: {},
+    context: {},
+    queryReady: { type: Boolean },
+    chartOptions: {},
+    height: {},
+    refreshCounter: {},
+    requestsLink: {}
+  },
+  setup(c) {
+    return (e, t) => (C(), M(Ze, {
+      "chart-options": e.chartOptions,
+      context: e.context,
+      height: e.height,
+      query: e.query,
+      "query-ready": e.queryReady,
+      "refresh-counter": e.refreshCounter
+    }, null, 8, ["chart-options", "context", "height", "query", "query-ready", "refresh-counter"]));
+  }
+}), ns = ["data-testid"], os = {
+  key: 0,
+  class: "tile-header"
+}, as = ["data-testid"], ls = { class: "badge-text" }, hs = ["data-testid"], ds = { class: "delete-option" }, us = ["data-testid"], cs = ["data-testid"], fs = /* @__PURE__ */ Q({
+  __name: "DashboardTile",
+  props: {
+    definition: {},
+    context: {},
+    height: { default: $e },
+    queryReady: { type: Boolean },
+    refreshCounter: {},
+    tileId: {}
+  },
+  emits: ["edit-tile", "duplicate-tile", "remove-tile", "tile-time-range-zoom"],
+  setup(c, { emit: e }) {
+    Ve((m) => ({
+      "01c2c4e4": `${m.height}px`
+    }));
+    const t = parseInt(Bt, 10), i = c, s = e, r = Ct(() => import("./GeoMapRenderer-DqEby8vN.js")), o = be(ue), n = o == null ? void 0 : o.evaluateFeatureFlagFn("analytics-chart-zoom-actions", !1), { i18n: h } = _e.useI18n(), l = B(), d = B(!1), a = B(), f = B(!1), y = B(""), g = B(""), v = B(void 0), p = B(!0);
+    Xe(async () => {
+      var m, z;
+      y.value = await ((m = o == null ? void 0 : o.exploreBaseUrl) == null ? void 0 : m.call(o)) ?? "", g.value = await ((z = o == null ? void 0 : o.requestsBaseUrl) == null ? void 0 : z.call(o)) ?? "";
+    }), Ke(() => i.definition, async () => {
+      await Rt(), a.value && (f.value = a.value.scrollWidth > a.value.clientWidth), p.value = !0;
+    }, { immediate: !0, deep: !0 });
+    const R = S(() => {
+      if (!y.value || !i.definition.query || !E.value)
+        return "";
+      const m = Ft.value, z = i.definition.query.dimensions ?? [], O = {
+        filters: m,
+        metrics: i.definition.query.metrics ?? [],
+        dimensions: z,
+        time_range: i.definition.query.time_range || i.context.timeSpec,
+        granularity: i.definition.query.granularity || fe.value
+      }, F = ["api_usage", "llm_usage"].includes(i.definition.query.datasource) ? i.definition.query.datasource : "api_usage";
+      return `${y.value}?q=${JSON.stringify(O)}&d=${F}&c=${i.definition.chart.type}`;
+    }), H = S(() => {
+      var m;
+      return g.value && i.definition.query && ((m = i.definition.query) == null ? void 0 : m.datasource) !== "llm_usage";
+    }), T = S(() => {
+      if (!H.value || !E.value)
+        return "";
+      const m = [...i.context.filters, ...i.definition.query.filters ?? []], z = Qt(
+        i.definition.query.time_range || i.context.timeSpec,
+        m
+      );
+      return `${g.value}?q=${JSON.stringify(z)}`;
+    }), q = S(() => h.t("csvExport.defaultFilename")), x = S(() => E.value && (A.value || i.context.editable) || !!oe.value), E = S(() => !["golden_signals", "top_n", "gauge"].includes(i.definition.chart.type)), A = S(() => !!R.value || "allow_csv_export" in i.definition.chart && i.definition.chart.allow_csv_export || i.context.editable), N = {
+      timeseries_line: pt,
+      timeseries_bar: pt,
+      horizontal_bar: mt,
+      vertical_bar: mt,
+      gauge: gt,
+      donut: rs,
+      golden_signals: es,
+      top_n: ss,
+      slottable: void 0,
+      single_value: gt,
+      choropleth_map: r
+    }, G = S(() => {
+      var m, z;
+      return {
+        ...(m = U.value) != null && m.rendererEvents.supportsRequests ? { "select-chart-range": Jt } : {},
+        ...(z = U.value) != null && z.rendererEvents.supportsZoom ? { "zoom-time-range": Xt } : {}
+      };
+    }), U = S(() => {
+      var F, Y;
+      const m = N[i.definition.chart.type], z = !!((F = m == null ? void 0 : m.emits) != null && F.includes("select-chart-range")), O = !!((Y = m == null ? void 0 : m.emits) != null && Y.includes("zoom-time-range"));
+      return m && {
+        component: m,
+        rendererProps: {
+          query: i.definition.query,
+          context: i.context,
+          queryReady: i.queryReady,
+          chartOptions: i.definition.chart,
+          height: i.height - t * 2,
+          refreshCounter: i.refreshCounter,
+          requestsLink: v.value
+        },
+        rendererEvents: {
+          supportsRequests: z,
+          supportsZoom: O
+        }
+      };
+    }), oe = S(() => {
+      var z;
+      const m = (z = i.definition.query) == null ? void 0 : z.time_range;
+      if ((m == null ? void 0 : m.type) === "relative") {
+        const O = kt.get(di[m.time_range]);
+        return O ? O.display : (console.warn("Did not recognize the given relative time range:", m.time_range), m.time_range);
+      } else if ((m == null ? void 0 : m.type) === "absolute") {
+        const O = m.tz || "Etc/UTC";
+        return `${ht(m.start, { short: !0, tz: O })} - ${ht(m.end, { short: !0, tz: O })}`;
+      }
+      return null;
+    }), fe = S(() => l.value ? dt(l.value.meta.granularity_ms) : void 0), ke = S(() => ["timeseries_line", "timeseries_bar"].includes(i.definition.chart.type)), tt = S(() => {
+      var z, O;
+      if (!ke.value || !i.queryReady || p.value)
+        return !1;
+      const m = (O = (z = i.definition) == null ? void 0 : z.query) == null ? void 0 : O.granularity;
+      return !m || !fe.value ? !1 : m !== fe.value;
+    }), Ut = S(() => {
+      var O, F, Y;
+      const m = dt(((O = l.value) == null ? void 0 : O.meta.granularity_ms) ?? 0) ?? "unknown", z = ((Y = (F = i.definition) == null ? void 0 : F.query) == null ? void 0 : Y.granularity) ?? "unknown";
+      return h.t("query_aged_out_warning", {
+        currentGranularity: h.t(`granularities.${m}`),
+        savedGranularity: h.t(`granularities.${z}`)
+      });
+    }), Ft = S(() => {
+      var O, F;
+      const m = [...i.context.filters, ...i.definition.query.filters ?? []], z = ((F = (O = i.definition) == null ? void 0 : O.query) == null ? void 0 : F.datasource) ?? "api_usage";
+      return m.filter((Y) => ui(Y.field).some((rt) => z === rt));
+    }), Wt = () => {
+      s("edit-tile", i.definition);
+    }, Kt = () => {
+      s("duplicate-tile", i.definition);
+    }, Vt = () => {
+      s("remove-tile", i.definition);
+    }, Yt = (m) => {
+      l.value = m, p.value = !1;
+    }, it = (m) => {
+      d.value = m;
+    }, jt = () => {
+      it(!0);
+    }, Xt = (m) => {
+      const z = {
+        tileId: i.tileId.toString(),
+        timeRange: m
+      };
+      s("tile-time-range-zoom", z);
+    }, Qt = (m, z) => {
+      var O, F;
+      return {
+        filter: z,
+        timeframe: {
+          timePeriodsKey: m.type === "relative" ? m.time_range : "custom",
+          start: m.type === "absolute" ? (O = l.value) == null ? void 0 : O.meta.start_ms : void 0,
+          end: m.type === "absolute" ? (F = l.value) == null ? void 0 : F.meta.end_ms : void 0
+        }
+      };
+    }, Zt = (m, z) => ({
+      filter: z,
+      timeframe: {
+        timePeriodsKey: m.type === "relative" ? m.time_range : "custom",
+        start: m.type === "absolute" ? m.start : void 0,
+        end: m.type === "absolute" ? m.end : void 0
+      }
+    }), Jt = (m) => {
+      if (!H.value) {
+        v.value = void 0;
+        return;
+      }
+      const z = [...i.context.filters, ...i.definition.query.filters ?? []], O = Zt(m, z);
+      v.value = { href: `${g.value}?q=${JSON.stringify(O)}` };
+    };
+    return (m, z) => {
+      const O = de("KTooltip"), F = de("KBadge"), Y = de("KDropdownItem"), st = de("KDropdown");
+      return C(), V("div", {
+        class: Ye(["tile-boundary", { editable: m.context.editable }]),
+        "data-testid": `tile-${m.tileId}`
+      }, [
+        m.definition.chart.type !== "slottable" ? (C(), V("div", os, [
+          se(O, {
+            class: "title-tooltip",
+            disabled: !f.value,
+            "max-width": "500",
+            text: m.definition.chart.chart_title
+          }, {
+            default: I(() => [
+              le("div", {
+                ref_key: "titleRef",
+                ref: a,
+                class: "title"
+              }, te(m.definition.chart.chart_title), 513)
+            ]),
+            _: 1
+          }, 8, ["disabled", "text"]),
+          x.value ? (C(), V("div", {
+            key: 0,
+            class: "tile-actions",
+            "data-testid": `tile-actions-${m.tileId}`
+          }, [
+            oe.value ? (C(), M(F, {
+              key: 0,
+              "data-testid": "time-range-badge",
+              tooltip: tt.value ? Ut.value : void 0,
+              "tooltip-attributes": { maxWidth: "320px" }
+            }, je({
+              default: I(() => [
+                le("span", ls, te(oe.value), 1)
+              ]),
+              _: 2
+            }, [
+              tt.value ? {
+                name: "icon",
+                fn: I(() => [
+                  se(k(bi), { size: k(ts) }, null, 8, ["size"])
+                ]),
+                key: "0"
+              } : void 0
+            ]), 1032, ["tooltip"])) : X("", !0),
+            E.value && m.context.editable ? (C(), M(k(wi), {
+              key: 1,
+              class: "edit-icon",
+              color: k(yt),
+              "data-testid": `edit-tile-${m.tileId}`,
+              size: k(vt),
+              onClick: Wt
+            }, null, 8, ["color", "data-testid", "size"])) : X("", !0),
+            E.value && A.value ? (C(), M(st, {
+              key: 2,
+              class: "dropdown",
+              "data-testid": `chart-action-menu-${m.tileId}`,
+              "kpop-attributes": { placement: "bottom-end" }
+            }, {
+              items: I(() => [
+                R.value ? (C(), M(Y, {
+                  key: 0,
+                  "data-testid": `chart-jump-to-explore-${m.tileId}`,
+                  item: { label: k(h).t("jumpToExplore"), to: R.value }
+                }, null, 8, ["data-testid", "item"])) : X("", !0),
+                k(n) && T.value ? (C(), M(Y, {
+                  key: 1,
+                  "data-testid": `chart-jump-to-requests-${m.tileId}`,
+                  item: { label: k(h).t("jumpToRequests"), to: T.value }
+                }, null, 8, ["data-testid", "item"])) : X("", !0),
+                !("allow_csv_export" in m.definition.chart) || m.definition.chart.allow_csv_export ? (C(), M(Y, {
+                  key: 2,
+                  class: "chart-export-button",
+                  "data-testid": `chart-csv-export-${m.tileId}`,
+                  onClick: z[0] || (z[0] = (rt) => jt())
+                }, {
+                  default: I(() => [
+                    le("span", {
+                      class: "chart-export-trigger",
+                      "data-testid": `csv-export-button-${m.tileId}`
+                    }, te(k(h).t("csvExport.exportAsCsv")), 9, hs)
+                  ]),
+                  _: 1
+                }, 8, ["data-testid"])) : X("", !0),
+                m.context.editable ? (C(), M(Y, {
+                  key: 3,
+                  "data-testid": `duplicate-tile-${m.tileId}`,
+                  onClick: Kt
+                }, {
+                  default: I(() => [
+                    Ee(te(k(h).t("renderer.duplicateTile")), 1)
+                  ]),
+                  _: 1
+                }, 8, ["data-testid"])) : X("", !0),
+                m.context.editable ? (C(), M(Y, {
+                  key: 4,
+                  "data-testid": `remove-tile-${m.tileId}`,
+                  onClick: Vt
+                }, {
+                  default: I(() => [
+                    le("span", ds, te(k(h).t("renderer.delete")), 1)
+                  ]),
+                  _: 1
+                }, 8, ["data-testid"])) : X("", !0)
+              ]),
+              default: I(() => [
+                se(k(Ei), {
+                  class: "kebab-action-menu",
+                  color: k(yt),
+                  "data-testid": `kebab-action-menu-${m.tileId}`,
+                  size: k(vt)
+                }, null, 8, ["color", "data-testid", "size"])
+              ]),
+              _: 1
+            }, 8, ["data-testid"])) : X("", !0)
+          ], 8, as)) : "description" in m.definition.chart ? (C(), V("div", {
+            key: 1,
+            class: "header-description",
+            "data-testid": `tile-description-${m.tileId}`
+          }, te(m.definition.chart.description), 9, us)) : X("", !0),
+          d.value ? (C(), M(k(mi), {
+            key: 2,
+            "chart-data": l.value,
+            "data-testid": `csv-export-modal-${m.tileId}`,
+            filename: q.value,
+            onToggleModal: it
+          }, null, 8, ["chart-data", "data-testid", "filename"])) : X("", !0)
+        ])) : X("", !0),
+        le("div", {
+          class: "tile-content",
+          "data-testid": `tile-content-${m.tileId}`
+        }, [
+          U.value ? (C(), M(Tt(U.value.component), xt({ key: 0 }, U.value.rendererProps, ni(G.value), { onChartData: Yt }), null, 16)) : X("", !0)
+        ], 8, cs)
+      ], 10, ns);
+    };
+  }
+}), gs = /* @__PURE__ */ ce(fs, [["__scopeId", "data-v-81f91604"]]), ms = (c, e) => {
+  let t = 0;
+  const i = /* @__PURE__ */ new Map();
+  e.forEach((r) => {
+    const o = r.layout.position.row, n = i.get(o), h = r.layout.size.rows === 1 && !!r.layout.size.fit_to_content;
+    t = Math.max(t, o + r.layout.size.rows), n === void 0 ? i.set(o, h) : i.set(o, n && h);
+  });
+  const s = [];
+  for (let r = 0; r < t; r++)
+    i.get(r) ? s.push("auto") : s.push(`${c}px`);
+  return s;
+}, ps = /* @__PURE__ */ Q({
+  __name: "GridLayout",
+  props: {
+    tileHeight: {
+      type: Number,
+      required: !1,
+      default: () => $e
+    },
+    tiles: {
+      type: Array,
+      required: !0
+    }
+  },
+  setup(c) {
+    Ve((n) => ({
+      "2a38e79e": k(At),
+      "4cc71de6": r.value
+    }));
+    const e = c, t = B(null), i = B(0), s = new ResizeObserver((n) => {
+      window.requestAnimationFrame(() => {
+        !Array.isArray(n) || !n.length || (i.value = n[0].contentRect.width);
+      });
+    });
+    Xe(() => {
+      t.value && s.observe(t.value);
+    }), We(() => {
+      t.value && s.unobserve(t.value);
+    });
+    const r = S(() => ms(e.tileHeight, e.tiles).join(" ")), o = S(() => e.tiles.map((n, h) => ({
+      key: `tile-${h}`,
+      tile: n,
+      style: {
+        "grid-column-start": n.layout.position.col + 1,
+        "grid-column-end": n.layout.position.col + 1 + n.layout.size.cols,
+        "grid-row-start": n.layout.position.row + 1,
+        "grid-row-end": n.layout.position.row + 1 + n.layout.size.rows
+      }
+    })));
+    return (n, h) => (C(), V("div", {
+      ref_key: "gridContainer",
+      ref: t,
+      class: "kong-ui-public-grid-layout"
+    }, [
+      (C(!0), V(zt, null, Dt(o.value, (l) => (C(), V("div", {
+        key: l.key,
+        class: Ye(["grid-cell", {
+          "empty-cell": !l.tile
+        }]),
+        style: at(l.style)
+      }, [
+        Pe(n.$slots, "tile", {
+          style: at(l.style),
+          tile: l.tile
+        }, void 0, !0)
+      ], 6))), 128))
+    ], 512));
+  }
+}), ys = /* @__PURE__ */ ce(ps, [["__scopeId", "data-v-354b7177"]]);
+function vs(c, 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(c, o));
+  return r.prototype = e.prototype, r;
+}
+class u {
+  /** convert a potential selector into actual list of html elements. optional root which defaults to document (for shadow dom) */
+  static getElements(e, t = document) {
+    if (typeof e == "string") {
+      const i = "getElementById" in t ? t : void 0;
+      if (i && !isNaN(+e[0])) {
+        const r = i.getElementById(e);
+        return r ? [r] : [];
+      }
+      let s = t.querySelectorAll(e);
+      return !s.length && e[0] !== "." && e[0] !== "#" && (s = t.querySelectorAll("." + e), s.length || (s = t.querySelectorAll("#" + e))), Array.from(s);
+    }
+    return [e];
+  }
+  /** convert a potential selector into actual single element. optional root which defaults to document (for shadow dom) */
+  static getElement(e, t = document) {
+    if (typeof e == "string") {
+      const i = "getElementById" in t ? t : void 0;
+      if (!e.length)
+        return null;
+      if (i && e[0] === "#")
+        return i.getElementById(e.substring(1));
+      if (e[0] === "#" || e[0] === "." || e[0] === "[")
+        return t.querySelector(e);
+      if (i && !isNaN(+e[0]))
+        return i.getElementById(e);
+      let s = t.querySelector(e);
+      return i && !s && (s = i.getElementById(e)), s || (s = t.querySelector("." + e)), s;
+    }
+    return e;
+  }
+  /** true if widget (or grid) makes this item lazyLoad */
+  static lazyLoad(e) {
+    var t, i;
+    return e.lazyLoad || ((i = (t = e.grid) == null ? void 0 : t.opts) == null ? void 0 : i.lazyLoad) && e.lazyLoad !== !1;
+  }
+  /** create a div with the given classes */
+  static createDiv(e, t) {
+    const i = document.createElement("div");
+    return e.forEach((s) => {
+      s && i.classList.add(s);
+    }), t == null || t.appendChild(i), i;
+  }
+  /** true if we should resize to content. strict=true when only 'sizeToContent:true' and not a number which lets user adjust */
+  static shouldSizeToContent(e, t = !1) {
+    return (e == null ? void 0 : e.grid) && (t ? e.sizeToContent === !0 || e.grid.opts.sizeToContent === !0 && e.sizeToContent === void 0 : !!e.sizeToContent || e.grid.opts.sizeToContent && e.sizeToContent !== !1);
+  }
+  /** returns true if a and b overlap */
+  static isIntercepted(e, t) {
+    return !(e.y >= t.y + t.h || e.y + e.h <= t.y || e.x + e.w <= t.x || e.x >= t.x + t.w);
+  }
+  /** returns true if a and b touch edges or corners */
+  static isTouching(e, t) {
+    return u.isIntercepted(e, { x: t.x - 0.5, y: t.y - 0.5, w: t.w + 1, h: t.h + 1 });
+  }
+  /** returns the area a and b overlap */
+  static areaIntercept(e, t) {
+    const i = e.x > t.x ? e.x : t.x, s = e.x + e.w < t.x + t.w ? e.x + e.w : t.x + t.w;
+    if (s <= i)
+      return 0;
+    const r = e.y > t.y ? e.y : t.y, o = e.y + e.h < t.y + t.h ? e.y + e.h : t.y + t.h;
+    return o <= r ? 0 : (s - i) * (o - r);
+  }
+  /** returns the area */
+  static area(e) {
+    return e.w * e.h;
+  }
+  /**
+   * Sorts array of nodes
+   * @param nodes array to sort
+   * @param dir 1 for ascending, -1 for descending (optional)
+   **/
+  static sort(e, t = 1) {
+    return e.sort((s, r) => {
+      const o = t * ((s.y ?? 1e4) - (r.y ?? 1e4));
+      return o === 0 ? t * ((s.x ?? 1e4) - (r.x ?? 1e4)) : o;
+    });
+  }
+  /** find an item by id */
+  static find(e, t) {
+    return t ? e.find((i) => i.id === t) : void 0;
+  }
+  /**
+   * creates a style sheet with style id under given parent
+   * @param id will set the 'gs-style-id' attribute to that id
+   * @param parent to insert the stylesheet as first child,
+   * if none supplied it will be appended to the document head instead.
+   */
+  static createStylesheet(e, t, i) {
+    const s = document.createElement("style"), r = i == null ? void 0 : i.nonce;
+    return r && (s.nonce = r), s.setAttribute("type", "text/css"), s.setAttribute("gs-style-id", e), s.styleSheet ? s.styleSheet.cssText = "" : s.appendChild(document.createTextNode("")), t ? t.insertBefore(s, t.firstChild) : (t = document.getElementsByTagName("head")[0], t.appendChild(s)), s;
+  }
+  /** removed the given stylesheet id */
+  static removeStylesheet(e, t) {
+    const s = (t || document).querySelector("STYLE[gs-style-id=" + e + "]");
+    s && s.parentNode && s.remove();
+  }
+  /** inserts a CSS rule */
+  static addCSSRule(e, t, i) {
+    e.textContent += `${t} { ${i} } `;
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  static toBool(e) {
+    return typeof e == "boolean" ? e : typeof e == "string" ? (e = e.toLowerCase(), !(e === "" || e === "no" || e === "false" || e === "0")) : !!e;
+  }
+  static toNumber(e) {
+    return e === null || e.length === 0 ? void 0 : Number(e);
+  }
+  static parseHeight(e) {
+    let t, i = "px";
+    if (typeof e == "string")
+      if (e === "auto" || e === "")
+        t = 0;
+      else {
+        const s = e.match(/^(-[0-9]+\.[0-9]+|[0-9]*\.[0-9]+|-[0-9]+|[0-9]+)(px|em|rem|vh|vw|%|cm|mm)?$/);
+        if (!s)
+          throw new Error(`Invalid height val = ${e}`);
+        i = s[2] || "px", t = parseFloat(s[1]);
+      }
+    else
+      t = e;
+    return { h: t, unit: i };
+  }
+  /** copies unset fields in target to use the given default sources values */
+  // eslint-disable-next-line
+  static defaults(e, ...t) {
+    return t.forEach((i) => {
+      for (const s in i) {
+        if (!i.hasOwnProperty(s))
+          return;
+        e[s] === null || e[s] === void 0 ? e[s] = i[s] : typeof i[s] == "object" && typeof e[s] == "object" && this.defaults(e[s], i[s]);
+      }
+    }), e;
+  }
+  /** given 2 objects return true if they have the same values. Checks for Object {} having same fields and values (just 1 level down) */
+  static same(e, t) {
+    if (typeof e != "object")
+      return e == t;
+    if (typeof e != typeof t || Object.keys(e).length !== Object.keys(t).length)
+      return !1;
+    for (const i in e)
+      if (e[i] !== t[i])
+        return !1;
+    return !0;
+  }
+  /** copies over b size & position (GridStackPosition), and optionally min/max as well */
+  static copyPos(e, t, i = !1) {
+    return t.x !== void 0 && (e.x = t.x), t.y !== void 0 && (e.y = t.y), t.w !== void 0 && (e.w = t.w), t.h !== void 0 && (e.h = t.h), i && (t.minW && (e.minW = t.minW), t.minH && (e.minH = t.minH), t.maxW && (e.maxW = t.maxW), t.maxH && (e.maxH = t.maxH)), e;
+  }
+  /** true if a and b has same size & position */
+  static samePos(e, t) {
+    return e && t && e.x === t.x && e.y === t.y && (e.w || 1) === (t.w || 1) && (e.h || 1) === (t.h || 1);
+  }
+  /** given a node, makes sure it's min/max are valid */
+  static sanitizeMinMax(e) {
+    e.minW || delete e.minW, e.minH || delete e.minH, e.maxW || delete e.maxW, e.maxH || delete e.maxH;
+  }
+  /** removes field from the first object if same as the second objects (like diffing) and internal '_' for saving */
+  static removeInternalAndSame(e, t) {
+    if (!(typeof e != "object" || typeof t != "object"))
+      for (let i in e) {
+        const s = e[i], r = t[i];
+        i[0] === "_" || s === r ? delete e[i] : s && typeof s == "object" && r !== void 0 && (u.removeInternalAndSame(s, r), Object.keys(s).length || delete e[i]);
+      }
+  }
+  /** removes internal fields '_' and default values for saving */
+  static removeInternalForSave(e, t = !0) {
+    for (let i in e)
+      (i[0] === "_" || e[i] === null || e[i] === void 0) && delete e[i];
+    delete e.grid, t && delete e.el, e.autoPosition || delete e.autoPosition, e.noResize || delete e.noResize, e.noMove || delete e.noMove, e.locked || delete e.locked, (e.w === 1 || e.w === e.minW) && delete e.w, (e.h === 1 || e.h === e.minH) && delete e.h;
+  }
+  /** return the closest parent (or itself) matching the given class */
+  // static closestUpByClass(el: HTMLElement, name: string): HTMLElement {
+  //   while (el) {
+  //     if (el.classList.contains(name)) return el;
+  //     el = el.parentElement
+  //   }
+  //   return null;
+  // }
+  /** delay calling the given function for given delay, preventing new calls from happening while waiting */
+  static throttle(e, t) {
+    let i = !1;
+    return (...s) => {
+      i || (i = !0, setTimeout(() => {
+        e(...s), i = !1;
+      }, t));
+    };
+  }
+  static removePositioningStyles(e) {
+    const t = e.style;
+    t.position && t.removeProperty("position"), t.left && t.removeProperty("left"), t.top && t.removeProperty("top"), t.width && t.removeProperty("width"), t.height && t.removeProperty("height");
+  }
+  /** @internal returns the passed element if scrollable, else the closest parent that will, up to the entire document scrolling element */
+  static getScrollElement(e) {
+    if (!e)
+      return document.scrollingElement || document.documentElement;
+    const t = getComputedStyle(e);
+    return /(auto|scroll)/.test(t.overflow + t.overflowY) ? e : this.getScrollElement(e.parentElement);
+  }
+  /** @internal */
+  static updateScrollPosition(e, t, i) {
+    const s = e.getBoundingClientRect(), r = window.innerHeight || document.documentElement.clientHeight;
+    if (s.top < 0 || s.bottom > r) {
+      const o = s.bottom - r, n = s.top, h = this.getScrollElement(e);
+      if (h !== null) {
+        const l = h.scrollTop;
+        s.top < 0 && i < 0 ? e.offsetHeight > r ? h.scrollTop += i : h.scrollTop += Math.abs(n) > Math.abs(i) ? i : n : i > 0 && (e.offsetHeight > r ? h.scrollTop += i : h.scrollTop += o > i ? i : o), t.top += h.scrollTop - l;
+      }
+    }
+  }
+  /**
+   * @internal Function used to scroll the page.
+   *
+   * @param event `MouseEvent` that triggers the resize
+   * @param el `HTMLElement` that's being resized
+   * @param distance Distance from the V edges to start scrolling
+   */
+  static updateScrollResize(e, t, i) {
+    const s = this.getScrollElement(t), r = s.clientHeight, o = s === this.getScrollElement() ? 0 : s.getBoundingClientRect().top, n = e.clientY - o, h = n < i, l = n > r - i;
+    h ? s.scrollBy({ behavior: "smooth", top: n - i }) : l && s.scrollBy({ behavior: "smooth", top: i - (r - n) });
+  }
+  /** single level clone, returning a new object with same top fields. This will share sub objects and arrays */
+  static clone(e) {
+    return e == null || typeof e != "object" ? e : e instanceof Array ? [...e] : { ...e };
+  }
+  /**
+   * Recursive clone version that returns a full copy, checking for nested objects and arrays ONLY.
+   * Note: this will use as-is any key starting with double __ (and not copy inside) some lib have circular dependencies.
+   */
+  static cloneDeep(e) {
+    const t = ["parentGrid", "el", "grid", "subGrid", "engine"], i = u.clone(e);
+    for (const s in i)
+      i.hasOwnProperty(s) && typeof i[s] == "object" && s.substring(0, 2) !== "__" && !t.find((r) => r === s) && (i[s] = u.cloneDeep(e[s]));
+    return i;
+  }
+  /** deep clone the given HTML node, removing teh unique id field */
+  static cloneNode(e) {
+    const t = e.cloneNode(!0);
+    return t.removeAttribute("id"), t;
+  }
+  static appendTo(e, t) {
+    let i;
+    typeof t == "string" ? i = u.getElement(t) : i = t, i && i.appendChild(e);
+  }
+  // public static setPositionRelative(el: HTMLElement): void {
+  //   if (!(/^(?:r|a|f)/).test(getComputedStyle(el).position)) {
+  //     el.style.position = "relative";
+  //   }
+  // }
+  static addElStyles(e, t) {
+    if (t instanceof Object)
+      for (const i in t)
+        t.hasOwnProperty(i) && (Array.isArray(t[i]) ? t[i].forEach((s) => {
+          e.style[i] = s;
+        }) : e.style[i] = t[i]);
+  }
+  static initEvent(e, t) {
+    const i = { type: t.type }, s = {
+      button: 0,
+      which: 0,
+      buttons: 1,
+      bubbles: !0,
+      cancelable: !0,
+      target: t.target ? t.target : e.target
+    };
+    return ["altKey", "ctrlKey", "metaKey", "shiftKey"].forEach((r) => i[r] = e[r]), ["pageX", "pageY", "clientX", "clientY", "screenX", "screenY"].forEach((r) => i[r] = e[r]), { ...i, ...s };
+  }
+  /** copies the MouseEvent (or convert Touch) properties and sends it as another event to the given target */
+  static simulateMouseEvent(e, t, i) {
+    const s = e, r = new MouseEvent(t, {
+      bubbles: !0,
+      composed: !0,
+      cancelable: !0,
+      view: window,
+      detail: 1,
+      screenX: e.screenX,
+      screenY: e.screenY,
+      clientX: e.clientX,
+      clientY: e.clientY,
+      ctrlKey: s.ctrlKey ?? !1,
+      altKey: s.altKey ?? !1,
+      shiftKey: s.shiftKey ?? !1,
+      metaKey: s.metaKey ?? !1,
+      button: 0,
+      relatedTarget: e.target
+    });
+    (i || e.target).dispatchEvent(r);
+  }
+  /**
+   * defines an element that is used to get the offset and scale from grid transforms
+   * returns the scale and offsets from said element
+  */
+  static getValuesFromTransformedElement(e) {
+    const t = document.createElement("div");
+    u.addElStyles(t, {
+      opacity: "0",
+      position: "fixed",
+      top: "0px",
+      left: "0px",
+      width: "1px",
+      height: "1px",
+      zIndex: "-999999"
+    }), e.appendChild(t);
+    const i = t.getBoundingClientRect();
+    return e.removeChild(t), t.remove(), {
+      xScale: 1 / i.width,
+      yScale: 1 / i.height,
+      xOffset: i.left,
+      yOffset: i.top
+    };
+  }
+  /** swap the given object 2 field values */
+  static swap(e, t, i) {
+    if (!e)
+      return;
+    const s = e[t];
+    e[t] = e[i], e[i] = s;
+  }
+  /** returns true if event is inside the given element rectangle */
+  // Note: Safari Mac has null event.relatedTarget which causes #1684 so check if DragEvent is inside the coordinates instead
+  //    this.el.contains(event.relatedTarget as HTMLElement)
+  // public static inside(e: MouseEvent, el: HTMLElement): boolean {
+  //   // srcElement, toElement, target: all set to placeholder when leaving simple grid, so we can't use that (Chrome)
+  //   const target: HTMLElement = e.relatedTarget || (e as any).fromElement;
+  //   if (!target) {
+  //     const { bottom, left, right, top } = el.getBoundingClientRect();
+  //     return (e.x < right && e.x > left && e.y < bottom && e.y > top);
+  //   }
+  //   return el.contains(target);
+  // }
+  /** true if the item can be rotated (checking for prop, not space available) */
+  static canBeRotated(e) {
+    var t;
+    return !(!e || e.w === e.h || e.locked || e.noResize || (t = e.grid) != null && t.opts.disableResize || e.minW && e.minW === e.maxW || e.minH && e.minH === e.maxH);
+  }
+}
+class re {
+  constructor(e = {}) {
+    this.addedNodes = [], this.removedNodes = [], this.defaultColumn = 12, this.column = e.column || this.defaultColumn, this.column > this.defaultColumn && (this.defaultColumn = this.column), this.maxRow = e.maxRow, this._float = e.float, this.nodes = e.nodes || [], this.onChange = e.onChange;
+  }
+  batchUpdate(e = !0, t = !0) {
+    return !!this.batchMode === e ? this : (this.batchMode = e, e ? (this._prevFloat = this._float, this._float = !0, this.cleanNodes(), this.saveInitial()) : (this._float = this._prevFloat, delete this._prevFloat, t && this._packNodes(), this._notify()), this);
+  }
+  // use entire row for hitting area (will use bottom reverse sorted first) if we not actively moving DOWN and didn't already skip
+  _useEntireRowArea(e, t) {
+    return (!this.float || this.batchMode && !this._prevFloat) && !this._hasLocked && (!e._moving || e._skipDown || t.y <= e.y);
+  }
+  /** @internal fix collision on given 'node', going to given new location 'nn', with optional 'collide' node already found.
+   * return true if we moved. */
+  _fixCollisions(e, t = e, i, s = {}) {
+    if (this.sortNodes(-1), i = i || this.collide(e, t), !i)
+      return !1;
+    if (e._moving && !s.nested && !this.float && this.swap(e, i))
+      return !0;
+    let r = t;
+    !this._loading && this._useEntireRowArea(e, t) && (r = { x: 0, w: this.column, y: t.y, h: t.h }, i = this.collide(e, r, s.skip));
+    let o = !1;
+    const n = { nested: !0, pack: !1 };
+    let h = 0;
+    for (; i = i || this.collide(e, r, s.skip); ) {
+      if (h++ > this.nodes.length * 2)
+        throw new Error("Infinite collide check");
+      let l;
+      if (i.locked || this._loading || e._moving && !e._skipDown && t.y > e.y && !this.float && // can take space we had, or before where we're going
+      (!this.collide(i, { ...i, y: e.y }, e) || !this.collide(i, { ...i, y: t.y - i.h }, e))) {
+        e._skipDown = e._skipDown || t.y > e.y;
+        const d = { ...t, y: i.y + i.h, ...n };
+        l = this._loading && u.samePos(e, d) ? !0 : this.moveNode(e, d), (i.locked || this._loading) && l ? u.copyPos(t, e) : !i.locked && l && s.pack && (this._packNodes(), t.y = i.y + i.h, u.copyPos(e, t)), o = o || l;
+      } else
+        l = this.moveNode(i, { ...i, y: t.y + t.h, skip: e, ...n });
+      if (!l)
+        return o;
+      i = void 0;
+    }
+    return o;
+  }
+  /** return the nodes that intercept the given node. Optionally a different area can be used, as well as a second node to skip */
+  collide(e, t = e, i) {
+    const s = e._id, r = i == null ? void 0 : i._id;
+    return this.nodes.find((o) => o._id !== s && o._id !== r && u.isIntercepted(o, t));
+  }
+  collideAll(e, t = e, i) {
+    const s = e._id, r = i == null ? void 0 : i._id;
+    return this.nodes.filter((o) => o._id !== s && o._id !== r && u.isIntercepted(o, t));
+  }
+  /** does a pixel coverage collision based on where we started, returning the node that has the most coverage that is >50% mid line */
+  directionCollideCoverage(e, t, i) {
+    if (!t.rect || !e._rect)
+      return;
+    const s = e._rect, r = { ...t.rect };
+    r.y > s.y ? (r.h += r.y - s.y, r.y = s.y) : r.h += s.y - r.y, r.x > s.x ? (r.w += r.x - s.x, r.x = s.x) : r.w += s.x - r.x;
+    let o, n = 0.5;
+    for (let h of i) {
+      if (h.locked || !h._rect)
+        break;
+      const l = h._rect;
+      let d = Number.MAX_VALUE, a = Number.MAX_VALUE;
+      s.y < l.y ? d = (r.y + r.h - l.y) / l.h : s.y + s.h > l.y + l.h && (d = (l.y + l.h - r.y) / l.h), s.x < l.x ? a = (r.x + r.w - l.x) / l.w : s.x + s.w > l.x + l.w && (a = (l.x + l.w - r.x) / l.w);
+      const f = Math.min(a, d);
+      f > n && (n = f, o = h);
+    }
+    return t.collide = o, o;
+  }
+  /** does a pixel coverage returning the node that has the most coverage by area */
+  /*
+  protected collideCoverage(r: GridStackPosition, collides: GridStackNode[]): {collide: GridStackNode, over: number} {
+    const collide: GridStackNode;
+    const overMax = 0;
+    collides.forEach(n => {
+      if (n.locked || !n._rect) return;
+      const over = Utils.areaIntercept(r, n._rect);
+      if (over > overMax) {
+        overMax = over;
+        collide = n;
+      }
+    });
+    return {collide, over: overMax};
+  }
+  */
+  /** called to cache the nodes pixel rectangles used for collision detection during drag */
+  cacheRects(e, t, i, s, r, o) {
+    return this.nodes.forEach((n) => n._rect = {
+      y: n.y * t + i,
+      x: n.x * e + o,
+      w: n.w * e - o - s,
+      h: n.h * t - i - r
+    }), this;
+  }
+  /** called to possibly swap between 2 nodes (same size or column, not locked, touching), returning true if successful */
+  swap(e, t) {
+    if (!t || t.locked || !e || e.locked)
+      return !1;
+    function i() {
+      const r = t.x, o = t.y;
+      return t.x = e.x, t.y = e.y, e.h != t.h ? (e.x = r, e.y = t.y + t.h) : e.w != t.w ? (e.x = t.x + t.w, e.y = o) : (e.x = r, e.y = o), e._dirty = t._dirty = !0, !0;
+    }
+    let s;
+    if (e.w === t.w && e.h === t.h && (e.x === t.x || e.y === t.y) && (s = u.isTouching(e, t)))
+      return i();
+    if (s !== !1) {
+      if (e.w === t.w && e.x === t.x && (s || (s = u.isTouching(e, t)))) {
+        if (t.y < e.y) {
+          const r = e;
+          e = t, t = r;
+        }
+        return i();
+      }
+      if (s !== !1) {
+        if (e.h === t.h && e.y === t.y && (s || (s = u.isTouching(e, t)))) {
+          if (t.x < e.x) {
+            const r = e;
+            e = t, t = r;
+          }
+          return i();
+        }
+        return !1;
+      }
+    }
+  }
+  isAreaEmpty(e, t, i, s) {
+    const r = { x: e || 0, y: t || 0, w: i || 1, h: s || 1 };
+    return !this.collide(r);
+  }
+  /** re-layout grid items to reclaim any empty space - optionally keeping the sort order exactly the same ('list' mode) vs truly finding an empty spaces */
+  compact(e = "compact", t = !0) {
+    if (this.nodes.length === 0)
+      return this;
+    t && this.sortNodes();
+    const i = this.batchMode;
+    i || this.batchUpdate();
+    const s = this._inColumnResize;
+    s || (this._inColumnResize = !0);
+    const r = this.nodes;
+    return this.nodes = [], r.forEach((o, n, h) => {
+      let l;
+      o.locked || (o.autoPosition = !0, e === "list" && n && (l = h[n - 1])), this.addNode(o, !1, l);
+    }), s || delete this._inColumnResize, i || this.batchUpdate(!1), this;
+  }
+  /** enable/disable floating widgets (default: `false`) See [example](http://gridstackjs.com/demo/float.html) */
+  set float(e) {
+    this._float !== e && (this._float = e || !1, e || this._packNodes()._notify());
+  }
+  /** float getter method */
+  get float() {
+    return this._float || !1;
+  }
+  /** sort the nodes array from first to last, or reverse. Called during collision/placement to force an order */
+  sortNodes(e = 1) {
+    return this.nodes = u.sort(this.nodes, e), this;
+  }
+  /** @internal called to top gravity pack the items back OR revert back to original Y positions when floating */
+  _packNodes() {
+    return this.batchMode ? this : (this.sortNodes(), this.float ? this.nodes.forEach((e) => {
+      if (e._updating || e._orig === void 0 || e.y === e._orig.y)
+        return;
+      let t = e.y;
+      for (; t > e._orig.y; )
+        --t, this.collide(e, { x: e.x, y: t, w: e.w, h: e.h }) || (e._dirty = !0, e.y = t);
+    }) : this.nodes.forEach((e, t) => {
+      if (!e.locked)
+        for (; e.y > 0; ) {
+          const i = t === 0 ? 0 : e.y - 1;
+          if (!(t === 0 || !this.collide(e, { x: e.x, y: i, w: e.w, h: e.h })))
+            break;
+          e._dirty = e.y !== i, e.y = i;
+        }
+    }), this);
+  }
+  /**
+   * given a random node, makes sure it's coordinates/values are valid in the current grid
+   * @param node to adjust
+   * @param resizing if out of bound, resize down or move into the grid to fit ?
+   */
+  prepareNode(e, t) {
+    e._id = e._id ?? re._idSeq++;
+    const i = e.id;
+    if (i) {
+      let r = 1;
+      for (; this.nodes.find((o) => o.id === e.id && o !== e); )
+        e.id = i + "_" + r++;
+    }
+    (e.x === void 0 || e.y === void 0 || e.x === null || e.y === null) && (e.autoPosition = !0);
+    const s = { x: 0, y: 0, w: 1, h: 1 };
+    return u.defaults(e, s), e.autoPosition || delete e.autoPosition, e.noResize || delete e.noResize, e.noMove || delete e.noMove, u.sanitizeMinMax(e), typeof e.x == "string" && (e.x = Number(e.x)), typeof e.y == "string" && (e.y = Number(e.y)), typeof e.w == "string" && (e.w = Number(e.w)), typeof e.h == "string" && (e.h = Number(e.h)), isNaN(e.x) && (e.x = s.x, e.autoPosition = !0), isNaN(e.y) && (e.y = s.y, e.autoPosition = !0), isNaN(e.w) && (e.w = s.w), isNaN(e.h) && (e.h = s.h), this.nodeBoundFix(e, t), e;
+  }
+  /** part2 of preparing a node to fit inside our grid - checks for x,y,w from grid dimensions */
+  nodeBoundFix(e, t) {
+    const i = e._orig || u.copyPos({}, e);
+    if (e.maxW && (e.w = Math.min(e.w || 1, e.maxW)), e.maxH && (e.h = Math.min(e.h || 1, e.maxH)), e.minW && (e.w = Math.max(e.w || 1, e.minW)), e.minH && (e.h = Math.max(e.h || 1, e.minH)), (e.x || 0) + (e.w || 1) > this.column && this.column < this.defaultColumn && !this._inColumnResize && !this.skipCacheUpdate && e._id && this.findCacheLayout(e, this.defaultColumn) === -1) {
+      const r = { ...e };
+      r.autoPosition || r.x === void 0 ? (delete r.x, delete r.y) : r.x = Math.min(this.defaultColumn - 1, r.x), r.w = Math.min(this.defaultColumn, r.w || 1), this.cacheOneLayout(r, this.defaultColumn);
+    }
+    return e.w > this.column ? e.w = this.column : e.w < 1 && (e.w = 1), this.maxRow && e.h > this.maxRow ? e.h = this.maxRow : e.h < 1 && (e.h = 1), e.x < 0 && (e.x = 0), e.y < 0 && (e.y = 0), e.x + e.w > this.column && (t ? e.w = this.column - e.x : e.x = this.column - e.w), this.maxRow && e.y + e.h > this.maxRow && (t ? e.h = this.maxRow - e.y : e.y = this.maxRow - e.h), u.samePos(e, i) || (e._dirty = !0), this;
+  }
+  /** returns a list of modified nodes from their original values */
+  getDirtyNodes(e) {
+    return e ? this.nodes.filter((t) => t._dirty && !u.samePos(t, t._orig)) : this.nodes.filter((t) => t._dirty);
+  }
+  /** @internal call this to call onChange callback with dirty nodes so DOM can be updated */
+  _notify(e) {
+    if (this.batchMode || !this.onChange)
+      return this;
+    const t = (e || []).concat(this.getDirtyNodes());
+    return this.onChange(t), this;
+  }
+  /** @internal remove dirty and last tried info */
+  cleanNodes() {
+    return this.batchMode ? this : (this.nodes.forEach((e) => {
+      delete e._dirty, delete e._lastTried;
+    }), this);
+  }
+  /** @internal called to save initial position/size to track real dirty state.
+   * Note: should be called right after we call change event (so next API is can detect changes)
+   * as well as right before we start move/resize/enter (so we can restore items to prev values) */
+  saveInitial() {
+    return this.nodes.forEach((e) => {
+      e._orig = u.copyPos({}, e), delete e._dirty;
+    }), this._hasLocked = this.nodes.some((e) => e.locked), this;
+  }
+  /** @internal restore all the nodes back to initial values (called when we leave) */
+  restoreInitial() {
+    return this.nodes.forEach((e) => {
+      !e._orig || u.samePos(e, e._orig) || (u.copyPos(e, e._orig), e._dirty = !0);
+    }), this._notify(), this;
+  }
+  /** find the first available empty spot for the given node width/height, updating the x,y attributes. return true if found.
+   * optionally you can pass your own existing node list and column count, otherwise defaults to that engine data.
+   * Optionally pass a widget to start search AFTER, meaning the order will remain the same but possibly have empty slots we skipped
+   */
+  findEmptyPosition(e, t = this.nodes, i = this.column, s) {
+    const r = s ? s.y * i + (s.x + s.w) : 0;
+    let o = !1;
+    for (let n = r; !o; ++n) {
+      const h = n % i, l = Math.floor(n / i);
+      if (h + e.w > i)
+        continue;
+      const d = { x: h, y: l, w: e.w, h: e.h };
+      t.find((a) => u.isIntercepted(d, a)) || ((e.x !== h || e.y !== l) && (e._dirty = !0), e.x = h, e.y = l, delete e.autoPosition, o = !0);
+    }
+    return o;
+  }
+  /** call to add the given node to our list, fixing collision and re-packing */
+  addNode(e, t = !1, i) {
+    const s = this.nodes.find((o) => o._id === e._id);
+    if (s)
+      return s;
+    this._inColumnResize ? this.nodeBoundFix(e) : this.prepareNode(e), delete e._temporaryRemoved, delete e._removeDOM;
+    let r;
+    return e.autoPosition && this.findEmptyPosition(e, this.nodes, this.column, i) && (delete e.autoPosition, r = !0), this.nodes.push(e), t && this.addedNodes.push(e), r || this._fixCollisions(e), this.batchMode || this._packNodes()._notify(), e;
+  }
+  removeNode(e, t = !0, i = !1) {
+    return this.nodes.find((s) => s._id === e._id) ? (i && this.removedNodes.push(e), t && (e._removeDOM = !0), this.nodes = this.nodes.filter((s) => s._id !== e._id), e._isAboutToRemove || this._packNodes(), this._notify([e]), this) : this;
+  }
+  removeAll(e = !0, t = !0) {
+    if (delete this._layouts, !this.nodes.length)
+      return this;
+    e && this.nodes.forEach((s) => s._removeDOM = !0);
+    const i = this.nodes;
+    return this.removedNodes = t ? i : [], this.nodes = [], this._notify(i);
+  }
+  /** checks if item can be moved (layout constrain) vs moveNode(), returning true if was able to move.
+   * In more complicated cases (maxRow) it will attempt at moving the item and fixing
+   * others in a clone first, then apply those changes if still within specs. */
+  moveNodeCheck(e, t) {
+    if (!this.changedPosConstrain(e, t))
+      return !1;
+    if (t.pack = !0, !this.maxRow)
+      return this.moveNode(e, t);
+    let i;
+    const s = new re({
+      column: this.column,
+      float: this.float,
+      nodes: this.nodes.map((o) => o._id === e._id ? (i = { ...o }, i) : { ...o })
+    });
+    if (!i)
+      return !1;
+    const r = s.moveNode(i, t) && s.getRow() <= Math.max(this.getRow(), this.maxRow);
+    if (!r && !t.resizing && t.collide) {
+      const o = t.collide.el.gridstackNode;
+      if (this.swap(e, o))
+        return this._notify(), !0;
+    }
+    return r ? (s.nodes.filter((o) => o._dirty).forEach((o) => {
+      const n = this.nodes.find((h) => h._id === o._id);
+      n && (u.copyPos(n, o), n._dirty = !0);
+    }), this._notify(), !0) : !1;
+  }
+  /** return true if can fit in grid height constrain only (always true if no maxRow) */
+  willItFit(e) {
+    if (delete e._willFitPos, !this.maxRow)
+      return !0;
+    const t = new re({
+      column: this.column,
+      float: this.float,
+      nodes: this.nodes.map((s) => ({ ...s }))
+    }), i = { ...e };
+    return this.cleanupNode(i), delete i.el, delete i._id, delete i.content, delete i.grid, t.addNode(i), t.getRow() <= this.maxRow ? (e._willFitPos = u.copyPos({}, i), !0) : !1;
+  }
+  /** true if x,y or w,h are different after clamping to min/max */
+  changedPosConstrain(e, t) {
+    return t.w = t.w || e.w, t.h = t.h || e.h, e.x !== t.x || e.y !== t.y ? !0 : (e.maxW && (t.w = Math.min(t.w, e.maxW)), e.maxH && (t.h = Math.min(t.h, e.maxH)), e.minW && (t.w = Math.max(t.w, e.minW)), e.minH && (t.h = Math.max(t.h, e.minH)), e.w !== t.w || e.h !== t.h);
+  }
+  /** return true if the passed in node was actually moved (checks for no-op and locked) */
+  moveNode(e, t) {
+    var l, d;
+    if (!e || /*node.locked ||*/
+    !t)
+      return !1;
+    let i;
+    t.pack === void 0 && !this.batchMode && (i = t.pack = !0), typeof t.x != "number" && (t.x = e.x), typeof t.y != "number" && (t.y = e.y), typeof t.w != "number" && (t.w = e.w), typeof t.h != "number" && (t.h = e.h);
+    const s = e.w !== t.w || e.h !== t.h, r = u.copyPos({}, e, !0);
+    if (u.copyPos(r, t), this.nodeBoundFix(r, s), u.copyPos(t, r), !t.forceCollide && u.samePos(e, t))
+      return !1;
+    const o = u.copyPos({}, e), n = this.collideAll(e, r, t.skip);
+    let h = !0;
+    if (n.length) {
+      const a = e._moving && !t.nested;
+      let f = a ? this.directionCollideCoverage(e, t, n) : n[0];
+      if (a && f && ((d = (l = e.grid) == null ? void 0 : l.opts) != null && d.subGridDynamic) && !e.grid._isTemp) {
+        const y = u.areaIntercept(t.rect, f._rect), g = u.area(t.rect), v = u.area(f._rect);
+        y / (g < v ? g : v) > 0.8 && (f.grid.makeSubGrid(f.el, void 0, e), f = void 0);
+      }
+      f ? h = !this._fixCollisions(e, r, f, t) : (h = !1, i && delete t.pack);
+    }
+    return h && !u.samePos(e, r) && (e._dirty = !0, u.copyPos(e, r)), t.pack && this._packNodes()._notify(), !u.samePos(e, o);
+  }
+  getRow() {
+    return this.nodes.reduce((e, t) => Math.max(e, t.y + t.h), 0);
+  }
+  beginUpdate(e) {
+    return e._updating || (e._updating = !0, delete e._skipDown, this.batchMode || this.saveInitial()), this;
+  }
+  endUpdate() {
+    const e = this.nodes.find((t) => t._updating);
+    return e && (delete e._updating, delete e._skipDown), this;
+  }
+  /** saves a copy of the largest column layout (eg 12 even when rendering oneColumnMode) so we don't loose orig layout,
+   * returning a list of widgets for serialization */
+  save(e = !0, t) {
+    var o;
+    const i = (o = this._layouts) == null ? void 0 : o.length, s = i && this.column !== i - 1 ? this._layouts[i - 1] : null, r = [];
+    return this.sortNodes(), this.nodes.forEach((n) => {
+      const h = s == null ? void 0 : s.find((d) => d._id === n._id), l = { ...n, ...h || {} };
+      u.removeInternalForSave(l, !e), t && t(n, l), r.push(l);
+    }), r;
+  }
+  /** @internal called whenever a node is added or moved - updates the cached layouts */
+  layoutsNodesChange(e) {
+    return !this._layouts || this._inColumnResize ? this : (this._layouts.forEach((t, i) => {
+      if (!t || i === this.column)
+        return this;
+      if (i < this.column)
+        this._layouts[i] = void 0;
+      else {
+        const s = i / this.column;
+        e.forEach((r) => {
+          if (!r._orig)
+            return;
+          const o = t.find((n) => n._id === r._id);
+          o && (o.y >= 0 && r.y !== r._orig.y && (o.y += r.y - r._orig.y), r.x !== r._orig.x && (o.x = Math.round(r.x * s)), r.w !== r._orig.w && (o.w = Math.round(r.w * s)));
+        });
+      }
+    }), this);
+  }
+  /**
+   * @internal Called to scale the widget width & position up/down based on the column change.
+   * Note we store previous layouts (especially original ones) to make it possible to go
+   * from say 12 -> 1 -> 12 and get back to where we were.
+   *
+   * @param prevColumn previous number of columns
+   * @param column  new column number
+   * @param layout specify the type of re-layout that will happen (position, size, etc...).
+   * Note: items will never be outside of the current column boundaries. default (moveScale). Ignored for 1 column
+   */
+  columnChanged(e, t, i = "moveScale") {
+    var n;
+    if (!this.nodes.length || !t || e === t)
+      return this;
+    const s = i === "compact" || i === "list";
+    s && this.sortNodes(1), t < e && this.cacheLayout(this.nodes, e), this.batchUpdate();
+    let r = [], o = s ? this.nodes : u.sort(this.nodes, -1);
+    if (t > e && this._layouts) {
+      const h = this._layouts[t] || [], l = this._layouts.length - 1;
+      !h.length && e !== l && ((n = this._layouts[l]) != null && n.length) && (e = l, this._layouts[l].forEach((d) => {
+        const a = o.find((f) => f._id === d._id);
+        a && (!s && !d.autoPosition && (a.x = d.x ?? a.x, a.y = d.y ?? a.y), a.w = d.w ?? a.w, (d.x == null || d.y === void 0) && (a.autoPosition = !0));
+      })), h.forEach((d) => {
+        const a = o.findIndex((f) => f._id === d._id);
+        if (a !== -1) {
+          const f = o[a];
+          if (s) {
+            f.w = d.w;
+            return;
+          }
+          (d.autoPosition || isNaN(d.x) || isNaN(d.y)) && this.findEmptyPosition(d, r), d.autoPosition || (f.x = d.x ?? f.x, f.y = d.y ?? f.y, f.w = d.w ?? f.w, r.push(f)), o.splice(a, 1);
+        }
+      });
+    }
+    if (s)
+      this.compact(i, !1);
+    else {
+      if (o.length)
+        if (typeof i == "function")
+          i(t, e, r, o);
+        else {
+          const h = s || i === "none" ? 1 : t / e, l = i === "move" || i === "moveScale", d = i === "scale" || i === "moveScale";
+          o.forEach((a) => {
+            a.x = t === 1 ? 0 : l ? Math.round(a.x * h) : Math.min(a.x, t - 1), a.w = t === 1 || e === 1 ? 1 : d ? Math.round(a.w * h) || 1 : Math.min(a.w, t), r.push(a);
+          }), o = [];
+        }
+      r = u.sort(r, -1), this._inColumnResize = !0, this.nodes = [], r.forEach((h) => {
+        this.addNode(h, !1), delete h._orig;
+      });
+    }
+    return this.nodes.forEach((h) => delete h._orig), this.batchUpdate(!1, !s), delete this._inColumnResize, this;
+  }
+  /**
+   * call to cache the given layout internally to the given location so we can restore back when column changes size
+   * @param nodes list of nodes
+   * @param column corresponding column index to save it under
+   * @param clear if true, will force other caches to be removed (default false)
+   */
+  cacheLayout(e, t, i = !1) {
+    const s = [];
+    return e.forEach((r, o) => {
+      if (r._id === void 0) {
+        const n = r.id ? this.nodes.find((h) => h.id === r.id) : void 0;
+        r._id = (n == null ? void 0 : n._id) ?? re._idSeq++;
+      }
+      s[o] = { x: r.x, y: r.y, w: r.w, _id: r._id };
+    }), this._layouts = i ? [] : this._layouts || [], this._layouts[t] = s, this;
+  }
+  /**
+   * call to cache the given node layout internally to the given location so we can restore back when column changes size
+   * @param node single node to cache
+   * @param column corresponding column index to save it under
+   */
+  cacheOneLayout(e, t) {
+    e._id = e._id ?? re._idSeq++;
+    const i = { x: e.x, y: e.y, w: e.w, _id: e._id };
+    (e.autoPosition || e.x === void 0) && (delete i.x, delete i.y, e.autoPosition && (i.autoPosition = !0)), this._layouts = this._layouts || [], this._layouts[t] = this._layouts[t] || [];
+    const s = this.findCacheLayout(e, t);
+    return s === -1 ? this._layouts[t].push(i) : this._layouts[t][s] = i, this;
+  }
+  findCacheLayout(e, t) {
+    var i, s;
+    return ((s = (i = this._layouts) == null ? void 0 : i[t]) == null ? void 0 : s.findIndex((r) => r._id === e._id)) ?? -1;
+  }
+  removeNodeFromLayoutCache(e) {
+    if (this._layouts)
+      for (let t = 0; t < this._layouts.length; t++) {
+        const i = this.findCacheLayout(e, t);
+        i !== -1 && this._layouts[t].splice(i, 1);
+      }
+  }
+  /** called to remove all internal values but the _id */
+  cleanupNode(e) {
+    for (const t in e)
+      t[0] === "_" && t !== "_id" && delete e[t];
+    return this;
+  }
+}
+re._idSeq = 0;
+const j = {
+  alwaysShowResizeHandle: "mobile",
+  animate: !0,
+  auto: !0,
+  cellHeight: "auto",
+  cellHeightThrottle: 100,
+  cellHeightUnit: "px",
+  column: 12,
+  draggable: { handle: ".grid-stack-item-content", appendTo: "body", scroll: !0 },
+  handle: ".grid-stack-item-content",
+  itemClass: "grid-stack-item",
+  margin: 10,
+  marginUnit: "px",
+  maxRow: 0,
+  minRow: 0,
+  placeholderClass: "grid-stack-placeholder",
+  placeholderText: "",
+  removableOptions: { accept: "grid-stack-item", decline: "grid-stack-non-removable" },
+  resizable: { handles: "se" },
+  rtl: "auto"
+  // **** same as not being set ****
+  // disableDrag: false,
+  // disableResize: false,
+  // float: false,
+  // handleClass: null,
+  // removable: false,
+  // staticGrid: false,
+  // styleInHead: false,
+  //removable
+};
+class w {
+}
+const ie = 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 ne {
+}
+function Oe(c, e) {
+  c.touches.length > 1 || (c.cancelable && c.preventDefault(), u.simulateMouseEvent(c.changedTouches[0], e));
+}
+function Gt(c, e) {
+  c.cancelable && c.preventDefault(), u.simulateMouseEvent(c, e);
+}
+function He(c) {
+  ne.touchHandled || (ne.touchHandled = !0, Oe(c, "mousedown"));
+}
+function Le(c) {
+  ne.touchHandled && Oe(c, "mousemove");
+}
+function Me(c) {
+  if (!ne.touchHandled)
+    return;
+  ne.pointerLeaveTimeout && (window.clearTimeout(ne.pointerLeaveTimeout), delete ne.pointerLeaveTimeout);
+  const e = !!w.dragElement;
+  Oe(c, "mouseup"), e || Oe(c, "click"), ne.touchHandled = !1;
+}
+function Ie(c) {
+  c.pointerType !== "mouse" && c.target.releasePointerCapture(c.pointerId);
+}
+function bt(c) {
+  w.dragElement && c.pointerType !== "mouse" && Gt(c, "mouseenter");
+}
+function wt(c) {
+  w.dragElement && c.pointerType !== "mouse" && (ne.pointerLeaveTimeout = window.setTimeout(() => {
+    delete ne.pointerLeaveTimeout, Gt(c, "mouseleave");
+  }, 10));
+}
+class Be {
+  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(`${Be.prefix}${this.dir}`), e.style.zIndex = "100", e.style.userSelect = "none", this.host.appendChild(this.el), this.el.addEventListener("mousedown", this._mouseDown), ie && (this.el.addEventListener("touchstart", He), this.el.addEventListener("pointerdown", Ie)), 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), ie && (this.el.removeEventListener("touchstart", He), this.el.removeEventListener("pointerdown", Ie)), 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), ie && (this.el.addEventListener("touchmove", Le), this.el.addEventListener("touchend", Me)), e.stopPropagation(), e.preventDefault();
+  }
+  /** @internal */
+  _mouseMove(e) {
+    const t = this.mouseDownEvent;
+    this.moving ? this._triggerEvent("move", e) : Math.abs(e.x - t.x) + Math.abs(e.y - t.y) > 2 && (this.moving = !0, this._triggerEvent("start", this.mouseDownEvent), this._triggerEvent("move", e), document.addEventListener("keydown", this._keyEvent)), e.stopPropagation();
+  }
+  /** @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), ie && (this.el.removeEventListener("touchmove", Le), this.el.removeEventListener("touchend", Me)), delete this.moving, delete this.mouseDownEvent, e.stopPropagation(), e.preventDefault();
+  }
+  /** @internal call when keys are being pressed - use Esc to cancel */
+  _keyEvent(e) {
+    var t, i;
+    e.key === "Escape" && ((i = (t = this.host.gridstackNode) == null ? void 0 : t.grid) == null || i.engine.restoreInitial(), this._mouseUp(this.mouseDownEvent));
+  }
+  /** @internal */
+  _triggerEvent(e, t) {
+    return this.option[e] && this.option[e](t), this;
+  }
+}
+Be.prefix = "ui-resizable-";
+class Je {
+  constructor() {
+    this._eventRegister = {};
+  }
+  /** returns the enable state, but you have to call enable()/disable() to change (as other things need to happen) */
+  get disabled() {
+    return this._disabled;
+  }
+  on(e, t) {
+    this._eventRegister[e] = t;
+  }
+  off(e) {
+    delete this._eventRegister[e];
+  }
+  enable() {
+    this._disabled = !1;
+  }
+  disable() {
+    this._disabled = !0;
+  }
+  destroy() {
+    delete this._eventRegister;
+  }
+  triggerEvent(e, t) {
+    if (!this.disabled && this._eventRegister && this._eventRegister[e])
+      return this._eventRegister[e](t);
+  }
+}
+class xe extends Je {
+  // 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 = () => {
+      const s = this.el.parentElement.getBoundingClientRect(), r = {
+        width: this.originalRect.width,
+        height: this.originalRect.height + this.scrolled,
+        left: this.originalRect.left,
+        top: this.originalRect.top - this.scrolled
+      }, o = this.temporalRect || r;
+      return {
+        position: {
+          left: (o.left - s.left) * this.rectScale.x,
+          top: (o.top - s.top) * this.rectScale.y
+        },
+        size: {
+          width: o.width * this.rectScale.x,
+          height: o.height * this.rectScale.y
+        }
+        /* Gridstack ONLY needs position set above... keep around in case.
+        element: [this.el], // The object representing the element to be resized
+        helper: [], // TODO: not support yet - The object representing the helper that's being resized
+        originalElement: [this.el],// we don't wrap here, so simplify as this.el //The object representing the original element before it is wrapped
+        originalPosition: { // The position represented as { left, top } before the resizable is resized
+          left: this.originalRect.left - containmentRect.left,
+          top: this.originalRect.top - containmentRect.top
+        },
+        originalSize: { // The size represented as { width, height } before the resizable is resized
+          width: this.originalRect.width,
+          height: this.originalRect.height
+        }
+        */
+      };
+    }, this._mouseOver = this._mouseOver.bind(this), this._mouseOut = this._mouseOut.bind(this), this.enable(), this._setupAutoHide(this.option.autoHide), this._setupHandlers();
+  }
+  on(e, t) {
+    super.on(e, t);
+  }
+  off(e) {
+    super.off(e);
+  }
+  enable() {
+    super.enable(), this.el.classList.remove("ui-resizable-disabled"), this._setupAutoHide(this.option.autoHide);
+  }
+  disable() {
+    super.disable(), this.el.classList.add("ui-resizable-disabled"), this._setupAutoHide(!1);
+  }
+  destroy() {
+    this._removeHandlers(), this._setupAutoHide(!1), delete this.el, super.destroy();
+  }
+  updateOption(e) {
+    const t = e.handles && e.handles !== this.option.handles, i = e.autoHide && e.autoHide !== this.option.autoHide;
+    return Object.keys(e).forEach((s) => this.option[s] = e[s]), t && (this._removeHandlers(), this._setupHandlers()), i && this._setupAutoHide(this.option.autoHide), this;
+  }
+  /** @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), w.overResizeElement === this && delete w.overResizeElement), this;
+  }
+  /** @internal */
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  _mouseOver(e) {
+    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) {
+    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 Be(this.el, e, {
+      start: (t) => {
+        this._resizeStart(t);
+      },
+      stop: (t) => {
+        this._resizeStop(t);
+      },
+      move: (t) => {
+        this._resizing(t, e);
+      }
+    })), this;
+  }
+  /** @internal */
+  _resizeStart(e) {
+    this.sizeToContent = u.shouldSizeToContent(this.el.gridstackNode, !0), this.originalRect = this.el.getBoundingClientRect(), this.scrollEl = u.getScrollElement(this.el), this.scrollY = this.scrollEl.scrollTop, this.scrolled = 0, this.startEvent = e, this._setupHelper(), this._applyChange();
+    const t = u.initEvent(e, { type: "resizestart", target: this.el });
+    return this.option.start && this.option.start(t, this._ui()), this.el.classList.add("ui-resizable-resizing"), this.triggerEvent("resizestart", t), this;
+  }
+  /** @internal */
+  _resizing(e, t) {
+    this.scrolled = this.scrollEl.scrollTop - this.scrollY, this.temporalRect = this._getChange(e, t), this._applyChange();
+    const i = u.initEvent(e, { type: "resize", target: this.el });
+    return this.option.resize && this.option.resize(i, this._ui()), this.triggerEvent("resize", i), this;
+  }
+  /** @internal */
+  _resizeStop(e) {
+    const t = u.initEvent(e, { type: "resizestop", target: this.el });
+    return this.option.stop && this.option.stop(t), this.el.classList.remove("ui-resizable-resizing"), this.triggerEvent("resizestop", t), this._cleanHelper(), delete this.startEvent, delete this.originalRect, delete this.temporalRect, delete this.scrollY, delete this.scrolled, this;
+  }
+  /** @internal */
+  _setupHelper() {
+    this.elOriginStyleVal = xe._originStyleProp.map((i) => this.el.style[i]), this.parentOriginStylePosition = this.el.parentElement.style.position;
+    const e = this.el.parentElement, t = u.getValuesFromTransformedElement(e);
+    return this.rectScale = {
+      x: t.xScale,
+      y: t.yScale
+    }, getComputedStyle(this.el.parentElement).position.match(/static/) && (this.el.parentElement.style.position = "relative"), this.el.style.position = "absolute", this.el.style.opacity = "0.8", this;
+  }
+  /** @internal */
+  _cleanHelper() {
+    return xe._originStyleProp.forEach((e, t) => {
+      this.el.style[e] = this.elOriginStyleVal[t] || null;
+    }), this.el.parentElement.style.position = this.parentOriginStylePosition || null, this;
+  }
+  /** @internal */
+  _getChange(e, t) {
+    const i = this.startEvent, s = {
+      width: this.originalRect.width,
+      height: this.originalRect.height + this.scrolled,
+      left: this.originalRect.left,
+      top: this.originalRect.top - this.scrolled
+    }, r = e.clientX - i.clientX, o = this.sizeToContent ? 0 : e.clientY - i.clientY;
+    let n, h;
+    t.indexOf("e") > -1 ? s.width += r : t.indexOf("w") > -1 && (s.width -= r, s.left += r, n = !0), t.indexOf("s") > -1 ? s.height += o : t.indexOf("n") > -1 && (s.height -= o, s.top += o, h = !0);
+    const l = this._constrainSize(s.width, s.height, n, h);
+    return Math.round(s.width) !== Math.round(l.width) && (t.indexOf("w") > -1 && (s.left += s.width - l.width), s.width = l.width), Math.round(s.height) !== Math.round(l.height) && (t.indexOf("n") > -1 && (s.top += s.height - l.height), s.height = l.height), s;
+  }
+  /** @internal constrain the size to the set min/max values */
+  _constrainSize(e, t, i, s) {
+    const r = this.option, o = (i ? r.maxWidthMoveLeft : r.maxWidth) || Number.MAX_SAFE_INTEGER, n = r.minWidth / this.rectScale.x || e, h = (s ? r.maxHeightMoveUp : r.maxHeight) || Number.MAX_SAFE_INTEGER, l = r.minHeight / this.rectScale.y || t, d = Math.min(o, Math.max(n, e)), a = Math.min(h, Math.max(l, t));
+    return { width: d, height: a };
+  }
+  /** @internal */
+  _applyChange() {
+    let e = { left: 0, top: 0, width: 0, height: 0 };
+    if (this.el.style.position === "absolute") {
+      const t = this.el.parentElement, { left: i, top: s } = t.getBoundingClientRect();
+      e = { left: i, top: s, width: 0, height: 0 };
+    }
+    return this.temporalRect ? (Object.keys(this.temporalRect).forEach((t) => {
+      const i = this.temporalRect[t], s = t === "width" || t === "left" ? this.rectScale.x : t === "height" || t === "top" ? this.rectScale.y : 1;
+      this.el.style[t] = (i - e[t]) * s + "px";
+    }), this) : this;
+  }
+  /** @internal */
+  _removeHandlers() {
+    return this.handlers.forEach((e) => e.destroy()), delete this.handlers, this;
+  }
+}
+xe._originStyleProp = ["width", "height", "position", "left", "top", "opacity", "zIndex"];
+const _s = 'input,textarea,button,select,option,[contenteditable="true"],.ui-resizable-handle';
+class Ce extends Je {
+  constructor(e, t = {}) {
+    var r;
+    super(), this.el = e, this.option = t, this.dragTransform = {
+      xScale: 1,
+      yScale: 1,
+      xOffset: 0,
+      yOffset: 0
+    };
+    const i = (r = t == null ? void 0 : t.handle) == null ? void 0 : r.substring(1), s = e.gridstackNode;
+    this.dragEls = !i || e.classList.contains(i) ? [e] : s != null && s.subGrid ? [e.querySelector(t.handle) || e] : Array.from(e.querySelectorAll(t.handle)), this.dragEls.length === 0 && (this.dragEls = [e]), 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.enable();
+  }
+  on(e, t) {
+    super.on(e, t);
+  }
+  off(e) {
+    super.off(e);
+  }
+  enable() {
+    this.disabled !== !1 && (super.enable(), this.dragEls.forEach((e) => {
+      e.addEventListener("mousedown", this._mouseDown), ie && (e.addEventListener("touchstart", He), e.addEventListener("pointerdown", Ie));
+    }), this.el.classList.remove("ui-draggable-disabled"));
+  }
+  disable(e = !1) {
+    this.disabled !== !0 && (super.disable(), this.dragEls.forEach((t) => {
+      t.removeEventListener("mousedown", this._mouseDown), ie && (t.removeEventListener("touchstart", He), t.removeEventListener("pointerdown", Ie));
+    }), e || this.el.classList.add("ui-draggable-disabled"));
+  }
+  destroy() {
+    this.dragTimeout && window.clearTimeout(this.dragTimeout), delete this.dragTimeout, this.mouseDownEvent && this._mouseUp(this.mouseDownEvent), this.disable(!0), delete this.el, delete this.helper, delete this.option, super.destroy();
+  }
+  updateOption(e) {
+    return Object.keys(e).forEach((t) => this.option[t] = e[t]), this;
+  }
+  /** @internal call when mouse goes down before a dragstart happens */
+  _mouseDown(e) {
+    if (!w.mouseHandled)
+      return e.button !== 0 || !this.dragEls.find((t) => t === e.target) && e.target.closest(_s) || 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), ie && (e.currentTarget.addEventListener("touchmove", Le), e.currentTarget.addEventListener("touchend", Me)), e.preventDefault(), document.activeElement && document.activeElement.blur(), w.mouseHandled = !0), !0;
+  }
+  /** @internal method to call actual drag event */
+  _callDrag(e) {
+    if (!this.dragging)
+      return;
+    const t = u.initEvent(e, { target: this.el, type: "drag" });
+    this.option.drag && this.option.drag(t, this.ui()), this.triggerEvent("drag", t);
+  }
+  /** @internal called when the main page (after successful mousedown) receives a move event to drag the item around the screen */
+  _mouseMove(e) {
+    var i;
+    const t = this.mouseDownEvent;
+    if (this.lastDrag = e, this.dragging)
+      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, w.dragElement = this;
+      const s = (i = this.el.gridstackNode) == null ? void 0 : i.grid;
+      s ? w.dropElement = s.el.ddElement.ddDroppable : delete w.dropElement, this.helper = this._createHelper(), this._setupHelperContainmentStyle(), this.dragTransform = u.getValuesFromTransformedElement(this.helperContainment), this.dragOffset = this._getDragOffset(e, this.el, this.helperContainment), this._setupHelperStyle(e);
+      const r = u.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);
+    }
+    return !0;
+  }
+  /** @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), ie && e.currentTarget && (e.currentTarget.removeEventListener("touchmove", Le, !0), e.currentTarget.removeEventListener("touchend", Me, !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 = u.initEvent(e, { target: this.el, type: "dragstop" });
+      this.option.stop && this.option.stop(s), this.triggerEvent("dragstop", s), w.dropElement && w.dropElement.drop(e);
+    }
+    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 = 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")) {
+      if (!u.canBeRotated(t))
+        return;
+      t._origRotate = t._origRotate || { ...t._orig }, delete t._moving, i.setAnimation(!1).rotate(t.el, { top: -this.dragOffset.offsetTop, left: -this.dragOffset.offsetLeft }).setAnimation(), t._moving = !0, this.dragOffset = this._getDragOffset(this.lastDrag, t.el, this.helperContainment), this.helper.style.width = this.dragOffset.width + "px", this.helper.style.height = this.dragOffset.height + "px", u.swap(t._orig, "w", "h"), delete t._rect, this._mouseMove(this.lastDrag);
+    }
+  }
+  /** @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 = u.cloneNode(this.el)), e.parentElement || u.appendTo(e, this.option.appendTo === "parent" ? this.el.parentElement : this.option.appendTo), this.dragElementOriginStyle = Ce.originStyleProp.map((t) => this.el.style[t]), e;
+  }
+  /** @internal set the fix position of the dragged item */
+  _setupHelperStyle(e) {
+    this.helper.classList.add("ui-draggable-dragging");
+    const t = this.helper.style;
+    return t.pointerEvents = "none", t.width = this.dragOffset.width + "px", t.height = this.dragOffset.height + "px", t.willChange = "left, top", t.position = "fixed", this._dragFollow(e), t.transition = "none", setTimeout(() => {
+      this.helper && (t.transition = null);
+    }, 0), this;
+  }
+  /** @internal restore back the original style before dragging */
+  _removeHelperStyle() {
+    var t;
+    this.helper.classList.remove("ui-draggable-dragging");
+    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", Ce.originStyleProp.forEach((r) => i.style[r] = this.dragElementOriginStyle[r] || null), setTimeout(() => i.style.transition = s, 50);
+    }
+    return delete this.dragElementOriginStyle, this;
+  }
+  /** @internal updates the top/left position to follow the mouse */
+  _dragFollow(e) {
+    const t = { left: 0, top: 0 }, i = this.helper.style, s = this.dragOffset;
+    i.left = (e.clientX + s.offsetLeft - t.left) * this.dragTransform.xScale + "px", i.top = (e.clientY + s.offsetTop - t.top) * this.dragTransform.yScale + "px";
+  }
+  /** @internal */
+  _setupHelperContainmentStyle() {
+    return this.helperContainment = this.helper.parentElement, this.helper.style.position !== "fixed" && (this.parentOriginStylePosition = this.helperContainment.style.position, getComputedStyle(this.helperContainment).position.match(/static/) && (this.helperContainment.style.position = "relative")), this;
+  }
+  /** @internal */
+  _getDragOffset(e, t, i) {
+    let s = 0, r = 0;
+    i && (s = this.dragTransform.xOffset, r = this.dragTransform.yOffset);
+    const o = t.getBoundingClientRect();
+    return {
+      left: o.left,
+      top: o.top,
+      offsetLeft: -e.clientX + o.left - s,
+      offsetTop: -e.clientY + o.top - r,
+      width: o.width * this.dragTransform.xScale,
+      height: o.height * this.dragTransform.yScale
+    };
+  }
+  /** @internal TODO: set to public as called by DDDroppable! */
+  ui() {
+    const t = this.el.parentElement.getBoundingClientRect(), i = this.helper.getBoundingClientRect();
+    return {
+      position: {
+        top: (i.top - t.top) * this.dragTransform.yScale,
+        left: (i.left - t.left) * this.dragTransform.xScale
+      }
+      /* not used by GridStack for now...
+      helper: [this.helper], //The object arr representing the helper that's being dragged.
+      offset: { top: offset.top, left: offset.left } // Current offset position of the helper as { top, left } object.
+      */
+    };
+  }
+}
+Ce.originStyleProp = ["width", "height", "transform", "transform-origin", "transition", "pointerEvents", "position", "left", "top", "minWidth", "willChange"];
+class bs extends Je {
+  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();
+  }
+  on(e, t) {
+    super.on(e, t);
+  }
+  off(e) {
+    super.off(e);
+  }
+  enable() {
+    this.disabled !== !1 && (super.enable(), this.el.classList.add("ui-droppable"), this.el.classList.remove("ui-droppable-disabled"), this.el.addEventListener("mouseenter", this._mouseEnter), this.el.addEventListener("mouseleave", this._mouseLeave), ie && (this.el.addEventListener("pointerenter", bt), this.el.addEventListener("pointerleave", wt)));
+  }
+  disable(e = !1) {
+    this.disabled !== !0 && (super.disable(), this.el.classList.remove("ui-droppable"), e || this.el.classList.add("ui-droppable-disabled"), this.el.removeEventListener("mouseenter", this._mouseEnter), this.el.removeEventListener("mouseleave", this._mouseLeave), ie && (this.el.removeEventListener("pointerenter", bt), this.el.removeEventListener("pointerleave", wt)));
+  }
+  destroy() {
+    this.disable(!0), this.el.classList.remove("ui-droppable"), this.el.classList.remove("ui-droppable-disabled"), super.destroy();
+  }
+  updateOption(e) {
+    return Object.keys(e).forEach((t) => this.option[t] = e[t]), this._setupAccept(), this;
+  }
+  /** @internal called when the cursor enters our area - prepare for a possible drop and track leaving */
+  _mouseEnter(e) {
+    if (!w.dragElement || !this._canDrop(w.dragElement.el))
+      return;
+    e.preventDefault(), e.stopPropagation(), w.dropElement && w.dropElement !== this && w.dropElement._mouseLeave(e, !0), w.dropElement = this;
+    const t = u.initEvent(e, { target: this.el, type: "dropover" });
+    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 (!w.dragElement || w.dropElement !== this)
+      return;
+    e.preventDefault(), e.stopPropagation();
+    const i = u.initEvent(e, { target: this.el, type: "dropout" });
+    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;
+      r && r._mouseEnter(e);
+    }
+  }
+  /** item is being dropped on us - called by the drag mouseup handler - this calls the client drop event */
+  drop(e) {
+    e.preventDefault();
+    const t = u.initEvent(e, { target: this.el, type: "drop" });
+    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) {
+    return e && (!this.accept || this.accept(e));
+  }
+  /** @internal */
+  _setupAccept() {
+    return this.option.accept ? (typeof this.option.accept == "string" ? this.accept = (e) => e.classList.contains(this.option.accept) || e.matches(this.option.accept) : this.accept = this.option.accept, this) : this;
+  }
+  /** @internal */
+  _ui(e) {
+    return {
+      draggable: e.el,
+      ...e.ui()
+    };
+  }
+}
+class et {
+  static init(e) {
+    return e.ddElement || (e.ddElement = new et(e)), e.ddElement;
+  }
+  constructor(e) {
+    this.el = e;
+  }
+  on(e, t) {
+    return this.ddDraggable && ["drag", "dragstart", "dragstop"].indexOf(e) > -1 ? this.ddDraggable.on(e, t) : this.ddDroppable && ["drop", "dropover", "dropout"].indexOf(e) > -1 ? this.ddDroppable.on(e, t) : this.ddResizable && ["resizestart", "resize", "resizestop"].indexOf(e) > -1 && this.ddResizable.on(e, t), this;
+  }
+  off(e) {
+    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 Ce(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 xe(this.el, e), this;
+  }
+  cleanResizable() {
+    return this.ddResizable && (this.ddResizable.destroy(), delete this.ddResizable), this;
+  }
+  setupDroppable(e) {
+    return this.ddDroppable ? this.ddDroppable.updateOption(e) : this.ddDroppable = new bs(this.el, e), this;
+  }
+  cleanDroppable() {
+    return this.ddDroppable && (this.ddDroppable.destroy(), delete this.ddDroppable), this;
+  }
+}
+class ws {
+  resizable(e, t, i, s) {
+    return this._getDDElements(e, t).forEach((r) => {
+      if (t === "disable" || t === "enable")
+        r.ddResizable && r.ddResizable[t]();
+      else if (t === "destroy")
+        r.ddResizable && r.cleanResizable();
+      else if (t === "option")
+        r.setupResizable({ [i]: s });
+      else {
+        const n = r.el.gridstackNode.grid;
+        let h = r.el.getAttribute("gs-resize-handles") || n.opts.resizable.handles || "e,s,se";
+        h === "all" && (h = "n,e,s,w,se,sw,ne,nw");
+        const l = !n.opts.alwaysShowResizeHandle;
+        r.setupResizable({
+          ...n.opts.resizable,
+          handles: h,
+          autoHide: l,
+          start: t.start,
+          stop: t.stop,
+          resize: t.resize
+        });
+      }
+    }), this;
+  }
+  draggable(e, t, i, s) {
+    return this._getDDElements(e, t).forEach((r) => {
+      if (t === "disable" || t === "enable")
+        r.ddDraggable && r.ddDraggable[t]();
+      else if (t === "destroy")
+        r.ddDraggable && r.cleanDraggable();
+      else if (t === "option")
+        r.setupDraggable({ [i]: s });
+      else {
+        const o = r.el.gridstackNode.grid;
+        r.setupDraggable({
+          ...o.opts.draggable,
+          // containment: (grid.parentGridNode && grid.opts.dragOut === false) ? grid.el.parentElement : (grid.opts.draggable.containment || null),
+          start: t.start,
+          stop: t.stop,
+          drag: t.drag
+        });
+      }
+    }), this;
+  }
+  dragIn(e, t) {
+    return this._getDDElements(e).forEach((i) => i.setupDraggable(t)), this;
+  }
+  droppable(e, t, i, s) {
+    return typeof t.accept == "function" && !t._accept && (t._accept = t.accept, t.accept = (r) => t._accept(r)), this._getDDElements(e, t).forEach((r) => {
+      t === "disable" || t === "enable" ? r.ddDroppable && r.ddDroppable[t]() : t === "destroy" ? r.ddDroppable && r.cleanDroppable() : t === "option" ? r.setupDroppable({ [i]: s }) : r.setupDroppable(t);
+    }), this;
+  }
+  /** true if element is droppable */
+  isDroppable(e) {
+    var t;
+    return !!((t = e == null ? void 0 : e.ddElement) != null && t.ddDroppable && !e.ddElement.ddDroppable.disabled);
+  }
+  /** true if element is draggable */
+  isDraggable(e) {
+    var t;
+    return !!((t = e == null ? void 0 : e.ddElement) != null && t.ddDraggable && !e.ddElement.ddDraggable.disabled);
+  }
+  /** true if element is draggable */
+  isResizable(e) {
+    var t;
+    return !!((t = e == null ? void 0 : e.ddElement) != null && t.ddResizable && !e.ddElement.ddResizable.disabled);
+  }
+  on(e, t, i) {
+    return this._getDDElements(e).forEach((s) => s.on(t, (r) => {
+      i(r, w.dragElement ? w.dragElement.el : r.target, w.dragElement ? w.dragElement.helper : null);
+    })), this;
+  }
+  off(e, t) {
+    return this._getDDElements(e).forEach((i) => i.off(t)), this;
+  }
+  /** @internal returns a list of DD elements, creating them on the fly by default unless option is to destroy or disable */
+  _getDDElements(e, t) {
+    const i = e.gridstack || t !== "destroy" && t !== "disable", s = u.getElements(e);
+    return s.length ? s.map((o) => o.ddElement || (i ? et.init(o) : null)).filter((o) => o) : [];
+  }
+}
+/*!
+ * GridStack 11.5.1
+ * https://gridstackjs.com/
+ *
+ * Copyright (c) 2021-2024  Alain Dumesny
+ * see root license https://github.com/gridstack/gridstack.js/tree/master/LICENSE
+ */
+const W = new ws();
+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
+   * multiple grids initialization at once. Or you can use addGrid() to create the entire grid from JSON.
+   * @param options grid options (optional)
+   * @param elOrString element or CSS selector (first one used) to convert to a grid (default to '.grid-stack' class selector)
+   *
+   * @example
+   * const grid = GridStack.init();
+   *
+   * Note: the HTMLElement (of type GridHTMLElement) will store a `gridstack: GridStack` value that can be retrieve later
+   * const grid = document.querySelector('.grid-stack').gridstack;
+   */
+  static init(e = {}, t = ".grid-stack") {
+    if (typeof document > "u")
+      return null;
+    const i = b.getGridElement(t);
+    return i ? (i.gridstack || (i.gridstack = new b(i, u.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);
+  }
+  /**
+   * Will initialize a list of elements (given a selector) and return an array of grids.
+   * @param options grid options (optional)
+   * @param selector elements selector to convert to grids (default to '.grid-stack' class selector)
+   *
+   * @example
+   * const grids = GridStack.initAll();
+   * grids.forEach(...)
+   */
+  static initAll(e = {}, t = ".grid-stack") {
+    const i = [];
+    return typeof document > "u" || (b.getGridElements(t).forEach((s) => {
+      s.gridstack || (s.gridstack = new b(s, u.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;
+  }
+  /**
+   * call to create a grid with the given options, including loading any children from JSON structure. This will call GridStack.init(), then
+   * grid.load() on any passed children (recursively). Great alternative to calling init() if you want entire grid to come from
+   * JSON serialized data, including options.
+   * @param parent HTML element parent to the grid
+   * @param opt grids options used to initialize the grid, and list of children
+   */
+  static addGrid(e, t = {}) {
+    if (!e)
+      return null;
+    let i = e;
+    if (i.gridstack) {
+      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") || b.addRemoveCB) && (b.addRemoveCB ? i = b.addRemoveCB(e, t, !0, !0) : i = u.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) {
+    b.engineClass = e;
+  }
+  /** @internal create placeholder DIV as needed */
+  get placeholder() {
+    if (!this._placeholder) {
+      this._placeholder = u.createDiv([this.opts.placeholderClass, j.itemClass, this.opts.itemClass]);
+      const e = u.createDiv(["placeholder-content"], this._placeholder);
+      this.opts.placeholderText && (e.textContent = this.opts.placeholderText);
+    }
+    return this._placeholder;
+  }
+  /**
+   * Construct a grid item from the given element and options
+   * @param el the HTML element tied to this grid after it's been initialized
+   * @param opts grid options - public for classes to access, but use methods to modify!
+   */
+  constructor(e, t = {}) {
+    var a, f, y;
+    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 = u.toNumber(e.getAttribute("gs-row"));
+    t.column === "auto" && delete t.column, t.alwaysShowResizeHandle !== void 0 && (t._alwaysShowResizeHandle = t.alwaysShowResizeHandle);
+    let s = (a = t.columnOpts) == null ? void 0 : a.breakpoints;
+    const r = t;
+    if (r.oneColumnModeDomSort && (delete r.oneColumnModeDomSort, console.log("warning: Gridstack oneColumnModeDomSort no longer supported. Use GridStackOptions.columnOpts instead.")), r.oneColumnSize || r.disableOneColumnMode === !1) {
+      const g = r.oneColumnSize || 768;
+      delete r.oneColumnSize, delete r.disableOneColumnMode, t.columnOpts = t.columnOpts || {}, s = t.columnOpts.breakpoints = t.columnOpts.breakpoints || [];
+      let v = s.find((p) => p.c === 1);
+      v ? v.w = g : (v = { c: 1, w: g }, s.push(v, { c: 12, w: g + 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((g, v) => (v.w || 0) - (g.w || 0));
+    const n = {
+      ...u.cloneDeep(j),
+      column: u.toNumber(e.getAttribute("gs-column")) || j.column,
+      minRow: i || u.toNumber(e.getAttribute("gs-min-row")) || j.minRow,
+      maxRow: i || u.toNumber(e.getAttribute("gs-max-row")) || j.maxRow,
+      staticGrid: u.toBool(e.getAttribute("gs-static")) || j.staticGrid,
+      sizeToContent: u.toBool(e.getAttribute("gs-size-to-content")) || void 0,
+      draggable: {
+        handle: (t.handleClass ? "." + t.handleClass : t.handle ? t.handle : "") || j.draggable.handle
+      },
+      removableOptions: {
+        accept: t.itemClass || j.removableOptions.accept,
+        decline: j.removableOptions.decline
+      }
+    };
+    e.getAttribute("gs-animate") && (n.animate = u.toBool(e.getAttribute("gs-animate"))), t = u.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 h = this.el.closest("." + j.itemClass), l = h == null ? void 0 : h.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 !== j.cellHeightUnit && (t.cellHeight = t.cellHeight + t.cellHeightUnit, delete t.cellHeightUnit), this.cellHeight(t.cellHeight, !1)), t.alwaysShowResizeHandle === "mobile" && (t.alwaysShowResizeHandle = ie), this._styleSheetClass = "gs-id-" + re._idSeq++, this.el.classList.add(this._styleSheetClass), this._setStaticClass();
+    const d = t.engineClass || b.engineClass || re;
+    if (this.engine = new d({
+      column: this.getColumn(),
+      float: t.float,
+      maxRow: t.maxRow,
+      onChange: (g) => {
+        let v = 0;
+        this.engine.nodes.forEach((p) => {
+          v = Math.max(v, p.y + p.h);
+        }), g.forEach((p) => {
+          const R = p.el;
+          R && (p._removeDOM ? (R && R.remove(), delete p._removeDOM) : this._writePosAttr(R, p));
+        }), this._updateStyles(!1, v);
+      }
+    }), this._updateStyles(!1, 0), t.auto && (this.batchUpdate(), this.engine._loading = !0, this.getGridItems().forEach((g) => this._prepareElement(g)), delete this.engine._loading, this.batchUpdate(!1)), t.children) {
+      const g = t.children;
+      delete t.children, g.length && this.load(g);
+    }
+    this.setAnimation(), t.subGridDynamic && !w.pauseDrag && (w.pauseDrag = !0), ((y = t.draggable) == null ? void 0 : y.pause) !== void 0 && (w.pauseDrag = t.draggable.pause), this._setupRemoveDrop(), this._setupAcceptWidget(), this._updateResizeEvent();
+  }
+  /**
+   * add a new widget and returns it.
+   *
+   * Widget will be always placed even if result height is more than actual grid height.
+   * You need to use `willItFit()` before calling addWidget for additional check.
+   * See also `makeWidget(el)` for DOM element.
+   *
+   * @example
+   * const grid = GridStack.init();
+   * grid.addWidget({w: 3, content: 'hello'});
+   *
+   * @param w GridStackWidget definition. used MakeWidget(el) if you have dom element instead.
+   */
+  addWidget(e) {
+    if (typeof e == "string") {
+      console.error("V11: GridStack.addWidget() does not support string anymore. see #2736");
+      return;
+    }
+    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 : b.addRemoveCB ? t = b.addRemoveCB(this.el, e, !0, !1) : t = this.createWidgetDivs(i), !t)
+      return;
+    if (i = t.gridstackNode, i && t.parentElement === this.el && this.engine.nodes.find((r) => r._id === i._id))
+      return t;
+    const s = this._readAttr(t);
+    return u.defaults(e, s), this.engine.prepareNode(e), this.el.appendChild(t), this.makeWidget(t, e), t;
+  }
+  /** create the default grid item divs, and content (possibly lazy loaded) by using GridStack.renderCB() */
+  createWidgetDivs(e) {
+    const t = u.createDiv(["grid-stack-item", this.opts.itemClass]), i = u.createDiv(["grid-stack-item-content"], t);
+    return u.lazyLoad(e) ? e.visibleObservable || (e.visibleObservable = new IntersectionObserver(([s]) => {
+      var r, o;
+      s.isIntersecting && ((r = e.visibleObservable) == null || r.disconnect(), delete e.visibleObservable, b.renderCB(i, e), (o = e.grid) == null || o.prepareDragDrop(e.el));
+    }), window.setTimeout(() => {
+      var s;
+      return (s = e.visibleObservable) == null ? void 0 : s.observe(t);
+    })) : b.renderCB(i, e), t;
+  }
+  /**
+   * Convert an existing gridItem element into a sub-grid with the given (optional) options, else inherit them
+   * from the parent's subGrid options.
+   * @param el gridItem element to convert
+   * @param ops (optional) sub-grid options, else default to node, then parent settings, else defaults
+   * @param nodeToAdd (optional) node to add to the newly created sub grid (used when dragging over existing regular item)
+   * @param saveContent if true (default) the html inside .grid-stack-content will be saved to child widget
+   * @returns newly created grid
+   */
+  makeSubGrid(e, t, i, s = !0) {
+    var y, g, v;
+    let r = e.gridstackNode;
+    if (r || (r = this.makeWidget(e).gridstackNode), (y = r.subGrid) != null && y.el)
+      return r.subGrid;
+    let o, n = this;
+    for (; n && !o; )
+      o = (g = n.opts) == null ? void 0 : g.subGridOpts, n = (v = n.parentGridNode) == null ? void 0 : v.grid;
+    t = u.cloneDeep({
+      // by default sub-grid inherit from us | parent, other than id, children, etc...
+      ...this.opts,
+      id: void 0,
+      children: void 0,
+      column: "auto",
+      columnOpts: void 0,
+      layout: "list",
+      subGridOpts: void 0,
+      ...o || {},
+      ...t || r.subGridOpts || {}
+    }), r.subGridOpts = t;
+    let h;
+    t.column === "auto" && (h = !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"), d, a;
+    if (s && (this._removeDD(r.el), a = { ...r, x: 0, y: 0 }, u.removeInternalForSave(a), delete a.subGridOpts, r.content && (a.content = r.content, delete r.content), b.addRemoveCB ? d = b.addRemoveCB(this.el, a, !0, !1) : (d = u.createDiv(["grid-stack-item"]), d.appendChild(l), l = u.createDiv(["grid-stack-item-content"], r.el)), this.prepareDragDrop(r.el)), i) {
+      const p = h ? t.column : r.w, R = r.h + i.h, H = r.el.style;
+      H.transition = "none", this.update(r.el, { w: p, h: R }), setTimeout(() => H.transition = null);
+    }
+    const f = r.subGrid = b.addGrid(l, t);
+    return i != null && i._moving && (f._isTemp = !0), h && (f._autoColumn = !0), s && f.makeWidget(d, a), i && (i._moving ? window.setTimeout(() => u.simulateMouseEvent(i._event, "mouseenter", f.el), 0) : f.makeWidget(r.el, r)), this.resizeToContentCheck(!1, r), f;
+  }
+  /**
+   * called when an item was converted into a nested grid to accommodate a dragged over item, but then item leaves - return back
+   * to the original grid-item. Also called to remove empty sub-grids when last item is dragged out (since re-creating is simple)
+   */
+  removeAsSubGrid(e) {
+    var i;
+    const t = (i = this.parentGridNode) == null ? void 0 : i.grid;
+    t && (t.batchUpdate(), t.removeWidget(this.parentGridNode.el, !0, !0), this.engine.nodes.forEach((s) => {
+      s.x += this.parentGridNode.x, s.y += this.parentGridNode.y, t.makeWidget(s.el, s);
+    }), t.batchUpdate(!1), this.parentGridNode && delete this.parentGridNode.subGrid, delete this.parentGridNode, e && window.setTimeout(() => u.simulateMouseEvent(e._event, "mouseenter", t.el), 0));
+  }
+  /**
+   * saves the current layout returning a list of widgets for serialization which might include any nested grids.
+   * @param saveContent if true (default) the latest html inside .grid-stack-content will be saved to GridStackWidget.content field, else it will
+   * be removed.
+   * @param saveGridOpt if true (default false), save the grid options itself, so you can call the new GridStack.addGrid()
+   * to recreate everything from scratch. GridStackOptions.children would then contain the widget list instead.
+   * @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 = b.saveCB) {
+    const s = this.engine.save(e, i);
+    if (s.forEach((r) => {
+      var o;
+      if (e && r.el && !r.subGrid && !i) {
+        const n = r.el.querySelector(".grid-stack-item-content");
+        r.content = n == null ? void 0 : n.innerHTML, r.content || delete r.content;
+      } else if (!e && !i && delete r.content, (o = r.subGrid) != null && o.el) {
+        const n = r.subGrid.save(e, t, i);
+        r.subGridOpts = t ? n : { children: n }, delete r.subGrid;
+      }
+      delete r.el;
+    }), t) {
+      const r = u.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, u.removeInternalAndSame(r, j), r.children = s, r;
+    }
+    return s;
+  }
+  /**
+   * load the widgets from a list. This will call update() on each (matching by id) or add/remove widgets that are not there.
+   *
+   * @param items list of widgets definition to update/create
+   * @param addRemove boolean (default true) or callback method can be passed to control if and how missing widgets can be added/removed, giving
+   * the user control of insertion.
+   *
+   * @example
+   * see http://gridstackjs.com/demo/serialization.html
+   */
+  load(e, t = b.addRemoveCB || !0) {
+    var l;
+    e = u.cloneDeep(e);
+    const i = this.getColumn();
+    e.forEach((d) => {
+      d.w = d.w || 1, d.h = d.h || 1;
+    }), e = u.sort(e), this.engine.skipCacheUpdate = this._ignoreLayoutsNodeChange = !0;
+    let s = 0;
+    e.forEach((d) => {
+      s = Math.max(s, (d.x || 0) + d.w);
+    }), s > this.engine.defaultColumn && (this.engine.defaultColumn = s), s > i && this.engine.cacheLayout(e, s, !0);
+    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((a) => {
+      if (!a.id)
+        return;
+      u.find(e, a.id) || (b.addRemoveCB && b.addRemoveCB(this.el, a, !1, !1), o.push(a), this.removeWidget(a.el, !0, !1));
+    }), this.engine._loading = !0;
+    const h = [];
+    return this.engine.nodes = this.engine.nodes.filter((d) => u.find(e, d.id) ? (h.push(d), !1) : !0), e.forEach((d) => {
+      var f;
+      const a = u.find(h, d.id);
+      if (a) {
+        if (u.shouldSizeToContent(a) && (d.h = a.h), this.engine.nodeBoundFix(d), (d.autoPosition || d.x === void 0 || d.y === void 0) && (d.w = d.w || a.w, d.h = d.h || a.h, this.engine.findEmptyPosition(d)), this.engine.nodes.push(a), u.samePos(a, d) && this.engine.nodes.length > 1 && (this.moveNode(a, { ...d, forceCollide: !0 }), u.copyPos(d, a)), this.update(a.el, d), (f = d.subGridOpts) != null && f.children) {
+          const y = a.el.querySelector(".grid-stack");
+          y && y.gridstack && y.gridstack.load(d.subGridOpts.children);
+        }
+      } else t && this.addWidget(d);
+    }), 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)
+   * and get a single event callback. You will see no changes until `batchUpdate(false)` is called.
+   */
+  batchUpdate(e = !0) {
+    return this.engine.batchUpdate(e), e || (this._updateContainerHeight(), this._triggerRemoveEvent(), this._triggerAddEvent(), this._triggerChangeEvent()), this;
+  }
+  /**
+   * Gets current cell height.
+   */
+  getCellHeight(e = !1) {
+    if (this.opts.cellHeight && this.opts.cellHeight !== "auto" && (!e || !this.opts.cellHeightUnit || this.opts.cellHeightUnit === "px"))
+      return this.opts.cellHeight;
+    if (this.opts.cellHeightUnit === "rem")
+      return this.opts.cellHeight * parseFloat(getComputedStyle(document.documentElement).fontSize);
+    if (this.opts.cellHeightUnit === "em")
+      return this.opts.cellHeight * parseFloat(getComputedStyle(this.el).fontSize);
+    if (this.opts.cellHeightUnit === "cm")
+      return this.opts.cellHeight * (96 / 2.54);
+    if (this.opts.cellHeightUnit === "mm")
+      return this.opts.cellHeight * (96 / 2.54) / 10;
+    const t = this.el.querySelector("." + this.opts.itemClass);
+    if (t) {
+      const s = u.toNumber(t.getAttribute("gs-h")) || 1;
+      return Math.round(t.offsetHeight / s);
+    }
+    const i = parseInt(this.el.getAttribute("gs-current-row"));
+    return i ? Math.round(this.el.getBoundingClientRect().height / i) : this.opts.cellHeight;
+  }
+  /**
+   * Update current cell height - see `GridStackOptions.cellHeight` for format.
+   * This method rebuilds an internal CSS style sheet.
+   * Note: You can expect performance issues if call this method too often.
+   *
+   * @param val the cell height. If not passed (undefined), cells content will be made square (match width minus margin),
+   * if pass 0 the CSS will be generated by the application instead.
+   * @param update (Optional) if false, styles will not be updated
+   *
+   * @example
+   * grid.cellHeight(100); // same as 100px
+   * grid.cellHeight('70px');
+   * grid.cellHeight(grid.cellWidth() * 1.2);
+   */
+  cellHeight(e, t = !0) {
+    if (t && e !== void 0 && this._isAutoCellHeight !== (e === "auto") && (this._isAutoCellHeight = e === "auto", this._updateResizeEvent()), (e === "initial" || e === "auto") && (e = void 0), e === void 0) {
+      const s = -this.opts.marginRight - this.opts.marginLeft + this.opts.marginTop + this.opts.marginBottom;
+      e = this.cellWidth() + s;
+    }
+    const i = u.parseHeight(e);
+    return this.opts.cellHeightUnit === i.unit && this.opts.cellHeight === i.h ? this : (this.opts.cellHeightUnit = i.unit, this.opts.cellHeight = i.h, this.resizeToContentCheck(), t && this._updateStyles(!0), this);
+  }
+  /** Gets current cell width. */
+  cellWidth() {
+    return this._widthOrContainer() / this.getColumn();
+  }
+  /** return our expected width (or parent) , and optionally of window for dynamic column check */
+  _widthOrContainer(e = !1) {
+    var t;
+    return e && ((t = this.opts.columnOpts) != null && t.breakpointForWindow) ? window.innerWidth : this.el.clientWidth || this.el.parentElement.clientWidth || window.innerWidth;
+  }
+  /** checks for dynamic column count for our current size, returning true if changed */
+  checkDynamicColumn() {
+    var r, o;
+    const e = this.opts.columnOpts;
+    if (!e || !e.columnWidth && !((r = e.breakpoints) != null && r.length))
+      return !1;
+    const t = this.getColumn();
+    let i = t;
+    const s = this._widthOrContainer(!0);
+    if (e.columnWidth)
+      i = Math.min(Math.round(s / e.columnWidth) || 1, e.columnMax);
+    else {
+      i = e.columnMax;
+      let n = 0;
+      for (; n < e.breakpoints.length && s <= e.breakpoints[n].w; )
+        i = e.breakpoints[n++].c || t;
+    }
+    if (i !== t) {
+      const n = (o = e.breakpoints) == null ? void 0 : o.find((h) => h.c === i);
+      return this.column(i, (n == null ? void 0 : n.layout) || e.layout), !0;
+    }
+    return !1;
+  }
+  /**
+   * re-layout grid items to reclaim any empty space. Options are:
+   * 'list' keep the widget left->right order the same, even if that means leaving an empty slot if things don't fit
+   * 'compact' might re-order items to fill any empty space
+   *
+   * doSort - 'false' to let you do your own sorting ahead in case you need to control a different order. (default to sort)
+   */
+  compact(e = "compact", t = !0) {
+    return this.engine.compact(e, t), this._triggerChangeEvent(), this;
+  }
+  /**
+   * set the number of columns in the grid. Will update existing widgets to conform to new number of columns,
+   * as well as cache the original layout so you can revert back to previous positions without loss.
+   * Requires `gridstack-extra.css` or `gridstack-extra.min.css` for [2-11],
+   * else you will need to generate correct CSS (see https://github.com/gridstack/gridstack.js#change-grid-columns)
+   * @param column - Integer > 0 (default 12).
+   * @param layout specify the type of re-layout that will happen (position, size, etc...).
+   * Note: items will never be outside of the current column boundaries. default ('moveScale'). Ignored for 1 column
+   */
+  column(e, t = "moveScale") {
+    if (!e || e < 1 || this.opts.column === e)
+      return this;
+    const i = this.getColumn();
+    return this.opts.column = e, this.engine ? (this.engine.column = e, this.el.classList.remove("gs-" + i), this.el.classList.add("gs-" + e), this.engine.columnChanged(i, e, t), this._isAutoCellHeight && this.cellHeight(), this.resizeToContentCheck(!0), this._ignoreLayoutsNodeChange = !0, this._triggerChangeEvent(), delete this._ignoreLayoutsNodeChange, this) : this;
+  }
+  /**
+   * get the number of columns in the grid (default 12)
+   */
+  getColumn() {
+    return this.opts.column;
+  }
+  /** returns an array of grid HTML elements (no placeholder) - used to iterate through our children in DOM order */
+  getGridItems() {
+    return Array.from(this.el.children).filter((e) => e.matches("." + this.opts.itemClass) && !e.matches("." + this.opts.placeholderClass));
+  }
+  /** true if changeCB should be ignored due to column change, sizeToContent, loading, etc... which caller can ignore for dirty flag case */
+  isIgnoreChangeCB() {
+    return this._ignoreLayoutsNodeChange;
+  }
+  /**
+   * Destroys a grid instance. DO NOT CALL any methods or access any vars after this as it will free up members.
+   * @param removeDOM if `false` grid and items HTML elements will not be removed from the DOM (Optional. Default `true`).
+   */
+  destroy(e = !0) {
+    var t, i;
+    if (this.el)
+      return this.offAll(), this._updateResizeEvent(!0), this.setStatic(!0, !1), this.setAnimation(!1), e ? this.el.parentNode.removeChild(this.el) : (this.removeAll(e), this.el.classList.remove(this._styleSheetClass), this.el.removeAttribute("gs-current-row")), this._removeStylesheet(), (t = this.parentGridNode) == null || delete t.subGrid, delete this.parentGridNode, delete this.opts, (i = this._placeholder) == null || delete i.gridstackNode, delete this._placeholder, delete this.engine, delete this.el.gridstack, delete this.el, this;
+  }
+  /**
+   * enable/disable floating widgets (default: `false`) See [example](http://gridstackjs.com/demo/float.html)
+   */
+  float(e) {
+    return this.opts.float !== e && (this.opts.float = this.engine.float = e, this._triggerChangeEvent()), this;
+  }
+  /**
+   * get the current float mode
+   */
+  getFloat() {
+    return this.engine.float;
+  }
+  /**
+   * Get the position of the cell under a pixel on screen.
+   * @param position the position of the pixel to resolve in
+   * absolute coordinates, as an object with top and left properties
+   * @param useDocRelative if true, value will be based on document position vs parent position (Optional. Default false).
+   * Useful when grid is within `position: relative` element
+   *
+   * Returns an object with properties `x` and `y` i.e. the column and row in the grid.
+   */
+  getCellFromPixel(e, t = !1) {
+    const i = this.el.getBoundingClientRect();
+    let s;
+    t ? s = { top: i.top + document.documentElement.scrollTop, left: i.left } : s = { top: this.el.offsetTop, left: this.el.offsetLeft };
+    const r = e.left - s.left, o = e.top - s.top, n = i.width / this.getColumn(), h = i.height / parseInt(this.el.getAttribute("gs-current-row"));
+    return { x: Math.floor(r / n), y: Math.floor(o / h) };
+  }
+  /** returns the current number of rows, which will be at least `minRow` if set */
+  getRow() {
+    return Math.max(this.engine.getRow(), this.opts.minRow);
+  }
+  /**
+   * Checks if specified area is empty.
+   * @param x the position x.
+   * @param y the position y.
+   * @param w the width of to check
+   * @param h the height of to check
+   */
+  isAreaEmpty(e, t, i, s) {
+    return this.engine.isAreaEmpty(e, t, i, s);
+  }
+  /**
+   * If you add elements to your grid by hand (or have some framework creating DOM), you have to tell gridstack afterwards to make them widgets.
+   * If you want gridstack to add the elements for you, use `addWidget()` instead.
+   * Makes the given element a widget and returns it.
+   * @param els widget or single selector to convert.
+   * @param options widget definition to use instead of reading attributes or using default sizing values
+   *
+   * @example
+   * const grid = GridStack.init();
+   * grid.el.innerHtml = '<div id="1" gs-w="3"></div><div id="2"></div>';
+   * grid.makeWidget('1');
+   * grid.makeWidget('2', {w:2, content: 'hello'});
+   */
+  makeWidget(e, t) {
+    const i = b.getElement(e);
+    if (!i)
+      return;
+    i.parentElement || this.el.appendChild(i), this._prepareElement(i, !0, t);
+    const s = i.gridstackNode;
+    this._updateContainerHeight(), s.subGridOpts && this.makeSubGrid(i, s.subGridOpts, void 0, !1);
+    let r;
+    return this.opts.column === 1 && !this._ignoreLayoutsNodeChange && (r = this._ignoreLayoutsNodeChange = !0), this._triggerAddEvent(), this._triggerChangeEvent(), r && delete this._ignoreLayoutsNodeChange, i;
+  }
+  on(e, t) {
+    return e.indexOf(" ") !== -1 ? (e.split(" ").forEach((s) => this.on(s, t)), this) : (e === "change" || e === "added" || e === "removed" || e === "enable" || e === "disable" ? (e === "enable" || e === "disable" ? this._gsEventHandler[e] = (s) => t(s) : this._gsEventHandler[e] = (s) => {
+      s.detail && t(s, s.detail);
+    }, this.el.addEventListener(e, this._gsEventHandler[e])) : e === "drag" || e === "dragstart" || e === "dragstop" || e === "resizestart" || e === "resize" || e === "resizestop" || e === "dropped" || e === "resizecontent" ? this._gsEventHandler[e] = t : console.error("GridStack.on(" + e + ") event not supported"), this);
+  }
+  /**
+   * unsubscribe from the 'on' event GridStackEvent
+   * @param name of the event (see possible values) or list of names space separated
+   */
+  off(e) {
+    return e.indexOf(" ") !== -1 ? (e.split(" ").forEach((i) => this.off(i)), this) : ((e === "change" || e === "added" || e === "removed" || e === "enable" || e === "disable") && this._gsEventHandler[e] && this.el.removeEventListener(e, this._gsEventHandler[e]), delete this._gsEventHandler[e], this);
+  }
+  /** remove all event handlers */
+  offAll() {
+    return Object.keys(this._gsEventHandler).forEach((e) => this.off(e)), this;
+  }
+  /**
+   * Removes widget from the grid.
+   * @param el  widget or selector to modify
+   * @param removeDOM if `false` DOM element won't be removed from the tree (Default? true).
+   * @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 ? (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 && 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);
+  }
+  /**
+   * Removes all widgets from the grid.
+   * @param removeDOM if `false` DOM elements won't be removed from the tree (Default? `true`).
+   * @param triggerEvent if `false` (quiet mode) element will not be added to removed list and no 'removed' callbacks will be called (Default? true).
+   */
+  removeAll(e = !0, t = !0) {
+    return this.engine.nodes.forEach((i) => {
+      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;
+  }
+  /**
+   * Toggle the grid animation state.  Toggles the `grid-stack-animate` class.
+   * @param doAnimate if true the grid will animate.
+   * @param delay if true setting will be set on next event loop.
+   */
+  setAnimation(e = this.opts.animate, t) {
+    return t ? setTimeout(() => {
+      this.opts && this.setAnimation(e);
+    }) : e ? this.el.classList.add("grid-stack-animate") : this.el.classList.remove("grid-stack-animate"), this;
+  }
+  /** @internal */
+  hasAnimationCSS() {
+    return this.el.classList.contains("grid-stack-animate");
+  }
+  /**
+   * Toggle the grid static state, which permanently removes/add Drag&Drop support, unlike disable()/enable() that just turns it off/on.
+   * Also toggle the grid-stack-static class.
+   * @param val if true the grid become static.
+   * @param updateClass true (default) if css class gets updated
+   * @param recurse true (default) if sub-grids also get updated
+   */
+  setStatic(e, t = !0, i = !0) {
+    return !!this.opts.staticGrid === e ? this : (e ? this.opts.staticGrid = !0 : delete this.opts.staticGrid, this._setupRemoveDrop(), this._setupAcceptWidget(), this.engine.nodes.forEach((s) => {
+      this.prepareDragDrop(s.el), s.subGrid && i && s.subGrid.setStatic(e, t, i);
+    }), t && this._setStaticClass(), this);
+  }
+  /**
+   * Updates the passed in options on the grid (similar to update(widget) for for the grid options).
+   * @param options PARTIAL grid options to update - only items specified will be updated.
+   * NOTE: not all options updating are currently supported (lot of code, unlikely to change)
+   */
+  updateOptions(e) {
+    var i;
+    const t = this.opts;
+    return e.acceptWidgets !== void 0 && this._setupAcceptWidget(), e.animate !== void 0 && this.setAnimation(), e.cellHeight && (this.cellHeight(e.cellHeight, !0), delete e.cellHeight), e.class && e.class !== t.class && (t.class && this.el.classList.remove(t.class), this.el.classList.add(e.class)), typeof e.column == "number" && !e.columnOpts && (this.column(e.column), delete e.column), e.margin !== void 0 && this.margin(e.margin), e.staticGrid !== void 0 && this.setStatic(e.staticGrid), e.disableDrag !== void 0 && !e.staticGrid && this.enableMove(!e.disableDrag), e.disableResize !== void 0 && !e.staticGrid && this.enableResize(!e.disableResize), e.float !== void 0 && this.float(e.float), e.row !== void 0 && (t.minRow = t.maxRow = e.row), (i = e.children) != null && i.length && (this.load(e.children), delete e.children), this.opts = { ...this.opts, ...e }, this;
+  }
+  /**
+   * Updates widget position/size and other info. Note: if you need to call this on all nodes, use load() instead which will update what changed.
+   * @param els  widget or selector of objects to modify (note: setting the same x,y for multiple items will be indeterministic and likely unwanted)
+   * @param opt new widget options (x,y,w,h, etc..). Only those set will be updated.
+   */
+  update(e, t) {
+    return b.getElements(e).forEach((i) => {
+      var d;
+      const s = i == null ? void 0 : i.gridstackNode;
+      if (!s)
+        return;
+      const r = { ...u.copyPos({}, s), ...u.cloneDeep(t) };
+      this.engine.nodeBoundFix(r), delete r.autoPosition;
+      const o = ["x", "y", "w", "h"];
+      let n;
+      if (o.some((a) => r[a] !== void 0 && r[a] !== s[a]) && (n = {}, o.forEach((a) => {
+        n[a] = r[a] !== void 0 ? r[a] : s[a], delete r[a];
+      })), !n && (r.minW || r.minH || r.maxW || r.maxH) && (n = {}), r.content !== void 0) {
+        const a = i.querySelector(".grid-stack-item-content");
+        a && a.textContent !== r.content && (s.content = r.content, b.renderCB(a, r), (d = s.subGrid) != null && d.el && (a.appendChild(s.subGrid.el), s.subGrid.opts.styleInHead || s.subGrid._updateStyles(!0))), delete r.content;
+      }
+      let h = !1, l = !1;
+      for (const a in r)
+        a[0] !== "_" && s[a] !== r[a] && (s[a] = r[a], h = !0, l = l || !this.opts.staticGrid && (a === "noResize" || a === "noMove" || a === "locked"));
+      if (u.sanitizeMinMax(s), n) {
+        const a = n.w !== void 0 && n.w !== s.w;
+        this.moveNode(s, n), a && s.subGrid ? s.subGrid.onResize(this.hasAnimationCSS() ? s.w : void 0) : this.resizeToContentCheck(a, s), delete s._orig;
+      }
+      (n || h) && this._writeAttr(i, s), l && this.prepareDragDrop(s.el);
+    }), this;
+  }
+  moveNode(e, t) {
+    const i = e._updating;
+    i || this.engine.cleanNodes().beginUpdate(e), this.engine.moveNode(e, t), this._updateContainerHeight(), i || (this._triggerChangeEvent(), this.engine.endUpdate());
+  }
+  /**
+   * Updates widget height to match the content height to avoid v-scrollbar or dead space.
+   * Note: this assumes only 1 child under resizeToContentParent='.grid-stack-item-content' (sized to gridItem minus padding) that is at the entire content size wanted.
+   * @param el grid item element
+   * @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, y;
+    if (!e || (e.classList.remove("size-to-content-max"), !e.clientHeight))
+      return;
+    const t = e.gridstackNode;
+    if (!t)
+      return;
+    const i = t.grid;
+    if (!i || e.parentElement !== i.el)
+      return;
+    const s = i.getCellHeight(!0);
+    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(b.resizeToContentParent)), !o)
+      return;
+    const n = e.clientHeight - o.clientHeight, h = t.h ? t.h * s - n : o.clientHeight;
+    let l;
+    if (t.subGrid) {
+      l = t.subGrid.getRow() * t.subGrid.getCellHeight(!0);
+      const g = t.subGrid.el.getBoundingClientRect(), v = t.subGrid.el.parentElement.getBoundingClientRect();
+      l += g.top - v.top;
+    } else {
+      if ((y = (f = t.subGridOpts) == null ? void 0 : f.children) != null && y.length)
+        return;
+      {
+        const g = o.firstElementChild;
+        if (!g) {
+          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 = g.getBoundingClientRect().height || h;
+      }
+    }
+    if (h === l)
+      return;
+    r += l - h;
+    let d = Math.ceil(r / s);
+    const a = Number.isInteger(t.sizeToContent) ? t.sizeToContent : 0;
+    a && d > a && (d = a, e.classList.add("size-to-content-max")), t.minH && d < t.minH ? d = t.minH : t.maxH && d > t.maxH && (d = t.maxH), d !== t.h && (i._ignoreLayoutsNodeChange = !0, i.moveNode(t, { h: d }), delete i._ignoreLayoutsNodeChange);
+  }
+  /** call the user resize (so they can do extra work) else our build in version */
+  resizeToContentCBCheck(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 b.getElements(e).forEach((i) => {
+      const s = i.gridstackNode;
+      if (!u.canBeRotated(s))
+        return;
+      const r = { w: s.h, h: s.w, minH: s.minW, minW: s.minH, maxH: s.maxW, maxW: s.maxH };
+      if (t) {
+        const n = t.left > 0 ? Math.floor(t.left / this.cellWidth()) : 0, h = t.top > 0 ? Math.floor(t.top / this.opts.cellHeight) : 0;
+        r.x = s.x + n - (s.h - (h + 1)), r.y = s.y + h - n;
+      }
+      Object.keys(r).forEach((n) => {
+        r[n] === void 0 && delete r[n];
+      });
+      const o = s._orig;
+      this.update(i, r), s._orig = o;
+    }), this;
+  }
+  /**
+   * Updates the margins which will set all 4 sides at once - see `GridStackOptions.margin` for format options (CSS string format of 1,2,4 values or single number).
+   * @param value margin value
+   */
+  margin(e) {
+    if (!(typeof e == "string" && e.split(" ").length > 1)) {
+      const i = u.parseHeight(e);
+      if (this.opts.marginUnit === i.unit && this.opts.margin === i.h)
+        return;
+    }
+    return this.opts.margin = e, this.opts.marginTop = this.opts.marginBottom = this.opts.marginLeft = this.opts.marginRight = void 0, this._initMargin(), this._updateStyles(!0), this;
+  }
+  /** returns current margin number value (undefined if 4 sides don't match) */
+  getMargin() {
+    return this.opts.margin;
+  }
+  /**
+   * Returns true if the height of the grid will be less than the vertical
+   * constraint. Always returns true if grid doesn't have height constraint.
+   * @param node contains x,y,w,h,auto-position options
+   *
+   * @example
+   * if (grid.willItFit(newWidget)) {
+   *   grid.addWidget(newWidget);
+   * } else {
+   *   alert('Not enough free space to place the widget');
+   * }
+   */
+  willItFit(e) {
+    if (arguments.length > 1) {
+      console.warn("gridstack.ts: `willItFit(x,y,w,h,autoPosition)` is deprecated. Use `willItFit({x, y,...})`. It will be removed soon");
+      const t = arguments;
+      let i = 0, s = { x: t[i++], y: t[i++], w: t[i++], h: t[i++], autoPosition: t[i++] };
+      return this.willItFit(s);
+    }
+    return this.engine.willItFit(e);
+  }
+  /** @internal */
+  _triggerChangeEvent() {
+    if (this.engine.batchMode)
+      return this;
+    const e = this.engine.getDirtyNodes(!0);
+    return e && e.length && (this._ignoreLayoutsNodeChange || this.engine.layoutsNodesChange(e), this._triggerEvent("change", e)), this.engine.saveInitial(), this;
+  }
+  /** @internal */
+  _triggerAddEvent() {
+    var e;
+    if (this.engine.batchMode)
+      return this;
+    if ((e = this.engine.addedNodes) != null && e.length) {
+      this._ignoreLayoutsNodeChange || this.engine.layoutsNodesChange(this.engine.addedNodes), this.engine.addedNodes.forEach((i) => {
+        delete i._dirty;
+      });
+      const t = [...this.engine.addedNodes];
+      this.engine.addedNodes = [], this._triggerEvent("added", t);
+    }
+    return this;
+  }
+  /** @internal */
+  _triggerRemoveEvent() {
+    var e;
+    if (this.engine.batchMode)
+      return this;
+    if ((e = this.engine.removedNodes) != null && e.length) {
+      const t = [...this.engine.removedNodes];
+      this.engine.removedNodes = [], this._triggerEvent("removed", t);
+    }
+    return this;
+  }
+  /** @internal */
+  _triggerEvent(e, t) {
+    const i = t ? new CustomEvent(e, { bubbles: !1, detail: t }) : new Event(e);
+    return this.el.dispatchEvent(i), this;
+  }
+  /** @internal called to delete the current dynamic style sheet used for our layout */
+  _removeStylesheet() {
+    if (this._styles) {
+      const e = this.opts.styleInHead ? void 0 : this.el.parentNode;
+      u.removeStylesheet(this._styleSheetClass, e), delete this._styles;
+    }
+    return this;
+  }
+  /** @internal updated/create the CSS styles for row based layout and initial margin setting */
+  _updateStyles(e = !1, t) {
+    if (e && this._removeStylesheet(), t === void 0 && (t = this.getRow()), this._updateContainerHeight(), this.opts.cellHeight === 0)
+      return this;
+    const i = this.opts.cellHeight, s = this.opts.cellHeightUnit, r = `.${this._styleSheetClass} > .${this.opts.itemClass}`;
+    if (!this._styles) {
+      const o = this.opts.styleInHead ? void 0 : this.el.parentNode;
+      if (this._styles = u.createStylesheet(this._styleSheetClass, o, {
+        nonce: this.opts.nonce
+      }), !this._styles)
+        return this;
+      this._styles._max = 0, u.addCSSRule(this._styles, r, `height: ${i}${s}`);
+      const n = this.opts.marginTop + this.opts.marginUnit, h = this.opts.marginBottom + this.opts.marginUnit, l = this.opts.marginRight + this.opts.marginUnit, d = this.opts.marginLeft + this.opts.marginUnit, a = `${r} > .grid-stack-item-content`, f = `.${this._styleSheetClass} > .grid-stack-placeholder > .placeholder-content`;
+      u.addCSSRule(this._styles, a, `top: ${n}; right: ${l}; bottom: ${h}; left: ${d};`), u.addCSSRule(this._styles, f, `top: ${n}; right: ${l}; bottom: ${h}; left: ${d};`), u.addCSSRule(this._styles, `${r} > .ui-resizable-n`, `top: ${n};`), u.addCSSRule(this._styles, `${r} > .ui-resizable-s`, `bottom: ${h}`), u.addCSSRule(this._styles, `${r} > .ui-resizable-ne`, `right: ${l}; top: ${n}`), u.addCSSRule(this._styles, `${r} > .ui-resizable-e`, `right: ${l}`), u.addCSSRule(this._styles, `${r} > .ui-resizable-se`, `right: ${l}; bottom: ${h}`), u.addCSSRule(this._styles, `${r} > .ui-resizable-nw`, `left: ${d}; top: ${n}`), u.addCSSRule(this._styles, `${r} > .ui-resizable-w`, `left: ${d}`), u.addCSSRule(this._styles, `${r} > .ui-resizable-sw`, `left: ${d}; bottom: ${h}`);
+    }
+    if (t = t || this._styles._max, t > this._styles._max) {
+      const o = (n) => i * n + s;
+      for (let n = this._styles._max + 1; n <= t; n++)
+        u.addCSSRule(this._styles, `${r}[gs-y="${n}"]`, `top: ${o(n)}`), u.addCSSRule(this._styles, `${r}[gs-h="${n + 1}"]`, `height: ${o(n + 1)}`);
+      this._styles._max = t;
+    }
+    return this;
+  }
+  /** @internal */
+  _updateContainerHeight() {
+    if (!this.engine || this.engine.batchMode)
+      return this;
+    const e = this.parentGridNode;
+    let t = this.getRow() + this._extraDragRow;
+    const i = this.opts.cellHeight, s = this.opts.cellHeightUnit;
+    if (!i)
+      return this;
+    if (!e) {
+      const r = u.parseHeight(getComputedStyle(this.el).minHeight);
+      if (r.h > 0 && r.unit === s) {
+        const o = Math.floor(r.h / i);
+        t < o && (t = o);
+      }
+    }
+    return this.el.setAttribute("gs-current-row", String(t)), this.el.style.removeProperty("min-height"), this.el.style.removeProperty("height"), t && (this.el.style[e ? "minHeight" : "height"] = t * i + s), e && !e.grid.engine.batchMode && u.shouldSizeToContent(e) && e.grid.resizeToContentCBCheck(e.el), this;
+  }
+  /** @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(j.itemClass, this.opts.itemClass);
+    const s = u.shouldSizeToContent(i);
+    return s ? e.classList.add("size-to-content") : e.classList.remove("size-to-content"), s && this.resizeToContentCheck(!1, i), u.lazyLoad(i) || this.prepareDragDrop(i.el), this;
+  }
+  /** @internal call to write position x,y,w,h attributes back to element */
+  _writePosAttr(e, t) {
+    return t.x !== void 0 && t.x !== null && e.setAttribute("gs-x", String(t.x)), t.y !== void 0 && t.y !== null && e.setAttribute("gs-y", String(t.y)), t.w > 1 ? e.setAttribute("gs-w", String(t.w)) : e.removeAttribute("gs-w"), t.h > 1 ? e.setAttribute("gs-h", String(t.h)) : e.removeAttribute("gs-h"), this;
+  }
+  /** @internal call to write any default attributes back to element */
+  _writeAttr(e, t) {
+    if (!t)
+      return this;
+    this._writePosAttr(e, t);
+    const i = {
+      // autoPosition: 'gs-auto-position', // no need to write out as already in node and doesn't affect CSS
+      noResize: "gs-no-resize",
+      noMove: "gs-no-move",
+      locked: "gs-locked",
+      id: "gs-id",
+      sizeToContent: "gs-size-to-content"
+    };
+    for (const s in i)
+      t[s] ? e.setAttribute(i[s], String(t[s])) : e.removeAttribute(i[s]);
+    return this;
+  }
+  /** @internal call to read any default attributes from element */
+  _readAttr(e, t = !0) {
+    const i = {};
+    i.x = u.toNumber(e.getAttribute("gs-x")), i.y = u.toNumber(e.getAttribute("gs-y")), i.w = u.toNumber(e.getAttribute("gs-w")), i.h = u.toNumber(e.getAttribute("gs-h")), i.autoPosition = u.toBool(e.getAttribute("gs-auto-position")), i.noResize = u.toBool(e.getAttribute("gs-no-resize")), i.noMove = u.toBool(e.getAttribute("gs-no-move")), i.locked = u.toBool(e.getAttribute("gs-locked"));
+    const s = e.getAttribute("gs-size-to-content");
+    s && (s === "true" || s === "false" ? i.sizeToContent = u.toBool(s) : i.sizeToContent = parseInt(s, 10)), i.id = e.getAttribute("gs-id"), i.maxW = u.toNumber(e.getAttribute("gs-max-w")), i.minW = u.toNumber(e.getAttribute("gs-min-w")), i.maxH = u.toNumber(e.getAttribute("gs-max-h")), i.minH = u.toNumber(e.getAttribute("gs-min-h")), t && (i.w === 1 && e.removeAttribute("gs-w"), i.h === 1 && e.removeAttribute("gs-h"), i.maxW && e.removeAttribute("gs-max-w"), i.minW && e.removeAttribute("gs-min-w"), i.maxH && e.removeAttribute("gs-max-h"), i.minH && e.removeAttribute("gs-min-h"));
+    for (const r in i) {
+      if (!i.hasOwnProperty(r))
+        return;
+      !i[r] && i[r] !== 0 && r !== "gs-size-to-content" && delete i[r];
+    }
+    return i;
+  }
+  /** @internal */
+  _setStaticClass() {
+    const e = ["grid-stack-static"];
+    return this.opts.staticGrid ? (this.el.classList.add(...e), this.el.setAttribute("gs-static", "true")) : (this.el.classList.remove(...e), this.el.removeAttribute("gs-static")), this;
+  }
+  /**
+   * called when we are being resized - check if the one Column Mode needs to be turned on/off
+   * and remember the prev columns we used, or get our count from parent, as well as check for cellHeight==='auto' (square)
+   * or `sizeToContent` gridItem options.
+   */
+  onResize(e = ((t) => (t = this.el) == null ? void 0 : t.clientWidth)()) {
+    if (!e || this.prevWidth === e)
+      return;
+    this.prevWidth = e, this.batchUpdate();
+    let i = !1;
+    return this._autoColumn && this.parentGridNode ? this.opts.column !== this.parentGridNode.w && (this.column(this.parentGridNode.w, this.opts.layout || "list"), i = !0) : i = this.checkDynamicColumn(), this._isAutoCellHeight && this.cellHeight(), this.engine.nodes.forEach((s) => {
+      s.subGrid && s.subGrid.onResize();
+    }), this._skipInitialResize || this.resizeToContentCheck(i), delete this._skipInitialResize, this.batchUpdate(!1), this;
+  }
+  /** resizes content for given node (or all) if shouldSizeToContent() is true */
+  resizeToContentCheck(e = !1, t = void 0) {
+    if (this.engine) {
+      if (e && this.hasAnimationCSS())
+        return setTimeout(() => this.resizeToContentCheck(!1, t), this.animationDelay);
+      if (t)
+        u.shouldSizeToContent(t) && this.resizeToContentCBCheck(t.el);
+      else if (this.engine.nodes.some((i) => u.shouldSizeToContent(i))) {
+        const i = [...this.engine.nodes];
+        this.batchUpdate(), i.forEach((s) => {
+          u.shouldSizeToContent(s) && this.resizeToContentCBCheck(s.el);
+        }), this.batchUpdate(!1);
+      }
+      this._gsEventHandler.resizecontent && this._gsEventHandler.resizecontent(null, t ? [t] : this.engine.nodes);
+    }
+  }
+  /** add or remove the grid element size event handler */
+  _updateResizeEvent(e = !1) {
+    const t = !this.parentGridNode && (this._isAutoCellHeight || this.opts.sizeToContent || this.opts.columnOpts || this.engine.nodes.find((i) => i.sizeToContent));
+    return !e && t && !this.resizeObserver ? (this._sizeThrottle = u.throttle(() => this.onResize(), this.opts.cellHeightThrottle), this.resizeObserver = new ResizeObserver(() => this._sizeThrottle()), this.resizeObserver.observe(this.el), this._skipInitialResize = !0) : (e || !t) && this.resizeObserver && (this.resizeObserver.disconnect(), delete this.resizeObserver, delete this._sizeThrottle), this;
+  }
+  /** @internal convert a potential selector into actual element */
+  static getElement(e = ".grid-stack-item") {
+    return u.getElement(e);
+  }
+  /** @internal */
+  static getElements(e = ".grid-stack-item") {
+    return u.getElements(e);
+  }
+  /** @internal */
+  static getGridElement(e) {
+    return b.getElement(e);
+  }
+  /** @internal */
+  static getGridElements(e) {
+    return u.getElements(e);
+  }
+  /** @internal initialize margin top/bottom/left/right and units */
+  _initMargin() {
+    let e, t = 0, i = [];
+    return typeof this.opts.margin == "string" && (i = this.opts.margin.split(" ")), i.length === 2 ? (this.opts.marginTop = this.opts.marginBottom = i[0], this.opts.marginLeft = this.opts.marginRight = i[1]) : i.length === 4 ? (this.opts.marginTop = i[0], this.opts.marginRight = i[1], this.opts.marginBottom = i[2], this.opts.marginLeft = i[3]) : (e = u.parseHeight(this.opts.margin), this.opts.marginUnit = e.unit, t = this.opts.margin = e.h), this.opts.marginTop === void 0 ? this.opts.marginTop = t : (e = u.parseHeight(this.opts.marginTop), this.opts.marginTop = e.h, delete this.opts.margin), this.opts.marginBottom === void 0 ? this.opts.marginBottom = t : (e = u.parseHeight(this.opts.marginBottom), this.opts.marginBottom = e.h, delete this.opts.margin), this.opts.marginRight === void 0 ? this.opts.marginRight = t : (e = u.parseHeight(this.opts.marginRight), this.opts.marginRight = e.h, delete this.opts.margin), this.opts.marginLeft === void 0 ? this.opts.marginLeft = t : (e = u.parseHeight(this.opts.marginLeft), this.opts.marginLeft = e.h, delete this.opts.margin), this.opts.marginUnit = e.unit, this.opts.marginTop === this.opts.marginBottom && this.opts.marginLeft === this.opts.marginRight && this.opts.marginTop === this.opts.marginRight && (this.opts.margin = this.opts.marginTop), this;
+  }
+  /* ===========================================================================================
+   * drag&drop methods that used to be stubbed out and implemented in dd-gridstack.ts
+   * but caused loading issues in prod - see https://github.com/gridstack/gridstack.js/issues/2039
+   * ===========================================================================================
+   */
+  /** get the global (but static to this code) DD implementation */
+  static getDD() {
+    return W;
+  }
+  /**
+   * call to setup dragging in from the outside (say toolbar), by specifying the class selection and options.
+   * Called during GridStack.init() as options, but can also be called directly (last param are used) in case the toolbar
+   * is dynamically create and needs to be set later.
+   * @param dragIn string selector (ex: '.sidebar-item') or list of dom elements
+   * @param dragInOptions options - see DDDragOpt. (default: {handle: '.grid-stack-item-content', appendTo: 'body'}
+   * @param widgets GridStackWidget def to assign to each element which defines what to create on drop
+   * @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 && (w.pauseDrag = t.pause), t = { appendTo: "body", helper: "clone", ...t || {} }, (typeof e == "string" ? u.getElements(e, s) : e).forEach((o, n) => {
+      W.isDraggable(o) || W.dragIn(o, t), i != null && i[n] && (o.gridstackNode = i[n]);
+    });
+  }
+  /**
+   * Enables/Disables dragging by the user of specific grid element. If you want all items, and have it affect future items, use enableMove() instead. No-op for static grids.
+   * IF you are looking to prevent an item from moving (due to being pushed around by another during collision) use locked property instead.
+   * @param els widget or selector to modify.
+   * @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 : (b.getElements(e).forEach((i) => {
+      const s = i.gridstackNode;
+      s && (t ? delete s.noMove : s.noMove = !0, this.prepareDragDrop(s.el));
+    }), this);
+  }
+  /**
+   * Enables/Disables user resizing of specific grid element. If you want all items, and have it affect future items, use enableResize() instead. No-op for static grids.
+   * @param els  widget or selector to modify
+   * @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 : (b.getElements(e).forEach((i) => {
+      const s = i.gridstackNode;
+      s && (t ? delete s.noResize : s.noResize = !0, this.prepareDragDrop(s.el));
+    }), this);
+  }
+  /**
+   * Temporarily disables widgets moving/resizing.
+   * If you want a more permanent way (which freezes up resources) use `setStatic(true)` instead.
+   * Note: no-op for static grid
+   * This is a shortcut for:
+   * @example
+   *  grid.enableMove(false);
+   *  grid.enableResize(false);
+   * @param recurse true (default) if sub-grids also get updated
+   */
+  disable(e = !0) {
+    if (!this.opts.staticGrid)
+      return this.enableMove(!1, e), this.enableResize(!1, e), this._triggerEvent("disable"), this;
+  }
+  /**
+   * Re-enables widgets moving/resizing - see disable().
+   * Note: no-op for static grid.
+   * This is a shortcut for:
+   * @example
+   *  grid.enableMove(true);
+   *  grid.enableResize(true);
+   * @param recurse true (default) if sub-grids also get updated
+   */
+  enable(e = !0) {
+    if (!this.opts.staticGrid)
+      return this.enableMove(!0, e), this.enableResize(!0, e), this._triggerEvent("enable"), this;
+  }
+  /**
+   * Enables/disables widget moving. No-op for static grids, and locally defined items still overrule
+   * @param recurse true (default) if sub-grids also get updated
+   */
+  enableMove(e, t = !0) {
+    return this.opts.staticGrid ? this : (e ? delete this.opts.disableDrag : this.opts.disableDrag = !0, this.engine.nodes.forEach((i) => {
+      this.prepareDragDrop(i.el), i.subGrid && t && i.subGrid.enableMove(e, t);
+    }), this);
+  }
+  /**
+   * Enables/disables widget resizing. No-op for static grids.
+   * @param recurse true (default) if sub-grids also get updated
+   */
+  enableResize(e, t = !0) {
+    return this.opts.staticGrid ? this : (e ? delete this.opts.disableResize : this.opts.disableResize = !0, this.engine.nodes.forEach((i) => {
+      this.prepareDragDrop(i.el), i.subGrid && t && i.subGrid.enableResize(e, t);
+    }), this);
+  }
+  /** @internal call when drag (and drop) needs to be cancelled (Esc key) */
+  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 && b._itemRemoving(e.el, !1), this.engine.restoreInitial());
+  }
+  /** @internal removes any drag&drop present (called during destroy) */
+  _removeDD(e) {
+    return W.draggable(e, "destroy").resizable(e, "destroy"), e.gridstackNode && delete e.gridstackNode._initDD, delete e.ddElement, this;
+  }
+  /** @internal called to add drag over to support widgets being added externally */
+  _setupAcceptWidget() {
+    if (this.opts.staticGrid || !this.opts.acceptWidgets && !this.opts.removable)
+      return W.droppable(this.el, "destroy"), this;
+    let e, t;
+    const i = (s, r, o) => {
+      var f;
+      o = o || r;
+      const n = o.gridstackNode;
+      if (!n)
+        return;
+      if (!((f = n.grid) != null && f.el)) {
+        o.style.transform = `scale(${1 / this.dragTransform.xScale},${1 / this.dragTransform.yScale})`;
+        const y = o.getBoundingClientRect();
+        o.style.left = y.x + (this.dragTransform.xScale - 1) * (s.clientX - y.x) / this.dragTransform.xScale + "px", o.style.top = y.y + (this.dragTransform.yScale - 1) * (s.clientY - y.y) / this.dragTransform.yScale + "px", o.style.transformOrigin = "0px 0px";
+      }
+      let { top: h, left: l } = o.getBoundingClientRect();
+      const d = this.el.getBoundingClientRect();
+      l -= d.left, h -= d.top;
+      const a = {
+        position: {
+          top: h * this.dragTransform.xScale,
+          left: l * this.dragTransform.yScale
+        }
+      };
+      if (n._temporaryRemoved) {
+        if (n.x = Math.max(0, Math.round(l / t)), n.y = Math.max(0, Math.round(h / e)), delete n.autoPosition, this.engine.nodeBoundFix(n), !this.engine.willItFit(n)) {
+          if (n.autoPosition = !0, !this.engine.willItFit(n)) {
+            W.off(r, "drag");
+            return;
+          }
+          n._willFitPos && (u.copyPos(n, n._willFitPos), delete n._willFitPos);
+        }
+        this._onStartMoving(o, s, a, n, t, e);
+      } else
+        this._dragOrResize(o, s, a, n, t, e);
+    };
+    return W.droppable(this.el, {
+      accept: (s) => {
+        const r = s.gridstackNode || this._readAttr(s, !1);
+        if ((r == null ? void 0 : r.grid) === this)
+          return !0;
+        if (!this.opts.acceptWidgets)
+          return !1;
+        let o = !0;
+        if (typeof this.opts.acceptWidgets == "function")
+          o = this.opts.acceptWidgets(s);
+        else {
+          const n = this.opts.acceptWidgets === !0 ? ".grid-stack-item" : this.opts.acceptWidgets;
+          o = s.matches(n);
+        }
+        if (o && r && this.opts.maxRow) {
+          const n = { w: r.w, h: r.h, minW: r.minW, minH: r.minH };
+          o = this.engine.willItFit(n);
+        }
+        return o;
+      }
+    }).on(this.el, "dropover", (s, r, o) => {
+      let n = (o == null ? void 0 : o.gridstackNode) || r.gridstackNode;
+      if ((n == null ? void 0 : n.grid) === this && !n._temporaryRemoved)
+        return !1;
+      if (n != null && n._sidebarOrig && (n.w = n._sidebarOrig.w, n.h = n._sidebarOrig.h), n != null && n.grid && n.grid !== this && !n._temporaryRemoved && n.grid._leave(r, o), o = o || r, t = this.cellWidth(), e = this.getCellHeight(!0), !n) {
+        const d = o.getAttribute("data-gs-widget") || o.getAttribute("gridstacknode");
+        if (d) {
+          try {
+            n = JSON.parse(d);
+          } catch {
+            console.error("Gridstack dropover: Bad JSON format: ", d);
+          }
+          o.removeAttribute("data-gs-widget"), o.removeAttribute("gridstacknode");
+        }
+        n || (n = this._readAttr(o)), n._sidebarOrig = { w: n.w, h: n.h };
+      }
+      n.grid || (n.el || (n = { ...n }), n._isExternal = !0, o.gridstackNode = n);
+      const h = 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: h, 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 = h, n.h = l, n._temporaryRemoved = !0), b._itemRemoving(n.el, !1), W.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 y, g, v;
+      const n = (o == null ? void 0 : o.gridstackNode) || r.gridstackNode;
+      if ((n == null ? void 0 : n.grid) === this && !n._isExternal)
+        return !1;
+      const h = !!this.placeholder.parentElement, l = r !== o;
+      this.placeholder.remove(), delete this.placeholder.gridstackNode;
+      const d = h && this.opts.animate;
+      d && this.setAnimation(!1);
+      const a = r._gridstackNodeOrig;
+      if (delete r._gridstackNodeOrig, h && (a != null && a.grid) && a.grid !== this) {
+        const p = a.grid;
+        p.engine.removeNodeFromLayoutCache(a), p.engine.removedNodes.push(a), p._triggerRemoveEvent()._triggerChangeEvent(), p.parentGridNode && !p.engine.nodes.length && p.opts.subGridDynamic && p.removeAsSubGrid();
+      }
+      if (!n || (h && (this.engine.cleanupNode(n), n.grid = this), (y = n.grid) == null || delete y._isTemp, W.off(r, "drag"), o !== r ? (o.remove(), r = o) : r.remove(), this._removeDD(r), !h))
+        return !1;
+      const f = (v = (g = n.subGrid) == null ? void 0 : g.el) == null ? void 0 : v.gridstack;
+      return u.copyPos(n, this._readAttr(this.placeholder)), u.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" }, a && a.grid ? a : void 0, n), d && this.setAnimation(this.opts.animate, !0), !1;
+    }), this;
+  }
+  /** @internal mark item for removal */
+  static _itemRemoving(e, t) {
+    if (!e)
+      return;
+    const i = e ? e.gridstackNode : void 0;
+    !(i != null && i.grid) || e.classList.contains(i.grid.opts.removableOptions.decline) || (t ? i._isAboutToRemove = !0 : delete i._isAboutToRemove, t ? e.classList.add("grid-stack-item-removing") : e.classList.remove("grid-stack-item-removing"));
+  }
+  /** @internal called to setup a trash drop zone if the user specifies it */
+  _setupRemoveDrop() {
+    if (typeof this.opts.removable != "string")
+      return this;
+    const e = document.querySelector(this.opts.removable);
+    return e ? (!this.opts.staticGrid && !W.isDroppable(e) && W.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;
+  }
+  /**
+   * prepares the element for drag&drop - this is normally called by makeWidget() unless are are delay loading
+   * @param el GridItemHTMLElement of the widget
+   * @param [force=false]
+   * */
+  prepareDragDrop(e, t = !1) {
+    const i = e == null ? void 0 : e.gridstackNode;
+    if (!i)
+      return;
+    const s = i.noMove || this.opts.disableDrag, r = i.noResize || this.opts.disableResize, o = this.opts.staticGrid || s && r;
+    if ((t || o) && (i._initDD && (this._removeDD(e), delete i._initDD), o && e.classList.add("ui-draggable-disabled", "ui-resizable-disabled"), !t))
+      return this;
+    if (!i._initDD) {
+      let n, h;
+      const l = (f, y) => {
+        this._gsEventHandler[f.type] && this._gsEventHandler[f.type](f, f.target), n = this.cellWidth(), h = this.getCellHeight(!0), this._onStartMoving(e, f, y, i, n, h);
+      }, d = (f, y) => {
+        this._dragOrResize(e, f, y, i, n, h);
+      }, a = (f) => {
+        this.placeholder.remove(), delete this.placeholder.gridstackNode, delete i._moving, delete i._event, delete i._lastTried;
+        const y = i.w !== i._orig.w, g = f.target;
+        if (!(!g.gridstackNode || g.gridstackNode.grid !== this)) {
+          if (i.el = g, i._isAboutToRemove) {
+            const v = e.gridstackNode.grid;
+            v._gsEventHandler[f.type] && v._gsEventHandler[f.type](f, g), v.engine.nodes.push(i), v.removeWidget(e, !0, !0);
+          } else
+            u.removePositioningStyles(g), i._temporaryRemoved ? (u.copyPos(i, i._orig), this._writePosAttr(g, i), this.engine.addNode(i)) : this._writePosAttr(g, i), this._gsEventHandler[f.type] && this._gsEventHandler[f.type](f, g);
+          this._extraDragRow = 0, this._updateContainerHeight(), this._triggerChangeEvent(), this.engine.endUpdate(), f.type === "resizestop" && (Number.isInteger(i.sizeToContent) && (i.sizeToContent = i.h), this.resizeToContentCheck(y, i));
+        }
+      };
+      W.draggable(e, {
+        start: l,
+        stop: a,
+        drag: d
+      }).resizable(e, {
+        start: l,
+        stop: a,
+        resize: d
+      }), i._initDD = !0;
+    }
+    return W.draggable(e, s ? "disable" : "enable").resizable(e, r ? "disable" : "enable"), this;
+  }
+  /** @internal handles actual drag/resize start */
+  _onStartMoving(e, t, i, s, r, o) {
+    var n;
+    if (this.engine.cleanNodes().beginUpdate(s), this._writePosAttr(this.placeholder, s), this.el.appendChild(this.placeholder), this.placeholder.gridstackNode = s, (n = s.grid) != null && n.el)
+      this.dragTransform = u.getValuesFromTransformedElement(e);
+    else if (this.placeholder && this.placeholder.closest(".grid-stack")) {
+      const h = this.placeholder.closest(".grid-stack");
+      this.dragTransform = u.getValuesFromTransformedElement(h);
+    } else
+      this.dragTransform = {
+        xScale: 1,
+        xOffset: 0,
+        yScale: 1,
+        yOffset: 0
+      };
+    if (s.el = this.placeholder, s._lastUiPosition = i.position, s._prevYPix = i.position.top, s._moving = t.type === "dragstart", delete s._lastTried, t.type === "dropover" && s._temporaryRemoved && (this.engine.addNode(s), s._moving = !0), this.engine.cacheRects(r, o, this.opts.marginTop, this.opts.marginRight, this.opts.marginBottom, this.opts.marginLeft), t.type === "resizestart") {
+      const h = this.getColumn() - s.x, l = (this.opts.maxRow || Number.MAX_SAFE_INTEGER) - s.y;
+      W.resizable(e, "option", "minWidth", r * Math.min(s.minW || 1, h)).resizable(e, "option", "minHeight", o * Math.min(s.minH || 1, l)).resizable(e, "option", "maxWidth", r * Math.min(s.maxW || Number.MAX_SAFE_INTEGER, h)).resizable(e, "option", "maxWidthMoveLeft", r * Math.min(s.maxW || Number.MAX_SAFE_INTEGER, s.x + s.w)).resizable(e, "option", "maxHeight", o * Math.min(s.maxH || Number.MAX_SAFE_INTEGER, l)).resizable(e, "option", "maxHeightMoveUp", o * Math.min(s.maxH || Number.MAX_SAFE_INTEGER, s.y + s.h));
+    }
+  }
+  /** @internal handles actual drag/resize */
+  _dragOrResize(e, t, i, s, r, o) {
+    const n = { ...s._orig };
+    let h, l = this.opts.marginLeft, d = this.opts.marginRight, a = this.opts.marginTop, f = this.opts.marginBottom;
+    const y = Math.round(o * 0.1), g = Math.round(r * 0.1);
+    if (l = Math.min(l, g), d = Math.min(d, g), a = Math.min(a, y), f = Math.min(f, y), t.type === "drag") {
+      if (s._temporaryRemoved)
+        return;
+      const p = i.position.top - s._prevYPix;
+      s._prevYPix = i.position.top, this.opts.draggable.scroll !== !1 && u.updateScrollPosition(e, i.position, p);
+      const R = i.position.left + (i.position.left > s._lastUiPosition.left ? -d : l), H = i.position.top + (i.position.top > s._lastUiPosition.top ? -f : a);
+      n.x = Math.round(R / r), n.y = Math.round(H / o);
+      const T = this._extraDragRow;
+      if (this.engine.collide(s, n)) {
+        const q = this.getRow();
+        let x = Math.max(0, n.y + s.h - q);
+        this.opts.maxRow && q + x > this.opts.maxRow && (x = Math.max(0, this.opts.maxRow - q)), this._extraDragRow = x;
+      } else
+        this._extraDragRow = 0;
+      if (this._extraDragRow !== T && this._updateContainerHeight(), s.x === n.x && s.y === n.y)
+        return;
+    } else if (t.type === "resize") {
+      if (n.x < 0 || (u.updateScrollResize(t, e, o), n.w = Math.round((i.size.width - l) / r), n.h = Math.round((i.size.height - a) / 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, R = i.position.top + a;
+      n.x = Math.round(p / r), n.y = Math.round(R / o), h = !0;
+    }
+    s._event = t, s._lastTried = n;
+    const v = {
+      x: i.position.left + l,
+      y: i.position.top + a,
+      w: (i.size ? i.size.width : s.w * r) - l - d,
+      h: (i.size ? i.size.height : s.h * o) - a - f
+    };
+    if (this.engine.moveNodeCheck(s, { ...n, cellWidth: r, cellHeight: o, rect: v, resizing: h })) {
+      s._lastUiPosition = i.position, this.engine.cacheRects(r, o, a, d, f, l), delete s._skipDown, h && s.subGrid && s.subGrid.onResize(), this._extraDragRow = 0, this._updateContainerHeight();
+      const p = t.target;
+      s._sidebarOrig || this._writePosAttr(p, s), this._gsEventHandler[t.type] && this._gsEventHandler[t.type](t, p);
+    }
+  }
+  /** @internal called when item leaving our area by either cursor dropout event
+   * or shape is outside our boundaries. remove it from us, and mark temporary if this was
+   * our item to start with else restore prev node values from prev grid it came from.
+   */
+  _leave(e, t) {
+    t = t || e;
+    const i = t.gridstackNode;
+    if (!i || (t.style.transform = t.style.transformOrigin = null, W.off(e, "drag"), i._temporaryRemoved))
+      return;
+    i._temporaryRemoved = !0, this.engine.removeNode(i), i.el = i._isExternal && t ? t : e;
+    const s = i._sidebarOrig;
+    i._isExternal && this.engine.cleanupNode(i), i._sidebarOrig = s, 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 vs(this, this.batchUpdate(!1), "commit", "batchUpdate", "5.2"), this;
+  }
+}
+b.renderCB = (c, e) => {
+  c && (e != null && e.content) && (c.textContent = e.content);
+};
+b.resizeToContentParent = ".grid-stack-item-content";
+b.Utils = u;
+b.Engine = re;
+b.GDRev = "11.5.1";
+const Es = ["data-id", "data-testid", "gs-h", "gs-w", "gs-x", "gs-y"], xs = { class: "grid-stack-item-content" }, Cs = /* @__PURE__ */ Q({
+  __name: "DraggableGridLayout",
+  props: {
+    tiles: {},
+    tileHeight: { default: $e }
+  },
+  emits: ["update-tiles"],
+  setup(c, { expose: e, emit: t }) {
+    const i = c, s = t, r = B(null), o = B(new Map(i.tiles.map((y) => [`${y.id}`, y])));
+    let n = null;
+    const h = (y) => `[data-id="${y}"]`, l = (y) => y.map((g) => {
+      var p;
+      const v = o.value.get(`${(p = g.el) == null ? void 0 : p.getAttribute("data-id")}`);
+      if (v)
+        return {
+          ...v,
+          layout: {
+            position: { col: Number(g.x), row: Number(g.y) },
+            size: { cols: Number(g.w), rows: Number(g.h) }
+          }
+        };
+    }).filter((g) => g !== void 0), d = (y, g) => {
+      n && (l(g).forEach((p) => {
+        o.value.set(`${p.id}`, p);
+      }), s("update-tiles", Array.from(o.value.values())));
+    }, a = (y, g) => {
+      g.forEach((v) => {
+        var p;
+        o.value.delete(`${(p = v.el) == null ? void 0 : p.getAttribute("data-id")}`);
+      }), s("update-tiles", Array.from(o.value.values()));
+    };
+    Xe(() => {
+      r.value && (n = b.init({
+        margin: 10,
+        column: At,
+        cellHeight: i.tileHeight,
+        resizable: { handles: "se, sw" },
+        handle: ".tile-header"
+      }, r.value), n.on("change", d), n.on("added", d), n.on("removed", a));
+    }), We(() => {
+      n && n.destroy(!1);
+    });
+    const f = (y) => {
+      if (n && r.value) {
+        const g = r.value.querySelector(h(y));
+        g && n.removeWidget(g);
+      }
+    };
+    return Ke(() => i.tiles.length, async (y, g) => {
+      if (y > g && n) {
+        const v = i.tiles.slice(g);
+        for (const p of v)
+          o.value.set(`${p.id}`, p), await Rt(), n.makeWidget(h(p.id), {
+            autoPosition: !0,
+            w: p.layout.size.cols,
+            h: p.layout.size.rows
+          });
+      }
+    }), Et(() => {
+      i.tiles.forEach((y) => {
+        o.value.set(`${y.id}`, y);
+      });
+    }), e({ removeWidget: f }), (y, g) => (C(), V("div", {
+      ref_key: "gridContainer",
+      ref: r,
+      class: "grid-stack"
+    }, [
+      (C(!0), V(zt, null, Dt(i.tiles, (v) => (C(), V("div", {
+        key: v.id,
+        class: "grid-stack-item",
+        "data-id": `${v.id}`,
+        "data-testid": `grid-stack-item-${v.id}`,
+        "gs-h": v.layout.size.rows,
+        "gs-lazy-load": !0,
+        "gs-w": v.layout.size.cols,
+        "gs-x": v.layout.position.col,
+        "gs-y": v.layout.position.row
+      }, [
+        le("div", xs, [
+          Pe(y.$slots, "tile", { tile: v }, void 0, !0)
+        ])
+      ], 8, Es))), 128))
+    ], 512));
+  }
+}), Rs = /* @__PURE__ */ ce(Cs, [["__scopeId", "data-v-a68d6821"]]), Ts = { class: "kong-ui-public-dashboard-renderer" }, zs = {
+  key: 0,
+  class: "tile-container slottable-tile"
+}, Ds = /* @__PURE__ */ Q({
+  __name: "DashboardRenderer",
+  props: /* @__PURE__ */ lt({
+    context: {}
+  }, {
+    modelValue: { required: !0 },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ lt(["edit-tile", "tile-time-range-zoom"], ["update:modelValue"]),
+  setup(c, { expose: e, emit: t }) {
+    const i = c, s = t, r = oi(c, "modelValue"), { i18n: o } = _e.useI18n(), n = B(0), h = B(null), l = be(ue);
+    l || (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")), _e.useRequestQueue();
+    const d = St(), a = S(() => i.context.timeSpec ? i.context.timeSpec : {
+      type: "relative",
+      time_range: d.defaultQueryTimeForOrg
+    }), f = S(() => !!i.context.timeSpec || !d.loading), y = (E, A) => {
+      const N = E.layout.position.row - A.layout.position.row;
+      return N !== 0 ? N : E.layout.position.col - A.layout.position.col;
+    }, g = S(() => r.value.tiles.map((E) => {
+      var N;
+      let A = E.definition;
+      if ("description" in A.chart) {
+        const G = (N = A.chart.description) == null ? void 0 : N.replace(Ii, () => {
+          const oe = `renderer.trendRange.${a.value.type === "absolute" ? "custom" : a.value.time_range}`;
+          return o.te(oe) ? o.t(oe) : "";
+        });
+        A = {
+          ...A,
+          chart: {
+            ...A.chart,
+            description: G
+          }
+        };
+      }
+      return i.context.editable && !E.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
+      ), {
+        layout: E.layout,
+        meta: A,
+        type: E.type,
+        // Add a unique key to each tile internally.
+        id: E.id ?? crypto.randomUUID()
+      };
+    })), v = S(() => {
+      var oe, fe, ke;
+      let { tz: E, refreshInterval: A, editable: N } = i.context;
+      const G = [...i.context.filters ?? [], ...r.value.preset_filters ?? []];
+      E || (E = new Intl.DateTimeFormat().resolvedOptions().timeZone), A === void 0 && (A = qi), N === void 0 && (N = !1);
+      const U = !!((ke = (fe = (oe = ai()) == null ? void 0 : oe.vnode) == null ? void 0 : fe.props) != null && ke.onTileTimeRangeZoom);
+      return {
+        filters: G,
+        tz: E,
+        timeSpec: a.value,
+        refreshInterval: A,
+        editable: N,
+        zoomable: U
+      };
+    }), p = (E) => {
+      s("edit-tile", E);
+    }, R = (E) => E.type === "slottable", H = (E) => {
+      const A = R(E.meta.chart) ? { ...E.meta.chart } : {
+        ...E.meta.chart,
+        chart_title: E.meta.chart.chart_title ? `Copy of ${E.meta.chart.chart_title}` : ""
+      }, N = {
+        id: crypto.randomUUID(),
+        type: "chart",
+        definition: {
+          ...E.meta,
+          chart: A
+        },
+        layout: {
+          position: {
+            col: 0,
+            row: 0
+          },
+          size: E.layout.size
+        }
+      };
+      r.value.tiles.push(N);
+    }, T = (E) => {
+      h.value && h.value.removeWidget(E.id);
+    }, q = () => {
+      n.value++;
+    }, x = (E) => {
+      const A = E.map((N) => ({
+        id: N.id,
+        type: N.type,
+        layout: N.layout,
+        definition: N.meta
+      }));
+      r.value.tiles = A.sort(y);
+    };
+    return e({ refresh: q }), (E, A) => {
+      const N = de("KAlert");
+      return C(), V("div", Ts, [
+        k(l) ? (C(), M(Tt(E.context.editable ? Rs : ys), {
+          key: 1,
+          ref_key: "gridLayoutRef",
+          ref: h,
+          "tile-height": r.value.tile_height,
+          tiles: g.value,
+          onUpdateTiles: x
+        }, {
+          tile: I(({ tile: G }) => [
+            G.meta.chart.type === "slottable" ? (C(), V("div", zs, [
+              Pe(E.$slots, G.meta.chart.id, {}, void 0, !0)
+            ])) : (C(), M(gs, {
+              key: 1,
+              class: "tile-container",
+              context: v.value,
+              definition: G.meta,
+              height: G.layout.size.rows * (r.value.tile_height || k($e)) + parseInt(k(Bt), 10),
+              "query-ready": f.value,
+              "refresh-counter": n.value,
+              "tile-id": G.id,
+              onDuplicateTile: (U) => H(G),
+              onEditTile: (U) => p(G),
+              onRemoveTile: (U) => T(G),
+              onTileTimeRangeZoom: A[0] || (A[0] = (U) => s("tile-time-range-zoom", U))
+            }, null, 8, ["context", "definition", "height", "query-ready", "refresh-counter", "tile-id", "onDuplicateTile", "onEditTile", "onRemoveTile"]))
+          ]),
+          _: 3
+        }, 40, ["tile-height", "tiles"])) : (C(), M(N, {
+          key: 0,
+          appearance: "danger"
+        }, {
+          default: I(() => [
+            Ee(te(k(o).t("renderer.noQueryBridge")), 1)
+          ]),
+          _: 1
+        }))
+      ]);
+    };
+  }
+}), Ps = /* @__PURE__ */ ce(Ds, [["__scopeId", "data-v-c16badc2"]]);
+export {
+  Mi as C,
+  Ps as D,
+  ut as E,
+  ys as G,
+  ue as I,
+  Ii as T,
+  Qe as _,
+  $e as a,
+  At as b,
+  qi as c
+};