@luzmo/analytics-components-kit 1.0.1-alpha.87 → 1.0.1-alpha.90

package/components/slot-menu/index.js

@@ -19,13 +19,13 @@
  * */
 import "@luzmo/lucero/divider";
 import { unsafeCSS as P, html as p } from "lit";
-import { s as A } from "../index-3WsfvkZF.js";
+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 _, luzmoArrows as X, luzmoTrashOutline as q, luzmoClose as N } from "@luzmo/icons";
-import { d as g } from "../index-BGb_wRRW.js";
+import { d as g } from "../index-DNPULp4A.js";
 import { l as Y } from "../localize-CcDpq940.js";
-import { property as r, state as k, query as $ } from "lit/decorators.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-BS2pbY7w.js";
 import { S as K, E as F } from "../sized-mixin-cJbo3PKR.js";
@@ -36,24 +36,24 @@ import "../slot-menu-list/index.js";
     o.setAttribute("data-luzmo-vars", ""), o.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(o);
   }
 })();
-const j = /^(?:[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 V(i) {
-  return typeof i == "string" && j.test(i);
+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(i) {
+  return typeof i == "string" && W.test(i);
 }
-function W({
+function V({
   element: i,
   handle: o,
-  boundary: l = document.documentElement,
+  boundary: r = document.documentElement,
   onDragStart: u,
   onDragEnd: a
 }) {
   if (!i || !o)
     throw new Error("makeDraggable: element and handle are required");
-  const n = i.ownerDocument ?? document;
+  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 = (l ?? document.documentElement).getBoundingClientRect();
+    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),
@@ -65,14 +65,14 @@ function W({
     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 && (n.removeEventListener("pointermove", y), n.removeEventListener("pointerup", x), s = -1, a?.());
-  }, T = (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 h = n.defaultView?.getComputedStyle(i);
+      const h = l.defaultView?.getComputedStyle(i);
       if (h) {
         const d = new DOMMatrixReadOnly(h.transform);
         b = d.m41, f = d.m42;
@@ -80,17 +80,17 @@ function W({
     } catch {
       b = 0, f = 0;
     }
-    o.setPointerCapture(s), n.addEventListener("pointermove", y), n.addEventListener("pointerup", x), u?.();
+    o.setPointerCapture(s), l.addEventListener("pointermove", y), l.addEventListener("pointerup", x), u?.();
   };
-  return o.addEventListener("pointerdown", T), () => {
-    o.removeEventListener("pointerdown", T), n.removeEventListener("pointermove", y), n.removeEventListener("pointerup", x);
+  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, e = (i, o, l, u) => {
-  for (var a = void 0, n = i.length - 1, s; n >= 0; n--)
-    (s = i[n]) && (a = s(o, l, a) || a);
-  return a && Q(o, l, a), a;
+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 t extends M(
   K(G, {
@@ -127,11 +127,11 @@ class t extends M(
       return;
     const o = this.renderRoot.querySelector(".drag-handle");
     if (!o) return;
-    const l = this.dragBoundary ? document.querySelector(this.dragBoundary) : document.documentElement;
-    this._cleanupDrag = W({
+    const r = this.dragBoundary ? document.querySelector(this.dragBoundary) : document.documentElement;
+    this._cleanupDrag = V({
       element: this,
       handle: o,
-      boundary: l
+      boundary: r
     });
   }
   _sendChangeEvent() {
@@ -157,35 +157,30 @@ class t extends M(
     );
   }
   isArrayColumnType(o) {
-    return (/* @__PURE__ */ new Set([
-      "array[numeric]",
-      "array[spatial]",
-      "array[datetime]",
-      "array[hierarchy]"
-    ])).has(o);
+    return o.startsWith("array[");
   }
   async willUpdate() {
     const o = this.slotContents ?? this._store?.slotContents.get() ?? [];
     if (o !== this._slotContents) {
       this._slotContents = structuredClone(o);
-      const { set: l, column: u } = this._currentSlotContent;
-      if (l && V(l) && l !== this._lastFetchedDatasetId) {
-        if (this._lastFetchedDatasetId = l, await g.fetchDatasetsRecursive([l]), !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 = g.getLinkedDatasetsIds(l);
+        this._linkedDatasetsIds = g.getLinkedDatasetsIds(r);
       }
       const a = g.getAvailableDatasets();
-      this.measureColumns = a.map((n) => ({
-        datasetId: n.id,
-        datasetName: n.name,
-        columns: n.columns?.filter(
+      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 = this._store?.periodOverPeriodUiType.get(), this._store?.linkedDataset.set(
-        a.filter((s) => s.id === l)
+        a.filter((s) => s.id === r)
       )));
     }
   }
@@ -194,15 +189,15 @@ class t extends M(
   }
   _handleSlotListChange(o) {
     this._slotContents = structuredClone(o.detail.slotContents);
-    const l = o.detail.activeIndex;
-    l !== this._activeIndex && (this._activeIndex = l, this._store?.updateActive(l));
-    const u = this._slotContents[this._activeIndex], a = u?.column ?? u?.columnId, n = u?.set ?? u?.datasetId, s = u?.formula;
-    (a || s) && n && (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: {
-          securableId: n
+          datasetId: l
         }
       })
     ), setTimeout(() => {
@@ -211,10 +206,10 @@ class t extends M(
           bubbles: !0,
           composed: !0,
           detail: {
-            columnId: a,
-            securableId: n,
+            datasetId: l,
             level: u?.level ?? 0,
-            formulaId: s
+            ...a && { columnId: a },
+            ...s && { formulaId: s }
           }
         })
       );
@@ -231,7 +226,7 @@ class t extends M(
   // Removed updateContentLabel method (label updates are handled inline)
   removeSlotContent(o) {
     this._slotContents = this._slotContents.filter(
-      (l, u) => u !== o
+      (r, u) => u !== o
     ), this._store?.setContents(this._slotContents, this.slotName), this._slotContents.length === 0 && this.dispatchEvent(
       new CustomEvent("slot-menu-inactive", {
         bubbles: !0,
@@ -311,55 +306,55 @@ class t extends M(
   }
 }
 e([
-  r({ type: String, reflect: !0 })
+  n({ type: String, reflect: !0 })
 ], t.prototype, "language");
 e([
-  r({ type: String, attribute: "content-language", reflect: !0 })
+  n({ type: String, attribute: "content-language", reflect: !0 })
 ], t.prototype, "contentLanguage");
 e([
-  r({ type: String, attribute: "slot-type", reflect: !0 })
+  n({ type: String, attribute: "slot-type", reflect: !0 })
 ], t.prototype, "slotType");
 e([
-  r({ type: String, attribute: "slot-name", reflect: !0 })
+  n({ type: String, attribute: "slot-name", reflect: !0 })
 ], t.prototype, "slotName");
 e([
-  r({ type: String, attribute: "item-type", reflect: !0 })
+  n({ type: String, attribute: "item-type", reflect: !0 })
 ], t.prototype, "itemType");
 e([
-  r({ type: Boolean, attribute: "no-drag", reflect: !0 })
+  n({ type: Boolean, attribute: "no-drag", reflect: !0 })
 ], t.prototype, "noDrag");
 e([
-  r({ type: Boolean, attribute: "no-close", reflect: !0 })
+  n({ type: Boolean, attribute: "no-close", reflect: !0 })
 ], t.prototype, "noClose");
 e([
-  r({ type: String, reflect: !0 })
+  n({ type: String, reflect: !0 })
 ], t.prototype, "variant");
 e([
-  r({ type: Boolean, attribute: "no-top-menu-label", reflect: !0 })
+  n({ type: Boolean, attribute: "no-top-menu-label", reflect: !0 })
 ], t.prototype, "noTopMenuLabel");
 e([
   R({ context: A, subscribe: !0 })
 ], t.prototype, "_store");
 e([
-  r({ type: String, attribute: "drag-boundary", reflect: !1 })
+  n({ type: String, attribute: "drag-boundary", reflect: !1 })
 ], t.prototype, "dragBoundary");
 e([
-  r({ type: Boolean })
+  n({ type: Boolean })
 ], t.prototype, "areGrandTotalsEnabled");
 e([
-  r({ type: Boolean })
+  n({ type: Boolean })
 ], t.prototype, "areDatetimeOptionsEnabled");
 e([
-  r({ type: Boolean })
+  n({ type: Boolean })
 ], t.prototype, "isBinningDisabled");
 e([
-  r({ type: Boolean })
+  n({ type: Boolean })
 ], t.prototype, "isAggregationDisabled");
 e([
-  r({ type: Boolean })
+  n({ type: Boolean })
 ], t.prototype, "isCumulativeSumEnabled");
 e([
-  r({ type: Array, reflect: !1, attribute: "slot-contents" })
+  n({ type: Array, reflect: !1, attribute: "slot-contents" })
 ], t.prototype, "slotContents");
 e([
   k()
@@ -368,22 +363,22 @@ e([
   k()
 ], t.prototype, "measureColumns");
 e([
-  r({ type: Number, reflect: !1, attribute: "slot-index" })
+  n({ type: Number, reflect: !1, attribute: "slot-index" })
 ], t.prototype, "slotIndex");
 e([
-  $("luzmo-display-settings")
+  T("luzmo-display-settings")
 ], t.prototype, "displaySettingsElement");
 e([
-  $("luzmo-slot-menu-list")
+  T("luzmo-slot-menu-list")
 ], t.prototype, "slotMenuListElement");
 e([
-  r({ type: String, attribute: "api-url", reflect: !0 })
+  n({ type: String, attribute: "api-url", reflect: !0 })
 ], t.prototype, "apiUrl");
 e([
-  r({ type: String, attribute: "auth-key", reflect: !0 })
+  n({ type: String, attribute: "auth-key", reflect: !0 })
 ], t.prototype, "authKey");
 e([
-  r({ type: String, attribute: "auth-token", reflect: !0 })
+  n({ type: String, attribute: "auth-token", reflect: !0 })
 ], t.prototype, "authToken");
 e([
   k()

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

@@ -1,11 +1,12 @@
 import '@luzmo/lucero/divider';
 import { CSSResultArray, TemplateResult } from 'lit';
 import './../display-settings';
-import { GenericSlotContent, SlotName } from '@luzmo/dashboard-contents-types';
+import { GenericSlotContent, SlotName, VizItemType } from '@luzmo/dashboard-contents-types';
 import { LuzmoElement } from '../../utils/base';
-import { LuzmoDisplaySettings } from './../display-settings/display-settings';
+import { type LuzmoDisplaySettings } from './../display-settings/display-settings';
 import './../slot-menu-list';
-import { LuzmoSlotMenuList } from './../slot-menu-list/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;
@@ -28,9 +29,9 @@ export declare class LuzmoSlotMenu extends LuzmoSlotMenu_base {
     /**
      * The slot type
      */
-    slotType?: string;
+    slotType?: 'numeric' | 'categorical' | 'mixed';
     slotName: SlotName;
-    itemType?: string;
+    itemType?: VizItemType;
     /**
      * Whether to show the drag handle and allow dragging
      */
@@ -56,7 +57,7 @@ export declare class LuzmoSlotMenu extends LuzmoSlotMenu_base {
     isCumulativeSumEnabled?: boolean;
     slotContents?: GenericSlotContent[];
     private _periodOverPeriodUiType;
-    measureColumns: any[];
+    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.
      */

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;
+}

package/components/slot-menu-list/index.cjs

@@ -17,7 +17,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const z=require("lit"),g=require("../get-css-variable-CuDaWSjr.cjs"),y=require("@luzmo/icons"),S=require("../localize-C4zNlrwK.cjs"),h=require("lit/decorators.js"),_=require("../focusable-QLh-LlNt.cjs"),x=require("../sized-mixin-DcvJLFeo.cjs");var O={large:700};function I(n){n.animate([{backgroundColor:"var(--ds-background-selected, #E9F2FF)"},{}],{duration:O.large,easing:"cubic-bezier(0.25, 0.1, 0.25, 1.0)",iterations:1})}function E(n,t){var o=Object.keys(n);if(Object.getOwnPropertySymbols){var e=Object.getOwnPropertySymbols(n);t&&(e=e.filter(function(s){return Object.getOwnPropertyDescriptor(n,s).enumerable})),o.push.apply(o,e)}return o}function C(n){for(var t=1;t<arguments.length;t++){var o=arguments[t]!=null?arguments[t]:{};t%2?E(Object(o),!0).forEach(function(e){g._defineProperty(n,e,o[e])}):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(o)):E(Object(o)).forEach(function(e){Object.defineProperty(n,e,Object.getOwnPropertyDescriptor(o,e))})}return n}var P={top:function(t,o){return Math.abs(o.y-t.top)},right:function(t,o){return Math.abs(t.right-o.x)},bottom:function(t,o){return Math.abs(t.bottom-o.y)},left:function(t,o){return Math.abs(o.x-t.left)}},k=Symbol("closestEdge");function j(n,t){var o,e,s=t.element,m=t.input,l=t.allowedEdges,i={x:m.clientX,y:m.clientY},r=s.getBoundingClientRect(),a=l.map(function(c){return{edge:c,value:P[c](r,i)}}),d=(o=(e=a.sort(function(c,u){return c.value-u.value})[0])===null||e===void 0?void 0:e.edge)!==null&&o!==void 0?o:null;return C(C({},n),{},g._defineProperty({},k,d))}function f(n){var t;return(t=n[k])!==null&&t!==void 0?t:null}const D=':host{font-family:var(--luzmo-slot-menu-list-font-family, var(--luzmo-font-family));font-size:var(--luzmo-slot-menu-list-font-size, var(--slot-menu-list-font-size));color:var(--luzmo-slot-menu-listfont-color, var(--luzmo-font-color))}:host{margin:0;padding:0;list-style:none;max-height:var(--luzmo-slot-menu-list-max-height, var(--slot-menu-list-max-height));overflow-y:auto;border-right:var(--luzmo-slot-menu-list-border-right-width, var(--luzmo-border-width)) solid var(--luzmo-slot-menu-list-border-right-color, var(--luzmo-border-color))}:host li{position:relative;cursor:pointer}:host li:hover{background-color:var(--luzmo-slot-menu-list-background-color-hover, var(--slot-menu-list-background-color-hover))}:host li{border-bottom:var(--luzmo-slot-menu-list-border-bottom-width, var(--slot-menu-list-border-bottom-width)) solid var(--luzmo-slot-menu-list-border-bottom-color, var(--slot-menu-list-border-bottom-color))}:host .active{background-color:var(--luzmo-slot-menu-list-active-background-color, var(--slot-menu-list-active-background-color));color:var(--luzmo-slot-menu-list-active-color, var(--slot-menu-list-active-color))}:host .active:hover{background-color:var(--luzmo-slot-menu-list-active-background-color-hover, var(--slot-menu-list-active-background-color-hover))}.drop-indicator{position:absolute;left:0;right:0;height:var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height));background-color:var(--luzmo-slot-menu-list-drop-indicator-color, var(--slot-menu-list-drop-indicator-color))}.drop-indicator:before{content:"";display:block;width:100%;border:var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height)) solid var(--luzmo-slot-menu-list-drop-indicator-color, var(--slot-menu-list-drop-indicator-color));border-radius:50%;position:absolute;background:var(--luzmo-slot-menu-list-drop-indicator-background, var(--luzmo-background-color));left:calc(-.5 * (var(--luzmo-slot-menu-list-drop-indicator-circle-size, var(--slot-menu-list-drop-indicator-circle-size)) + var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height))));top:calc(-.5 * (var(--luzmo-slot-menu-list-drop-indicator-circle-size, var(--slot-menu-list-drop-indicator-circle-size)) + var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height))));height:var(--luzmo-slot-menu-list-drop-indicator-circle-size, var(--slot-menu-list-drop-indicator-circle-size));width:var(--luzmo-slot-menu-list-drop-indicator-circle-size, var(--slot-menu-list-drop-indicator-circle-size))}.drop-indicator[data-edge=top]{top:calc(-.5 * var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height)))}.drop-indicator[data-edge=bottom]{bottom:calc(-.5 * var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height)))}.draggable-slot-content{display:flex;justify-content:space-between;gap:var(--luzmo-slot-menu-label-to-icon-gap, var(--slot-menu-label-to-icon-gap));align-items:center}.draggable-slot-content .draggable-slot-content-label,.draggable-slot-content .draggable-slot-content-remove{padding-block-start:var(--luzmo-slot-menu-list-item-vertical-padding, var(--slot-menu-list-item-vertical-padding));padding-block-end:var(--luzmo-slot-menu-list-item-vertical-padding, var(--slot-menu-list-item-vertical-padding))}.draggable-slot-content .draggable-slot-content-label{padding-inline-start:var(--luzmo-slot-menu-list-item-horizontal-padding, var(--slot-menu-list-item-horizontal-padding));flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.draggable-slot-content .draggable-slot-content-remove{padding-inline-end:var(--luzmo-slot-menu-list-item-horizontal-padding, var(--slot-menu-list-item-horizontal-padding));flex:0 0 auto}:host{--slot-menu-list-active-background-color: var(--luzmo-primary);--slot-menu-list-active-background-color-hover: var(--luzmo-primary-hover);--slot-menu-list-active-color: var(--luzmo-primary-inverse-color);--slot-menu-list-background-color-hover: var(--luzmo-background-color-hover);--slot-menu-list-drop-indicator-color: var(--luzmo-font-color-down);--slot-menu-list-drop-indicator-height: 2px;--slot-menu-list-drop-indicator-circle-size: 4px;--slot-menu-list-border-bottom-width: 0px;--slot-menu-list-border-bottom-color: transparent;--slot-menu-list-max-height: calc(var(--luzmo-component-height) * 4)}: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-list-item-horizontal-padding: var(--luzmo-spacing-4);--slot-menu-list-item-vertical-padding: var(--luzmo-spacing-3);--slot-menu-label-to-icon-gap: var(--luzmo-spacing-3)}: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-list-item-horizontal-padding: var(--luzmo-spacing-3);--slot-menu-list-item-vertical-padding: var(--luzmo-spacing-3);--slot-menu-label-to-icon-gap: var(--luzmo-spacing-2)}: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-list-item-horizontal-padding: var(--luzmo-spacing-5);--slot-menu-list-item-vertical-padding: var(--luzmo-spacing-3);--slot-menu-label-to-icon-gap: var(--luzmo-spacing-4)}: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-list-item-horizontal-padding: var(--luzmo-spacing-5);--slot-menu-list-item-vertical-padding: var(--luzmo-spacing-4);--slot-menu-label-to-icon-gap: var(--luzmo-spacing-5)}';var F=Object.defineProperty,b=(n,t,o,e)=>{for(var s=void 0,m=n.length-1,l;m>=0;m--)(l=n[m])&&(s=l(t,o,s)||s);return s&&F(t,o,s),s};class v extends x.SizedMixin(_.LuzmoElement,{validSizes:Object.values(x.ElementSizes)}){constructor(){super(...arguments),this.language="en",this.contentLanguage="en",this.slotContents=[],this.activeIndex=0,this._sendChangeEvent=()=>{this.dispatchEvent(new CustomEvent("slot-list-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{slotContents:structuredClone(this.slotContents),activeIndex:this.activeIndex}}))},this._cleanupFns=[],this._attachAll=()=>{[...this._draggableSlotContentElements].forEach(t=>{const o=this._sendChangeEvent.bind(this),e=this,s=g.draggable({element:t,onGenerateDragPreview({nativeSetDragImage:l}){g.setCustomNativeDragPreview({nativeSetDragImage:l,render({container:i}){const r=document.createElement("div");r.classList.add("drag-preview");const a={};[["borderColor","--luzmo-slot-menu-list-border-color","--luzmo-border-color"],["backgroundColor","--luzmo-slot-menu-list-background-color","--luzmo-background-color"],["color","--luzmo-slot-menu-list-font-color","--slot-menu-list-font-color"],["fontSize","--luzmo-slot-menu-list-font-size","--slot-menu-list-font-size"],["horizontalPadding","--luzmo-slot-menu-list-item-horizontal-padding","--slot-menu-list-item-horizontal-padding"],["verticalPadding","--luzmo-slot-menu-list-item-vertical-padding","--slot-menu-list-item-vertical-padding"],["borderRadius","--luzmo-slot-menu-list-border-radius","--luzmo-border-radius"],["fontFamily","--luzmo-slot-menu-list-font-family","--luzmo-font-family"]].forEach(([d,c,u])=>{const p=g.getCssVariableValue(t,c)||g.getCssVariableValue(t,u);a[d]=p}),r.textContent=t.querySelector("[data-task-content]")?.textContent??t.textContent,Object.assign(r.style,{border:`1px solid ${a.borderColor}`,backgroundColor:a.backgroundColor,borderRadius:a.borderRadius,fontFamily:a.fontFamily,fontSize:a.fontSize,color:a.color,paddingInline:`${a.horizontalPadding}`,paddingBlock:`${a.verticalPadding}`}),i.append(r)}})},getInitialData(){const l=t.parentElement;let i=0;return l&&(i=[...l.parentElement?.children??[]].indexOf(l)),{index:i}},onDragStart(){t.style.opacity="0.5"},onDrop(){t.style.opacity="1"}});this._cleanupFns.push(s);const m=g.dropTargetForElements({element:t,canDrop({source:l}){return l.element===t?!1:l?.element?.classList.contains("draggable-slot-content")},getData(l){return j({},{element:t,input:l.input,allowedEdges:["top","bottom"]})},getIsSticky(){return!0},onDragEnter({self:l}){const i=f(l.data);if(!i)return;const r=document.createElement("div");r.classList.add("drop-indicator"),r.dataset.edge=i,t.after(r)},onDrag({self:l}){const i=f(l.data);if(!i){t.nextElementSibling?.remove();return}if(t.nextElementSibling?.getAttribute("data-edge")===i)return;t.nextElementSibling?.remove();const r=document.createElement("div");r.classList.add("drop-indicator"),r.dataset.edge=i,t.after(r)},onDragLeave(){t.nextElementSibling?.remove()},onDrop({self:l,source:i}){t.nextElementSibling?.remove();const r=f(l.data),a=l.element.parentElement;if(typeof i.data.index=="number"&&a){let d=[...a.parentElement?.children??[]].indexOf(a);r==="bottom"&&i.data.index>=d&&d<(a?.parentElement?.children?.length??0)-1?d+=1:r==="top"&&d>i.data.index&&(d-=1);const c=e.activeIndex,u=i.data.index,p=d,w=e.slotContents[u];e.slotContents.splice(u,1),e.slotContents.splice(p,0,w),u===c?e.activeIndex=p:u<c&&p>=c?e.activeIndex=c-1:u>c&&p<=c&&(e.activeIndex=c+1)}r&&(I(i.element),e.requestUpdate(),o())}});this._cleanupFns.push(m)})},this._detachAll=()=>{this._cleanupFns.forEach(t=>t()),this._cleanupFns=[]}}static get styles(){return[z.unsafeCSS(D)]}willUpdate(){this._detachAll()}updated(){this._attachAll()}disconnectedCallback(){super.disconnectedCallback(),this._detachAll()}setActiveIndex(t){this.activeIndex=t,this._sendChangeEvent()}removeSlotContent(t){this.slotContents=this.slotContents.filter((o,e)=>e!==t),this.activeIndex=this.slotContents.length===0?0:Math.min(this.activeIndex,this.slotContents.length-1),this._sendChangeEvent()}render(){const t=this.slotContents.map((o,e)=>{const s=S.localize(o.label,this.contentLanguage);return z.html`<li class=${e===this.activeIndex?"active":""}>
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const z=require("lit"),g=require("../get-css-variable-COd1d84B.cjs"),y=require("@luzmo/icons"),S=require("../localize-C4zNlrwK.cjs"),h=require("lit/decorators.js"),_=require("../focusable-QLh-LlNt.cjs"),x=require("../sized-mixin-DcvJLFeo.cjs");var O={large:700};function I(n){n.animate([{backgroundColor:"var(--ds-background-selected, #E9F2FF)"},{}],{duration:O.large,easing:"cubic-bezier(0.25, 0.1, 0.25, 1.0)",iterations:1})}function E(n,t){var o=Object.keys(n);if(Object.getOwnPropertySymbols){var e=Object.getOwnPropertySymbols(n);t&&(e=e.filter(function(s){return Object.getOwnPropertyDescriptor(n,s).enumerable})),o.push.apply(o,e)}return o}function C(n){for(var t=1;t<arguments.length;t++){var o=arguments[t]!=null?arguments[t]:{};t%2?E(Object(o),!0).forEach(function(e){g._defineProperty(n,e,o[e])}):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(o)):E(Object(o)).forEach(function(e){Object.defineProperty(n,e,Object.getOwnPropertyDescriptor(o,e))})}return n}var P={top:function(t,o){return Math.abs(o.y-t.top)},right:function(t,o){return Math.abs(t.right-o.x)},bottom:function(t,o){return Math.abs(t.bottom-o.y)},left:function(t,o){return Math.abs(o.x-t.left)}},k=Symbol("closestEdge");function j(n,t){var o,e,s=t.element,m=t.input,l=t.allowedEdges,i={x:m.clientX,y:m.clientY},r=s.getBoundingClientRect(),a=l.map(function(c){return{edge:c,value:P[c](r,i)}}),d=(o=(e=a.sort(function(c,u){return c.value-u.value})[0])===null||e===void 0?void 0:e.edge)!==null&&o!==void 0?o:null;return C(C({},n),{},g._defineProperty({},k,d))}function f(n){var t;return(t=n[k])!==null&&t!==void 0?t:null}const D=':host{font-family:var(--luzmo-slot-menu-list-font-family, var(--luzmo-font-family));font-size:var(--luzmo-slot-menu-list-font-size, var(--slot-menu-list-font-size));color:var(--luzmo-slot-menu-listfont-color, var(--luzmo-font-color))}:host{margin:0;padding:0;list-style:none;max-height:var(--luzmo-slot-menu-list-max-height, var(--slot-menu-list-max-height));overflow-y:auto;border-right:var(--luzmo-slot-menu-list-border-right-width, var(--luzmo-border-width)) solid var(--luzmo-slot-menu-list-border-right-color, var(--luzmo-border-color))}:host li{position:relative;cursor:pointer}:host li:hover{background-color:var(--luzmo-slot-menu-list-background-color-hover, var(--slot-menu-list-background-color-hover))}:host li{border-bottom:var(--luzmo-slot-menu-list-border-bottom-width, var(--slot-menu-list-border-bottom-width)) solid var(--luzmo-slot-menu-list-border-bottom-color, var(--slot-menu-list-border-bottom-color))}:host .active{background-color:var(--luzmo-slot-menu-list-active-background-color, var(--slot-menu-list-active-background-color));color:var(--luzmo-slot-menu-list-active-color, var(--slot-menu-list-active-color))}:host .active:hover{background-color:var(--luzmo-slot-menu-list-active-background-color-hover, var(--slot-menu-list-active-background-color-hover))}.drop-indicator{position:absolute;left:0;right:0;height:var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height));background-color:var(--luzmo-slot-menu-list-drop-indicator-color, var(--slot-menu-list-drop-indicator-color))}.drop-indicator:before{content:"";display:block;width:100%;border:var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height)) solid var(--luzmo-slot-menu-list-drop-indicator-color, var(--slot-menu-list-drop-indicator-color));border-radius:50%;position:absolute;background:var(--luzmo-slot-menu-list-drop-indicator-background, var(--luzmo-background-color));left:calc(-.5 * (var(--luzmo-slot-menu-list-drop-indicator-circle-size, var(--slot-menu-list-drop-indicator-circle-size)) + var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height))));top:calc(-.5 * (var(--luzmo-slot-menu-list-drop-indicator-circle-size, var(--slot-menu-list-drop-indicator-circle-size)) + var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height))));height:var(--luzmo-slot-menu-list-drop-indicator-circle-size, var(--slot-menu-list-drop-indicator-circle-size));width:var(--luzmo-slot-menu-list-drop-indicator-circle-size, var(--slot-menu-list-drop-indicator-circle-size))}.drop-indicator[data-edge=top]{top:calc(-.5 * var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height)))}.drop-indicator[data-edge=bottom]{bottom:calc(-.5 * var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height)))}.draggable-slot-content{display:flex;justify-content:space-between;gap:var(--luzmo-slot-menu-label-to-icon-gap, var(--slot-menu-label-to-icon-gap));align-items:center}.draggable-slot-content .draggable-slot-content-label,.draggable-slot-content .draggable-slot-content-remove{padding-block-start:var(--luzmo-slot-menu-list-item-vertical-padding, var(--slot-menu-list-item-vertical-padding));padding-block-end:var(--luzmo-slot-menu-list-item-vertical-padding, var(--slot-menu-list-item-vertical-padding))}.draggable-slot-content .draggable-slot-content-label{padding-inline-start:var(--luzmo-slot-menu-list-item-horizontal-padding, var(--slot-menu-list-item-horizontal-padding));flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.draggable-slot-content .draggable-slot-content-remove{padding-inline-end:var(--luzmo-slot-menu-list-item-horizontal-padding, var(--slot-menu-list-item-horizontal-padding));flex:0 0 auto}:host{--slot-menu-list-active-background-color: var(--luzmo-primary);--slot-menu-list-active-background-color-hover: var(--luzmo-primary-hover);--slot-menu-list-active-color: var(--luzmo-primary-inverse-color);--slot-menu-list-background-color-hover: var(--luzmo-background-color-hover);--slot-menu-list-drop-indicator-color: var(--luzmo-font-color-down);--slot-menu-list-drop-indicator-height: 2px;--slot-menu-list-drop-indicator-circle-size: 4px;--slot-menu-list-border-bottom-width: 0px;--slot-menu-list-border-bottom-color: transparent;--slot-menu-list-max-height: calc(var(--luzmo-component-height) * 4)}: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-list-item-horizontal-padding: var(--luzmo-spacing-4);--slot-menu-list-item-vertical-padding: var(--luzmo-spacing-3);--slot-menu-label-to-icon-gap: var(--luzmo-spacing-3)}: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-list-item-horizontal-padding: var(--luzmo-spacing-3);--slot-menu-list-item-vertical-padding: var(--luzmo-spacing-3);--slot-menu-label-to-icon-gap: var(--luzmo-spacing-2)}: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-list-item-horizontal-padding: var(--luzmo-spacing-5);--slot-menu-list-item-vertical-padding: var(--luzmo-spacing-3);--slot-menu-label-to-icon-gap: var(--luzmo-spacing-4)}: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-list-item-horizontal-padding: var(--luzmo-spacing-5);--slot-menu-list-item-vertical-padding: var(--luzmo-spacing-4);--slot-menu-label-to-icon-gap: var(--luzmo-spacing-5)}';var F=Object.defineProperty,b=(n,t,o,e)=>{for(var s=void 0,m=n.length-1,l;m>=0;m--)(l=n[m])&&(s=l(t,o,s)||s);return s&&F(t,o,s),s};class v extends x.SizedMixin(_.LuzmoElement,{validSizes:Object.values(x.ElementSizes)}){constructor(){super(...arguments),this.language="en",this.contentLanguage="en",this.slotContents=[],this.activeIndex=0,this._sendChangeEvent=()=>{this.dispatchEvent(new CustomEvent("slot-list-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{slotContents:structuredClone(this.slotContents),activeIndex:this.activeIndex}}))},this._cleanupFns=[],this._attachAll=()=>{[...this._draggableSlotContentElements].forEach(t=>{const o=this._sendChangeEvent.bind(this),e=this,s=g.draggable({element:t,onGenerateDragPreview({nativeSetDragImage:l}){g.setCustomNativeDragPreview({nativeSetDragImage:l,render({container:i}){const r=document.createElement("div");r.classList.add("drag-preview");const a={};[["borderColor","--luzmo-slot-menu-list-border-color","--luzmo-border-color"],["backgroundColor","--luzmo-slot-menu-list-background-color","--luzmo-background-color"],["color","--luzmo-slot-menu-list-font-color","--slot-menu-list-font-color"],["fontSize","--luzmo-slot-menu-list-font-size","--slot-menu-list-font-size"],["horizontalPadding","--luzmo-slot-menu-list-item-horizontal-padding","--slot-menu-list-item-horizontal-padding"],["verticalPadding","--luzmo-slot-menu-list-item-vertical-padding","--slot-menu-list-item-vertical-padding"],["borderRadius","--luzmo-slot-menu-list-border-radius","--luzmo-border-radius"],["fontFamily","--luzmo-slot-menu-list-font-family","--luzmo-font-family"]].forEach(([d,c,u])=>{const p=g.getCssVariableValue(t,c)||g.getCssVariableValue(t,u);a[d]=p}),r.textContent=t.querySelector("[data-task-content]")?.textContent??t.textContent,Object.assign(r.style,{border:`1px solid ${a.borderColor}`,backgroundColor:a.backgroundColor,borderRadius:a.borderRadius,fontFamily:a.fontFamily,fontSize:a.fontSize,color:a.color,paddingInline:`${a.horizontalPadding}`,paddingBlock:`${a.verticalPadding}`}),i.append(r)}})},getInitialData(){const l=t.parentElement;let i=0;return l&&(i=[...l.parentElement?.children??[]].indexOf(l)),{index:i}},onDragStart(){t.style.opacity="0.5"},onDrop(){t.style.opacity="1"}});this._cleanupFns.push(s);const m=g.dropTargetForElements({element:t,canDrop({source:l}){return l.element===t?!1:l?.element?.classList.contains("draggable-slot-content")},getData(l){return j({},{element:t,input:l.input,allowedEdges:["top","bottom"]})},getIsSticky(){return!0},onDragEnter({self:l}){const i=f(l.data);if(!i)return;const r=document.createElement("div");r.classList.add("drop-indicator"),r.dataset.edge=i,t.after(r)},onDrag({self:l}){const i=f(l.data);if(!i){t.nextElementSibling?.remove();return}if(t.nextElementSibling?.getAttribute("data-edge")===i)return;t.nextElementSibling?.remove();const r=document.createElement("div");r.classList.add("drop-indicator"),r.dataset.edge=i,t.after(r)},onDragLeave(){t.nextElementSibling?.remove()},onDrop({self:l,source:i}){t.nextElementSibling?.remove();const r=f(l.data),a=l.element.parentElement;if(typeof i.data.index=="number"&&a){let d=[...a.parentElement?.children??[]].indexOf(a);r==="bottom"&&i.data.index>=d&&d<(a?.parentElement?.children?.length??0)-1?d+=1:r==="top"&&d>i.data.index&&(d-=1);const c=e.activeIndex,u=i.data.index,p=d,w=e.slotContents[u];e.slotContents.splice(u,1),e.slotContents.splice(p,0,w),u===c?e.activeIndex=p:u<c&&p>=c?e.activeIndex=c-1:u>c&&p<=c&&(e.activeIndex=c+1)}r&&(I(i.element),e.requestUpdate(),o())}});this._cleanupFns.push(m)})},this._detachAll=()=>{this._cleanupFns.forEach(t=>t()),this._cleanupFns=[]}}static get styles(){return[z.unsafeCSS(D)]}willUpdate(){this._detachAll()}updated(){this._attachAll()}disconnectedCallback(){super.disconnectedCallback(),this._detachAll()}setActiveIndex(t){this.activeIndex=t,this._sendChangeEvent()}removeSlotContent(t){this.slotContents=this.slotContents.filter((o,e)=>e!==t),this.activeIndex=this.slotContents.length===0?0:Math.min(this.activeIndex,this.slotContents.length-1),this._sendChangeEvent()}render(){const t=this.slotContents.map((o,e)=>{const s=S.localize(o.label??{},this.contentLanguage);return z.html`<li class=${e===this.activeIndex?"active":""}>
           <div class="draggable-slot-content">
             <div
               class="draggable-slot-content-label"

package/components/slot-menu-list/index.js

@@ -18,7 +18,7 @@
  * SOFTWARE.
  * */
 import { unsafeCSS as C, html as b } from "lit";
-import { _ as E, d as S, a as O, s as _, g as f } from "../get-css-variable-DEf4GhTH.js";
+import { _ as E, d as S, a as O, s as _, g as f } from "../get-css-variable-CdwF98oh.js";
 import { luzmoIcon as I, luzmoTrashOutline as P } from "@luzmo/icons";
 import { l as F } from "../localize-CcDpq940.js";
 import { property as v, queryAll as j } from "lit/decorators.js";
@@ -293,7 +293,7 @@ class p extends L(D, {
   render() {
     const o = this.slotContents.map(
       (t, e) => {
-        const s = F(t.label, this.contentLanguage);
+        const s = F(t.label ?? {}, this.contentLanguage);
         return b`<li class=${e === this.activeIndex ? "active" : ""}>
           <div class="draggable-slot-content">
             <div

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

@@ -1,4 +1,5 @@
 import { CSSResultArray, TemplateResult } from 'lit';
+import { GenericSlotContent } from '@luzmo/dashboard-contents-types';
 import { LuzmoElement } from '../../utils/base';
 declare const LuzmoSlotMenuList_base: typeof LuzmoElement & {
     new (...args: any[]): import("../../utils/base/sized-mixin").SizedElementInterface;
@@ -18,7 +19,7 @@ export declare class LuzmoSlotMenuList extends LuzmoSlotMenuList_base {
      */
     contentLanguage: string;
     _draggableSlotContentElements: HTMLElement[];
-    slotContents: any;
+    slotContents: GenericSlotContent[];
     activeIndex: number;
     private _sendChangeEvent;
     private _cleanupFns;

package/components/utils.cjs

@@ -17,4 +17,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const O=require("./decompose-numeric-format-B3rVVHpO.cjs"),w=require("./en--a5SfjnM.cjs"),T=require("./localize-C4zNlrwK.cjs"),a=require("./index-6PmXiNch.cjs"),y=require("./index-Vdyb9z2D.cjs");function k(s){const n=[],l=[];Object.keys(a.slotsConfigs).forEach(e=>{e.replace("SlotsConfig","");const t=e.replace("SlotsConfig","").replaceAll(/([A-Z])/g,"-$1").toLowerCase();l.push({type:t,slotsConfig:a.slotsConfigs[e]})});const m=l.find(e=>e.type===s?.oldItemType),i=l.find(e=>e.type===s?.newItemType),o=structuredClone(i?.slotsConfig??[]);if(!i)return{type:m?.type??"bar-chart",slots:s.slots??[]};const r=structuredClone(s.slots??[]);for(const e of r){const t=m?.slotsConfig.find(M=>M.name===e.name);e.type=t?.type??e?.type}const p=r.filter(e=>e.type==="mixed").sort((e,t)=>e.order-t.order),u=o.filter(e=>e.type==="mixed").sort((e,t)=>e.order-t.order),S=r.filter(e=>e.type==="numeric").sort((e,t)=>e.order-t.order),h=o.filter(e=>e.type==="numeric").sort((e,t)=>e.order-t.order),c=[];for(const e of S)for(const t of e.content)t.key="old-measure-"+e?.name+"-"+e.content.indexOf(t),c.push(t);for(const e of p)for(const t of e.content)t.type==="numeric"&&(t.key="old-mixed-"+e?.name+"-"+e.content.indexOf(t),c.push(t));const x=[...h,...u].sort((e,t)=>o.indexOf(e)-o.indexOf(t));for(const e of c)for(const t of x)n.includes(e.key)||(t.content=t?.content??[],(t?.content?.length===0||t?.content?.length>0&&t?.canAcceptMultipleDataItems===!0)&&(t.content.push(e),n.push(e.key)));const C=r.filter(e=>e.type==="categorical").sort((e,t)=>e.order-t.order),g=o.filter(e=>e.type==="categorical").sort((e,t)=>e.order-t.order),d=[];for(const e of C)for(const t of e.content)t.key="old-dimension-"+e?.name+"-"+e.content.indexOf(t),d.push(t);for(const e of p)for(const t of e.content)t.type!=="numeric"&&(t.key="old-mixed-"+e?.name+"-"+e.content.indexOf(t),d.push(t));const I=[...g,...u].sort((e,t)=>o.indexOf(e)-o.indexOf(t));for(const e of d)if(!n.includes(e.key))for(const t of I)t&&!n.includes(e.key)&&(t.content=t?.content??[],(t?.content?.length===0||t?.content?.length>0&&t?.canAcceptMultipleDataItems===!0)&&(t.content.push(e),n.push(e.key)));let f={...s.options};return i.setInitialOptions&&(f=i?.setInitialOptions({...f})),{type:i.type??"bar-chart",slots:o.map(e=>({name:e.name,content:e.content??[]}))??[],options:f??{...s.options}}}exports.decomposeNumericFormat=O.decomposeNumericFormat;exports.formatter=w.formatter;exports.localize=T.localize;exports.getTheme=y.getTheme;exports.systemThemeIds=y.systemThemeIds;exports.switchItem=k;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("./index-CFL6gmIu.cjs"),C=require("./decompose-numeric-format-B3rVVHpO.cjs"),k=require("./en-DZcn_iz_.cjs"),T=require("./localize-C4zNlrwK.cjs"),h=require("./index-6PmXiNch.cjs"),g=require("./index-Vdyb9z2D.cjs"),f=r=>!!(r&&Object.keys(r).length>0),O=(r,e,i={})=>{if(e.hidden===!0&&!i.includeHidden||!e.id||!e.type)return null;const s=f(e.name)?e.name:{en:"Untitled"},n={datasetId:r,columnId:e.id,type:e.type,name:s};return e.description&&f(e.description)&&(n.description=e.description),e.subtype&&(n.subtype=e.subtype),e.format&&(n.format=e.format),typeof e.lowestLevel=="number"&&(n.lowestLevel=e.lowestLevel),e.expression&&(n.expression=e.expression),Array.isArray(e.duration_levels)&&e.duration_levels.length>0&&(n.duration_levels=[...e.duration_levels]),e.duration_format&&(n.duration_format=e.duration_format),Array.isArray(e.hierarchyLevels)&&e.hierarchyLevels.length>0&&(n.hierarchyLevels=e.hierarchyLevels.map(({id:d,level:a,name:l})=>({id:d,level:a,name:l}))),e.currency?.id&&e.currency.symbol&&(n.currency={id:e.currency.id,name:e.currency.name,symbol:e.currency.symbol}),n},M=(r,e,i={})=>{if(e.hidden===!0&&!i.includeHidden||!e.id||!e.type)return null;const s=f(e.name)?e.name:{en:"Untitled"},n={datasetId:r,formulaId:e.id,type:e.type,name:s};return e.description&&f(e.description)&&(n.description=e.description),e.subtype&&(n.subtype=e.subtype),e.format&&(n.format=e.format),typeof e.lowestLevel=="number"&&(n.lowestLevel=e.lowestLevel),e.expression&&(n.expression=e.expression),Array.isArray(e.duration_levels)&&e.duration_levels.length>0&&(n.duration_levels=[...e.duration_levels]),e.duration_format&&(n.duration_format=e.duration_format),e.currency?.id&&e.currency.symbol&&(n.currency={id:e.currency.id,name:e.currency.name,symbol:e.currency.symbol}),n},_=(r,e={})=>{if(!r?.id)return[];const i=[];return Array.isArray(r.columns)&&r.columns.forEach(c=>{const s=O(r.id,c,e);s&&i.push(s)}),Array.isArray(r.formulas)&&r.formulas.forEach(c=>{const s=M(r.id,c,e);s&&i.push(s)}),i},w=(r,e={})=>r.map(i=>({id:i.id,name:i.name,description:i.description,dataItems:_(i,e)})),E=async(r,e)=>{if(!Array.isArray(r)||r.length===0)throw new Error("At least one dataset ID is required");const{dataBrokerConfig:i}=e;if(!i)throw new Error("dataBrokerConfig is required");if(!i.authKey||!i.authToken)throw new Error("Both authKey and authToken are required for DataBroker configuration");if(!i.apiUrl)throw new Error("apiUrl is required for DataBroker configuration");if(typeof i.apiUrl!="string")throw new TypeError("apiUrl must be a valid string");m.dataBroker.configure(i);try{const c=await m.dataBroker.fetchDatasetsWithColumnsAndFormulas(r);return w(c)}catch(c){throw c instanceof Error&&c.message.includes("Authentication failed")?new Error("Failed to load datasets: Authentication failed. Please verify your API credentials are correct."):c}};function F(r){const e=[],i=[];Object.keys(h.slotsConfigs).forEach(t=>{t.replace("SlotsConfig","");const o=t.replace("SlotsConfig","").replaceAll(/([A-Z])/g,"-$1").toLowerCase();i.push({type:o,slotsConfig:h.slotsConfigs[t]})});const c=i.find(t=>t.type===r?.oldItemType),s=i.find(t=>t.type===r?.newItemType),n=structuredClone(s?.slotsConfig??[]);if(!s)return{type:c?.type??"bar-chart",slots:r.slots??[]};const d=structuredClone(r.slots??[]);for(const t of d){const o=c?.slotsConfig.find(A=>A.name===t.name);t.type=o?.type??t?.type}const a=d.filter(t=>t.type==="mixed").sort((t,o)=>t.order-o.order),l=n.filter(t=>t.type==="mixed").sort((t,o)=>t.order-o.order),b=d.filter(t=>t.type==="numeric").sort((t,o)=>t.order-o.order),x=n.filter(t=>t.type==="numeric").sort((t,o)=>t.order-o.order),p=[];for(const t of b)for(const o of t.content)o.key="old-measure-"+t?.name+"-"+t.content.indexOf(o),p.push(o);for(const t of a)for(const o of t.content)o.type==="numeric"&&(o.key="old-mixed-"+t?.name+"-"+t.content.indexOf(o),p.push(o));const S=[...x,...l].sort((t,o)=>n.indexOf(t)-n.indexOf(o));for(const t of p)for(const o of S)e.includes(t.key)||(o.content=o?.content??[],(o?.content?.length===0||o?.content?.length>0&&o?.canAcceptMultipleDataItems===!0)&&(o.content.push(t),e.push(t.key)));const I=d.filter(t=>t.type==="categorical").sort((t,o)=>t.order-o.order),D=n.filter(t=>t.type==="categorical").sort((t,o)=>t.order-o.order),y=[];for(const t of I)for(const o of t.content)o.key="old-dimension-"+t?.name+"-"+t.content.indexOf(o),y.push(o);for(const t of a)for(const o of t.content)o.type!=="numeric"&&(o.key="old-mixed-"+t?.name+"-"+t.content.indexOf(o),y.push(o));const v=[...D,...l].sort((t,o)=>n.indexOf(t)-n.indexOf(o));for(const t of y)if(!e.includes(t.key))for(const o of v)o&&!e.includes(t.key)&&(o.content=o?.content??[],(o?.content?.length===0||o?.content?.length>0&&o?.canAcceptMultipleDataItems===!0)&&(o.content.push(t),e.push(t.key)));let u={...r.options};return s.setInitialOptions&&(u=s?.setInitialOptions({...u})),{type:s.type??"bar-chart",slots:n.map(t=>({name:t.name,content:t.content??[]}))??[],options:u??{...r.options}}}exports.decomposeNumericFormat=C.decomposeNumericFormat;exports.formatter=k.formatter;exports.localize=T.localize;exports.getTheme=g.getTheme;exports.systemThemeIds=g.systemThemeIds;exports.convertDatasetsToDraggableItems=w;exports.loadDraggableItemsForDatasets=E;exports.switchItem=F;