@kong-ui-public/dashboard-renderer 0.35.11 → 0.35.12

package/dist/dashboard-renderer.es.js

@@ -1,5 +1,5 @@
-import { ref as A, watchEffect as Fe, inject as Z, defineComponent as P, onUnmounted as fe, computed as S, watch as se, resolveComponent as F, unref as R, openBlock as C, createBlock as T, withCtx as k, createTextVNode as j, toDisplayString as U, renderSlot as he, createCommentVNode as M, useCssVars as de, createElementVNode as X, createVNode as $, mergeProps as ze, createSlots as Se, createElementBlock as L, normalizeProps as Ge, guardReactiveProps as We, nextTick as Te, normalizeClass as ke, resolveDynamicComponent as Ne, onMounted as He, Fragment as Ae, renderList as Le, normalizeStyle as ve } from "vue";
-import { stripUnknownFilters as Ke, Timeframe as Ve, TimePeriods as Oe, TIMEFRAME_LOOKUP as Ye, formatTime as _e, msToGranularity as Xe } from "@kong-ui-public/analytics-utilities";
+import { ref as A, watchEffect as Fe, inject as Z, defineComponent as O, onUnmounted as fe, computed as S, watch as se, resolveComponent as F, unref as R, openBlock as x, createBlock as T, withCtx as k, createTextVNode as j, toDisplayString as U, renderSlot as he, createCommentVNode as I, useCssVars as de, createElementVNode as X, createVNode as $, mergeProps as Se, createSlots as Te, createElementBlock as L, normalizeProps as Ge, guardReactiveProps as We, nextTick as ke, normalizeClass as Ne, resolveDynamicComponent as He, onMounted as Ae, Fragment as Le, renderList as Oe, normalizeStyle as _e } from "vue";
+import { stripUnknownFilters as Ke, Timeframe as Ve, TimePeriods as Me, TIMEFRAME_LOOKUP as Ye, formatTime as be, msToGranularity as Xe } from "@kong-ui-public/analytics-utilities";
 import { SimpleChart as je, AnalyticsChart as Qe, TopNTable as Je, CsvExportModal as Ze } from "@kong-ui-public/analytics-chart";
 import et from "swrv";
 import "axios";
@@ -8,7 +8,7 @@ import { MetricsProvider as st, MetricsConsumer as rt } from "@kong-ui-public/an
 import { EntityLink as nt } from "@kong-ui-public/entities-shared";
 import { EditIcon as ot, MoreIcon as at } from "@kong/icons";
 import { useAnalyticsConfigStore as lt } from "@kong-ui-public/analytics-config-store";
-var Me = /* @__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))(Me || {});
+var Ie = /* @__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))(Ie || {});
 const ht = (c) => {
   var e, t, i, s, r;
   return c ? !!// TODO: revisit: currently only the first check ever matters?
@@ -48,7 +48,7 @@ function dt(c = A({}), e, t, i = ht) {
     c.value === void 0 && e && (s.value = "ERROR");
   }), {
     state: s,
-    swrvState: Me
+    swrvState: Ie
   };
 }
 const ut = {
@@ -79,7 +79,7 @@ function mt() {
     // Translation component <i18n-t>
   };
 }
-const ge = 170, ee = "analytics-query-provider", be = "{entity-id}", yt = "{cp-id}", vt = "{timeframe}", _t = 30 * 1e3;
+const ge = 170, ee = "analytics-query-provider", we = "{entity-id}", yt = "{cp-id}", vt = "{timeframe}", _t = 30 * 1e3;
 function bt() {
   const c = Z(ee);
   return {
@@ -89,7 +89,7 @@ function bt() {
 const G = {
   useI18n: mt,
   useEvaluateFeatureFlag: bt
-}, pe = /* @__PURE__ */ P({
+}, pe = /* @__PURE__ */ O({
   __name: "QueryDataProvider",
   props: {
     context: {},
@@ -110,30 +110,30 @@ const G = {
       var D, w, z, E;
       try {
         let {
-          datasource: x,
+          datasource: C,
           ...W
         } = t.query;
-        x || (x = "basic");
-        const te = l(x, t.query.filters, t.context.filters);
-        let O = t.query.time_range;
-        O ? O.tz || (O = {
-          ...O,
+        C || (C = "basic");
+        const te = l(C, t.query.filters, t.context.filters);
+        let M = t.query.time_range;
+        M ? M.tz || (M = {
+          ...M,
           tz: t.context.tz
-        }) : O = {
+        }) : M = {
           ...t.context.timeSpec,
           tz: t.context.tz
         };
         const ie = {
-          datasource: x,
+          datasource: C,
           query: {
             ...W,
-            time_range: O,
+            time_range: M,
             filters: te
           }
         };
         return r == null ? void 0 : r.queryFn(ie, n);
-      } catch (x) {
-        m.value = ((w = (D = x == null ? void 0 : x.response) == null ? void 0 : D.data) == null ? void 0 : w.message) === "Range not allowed for this tier" ? s.t("queryDataProvider.timeRangeExceeded") : ((E = (z = x == null ? void 0 : x.response) == null ? void 0 : z.data) == null ? void 0 : E.message) || (x == null ? void 0 : x.message);
+      } catch (C) {
+        m.value = ((w = (D = C == null ? void 0 : C.response) == null ? void 0 : D.data) == null ? void 0 : w.message) === "Range not allowed for this tier" ? s.t("queryDataProvider.timeRangeExceeded") : ((E = (z = C == null ? void 0 : C.response) == null ? void 0 : z.data) == null ? void 0 : E.message) || (C == null ? void 0 : C.message);
       } finally {
         i("queryComplete");
       }
@@ -145,11 +145,11 @@ const G = {
       D && i("chart-data", D);
     }), (D, w) => {
       const z = F("KSkeleton"), E = F("KEmptyState");
-      return v.value || !R(d) && !p.value ? (C(), T(z, {
+      return v.value || !R(d) && !p.value ? (x(), T(z, {
         key: 0,
         class: "chart-skeleton",
         type: "table"
-      })) : p.value ? (C(), T(E, {
+      })) : p.value ? (x(), T(E, {
         key: 1,
         "action-button-visible": !1,
         "data-testid": "chart-empty-state",
@@ -162,10 +162,10 @@ const G = {
       })) : R(d) ? he(D.$slots, "default", {
         key: 2,
         data: R(d)
-      }) : M("", !0);
+      }) : I("", !0);
     };
   }
-}), wt = { class: "analytics-chart" }, Et = /* @__PURE__ */ P({
+}), wt = { class: "analytics-chart" }, Et = /* @__PURE__ */ O({
   __name: "SimpleChartRenderer",
   props: {
     query: {},
@@ -180,7 +180,7 @@ const G = {
       c40c0e86: `${t.height}px`
     }));
     const e = c;
-    return (t, i) => (C(), T(pe, {
+    return (t, i) => (x(), T(pe, {
       context: t.context,
       query: t.query,
       "query-ready": t.queryReady,
@@ -203,7 +203,7 @@ const G = {
   for (const [i, s] of e)
     t[i] = s;
   return t;
-}, xt = /* @__PURE__ */ Y(Et, [["__scopeId", "data-v-694cf637"]]), Ct = { class: "analytics-chart" }, Rt = /* @__PURE__ */ P({
+}, xt = /* @__PURE__ */ Y(Et, [["__scopeId", "data-v-694cf637"]]), Ct = { class: "analytics-chart" }, Rt = /* @__PURE__ */ O({
   __name: "BaseAnalyticsChartRenderer",
   props: {
     query: {},
@@ -239,7 +239,7 @@ const G = {
     };
     return (f, g) => {
       const m = F("KDropdownItem");
-      return C(), T(pe, {
+      return x(), T(pe, {
         context: f.context,
         query: f.query,
         "query-ready": f.queryReady,
@@ -248,7 +248,7 @@ const G = {
       }, {
         default: k(({ data: p }) => [
           X("div", Ct, [
-            $(R(Qe), ze({
+            $(R(Qe), Se({
               "allow-csv-export": f.chartOptions.allowCsvExport,
               "chart-data": p,
               "chart-options": l.value,
@@ -258,7 +258,7 @@ const G = {
               "show-menu": f.context.editable,
               "synthetics-data-key": f.chartOptions.syntheticsDataKey,
               "tooltip-title": ""
-            }, f.extraProps), Se({ _: 2 }, [
+            }, f.extraProps), Te({ _: 2 }, [
               f.context.editable ? {
                 name: "menu-items",
                 fn: k(() => [
@@ -278,7 +278,7 @@ const G = {
       }, 8, ["context", "query", "query-ready", "refresh-counter"]);
     };
   }
-}), Ie = /* @__PURE__ */ Y(Rt, [["__scopeId", "data-v-1bc587d3"]]), we = /* @__PURE__ */ P({
+}), me = /* @__PURE__ */ Y(Rt, [["__scopeId", "data-v-9bca4ef8"]]), Ee = /* @__PURE__ */ O({
   __name: "BarChartRenderer",
   props: {
     query: {},
@@ -289,7 +289,7 @@ const G = {
     refreshCounter: {}
   },
   setup(c) {
-    return (e, t) => (C(), T(Ie, {
+    return (e, t) => (x(), T(me, {
       "chart-options": e.chartOptions,
       context: e.context,
       "extra-props": { showAnnotations: !1 },
@@ -299,7 +299,7 @@ const G = {
       "refresh-counter": e.refreshCounter
     }, null, 8, ["chart-options", "context", "height", "query", "query-ready", "refresh-counter"]));
   }
-}), Ee = /* @__PURE__ */ P({
+}), xe = /* @__PURE__ */ O({
   __name: "TimeseriesChartRenderer",
   props: {
     query: {},
@@ -310,7 +310,7 @@ const G = {
     refreshCounter: {}
   },
   setup(c) {
-    return (e, t) => (C(), T(Ie, {
+    return (e, t) => (x(), T(me, {
       "chart-options": e.chartOptions,
       context: e.context,
       height: e.height,
@@ -319,7 +319,7 @@ const G = {
       "refresh-counter": e.refreshCounter
     }, null, 8, ["chart-options", "context", "height", "query", "query-ready", "refresh-counter"]));
   }
-}), Dt = { class: "metric-card-tile-wrapper" }, zt = /* @__PURE__ */ P({
+}), Dt = { class: "metric-card-tile-wrapper" }, zt = /* @__PURE__ */ O({
   __name: "GoldenSignalsRenderer",
   props: {
     query: {},
@@ -350,7 +350,7 @@ const G = {
           isRelative: !1,
           allowedTiers: ["free", "plus", "enterprise"]
         });
-      const n = Oe.get(o.time_range);
+      const n = Me.get(o.time_range);
       if (!n)
         throw new Error("Unknown time range");
       return n;
@@ -374,7 +374,7 @@ const G = {
         refreshCounter: e.refreshCounter
       };
     });
-    return (o, n) => (C(), L("div", Dt, [
+    return (o, n) => (x(), L("div", Dt, [
       $(R(st), Ge(We(r.value)), {
         default: k(() => [
           $(R(rt))
@@ -383,7 +383,7 @@ const G = {
       }, 16)
     ]));
   }
-}), St = /* @__PURE__ */ Y(zt, [["__scopeId", "data-v-0f571079"]]), xe = "#6c7489", Ce = "20px", Pe = "20px", Tt = /* @__PURE__ */ P({
+}), St = /* @__PURE__ */ Y(zt, [["__scopeId", "data-v-0f571079"]]), Ce = "#6c7489", Re = "20px", Pe = "20px", Tt = /* @__PURE__ */ O({
   __name: "TopNTableRenderer",
   props: {
     query: {},
@@ -399,12 +399,12 @@ const G = {
       if ((o = e.chartOptions) != null && o.entityLink)
         if (r.id.includes(":")) {
           const [n, l] = r.id.split(":");
-          return e.chartOptions.entityLink.replace(yt, n).replace(be, l);
+          return e.chartOptions.entityLink.replace(yt, n).replace(we, l);
         } else
-          return e.chartOptions.entityLink.replace(be, r.id);
+          return e.chartOptions.entityLink.replace(we, r.id);
       return "";
     };
-    return (r, o) => (C(), T(pe, {
+    return (r, o) => (x(), T(pe, {
       context: r.context,
       query: r.query,
       "query-ready": r.queryReady,
@@ -416,7 +416,7 @@ const G = {
           description: !R(i) && r.chartOptions.description || "",
           "synthetics-data-key": r.chartOptions.syntheticsDataKey,
           title: !R(i) && r.chartOptions.chartTitle || ""
-        }, Se({ _: 2 }, [
+        }, Te({ _: 2 }, [
           e.chartOptions.entityLink ? {
             name: "name",
             fn: k(({ record: l }) => [
@@ -436,10 +436,30 @@ const G = {
       _: 1
     }, 8, ["context", "query", "query-ready", "refresh-counter"]));
   }
-}), kt = ["data-testid"], Nt = {
+}), kt = /* @__PURE__ */ O({
+  __name: "DoughnutChartRenderer",
+  props: {
+    query: {},
+    context: {},
+    queryReady: { type: Boolean },
+    chartOptions: {},
+    height: {},
+    refreshCounter: {}
+  },
+  setup(c) {
+    return (e, t) => (x(), T(me, {
+      "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"]));
+  }
+}), Nt = ["data-testid"], Ht = {
   key: 0,
   class: "tile-header"
-}, Ht = ["data-testid"], At = ["data-testid"], Lt = ["data-testid"], Ot = ["data-testid"], Mt = /* @__PURE__ */ P({
+}, At = ["data-testid"], Lt = ["data-testid"], Ot = ["data-testid"], Mt = ["data-testid"], It = /* @__PURE__ */ O({
   __name: "DashboardTile",
   props: {
     definition: {},
@@ -452,11 +472,11 @@ const G = {
   emits: ["edit-tile", "remove-tile"],
   setup(c, { emit: e }) {
     de((b) => ({
-      "0025a8e6": `${b.height}px`
+      "78a578fd": `${b.height}px`
     }));
     const t = parseInt(Pe, 10), i = c, s = e, r = Z(ee), { evaluateFeatureFlag: o } = G.useEvaluateFeatureFlag(), { i18n: n } = G.useI18n(), l = o("ma-3043-analytics-chart-kebab-menu", !1), d = A(), h = A(!1), u = A(), f = A(!1);
     se(() => i.definition, async () => {
-      await Te(), u.value && (f.value = u.value.scrollWidth > u.value.clientWidth);
+      await ke(), u.value && (f.value = u.value.scrollWidth > u.value.clientWidth);
     }, { immediate: !0, deep: !0 });
     const g = S(() => {
       if (r && r.exploreBaseUrl) {
@@ -465,17 +485,18 @@ const G = {
           metrics: i.definition.query.metrics ?? [],
           dimensions: i.definition.query.dimensions ?? [],
           time_range: i.definition.query.time_range || i.context.timeSpec,
-          granularity: i.definition.query.granularity || x.value
+          granularity: i.definition.query.granularity || C.value
         }, K = ["advanced", "ai"].includes(i.definition.query.datasource) ? i.definition.query.datasource : "advanced";
         return `${r.exploreBaseUrl()}?q=${JSON.stringify(b)}&d=${K}&c=${i.definition.chart.type}`;
       }
       return "";
     }), m = S(() => n.t("csvExport.defaultFilename")), p = S(() => v.value && (D.value || i.context.editable) || !!E.value), v = S(() => l && !["golden_signals", "top_n", "gauge"].includes(i.definition.chart.type)), D = S(() => !!g.value || "allowCsvExport" in i.definition.chart && i.definition.chart.allowCsvExport || i.context.editable), w = {
-      timeseries_line: Ee,
-      timeseries_bar: Ee,
-      horizontal_bar: we,
-      vertical_bar: we,
+      timeseries_line: xe,
+      timeseries_bar: xe,
+      horizontal_bar: Ee,
+      vertical_bar: Ee,
       gauge: xt,
+      doughnut: kt,
       golden_signals: St,
       top_n: Tt,
       slottable: void 0
@@ -496,31 +517,31 @@ const G = {
       var K;
       const b = (K = i.definition.query) == null ? void 0 : K.time_range;
       if ((b == null ? void 0 : b.type) === "relative") {
-        const V = Oe.get(Ye[b.time_range]);
+        const V = Me.get(Ye[b.time_range]);
         return V ? V.display : (console.warn("Did not recognize the given relative time range:", b.time_range), b.time_range);
       } else if ((b == null ? void 0 : b.type) === "absolute") {
         const V = b.tz || "Etc/UTC";
-        return `${_e(b.start, { short: !0, tz: V })} - ${_e(b.end, { short: !0, tz: V })}`;
+        return `${be(b.start, { short: !0, tz: V })} - ${be(b.end, { short: !0, tz: V })}`;
       }
       return null;
-    }), x = S(() => d.value ? Xe(d.value.meta.granularity_ms) : void 0), W = () => {
+    }), C = S(() => d.value ? Xe(d.value.meta.granularity_ms) : void 0), W = () => {
       s("edit-tile", i.definition);
     }, te = () => {
       s("remove-tile", i.definition);
-    }, O = (b) => {
+    }, M = (b) => {
       d.value = b;
     }, ie = (b) => {
       h.value = b;
-    }, qe = () => {
+    }, Be = () => {
       ie(!0);
     };
     return (b, K) => {
       const V = F("KTooltip"), $e = F("KBadge"), ce = F("KDropdownItem"), Ue = F("KDropdown");
-      return C(), L("div", {
-        class: ke(["tile-boundary", { editable: b.context.editable }]),
+      return x(), L("div", {
+        class: Ne(["tile-boundary", { editable: b.context.editable }]),
         "data-testid": `tile-${b.tileId}`
       }, [
-        R(l) && b.definition.chart.type !== "slottable" ? (C(), L("div", Nt, [
+        R(l) && b.definition.chart.type !== "slottable" ? (x(), L("div", Ht, [
           $(V, {
             class: "title-tooltip",
             disabled: !f.value,
@@ -536,52 +557,52 @@ const G = {
             ]),
             _: 1
           }, 8, ["disabled", "text"]),
-          p.value ? (C(), L("div", {
+          p.value ? (x(), L("div", {
             key: 0,
             class: "tile-actions",
             "data-testid": `tile-actions-${b.tileId}`
           }, [
-            E.value ? (C(), T($e, { key: 0 }, {
+            E.value ? (x(), T($e, { key: 0 }, {
               default: k(() => [
                 j(U(E.value), 1)
               ]),
               _: 1
-            })) : M("", !0),
-            v.value && b.context.editable ? (C(), T(R(ot), {
+            })) : I("", !0),
+            v.value && b.context.editable ? (x(), T(R(ot), {
               key: 1,
               class: "edit-icon",
-              color: R(xe),
+              color: R(Ce),
               "data-testid": `edit-tile-${b.tileId}`,
-              size: R(Ce),
+              size: R(Re),
               onClick: W
-            }, null, 8, ["color", "data-testid", "size"])) : M("", !0),
-            v.value && D.value ? (C(), T(Ue, {
+            }, null, 8, ["color", "data-testid", "size"])) : I("", !0),
+            v.value && D.value ? (x(), T(Ue, {
               key: 2,
               class: "dropdown",
               "data-testid": `chart-action-menu-${b.tileId}`,
               "kpop-attributes": { placement: "bottom-end" }
             }, {
               items: k(() => [
-                g.value ? (C(), T(ce, {
+                g.value ? (x(), T(ce, {
                   key: 0,
                   "data-testid": `chart-jump-to-explore-${b.tileId}`,
                   item: { label: R(n).t("jumpToExplore"), to: g.value }
-                }, null, 8, ["data-testid", "item"])) : M("", !0),
-                "allowCsvExport" in b.definition.chart && b.definition.chart.allowCsvExport ? (C(), T(ce, {
+                }, null, 8, ["data-testid", "item"])) : I("", !0),
+                "allowCsvExport" in b.definition.chart && b.definition.chart.allowCsvExport ? (x(), T(ce, {
                   key: 1,
                   class: "chart-export-button",
                   "data-testid": `chart-csv-export-${b.tileId}`,
-                  onClick: K[0] || (K[0] = (Jt) => qe())
+                  onClick: K[0] || (K[0] = (Zt) => Be())
                 }, {
                   default: k(() => [
                     X("span", {
                       class: "chart-export-trigger",
                       "data-testid": `csv-export-button-${b.tileId}`
-                    }, U(R(n).t("csvExport.exportAsCsv")), 9, At)
+                    }, U(R(n).t("csvExport.exportAsCsv")), 9, Lt)
                   ]),
                   _: 1
-                }, 8, ["data-testid"])) : M("", !0),
-                b.context.editable ? (C(), T(ce, {
+                }, 8, ["data-testid"])) : I("", !0),
+                b.context.editable ? (x(), T(ce, {
                   key: 2,
                   "data-testid": `remove-tile-${b.tileId}`,
                   onClick: te
@@ -590,41 +611,41 @@ const G = {
                     j(U(R(n).t("renderer.remove")), 1)
                   ]),
                   _: 1
-                }, 8, ["data-testid"])) : M("", !0)
+                }, 8, ["data-testid"])) : I("", !0)
               ]),
               default: k(() => [
                 $(R(at), {
                   class: "kebab-action-menu",
-                  color: R(xe),
+                  color: R(Ce),
                   "data-testid": `kebab-action-menu-${b.tileId}`,
-                  size: R(Ce)
+                  size: R(Re)
                 }, null, 8, ["color", "data-testid", "size"])
               ]),
               _: 1
-            }, 8, ["data-testid"])) : M("", !0)
-          ], 8, Ht)) : "description" in b.definition.chart ? (C(), L("div", {
+            }, 8, ["data-testid"])) : I("", !0)
+          ], 8, At)) : "description" in b.definition.chart ? (x(), L("div", {
             key: 1,
             class: "header-description",
             "data-testid": `tile-description-${b.tileId}`
-          }, U(b.definition.chart.description), 9, Lt)) : M("", !0),
-          h.value ? (C(), T(R(Ze), {
+          }, U(b.definition.chart.description), 9, Ot)) : I("", !0),
+          h.value ? (x(), T(R(Ze), {
             key: 2,
             "chart-data": d.value,
             "data-testid": `csv-export-modal-${b.tileId}`,
             filename: m.value,
             onToggleModal: ie
-          }, null, 8, ["chart-data", "data-testid", "filename"])) : M("", !0)
-        ])) : M("", !0),
+          }, null, 8, ["chart-data", "data-testid", "filename"])) : I("", !0)
+        ])) : I("", !0),
         X("div", {
           class: "tile-content",
           "data-testid": `tile-content-${b.tileId}`
         }, [
-          z.value ? (C(), T(Ne(z.value.component), ze({ key: 0 }, z.value.rendererProps, { onChartData: O }), null, 16)) : M("", !0)
-        ], 8, Ot)
-      ], 10, kt);
+          z.value ? (x(), T(He(z.value.component), Se({ key: 0 }, z.value.rendererProps, { onChartData: M }), null, 16)) : I("", !0)
+        ], 8, Mt)
+      ], 10, Nt);
     };
   }
-}), It = /* @__PURE__ */ Y(Mt, [["__scopeId", "data-v-b35151d8"]]), Pt = (c, e, t) => {
+}), Pt = /* @__PURE__ */ Y(It, [["__scopeId", "data-v-f26f2419"]]), qt = (c, e, t) => {
   const i = /* @__PURE__ */ new Map();
   t.forEach((r) => {
     const o = r.layout.position.row, n = i.get(o), l = r.layout.size.rows === 1 && !!r.layout.size.fitToContent;
@@ -634,7 +655,7 @@ const G = {
   for (let r = 0; r < c; r++)
     i.get(r) ? s.push("auto") : s.push(`${e}px`);
   return s;
-}, Bt = /* @__PURE__ */ P({
+}, Bt = /* @__PURE__ */ O({
   __name: "GridLayout",
   props: {
     gridSize: {
@@ -661,14 +682,14 @@ const G = {
         !Array.isArray(n) || !n.length || (i.value = n[0].contentRect.width);
       });
     });
-    He(() => {
+    Ae(() => {
       t.value && s.observe(t.value);
     }), fe(() => {
       t.value && s.unobserve(t.value);
     });
     const r = S(() => {
       var l;
-      return Pt((l = e.gridSize) == null ? void 0 : l.rows, e.tileHeight, e.tiles).join(" ");
+      return qt((l = e.gridSize) == null ? void 0 : l.rows, e.tileHeight, e.tiles).join(" ");
     }), o = S(() => e.tiles.map((n, l) => ({
       key: `tile-${l}`,
       tile: n,
@@ -679,27 +700,27 @@ const G = {
         "grid-row-end": n.layout.position.row + 1 + n.layout.size.rows
       }
     })));
-    return (n, l) => (C(), L("div", {
+    return (n, l) => (x(), L("div", {
       ref_key: "gridContainer",
       ref: t,
       class: "kong-ui-public-grid-layout"
     }, [
-      (C(!0), L(Ae, null, Le(o.value, (d) => (C(), L("div", {
+      (x(!0), L(Le, null, Oe(o.value, (d) => (x(), L("div", {
         key: d.key,
-        class: ke(["grid-cell", {
+        class: Ne(["grid-cell", {
           "empty-cell": !d.tile
         }]),
-        style: ve(d.style)
+        style: _e(d.style)
       }, [
         he(n.$slots, "tile", {
-          style: ve(d.style),
+          style: _e(d.style),
           tile: d.tile
         }, void 0, !0)
       ], 6))), 128))
     ], 512));
   }
-}), qt = /* @__PURE__ */ Y(Bt, [["__scopeId", "data-v-f43eb7b8"]]);
-function $t(c, e, t, i, s) {
+}), $t = /* @__PURE__ */ Y(Bt, [["__scopeId", "data-v-f43eb7b8"]]);
+function Ut(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;
 }
@@ -1061,7 +1082,7 @@ class a {
     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 B {
+class q {
   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;
   }
@@ -1239,7 +1260,7 @@ class B {
    * @param resizing if out of bound, resize down or move into the grid to fit ?
    */
   prepareNode(e, t) {
-    e._id = e._id ?? B._idSeq++;
+    e._id = e._id ?? q._idSeq++;
     const i = e.id;
     if (i) {
       let r = 1;
@@ -1334,7 +1355,7 @@ class B {
     if (t.pack = !0, !this.maxRow)
       return this.moveNode(e, t);
     let i;
-    const s = new B({
+    const s = new q({
       column: this.column,
       float: this.float,
       nodes: this.nodes.map((o) => o._id === e._id ? (i = { ...o }, i) : { ...o })
@@ -1356,7 +1377,7 @@ class B {
   willItFit(e) {
     if (delete e._willFitPos, !this.maxRow)
       return !0;
-    const t = new B({
+    const t = new q({
       column: this.column,
       float: this.float,
       nodes: this.nodes.map((s) => ({ ...s }))
@@ -1492,7 +1513,7 @@ class B {
     return e.forEach((r, o) => {
       if (r._id === void 0) {
         const n = r.id ? this.nodes.find((l) => l.id === r.id) : void 0;
-        r._id = (n == null ? void 0 : n._id) ?? B._idSeq++;
+        r._id = (n == null ? void 0 : n._id) ?? q._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;
@@ -1503,7 +1524,7 @@ class B {
    * @param column corresponding column index to save it under
    */
   cacheOneLayout(e, t) {
-    e._id = e._id ?? B._idSeq++;
+    e._id = e._id ?? q._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);
@@ -1527,7 +1548,7 @@ class B {
     return this;
   }
 }
-B._idSeq = 0;
+q._idSeq = 0;
 const H = {
   alwaysShowResizeHandle: "mobile",
   animate: !0,
@@ -1560,8 +1581,8 @@ const H = {
 };
 class _ {
 }
-const I = 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 q {
+const P = 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 B {
 }
 function re(c, e) {
   if (c.touches.length > 1)
@@ -1601,7 +1622,7 @@ function re(c, e) {
     // relatedTarget
   ), c.target.dispatchEvent(i);
 }
-function Be(c, e) {
+function qe(c, e) {
   c.cancelable && c.preventDefault();
   const t = document.createEvent("MouseEvents");
   t.initMouseEvent(
@@ -1638,27 +1659,27 @@ function Be(c, e) {
   ), c.target.dispatchEvent(t);
 }
 function ne(c) {
-  q.touchHandled || (q.touchHandled = !0, re(c, "mousedown"));
+  B.touchHandled || (B.touchHandled = !0, re(c, "mousedown"));
 }
 function oe(c) {
-  q.touchHandled && re(c, "mousemove");
+  B.touchHandled && re(c, "mousemove");
 }
 function ae(c) {
-  if (!q.touchHandled)
+  if (!B.touchHandled)
     return;
-  q.pointerLeaveTimeout && (window.clearTimeout(q.pointerLeaveTimeout), delete q.pointerLeaveTimeout);
+  B.pointerLeaveTimeout && (window.clearTimeout(B.pointerLeaveTimeout), delete B.pointerLeaveTimeout);
   const e = !!_.dragElement;
-  re(c, "mouseup"), e || re(c, "click"), q.touchHandled = !1;
+  re(c, "mouseup"), e || re(c, "click"), B.touchHandled = !1;
 }
 function le(c) {
   c.pointerType !== "mouse" && c.target.releasePointerCapture(c.pointerId);
 }
-function Re(c) {
-  _.dragElement && c.pointerType !== "mouse" && Be(c, "mouseenter");
-}
 function De(c) {
-  _.dragElement && c.pointerType !== "mouse" && (q.pointerLeaveTimeout = window.setTimeout(() => {
-    delete q.pointerLeaveTimeout, Be(c, "mouseleave");
+  _.dragElement && c.pointerType !== "mouse" && qe(c, "mouseenter");
+}
+function ze(c) {
+  _.dragElement && c.pointerType !== "mouse" && (B.pointerLeaveTimeout = window.setTimeout(() => {
+    delete B.pointerLeaveTimeout, qe(c, "mouseleave");
   }, 10));
 }
 class ue {
@@ -1668,15 +1689,15 @@ class ue {
   /** @internal */
   _init() {
     const e = this.el = document.createElement("div");
-    return e.classList.add("ui-resizable-handle"), e.classList.add(`${ue.prefix}${this.dir}`), e.style.zIndex = "100", e.style.userSelect = "none", this.host.appendChild(this.el), this.el.addEventListener("mousedown", this._mouseDown), I && (this.el.addEventListener("touchstart", ne), this.el.addEventListener("pointerdown", le)), this;
+    return e.classList.add("ui-resizable-handle"), e.classList.add(`${ue.prefix}${this.dir}`), e.style.zIndex = "100", e.style.userSelect = "none", this.host.appendChild(this.el), this.el.addEventListener("mousedown", this._mouseDown), P && (this.el.addEventListener("touchstart", ne), this.el.addEventListener("pointerdown", le)), 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), I && (this.el.removeEventListener("touchstart", ne), this.el.removeEventListener("pointerdown", le)), this.host.removeChild(this.el), delete this.el, delete this.host, this;
+    return this.moving && this._mouseUp(this.mouseDownEvent), this.el.removeEventListener("mousedown", this._mouseDown), P && (this.el.removeEventListener("touchstart", ne), this.el.removeEventListener("pointerdown", le)), 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), I && (this.el.addEventListener("touchmove", oe), this.el.addEventListener("touchend", ae)), e.stopPropagation(), e.preventDefault();
+    this.mouseDownEvent = e, document.addEventListener("mousemove", this._mouseMove, { capture: !0, passive: !0 }), document.addEventListener("mouseup", this._mouseUp, !0), P && (this.el.addEventListener("touchmove", oe), this.el.addEventListener("touchend", ae)), e.stopPropagation(), e.preventDefault();
   }
   /** @internal */
   _mouseMove(e) {
@@ -1685,7 +1706,7 @@ class ue {
   }
   /** @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), I && (this.el.removeEventListener("touchmove", oe), this.el.removeEventListener("touchend", ae)), delete this.moving, delete this.mouseDownEvent, e.stopPropagation(), e.preventDefault();
+    this.moving && (this._triggerEvent("stop", e), document.removeEventListener("keydown", this._keyEvent)), document.removeEventListener("mousemove", this._mouseMove, !0), document.removeEventListener("mouseup", this._mouseUp, !0), P && (this.el.removeEventListener("touchmove", oe), this.el.removeEventListener("touchend", ae)), delete this.moving, delete this.mouseDownEvent, e.stopPropagation(), e.preventDefault();
   }
   /** @internal call when keys are being pressed - use Esc to cancel */
   _keyEvent(e) {
@@ -1698,7 +1719,7 @@ class ue {
   }
 }
 ue.prefix = "ui-resizable-";
-class me {
+class ye {
   constructor() {
     this._eventRegister = {};
   }
@@ -1726,7 +1747,7 @@ class me {
       return this._eventRegister[e](t);
   }
 }
-class Q extends me {
+class Q extends ye {
   // 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 = () => {
@@ -1876,8 +1897,8 @@ class Q extends me {
   }
 }
 Q._originStyleProp = ["width", "height", "position", "left", "top", "opacity", "zIndex"];
-const Ut = 'input,textarea,button,select,option,[contenteditable="true"],.ui-resizable-handle';
-class J extends me {
+const Ft = 'input,textarea,button,select,option,[contenteditable="true"],.ui-resizable-handle';
+class J extends ye {
   constructor(e, t = {}) {
     var r;
     super(), this.el = e, this.option = t, this.dragTransform = {
@@ -1897,12 +1918,12 @@ class J extends me {
   }
   enable() {
     this.disabled !== !1 && (super.enable(), this.dragEls.forEach((e) => {
-      e.addEventListener("mousedown", this._mouseDown), I && (e.addEventListener("touchstart", ne), e.addEventListener("pointerdown", le));
+      e.addEventListener("mousedown", this._mouseDown), P && (e.addEventListener("touchstart", ne), e.addEventListener("pointerdown", le));
     }), this.el.classList.remove("ui-draggable-disabled"));
   }
   disable(e = !1) {
     this.disabled !== !0 && (super.disable(), this.dragEls.forEach((t) => {
-      t.removeEventListener("mousedown", this._mouseDown), I && (t.removeEventListener("touchstart", ne), t.removeEventListener("pointerdown", le));
+      t.removeEventListener("mousedown", this._mouseDown), P && (t.removeEventListener("touchstart", ne), t.removeEventListener("pointerdown", le));
     }), e || this.el.classList.add("ui-draggable-disabled"));
   }
   destroy() {
@@ -1914,7 +1935,7 @@ class J extends me {
   /** @internal call when mouse goes down before a dragstart happens */
   _mouseDown(e) {
     if (!_.mouseHandled)
-      return e.button !== 0 || !this.dragEls.find((t) => t === e.target) && e.target.closest(Ut) || this.option.cancel && e.target.closest(this.option.cancel) || (this.mouseDownEvent = e, delete this.dragging, delete _.dragElement, delete _.dropElement, document.addEventListener("mousemove", this._mouseMove, { capture: !0, passive: !0 }), document.addEventListener("mouseup", this._mouseUp, !0), I && (e.currentTarget.addEventListener("touchmove", oe), e.currentTarget.addEventListener("touchend", ae)), e.preventDefault(), document.activeElement && document.activeElement.blur(), _.mouseHandled = !0), !0;
+      return e.button !== 0 || !this.dragEls.find((t) => t === e.target) && e.target.closest(Ft) || this.option.cancel && e.target.closest(this.option.cancel) || (this.mouseDownEvent = e, delete this.dragging, delete _.dragElement, delete _.dropElement, document.addEventListener("mousemove", this._mouseMove, { capture: !0, passive: !0 }), document.addEventListener("mouseup", this._mouseUp, !0), P && (e.currentTarget.addEventListener("touchmove", oe), e.currentTarget.addEventListener("touchend", ae)), e.preventDefault(), document.activeElement && document.activeElement.blur(), _.mouseHandled = !0), !0;
   }
   /** @internal method to call actual drag event */
   _callDrag(e) {
@@ -1945,7 +1966,7 @@ class J extends me {
   /** @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), I && e.currentTarget && (e.currentTarget.removeEventListener("touchmove", oe, !0), e.currentTarget.removeEventListener("touchend", ae, !0)), this.dragging) {
+    if (document.removeEventListener("mousemove", this._mouseMove, !0), document.removeEventListener("mouseup", this._mouseUp, !0), P && e.currentTarget && (e.currentTarget.removeEventListener("touchmove", oe, !0), e.currentTarget.removeEventListener("touchend", ae, !0)), this.dragging) {
       delete this.dragging, (t = this.el.gridstackNode) == null || delete t._origRotate, document.removeEventListener("keydown", this._keyEvent), ((i = _.dropElement) == null ? void 0 : i.el) === this.el.parentElement && delete _.dropElement, this.helperContainment.style.position = this.parentOriginStylePosition || null, this.helper !== this.el && this.helper.remove(), this._removeHelperStyle();
       const s = a.initEvent(e, { target: this.el, type: "dragstop" });
       this.option.stop && this.option.stop(s), this.triggerEvent("dragstop", s), _.dropElement && _.dropElement.drop(e);
@@ -2027,7 +2048,7 @@ class J extends me {
   }
 }
 J.originStyleProp = ["width", "height", "transform", "transform-origin", "transition", "pointerEvents", "position", "left", "top", "minWidth", "willChange"];
-class Ft extends me {
+class Gt extends ye {
   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();
   }
@@ -2038,10 +2059,10 @@ class Ft extends me {
     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), I && (this.el.addEventListener("pointerenter", Re), this.el.addEventListener("pointerleave", De)));
+    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), P && (this.el.addEventListener("pointerenter", De), this.el.addEventListener("pointerleave", ze)));
   }
   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), I && (this.el.removeEventListener("pointerenter", Re), this.el.removeEventListener("pointerleave", De)));
+    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), P && (this.el.removeEventListener("pointerenter", De), this.el.removeEventListener("pointerleave", ze)));
   }
   destroy() {
     this.disable(!0), this.el.classList.remove("ui-droppable"), this.el.classList.remove("ui-droppable-disabled"), super.destroy();
@@ -2093,9 +2114,9 @@ class Ft extends me {
     };
   }
 }
-class ye {
+class ve {
   static init(e) {
-    return e.ddElement || (e.ddElement = new ye(e)), e.ddElement;
+    return e.ddElement || (e.ddElement = new ve(e)), e.ddElement;
   }
   constructor(e) {
     this.el = e;
@@ -2119,13 +2140,13 @@ class ye {
     return this.ddResizable && (this.ddResizable.destroy(), delete this.ddResizable), this;
   }
   setupDroppable(e) {
-    return this.ddDroppable ? this.ddDroppable.updateOption(e) : this.ddDroppable = new Ft(this.el, e), this;
+    return this.ddDroppable ? this.ddDroppable.updateOption(e) : this.ddDroppable = new Gt(this.el, e), this;
   }
   cleanDroppable() {
     return this.ddDroppable && (this.ddDroppable.destroy(), delete this.ddDroppable), this;
   }
 }
-class Gt {
+class Wt {
   resizable(e, t, i, s) {
     return this._getDDElements(e).forEach((r) => {
       if (t === "disable" || t === "enable")
@@ -2206,7 +2227,7 @@ class Gt {
     const i = a.getElements(e);
     if (!i.length)
       return [];
-    const s = i.map((r) => r.ddElement || (t ? ye.init(r) : null));
+    const s = i.map((r) => r.ddElement || (t ? ve.init(r) : null));
     return t || s.filter((r) => r), s;
   }
 }
@@ -2217,7 +2238,7 @@ class Gt {
  * Copyright (c) 2021-2024  Alain Dumesny
  * see root license https://github.com/gridstack/gridstack.js/tree/master/LICENSE
  */
-const N = new Gt();
+const N = new Wt();
 class y {
   /**
    * initializing the HTML element, or selector string, into a grid will return the grid. Calling it again will
@@ -2325,8 +2346,8 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
     };
     e.getAttribute("gs-animate") && (n.animate = a.toBool(e.getAttribute("gs-animate"))), t = a.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 l = this.el.closest("." + H.itemClass), d = l == null ? void 0 : l.gridstackNode;
-    d && (d.subGrid = this, this.parentGridNode = d, this.el.classList.add("grid-stack-nested"), d.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 !== H.cellHeightUnit && (t.cellHeight = t.cellHeight + t.cellHeightUnit, delete t.cellHeightUnit), this.cellHeight(t.cellHeight, !1)), t.alwaysShowResizeHandle === "mobile" && (t.alwaysShowResizeHandle = I), this._styleSheetClass = "gs-id-" + B._idSeq++, this.el.classList.add(this._styleSheetClass), this._setStaticClass();
-    const h = t.engineClass || y.engineClass || B;
+    d && (d.subGrid = this, this.parentGridNode = d, this.el.classList.add("grid-stack-nested"), d.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 !== H.cellHeightUnit && (t.cellHeight = t.cellHeight + t.cellHeightUnit, delete t.cellHeightUnit), this.cellHeight(t.cellHeight, !1)), t.alwaysShowResizeHandle === "mobile" && (t.alwaysShowResizeHandle = P), this._styleSheetClass = "gs-id-" + q._idSeq++, this.el.classList.add(this._styleSheetClass), this._setStaticClass();
+    const h = t.engineClass || y.engineClass || q;
     if (this.engine = new h({
       column: this.getColumn(),
       float: t.float,
@@ -3378,8 +3399,8 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
       const z = this._extraDragRow;
       if (this.engine.collide(s, n)) {
         const E = this.getRow();
-        let x = Math.max(0, n.y + s.h - E);
-        this.opts.maxRow && E + x > this.opts.maxRow && (x = Math.max(0, this.opts.maxRow - E)), this._extraDragRow = x;
+        let C = Math.max(0, n.y + s.h - E);
+        this.opts.maxRow && E + C > this.opts.maxRow && (C = Math.max(0, this.opts.maxRow - E)), this._extraDragRow = C;
       } else
         this._extraDragRow = 0;
       if (this._extraDragRow !== z && this._updateContainerHeight(), s.x === n.x && s.y === n.y)
@@ -3414,7 +3435,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
   }
   // legacy method removed
   commit() {
-    return $t(this, this.batchUpdate(!1), "commit", "batchUpdate", "5.2"), this;
+    return Ut(this, this.batchUpdate(!1), "commit", "batchUpdate", "5.2"), this;
   }
 }
 y.renderCB = (c, e) => {
@@ -3422,9 +3443,9 @@ y.renderCB = (c, e) => {
 };
 y.resizeToContentParent = ".grid-stack-item-content";
 y.Utils = a;
-y.Engine = B;
+y.Engine = q;
 y.GDRev = "11.3.0";
-const Wt = ["data-id", "gs-h", "gs-w", "gs-x", "gs-y"], Kt = { class: "grid-stack-item-content" }, Vt = /* @__PURE__ */ P({
+const Kt = ["data-id", "gs-h", "gs-w", "gs-x", "gs-y"], Vt = { class: "grid-stack-item-content" }, Yt = /* @__PURE__ */ O({
   __name: "DraggableGridLayout",
   props: {
     tiles: {},
@@ -3458,7 +3479,7 @@ const Wt = ["data-id", "gs-h", "gs-w", "gs-x", "gs-y"], Kt = { class: "grid-stac
         o.value.delete(`${(v = p.el) == null ? void 0 : v.getAttribute("data-id")}`);
       }), s("update-tiles", Array.from(o.value.values()));
     };
-    He(() => {
+    Ae(() => {
       r.value && (n = y.init({
         column: i.gridSize.cols,
         cellHeight: i.tileHeight,
@@ -3479,7 +3500,7 @@ const Wt = ["data-id", "gs-h", "gs-w", "gs-x", "gs-y"], Kt = { class: "grid-stac
       if (g > m && n) {
         const p = i.tiles.slice(m);
         for (const v of p)
-          o.value.set(`${v.id}`, v), await Te(), n.makeWidget(l(v.id), {
+          o.value.set(`${v.id}`, v), await ke(), n.makeWidget(l(v.id), {
             autoPosition: !0,
             w: v.layout.size.cols,
             h: v.layout.size.rows
@@ -3493,12 +3514,12 @@ const Wt = ["data-id", "gs-h", "gs-w", "gs-x", "gs-y"], Kt = { class: "grid-stac
           meta: p.meta
         });
       });
-    }, { deep: !0 }), e({ removeWidget: f }), (g, m) => (C(), L("div", {
+    }, { deep: !0 }), e({ removeWidget: f }), (g, m) => (x(), L("div", {
       ref_key: "gridContainer",
       ref: r,
       class: "grid-stack"
     }, [
-      (C(!0), L(Ae, null, Le(o.value.values(), (p) => (C(), L("div", {
+      (x(!0), L(Le, null, Oe(o.value.values(), (p) => (x(), L("div", {
         key: p.id,
         class: "grid-stack-item",
         "data-id": `${p.id}`,
@@ -3508,16 +3529,16 @@ const Wt = ["data-id", "gs-h", "gs-w", "gs-x", "gs-y"], Kt = { class: "grid-stac
         "gs-x": p.layout.position.col,
         "gs-y": p.layout.position.row
       }, [
-        X("div", Kt, [
+        X("div", Vt, [
           he(g.$slots, "tile", { tile: p }, void 0, !0)
         ])
-      ], 8, Wt))), 128))
+      ], 8, Kt))), 128))
     ], 512));
   }
-}), Yt = /* @__PURE__ */ Y(Vt, [["__scopeId", "data-v-75a03226"]]), Xt = { class: "kong-ui-public-dashboard-renderer" }, jt = {
+}), Xt = /* @__PURE__ */ Y(Yt, [["__scopeId", "data-v-75a03226"]]), jt = { class: "kong-ui-public-dashboard-renderer" }, Qt = {
   key: 0,
   class: "tile-container"
-}, Qt = /* @__PURE__ */ P({
+}, Jt = /* @__PURE__ */ O({
   __name: "DashboardRenderer",
   props: {
     context: {},
@@ -3531,12 +3552,12 @@ const Wt = ["data-id", "gs-h", "gs-w", "gs-x", "gs-y"], Kt = { class: "grid-stac
       type: "relative",
       time_range: d.defaultQueryTimeForOrg
     }), u = S(() => !!i.context.timeSpec || !d.loading), f = S(() => i.config.tiles.map((w, z) => {
-      var x;
+      var C;
       let E = w.definition;
       if ("description" in E.chart) {
-        const W = (x = E.chart.description) == null ? void 0 : x.replace(vt, () => {
-          const O = `renderer.trendRange.${h.value.type === "absolute" ? "custom" : h.value.time_range}`;
-          return r.te(O) ? r.t(O) : "";
+        const W = (C = E.chart.description) == null ? void 0 : C.replace(vt, () => {
+          const M = `renderer.trendRange.${h.value.type === "absolute" ? "custom" : h.value.time_range}`;
+          return r.te(M) ? r.t(M) : "";
         });
         E = {
           ...E,
@@ -3581,8 +3602,8 @@ const Wt = ["data-id", "gs-h", "gs-w", "gs-x", "gs-y"], Kt = { class: "grid-stac
     };
     return e({ refresh: v }), (w, z) => {
       const E = F("KAlert");
-      return C(), L("div", Xt, [
-        R(l) ? (C(), T(Ne(w.context.editable ? Yt : qt), {
+      return x(), L("div", jt, [
+        R(l) ? (x(), T(He(w.context.editable ? Xt : $t), {
           key: 1,
           ref_key: "gridLayoutRef",
           ref: n,
@@ -3591,24 +3612,24 @@ const Wt = ["data-id", "gs-h", "gs-w", "gs-x", "gs-y"], Kt = { class: "grid-stac
           tiles: f.value,
           onUpdateTiles: D
         }, {
-          tile: k(({ tile: x }) => [
-            x.meta.chart.type === "slottable" ? (C(), L("div", jt, [
-              he(w.$slots, x.meta.chart.id, {}, void 0, !0)
-            ])) : (C(), T(It, {
+          tile: k(({ tile: C }) => [
+            C.meta.chart.type === "slottable" ? (x(), L("div", Qt, [
+              he(w.$slots, C.meta.chart.id, {}, void 0, !0)
+            ])) : (x(), T(Pt, {
               key: 1,
               class: "tile-container",
               context: g.value,
-              definition: x.meta,
-              height: x.layout.size.rows * (w.config.tileHeight || R(ge)) + parseInt(R(Pe), 10),
+              definition: C.meta,
+              height: C.layout.size.rows * (w.config.tileHeight || R(ge)) + parseInt(R(Pe), 10),
               "query-ready": u.value,
               "refresh-counter": o.value,
-              "tile-id": x.id,
-              onEditTile: (W) => m(x),
-              onRemoveTile: (W) => p(x)
+              "tile-id": C.id,
+              onEditTile: (W) => m(C),
+              onRemoveTile: (W) => p(C)
             }, null, 8, ["context", "definition", "height", "query-ready", "refresh-counter", "tile-id", "onEditTile", "onRemoveTile"]))
           ]),
           _: 3
-        }, 40, ["grid-size", "tile-height", "tiles"])) : (C(), T(E, {
+        }, 40, ["grid-size", "tile-height", "tiles"])) : (x(), T(E, {
           key: 0,
           appearance: "danger"
         }, {
@@ -3620,14 +3641,14 @@ const Wt = ["data-id", "gs-h", "gs-w", "gs-x", "gs-y"], Kt = { class: "grid-stac
       ]);
     };
   }
-}), hi = /* @__PURE__ */ Y(Qt, [["__scopeId", "data-v-f5fe64fb"]]);
+}), di = /* @__PURE__ */ Y(Jt, [["__scopeId", "data-v-f5fe64fb"]]);
 export {
   yt as CP_ID_TOKEN,
   ge as DEFAULT_TILE_HEIGHT,
   _t as DEFAULT_TILE_REFRESH_INTERVAL_MS,
-  hi as DashboardRenderer,
-  be as ENTITY_ID_TOKEN,
-  qt as GridLayout,
+  di as DashboardRenderer,
+  we as ENTITY_ID_TOKEN,
+  $t as GridLayout,
   ee as INJECT_QUERY_PROVIDER,
   vt as TIMEFRAME_TOKEN
 };