@luzmo/analytics-components-kit 1.0.1-alpha.96 → 1.0.1-alpha.97

package/components/droppable-slot/index.js

@@ -17,59 +17,58 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { a as E } from "../get-css-variable-YlLiVgo8.js";
-import { ContextProvider as L } from "@lit/context";
-import { msg as v, localized as S } from "@lit/localize";
-import { Task as I } from "@lit/task";
-import { luzmoIcon as x, luzmoCog as $, luzmoTrashOutline as O } from "@luzmo/icons";
+import { a as w } from "../get-css-variable-Bb7TxJdX.js";
+import { ContextProvider as k } from "@lit/context";
+import { msg as m, localized as S } from "@lit/localize";
+import { Task as A } from "@lit/task";
+import { luzmoIcon as z, luzmoCog as E, luzmoTrashOutline as L } from "@luzmo/icons";
 import "@luzmo/lucero/tooltip";
-import { d as D } from "../index-CDi4fe3N.js";
-import { i as f, l as T } from "../localize-BX7q0S0M.js";
-import { D as M } from "../en-BOTjhwEc.js";
-import { html as g, unsafeCSS as U } from "lit";
-import { property as h, query as k, state as A } from "lit/decorators.js";
-import { L as F } from "../focusable-DCIFkpiW.js";
-import { S as P } from "../sized-mixin-cJbo3PKR.js";
-import { s as B } from "../index-Do7O9azB.js";
-import { signal as y, computed as G } from "@lit-labs/signals";
-import { P as C } from "../types-RxAJdtVT.js";
-import { g as R, t as N, s as j } from "../set-locale-Dp3N_gXN.js";
+import { d as y } from "../index-DNPULp4A.js";
+import { i as c, l as I } from "../localize-CcDpq940.js";
+import { D as $ } from "../en-D3ihEGXg.js";
+import { html as d, unsafeCSS as O } from "lit";
+import { property as n, query as _, state as x } from "lit/decorators.js";
+import { L as T } from "../focusable-BS2pbY7w.js";
+import { S as M } from "../sized-mixin-cJbo3PKR.js";
+import { s as U } from "../index-CqKpf0B8.js";
+import { signal as h, computed as F } from "@lit-labs/signals";
+import { P as g } from "../types-RxAJdtVT.js";
+import { g as P, t as B, s as G } from "../set-locale-hKTMz37h.js";
 import "../slot-menu/index.js";
 (function() {
   if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
-    const e = document.createElement("style");
-    e.setAttribute("data-luzmo-vars", ""), e.textContent = 'html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-background-color-alt-1: rgb(250, 250, 250);--luzmo-background-color-alt-2: rgb(239, 239, 239);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-color-disabled);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-secondary-outline: rgba(255, 0, 255, 0.2);--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-color-informative: #1a77e9;--luzmo-color-informative-rgb: 26, 119, 233;--luzmo-color-disabled: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(e);
+    const t = document.createElement("style");
+    t.setAttribute("data-luzmo-vars", ""), t.textContent = 'html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-background-color-alt-1: rgb(250, 250, 250);--luzmo-background-color-alt-2: rgb(239, 239, 239);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-color-disabled);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-secondary-outline: rgba(255, 0, 255, 0.2);--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-color-informative: #1a77e9;--luzmo-color-informative-rgb: 26, 119, 233;--luzmo-color-disabled: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(t);
   }
 })();
-const H = (o, e) => {
-  var a, p;
-  const t = {
+const R = (o, t) => {
+  const e = {
     type: o.type,
     datasetId: o.datasetId,
     set: o.datasetId
     // TODO: Remove this once column/set -> columnId/datasetId migration is fully done.
   };
-  "columnId" in o && !f(o.columnId) && o.columnId !== "" ? (t.columnId = o.columnId, t.column = o.columnId) : "formulaId" in o && !f(o.formulaId) && o.formulaId !== "" && (t.formulaId = o.formulaId, t.formula = o.formulaId);
+  "columnId" in o && !c(o.columnId) && o.columnId !== "" ? (e.columnId = o.columnId, e.column = o.columnId) : "formulaId" in o && !c(o.formulaId) && o.formulaId !== "" && (e.formulaId = o.formulaId, e.formula = o.formulaId);
   const l = o.type === "datetime" || o.type === "array[datetime]", r = { ...o.name ?? { en: "Untitled" } };
-  let s = o.level;
-  if (l && (s = s ?? o.lowestLevel ?? 9, e)) {
-    const i = ((a = M.shortLevels) == null ? void 0 : a.filter((u) => u !== "All")) ?? [], d = Math.max(0, Math.min(i.length - 1, (s ?? 1) - 1)), m = i[d];
-    if (m) {
-      const u = `(${m})`, b = Object.keys(r);
-      for (const z of b)
-        r[z] = `${r[z]} ${u}`;
+  let i = o.level;
+  if (l && (i = i ?? o.lowestLevel ?? 9, t)) {
+    const p = $.shortLevels?.filter((b) => b !== "All") ?? [], u = Math.max(0, Math.min(p.length - 1, (i ?? 1) - 1)), f = p[u];
+    if (f) {
+      const b = `(${f})`, D = Object.keys(r);
+      for (const v of D)
+        r[v] = `${r[v]} ${b}`;
     }
   }
-  return t.label = r, f(o.subtype) || (t.subtype = o.subtype), "lowestLevel" in o && !f(o.lowestLevel) && (t.lowestLevel = o.lowestLevel), f(o.format) || (t.format = o.format), f(s) || (t.level = s), f(o.lowestLevel) || (t.lowestLevel = o.lowestLevel), o.type === "numeric" && o.subtype === "currency" && ((p = o.currency) != null && p.symbol) && (t.currency = o.currency.symbol), Array.isArray(o.duration_levels) && o.duration_format && (t.duration = {
+  return e.label = r, c(o.subtype) || (e.subtype = o.subtype), "lowestLevel" in o && !c(o.lowestLevel) && (e.lowestLevel = o.lowestLevel), c(o.format) || (e.format = o.format), c(i) || (e.level = i), c(o.lowestLevel) || (e.lowestLevel = o.lowestLevel), o.type === "numeric" && o.subtype === "currency" && o.currency?.symbol && (e.currency = o.currency.symbol), Array.isArray(o.duration_levels) && o.duration_format && (e.duration = {
     levels: o.duration_levels,
     format: o.duration_format
-  }), t;
+  }), e;
 };
-class V {
+class N {
   constructor() {
-    this.slotContents = y([]), this.slotsContents = y([]), this.periodOverPeriodUiType = y(
+    this.slotContents = h([]), this.slotsContents = h([]), this.periodOverPeriodUiType = h(
       null
-    ), this.linkedDataset = y(
+    ), this.linkedDataset = h(
       []
     ), this._popEnabledChartTypes = [
       "area-chart",
@@ -77,94 +76,90 @@ class V {
       "combination-chart",
       "column-chart",
       "line-chart"
-    ], this.activeSlotContents = G(() => this.slotContents.get()[this.activeIndex.get()]), this.activeIndex = y(0);
+    ], this.activeSlotContents = F(() => this.slotContents.get()[this.activeIndex.get()]), this.activeIndex = h(0);
   }
-  isArrayColumnType(e) {
-    return e.startsWith("array[");
+  isArrayColumnType(t) {
+    return t.startsWith("array[");
   }
-  setPeriodOverPeriodCondition(e, t) {
-    var l;
-    if (!((l = t == null ? void 0 : t.periodOverPeriod) != null && l.newUi)) {
-      this.periodOverPeriodUiType.set(this.oldConditionalLogic(e));
+  setPeriodOverPeriodCondition(t, e) {
+    if (!e?.periodOverPeriod?.newUi) {
+      this.periodOverPeriodUiType.set(this.oldConditionalLogic(t));
       return;
     }
     this.periodOverPeriodUiType.set(
-      this.getUiConditionToApply(t)
+      this.getUiConditionToApply(e)
     );
   }
-  getUiConditionToApply(e) {
-    var s;
-    const t = this.hasDatetimeColumnOnCategoryOrXAxis(), l = (s = e == null ? void 0 : e.periodOverPeriod) == null ? void 0 : s.hasConnectedComparisonFilter, r = this.linkedDataset.get().some(
-      ({ columns: a }) => a == null ? void 0 : a.some((p) => p.type === "datetime")
+  getUiConditionToApply(t) {
+    const e = this.hasDatetimeColumnOnCategoryOrXAxis(), l = t?.periodOverPeriod?.hasConnectedComparisonFilter, r = this.linkedDataset.get().some(
+      ({ columns: i }) => i?.some((p) => p.type === "datetime")
     );
-    return !t && !l && !r ? null : t && l ? C.HasDatetimeColumnAndComparisonFilters : t && !l ? C.HasDatetimeColumnAndNoComparisonFilters : !t && l ? C.NoDatetimeColumnButComparisonFilters : C.NoDatetimeColumnAndNoComparisonFilters;
+    return !e && !l && !r ? null : e && l ? g.HasDatetimeColumnAndComparisonFilters : e && !l ? g.HasDatetimeColumnAndNoComparisonFilters : !e && l ? g.NoDatetimeColumnButComparisonFilters : g.NoDatetimeColumnAndNoComparisonFilters;
   }
-  oldConditionalLogic(e) {
-    var p, i;
-    const t = this.slotsContents.get() ?? [], l = ((p = t.find(
-      (d) => ["y-axis", "x-axis", "row"].includes(d.name)
-    )) == null ? void 0 : p.content) ?? [], r = (l == null ? void 0 : l[0]) ?? null, s = ((i = t.find((d) => d.name === "measure")) == null ? void 0 : i.content) ?? [];
-    return r && this._popEnabledChartTypes.includes(e) && r.type === "datetime" && !this.isArrayColumnType(r.type) && !r.datetimeDisplayMode && r.level !== 4 && s.length > 0 ? C.OldImplementation : null;
+  oldConditionalLogic(t) {
+    const e = this.slotsContents.get() ?? [], r = (e.find(
+      (u) => ["y-axis", "x-axis", "row"].includes(u.name)
+    )?.content ?? [])?.[0] ?? null, i = e.find((u) => u.name === "measure")?.content ?? [];
+    return r && this._popEnabledChartTypes.includes(t) && r.type === "datetime" && !this.isArrayColumnType(r.type) && !r.datetimeDisplayMode && r.level !== 4 && i.length > 0 ? g.OldImplementation : null;
   }
   /**
    * Detects if there's a datetime column on Category or X-axis slots
    */
   hasDatetimeColumnOnCategoryOrXAxis() {
-    var r;
-    const t = ((r = (this.slotsContents.get() ?? []).find(
-      (s) => ["y-axis", "x-axis"].includes(s.name)
-    )) == null ? void 0 : r.content) ?? [], l = (t == null ? void 0 : t[0]) ?? null;
+    const l = ((this.slotsContents.get() ?? []).find(
+      (r) => ["y-axis", "x-axis"].includes(r.name)
+    )?.content ?? [])?.[0] ?? null;
     return !!(l && l.type === "datetime" && !this.isArrayColumnType(l.type));
   }
   /** Replace the full list (e.g. after dropping or re-ordering). */
-  setContents(e, t) {
-    if (this.slotContents.set(e), this.activeIndex.get() >= e.length && this.activeIndex.set(e.length > 0 ? e.length - 1 : 0), t) {
-      const l = structuredClone(this.slotsContents.get()) ?? [], r = l.find((s) => s.name === t);
-      r && (r.content = e), this.setFullContents(l);
+  setContents(t, e) {
+    if (this.slotContents.set(t), this.activeIndex.get() >= t.length && this.activeIndex.set(t.length > 0 ? t.length - 1 : 0), e) {
+      const l = structuredClone(this.slotsContents.get()) ?? [], r = l.find((i) => i.name === e);
+      r && (r.content = t), this.setFullContents(l);
     }
   }
-  setFullContents(e) {
-    this.slotsContents.set(e);
+  setFullContents(t) {
+    this.slotsContents.set(t);
   }
   /** Change which item is considered active (e.g. user clicked in list). */
-  updateActive(e) {
-    e >= 0 && e < this.slotContents.get().length && this.activeIndex.set(e);
+  updateActive(t) {
+    t >= 0 && t < this.slotContents.get().length && this.activeIndex.set(t);
   }
   /** Update / overwrite a single content entry. */
-  updateContent(e, t = this.activeIndex.get()) {
-    if (t < 0 || t >= this.slotContents.get().length) return;
+  updateContent(t, e = this.activeIndex.get()) {
+    if (e < 0 || e >= this.slotContents.get().length) return;
     const l = [...this.slotContents.get()];
-    l[t] = structuredClone(e), this.slotContents.set(l);
+    l[e] = structuredClone(t), this.slotContents.set(l);
   }
   /** Remove one content entry by index. */
-  removeContent(e) {
-    if (e < 0 || e >= this.slotContents.get().length) return;
-    const t = this.slotContents.get().filter((l, r) => r !== e);
-    this.slotContents.set(t), this.activeIndex.get() >= t.length && this.activeIndex.set(t.length > 0 ? t.length - 1 : 0);
+  removeContent(t) {
+    if (t < 0 || t >= this.slotContents.get().length) return;
+    const e = this.slotContents.get().filter((l, r) => r !== t);
+    this.slotContents.set(e), this.activeIndex.get() >= e.length && this.activeIndex.set(e.length > 0 ? e.length - 1 : 0);
   }
 }
-const X = ":host{font-family:var(--luzmo-droppable-slot-font-family, var(--luzmo-font-family));--slot-height: var( --luzmo-droppable-slot-height, var(--droppable-slot-height) )}.droppable-slot-wrapper{position:relative;width:var(--slot-height);min-width:var(--slot-height);height:auto;overflow:visible}.droppable-slot[filled]{border:var(--luzmo-droppable-slot-filled-border-width, var(--droppable-slot-filled-border-width)) var(--luzmo-droppable-slot-filled-border-style, var(--droppable-slot-filled-border-style)) var(--luzmo-droppable-slot-filled-border-color, var(--droppable-slot-filled-border-color));background-color:var(--luzmo-droppable-slot-filled-background-color, var(--droppable-slot-filled-background-color));color:var(--luzmo-droppable-slot-filled-color, var(--droppable-slot-filled-color));padding-right:0;gap:var(--luzmo-droppable-slot-filled-gap, var(--droppable-slot-filled-gap))}.droppable-slot[filled]>*:not(luzmo-overlay){cursor:pointer}.droppable-slot{background-color:var(--luzmo-droppable-slot-background-color, var(--droppable-slot-background-color));color:var(--luzmo-droppable-slot-font-color, var(--droppable-slot-font-color));border:var(--luzmo-droppable-slot-border-width, var(--droppable-slot-border-width)) var(--luzmo-droppable-slot-border-style, var(--droppable-slot-border-style)) var(--luzmo-droppable-slot-border-color, var(--droppable-slot-border-color));display:flex;justify-content:space-between;align-items:center;padding-left:var(--luzmo-droppable-slot-edge-to-label, var(--droppable-slot-edge-to-label));padding-right:var(--luzmo-droppable-slot-label-to-controls, var(--droppable-slot-label-to-controls));border-radius:var(--luzmo-droppable-slot-border-radius, var(--droppable-slot-border-radius));height:var(--luzmo-droppable-slot-height, var(--droppable-slot-height))}:host(.pulse) .droppable-slot{animation:dropelementpulse 1s infinite ease-in-out}:host([accept-drag]) .droppable-slot{background-color:var(--luzmo-droppable-slot-accept-drag-background-color, var(--droppable-slot-accept-drag-background-color));color:var(--luzmo-droppable-slot-accept-drag-font-color, var(--droppable-slot-accept-drag-font-color));border-color:var(--luzmo-droppable-slot-accept-drag-border-color, var(--droppable-slot-accept-drag-border-color));animation:dropelementpulse 1s infinite ease-in-out}:host([accept-drag]) .controls{background-color:var(--luzmo-droppable-slot-accept-drag-controls-background-color, var(--droppable-slot-accept-drag-controls-background-color));color:var(--luzmo-droppable-slot-accept-drag-controls-color, var(--droppable-slot-accept-drag-controls-color))}:host([would-accept-drag]) .droppable-slot:not([filled]){animation:var(--luzmo-slot-would-accept-drop-animation, none)}@keyframes dropelementpulse{0%{box-shadow:0 0 0 0 var(--luzmo-droppable-slot-pulse-color, var(--droppable-slot-pulse-color)),0 0 0 0 var(--luzmo-droppable-slot-pulse-color, var(--droppable-slot-pulse-color))}to{box-shadow:0 0 0 1rem transparent,0 0 0 1rem transparent}}:host([disabled]) .droppable-slot{background-color:var(--luzmo-droppable-slot-background-color-disabled, var(--droppable-slot-background-color-disabled));color:var(--luzmo-droppable-slot-color-disabled, var(--droppable-slot-color-disabled));cursor:not-allowed}:host([disabled]) .drag-handle-icon{opacity:.25;font-size:12px}.drag-handle-icon{opacity:.5;font-size:12px}.droppable-slot-label{font-size:var(--luzmo-droppable-slot-label-font-size, var(--droppable-slot-label-font-size));padding-top:var(--luzmo-droppable-slot-label-padding-top, var(--droppable-slot-label-padding-top));padding-bottom:var(--luzmo-droppable-slot-label-padding-bottom, var(--droppable-slot-label-padding-bottom));flex-grow:1;max-width:var(--luzmo-droppable-slot-label-max-width);margin-right:var(--luzmo-droppable-slot-text-to-controls, var(--droppable-slot-text-to-controls));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.controls{height:100%;display:flex;align-items:center;gap:var(--luzmo-droppable-slot-controls-gap, var(--droppable-slot-controls-gap));background-color:var(--luzmo-droppable-slot-controls-background-color, var(--droppable-slot-controls-background-color));color:var(--luzmo-droppable-slot-controls-color, var(--droppable-slot-controls-color));margin-right:var(--luzmo-droppable-slot-controls-to-edge, var(--droppable-slot-controls-to-edge));padding:0 var(--luzmo-droppable-slot-controls-horizontal-padding, var(--droppable-slot-controls-horizontal-padding));font-size:var(--luzmo-droppable-slot-controls-font-size)}.controls div{cursor:pointer;height:100%;display:flex;align-items:center;padding:0 var(--luzmo-droppable-slot-controls-control-horizontal-padding, var(--droppable-slot-controls-control-horizontal-padding))}.droppable-slot.rotate{position:absolute;top:0;left:50%;transform-origin:center;max-width:15rem;transform:translate(-50%) rotate(-90deg)}luzmo-slot-menu[placement=bottom],luzmo-slot-menu[placement=top],luzmo-slot-menu[placement=bottom-start],luzmo-slot-menu[placement=top-start],luzmo-slot-menu[placement=bottom-end],luzmo-slot-menu[placement=top-end]{margin:var(--luzmo-droppable-slot-overlay-vertical-gap, var(--droppable-slot-overlay-vertical-gap)) 0}luzmo-slot-menu[placement=left],luzmo-slot-menu[placement=right],luzmo-slot-menu[placement=left-start],luzmo-slot-menu[placement=right-start],luzmo-slot-menu[placement=left-end],luzmo-slot-menu[placement=right-end]{margin:0 var(--luzmo-droppable-slot-overlay-horizontal-gap, var(--droppable-slot-overlay-horizontal-gap))}:host{--droppable-slot-border-width: var(--luzmo-border-width);--droppable-slot-border-style: dashed;--droppable-slot-border-color: var(--luzmo-border-color);--droppable-slot-background-color: transparent;--droppable-slot-accept-drag-background-color: var(--luzmo-positive-color);--droppable-slot-accept-drag-color: white;--droppable-slot-accept-drag-border-color: var(--luzmo-positive-color-down);--droppable-slot-accept-drag-font-color: white;--droppable-slot-font-color: var(--luzmo-font-color);--droppable-slot-controls-background-color: var(--luzmo-primary-down);--droppable-slot-controls-color: var(--luzmo-primary-inverse-color);--droppable-slot-accept-drag-controls-background-color: var( --luzmo-positive-color-down );--droppable-slot-accept-drag-controls-color: white;--droppable-slot-text-to-controls: var(--luzmo-spacing-3);--droppable-slot-controls-to-edge: 0;--droppable-slot-controls-gap: var(--luzmo-spacing-2);--droppable-slot-controls-horizontal-padding: var(--luzmo-spacing-2);--droppable-slot-controls-control-horizontal-padding: var(--luzmo-spacing-3);--droppable-slot-filled-background-color: var(--luzmo-primary);--droppable-slot-filled-color: var(--luzmo-primary-inverse-color);--droppable-slot-filled-border-width: var(--luzmo-border-width);--droppable-slot-filled-border-style: solid;--droppable-slot-filled-border-color: var(--luzmo-primary-down);--droppable-slot-height: var( --luzmo-droppable-slot-height, var(--luzmo-component-height) );--droppable-slot-label-font-size: var(--luzmo-font-size);--droppable-slot-icon-type-font-size: var(--luzmo-font-size);--droppable-slot-edge-to-label: var(--luzmo-spacing-5);--droppable-slot-label-to-controls: var(--luzmo-spacing-5);--droppable-slot-color-disabled: var(--luzmo-color-disabled);--droppable-slot-background-color-disabled: var( --luzmo-background-color-disabled );--droppable-slot-pulse-color: rgba(var(--luzmo-positive-color-rgb), .2);--droppable-slot-border-radius: var(--luzmo-border-radius);--droppable-slot-filled-gap: var(--luzmo-spacing-5)}:host{--droppable-slot-height: var( --luzmo-droppable-slot-height, var(--luzmo-component-height) );--droppable-slot-label-font-size: var(--luzmo-font-size);--droppable-slot-icon-type-font-size: var(--luzmo-font-size);--droppable-slot-horizontal-padding: var(--luzmo-spacing-4);--droppable-slot-overlay-horizontal-gap: var(--luzmo-spacing-4);--droppable-slot-overlay-vertical-gap: var(--luzmo-spacing-4)}:host([size=s]){--droppable-slot-height: var( --luzmo-droppable-slot-height, var(--luzmo-component-height-s) );--droppable-slot-label-font-size: var(--luzmo-font-size-s);--droppable-slot-icon-type-font-size: var(--luzmo-font-size-s);--droppable-slot-horizontal-padding: var(--luzmo-spacing-4);--droppable-slot-overlay-horizontal-gap: var(--luzmo-spacing-4);--droppable-slot-overlay-vertical-gap: var(--luzmo-spacing-4)}:host([size=l]){--droppable-slot-height: var( --luzmo-droppable-slot-height, var(--luzmo-component-height-l) );--droppable-slot-label-font-size: var(--luzmo-font-size-l);--droppable-slot-icon-type-font-size: var(--luzmo-font-size-l);--droppable-slot-horizontal-padding: var(--luzmo-spacing-5);--droppable-slot-overlay-horizontal-gap: var(--luzmo-spacing-5);--droppable-slot-overlay-vertical-gap: var(--luzmo-spacing-5)}:host([size=xl]){--droppable-slot-height: var( --luzmo-droppable-slot-height, var(--luzmo-component-height-xl) );--droppable-slot-label-font-size: var(--luzmo-font-size-xl);--droppable-slot-icon-type-font-size: var(--luzmo-font-size-xl);--droppable-slot-horizontal-padding: var(--luzmo-spacing-5);--droppable-slot-overlay-horizontal-gap: var(--luzmo-spacing-5);--droppable-slot-overlay-vertical-gap: var(--luzmo-spacing-5)}:host{box-sizing:border-box}", w = {
-  Category: () => v("Category", { desc: "Category label" }),
-  Measure: () => v("Measure", { desc: "Measure label" }),
-  Legend: () => v("Legend", { desc: "Legend label" }),
-  "Y-Axis": () => v("Y-Axis", { desc: "Y-Axis label" }),
-  "X-Axis": () => v("X-Axis", { desc: "X-Axis label" }),
-  "Group by": () => v("Group by", { desc: "Group by label" })
+const j = ":host{font-family:var(--luzmo-droppable-slot-font-family, var(--luzmo-font-family));--slot-height: var( --luzmo-droppable-slot-height, var(--droppable-slot-height) )}.droppable-slot-wrapper{position:relative;width:var(--slot-height);min-width:var(--slot-height);height:auto;overflow:visible}.droppable-slot[filled]{border:var(--luzmo-droppable-slot-filled-border-width, var(--droppable-slot-filled-border-width)) var(--luzmo-droppable-slot-filled-border-style, var(--droppable-slot-filled-border-style)) var(--luzmo-droppable-slot-filled-border-color, var(--droppable-slot-filled-border-color));background-color:var(--luzmo-droppable-slot-filled-background-color, var(--droppable-slot-filled-background-color));color:var(--luzmo-droppable-slot-filled-color, var(--droppable-slot-filled-color));padding-right:0;gap:var(--luzmo-droppable-slot-filled-gap, var(--droppable-slot-filled-gap))}.droppable-slot[filled]>*:not(luzmo-overlay){cursor:pointer}.droppable-slot{background-color:var(--luzmo-droppable-slot-background-color, var(--droppable-slot-background-color));color:var(--luzmo-droppable-slot-font-color, var(--droppable-slot-font-color));border:var(--luzmo-droppable-slot-border-width, var(--droppable-slot-border-width)) var(--luzmo-droppable-slot-border-style, var(--droppable-slot-border-style)) var(--luzmo-droppable-slot-border-color, var(--droppable-slot-border-color));display:flex;justify-content:space-between;align-items:center;padding-left:var(--luzmo-droppable-slot-edge-to-label, var(--droppable-slot-edge-to-label));padding-right:var(--luzmo-droppable-slot-label-to-controls, var(--droppable-slot-label-to-controls));border-radius:var(--luzmo-droppable-slot-border-radius, var(--droppable-slot-border-radius));height:var(--luzmo-droppable-slot-height, var(--droppable-slot-height))}:host(.pulse) .droppable-slot{animation:dropelementpulse 1s infinite ease-in-out}:host([accept-drag]) .droppable-slot{background-color:var(--luzmo-droppable-slot-accept-drag-background-color, var(--droppable-slot-accept-drag-background-color));color:var(--luzmo-droppable-slot-accept-drag-font-color, var(--droppable-slot-accept-drag-font-color));border-color:var(--luzmo-droppable-slot-accept-drag-border-color, var(--droppable-slot-accept-drag-border-color));animation:dropelementpulse 1s infinite ease-in-out}:host([accept-drag]) .controls{background-color:var(--luzmo-droppable-slot-accept-drag-controls-background-color, var(--droppable-slot-accept-drag-controls-background-color));color:var(--luzmo-droppable-slot-accept-drag-controls-color, var(--droppable-slot-accept-drag-controls-color))}:host([would-accept-drag]) .droppable-slot:not([filled]){animation:var(--luzmo-slot-would-accept-drop-animation, none)}@keyframes dropelementpulse{0%{box-shadow:0 0 0 0 var(--luzmo-droppable-slot-pulse-color, var(--droppable-slot-pulse-color)),0 0 0 0 var(--luzmo-droppable-slot-pulse-color, var(--droppable-slot-pulse-color))}to{box-shadow:0 0 0 1rem transparent,0 0 0 1rem transparent}}:host([disabled]) .droppable-slot{background-color:var(--luzmo-droppable-slot-background-color-disabled, var(--droppable-slot-background-color-disabled));color:var(--luzmo-droppable-slot-color-disabled, var(--droppable-slot-color-disabled));cursor:not-allowed}:host([disabled]) .drag-handle-icon{opacity:.25;font-size:12px}.drag-handle-icon{opacity:.5;font-size:12px}.droppable-slot-label{font-size:var(--luzmo-droppable-slot-label-font-size, var(--droppable-slot-label-font-size));padding-top:var(--luzmo-droppable-slot-label-padding-top, var(--droppable-slot-label-padding-top));padding-bottom:var(--luzmo-droppable-slot-label-padding-bottom, var(--droppable-slot-label-padding-bottom));flex-grow:1;max-width:var(--luzmo-droppable-slot-label-max-width);margin-right:var(--luzmo-droppable-slot-text-to-controls, var(--droppable-slot-text-to-controls));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.controls{height:100%;display:flex;align-items:center;gap:var(--luzmo-droppable-slot-controls-gap, var(--droppable-slot-controls-gap));background-color:var(--luzmo-droppable-slot-controls-background-color, var(--droppable-slot-controls-background-color));color:var(--luzmo-droppable-slot-controls-color, var(--droppable-slot-controls-color));margin-right:var(--luzmo-droppable-slot-controls-to-edge, var(--droppable-slot-controls-to-edge));padding:0 var(--luzmo-droppable-slot-controls-horizontal-padding, var(--droppable-slot-controls-horizontal-padding));font-size:var(--luzmo-droppable-slot-controls-font-size)}.controls div{cursor:pointer;height:100%;display:flex;align-items:center;padding:0 var(--luzmo-droppable-slot-controls-control-horizontal-padding, var(--droppable-slot-controls-control-horizontal-padding))}.droppable-slot.rotate{position:absolute;top:0;left:50%;transform-origin:center;max-width:15rem;transform:translate(-50%) rotate(-90deg)}luzmo-slot-menu[placement=bottom],luzmo-slot-menu[placement=top],luzmo-slot-menu[placement=bottom-start],luzmo-slot-menu[placement=top-start],luzmo-slot-menu[placement=bottom-end],luzmo-slot-menu[placement=top-end]{margin:var(--luzmo-droppable-slot-overlay-vertical-gap, var(--droppable-slot-overlay-vertical-gap)) 0}luzmo-slot-menu[placement=left],luzmo-slot-menu[placement=right],luzmo-slot-menu[placement=left-start],luzmo-slot-menu[placement=right-start],luzmo-slot-menu[placement=left-end],luzmo-slot-menu[placement=right-end]{margin:0 var(--luzmo-droppable-slot-overlay-horizontal-gap, var(--droppable-slot-overlay-horizontal-gap))}:host{--droppable-slot-border-width: var(--luzmo-border-width);--droppable-slot-border-style: dashed;--droppable-slot-border-color: var(--luzmo-border-color);--droppable-slot-background-color: transparent;--droppable-slot-accept-drag-background-color: var(--luzmo-positive-color);--droppable-slot-accept-drag-color: white;--droppable-slot-accept-drag-border-color: var(--luzmo-positive-color-down);--droppable-slot-accept-drag-font-color: white;--droppable-slot-font-color: var(--luzmo-font-color);--droppable-slot-controls-background-color: var(--luzmo-primary-down);--droppable-slot-controls-color: var(--luzmo-primary-inverse-color);--droppable-slot-accept-drag-controls-background-color: var( --luzmo-positive-color-down );--droppable-slot-accept-drag-controls-color: white;--droppable-slot-text-to-controls: var(--luzmo-spacing-3);--droppable-slot-controls-to-edge: 0;--droppable-slot-controls-gap: var(--luzmo-spacing-2);--droppable-slot-controls-horizontal-padding: var(--luzmo-spacing-2);--droppable-slot-controls-control-horizontal-padding: var(--luzmo-spacing-3);--droppable-slot-filled-background-color: var(--luzmo-primary);--droppable-slot-filled-color: var(--luzmo-primary-inverse-color);--droppable-slot-filled-border-width: var(--luzmo-border-width);--droppable-slot-filled-border-style: solid;--droppable-slot-filled-border-color: var(--luzmo-primary-down);--droppable-slot-height: var( --luzmo-droppable-slot-height, var(--luzmo-component-height) );--droppable-slot-label-font-size: var(--luzmo-font-size);--droppable-slot-icon-type-font-size: var(--luzmo-font-size);--droppable-slot-edge-to-label: var(--luzmo-spacing-5);--droppable-slot-label-to-controls: var(--luzmo-spacing-5);--droppable-slot-color-disabled: var(--luzmo-color-disabled);--droppable-slot-background-color-disabled: var( --luzmo-background-color-disabled );--droppable-slot-pulse-color: rgba(var(--luzmo-positive-color-rgb), .2);--droppable-slot-border-radius: var(--luzmo-border-radius);--droppable-slot-filled-gap: var(--luzmo-spacing-5)}:host{--droppable-slot-height: var( --luzmo-droppable-slot-height, var(--luzmo-component-height) );--droppable-slot-label-font-size: var(--luzmo-font-size);--droppable-slot-icon-type-font-size: var(--luzmo-font-size);--droppable-slot-horizontal-padding: var(--luzmo-spacing-4);--droppable-slot-overlay-horizontal-gap: var(--luzmo-spacing-4);--droppable-slot-overlay-vertical-gap: var(--luzmo-spacing-4)}:host([size=s]){--droppable-slot-height: var( --luzmo-droppable-slot-height, var(--luzmo-component-height-s) );--droppable-slot-label-font-size: var(--luzmo-font-size-s);--droppable-slot-icon-type-font-size: var(--luzmo-font-size-s);--droppable-slot-horizontal-padding: var(--luzmo-spacing-4);--droppable-slot-overlay-horizontal-gap: var(--luzmo-spacing-4);--droppable-slot-overlay-vertical-gap: var(--luzmo-spacing-4)}:host([size=l]){--droppable-slot-height: var( --luzmo-droppable-slot-height, var(--luzmo-component-height-l) );--droppable-slot-label-font-size: var(--luzmo-font-size-l);--droppable-slot-icon-type-font-size: var(--luzmo-font-size-l);--droppable-slot-horizontal-padding: var(--luzmo-spacing-5);--droppable-slot-overlay-horizontal-gap: var(--luzmo-spacing-5);--droppable-slot-overlay-vertical-gap: var(--luzmo-spacing-5)}:host([size=xl]){--droppable-slot-height: var( --luzmo-droppable-slot-height, var(--luzmo-component-height-xl) );--droppable-slot-label-font-size: var(--luzmo-font-size-xl);--droppable-slot-icon-type-font-size: var(--luzmo-font-size-xl);--droppable-slot-horizontal-padding: var(--luzmo-spacing-5);--droppable-slot-overlay-horizontal-gap: var(--luzmo-spacing-5);--droppable-slot-overlay-vertical-gap: var(--luzmo-spacing-5)}:host{box-sizing:border-box}", C = {
+  Category: () => m("Category", { desc: "Category label" }),
+  Measure: () => m("Measure", { desc: "Measure label" }),
+  Legend: () => m("Legend", { desc: "Legend label" }),
+  "Y-Axis": () => m("Y-Axis", { desc: "Y-Axis label" }),
+  "X-Axis": () => m("X-Axis", { desc: "X-Axis label" }),
+  "Group by": () => m("Group by", { desc: "Group by label" })
 };
-var Z = Object.defineProperty, K = Object.getOwnPropertyDescriptor, c = (o, e, t, l) => {
-  for (var r = l > 1 ? void 0 : l ? K(e, t) : e, s = o.length - 1, a; s >= 0; s--)
-    (a = o[s]) && (r = (l ? a(e, t, r) : a(r)) || r);
-  return l && r && Z(e, t, r), r;
+var H = Object.defineProperty, V = Object.getOwnPropertyDescriptor, a = (o, t, e, l) => {
+  for (var r = l > 1 ? void 0 : l ? V(t, e) : t, i = o.length - 1, p; i >= 0; i--)
+    (p = o[i]) && (r = (l ? p(t, e, r) : p(r)) || r);
+  return l && r && H(t, e, r), r;
 };
-let n = class extends P(F, {
+let s = class extends M(T, {
   validSizes: ["s", "m", "l", "xl"],
   noDefaultSize: !0
 }) {
   constructor() {
-    super(), this._loadSlotsConfig = new I(this, {
+    super(), this._loadSlotsConfig = new A(this, {
       task: async ([o]) => {
         if (o && o !== this._itemTypeLoaded) {
-          const e = /* @__PURE__ */ Object.assign({
+          const t = /* @__PURE__ */ Object.assign({
             "../../item-definitions/area-chart/area-chart-slots.config.ts": () => import("../area-chart-slots.config-DoytjTpw.js"),
             "../../item-definitions/bar-chart/bar-chart-slots.config.ts": () => import("../bar-chart-slots.config-Dn0IV43j.js"),
             "../../item-definitions/box-plot/box-plot-slots.config.ts": () => import("../box-plot-slots.config-FI5Id-7p.js"),
@@ -210,16 +205,16 @@ let n = class extends P(F, {
             "../../item-definitions/venn-diagram/venn-diagram-slots.config.ts": () => import("../venn-diagram-slots.config-BPxkBFb6.js"),
             "../../item-definitions/video/video-slots.config.ts": () => import("../video-slots.config-IpwUxDyU.js"),
             "../../item-definitions/wordcloud-chart/wordcloud-chart-slots.config.ts": () => import("../wordcloud-chart-slots.config-BS4sOOHt.js")
-          }), t = `../../item-definitions/${o}/${o}-slots.config.ts`;
-          if (e[t]) {
-            const l = await e[t]();
-            this._itemTypeLoaded = o, this._slotsConfig = (l == null ? void 0 : l.default) ?? {};
+          }), e = `../../item-definitions/${o}/${o}-slots.config.ts`;
+          if (t[e]) {
+            const l = await t[e]();
+            this._itemTypeLoaded = o, this._slotsConfig = l?.default ?? {};
           }
           return this._slotsConfig;
         }
       },
       args: () => [this.itemType, this.language]
-    }), this._slotsConfig = [], this.slotConfiguration = {}, this.slotsContents = [], this.language = "en", this.rotate = !1, this.apiUrl = "https://api.luzmo.com", this.authKey = "", this.authToken = "", this.menu = "default", this.placement = "bottom-end", this._slotContents = [], this._overlayReady = !1, this._store = new V(), this._currentSlotContents = [], this._lastFetchedDatasetId = null, this._linkedDatasetsIds = [], this._acceptableColumnTypes = [
+    }), this._slotsConfig = [], this.slotConfiguration = {}, this.slotsContents = [], this.language = "en", this.rotate = !1, this.apiUrl = "https://api.luzmo.com", this.authKey = "", this.authToken = "", this.menu = "default", this.placement = "bottom-end", this._slotContents = [], this._overlayReady = !1, this._store = new N(), this._currentSlotContents = [], this._lastFetchedDatasetId = null, this._linkedDatasetsIds = [], this._acceptableColumnTypes = [
       "datetime",
       "hierarchy",
       "numeric",
@@ -229,12 +224,11 @@ let n = class extends P(F, {
       "array[hierarchy]",
       "array[spatial]"
     ], this._attachDroppable = () => {
-      this._cleanupDroppable || (this._cleanupDroppable = E({
+      this._cleanupDroppable || (this._cleanupDroppable = w({
         element: this,
         onDrop: async (o) => {
-          var a, p, i, d, m;
-          const e = { ...(a = o.source) == null ? void 0 : a.data }, t = ((i = (p = o == null ? void 0 : o.source) == null ? void 0 : p.element) == null ? void 0 : i.hasAttribute("sublevel")) ?? !1, l = ((d = this._slotContents) == null ? void 0 : d.length) === 0, r = e.datasetId, s = H(e, t);
-          this._slotContents = (m = this.slotConfiguration) != null && m.canAcceptMultipleDataItems ? [...this._slotContents ?? [], s] : [s], this.removeAttribute("accept-drag"), r && r !== this._lastFetchedDatasetId && (this._lastFetchedDatasetId = r, await D.fetchDatasetsRecursive([r]), this._linkedDatasetsIds = D.getLinkedDatasetsIds(r)), l ? (this._overlayReady = !1, setTimeout(() => {
+          const t = { ...o.source?.data }, e = o?.source?.element?.hasAttribute("sublevel") ?? !1, l = this._slotContents?.length === 0, r = t.datasetId, i = R(t, e);
+          this._slotContents = this.slotConfiguration?.canAcceptMultipleDataItems ? [...this._slotContents ?? [], i] : [i], this.removeAttribute("accept-drag"), r && r !== this._lastFetchedDatasetId && (this._lastFetchedDatasetId = r, await y.fetchDatasetsRecursive([r]), this._linkedDatasetsIds = y.getLinkedDatasetsIds(r)), l ? (this._overlayReady = !1, setTimeout(() => {
             this._overlayReady = !0;
           }, 200)) : this._overlayReady = !0, this.changedSlotContents(this._slotContents, this._linkedDatasetsIds), this.classList.remove("pulse");
         },
@@ -248,35 +242,32 @@ let n = class extends P(F, {
         }
       }));
     }, this._canDropItem = ({ source: o }) => {
-      var r, s, a, p, i, d, m, u, b;
       if (![
         "LUZMO-DRAGGABLE-DATA-ITEM-LEVEL",
         "LUZMO-DRAGGABLE-DATA-ITEM"
-      ].includes((r = o.element) == null ? void 0 : r.tagName) || !((s = this.slotConfiguration) != null && s.canAcceptFormula) && ((a = o == null ? void 0 : o.data) != null && a.formulaId || (p = o == null ? void 0 : o.data) != null && p.formula || ((i = o == null ? void 0 : o.data) == null ? void 0 : i.entity) === "formula"))
+      ].includes(o.element?.tagName) || !this.slotConfiguration?.canAcceptFormula && (o?.data?.formulaId || o?.data?.formula || o?.data?.entity === "formula"))
         return !1;
-      const { acceptableDataItemTypes: e, acceptableColumnSubtypes: t } = this.slotConfiguration ?? {}, l = Array.isArray(e) && e.length > 0 ? e : this._acceptableColumnTypes;
-      return (d = o == null ? void 0 : o.data) != null && d.type && !l.includes((m = o == null ? void 0 : o.data) == null ? void 0 : m.type) ? !1 : !((u = o == null ? void 0 : o.data) != null && u.subtype && Array.isArray(t) && t.length > 0 && !t.includes((b = o == null ? void 0 : o.data) == null ? void 0 : b.subtype));
-    }, this.changedSlotContents = (o, e = []) => {
-      var t;
-      (t = this._store) == null || t.setContents(o, this.slotName), this.dispatchEvent(
+      const { acceptableDataItemTypes: t, acceptableColumnSubtypes: e } = this.slotConfiguration ?? {}, l = Array.isArray(t) && t.length > 0 ? t : this._acceptableColumnTypes;
+      return o?.data?.type && !l.includes(o?.data?.type) ? !1 : !(o?.data?.subtype && Array.isArray(e) && e.length > 0 && !e.includes(o?.data?.subtype));
+    }, this.changedSlotContents = (o, t = []) => {
+      this._store?.setContents(o, this.slotName), this.dispatchEvent(
         new CustomEvent("slot-contents-changed", {
           bubbles: !0,
           composed: !0,
           cancelable: !0,
           detail: {
             slotContents: o,
-            linkedDatasetsIds: e
+            linkedDatasetsIds: t
           }
         })
       );
     }, this._handleDragStart = (o) => {
-      var s;
-      const e = o, t = (s = e.detail) == null ? void 0 : s.data;
-      if (this._overlayElement && (this._overlayElement.open = !1), !t) return;
+      const t = o, e = t.detail?.data;
+      if (this._overlayElement && (this._overlayElement.open = !1), !e) return;
       const l = {
-        data: t,
+        data: e,
         element: {
-          tagName: e.target instanceof HTMLElement && e.target.tagName === "LUZMO-DRAGGABLE-DATA-ITEM-LEVEL" ? "LUZMO-DRAGGABLE-DATA-ITEM-LEVEL" : "LUZMO-DRAGGABLE-DATA-ITEM"
+          tagName: t.target instanceof HTMLElement && t.target.tagName === "LUZMO-DRAGGABLE-DATA-ITEM-LEVEL" ? "LUZMO-DRAGGABLE-DATA-ITEM-LEVEL" : "LUZMO-DRAGGABLE-DATA-ITEM"
         }
       };
       this._canDropItem({ source: l }) && this.setAttribute("would-accept-drag", "");
@@ -284,8 +275,8 @@ let n = class extends P(F, {
       this.removeAttribute("would-accept-drag");
     }, this._handleOverlayClick = (o) => {
       o.detail > 0 && o.target === this._overlayElement ? this._overlayElement.open = !1 : o.stopPropagation();
-    }, new L(this, {
-      context: B,
+    }, new k(this, {
+      context: U,
       initialValue: this._store
     });
   }
@@ -293,8 +284,7 @@ let n = class extends P(F, {
     super.connectedCallback(), this._attachDroppable(), document.addEventListener("data-item-drag-started", this._handleDragStart), document.addEventListener("data-item-dropped", this._handleDragEnd);
   }
   disconnectedCallback() {
-    var o, e;
-    super.disconnectedCallback(), this._cleanupDroppable && (this._cleanupDroppable(), this._cleanupDroppable = void 0), (e = (o = this._loadSlotsConfig).abort) == null || e.call(o), document.removeEventListener(
+    super.disconnectedCallback(), this._cleanupDroppable && (this._cleanupDroppable(), this._cleanupDroppable = void 0), this._loadSlotsConfig.abort?.(), document.removeEventListener(
       "data-item-drag-started",
       this._handleDragStart
     ), document.removeEventListener("data-item-dropped", this._handleDragEnd);
@@ -303,13 +293,12 @@ let n = class extends P(F, {
     o.preventDefault(), o.stopPropagation(), this._slotContents = [], this.changedSlotContents([]);
   }
   willUpdate(o) {
-    o.has("slotConfiguration") && (this._cleanupDroppable && (this._cleanupDroppable(), this._cleanupDroppable = void 0), this._attachDroppable()), o.has("slotsContents") && this._processSlotsContents(), o.has("language") && this.language !== R() && ([...N].includes(this.language ?? "en") || this.language === "en") && j(this.language);
+    o.has("slotConfiguration") && (this._cleanupDroppable && (this._cleanupDroppable(), this._cleanupDroppable = void 0), this._attachDroppable()), o.has("slotsContents") && this._processSlotsContents(), o.has("language") && this.language !== P() && ([...B].includes(this.language ?? "en") || this.language === "en") && G(this.language);
   }
   _processSlotsContents() {
-    var o, e, t, l, r;
-    (o = this._store) == null || o.setFullContents(this.slotsContents), this._slotContents = ((t = (e = this.slotsContents) == null ? void 0 : e.find(
-      (s) => s.name === this.slotName
-    )) == null ? void 0 : t.content) ?? [], this._currentSlotContents = [...this._slotContents], ((l = this._slotContents) == null ? void 0 : l.length) > 0 && (this._overlayReady = !0), (r = this._store) == null || r.setContents(this._slotContents);
+    this._store?.setFullContents(this.slotsContents), this._slotContents = this.slotsContents?.find(
+      (o) => o.name === this.slotName
+    )?.content ?? [], this._currentSlotContents = [...this._slotContents], this._slotContents?.length > 0 && (this._overlayReady = !0), this._store?.setContents(this._slotContents);
   }
   firstUpdated() {
     this._attachDroppable();
@@ -318,8 +307,8 @@ let n = class extends P(F, {
    * Handle overlay open event - reset slot menu position
    */
   _onOverlayClosed(o) {
-    const e = o.overlay;
-    this._slotMenuElement && e === this._overlayElement && (setTimeout(() => {
+    const t = o.overlay;
+    this._slotMenuElement && t === this._overlayElement && (setTimeout(() => {
       this._slotMenuElement.resetPosition();
     }, 500), this.dispatchEvent(
       new CustomEvent("slot-menu-inactive", {
@@ -329,18 +318,17 @@ let n = class extends P(F, {
     ));
   }
   _onOverlayOpened(o) {
-    var t, l, r, s, a;
-    const e = o.overlay;
-    if (this._slotMenuElement && e === this._overlayElement) {
-      const p = ((r = (t = this._store) == null ? void 0 : (l = t.activeIndex).get) == null ? void 0 : r.call(l)) ?? 0, i = ((s = this._slotContents) == null ? void 0 : s[p]) ?? ((a = this._slotContents) == null ? void 0 : a[0]);
-      if (!i) return;
-      const d = (i == null ? void 0 : i.column) ?? (i == null ? void 0 : i.columnId), m = (i == null ? void 0 : i.set) ?? (i == null ? void 0 : i.datasetId), u = i == null ? void 0 : i.formula;
-      (d || u) && m && (this.dispatchEvent(
+    const t = o.overlay;
+    if (this._slotMenuElement && t === this._overlayElement) {
+      const e = this._store?.activeIndex.get?.() ?? 0, l = this._slotContents?.[e] ?? this._slotContents?.[0];
+      if (!l) return;
+      const r = l?.column ?? l?.columnId, i = l?.set ?? l?.datasetId, p = l?.formula;
+      (r || p) && i && (this.dispatchEvent(
         new CustomEvent("slot-menu-active", {
           bubbles: !0,
           composed: !0,
           detail: {
-            datasetId: m
+            datasetId: i
           }
         })
       ), setTimeout(() => {
@@ -349,10 +337,10 @@ let n = class extends P(F, {
             bubbles: !0,
             composed: !0,
             detail: {
-              datasetId: m,
-              level: (i == null ? void 0 : i.level) ?? 0,
-              ...d && { columnId: d },
-              ...u && { formulaId: u }
+              datasetId: i,
+              level: l?.level ?? 0,
+              ...r && { columnId: r },
+              ...p && { formulaId: p }
             }
           })
         );
@@ -360,34 +348,31 @@ let n = class extends P(F, {
     }
   }
   _onSlotMenuChanges(o) {
-    var t;
     o.preventDefault(), o.stopPropagation();
-    const e = o.detail.linkedDatasetsIds;
-    this._slotContents.length === ((t = o.detail.slotContents) == null ? void 0 : t.length) ? (this._currentSlotContents = o.detail.slotContents, this.changedSlotContents(this._currentSlotContents, e)) : (this._slotContents = o.detail.slotContents, this.changedSlotContents(this._slotContents, e));
+    const t = o.detail.linkedDatasetsIds;
+    this._slotContents.length === o.detail.slotContents?.length ? (this._currentSlotContents = o.detail.slotContents, this.changedSlotContents(this._currentSlotContents, t)) : (this._slotContents = o.detail.slotContents, this.changedSlotContents(this._slotContents, t));
   }
   get _fullLabel() {
-    var l, r, s, a, p, i, d, m, u;
     let o = "";
-    const e = w[(l = this.slotConfiguration) == null ? void 0 : l.label] ? w[(r = this.slotConfiguration) == null ? void 0 : r.label]() : (s = this.slotConfiguration) == null ? void 0 : s.label;
-    ((a = this._currentSlotContents) == null ? void 0 : a.length) === 1 ? o = T(
-      (i = (p = this._currentSlotContents) == null ? void 0 : p[0]) == null ? void 0 : i.label,
+    const t = C[this.slotConfiguration?.label] ? C[this.slotConfiguration?.label]() : this.slotConfiguration?.label;
+    this._currentSlotContents?.length === 1 ? o = I(
+      this._currentSlotContents?.[0]?.label,
       this.language
-    ) ?? "Untitled" : ((d = this._currentSlotContents) == null ? void 0 : d.length) > 1 && (o = `${this._currentSlotContents.length} items`);
-    let t = this.label || e || "Untitled";
-    return ((m = this._currentSlotContents) == null ? void 0 : m.length) > 0 && (t += ((u = this._currentSlotContents) == null ? void 0 : u.length) > 1 ? `: ${this._currentSlotContents.length} items` : `: ${o}`), t;
+    ) ?? "Untitled" : this._currentSlotContents?.length > 1 && (o = `${this._currentSlotContents.length} items`);
+    let e = this.label || t || "Untitled";
+    return this._currentSlotContents?.length > 0 && (e += this._currentSlotContents?.length > 1 ? `: ${this._currentSlotContents.length} items` : `: ${o}`), e;
   }
   droppableSlotMarkup() {
-    var e, t, l, r, s, a, p, i, d, m, u, b, z, _;
-    const o = g`
+    const o = d`
       <div
         id="trigger"
         class="droppable-slot ${this.rotate ? "rotate" : ""}"
-        ?filled=${((e = this._slotContents) == null ? void 0 : e.length) > 0}
+        ?filled=${this._slotContents?.length > 0}
       >
         <div class="droppable-slot-label">${this._fullLabel}</div>
-        ${((t = this._slotContents) == null ? void 0 : t.length) > 0 && !(this.hideConfiguration && this.hideDelete) ? g`<div class="controls">
-              ${this.hideConfiguration ? "" : g`<div>
-                    ${x($)}
+        ${this._slotContents?.length > 0 && !(this.hideConfiguration && this.hideDelete) ? d`<div class="controls">
+              ${this.hideConfiguration ? "" : d`<div>
+                    ${z(E)}
                     <luzmo-tooltip
                       self-managed
                       placement=${this.rotate ? "right" : "top"}
@@ -396,8 +381,8 @@ let n = class extends P(F, {
                       edit
                     </luzmo-tooltip>
                   </div> `}
-              ${this.hideDelete ? "" : g`<div @click=${this.emptySlotContents}>
-                    ${x(O)}
+              ${this.hideDelete ? "" : d`<div @click=${this.emptySlotContents}>
+                    ${z(L)}
                     <luzmo-tooltip
                       self-managed
                       placement=${this.rotate ? "right" : "top"}
@@ -407,7 +392,7 @@ let n = class extends P(F, {
                     </luzmo-tooltip>
                   </div>`}
             </div>` : ""}
-        ${((l = this._slotContents) == null ? void 0 : l.length) > 0 && this._overlayReady ? g`<luzmo-overlay
+        ${this._slotContents?.length > 0 && this._overlayReady ? d`<luzmo-overlay
               trigger="trigger@click"
               .placement=${this.placement}
               offset=${this.rotate ? "-100" : "-20"}
@@ -419,14 +404,14 @@ let n = class extends P(F, {
                 language=${this.language}
                 content-language=${this.language}
                 drag-boundary=${this.dragBoundary}
-                slot-type=${(r = this.slotConfiguration) == null ? void 0 : r.type}
+                slot-type=${this.slotConfiguration?.type}
                 slot-name=${this.slotName}
                 item-type=${this.itemType}
-                .areGrandTotalsEnabled=${(a = (s = this.slotConfiguration) == null ? void 0 : s.options) == null ? void 0 : a.areGrandTotalsEnabled}
-                .areDatetimeOptionsEnabled=${(i = (p = this.slotConfiguration) == null ? void 0 : p.options) == null ? void 0 : i.areDatetimeOptionsEnabled}
-                .isBinningDisabled=${(m = (d = this.slotConfiguration) == null ? void 0 : d.options) == null ? void 0 : m.isBinningDisabled}
-                .isAggregationDisabled=${(b = (u = this.slotConfiguration) == null ? void 0 : u.options) == null ? void 0 : b.isAggregationDisabled}
-                .isCumulativeSumEnabled=${(_ = (z = this.slotConfiguration) == null ? void 0 : z.options) == null ? void 0 : _.isCumulativeSumEnabled}
+                .areGrandTotalsEnabled=${this.slotConfiguration?.options?.areGrandTotalsEnabled}
+                .areDatetimeOptionsEnabled=${this.slotConfiguration?.options?.areDatetimeOptionsEnabled}
+                .isBinningDisabled=${this.slotConfiguration?.options?.isBinningDisabled}
+                .isAggregationDisabled=${this.slotConfiguration?.options?.isAggregationDisabled}
+                .isCumulativeSumEnabled=${this.slotConfiguration?.options?.isCumulativeSumEnabled}
                 slot-contents=${this._slotContents}
                 variant=${this.menu === "draggable" ? "draggable" : "popup"}
                 .size=${this.size}
@@ -438,19 +423,19 @@ let n = class extends P(F, {
             </luzmo-overlay>` : ""}
       </div>
     `;
-    return this.rotate ? g`<div class="droppable-slot-wrapper">${o}</div>` : o;
+    return this.rotate ? d`<div class="droppable-slot-wrapper">${o}</div>` : o;
   }
   render() {
     return this.slotConfiguration && Object.keys(this.slotConfiguration).length > 0 ? this.droppableSlotMarkup() : this._loadSlotsConfig.render({
-      pending: () => g`<p>Loading...</p>`,
+      pending: () => d`<p>Loading...</p>`,
       complete: (o) => {
         if (this.slotName && this.itemType && o) {
-          const e = o.find((t) => t.name === this.slotName);
-          e && (this.slotConfiguration = e);
+          const t = o.find((e) => e.name === this.slotName);
+          t && (this.slotConfiguration = t);
         }
         return this.droppableSlotMarkup();
       },
-      error: (o) => g`
+      error: (o) => d`
         <div>
           Could not load droppable slot: '${this.slotName}' of chart
           '${this.itemType}': ${o}.
@@ -459,68 +444,68 @@ let n = class extends P(F, {
     });
   }
 };
-n.styles = U(X);
-c([
-  h({ type: String, reflect: !0, attribute: "item-type" })
-], n.prototype, "itemType", 2);
-c([
-  h({ type: String, reflect: !0, attribute: "slot-name" })
-], n.prototype, "slotName", 2);
-c([
-  h({ type: Object })
-], n.prototype, "slotConfiguration", 2);
-c([
-  h({ type: Object })
-], n.prototype, "slotsContents", 2);
-c([
-  h({ type: String, reflect: !0 })
-], n.prototype, "label", 2);
-c([
-  h({ type: String, reflect: !0 })
-], n.prototype, "language", 2);
-c([
-  h({ type: String, reflect: !0, attribute: "drag-boundary" })
-], n.prototype, "dragBoundary", 2);
-c([
-  h({ type: Boolean, reflect: !0 })
-], n.prototype, "rotate", 2);
-c([
-  h({ type: String, attribute: "api-url", reflect: !0 })
-], n.prototype, "apiUrl", 2);
-c([
-  h({ type: String, attribute: "auth-key", reflect: !0 })
-], n.prototype, "authKey", 2);
-c([
-  h({ type: String, attribute: "auth-token", reflect: !0 })
-], n.prototype, "authToken", 2);
-c([
-  h({ type: String, reflect: !0 })
-], n.prototype, "menu", 2);
-c([
-  h({ type: String, reflect: !0 })
-], n.prototype, "placement", 2);
-c([
-  h({ type: Boolean, reflect: !0, attribute: "hide-delete" })
-], n.prototype, "hideDelete", 2);
-c([
-  h({ type: Boolean, reflect: !0, attribute: "hide-configuration" })
-], n.prototype, "hideConfiguration", 2);
-c([
-  k("luzmo-slot-menu")
-], n.prototype, "_slotMenuElement", 2);
-c([
-  k("luzmo-overlay")
-], n.prototype, "_overlayElement", 2);
-c([
-  A()
-], n.prototype, "_slotContents", 2);
-c([
-  A()
-], n.prototype, "_overlayReady", 2);
-n = c([
+s.styles = O(j);
+a([
+  n({ type: String, reflect: !0, attribute: "item-type" })
+], s.prototype, "itemType", 2);
+a([
+  n({ type: String, reflect: !0, attribute: "slot-name" })
+], s.prototype, "slotName", 2);
+a([
+  n({ type: Object })
+], s.prototype, "slotConfiguration", 2);
+a([
+  n({ type: Object })
+], s.prototype, "slotsContents", 2);
+a([
+  n({ type: String, reflect: !0 })
+], s.prototype, "label", 2);
+a([
+  n({ type: String, reflect: !0 })
+], s.prototype, "language", 2);
+a([
+  n({ type: String, reflect: !0, attribute: "drag-boundary" })
+], s.prototype, "dragBoundary", 2);
+a([
+  n({ type: Boolean, reflect: !0 })
+], s.prototype, "rotate", 2);
+a([
+  n({ type: String, attribute: "api-url", reflect: !0 })
+], s.prototype, "apiUrl", 2);
+a([
+  n({ type: String, attribute: "auth-key", reflect: !0 })
+], s.prototype, "authKey", 2);
+a([
+  n({ type: String, attribute: "auth-token", reflect: !0 })
+], s.prototype, "authToken", 2);
+a([
+  n({ type: String, reflect: !0 })
+], s.prototype, "menu", 2);
+a([
+  n({ type: String, reflect: !0 })
+], s.prototype, "placement", 2);
+a([
+  n({ type: Boolean, reflect: !0, attribute: "hide-delete" })
+], s.prototype, "hideDelete", 2);
+a([
+  n({ type: Boolean, reflect: !0, attribute: "hide-configuration" })
+], s.prototype, "hideConfiguration", 2);
+a([
+  _("luzmo-slot-menu")
+], s.prototype, "_slotMenuElement", 2);
+a([
+  _("luzmo-overlay")
+], s.prototype, "_overlayElement", 2);
+a([
+  x()
+], s.prototype, "_slotContents", 2);
+a([
+  x()
+], s.prototype, "_overlayReady", 2);
+s = a([
   S()
-], n);
-customElements.get("luzmo-droppable-slot") || customElements.define("luzmo-droppable-slot", n);
+], s);
+customElements.get("luzmo-droppable-slot") || customElements.define("luzmo-droppable-slot", s);
 export {
-  n as LuzmoDroppableSlot
+  s as LuzmoDroppableSlot
 };