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

package/components/slot-menu/index.js

@@ -18,16 +18,16 @@
  * SOFTWARE.
  * */
 import "@luzmo/lucero/divider";
-import { unsafeCSS as P, html as y } from "lit";
-import { s as A } from "../index-Do7O9azB.js";
+import { unsafeCSS as P, html as p } from "lit";
+import { s as A } from "../index-CqKpf0B8.js";
 import { SignalWatcher as M } from "@lit-labs/signals";
 import { consume as R } from "@lit/context";
-import { luzmoIcon as I, luzmoArrows as X, luzmoTrashOutline as q, luzmoClose12 as N } from "@luzmo/icons";
-import { d as _ } from "../index-CDi4fe3N.js";
-import { l as Y } from "../localize-BX7q0S0M.js";
-import { property as a, state as $, query as L } from "lit/decorators.js";
+import { luzmoIcon as _, luzmoArrows as X, luzmoTrashOutline as q, luzmoClose12 as N } from "@luzmo/icons";
+import { d as g } from "../index-DNPULp4A.js";
+import { l as Y } from "../localize-CcDpq940.js";
+import { property as n, state as k, query as T } from "lit/decorators.js";
 import { guard as H } from "lit/directives/guard.js";
-import { L as G } from "../focusable-DCIFkpiW.js";
+import { L as G } from "../focusable-BS2pbY7w.js";
 import { S as K, E as F } from "../sized-mixin-cJbo3PKR.js";
 import "../slot-menu-list/index.js";
 (function() {
@@ -37,63 +37,62 @@ import "../slot-menu-list/index.js";
   }
 })();
 const W = /^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-8][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000|ffffffff-ffff-ffff-ffff-ffffffffffff)$/i;
-function j(u) {
-  return typeof u == "string" && W.test(u);
+function j(i) {
+  return typeof i == "string" && W.test(i);
 }
 function V({
-  element: u,
+  element: i,
   handle: o,
-  boundary: n = document.documentElement,
-  onDragStart: t,
-  onDragEnd: r
+  boundary: r = document.documentElement,
+  onDragStart: u,
+  onDragEnd: a
 }) {
-  if (!u || !o)
+  if (!i || !o)
     throw new Error("makeDraggable: element and handle are required");
-  const s = u.ownerDocument ?? document;
-  let i = -1, c = 0, m = 0, x = 0, z = 0, p = 0, h = 0, v = 0, C = 0;
-  const k = (d) => {
-    if (d.pointerId !== i) return;
-    const b = d.clientX - c, w = d.clientY - m, g = (n ?? document.documentElement).getBoundingClientRect();
-    let f = x + b, E = z + w;
-    f = Math.min(
-      Math.max(f, g.left),
-      g.right - p
-    ), E = Math.min(
-      Math.max(E, g.top),
-      g.bottom - h
+  const l = i.ownerDocument ?? document;
+  let s = -1, S = 0, E = 0, v = 0, z = 0, I = 0, D = 0, b = 0, f = 0;
+  const y = (m) => {
+    if (m.pointerId !== s) return;
+    const c = m.clientX - S, h = m.clientY - E, d = (r ?? document.documentElement).getBoundingClientRect();
+    let w = v + c, C = z + h;
+    w = Math.min(
+      Math.max(w, d.left),
+      d.right - I
+    ), C = Math.min(
+      Math.max(C, d.top),
+      d.bottom - D
     );
-    const D = f - x, U = E - z, B = v + D, O = C + U;
-    u.style.transform = `translate3d(${B}px, ${O}px, 0)`;
-  }, S = (d) => {
-    d.pointerId === i && (s.removeEventListener("pointermove", k), s.removeEventListener("pointerup", S), i = -1, r == null || r());
-  }, T = (d) => {
-    var w;
-    if (d.button !== 0) return;
-    i = d.pointerId;
-    const b = u.getBoundingClientRect();
-    x = b.left, z = b.top, p = b.width, h = b.height, c = d.clientX, m = d.clientY;
+    const L = w - v, U = C - z, B = b + L, O = f + U;
+    i.style.transform = `translate3d(${B}px, ${O}px, 0)`;
+  }, x = (m) => {
+    m.pointerId === s && (l.removeEventListener("pointermove", y), l.removeEventListener("pointerup", x), s = -1, a?.());
+  }, $ = (m) => {
+    if (m.button !== 0) return;
+    s = m.pointerId;
+    const c = i.getBoundingClientRect();
+    v = c.left, z = c.top, I = c.width, D = c.height, S = m.clientX, E = m.clientY;
     try {
-      const g = (w = s.defaultView) == null ? void 0 : w.getComputedStyle(u);
-      if (g) {
-        const f = new DOMMatrixReadOnly(g.transform);
-        v = f.m41, C = f.m42;
+      const h = l.defaultView?.getComputedStyle(i);
+      if (h) {
+        const d = new DOMMatrixReadOnly(h.transform);
+        b = d.m41, f = d.m42;
       }
     } catch {
-      v = 0, C = 0;
+      b = 0, f = 0;
     }
-    o.setPointerCapture(i), s.addEventListener("pointermove", k), s.addEventListener("pointerup", S), t == null || t();
+    o.setPointerCapture(s), l.addEventListener("pointermove", y), l.addEventListener("pointerup", x), u?.();
   };
-  return o.addEventListener("pointerdown", T), () => {
-    o.removeEventListener("pointerdown", T), s.removeEventListener("pointermove", k), s.removeEventListener("pointerup", S);
+  return o.addEventListener("pointerdown", $), () => {
+    o.removeEventListener("pointerdown", $), l.removeEventListener("pointermove", y), l.removeEventListener("pointerup", x);
   };
 }
 const J = ":host{font-family:var(--luzmo-slot-menu-font-family, var(--luzmo-font-family));font-size:var(--luzmo-slot-menu-font-size, var(--slot-menu-font-size));color:var(--luzmo-slot-menu-font-color, var(--luzmo-font-color));display:block;width:fit-content}luzmo-slot-menu-list{min-width:var(--luzmo-slot-menu-list-min-width, var(--slot-menu-list-min-width));max-width:var(--luzmo-slot-menu-list-max-width, var(--slot-menu-list-max-width));background-color:var(--luzmo-slot-menu-list-background-color, var(--slot-menu-list-background-color));border-bottom-left-radius:var(--luzmo-slot-menu-list-border-radius, var(--slot-menu-list-border-radius))}.slot-contents-container{position:relative;border:var(--luzmo-slot-menu-border-width, var(--luzmo-border-width)) solid var(--luzmo-slot-menu-border-color, var(--luzmo-border-color));border-radius:var(--luzmo-slot-menu-border-radius, var(--luzmo-border-radius));background:var(--luzmo-slot-menu-background-color, var(--luzmo-background-color));box-shadow:var(--luzmo-slot-menu-popup-shadow-horizontal, var(--slot-menu-popup-shadow-horizontal)) var(--luzmo-slot-menu-popup-shadow-vertical, var(--slot-menu-popup-shadow-vertical)) var(--luzmo-slot-menu-popup-shadow-blur, var(--slot-menu-popup-shadow-blur)) var(--luzmo-slot-menu-popup-shadow-color, var(--slot-menu-popup-shadow-color));border-top-left-radius:0}.slot-contents-container .inner-container{display:flex}.slot-contents-container .inner-container luzmo-display-settings{min-width:var(--luzmo-slot-menu-display-settings-min-width, var(--slot-menu-display-settings-min-width));padding:var(--luzmo-slot-menu-display-settings-vertical-padding, var(--slot-menu-display-settings-vertical-padding)) var(--luzmo-slot-menu-display-settings-horizontal-padding, var(--slot-menu-display-settings-horizontal-padding))}:host([variant=popup]) .slot-contents-container{overflow:hidden;border-top-left-radius:var(--luzmo-slot-menu-border-radius, var(--luzmo-border-radius));--slot-menu-popup-filter: drop-shadow( var( --luzmo-slot-menu-popup-shadow-horizontal, var(--slot-menu-popup-shadow-horizontal) ) var( --luzmo-slot-menu-popup-shadow-vertical, var(--slot-menu-popup-shadow-vertical) ) var( --luzmo-slot-menu-popup-shadow-blur, var(--slot-menu-popup-shadow-blur) ) var( --luzmo-slot-menu-popup-shadow-color, var(--slot-menu-popup-shadow-color) ) );filter:var(--luzmo-slot-menu-popup-filter, var(--slot-menu-popup-filter))}.slot-menu-top-menu{display:flex;align-items:center;border-radius:var(--luzmo-slot-menu-border-radius, var(--luzmo-border-radius));border-bottom-left-radius:0;border-bottom-right-radius:0;overflow:hidden;width:fit-content}.drag-handle{background-color:var(--luzmo-slot-menu-drag-handle-background-color, var(--luzmo-background-color-highlight));cursor:move;width:fit-content;border:var(--luzmo-slot-menu-drag-handle-border-width, var(--slot-menu-drag-handle-border-width)) solid var(--luzmo-slot-menu-border-color, var(--luzmo-background-color-highlight));font-size:var(--luzmo-slot-menu-drag-handle-size, var(--slot-menu-drag-handle-size));padding:var(--luzmo-slot-menu-drag-handle-vertical-padding, var(--slot-menu-drag-handle-vertical-padding)) var(--luzmo-slot-menu-drag-handle-horizontal-padding, var(--slot-menu-drag-handle-horizontal-padding))}.drag-handle:hover{background-color:var(--luzmo-slot-menu-drag-handle-background-color-hover, var(--luzmo-background-color-highlight-hover))}.slot-content-action{display:flex;flex:0 1 auto;max-width:var(--luzmo-slot-menu-top-menu-label-max-width, var(--slot-menu-top-menu-label-max-width));gap:var(--luzmo-slot-menu-label-to-icon-gap, var(--slot-menu-label-to-icon-gap));background-color:var(--luzmo-slot-menu-content-label-background-color, var(--luzmo-primary));color:var(--luzmo-slot-menu-content-label-color, var(--luzmo-primary-inverse-color));border:var(--luzmo-slot-menu-border-width, var(--luzmo-border-width)) solid var(--luzmo-slot-menu-content-label-border-color, var(--luzmo-primary));padding:var(--luzmo-slot-menu-drag-handle-vertical-padding, var(--slot-menu-drag-handle-vertical-padding)) var(--luzmo-slot-menu-drag-handle-horizontal-padding, var(--slot-menu-drag-handle-horizontal-padding))}.slot-content-action:hover{background-color:var(--luzmo-slot-menu-content-label-background-color-hover, var(--luzmo-primary-hover))}.slot-content-action:focus{background-color:var(--luzmo-slot-menu-content-label-background-color-focus, var(--luzmo-primary-focus))}.slot-content-action .slot-content-label{flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.slot-content-action .slot-content-remove{flex:0 0 auto;cursor:pointer}.close{position:absolute;right:var(--luzmo-slot-menu-close-icon-right, var(--slot-menu-close-icon-right));cursor:pointer;top:calc(-2 * var(--luzmo-slot-menu-border-width, var(--luzmo-border-width)));background-color:var(--luzmo-slot-menu-close-button-background-color, var(--luzmo-background-color-highlight));font-size:var(--luzmo-slot-menu-close-button-size, var(--slot-menu-close-button-size));border:var(--luzmo-slot-menu-border-width, var(--luzmo-border-width)) solid var(--luzmo-slot-menu-border-color, var(--luzmo-border-color));border-radius:var(--luzmo-slot-menu-border-radius, var(--luzmo-border-radius));border-top-left-radius:0;border-top-right-radius:0;padding:var(--luzmo-slot-menu-close-button-vertical-padding, var(--slot-menu-close-button-vertical-padding)) var(--luzmo-slot-menu-close-button-horizontal-padding, var(--slot-menu-close-button-horizontal-padding))}.close:hover{background-color:var(--luzmo-slot-menu-close-button-background-color-hover, var(--luzmo-background-color-highlight-hover))}:host{--slot-menu-display-settings-min-width: 19rem;--slot-menu-min-height: calc(var(--luzmo-component-height) * 2);--slot-menu-font-size: var(--luzmo-font-size);--slot-menu-display-settings-horizontal-padding: var(--luzmo-spacing-5);--slot-menu-display-settings-vertical-padding: var(--luzmo-spacing-4);--slot-menu-top-menu-label-max-width: 12rem;--slot-menu-list-min-width: 8rem;--slot-menu-list-max-width: 12rem;--slot-menu-label-to-icon-gap: var(--luzmo-spacing-3);--slot-menu-drag-handle-size: var(--luzmo-font-size);--slot-menu-drag-handle-vertical-padding: var(--luzmo-spacing-2);--slot-menu-drag-handle-horizontal-padding: var(--luzmo-spacing-3);--slot-menu-drag-handle-border-width: var(--luzmo-border-width) --slot-menu-close-button-size: var(--luzmo-font-size-s);--slot-menu-close-button-vertical-padding: var(--luzmo-spacing-2);--slot-menu-close-button-horizontal-padding: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--slot-menu-popup-shadow-horizontal: 0;--slot-menu-popup-shadow-vertical: 1px;--slot-menu-popup-shadow-blur: 4px;--slot-menu-popup-shadow-color: var(--luzmo-border-color);--slot-menu-popup-box-shadow: var(--slot-menu-popup-shadow-horizontal) var(--slot-menu-popup-shadow-vertical) var(--slot-menu-popup-shadow-blur) var(--slot-menu-popup-shadow-color);--slot-menu-close-icon-right: 1rem;--slot-menu-list-border-radius: var(--luzmo-border-radius)}:host([size=s]){--slot-menu-display-settings-min-width: 16rem;--slot-menu-min-height: calc(var(--luzmo-component-height-s) * 2);--slot-menu-font-size: var(--luzmo-font-size-s);--slot-menu-display-settings-horizontal-padding: var(--luzmo-spacing-4);--slot-menu-display-settings-vertical-padding: var(--luzmo-spacing-3);--slot-menu-top-menu-label-max-width: 10rem;--slot-menu-list-min-width: 6rem;--slot-menu-list-max-width: 10rem;--slot-menu-label-to-icon-gap: var(--luzmo-spacing-2);--slot-menu-drag-handle-size: var(--luzmo-font-size-s);--slot-menu-drag-handle-vertical-padding: var(--luzmo-spacing-2);--slot-menu-drag-handle-horizontal-padding: var(--luzmo-spacing-3);--slot-menu-close-button-size: var(--luzmo-font-size-xs);--slot-menu-close-button-vertical-padding: var(--luzmo-spacing-2);--slot-menu-close-button-horizontal-padding: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) )}:host([size=l]){--slot-menu-display-settings-min-width: 23rem;--slot-menu-min-height: calc(var(--luzmo-component-height-l) * 2);--slot-menu-font-size: var(--luzmo-font-size-l);--slot-menu-display-settings-horizontal-padding: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--slot-menu-display-settings-vertical-padding: var(--luzmo-spacing-5);--slot-menu-top-menu-label-max-width: 14rem;--slot-menu-list-min-width: 9rem;--slot-menu-list-max-width: 14rem;--slot-menu-label-to-icon-gap: var(--luzmo-spacing-4);--slot-menu-drag-handle-size: var(--luzmo-font-size-l);--slot-menu-drag-handle-vertical-padding: var(--luzmo-spacing-3);--slot-menu-drag-handle-horizontal-padding: var(--luzmo-spacing-3);--slot-menu-close-button-size: var(--luzmo-font-size);--slot-menu-close-button-vertical-padding: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--slot-menu-close-button-horizontal-padding: var(--luzmo-spacing-3)}:host([size=xl]){--slot-menu-display-settings-min-width: 26rem;--slot-menu-min-height: calc(var(--luzmo-component-height-xl) * 2);--slot-menu-font-size: var(--luzmo-font-size-xl);--slot-menu-display-settings-horizontal-padding: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-2) );--slot-menu-display-settings-vertical-padding: var(--luzmo-spacing-5);--slot-menu-top-menu-label-max-width: 16rem;--slot-menu-list-min-width: 10rem;--slot-menu-list-max-width: 16rem;--slot-menu-label-to-icon-gap: var(--luzmo-spacing-5);--slot-menu-drag-handle-size: var(--luzmo-font-size-xl);--slot-menu-drag-handle-vertical-padding: var(--luzmo-spacing-3);--slot-menu-drag-handle-horizontal-padding: var(--luzmo-spacing-4);--slot-menu-close-button-size: var(--luzmo-font-size-l);--slot-menu-close-button-vertical-padding: var(--luzmo-spacing-3);--slot-menu-close-button-horizontal-padding: var(--luzmo-spacing-3)}";
-var Q = Object.defineProperty, l = (u, o, n, t) => {
-  for (var r = void 0, s = u.length - 1, i; s >= 0; s--)
-    (i = u[s]) && (r = i(o, n, r) || r);
-  return r && Q(o, n, r), r;
+var Q = Object.defineProperty, e = (i, o, r, u) => {
+  for (var a = void 0, l = i.length - 1, s; l >= 0; l--)
+    (s = i[l]) && (a = s(o, r, a) || a);
+  return a && Q(o, r, a), a;
 };
-class e extends M(
+class t extends M(
   K(G, {
     validSizes: Object.values(F)
   })
@@ -115,7 +114,7 @@ class e extends M(
   }
   connectedCallback() {
     const o = {};
-    this.apiUrl && (o.apiUrl = this.apiUrl), this.authKey && this.authToken && (o.authKey = this.authKey, o.authToken = this.authToken), _.configure(o), super.connectedCallback(), this._attachDragHandle();
+    this.apiUrl && (o.apiUrl = this.apiUrl), this.authKey && this.authToken && (o.authKey = this.authKey, o.authToken = this.authToken), g.configure(o), super.connectedCallback(), this._attachDragHandle();
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this._cleanupDrag && (this._cleanupDrag(), this._cleanupDrag = void 0);
@@ -128,11 +127,11 @@ class e extends M(
       return;
     const o = this.renderRoot.querySelector(".drag-handle");
     if (!o) return;
-    const n = this.dragBoundary ? document.querySelector(this.dragBoundary) : document.documentElement;
+    const r = this.dragBoundary ? document.querySelector(this.dragBoundary) : document.documentElement;
     this._cleanupDrag = V({
       element: this,
       handle: o,
-      boundary: n
+      boundary: r
     });
   }
   _sendChangeEvent() {
@@ -161,50 +160,44 @@ class e extends M(
     return o.startsWith("array[");
   }
   async willUpdate() {
-    var n, t, r, s, i, c;
-    const o = this.slotContents ?? ((n = this._store) == null ? void 0 : n.slotContents.get()) ?? [];
+    const o = this.slotContents ?? this._store?.slotContents.get() ?? [];
     if (o !== this._slotContents) {
       this._slotContents = structuredClone(o);
-      const { set: m, column: x } = this._currentSlotContent;
-      if (m && j(m) && m !== this._lastFetchedDatasetId) {
-        if (this._lastFetchedDatasetId = m, await _.fetchDatasetsRecursive([m]), !this.isConnected)
+      const { set: r, column: u } = this._currentSlotContent;
+      if (r && j(r) && r !== this._lastFetchedDatasetId) {
+        if (this._lastFetchedDatasetId = r, await g.fetchDatasetsRecursive([r]), !this.isConnected)
           return;
-        this._linkedDatasetsIds = _.getLinkedDatasetsIds(m);
+        this._linkedDatasetsIds = g.getLinkedDatasetsIds(r);
       }
-      const z = _.getAvailableDatasets();
-      this.measureColumns = z.map((p) => {
-        var h;
-        return {
-          datasetId: p.id,
-          datasetName: p.name,
-          columns: (h = p.columns) == null ? void 0 : h.filter(
-            (v) => v.type === "numeric" && v.id !== x
-          )
-        };
-      }), ((t = this._store) == null ? void 0 : t.activeIndex.get()) !== this._activeIndex && ((r = this._store) == null || r.updateActive(this._activeIndex)), this.slotName === "measure" && ((s = this._store) == null || s.setPeriodOverPeriodCondition(
+      const a = g.getAvailableDatasets();
+      this.measureColumns = a.map((l) => ({
+        datasetId: l.id,
+        datasetName: l.name,
+        columns: l.columns?.filter(
+          (s) => s.type === "numeric" && s.id !== u
+        )
+      })), this._store?.activeIndex.get() !== this._activeIndex && this._store?.updateActive(this._activeIndex), this.slotName === "measure" && (this._store?.setPeriodOverPeriodCondition(
         this.itemType,
         this._currentSlotContent
-      ), this._currentSlotContent.subtype === "duration" && this.isArrayColumnType(this._currentSlotContent.type) ? this._periodOverPeriodUiType = null : (this._periodOverPeriodUiType = (i = this._store) == null ? void 0 : i.periodOverPeriodUiType.get(), (c = this._store) == null || c.linkedDataset.set(
-        z.filter((h) => h.id === m)
+      ), this._currentSlotContent.subtype === "duration" && this.isArrayColumnType(this._currentSlotContent.type) ? this._periodOverPeriodUiType = null : (this._periodOverPeriodUiType = this._store?.periodOverPeriodUiType.get(), this._store?.linkedDataset.set(
+        a.filter((s) => s.id === r)
       )));
     }
   }
   updated() {
-    var o;
-    this.displaySettingsElement && (this.displaySettingsElement.periodOverPeriodUiType = this._periodOverPeriodUiType, this.displaySettingsElement.measureColumns = this.measureColumns, this.displaySettingsElement.showRemoveButton = this.variant === "popup" && (typeof this.slotIndex == "number" || ((o = this._slotContents) == null ? void 0 : o.length) === 1));
+    this.displaySettingsElement && (this.displaySettingsElement.periodOverPeriodUiType = this._periodOverPeriodUiType, this.displaySettingsElement.measureColumns = this.measureColumns, this.displaySettingsElement.showRemoveButton = this.variant === "popup" && (typeof this.slotIndex == "number" || this._slotContents?.length === 1));
   }
   _handleSlotListChange(o) {
-    var c, m;
     this._slotContents = structuredClone(o.detail.slotContents);
-    const n = o.detail.activeIndex;
-    n !== this._activeIndex && (this._activeIndex = n, (c = this._store) == null || c.updateActive(n));
-    const t = this._slotContents[this._activeIndex], r = (t == null ? void 0 : t.column) ?? (t == null ? void 0 : t.columnId), s = (t == null ? void 0 : t.set) ?? (t == null ? void 0 : t.datasetId), i = t == null ? void 0 : t.formula;
-    (r || i) && s && (this.dispatchEvent(
+    const r = o.detail.activeIndex;
+    r !== this._activeIndex && (this._activeIndex = r, this._store?.updateActive(r));
+    const u = this._slotContents[this._activeIndex], a = u?.column ?? u?.columnId, l = u?.set ?? u?.datasetId, s = u?.formula;
+    (a || s) && l && (this.dispatchEvent(
       new CustomEvent("slot-menu-active", {
         bubbles: !0,
         composed: !0,
         detail: {
-          datasetId: s
+          datasetId: l
         }
       })
     ), setTimeout(() => {
@@ -213,30 +206,28 @@ class e extends M(
           bubbles: !0,
           composed: !0,
           detail: {
-            datasetId: s,
-            level: (t == null ? void 0 : t.level) ?? 0,
-            ...r && { columnId: r },
-            ...i && { formulaId: i }
+            datasetId: l,
+            level: u?.level ?? 0,
+            ...a && { columnId: a },
+            ...s && { formulaId: s }
           }
         })
       );
-    })), this._slotContents.length <= 1 && this.requestUpdate(), (m = this._store) == null || m.setContents(this._slotContents, this.slotName), this._sendChangeEvent();
+    })), this._slotContents.length <= 1 && this.requestUpdate(), this._store?.setContents(this._slotContents, this.slotName), this._sendChangeEvent();
   }
   _handleSlotContentChange(o) {
-    var n;
     this._slotContents[this.slotIndex ?? this._activeIndex] = structuredClone(
       o.detail.slotContent
-    ), this.slotMenuListElement && (this.slotMenuListElement.slotContents = this._slotContents), (n = this._store) == null || n.updateContent(
+    ), this.slotMenuListElement && (this.slotMenuListElement.slotContents = this._slotContents), this._store?.updateContent(
       o.detail.slotContent,
       this.slotIndex ?? this._activeIndex
     ), this._sendChangeEvent();
   }
   // Removed updateContentLabel method (label updates are handled inline)
   removeSlotContent(o) {
-    var n;
     this._slotContents = this._slotContents.filter(
-      (t, r) => r !== o
-    ), (n = this._store) == null || n.setContents(this._slotContents, this.slotName), this._slotContents.length === 0 && this.dispatchEvent(
+      (r, u) => u !== o
+    ), this._store?.setContents(this._slotContents, this.slotName), this._slotContents.length === 0 && this.dispatchEvent(
       new CustomEvent("slot-menu-inactive", {
         bubbles: !0,
         composed: !0
@@ -250,28 +241,27 @@ class e extends M(
     this.removeSlotContent(this.slotIndex ?? this._activeIndex);
   }
   render() {
-    var n, t, r;
-    const o = `${this.slotType}-${((n = this._currentSlotContent) == null ? void 0 : n.type) ?? ""}`;
-    return y`<div class="slot-menu-top-menu">
-        ${this.variant === "draggable" ? y`<div class="drag-handle">${I(X)}</div>` : ""}
-        ${this._slotContents && this._slotContents.length === 1 && this.variant !== "popup" ? y` <div class="slot-content-action">
+    const o = `${this.slotType}-${this._currentSlotContent?.type ?? ""}`;
+    return p`<div class="slot-menu-top-menu">
+        ${this.variant === "draggable" ? p`<div class="drag-handle">${_(X)}</div>` : ""}
+        ${this._slotContents && this._slotContents.length === 1 && this.variant !== "popup" ? p` <div class="slot-content-action">
               <div class="slot-content-label">${this._currentLabel}</div>
               <div
                 class="slot-content-remove"
                 @click=${this.removeSlotContent.bind(this, 0)}
               >
-                ${I(q)}
+                ${_(q)}
               </div>
             </div>` : ""}
       </div>
       <div
-        class="slot-contents-container ${((t = this._slotContents) == null ? void 0 : t.length) > 1 ? "multiple" : ""}"
+        class="slot-contents-container ${this._slotContents?.length > 1 ? "multiple" : ""}"
       >
-        ${this.variant === "popup" ? "" : y`<div class="close" @click=${this.close}>
-              ${I(N)}
+        ${this.variant === "popup" ? "" : p`<div class="close" @click=${this.close}>
+              ${_(N)}
             </div>`}
         <div class="inner-container">
-          ${((r = this._slotContents) == null ? void 0 : r.length) > 1 && typeof this.slotIndex != "number" ? y`<luzmo-slot-menu-list
+          ${this._slotContents?.length > 1 && typeof this.slotIndex != "number" ? p`<luzmo-slot-menu-list
                 .slotContents=${this._slotContents}
                 .contentLanguage=${this.contentLanguage}
                 .activeIndex=${this.slotIndex ?? this._activeIndex}
@@ -285,15 +275,13 @@ class e extends M(
         this._periodOverPeriodUiType,
         o
       ],
-      () => {
-        var s;
-        return y`<luzmo-display-settings
+      () => p`<luzmo-display-settings
                 .size=${this.size}
                 .language=${this.language}
                 .contentLanguage=${this.contentLanguage}
                 .slotType=${this.slotType}
                 .measureColumns=${this.measureColumns}
-                .showRemoveButton=${this.variant === "popup" && (typeof this.slotIndex == "number" || ((s = this._slotContents) == null ? void 0 : s.length) === 1)}
+                .showRemoveButton=${this.variant === "popup" && (typeof this.slotIndex == "number" || this._slotContents?.length === 1)}
                 .slotContent=${this._currentSlotContent}
                 .areGrandTotalsEnabled=${this.areGrandTotalsEnabled}
                 .areDatetimeOptionsEnabled=${this.areDatetimeOptionsEnabled}
@@ -302,8 +290,7 @@ class e extends M(
                 .isCumulativeSumEnabled=${this.isCumulativeSumEnabled}
                 @slot-content-changed=${this._handleSlotContentChange}
                 @remove-slot-content=${this._removeActiveSlotContent}
-              ></luzmo-display-settings>`;
-      }
+              ></luzmo-display-settings>`
     )}
         </div>
       </div>`;
@@ -318,85 +305,85 @@ class e extends M(
     this.style.transform = "";
   }
 }
-l([
-  a({ type: String, reflect: !0 })
-], e.prototype, "language");
-l([
-  a({ type: String, attribute: "content-language", reflect: !0 })
-], e.prototype, "contentLanguage");
-l([
-  a({ type: String, attribute: "slot-type", reflect: !0 })
-], e.prototype, "slotType");
-l([
-  a({ type: String, attribute: "slot-name", reflect: !0 })
-], e.prototype, "slotName");
-l([
-  a({ type: String, attribute: "item-type", reflect: !0 })
-], e.prototype, "itemType");
-l([
-  a({ type: Boolean, attribute: "no-drag", reflect: !0 })
-], e.prototype, "noDrag");
-l([
-  a({ type: Boolean, attribute: "no-close", reflect: !0 })
-], e.prototype, "noClose");
-l([
-  a({ type: String, reflect: !0 })
-], e.prototype, "variant");
-l([
-  a({ type: Boolean, attribute: "no-top-menu-label", reflect: !0 })
-], e.prototype, "noTopMenuLabel");
-l([
+e([
+  n({ type: String, reflect: !0 })
+], t.prototype, "language");
+e([
+  n({ type: String, attribute: "content-language", reflect: !0 })
+], t.prototype, "contentLanguage");
+e([
+  n({ type: String, attribute: "slot-type", reflect: !0 })
+], t.prototype, "slotType");
+e([
+  n({ type: String, attribute: "slot-name", reflect: !0 })
+], t.prototype, "slotName");
+e([
+  n({ type: String, attribute: "item-type", reflect: !0 })
+], t.prototype, "itemType");
+e([
+  n({ type: Boolean, attribute: "no-drag", reflect: !0 })
+], t.prototype, "noDrag");
+e([
+  n({ type: Boolean, attribute: "no-close", reflect: !0 })
+], t.prototype, "noClose");
+e([
+  n({ type: String, reflect: !0 })
+], t.prototype, "variant");
+e([
+  n({ type: Boolean, attribute: "no-top-menu-label", reflect: !0 })
+], t.prototype, "noTopMenuLabel");
+e([
   R({ context: A, subscribe: !0 })
-], e.prototype, "_store");
-l([
-  a({ type: String, attribute: "drag-boundary", reflect: !1 })
-], e.prototype, "dragBoundary");
-l([
-  a({ type: Boolean })
-], e.prototype, "areGrandTotalsEnabled");
-l([
-  a({ type: Boolean })
-], e.prototype, "areDatetimeOptionsEnabled");
-l([
-  a({ type: Boolean })
-], e.prototype, "isBinningDisabled");
-l([
-  a({ type: Boolean })
-], e.prototype, "isAggregationDisabled");
-l([
-  a({ type: Boolean })
-], e.prototype, "isCumulativeSumEnabled");
-l([
-  a({ type: Array, reflect: !1, attribute: "slot-contents" })
-], e.prototype, "slotContents");
-l([
-  $()
-], e.prototype, "_periodOverPeriodUiType");
-l([
-  $()
-], e.prototype, "measureColumns");
-l([
-  a({ type: Number, reflect: !1, attribute: "slot-index" })
-], e.prototype, "slotIndex");
-l([
-  L("luzmo-display-settings")
-], e.prototype, "displaySettingsElement");
-l([
-  L("luzmo-slot-menu-list")
-], e.prototype, "slotMenuListElement");
-l([
-  a({ type: String, attribute: "api-url", reflect: !0 })
-], e.prototype, "apiUrl");
-l([
-  a({ type: String, attribute: "auth-key", reflect: !0 })
-], e.prototype, "authKey");
-l([
-  a({ type: String, attribute: "auth-token", reflect: !0 })
-], e.prototype, "authToken");
-l([
-  $()
-], e.prototype, "_slotContents");
-customElements.get("luzmo-slot-menu") || customElements.define("luzmo-slot-menu", e);
+], t.prototype, "_store");
+e([
+  n({ type: String, attribute: "drag-boundary", reflect: !1 })
+], t.prototype, "dragBoundary");
+e([
+  n({ type: Boolean })
+], t.prototype, "areGrandTotalsEnabled");
+e([
+  n({ type: Boolean })
+], t.prototype, "areDatetimeOptionsEnabled");
+e([
+  n({ type: Boolean })
+], t.prototype, "isBinningDisabled");
+e([
+  n({ type: Boolean })
+], t.prototype, "isAggregationDisabled");
+e([
+  n({ type: Boolean })
+], t.prototype, "isCumulativeSumEnabled");
+e([
+  n({ type: Array, reflect: !1, attribute: "slot-contents" })
+], t.prototype, "slotContents");
+e([
+  k()
+], t.prototype, "_periodOverPeriodUiType");
+e([
+  k()
+], t.prototype, "measureColumns");
+e([
+  n({ type: Number, reflect: !1, attribute: "slot-index" })
+], t.prototype, "slotIndex");
+e([
+  T("luzmo-display-settings")
+], t.prototype, "displaySettingsElement");
+e([
+  T("luzmo-slot-menu-list")
+], t.prototype, "slotMenuListElement");
+e([
+  n({ type: String, attribute: "api-url", reflect: !0 })
+], t.prototype, "apiUrl");
+e([
+  n({ type: String, attribute: "auth-key", reflect: !0 })
+], t.prototype, "authKey");
+e([
+  n({ type: String, attribute: "auth-token", reflect: !0 })
+], t.prototype, "authToken");
+e([
+  k()
+], t.prototype, "_slotContents");
+customElements.get("luzmo-slot-menu") || customElements.define("luzmo-slot-menu", t);
 export {
-  e as LuzmoSlotMenu
+  t as LuzmoSlotMenu
 };

package/components/slot-menu/slot-menu.d.ts

@@ -0,0 +1,111 @@
+import '@luzmo/lucero/divider';
+import { CSSResultArray, TemplateResult } from 'lit';
+import './../display-settings';
+import { GenericSlotContent, SlotName, VizItemType } from '@luzmo/dashboard-contents-types';
+import { LuzmoElement } from '../../utils/base';
+import { type LuzmoDisplaySettings } from './../display-settings/display-settings';
+import './../slot-menu-list';
+import { type LuzmoSlotMenuList } from './../slot-menu-list/slot-menu-list';
+import { type MeasureColumnsItem } from './types';
+declare const LuzmoSlotMenu_base: typeof LuzmoElement & {
+    new (...args: any[]): import("../../utils/base/sized-mixin").SizedElementInterface;
+    prototype: import("../../utils/base/sized-mixin").SizedElementInterface;
+};
+/**
+ * @element luzmo-slot-menu
+ * @fires slot-contents-changed - Emitted when the slot contents change
+ * @fires close - Emitted when the slot menu is closed
+ */
+export declare class LuzmoSlotMenu extends LuzmoSlotMenu_base {
+    static get styles(): CSSResultArray;
+    /**
+     * The language of the settings interface
+     */
+    language: string;
+    /**
+     * The language to use for locale-aware formatting and labels
+     */
+    contentLanguage: string;
+    /**
+     * The slot type
+     */
+    slotType?: 'numeric' | 'categorical' | 'mixed';
+    slotName: SlotName;
+    itemType?: VizItemType;
+    /**
+     * Whether to show the drag handle and allow dragging
+     */
+    noDrag?: boolean;
+    /**
+     * Whether to show the close button
+     */
+    noClose?: boolean;
+    /**
+     * The variant to show
+     */
+    variant?: 'popup' | 'draggable' | 'default';
+    /**
+     * Whether to show the top menu label & delete button
+     */
+    noTopMenuLabel?: boolean;
+    private _store;
+    dragBoundary?: string;
+    areGrandTotalsEnabled?: boolean;
+    areDatetimeOptionsEnabled?: boolean;
+    isBinningDisabled?: boolean;
+    isAggregationDisabled?: boolean;
+    isCumulativeSumEnabled?: boolean;
+    slotContents?: GenericSlotContent[];
+    private _periodOverPeriodUiType;
+    measureColumns: MeasureColumnsItem[];
+    /**
+     * (Optional) If you only want to display a specific content of a slot, you can set the slotIndex to the index of the content you want to display.
+     */
+    slotIndex?: number;
+    displaySettingsElement: LuzmoDisplaySettings;
+    slotMenuListElement: LuzmoSlotMenuList;
+    /**
+     * The API URL of the databroker
+     * @default https://api.luzmo.com
+     * @description The URL of the databroker API
+     */
+    apiUrl?: string;
+    /**
+     * The auth key of the databroker
+     */
+    authKey?: string;
+    /**
+     * The auth token of the databroker
+     */
+    authToken?: string;
+    private _slotContents;
+    _activeIndex: number;
+    private _cleanupDrag?;
+    private _linkedDatasetsIds;
+    private _lastFetchedDatasetId?;
+    private get _currentSlotContent();
+    private get _currentLabel();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Helper to attach draggable behaviour to the top-level handle.
+     */
+    private _attachDragHandle;
+    private _sendChangeEvent;
+    private _sendCloseEvent;
+    private isArrayColumnType;
+    protected willUpdate(): Promise<void>;
+    protected updated(): void;
+    private _handleSlotListChange;
+    private _handleSlotContentChange;
+    removeSlotContent(index: number): void;
+    close(): void;
+    _removeActiveSlotContent(): void;
+    protected render(): TemplateResult;
+    protected firstUpdated(): void;
+    /**
+     * Reset the menu position to its original location
+     */
+    resetPosition(): void;
+}
+export {};

package/components/slot-menu/types.d.ts

@@ -0,0 +1,25 @@
+import { GenericSlotContent } from '@luzmo/dashboard-contents-types';
+import { DatasetColumnMetadata } from '@utils/data-broker';
+import type { SlotContentsChangedEventDetail } from '../droppable-slot/types';
+export type { SlotContentsChangedEventDetail } from '../droppable-slot/types';
+export interface MeasureColumnsItem {
+    datasetId: string;
+    datasetName: Record<string, string>;
+    columns: DatasetColumnMetadata[];
+}
+export interface SlotMenuActiveEventDetail {
+    datasetId: string;
+}
+export interface SlotMenuHighlightEventDetail {
+    datasetId: string;
+    level: number;
+    columnId?: string;
+    formulaId?: string;
+}
+export interface SlotContentChangedEventDetail {
+    slotContent: SlotContentsChangedEventDetail['slotContents'][number];
+}
+export interface SlotListChangedEventDetail {
+    slotContents: GenericSlotContent[];
+    activeIndex: number;
+}