npm - @luzmo/analytics-components-kit - Versions diffs - 1.0.1-alpha.84 → 1.0.1-alpha.85 - Mend

@luzmo/analytics-components-kit 1.0.1-alpha.84 → 1.0.1-alpha.85

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (237) hide show

package/components/slot-menu/index.js CHANGED Viewed

@@ -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-3WsfvkZF.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, luzmoClose16 as N } from "@luzmo/icons";
-import { d as C } from "../index-BPN3bG9X.js";
-import { l as Y } from "../localize-BX7q0S0M.js";
-import { property as a, state as T, query as L } from "lit/decorators.js";
+import { luzmoIcon as _, luzmoArrows as X, luzmoTrashOutline as q, luzmoClose16 as N } from "@luzmo/icons";
+import { d as g } from "../index-BGb_wRRW.js";
+import { l as Y } from "../localize-CcDpq940.js";
+import { property as r, state as k, query as $ } 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 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(u) {
-  return typeof u == "string" && j.test(u);
+function V(i) {
+  return typeof i == "string" && j.test(i);
 }
 function W({
-  element: u,
+  element: i,
   handle: o,
-  boundary: n = document.documentElement,
-  onDragStart: t,
-  onDragEnd: r
+  boundary: l = 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, _ = 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 n = 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();
+    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 = _ + 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());
-  }, $ = (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 && (n.removeEventListener("pointermove", y), n.removeEventListener("pointerup", x), s = -1, a?.());
+  }, T = (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, _ = f.m42;
+      const h = n.defaultView?.getComputedStyle(i);
+      if (h) {
+        const d = new DOMMatrixReadOnly(h.transform);
+        b = d.m41, f = d.m42;
       }
     } catch {
-      v = 0, _ = 0;
+      b = 0, f = 0;
     }
-    o.setPointerCapture(i), s.addEventListener("pointermove", k), s.addEventListener("pointerup", S), t == null || t();
+    o.setPointerCapture(s), n.addEventListener("pointermove", y), n.addEventListener("pointerup", x), u?.();
   };
-  return o.addEventListener("pointerdown", $), () => {
-    o.removeEventListener("pointerdown", $), s.removeEventListener("pointermove", k), s.removeEventListener("pointerup", S);
+  return o.addEventListener("pointerdown", T), () => {
+    o.removeEventListener("pointerdown", T), n.removeEventListener("pointermove", y), n.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, 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;
 };
-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), C.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 l = this.dragBoundary ? document.querySelector(this.dragBoundary) : document.documentElement;
     this._cleanupDrag = W({
       element: this,
       handle: o,
-      boundary: n
+      boundary: l
     });
   }
   _sendChangeEvent() {
@@ -166,50 +165,44 @@ class e extends M(
     ])).has(o);
   }
   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 && V(m) && m !== this._lastFetchedDatasetId) {
-        if (this._lastFetchedDatasetId = m, await C.fetchDatasetsRecursive([m]), !this.isConnected)
+      const { set: l, column: u } = this._currentSlotContent;
+      if (l && V(l) && l !== this._lastFetchedDatasetId) {
+        if (this._lastFetchedDatasetId = l, await g.fetchDatasetsRecursive([l]), !this.isConnected)
           return;
-        this._linkedDatasetsIds = C.getLinkedDatasetsIds(m);
+        this._linkedDatasetsIds = g.getLinkedDatasetsIds(l);
       }
-      const z = C.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((n) => ({
+        datasetId: n.id,
+        datasetName: n.name,
+        columns: n.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 === l)
       )));
     }
   }
   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 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(
       new CustomEvent("slot-menu-active", {
         bubbles: !0,
         composed: !0,
         detail: {
-          securableId: s
+          securableId: n
         }
       })
     ), setTimeout(() => {
@@ -218,30 +211,28 @@ class e extends M(
           bubbles: !0,
           composed: !0,
           detail: {
-            columnId: r,
-            securableId: s,
-            level: (t == null ? void 0 : t.level) ?? 0,
-            formulaId: i
+            columnId: a,
+            securableId: n,
+            level: u?.level ?? 0,
+            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(
+      (l, 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
@@ -255,28 +246,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}
@@ -290,15 +280,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}
@@ -307,8 +295,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>`;
@@ -323,85 +310,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([
+  r({ type: String, reflect: !0 })
+], t.prototype, "language");
+e([
+  r({ type: String, attribute: "content-language", reflect: !0 })
+], t.prototype, "contentLanguage");
+e([
+  r({ type: String, attribute: "slot-type", reflect: !0 })
+], t.prototype, "slotType");
+e([
+  r({ type: String, attribute: "slot-name", reflect: !0 })
+], t.prototype, "slotName");
+e([
+  r({ type: String, attribute: "item-type", reflect: !0 })
+], t.prototype, "itemType");
+e([
+  r({ type: Boolean, attribute: "no-drag", reflect: !0 })
+], t.prototype, "noDrag");
+e([
+  r({ type: Boolean, attribute: "no-close", reflect: !0 })
+], t.prototype, "noClose");
+e([
+  r({ type: String, reflect: !0 })
+], t.prototype, "variant");
+e([
+  r({ 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([
-  T()
-], e.prototype, "_periodOverPeriodUiType");
-l([
-  T()
-], 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([
-  T()
-], e.prototype, "_slotContents");
-customElements.get("luzmo-slot-menu") || customElements.define("luzmo-slot-menu", e);
+], t.prototype, "_store");
+e([
+  r({ type: String, attribute: "drag-boundary", reflect: !1 })
+], t.prototype, "dragBoundary");
+e([
+  r({ type: Boolean })
+], t.prototype, "areGrandTotalsEnabled");
+e([
+  r({ type: Boolean })
+], t.prototype, "areDatetimeOptionsEnabled");
+e([
+  r({ type: Boolean })
+], t.prototype, "isBinningDisabled");
+e([
+  r({ type: Boolean })
+], t.prototype, "isAggregationDisabled");
+e([
+  r({ type: Boolean })
+], t.prototype, "isCumulativeSumEnabled");
+e([
+  r({ type: Array, reflect: !1, attribute: "slot-contents" })
+], t.prototype, "slotContents");
+e([
+  k()
+], t.prototype, "_periodOverPeriodUiType");
+e([
+  k()
+], t.prototype, "measureColumns");
+e([
+  r({ type: Number, reflect: !1, attribute: "slot-index" })
+], t.prototype, "slotIndex");
+e([
+  $("luzmo-display-settings")
+], t.prototype, "displaySettingsElement");
+e([
+  $("luzmo-slot-menu-list")
+], t.prototype, "slotMenuListElement");
+e([
+  r({ type: String, attribute: "api-url", reflect: !0 })
+], t.prototype, "apiUrl");
+e([
+  r({ type: String, attribute: "auth-key", reflect: !0 })
+], t.prototype, "authKey");
+e([
+  r({ 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-list/index.cjs CHANGED Viewed

@@ -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 E=require("lit"),v=require("../get-css-variable-DLiZYZEi.cjs"),k=require("@luzmo/icons"),P=require("../localize-r7ALOUy_.cjs"),z=require("lit/decorators.js"),j=require("../focusable-B3E_hQmm.cjs"),w=require("../sized-mixin-DcvJLFeo.cjs");var D={large:700};function F(l){l.animate([{backgroundColor:"var(--ds-background-selected, #E9F2FF)"},{}],{duration:D.large,easing:"cubic-bezier(0.25, 0.1, 0.25, 1.0)",iterations:1})}function S(l,t){var o=Object.keys(l);if(Object.getOwnPropertySymbols){var e=Object.getOwnPropertySymbols(l);t&&(e=e.filter(function(s){return Object.getOwnPropertyDescriptor(l,s).enumerable})),o.push.apply(o,e)}return o}function _(l){for(var t=1;t<arguments.length;t++){var o=arguments[t]!=null?arguments[t]:{};t%2?S(Object(o),!0).forEach(function(e){v._defineProperty(l,e,o[e])}):Object.getOwnPropertyDescriptors?Object.defineProperties(l,Object.getOwnPropertyDescriptors(o)):S(Object(o)).forEach(function(e){Object.defineProperty(l,e,Object.getOwnPropertyDescriptor(o,e))})}return l}var L={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)}},O=Symbol("closestEdge");function $(l,t){var o,e,s=t.element,u=t.input,n=t.allowedEdges,i={x:u.clientX,y:u.clientY},r=s.getBoundingClientRect(),a=n.map(function(c){return{edge:c,value:L[c](r,i)}}),d=(o=(e=a.sort(function(c,h){return c.value-h.value})[0])===null||e===void 0?void 0:e.edge)!==null&&o!==void 0?o:null;return _(_({},l),{},v._defineProperty({},O,d))}function C(l){var t;return(t=l[O])!==null&&t!==void 0?t:null}const M=':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;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 li:hover{background-color:var(--luzmo-slot-menu-list-background-color-hover, var(--slot-menu-list-background-color-hover))}: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 q=Object.defineProperty,f=(l,t,o,e)=>{for(var s=void 0,u=l.length-1,n;u>=0;u--)(n=l[u])&&(s=n(t,o,s)||s);return s&&q(t,o,s),s};class p extends w.SizedMixin(j.LuzmoElement,{validSizes:Object.values(w.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=v.draggable({element:t,onGenerateDragPreview({nativeSetDragImage:n}){v.setCustomNativeDragPreview({nativeSetDragImage:n,render({container:i}){var d;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(([c,h,y])=>{const m=v.getCssVariableValue(t,h)||v.getCssVariableValue(t,y);a[c]=m}),r.textContent=((d=t.querySelector("[data-task-content]"))==null?void 0:d.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(){var r;const n=t.parentElement;let i=0;return n&&(i=[...((r=n.parentElement)==null?void 0:r.children)??[]].indexOf(n)),{index:i}},onDragStart(){t.style.opacity="0.5"},onDrop(){t.style.opacity="1"}});this._cleanupFns.push(s);const u=v.dropTargetForElements({element:t,canDrop({source:n}){var i;return n.element===t?!1:(i=n==null?void 0:n.element)==null?void 0:i.classList.contains("draggable-slot-content")},getData(n){return $({},{element:t,input:n.input,allowedEdges:["top","bottom"]})},getIsSticky(){return!0},onDragEnter({self:n}){const i=C(n.data);if(!i)return;const r=document.createElement("div");r.classList.add("drop-indicator"),r.dataset.edge=i,t.after(r)},onDrag({self:n}){var a,d,c;const i=C(n.data);if(!i){(a=t.nextElementSibling)==null||a.remove();return}if(((d=t.nextElementSibling)==null?void 0:d.getAttribute("data-edge"))===i)return;(c=t.nextElementSibling)==null||c.remove();const r=document.createElement("div");r.classList.add("drop-indicator"),r.dataset.edge=i,t.after(r)},onDragLeave(){var n;(n=t.nextElementSibling)==null||n.remove()},onDrop({self:n,source:i}){var d,c,h,y;(d=t.nextElementSibling)==null||d.remove();const r=C(n.data),a=n.element.parentElement;if(typeof i.data.index=="number"&&a){let m=[...((c=a.parentElement)==null?void 0:c.children)??[]].indexOf(a);r==="bottom"&&i.data.index>=m&&m<(((y=(h=a==null?void 0:a.parentElement)==null?void 0:h.children)==null?void 0:y.length)??0)-1?m+=1:r==="top"&&m>i.data.index&&(m-=1);const g=e.activeIndex,b=i.data.index,x=m,I=e.slotContents[b];e.slotContents.splice(b,1),e.slotContents.splice(x,0,I),b===g?e.activeIndex=x:b<g&&x>=g?e.activeIndex=g-1:b>g&&x<=g&&(e.activeIndex=g+1)}r&&(F(i.element),e.requestUpdate(),o())}});this._cleanupFns.push(u)})},this._detachAll=()=>{this._cleanupFns.forEach(t=>t()),this._cleanupFns=[]}}static get styles(){return[E.unsafeCSS(M)]}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=P.localize(o.label,this.contentLanguage);return E.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-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":""}>
           <div class="draggable-slot-content">
             <div
               class="draggable-slot-content-label"
@@ -29,7 +29,7 @@
               class="draggable-slot-content-remove"
               @click=${this.removeSlotContent.bind(this,e)}
             >
-              ${k.luzmoIcon(k.luzmoTrashOutline)}
+              ${y.luzmoIcon(y.luzmoTrashOutline)}
             </div>
           </div>
-        </li>`});return E.html`<div>${t}</div>`}}f([z.property({type:String,reflect:!0})],p.prototype,"language");f([z.property({type:String,attribute:"content-language",reflect:!0})],p.prototype,"contentLanguage");f([z.queryAll(".draggable-slot-content")],p.prototype,"_draggableSlotContentElements");f([z.property()],p.prototype,"slotContents");f([z.property({type:Number})],p.prototype,"activeIndex");customElements.get("luzmo-slot-menu-list")||customElements.define("luzmo-slot-menu-list",p);exports.LuzmoSlotMenuList=p;
+        </li>`});return z.html`<div>${t}</div>`}}b([h.property({type:String,reflect:!0})],v.prototype,"language");b([h.property({type:String,attribute:"content-language",reflect:!0})],v.prototype,"contentLanguage");b([h.queryAll(".draggable-slot-content")],v.prototype,"_draggableSlotContentElements");b([h.property()],v.prototype,"slotContents");b([h.property({type:Number})],v.prototype,"activeIndex");customElements.get("luzmo-slot-menu-list")||customElements.define("luzmo-slot-menu-list",v);exports.LuzmoSlotMenuList=v;