@kong-ui-public/dashboard-renderer 0.35.0 → 0.35.2

package/dist/dashboard-renderer.es.js

@@ -1,25 +1,25 @@
-import { ref as U, watchEffect as Oe, inject as j, defineComponent as M, onUnmounted as le, computed as S, watch as Ee, resolveComponent as W, unref as x, openBlock as E, createBlock as T, withCtx as H, createTextVNode as re, toDisplayString as G, renderSlot as ne, createCommentVNode as I, useCssVars as oe, createElementVNode as K, createVNode as $, mergeProps as xe, createSlots as Ce, createElementBlock as L, normalizeProps as Me, guardReactiveProps as Ie, resolveDynamicComponent as Re, onMounted as De, Fragment as ze, renderList as Se, normalizeClass as Pe, normalizeStyle as fe } from "vue";
-import { stripUnknownFilters as Be, Timeframe as qe, TimePeriods as Te, TIMEFRAME_LOOKUP as Ue, formatTime as ge, msToGranularity as $e } from "@kong-ui-public/analytics-utilities";
-import { SimpleChart as Fe, AnalyticsChart as Ge, TopNTable as We, CsvExportModal as Ke } from "@kong-ui-public/analytics-chart";
-import Ve from "swrv";
+import { ref as L, watchEffect as Pe, inject as Q, defineComponent as M, onUnmounted as he, computed as z, watch as de, resolveComponent as F, unref as C, openBlock as x, createBlock as T, withCtx as N, createTextVNode as re, toDisplayString as K, renderSlot as ne, createCommentVNode as I, useCssVars as oe, createElementVNode as Y, createVNode as U, mergeProps as Re, createSlots as De, createElementBlock as A, normalizeProps as Be, guardReactiveProps as qe, nextTick as Ue, resolveDynamicComponent as ze, onMounted as Se, Fragment as Te, renderList as ke, normalizeClass as Fe, normalizeStyle as me } from "vue";
+import { stripUnknownFilters as $e, Timeframe as Ge, TimePeriods as Ne, TIMEFRAME_LOOKUP as We, formatTime as ye, msToGranularity as Ke } from "@kong-ui-public/analytics-utilities";
+import { SimpleChart as Ve, AnalyticsChart as Ye, TopNTable as Xe, CsvExportModal as je } from "@kong-ui-public/analytics-chart";
+import Qe from "swrv";
 import "axios";
-import { createI18n as Ye, i18nTComponent as Xe } from "@kong-ui-public/i18n";
-import { MetricsProvider as je, MetricsConsumer as Qe } from "@kong-ui-public/analytics-metric-provider";
-import { EntityLink as Je } from "@kong-ui-public/entities-shared";
-import { EditIcon as Ze, MoreIcon as et } from "@kong/icons";
-import { useAnalyticsConfigStore as tt } from "@kong-ui-public/analytics-config-store";
-var ke = /* @__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))(ke || {});
-const it = (c) => {
+import { createI18n as Je, i18nTComponent as Ze } from "@kong-ui-public/i18n";
+import { MetricsProvider as et, MetricsConsumer as tt } from "@kong-ui-public/analytics-metric-provider";
+import { EntityLink as it } from "@kong-ui-public/entities-shared";
+import { EditIcon as st, MoreIcon as rt } from "@kong/icons";
+import { useAnalyticsConfigStore as nt } from "@kong-ui-public/analytics-config-store";
+var He = /* @__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))(He || {});
+const ot = (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 st(c = U({}), e, t, i = it) {
-  const s = U(
+function at(c = L({}), e, t, i = ot) {
+  const s = L(
     "PENDING"
     /* PENDING */
   );
-  return Oe(() => {
+  return Pe(() => {
     const r = i(c.value);
     if (c.value && r && t.value) {
       s.value = "VALIDATING_HAS_DATA";
@@ -48,10 +48,10 @@ function st(c = U({}), e, t, i = it) {
     c.value === void 0 && e && (s.value = "ERROR");
   }), {
     state: s,
-    swrvState: ke
+    swrvState: He
   };
 }
-const rt = {
+const lt = {
   noQueryBridge: "No query bridge provided.  Unable to render dashboard.",
   trendRange: {
     "24h": "Last 24-Hour Summary",
@@ -59,36 +59,36 @@ const rt = {
     "30d": "Last 30-Day Summary"
   },
   edit: "Edit"
-}, nt = {
+}, ht = {
   timeRangeExceeded: "The time range for this report is outside of your organization's data retention period"
-}, ot = {
+}, dt = {
   defaultFilename: "Chart Export",
   exportAsCsv: "Export as CSV"
-}, at = "Explore", lt = {
-  renderer: rt,
-  queryDataProvider: nt,
-  csvExport: ot,
-  jumpToExplore: at
+}, ut = "Explore", ct = {
+  renderer: lt,
+  queryDataProvider: ht,
+  csvExport: dt,
+  jumpToExplore: ut
 };
-function ht() {
-  const c = Ye("en-us", lt);
+function ft() {
+  const c = Je("en-us", ct);
   return {
     i18n: c,
-    i18nT: Xe(c)
+    i18nT: Ze(c)
     // Translation component <i18n-t>
   };
 }
-const he = 170, Q = "analytics-query-provider", pe = "{entity-id}", dt = "{cp-id}", ut = "{timeframe}", ct = 30 * 1e3;
-function ft() {
-  const c = j(Q);
+const ue = 170, J = "analytics-query-provider", _e = "{entity-id}", gt = "{cp-id}", pt = "{timeframe}", mt = 30 * 1e3;
+function yt() {
+  const c = Q(J);
   return {
     evaluateFeatureFlag: (t, i) => c ? c.evaluateFeatureFlagFn(t, i) : i
   };
 }
-const F = {
-  useI18n: ht,
-  useEvaluateFeatureFlag: ft
-}, de = /* @__PURE__ */ M({
+const $ = {
+  useI18n: ft,
+  useEvaluateFeatureFlag: yt
+}, ce = /* @__PURE__ */ M({
   __name: "QueryDataProvider",
   props: {
     context: {},
@@ -98,73 +98,73 @@ const F = {
   },
   emits: ["chart-data", "queryComplete"],
   setup(c, { emit: e }) {
-    const t = c, i = e, { i18n: s } = F.useI18n(), r = j(Q), o = () => t.queryReady && r ? JSON.stringify([t.query, t.context, t.refreshCounter]) : null, n = new AbortController();
-    le(() => {
+    const t = c, i = e, { i18n: s } = $.useI18n(), r = Q(J), o = () => t.queryReady && r ? JSON.stringify([t.query, t.context, t.refreshCounter]) : null, n = new AbortController();
+    he(() => {
       n.abort();
     });
-    const l = (w, C, D) => {
-      const z = [];
-      return C && z.push(...C), z.push(...Be(w, D)), z;
-    }, { data: h, error: d, isValidating: u } = Ve(o, async () => {
-      var w, C, D, z;
+    const l = (w, E, D) => {
+      const S = [];
+      return E && S.push(...E), S.push(...$e(w, D)), S;
+    }, { data: h, error: d, isValidating: u } = Qe(o, async () => {
+      var w, E, D, S;
       try {
         let {
           datasource: R,
-          ...y
+          ...G
         } = t.query;
         R || (R = "basic");
-        const q = l(R, t.query.filters, t.context.filters);
-        let N = t.query.time_range;
-        N ? N.tz || (N = {
-          ...N,
+        const le = l(R, t.query.filters, t.context.filters);
+        let p = t.query.time_range;
+        p ? p.tz || (p = {
+          ...p,
           tz: t.context.tz
-        }) : N = {
+        }) : p = {
           ...t.context.timeSpec,
           tz: t.context.tz
         };
-        const J = {
+        const q = {
           datasource: R,
           query: {
-            ...y,
-            time_range: N,
-            filters: q
+            ...G,
+            time_range: p,
+            filters: le
           }
         };
-        return r == null ? void 0 : r.queryFn(J, n);
+        return r == null ? void 0 : r.queryFn(q, n);
       } catch (R) {
-        v.value = ((C = (w = R == null ? void 0 : R.response) == null ? void 0 : w.data) == null ? void 0 : C.message) === "Range not allowed for this tier" ? s.t("queryDataProvider.timeRangeExceeded") : ((z = (D = R == null ? void 0 : R.response) == null ? void 0 : D.data) == null ? void 0 : z.message) || (R == null ? void 0 : R.message);
+        v.value = ((E = (w = R == null ? void 0 : R.response) == null ? void 0 : w.data) == null ? void 0 : E.message) === "Range not allowed for this tier" ? s.t("queryDataProvider.timeRangeExceeded") : ((S = (D = R == null ? void 0 : R.response) == null ? void 0 : D.data) == null ? void 0 : S.message) || (R == null ? void 0 : R.message);
       } finally {
         i("queryComplete");
       }
     }, {
       refreshInterval: t.context.refreshInterval,
       revalidateOnFocus: !1
-    }), { state: f, swrvState: _ } = st(h, d, u), v = U(null), b = S(() => f.value === _.ERROR || !!v.value), p = S(() => !t.queryReady || f.value === _.PENDING);
-    return Ee(h, (w) => {
+    }), { state: f, swrvState: _ } = at(h, d, u), v = L(null), b = z(() => f.value === _.ERROR || !!v.value), y = z(() => !t.queryReady || f.value === _.PENDING);
+    return de(h, (w) => {
       w && i("chart-data", w);
-    }), (w, C) => {
-      const D = W("KSkeleton"), z = W("KEmptyState");
-      return p.value || !x(h) && !b.value ? (E(), T(D, {
+    }), (w, E) => {
+      const D = F("KSkeleton"), S = F("KEmptyState");
+      return y.value || !C(h) && !b.value ? (x(), T(D, {
         key: 0,
         class: "chart-skeleton",
         type: "table"
-      })) : b.value ? (E(), T(z, {
+      })) : b.value ? (x(), T(S, {
         key: 1,
         "action-button-visible": !1,
         "data-testid": "chart-empty-state",
         "icon-variant": "error"
       }, {
-        default: H(() => [
-          re(G(v.value), 1)
+        default: N(() => [
+          re(K(v.value), 1)
         ]),
         _: 1
-      })) : x(h) ? ne(w.$slots, "default", {
+      })) : C(h) ? ne(w.$slots, "default", {
         key: 2,
-        data: x(h)
+        data: C(h)
       }) : I("", !0);
     };
   }
-}), gt = { class: "analytics-chart" }, pt = /* @__PURE__ */ M({
+}), _t = { class: "analytics-chart" }, vt = /* @__PURE__ */ M({
   __name: "SimpleChartRenderer",
   props: {
     query: {},
@@ -179,15 +179,15 @@ const F = {
       c40c0e86: `${t.height}px`
     }));
     const e = c;
-    return (t, i) => (E(), T(de, {
+    return (t, i) => (x(), T(ce, {
       context: t.context,
       query: t.query,
       "query-ready": t.queryReady,
       "refresh-counter": t.refreshCounter
     }, {
-      default: H(({ data: s }) => [
-        K("div", gt, [
-          $(x(Fe), {
+      default: N(({ data: s }) => [
+        Y("div", _t, [
+          U(C(Ve), {
             "chart-data": s,
             "chart-options": e.chartOptions,
             "synthetics-data-key": t.chartOptions.syntheticsDataKey
@@ -202,7 +202,7 @@ const F = {
   for (const [i, s] of e)
     t[i] = s;
   return t;
-}, mt = /* @__PURE__ */ V(pt, [["__scopeId", "data-v-694cf637"]]), yt = { class: "analytics-chart" }, _t = /* @__PURE__ */ M({
+}, bt = /* @__PURE__ */ V(vt, [["__scopeId", "data-v-694cf637"]]), wt = { class: "analytics-chart" }, Et = /* @__PURE__ */ M({
   __name: "BaseAnalyticsChartRenderer",
   props: {
     query: {},
@@ -215,12 +215,12 @@ const F = {
   },
   emits: ["edit-tile", "chart-data"],
   setup(c, { emit: e }) {
-    const t = c, i = e, s = j(Q), { i18n: r } = F.useI18n(), { evaluateFeatureFlag: o } = F.useEvaluateFeatureFlag(), n = o("ma-3043-analytics-chart-kebab-menu", !1), l = S(() => ({
+    const t = c, i = e, s = Q(J), { i18n: r } = $.useI18n(), { evaluateFeatureFlag: o } = $.useEvaluateFeatureFlag(), n = o("ma-3043-analytics-chart-kebab-menu", !1), l = z(() => ({
       type: t.chartOptions.type,
       stacked: t.chartOptions.stacked ?? !1,
       chartDatasetColors: t.chartOptions.chartDatasetColors,
       threshold: t.chartOptions.threshold
-    })), h = S(() => {
+    })), h = z(() => {
       if (s && s.exploreBaseUrl) {
         const f = {
           filters: [...t.context.filters, ...t.query.filters ?? []],
@@ -237,33 +237,33 @@ const F = {
       i("chart-data", f);
     };
     return (f, _) => {
-      const v = W("KDropdownItem");
-      return E(), T(de, {
+      const v = F("KDropdownItem");
+      return x(), T(ce, {
         context: f.context,
         query: f.query,
         "query-ready": f.queryReady,
         "refresh-counter": f.refreshCounter,
         onChartData: u
       }, {
-        default: H(({ data: b }) => [
-          K("div", yt, [
-            $(x(Ge), xe({
+        default: N(({ data: b }) => [
+          Y("div", wt, [
+            U(C(Ye), Re({
               "allow-csv-export": f.chartOptions.allowCsvExport,
               "chart-data": b,
               "chart-options": l.value,
-              "chart-title": !x(n) && f.chartOptions.chartTitle || "",
+              "chart-title": !C(n) && f.chartOptions.chartTitle || "",
               "go-to-explore": h.value,
               "legend-position": "bottom",
               "show-menu": f.context.editable,
               "synthetics-data-key": f.chartOptions.syntheticsDataKey,
               "tooltip-title": ""
-            }, f.extraProps), Ce({ _: 2 }, [
+            }, f.extraProps), De({ _: 2 }, [
               f.context.editable ? {
                 name: "menu-items",
-                fn: H(() => [
-                  $(v, { onClick: d }, {
-                    default: H(() => [
-                      re(G(x(r).t("renderer.edit")), 1)
+                fn: N(() => [
+                  U(v, { onClick: d }, {
+                    default: N(() => [
+                      re(K(C(r).t("renderer.edit")), 1)
                     ]),
                     _: 1
                   })
@@ -277,7 +277,7 @@ const F = {
       }, 8, ["context", "query", "query-ready", "refresh-counter"]);
     };
   }
-}), Ne = /* @__PURE__ */ V(_t, [["__scopeId", "data-v-1bc587d3"]]), me = /* @__PURE__ */ M({
+}), Ae = /* @__PURE__ */ V(Et, [["__scopeId", "data-v-1bc587d3"]]), ve = /* @__PURE__ */ M({
   __name: "BarChartRenderer",
   props: {
     query: {},
@@ -288,7 +288,7 @@ const F = {
     refreshCounter: {}
   },
   setup(c) {
-    return (e, t) => (E(), T(Ne, {
+    return (e, t) => (x(), T(Ae, {
       "chart-options": e.chartOptions,
       context: e.context,
       "extra-props": { showAnnotations: !1 },
@@ -298,7 +298,7 @@ const F = {
       "refresh-counter": e.refreshCounter
     }, null, 8, ["chart-options", "context", "height", "query", "query-ready", "refresh-counter"]));
   }
-}), ye = /* @__PURE__ */ M({
+}), be = /* @__PURE__ */ M({
   __name: "TimeseriesChartRenderer",
   props: {
     query: {},
@@ -309,7 +309,7 @@ const F = {
     refreshCounter: {}
   },
   setup(c) {
-    return (e, t) => (E(), T(Ne, {
+    return (e, t) => (x(), T(Ae, {
       "chart-options": e.chartOptions,
       context: e.context,
       height: e.height,
@@ -318,7 +318,7 @@ const F = {
       "refresh-counter": e.refreshCounter
     }, null, 8, ["chart-options", "context", "height", "query", "query-ready", "refresh-counter"]));
   }
-}), vt = { class: "metric-card-tile-wrapper" }, bt = /* @__PURE__ */ M({
+}), xt = { class: "metric-card-tile-wrapper" }, Ct = /* @__PURE__ */ M({
   __name: "GoldenSignalsRenderer",
   props: {
     query: {},
@@ -330,14 +330,14 @@ const F = {
   },
   setup(c) {
     oe((o) => ({
-      "926e3b48": x(i) ? "90%" : "100%",
-      "7be2893e": x(i) ? "auto" : "100%",
-      "0d55c162": x(i) ? "100%" : "none"
+      "926e3b48": C(i) ? "90%" : "100%",
+      "7be2893e": C(i) ? "auto" : "100%",
+      "0d55c162": C(i) ? "100%" : "none"
     }));
-    const e = c, { evaluateFeatureFlag: t } = F.useEvaluateFeatureFlag(), i = t("ma-3043-analytics-chart-kebab-menu", !1), s = S(() => {
+    const e = c, { evaluateFeatureFlag: t } = $.useEvaluateFeatureFlag(), i = t("ma-3043-analytics-chart-kebab-menu", !1), s = z(() => {
       const o = e.context.timeSpec;
       if (o.type === "absolute")
-        return new qe({
+        return new Ge({
           key: "custom",
           timeframeText: "custom",
           display: "custom",
@@ -349,11 +349,11 @@ const F = {
           isRelative: !1,
           allowedTiers: ["free", "plus", "enterprise"]
         });
-      const n = Te.get(o.time_range);
+      const n = Ne.get(o.time_range);
       if (!n)
         throw new Error("Unknown time range");
       return n;
-    }), r = S(() => {
+    }), r = z(() => {
       var n, l;
       const o = (n = e.query) == null ? void 0 : n.datasource;
       if (o && o !== "advanced" && o !== "basic")
@@ -373,16 +373,16 @@ const F = {
         refreshCounter: e.refreshCounter
       };
     });
-    return (o, n) => (E(), L("div", vt, [
-      $(x(je), Me(Ie(r.value)), {
-        default: H(() => [
-          $(x(Qe))
+    return (o, n) => (x(), A("div", xt, [
+      U(C(et), Be(qe(r.value)), {
+        default: N(() => [
+          U(C(tt))
         ]),
         _: 1
       }, 16)
     ]));
   }
-}), wt = /* @__PURE__ */ V(bt, [["__scopeId", "data-v-0f571079"]]), _e = "#6c7489", ve = "20px", He = "20px", Et = /* @__PURE__ */ M({
+}), Rt = /* @__PURE__ */ V(Ct, [["__scopeId", "data-v-0f571079"]]), we = "#6c7489", Ee = "20px", Le = "20px", Dt = /* @__PURE__ */ M({
   __name: "TopNTableRenderer",
   props: {
     query: {},
@@ -393,33 +393,33 @@ const F = {
     refreshCounter: {}
   },
   setup(c) {
-    const e = c, { evaluateFeatureFlag: t } = F.useEvaluateFeatureFlag(), i = t("ma-3043-analytics-chart-kebab-menu", !1), s = (r) => {
+    const e = c, { evaluateFeatureFlag: t } = $.useEvaluateFeatureFlag(), i = t("ma-3043-analytics-chart-kebab-menu", !1), s = (r) => {
       var o;
       if ((o = e.chartOptions) != null && o.entityLink)
         if (r.id.includes(":")) {
           const [n, l] = r.id.split(":");
-          return e.chartOptions.entityLink.replace(dt, n).replace(pe, l);
+          return e.chartOptions.entityLink.replace(gt, n).replace(_e, l);
         } else
-          return e.chartOptions.entityLink.replace(pe, r.id);
+          return e.chartOptions.entityLink.replace(_e, r.id);
       return "";
     };
-    return (r, o) => (E(), T(de, {
+    return (r, o) => (x(), T(ce, {
       context: r.context,
       query: r.query,
       "query-ready": r.queryReady,
       "refresh-counter": r.refreshCounter
     }, {
-      default: H(({ data: n }) => [
-        $(x(We), {
+      default: N(({ data: n }) => [
+        U(C(Xe), {
           data: n,
-          description: !x(i) && r.chartOptions.description || "",
+          description: !C(i) && r.chartOptions.description || "",
           "synthetics-data-key": r.chartOptions.syntheticsDataKey,
-          title: !x(i) && r.chartOptions.chartTitle || ""
-        }, Ce({ _: 2 }, [
+          title: !C(i) && r.chartOptions.chartTitle || ""
+        }, De({ _: 2 }, [
           e.chartOptions.entityLink ? {
             name: "name",
-            fn: H(({ record: l }) => [
-              $(x(Je), {
+            fn: N(({ record: l }) => [
+              U(C(it), {
                 "entity-link-data": {
                   id: l.id,
                   label: l.name,
@@ -435,49 +435,53 @@ const F = {
       _: 1
     }, 8, ["context", "query", "query-ready", "refresh-counter"]));
   }
-}), xt = ["data-testid"], Ct = {
+}), zt = ["data-testid"], St = {
   key: 0,
   class: "tile-header"
-}, Rt = ["data-testid"], Dt = ["data-testid"], zt = ["data-testid"], St = ["data-testid"], Tt = ["data-testid"], kt = /* @__PURE__ */ M({
+}, Tt = ["data-testid"], kt = ["data-testid"], Nt = ["data-testid"], Ht = ["data-testid"], At = /* @__PURE__ */ M({
   __name: "DashboardTile",
   props: {
     definition: {},
     context: {},
-    height: { default: he },
+    height: { default: ue },
     queryReady: { type: Boolean },
     refreshCounter: {},
     tileId: {}
   },
   emits: ["edit-tile"],
   setup(c, { emit: e }) {
-    oe((y) => ({
-      bb9f837a: `${y.height}px`
+    oe((p) => ({
+      "733568b4": `${p.height}px`
     }));
-    const t = parseInt(He, 10), i = c, s = e, r = j(Q), { evaluateFeatureFlag: o } = F.useEvaluateFeatureFlag(), { i18n: n } = F.useI18n(), l = o("ma-3043-analytics-chart-kebab-menu", !1), h = U(), d = U(!1), u = S(() => {
+    const t = parseInt(Le, 10), i = c, s = e, r = Q(J), { evaluateFeatureFlag: o } = $.useEvaluateFeatureFlag(), { i18n: n } = $.useI18n(), l = o("ma-3043-analytics-chart-kebab-menu", !1), h = L(), d = L(!1), u = L(), f = L(!1);
+    de(() => i.definition, async () => {
+      await Ue(), u.value && (f.value = u.value.scrollWidth > u.value.clientWidth);
+    }, { immediate: !0, deep: !0 });
+    const _ = z(() => {
       if (r && r.exploreBaseUrl) {
-        const y = {
+        const p = {
           filters: [...i.context.filters, ...i.definition.query.filters ?? []],
           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 || w.value
+          granularity: i.definition.query.granularity || D.value
         }, q = ["advanced", "ai"].includes(i.definition.query.datasource) ? i.definition.query.datasource : "advanced";
-        return `${r.exploreBaseUrl()}?q=${JSON.stringify(y)}&d=${q}&c=${i.definition.chart.type}`;
+        return `${r.exploreBaseUrl()}?q=${JSON.stringify(p)}&d=${q}&c=${i.definition.chart.type}`;
       }
       return "";
-    }), f = S(() => n.t("csvExport.defaultFilename")), _ = S(() => l && !["golden_signals", "top_n", "gauge"].includes(i.definition.chart.type)), v = {
-      timeseries_line: ye,
-      timeseries_bar: ye,
-      horizontal_bar: me,
-      vertical_bar: me,
-      gauge: mt,
-      golden_signals: wt,
-      top_n: Et,
+    }), v = z(() => n.t("csvExport.defaultFilename")), b = z(() => l && !["golden_signals", "top_n", "gauge"].includes(i.definition.chart.type)), y = {
+      timeseries_line: be,
+      timeseries_bar: be,
+      horizontal_bar: ve,
+      vertical_bar: ve,
+      gauge: bt,
+      golden_signals: Rt,
+      top_n: Dt,
       slottable: void 0
-    }, b = S(() => {
-      const y = v[i.definition.chart.type];
-      return y && {
-        component: y,
+    }, w = z(() => {
+      const p = y[i.definition.chart.type];
+      return p && {
+        component: p,
         rendererProps: {
           query: i.definition.query,
           context: i.context,
@@ -487,116 +491,127 @@ const F = {
           refreshCounter: i.refreshCounter
         }
       };
-    }), p = S(() => {
+    }), E = z(() => {
       var q;
-      const y = (q = i.definition.query) == null ? void 0 : q.time_range;
-      if ((y == null ? void 0 : y.type) === "relative") {
-        const N = Te.get(Ue[y.time_range]);
-        return N ? N.display : (console.warn("Did not recognize the given relative time range:", y.time_range), y.time_range);
-      } else if ((y == null ? void 0 : y.type) === "absolute") {
-        const N = y.tz || "Etc/UTC";
-        return `${ge(y.start, { short: !0, tz: N })} - ${ge(y.end, { short: !0, tz: N })}`;
+      const p = (q = i.definition.query) == null ? void 0 : q.time_range;
+      if ((p == null ? void 0 : p.type) === "relative") {
+        const W = Ne.get(We[p.time_range]);
+        return W ? W.display : (console.warn("Did not recognize the given relative time range:", p.time_range), p.time_range);
+      } else if ((p == null ? void 0 : p.type) === "absolute") {
+        const W = p.tz || "Etc/UTC";
+        return `${ye(p.start, { short: !0, tz: W })} - ${ye(p.end, { short: !0, tz: W })}`;
       }
       return null;
-    }), w = S(() => h.value ? $e(h.value.meta.granularity_ms) : void 0), C = () => {
+    }), D = z(() => h.value ? Ke(h.value.meta.granularity_ms) : void 0), S = () => {
       s("edit-tile", i.definition);
-    }, D = (y) => {
-      h.value = y;
-    }, z = (y) => {
-      d.value = y;
-    }, R = () => {
-      z(!0);
+    }, R = (p) => {
+      h.value = p;
+    }, G = (p) => {
+      d.value = p;
+    }, le = () => {
+      G(!0);
     };
-    return (y, q) => {
-      const N = W("KBadge"), J = W("KDropdownItem"), Le = W("KDropdown");
-      return E(), L("div", {
+    return (p, q) => {
+      const W = F("KTooltip"), Me = F("KBadge"), pe = F("KDropdownItem"), Ie = F("KDropdown");
+      return x(), A("div", {
         class: "tile-boundary",
-        "data-testid": `tile-${y.tileId}`
+        "data-testid": `tile-${p.tileId}`
       }, [
-        x(l) && y.definition.chart.type !== "slottable" ? (E(), L("div", Ct, [
-          K("div", {
-            class: "title",
-            "data-testid": `tile-title-${y.tileId}`
-          }, G(y.definition.chart.chartTitle), 9, Rt),
-          _.value || p.value ? (E(), L("div", {
+        C(l) && p.definition.chart.type !== "slottable" ? (x(), A("div", St, [
+          U(W, {
+            class: "title-tooltip",
+            disabled: !f.value,
+            "max-width": "500",
+            text: p.definition.chart.chartTitle
+          }, {
+            default: N(() => [
+              Y("div", {
+                ref_key: "titleRef",
+                ref: u,
+                class: "title"
+              }, K(p.definition.chart.chartTitle), 513)
+            ]),
+            _: 1
+          }, 8, ["disabled", "text"]),
+          b.value || E.value ? (x(), A("div", {
             key: 0,
             class: "tile-actions",
-            "data-testid": `tile-actions-${y.tileId}`
+            "data-testid": `tile-actions-${p.tileId}`
           }, [
-            p.value ? (E(), T(N, { key: 0 }, {
-              default: H(() => [
-                re(G(p.value), 1)
+            E.value ? (x(), T(Me, { key: 0 }, {
+              default: N(() => [
+                re(K(E.value), 1)
               ]),
               _: 1
             })) : I("", !0),
-            _.value && y.context.editable ? (E(), T(x(Ze), {
+            b.value && p.context.editable ? (x(), T(C(st), {
               key: 1,
               class: "edit-icon",
-              color: x(_e),
-              "data-testid": `edit-tile-${y.tileId}`,
-              size: x(ve),
-              onClick: C
+              color: C(we),
+              "data-testid": `edit-tile-${p.tileId}`,
+              size: C(Ee),
+              onClick: S
             }, null, 8, ["color", "data-testid", "size"])) : I("", !0),
-            _.value ? (E(), T(Le, {
+            b.value ? (x(), T(Ie, {
               key: 2,
               class: "dropdown",
-              "data-testid": `chart-action-menu-${y.tileId}`,
+              "data-testid": `chart-action-menu-${p.tileId}`,
               "kpop-attributes": { placement: "bottom-end" }
             }, {
-              items: H(() => [
-                u.value ? (E(), T(J, {
+              items: N(() => [
+                _.value ? (x(), T(pe, {
                   key: 0,
-                  "data-testid": `chart-jump-to-explore-${y.tileId}`,
-                  item: { label: x(n).t("jumpToExplore"), to: u.value }
+                  "data-testid": `chart-jump-to-explore-${p.tileId}`,
+                  item: { label: C(n).t("jumpToExplore"), to: _.value }
                 }, null, 8, ["data-testid", "item"])) : I("", !0),
-                "allowCsvExport" in y.definition.chart && y.definition.chart.allowCsvExport ? (E(), T(J, {
+                "allowCsvExport" in p.definition.chart && p.definition.chart.allowCsvExport ? (x(), T(pe, {
                   key: 1,
                   class: "chart-export-button",
-                  "data-testid": `chart-csv-export-${y.tileId}`,
-                  onClick: q[0] || (q[0] = (Wt) => R())
+                  "data-testid": `chart-csv-export-${p.tileId}`,
+                  onClick: q[0] || (q[0] = (Xt) => le())
                 }, {
-                  default: H(() => [
-                    K("span", {
+                  default: N(() => [
+                    Y("span", {
                       class: "chart-export-trigger",
-                      "data-testid": `csv-export-button-${y.tileId}`
-                    }, G(x(n).t("csvExport.exportAsCsv")), 9, zt)
+                      "data-testid": `csv-export-button-${p.tileId}`
+                    }, K(C(n).t("csvExport.exportAsCsv")), 9, kt)
                   ]),
                   _: 1
                 }, 8, ["data-testid"])) : I("", !0)
               ]),
-              default: H(() => [
-                $(x(et), {
+              default: N(() => [
+                U(C(rt), {
                   class: "kebab-action-menu",
-                  color: x(_e),
-                  "data-testid": `kebab-action-menu-${y.tileId}`,
-                  size: x(ve)
+                  color: C(we),
+                  "data-testid": `kebab-action-menu-${p.tileId}`,
+                  size: C(Ee)
                 }, null, 8, ["color", "data-testid", "size"])
               ]),
               _: 1
             }, 8, ["data-testid"])) : I("", !0)
-          ], 8, Dt)) : "description" in y.definition.chart ? (E(), L("div", {
+          ], 8, Tt)) : "description" in p.definition.chart ? (x(), A("div", {
             key: 1,
             class: "header-description",
-            "data-testid": `tile-description-${y.tileId}`
-          }, G(y.definition.chart.description), 9, St)) : I("", !0),
-          d.value ? (E(), T(x(Ke), {
+            "data-testid": `tile-description-${p.tileId}`
+          }, K(p.definition.chart.description), 9, Nt)) : I("", !0),
+          d.value ? (x(), T(C(je), {
             key: 2,
             "chart-data": h.value,
-            "data-testid": `csv-export-modal-${y.tileId}`,
-            filename: f.value,
-            onToggleModal: z
+            "data-testid": `csv-export-modal-${p.tileId}`,
+            filename: v.value,
+            onToggleModal: G
           }, null, 8, ["chart-data", "data-testid", "filename"])) : I("", !0)
         ])) : I("", !0),
-        K("div", {
+        Y("div", {
           class: "tile-content",
-          "data-testid": `tile-content-${y.tileId}`
+          "data-testid": `tile-content-${p.tileId}`
         }, [
-          b.value ? (E(), T(Re(b.value.component), xe({ key: 0 }, b.value.rendererProps, { onChartData: D }), null, 16)) : I("", !0)
-        ], 8, Tt)
-      ], 8, xt);
+          w.value ? (x(), T(ze(w.value.component), Re({ key: 0 }, w.value.rendererProps, { onChartData: R }), null, 16)) : I("", !0)
+        ], 8, Ht)
+      ], 8, zt);
     };
   }
-}), Nt = /* @__PURE__ */ V(kt, [["__scopeId", "data-v-12d69e34"]]), Ht = (c, e, t) => {
+}), Lt = /* @__PURE__ */ V(At, [["__scopeId", "data-v-30fafa9c"]]), Ot = (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;
@@ -606,7 +621,7 @@ const F = {
   for (let r = 0; r < c; r++)
     i.get(r) ? s.push("auto") : s.push(`${e}px`);
   return s;
-}, At = /* @__PURE__ */ M({
+}, Mt = /* @__PURE__ */ M({
   __name: "GridLayout",
   props: {
     gridSize: {
@@ -616,7 +631,7 @@ const F = {
     tileHeight: {
       type: Number,
       required: !1,
-      default: () => he
+      default: () => ue
     },
     tiles: {
       type: Array,
@@ -628,20 +643,20 @@ const F = {
       "3bc5e939": c.gridSize.cols,
       "77aa3028": r.value
     }));
-    const e = c, t = U(null), i = U(0), s = new ResizeObserver((n) => {
+    const e = c, t = L(null), i = L(0), s = new ResizeObserver((n) => {
       window.requestAnimationFrame(() => {
         !Array.isArray(n) || !n.length || (i.value = n[0].contentRect.width);
       });
     });
-    De(() => {
+    Se(() => {
       t.value && s.observe(t.value);
-    }), le(() => {
+    }), he(() => {
       t.value && s.unobserve(t.value);
     });
-    const r = S(() => {
+    const r = z(() => {
       var l;
-      return Ht((l = e.gridSize) == null ? void 0 : l.rows, e.tileHeight, e.tiles).join(" ");
-    }), o = S(() => e.tiles.map((n, l) => ({
+      return Ot((l = e.gridSize) == null ? void 0 : l.rows, e.tileHeight, e.tiles).join(" ");
+    }), o = z(() => e.tiles.map((n, l) => ({
       key: `tile-${l}`,
       tile: n,
       style: {
@@ -651,27 +666,27 @@ const F = {
         "grid-row-end": n.layout.position.row + 1 + n.layout.size.rows
       }
     })));
-    return (n, l) => (E(), L("div", {
+    return (n, l) => (x(), A("div", {
       ref_key: "gridContainer",
       ref: t,
       class: "kong-ui-public-grid-layout"
     }, [
-      (E(!0), L(ze, null, Se(o.value, (h) => (E(), L("div", {
+      (x(!0), A(Te, null, ke(o.value, (h) => (x(), A("div", {
         key: h.key,
-        class: Pe(["grid-cell", {
+        class: Fe(["grid-cell", {
           "empty-cell": !h.tile
         }]),
-        style: fe(h.style)
+        style: me(h.style)
       }, [
         ne(n.$slots, "tile", {
-          style: fe(h.style),
+          style: me(h.style),
           tile: h.tile
         }, void 0, !0)
       ], 6))), 128))
     ], 512));
   }
-}), Lt = /* @__PURE__ */ V(At, [["__scopeId", "data-v-f43eb7b8"]]);
-function Ot(c, e, t, i, s) {
+}), It = /* @__PURE__ */ V(Mt, [["__scopeId", "data-v-f43eb7b8"]]);
+function Pt(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;
 }
@@ -1500,7 +1515,7 @@ class P {
   }
 }
 P._idSeq = 0;
-const A = {
+const H = {
   alwaysShowResizeHandle: "mobile",
   animate: !0,
   auto: !0,
@@ -1573,7 +1588,7 @@ function Z(c, e) {
     // relatedTarget
   ), c.target.dispatchEvent(i);
 }
-function Ae(c, e) {
+function Oe(c, e) {
   c.cancelable && c.preventDefault();
   const t = document.createEvent("MouseEvents");
   t.initMouseEvent(
@@ -1625,12 +1640,12 @@ function ie(c) {
 function se(c) {
   c.pointerType !== "mouse" && c.target.releasePointerCapture(c.pointerId);
 }
-function be(c) {
-  m.dragElement && c.pointerType !== "mouse" && Ae(c, "mouseenter");
+function xe(c) {
+  m.dragElement && c.pointerType !== "mouse" && Oe(c, "mouseenter");
 }
-function we(c) {
+function Ce(c) {
   m.dragElement && c.pointerType !== "mouse" && (B.pointerLeaveTimeout = window.setTimeout(() => {
-    delete B.pointerLeaveTimeout, Ae(c, "mouseleave");
+    delete B.pointerLeaveTimeout, Oe(c, "mouseleave");
   }, 10));
 }
 class ae {
@@ -1670,7 +1685,7 @@ class ae {
   }
 }
 ae.prefix = "ui-resizable-";
-class ue {
+class fe {
   constructor() {
     this._eventRegister = {};
   }
@@ -1698,7 +1713,7 @@ class ue {
       return this._eventRegister[e](t);
   }
 }
-class Y extends ue {
+class X extends fe {
   // 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 = () => {
@@ -1799,7 +1814,7 @@ class Y extends ue {
   }
   /** @internal */
   _setupHelper() {
-    this.elOriginStyleVal = Y._originStyleProp.map((i) => this.el.style[i]), this.parentOriginStylePosition = this.el.parentElement.style.position;
+    this.elOriginStyleVal = X._originStyleProp.map((i) => this.el.style[i]), this.parentOriginStylePosition = this.el.parentElement.style.position;
     const e = this.el.parentElement, t = a.getValuesFromTransformedElement(e);
     return this.rectScale = {
       x: t.xScale,
@@ -1808,7 +1823,7 @@ class Y extends ue {
   }
   /** @internal */
   _cleanHelper() {
-    return Y._originStyleProp.forEach((e, t) => {
+    return X._originStyleProp.forEach((e, t) => {
       this.el.style[e] = this.elOriginStyleVal[t] || null;
     }), this.el.parentElement.style.position = this.parentOriginStylePosition || null, this;
   }
@@ -1847,9 +1862,9 @@ class Y extends ue {
     return this.handlers.forEach((e) => e.destroy()), delete this.handlers, this;
   }
 }
-Y._originStyleProp = ["width", "height", "position", "left", "top", "opacity", "zIndex"];
-const Mt = 'input,textarea,button,select,option,[contenteditable="true"],.ui-resizable-handle';
-class X extends ue {
+X._originStyleProp = ["width", "height", "position", "left", "top", "opacity", "zIndex"];
+const Bt = 'input,textarea,button,select,option,[contenteditable="true"],.ui-resizable-handle';
+class j extends fe {
   constructor(e, t = {}) {
     var r;
     super(), this.el = e, this.option = t, this.dragTransform = {
@@ -1886,7 +1901,7 @@ class X extends ue {
   /** @internal call when mouse goes down before a dragstart happens */
   _mouseDown(e) {
     if (!m.mouseHandled)
-      return e.button !== 0 || !this.dragEls.find((t) => t === e.target) && e.target.closest(Mt) || this.option.cancel && e.target.closest(this.option.cancel) || (this.mouseDownEvent = e, delete this.dragging, delete m.dragElement, delete m.dropElement, document.addEventListener("mousemove", this._mouseMove, { capture: !0, passive: !0 }), document.addEventListener("mouseup", this._mouseUp, !0), O && (e.currentTarget.addEventListener("touchmove", te), e.currentTarget.addEventListener("touchend", ie)), e.preventDefault(), document.activeElement && document.activeElement.blur(), m.mouseHandled = !0), !0;
+      return e.button !== 0 || !this.dragEls.find((t) => t === e.target) && e.target.closest(Bt) || this.option.cancel && e.target.closest(this.option.cancel) || (this.mouseDownEvent = e, delete this.dragging, delete m.dragElement, delete m.dropElement, document.addEventListener("mousemove", this._mouseMove, { capture: !0, passive: !0 }), document.addEventListener("mouseup", this._mouseUp, !0), O && (e.currentTarget.addEventListener("touchmove", te), e.currentTarget.addEventListener("touchend", ie)), e.preventDefault(), document.activeElement && document.activeElement.blur(), m.mouseHandled = !0), !0;
   }
   /** @internal method to call actual drag event */
   _callDrag(e) {
@@ -1939,7 +1954,7 @@ class X extends ue {
   /** @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 = a.cloneNode(this.el)), document.body.contains(e) || a.appendTo(e, this.option.appendTo === "parent" ? this.el.parentElement : this.option.appendTo), this.dragElementOriginStyle = X.originStyleProp.map((t) => this.el.style[t]), e;
+    return typeof this.option.helper == "function" ? e = this.option.helper(this.el) : this.option.helper === "clone" && (e = a.cloneNode(this.el)), document.body.contains(e) || a.appendTo(e, this.option.appendTo === "parent" ? this.el.parentElement : this.option.appendTo), this.dragElementOriginStyle = j.originStyleProp.map((t) => this.el.style[t]), e;
   }
   /** @internal set the fix position of the dragged item */
   _setupHelperStyle(e) {
@@ -1956,7 +1971,7 @@ class X extends ue {
     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", X.originStyleProp.forEach((r) => i.style[r] = this.dragElementOriginStyle[r] || null), setTimeout(() => i.style.transition = s, 50);
+      i.style.transition = this.dragElementOriginStyle.transition = "none", j.originStyleProp.forEach((r) => i.style[r] = this.dragElementOriginStyle[r] || null), setTimeout(() => i.style.transition = s, 50);
     }
     return delete this.dragElementOriginStyle, this;
   }
@@ -1998,8 +2013,8 @@ class X extends ue {
     };
   }
 }
-X.originStyleProp = ["width", "height", "transform", "transform-origin", "transition", "pointerEvents", "position", "left", "top", "minWidth", "willChange"];
-class It extends ue {
+j.originStyleProp = ["width", "height", "transform", "transform-origin", "transition", "pointerEvents", "position", "left", "top", "minWidth", "willChange"];
+class qt extends fe {
   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();
   }
@@ -2010,10 +2025,10 @@ class It extends ue {
     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), O && (this.el.addEventListener("pointerenter", be), this.el.addEventListener("pointerleave", we)));
+    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), O && (this.el.addEventListener("pointerenter", xe), this.el.addEventListener("pointerleave", Ce)));
   }
   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), O && (this.el.removeEventListener("pointerenter", be), this.el.removeEventListener("pointerleave", we)));
+    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), O && (this.el.removeEventListener("pointerenter", xe), this.el.removeEventListener("pointerleave", Ce)));
   }
   destroy() {
     this.disable(!0), this.el.classList.remove("ui-droppable"), this.el.classList.remove("ui-droppable-disabled"), super.destroy();
@@ -2065,9 +2080,9 @@ class It extends ue {
     };
   }
 }
-class ce {
+class ge {
   static init(e) {
-    return e.ddElement || (e.ddElement = new ce(e)), e.ddElement;
+    return e.ddElement || (e.ddElement = new ge(e)), e.ddElement;
   }
   constructor(e) {
     this.el = e;
@@ -2079,25 +2094,25 @@ class ce {
     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 X(this.el, e), this;
+    return this.ddDraggable ? this.ddDraggable.updateOption(e) : this.ddDraggable = new j(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 Y(this.el, e), this;
+    return this.ddResizable ? this.ddResizable.updateOption(e) : this.ddResizable = new X(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 It(this.el, e), this;
+    return this.ddDroppable ? this.ddDroppable.updateOption(e) : this.ddDroppable = new qt(this.el, e), this;
   }
   cleanDroppable() {
     return this.ddDroppable && (this.ddDroppable.destroy(), delete this.ddDroppable), this;
   }
 }
-class Pt {
+class Ut {
   resizable(e, t, i, s) {
     return this._getDDElements(e).forEach((r) => {
       if (t === "disable" || t === "enable")
@@ -2178,7 +2193,7 @@ class Pt {
     const i = a.getElements(e);
     if (!i.length)
       return [];
-    const s = i.map((r) => r.ddElement || (t ? ce.init(r) : null));
+    const s = i.map((r) => r.ddElement || (t ? ge.init(r) : null));
     return t || s.filter((r) => r), s;
   }
 }
@@ -2189,7 +2204,7 @@ class Pt {
  * Copyright (c) 2021-2024  Alain Dumesny
  * see root license https://github.com/gridstack/gridstack.js/tree/master/LICENSE
  */
-const k = new Pt();
+const k = new Ut();
 class g {
   /**
    * initializing the HTML element, or selector string, into a grid will return the grid. Calling it again will
@@ -2254,7 +2269,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
   /** @internal create placeholder DIV as needed */
   get placeholder() {
     if (!this._placeholder) {
-      this._placeholder = a.createDiv([this.opts.placeholderClass, A.itemClass, this.opts.itemClass]);
+      this._placeholder = a.createDiv([this.opts.placeholderClass, H.itemClass, this.opts.itemClass]);
       const e = a.createDiv(["placeholder-content"], this._placeholder);
       this.opts.placeholderText && (e.textContent = this.opts.placeholderText);
     }
@@ -2275,29 +2290,29 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
     if (r.oneColumnModeDomSort && (delete r.oneColumnModeDomSort, console.log("warning: Gridstack oneColumnModeDomSort no longer supported. Use GridStackOptions.columnOpts instead.")), r.oneColumnSize || r.disableOneColumnMode === !1) {
       const v = r.oneColumnSize || 768;
       delete r.oneColumnSize, delete r.disableOneColumnMode, t.columnOpts = t.columnOpts || {}, s = t.columnOpts.breakpoints = t.columnOpts.breakpoints || [];
-      let b = s.find((p) => p.c === 1);
+      let b = s.find((y) => y.c === 1);
       b ? b.w = v : (b = { c: 1, w: v }, s.push(b, { c: 12, w: v + 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((v, b) => (b.w || 0) - (v.w || 0));
     const n = {
-      ...a.cloneDeep(A),
-      column: a.toNumber(e.getAttribute("gs-column")) || A.column,
-      minRow: i || a.toNumber(e.getAttribute("gs-min-row")) || A.minRow,
-      maxRow: i || a.toNumber(e.getAttribute("gs-max-row")) || A.maxRow,
-      staticGrid: a.toBool(e.getAttribute("gs-static")) || A.staticGrid,
+      ...a.cloneDeep(H),
+      column: a.toNumber(e.getAttribute("gs-column")) || H.column,
+      minRow: i || a.toNumber(e.getAttribute("gs-min-row")) || H.minRow,
+      maxRow: i || a.toNumber(e.getAttribute("gs-max-row")) || H.maxRow,
+      staticGrid: a.toBool(e.getAttribute("gs-static")) || H.staticGrid,
       sizeToContent: a.toBool(e.getAttribute("gs-size-to-content")) || void 0,
       draggable: {
-        handle: (t.handleClass ? "." + t.handleClass : t.handle ? t.handle : "") || A.draggable.handle
+        handle: (t.handleClass ? "." + t.handleClass : t.handle ? t.handle : "") || H.draggable.handle
       },
       removableOptions: {
-        accept: t.itemClass || A.removableOptions.accept,
-        decline: A.removableOptions.decline
+        accept: t.itemClass || H.removableOptions.accept,
+        decline: H.removableOptions.decline
       }
     };
     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("." + A.itemClass), h = l == null ? void 0 : l.gridstackNode;
-    h && (h.subGrid = this, this.parentGridNode = h, this.el.classList.add("grid-stack-nested"), h.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 !== A.cellHeightUnit && (t.cellHeight = t.cellHeight + t.cellHeightUnit, delete t.cellHeightUnit), this.cellHeight(t.cellHeight, !1)), t.alwaysShowResizeHandle === "mobile" && (t.alwaysShowResizeHandle = O), this._styleSheetClass = "gs-id-" + P._idSeq++, this.el.classList.add(this._styleSheetClass), this._setStaticClass();
+    const l = this.el.closest("." + H.itemClass), h = l == null ? void 0 : l.gridstackNode;
+    h && (h.subGrid = this, this.parentGridNode = h, this.el.classList.add("grid-stack-nested"), h.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 = O), this._styleSheetClass = "gs-id-" + P._idSeq++, this.el.classList.add(this._styleSheetClass), this._setStaticClass();
     const d = t.engineClass || g.engineClass || P;
     if (this.engine = new d({
       column: this.getColumn(),
@@ -2305,11 +2320,11 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
       maxRow: t.maxRow,
       onChange: (v) => {
         let b = 0;
-        this.engine.nodes.forEach((p) => {
-          b = Math.max(b, p.y + p.h);
-        }), v.forEach((p) => {
-          const w = p.el;
-          w && (p._removeDOM ? (w && w.remove(), delete p._removeDOM) : this._writePosAttr(w, p));
+        this.engine.nodes.forEach((y) => {
+          b = Math.max(b, y.y + y.h);
+        }), v.forEach((y) => {
+          const w = y.el;
+          w && (y._removeDOM ? (w && w.remove(), delete y._removeDOM) : this._writePosAttr(w, y));
         }), this._updateStyles(!1, b);
       }
     }), this._updateStyles(!1, 0), t.auto && (this.batchUpdate(), this.engine._loading = !0, this.getGridItems().forEach((v) => this._prepareElement(v)), delete this.engine._loading, this.batchUpdate(!1)), t.children) {
@@ -2379,8 +2394,8 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
     t.column === "auto" && (l = !0, t.column = Math.max(r.w || 1, (i == null ? void 0 : i.w) || 1), delete t.columnOpts);
     let h = r.el.querySelector(".grid-stack-item-content"), d, u;
     if (s && (this._removeDD(r.el), u = { ...r, x: 0, y: 0 }, a.removeInternalForSave(u), delete u.subGridOpts, r.content && (u.content = r.content, delete r.content), g.addRemoveCB ? d = g.addRemoveCB(this.el, u, !0, !1) : (d = a.createDiv(["grid-stack-item"]), d.appendChild(h), h = a.createDiv(["grid-stack-item-content"], r.el)), this._prepareDragDropByNode(r)), i) {
-      const p = l ? t.column : r.w, w = r.h + i.h, C = r.el.style;
-      C.transition = "none", this.update(r.el, { w: p, h: w }), setTimeout(() => C.transition = null);
+      const y = l ? t.column : r.w, w = r.h + i.h, E = r.el.style;
+      E.transition = "none", this.update(r.el, { w: y, h: w }), setTimeout(() => E.transition = null);
     }
     const f = r.subGrid = g.addGrid(h, t);
     return i != null && i._moving && (f._isTemp = !0), l && (f._autoColumn = !0), s && f.makeWidget(d, u), i && (i._moving ? window.setTimeout(() => a.simulateMouseEvent(i._event, "mouseenter", f.el), 0) : f.makeWidget(r.el, r)), this.resizeToContentCheck(!1, r), f;
@@ -2421,7 +2436,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
       const r = a.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, a.removeInternalAndSame(r, A), r.children = s, r;
+      return delete r._alwaysShowResizeHandle, o !== void 0 ? r.alwaysShowResizeHandle = o : delete r.alwaysShowResizeHandle, a.removeInternalAndSame(r, H), r.children = s, r;
     }
     return s;
   }
@@ -2968,7 +2983,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
   }
   /** @internal */
   _prepareElement(e, t = !1, i) {
-    i = i || this._readAttr(e), e.gridstackNode = i, i.el = e, i.grid = this, i = this.engine.addNode(i, t), this._writeAttr(e, i), e.classList.add(A.itemClass, this.opts.itemClass);
+    i = i || this._readAttr(e), e.gridstackNode = i, i.el = e, i.grid = this, i = this.engine.addNode(i, t), this._writeAttr(e, i), e.classList.add(H.itemClass, this.opts.itemClass);
     const s = a.shouldSizeToContent(i);
     return s ? e.classList.add("size-to-content") : e.classList.remove("size-to-content"), s && this.resizeToContentCheck(!1, i), this._prepareDragDropByNode(i), this;
   }
@@ -3257,8 +3272,8 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
       d && this.setAnimation(!1);
       const u = r._gridstackNodeOrig;
       if (delete r._gridstackNodeOrig, l && (u != null && u.grid) && u.grid !== this) {
-        const p = u.grid;
-        p.engine.removeNodeFromLayoutCache(u), p.engine.removedNodes.push(u), p._triggerRemoveEvent()._triggerChangeEvent(), p.parentGridNode && !p.engine.nodes.length && p.opts.subGridDynamic && p.removeAsSubGrid();
+        const y = u.grid;
+        y.engine.removeNodeFromLayoutCache(u), y.engine.removedNodes.push(u), y._triggerRemoveEvent()._triggerChangeEvent(), y.parentGridNode && !y.engine.nodes.length && y.opts.subGridDynamic && y.removeAsSubGrid();
       }
       if (!n || (l && (this.engine.cleanupNode(n), n.grid = this), (_ = n.grid) == null || delete _._isTemp, k.off(r, "drag"), o !== r ? (o.remove(), r = o) : r.remove(), this._removeDD(r), !l))
         return !1;
@@ -3343,15 +3358,15 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
     if (h = Math.min(h, v), d = Math.min(d, v), u = Math.min(u, _), f = Math.min(f, _), t.type === "drag") {
       if (s._temporaryRemoved)
         return;
-      const p = i.position.top - s._prevYPix;
-      s._prevYPix = i.position.top, this.opts.draggable.scroll !== !1 && a.updateScrollPosition(e, i.position, p);
-      const w = i.position.left + (i.position.left > s._lastUiPosition.left ? -d : h), C = i.position.top + (i.position.top > s._lastUiPosition.top ? -f : u);
-      n.x = Math.round(w / r), n.y = Math.round(C / o);
+      const y = i.position.top - s._prevYPix;
+      s._prevYPix = i.position.top, this.opts.draggable.scroll !== !1 && a.updateScrollPosition(e, i.position, y);
+      const w = i.position.left + (i.position.left > s._lastUiPosition.left ? -d : h), E = i.position.top + (i.position.top > s._lastUiPosition.top ? -f : u);
+      n.x = Math.round(w / r), n.y = Math.round(E / o);
       const D = this._extraDragRow;
       if (this.engine.collide(s, n)) {
-        const z = this.getRow();
-        let R = Math.max(0, n.y + s.h - z);
-        this.opts.maxRow && z + R > this.opts.maxRow && (R = Math.max(0, this.opts.maxRow - z)), this._extraDragRow = R;
+        const S = this.getRow();
+        let R = Math.max(0, n.y + s.h - S);
+        this.opts.maxRow && S + R > this.opts.maxRow && (R = Math.max(0, this.opts.maxRow - S)), this._extraDragRow = R;
       } else
         this._extraDragRow = 0;
       if (this._extraDragRow !== D && this._updateContainerHeight(), s.x === n.x && s.y === n.y)
@@ -3359,8 +3374,8 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
     } else if (t.type === "resize") {
       if (n.x < 0 || (a.updateScrollResize(t, e, o), n.w = Math.round((i.size.width - h) / r), n.h = Math.round((i.size.height - u) / 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 + h, w = i.position.top + u;
-      n.x = Math.round(p / r), n.y = Math.round(w / o), l = !0;
+      const y = i.position.left + h, w = i.position.top + u;
+      n.x = Math.round(y / r), n.y = Math.round(w / o), l = !0;
     }
     s._event = t, s._lastTried = n;
     const b = {
@@ -3371,8 +3386,8 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
     };
     if (this.engine.moveNodeCheck(s, { ...n, cellWidth: r, cellHeight: o, rect: b, resizing: l })) {
       s._lastUiPosition = i.position, this.engine.cacheRects(r, o, u, d, f, h), delete s._skipDown, l && s.subGrid && s.subGrid.onResize(), this._extraDragRow = 0, this._updateContainerHeight();
-      const p = t.target;
-      this._writePosAttr(p, s), this._gsEventHandler[t.type] && this._gsEventHandler[t.type](t, p);
+      const y = t.target;
+      this._writePosAttr(y, s), this._gsEventHandler[t.type] && this._gsEventHandler[t.type](t, y);
     }
   }
   /** @internal called when item leaving our area by either cursor dropout event
@@ -3386,7 +3401,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
   }
   // legacy method removed
   commit() {
-    return Ot(this, this.batchUpdate(!1), "commit", "batchUpdate", "5.2"), this;
+    return Pt(this, this.batchUpdate(!1), "commit", "batchUpdate", "5.2"), this;
   }
 }
 g.renderCB = (c, e) => {
@@ -3396,7 +3411,7 @@ g.resizeToContentParent = ".grid-stack-item-content";
 g.Utils = a;
 g.Engine = P;
 g.GDRev = "11.3.0";
-const Bt = ["data-index", "gs-h", "gs-w", "gs-x", "gs-y"], qt = { class: "grid-stack-item-content" }, Ut = /* @__PURE__ */ M({
+const Ft = ["data-index", "gs-h", "gs-w", "gs-x", "gs-y"], $t = { class: "grid-stack-item-content" }, Gt = /* @__PURE__ */ M({
   __name: "DraggableGridLayout",
   props: {
     tiles: {},
@@ -3405,13 +3420,15 @@ const Bt = ["data-index", "gs-h", "gs-w", "gs-x", "gs-y"], qt = { class: "grid-s
   },
   emits: ["update-tiles"],
   setup(c, { emit: e }) {
-    const t = c, i = e, s = U(null);
+    const t = c, i = e, s = L(null);
     let r = null;
-    return De(() => {
+    return Se(() => {
       s.value && (r = g.init({
         column: t.gridSize.cols,
         cellHeight: t.tileHeight,
-        resizable: { handles: "all" }
+        resizable: { handles: "se" },
+        lazyLoad: !0,
+        handle: ".tile-header"
       }, s.value), r.on("change", (o, n) => {
         const l = t.tiles.map((h, d) => {
           const u = n.find((f) => {
@@ -3428,9 +3445,9 @@ const Bt = ["data-index", "gs-h", "gs-w", "gs-x", "gs-y"], qt = { class: "grid-s
         });
         i("update-tiles", l);
       }));
-    }), le(() => {
+    }), he(() => {
       r && r.destroy(!1);
-    }), Ee(() => t.tiles, (o) => {
+    }), de(() => t.tiles, (o) => {
       r && s.value && o.forEach((n, l) => {
         var d;
         const h = (d = s.value) == null ? void 0 : d.querySelector(`[data-index="${l}"]`);
@@ -3441,12 +3458,12 @@ const Bt = ["data-index", "gs-h", "gs-w", "gs-x", "gs-y"], qt = { class: "grid-s
           h: n.layout.size.rows
         }));
       });
-    }, { deep: !0 }), (o, n) => (E(), L("div", {
+    }, { deep: !0 }), (o, n) => (x(), A("div", {
       ref_key: "gridContainer",
       ref: s,
       class: "grid-stack"
     }, [
-      (E(!0), L(ze, null, Se(o.tiles, (l, h) => (E(), L("div", {
+      (x(!0), A(Te, null, ke(o.tiles, (l, h) => (x(), A("div", {
         key: "tile-" + h,
         class: "grid-stack-item",
         "data-index": h,
@@ -3455,16 +3472,16 @@ const Bt = ["data-index", "gs-h", "gs-w", "gs-x", "gs-y"], qt = { class: "grid-s
         "gs-x": l.layout.position.col,
         "gs-y": l.layout.position.row
       }, [
-        K("div", qt, [
-          ne(o.$slots, "tile", { tile: l })
+        Y("div", $t, [
+          ne(o.$slots, "tile", { tile: l }, void 0, !0)
         ])
-      ], 8, Bt))), 128))
+      ], 8, Ft))), 128))
     ], 512));
   }
-}), $t = { class: "kong-ui-public-dashboard-renderer" }, Ft = {
+}), Wt = /* @__PURE__ */ V(Gt, [["__scopeId", "data-v-2c11d103"]]), Kt = { class: "kong-ui-public-dashboard-renderer" }, Vt = {
   key: 0,
   class: "tile-container"
-}, Gt = /* @__PURE__ */ M({
+}, Yt = /* @__PURE__ */ M({
   __name: "DashboardRenderer",
   props: {
     context: {},
@@ -3473,99 +3490,99 @@ const Bt = ["data-index", "gs-h", "gs-w", "gs-x", "gs-y"], qt = { class: "grid-s
   },
   emits: ["edit-tile", "update-tiles"],
   setup(c, { expose: e, emit: t }) {
-    const i = c, s = t, { i18n: r } = F.useI18n(), o = U(0), n = j(Q);
+    const i = c, s = t, { i18n: r } = $.useI18n(), o = L(0), n = Q(J);
     n || (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"));
-    const l = tt(), h = S(() => i.context.timeSpec ? i.context.timeSpec : {
+    const l = nt(), h = z(() => i.context.timeSpec ? i.context.timeSpec : {
       type: "relative",
       time_range: l.defaultQueryTimeForOrg
-    }), d = S(() => !!i.context.timeSpec || !l.loading), u = S(() => i.config.tiles.map((p, w) => {
+    }), d = z(() => !!i.context.timeSpec || !l.loading), u = z(() => i.config.tiles.map((y, w) => {
       var D;
-      let C = p.definition;
-      if ("description" in C.chart) {
-        const z = (D = C.chart.description) == null ? void 0 : D.replace(ut, () => {
-          const y = `renderer.trendRange.${h.value.type === "absolute" ? "custom" : h.value.time_range}`;
-          return r.te(y) ? r.t(y) : "";
+      let E = y.definition;
+      if ("description" in E.chart) {
+        const S = (D = E.chart.description) == null ? void 0 : D.replace(pt, () => {
+          const G = `renderer.trendRange.${h.value.type === "absolute" ? "custom" : h.value.time_range}`;
+          return r.te(G) ? r.t(G) : "";
         });
-        C = {
-          ...C,
+        E = {
+          ...E,
           chart: {
-            ...C.chart,
-            description: z
+            ...E.chart,
+            description: S
           }
         };
       }
       return {
-        layout: p.layout,
-        meta: C,
+        layout: y.layout,
+        meta: E,
         // Add a unique key to each tile internally.
         id: w
       };
-    })), f = S(() => {
-      let { tz: p, refreshInterval: w, editable: C } = i.context;
-      return p || (p = new Intl.DateTimeFormat().resolvedOptions().timeZone), w === void 0 && (w = ct), C === void 0 && (C = !1), {
+    })), f = z(() => {
+      let { tz: y, refreshInterval: w, editable: E } = i.context;
+      return y || (y = new Intl.DateTimeFormat().resolvedOptions().timeZone), w === void 0 && (w = mt), E === void 0 && (E = !1), {
         ...i.context,
-        tz: p,
+        tz: y,
         timeSpec: h.value,
         refreshInterval: w,
-        editable: C
+        editable: E
       };
-    }), _ = (p) => {
-      s("edit-tile", p);
+    }), _ = (y) => {
+      s("edit-tile", y);
     }, v = () => {
       o.value++;
-    }, b = (p) => {
-      const w = p.map((C) => ({
-        layout: C.layout,
-        definition: C.meta
+    }, b = (y) => {
+      const w = y.map((E) => ({
+        layout: E.layout,
+        definition: E.meta
       }));
       s("update-tiles", w);
     };
-    return e({ refresh: v }), (p, w) => {
-      const C = W("KAlert");
-      return E(), L("div", $t, [
-        x(n) ? (E(), T(Re(p.draggable ? Ut : Lt), {
+    return e({ refresh: v }), (y, w) => {
+      const E = F("KAlert");
+      return x(), A("div", Kt, [
+        C(n) ? (x(), T(ze(y.draggable ? Wt : It), {
           key: 1,
-          "grid-size": p.config.gridSize,
-          "tile-height": p.config.tileHeight,
+          "grid-size": y.config.gridSize,
+          "tile-height": y.config.tileHeight,
           tiles: u.value,
           onUpdateTiles: b
         }, {
-          tile: H(({ tile: D }) => [
-            D.meta.chart.type === "slottable" ? (E(), L("div", Ft, [
-              ne(p.$slots, D.meta.chart.id, {}, void 0, !0)
-            ])) : (E(), T(Nt, {
+          tile: N(({ tile: D }) => [
+            D.meta.chart.type === "slottable" ? (x(), A("div", Vt, [
+              ne(y.$slots, D.meta.chart.id, {}, void 0, !0)
+            ])) : (x(), T(Lt, {
               key: 1,
               class: "tile-container",
               context: f.value,
               definition: D.meta,
-              height: D.layout.size.rows * (p.config.tileHeight || x(he)) + parseInt(x(He), 10),
+              height: D.layout.size.rows * (y.config.tileHeight || C(ue)) + parseInt(C(Le), 10),
               "query-ready": d.value,
               "refresh-counter": o.value,
               "tile-id": D.id,
-              onEditTile: (z) => _(D)
+              onEditTile: (S) => _(D)
             }, null, 8, ["context", "definition", "height", "query-ready", "refresh-counter", "tile-id", "onEditTile"]))
           ]),
           _: 3
-        }, 40, ["grid-size", "tile-height", "tiles"])) : (E(), T(C, {
+        }, 40, ["grid-size", "tile-height", "tiles"])) : (x(), T(E, {
           key: 0,
           appearance: "danger"
         }, {
-          default: H(() => [
-            re(G(x(r).t("renderer.noQueryBridge")), 1)
+          default: N(() => [
+            re(K(C(r).t("renderer.noQueryBridge")), 1)
           ]),
           _: 1
         }))
       ]);
     };
   }
-}), ii = /* @__PURE__ */ V(Gt, [["__scopeId", "data-v-57e1dfb8"]]);
+}), oi = /* @__PURE__ */ V(Yt, [["__scopeId", "data-v-921334ea"]]);
 export {
-  dt as CP_ID_TOKEN,
-  he as DEFAULT_TILE_HEIGHT,
-  ct as DEFAULT_TILE_REFRESH_INTERVAL_MS,
-  ii as DashboardRenderer,
-  pe as ENTITY_ID_TOKEN,
-  Lt as GridLayout,
-  Q as INJECT_QUERY_PROVIDER,
-  ut as TIMEFRAME_TOKEN
+  gt as CP_ID_TOKEN,
+  ue as DEFAULT_TILE_HEIGHT,
+  mt as DEFAULT_TILE_REFRESH_INTERVAL_MS,
+  oi as DashboardRenderer,
+  _e as ENTITY_ID_TOKEN,
+  It as GridLayout,
+  J as INJECT_QUERY_PROVIDER,
+  pt as TIMEFRAME_TOKEN
 };