@luzmo/analytics-components-kit 1.0.1-alpha.3 → 1.0.1-alpha.30

package/components/draggable-data-item-level/index.js

@@ -0,0 +1,293 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Luzmo web components (“Luzmo Web Components”)
+ * must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account
+ * to use the Luzmo Web Components. This license terminates
+ * automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+import { g as F, a as Y, s as J } from "../get-css-variable-Bhbr-Kr1.js";
+import { g as U, i as ee, l as le, N as B, Q as ae, m as oe, n as p, u as H, Z as re, A as te, o as T, H as ie, V as de, s as V, t as ge, y as ne, z as A, F as me, X as se, I as L, L as ue, K as be, R as M, a0 as ce, a1 as ve, a2 as N, a3 as ze, a4 as he, a5 as q, a6 as pe, a7 as fe, a8 as G, a9 as ye, aa as xe, f, ab as ke, W as we, p as Se } from "../luzmo-icons-U09GB75o.js";
+import "../index-B3jkBlKY.js";
+import "../index-CRx2nPkq.js";
+import { L as Ce, r as De, x as y, n as g } from "../focusable-Dw_pMNQL.js";
+import { S as Ee } from "../sized-mixin-DMuOVsw0.js";
+import { l as Pe } from "../localize-BX7q0S0M.js";
+const K = () => {
+  if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
+    const l = document.createElement("style");
+    l.setAttribute("data-luzmo-vars", ""), l.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-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-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(l);
+  }
+};
+K();
+const $e = ":host{font-family:var(--luzmo-draggable-data-item-level-font-family, var(--luzmo-font-family));color:var(--luzmo-draggable-data-item-level-font-color, var(--draggable-data-item-level-font-color))}.draggable-data-item-level{transition:background-color var(--luzmo-animation-duration);background-color:var(--luzmo-draggable-data-item-level-background-color, var(--draggable-data-item-level-background-color));display:flex;justify-content:space-between;align-items:center;padding:0 var(--luzmo-draggable-data-item-level-horizontal-padding, var(--draggable-data-item-level-horizontal-padding));gap:var(--luzmo-draggable-data-item-level-gap, var(--draggable-data-item-level-gap));border-radius:var(--luzmo-draggable-data-item-level-border-radius, var(--draggable-data-item-level-border-radius));border-width:var(--luzmo-draggable-data-item-level-border-width, var(--draggable-data-item-level-border-width));border-style:var(--luzmo-draggable-data-item-level-border-style, var(--draggable-data-item-level-border-style));border-color:var(--luzmo-draggable-data-item-level-border-color, var(--draggable-data-item-level-border-color));height:var(--luzmo-draggable-data-item-level-height, var(--draggable-data-item-level-height));cursor:move}.draggable-data-item-level:hover{background-color:var(--luzmo-draggable-data-item-level-background-color-hover, var(--draggable-data-item-level-background-color-hover));color:var(--luzmo-draggable-data-item-level-font-color-hover, var(--draggable-data-item-level-font-color-hover));border-color:var(--luzmo-draggable-data-item-level-border-color-hover, var(--draggable-data-item-level-border-color-hover))}.draggable-data-item-level .data-label{font-size:var(--luzmo-draggable-data-item-level-label-font-size, var(--draggable-data-item-level-label-font-size));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([sublevel]) .draggable-data-item-level{height:var(--luzmo-draggable-data-item-level-sublevel-height, var(--draggable-data-item-level-sublevel-height));background-color:var(--luzmo-draggable-data-item-level-sublevel-background-color, var(--draggable-data-item-level-sublevel-background-color));border-color:var(--luzmo-draggable-data-item-level-sublevel-border-color, var(--draggable-data-item-level-sublevel-border-color));margin-inline-start:var(--luzmo-draggable-data-item-level-sublevel-margin-inline-start, var(--draggable-data-item-level-sublevel-margin-inline-start))}:host([sublevel]) .draggable-data-item-level:hover{background-color:var(--luzmo-draggable-data-item-level-sublevel-background-color-hover, var(--draggable-data-item-level-sublevel-background-color-hover))}:host([sublevel]) .draggable-data-item-level .drag-handle-icon{width:var(--luzmo-draggable-data-item-level-sublevel-drag-handle-width, var(--draggable-data-item-level-sublevel-drag-handle-width));text-align:center}:host([disabled]) .draggable-data-item-level{background-color:var(--luzmo-draggable-data-item-level-background-color-disabled, var(--draggable-data-item-level-background-color-disabled));color:var(--luzmo-draggable-data-item-level-color-disabled, var(--draggable-data-item-level-color-disabled));cursor:not-allowed}:host([disabled]) .drag-handle-icon{opacity:.25}:host([sublevel][disabled]) .draggable-data-item-level{background-color:var(--luzmo-draggable-data-item-level-sublevel-background-color-disabled, var(--draggable-data-item-level-sublevel-background-color-disabled))}.drag-handle-icon{opacity:.6;font-size:var(--luzmo-draggable-data-item-level-drag-handle-size, var(--luzmo-draggable-data-item-level-drag-handle-size));width:var(--luzmo-draggable-data-item-level-drag-handle-width, var(--luzmo-draggable-data-item-level-drag-handle-width));text-align:center}.data-icon-type{width:var(--luzmo-draggable-data-item-level-data-icon-width, var(--luzmo-draggable-data-item-level-data-icon-width));text-align:center}.data-label{flex-grow:1}.data-description{height:100%;display:flex;align-items:center;background-color:transparent;outline:none;border:none;color:var(--luzmo-draggable-data-item-level-font-color, var(--draggable-data-item-level-font-color));font-size:var(--luzmo-draggable-data-item-level-label-font-size, var(--draggable-data-item-level-label-font-size))}:host([variant=highlight]){--draggable-data-item-level-background-color: var( --luzmo-background-color-highlight );--draggable-data-item-level-border-color: var( --luzmo-background-color-highlight );--draggable-data-item-level-background-color-hover: var( --luzmo-background-color-highlight-hover );--draggable-data-item-level-font-color-hover: var(--luzmo-font-color-hover);--draggable-data-item-level-border-color-hover: var( --luzmo-background-color-highlight-hover )}:host{--draggable-data-item-level-height: var(--luzmo-component-height);--draggable-data-item-level-label-font-size: var(--luzmo-font-size);--draggable-data-item-level-icon-type-size: var(--luzmo-font-size);--draggable-data-item-level-horizontal-padding: var(--luzmo-spacing-5);--draggable-data-item-level-border-width: var(--luzmo-border-width);--draggable-data-item-level-border-style: solid;--draggable-data-item-level-border-color: var(--luzmo-border-color-hover);--draggable-data-item-level-border-radius: var(--luzmo-border-radius);--draggable-data-item-level-gap: var(--luzmo-spacing-4);--draggable-data-item-level-font-color: var(--luzmo-font-color);--draggable-data-item-level-color-disabled: var(--luzmo-color-disabled);--draggable-data-item-level-background-color-disabled: var( --luzmo-background-color-disabled );--luzmo-draggable-data-item-level-drag-handle-size: var(--luzmo-font-size-s);--luzmo-draggable-data-item-level-drag-handle-width: var( --draggable-data-item-level-icon-type-size );--luzmo-draggable-data-item-level-data-icon-width: calc( var(--draggable-data-item-level-icon-type-size) + var(--luzmo-spacing-3) );--draggable-data-item-level-sublevel-height: var(--luzmo-component-height-s);--draggable-data-item-level-sublevel-border-color: transparent;--draggable-data-item-level-sublevel-background-color: transparent;--draggable-data-item-level-sublevel-background-color-disabled: transparent;--draggable-data-item-level-sublevel-margin-inline-start: calc( var(--draggable-data-item-level-gap) + var(--luzmo-draggable-data-item-level-drag-handle-width) );--luzmo-draggable-data-item-level-sublevel-drag-handle-width: var( --luzmo-draggable-data-item-level-data-icon-width );--draggable-data-item-level-sublevel-background-color-hover: rgba( var(--luzmo-border-color-rgb), .05 )}:host([hide-type-icon]){--draggable-data-item-level-sublevel-margin-inline-start: var( --draggable-data-item-level-gap )}:host([size=s]){--draggable-data-item-level-height: var(--luzmo-component-height-s);--draggable-data-item-level-label-font-size: var(--luzmo-font-size-s);--draggable-data-item-level-icon-type-size: var(--luzmo-font-size-s);--draggable-data-item-level-horizontal-padding: var(--luzmo-spacing-4);--draggable-data-item-level-border-radius: var(--luzmo-border-radius);--draggable-data-item-level-gap: var(--luzmo-spacing-3);--draggable-data-item-level-sublevel-height: var(--luzmo-component-height-xs);--luzmo-draggable-data-item-level-drag-handle-size: var(--luzmo-font-size-xs)}:host([size=l]){--draggable-data-item-level-height: var(--luzmo-component-height-l);--draggable-data-item-level-label-font-size: var(--luzmo-font-size-l);--draggable-data-item-level-icon-type-size: var(--luzmo-font-size-l);--draggable-data-item-level-horizontal-padding: var(--luzmo-spacing-5);--draggable-data-item-level-border-radius: var(--luzmo-border-radius-l);--draggable-data-item-level-gap: var(--luzmo-spacing-5);--draggable-data-item-level-sublevel-height: var(--luzmo-component-height);--luzmo-draggable-data-item-level-drag-handle-size: var(--luzmo-font-size)}:host([size=xl]){--draggable-data-item-level-height: var(--luzmo-component-height-xl);--draggable-data-item-level-label-font-size: var(--luzmo-font-size-xl);--draggable-data-item-level-icon-type-size: var(--luzmo-font-size-xl);--draggable-data-item-level-horizontal-padding: var(--luzmo-spacing-5);--draggable-data-item-level-border-radius: var(--luzmo-border-radius-xl);--draggable-data-item-level-gap: var(--luzmo-spacing-5);--draggable-data-item-level-sublevel-height: var(--luzmo-component-height-l);--luzmo-draggable-data-item-level-drag-handle-size: var(--luzmo-font-size-l)}:host{box-sizing:border-box}", t = {
+  array: {
+    s: le,
+    m: ee,
+    l: U,
+    xl: U
+  },
+  coordinates: {
+    s: te,
+    m: re,
+    l: H,
+    xl: H
+  },
+  currency: {
+    s: de,
+    m: ie,
+    l: T,
+    xl: T
+  },
+  date: {
+    s: ve,
+    m: ce,
+    l: M,
+    xl: M
+  },
+  datetime: {
+    s: he,
+    m: ze,
+    l: N,
+    xl: N
+  },
+  duration: {
+    s: ne,
+    m: ge,
+    l: V,
+    xl: V
+  },
+  hierarchy: {
+    s: xe,
+    m: ye,
+    l: G,
+    xl: G
+  },
+  image: {
+    s: oe,
+    m: ae,
+    l: B,
+    xl: B
+  },
+  numeric: {
+    s: se,
+    m: me,
+    l: A,
+    xl: A
+  },
+  time: {
+    s: be,
+    m: ue,
+    l: L,
+    xl: L
+  },
+  topography: {
+    s: p,
+    m: p,
+    l: p,
+    xl: p
+  },
+  ipaddress: {
+    s: fe,
+    m: pe,
+    l: q,
+    xl: q
+  }
+}, Q = (l, e) => (e == null ? void 0 : e.type) === "array" ? t.array[l] : (e == null ? void 0 : e.type) === "image" ? t.image[l] : (e == null ? void 0 : e.type) === "spatial" ? (e == null ? void 0 : e.subtype) === "topography" ? t.topography[l] : t.coordinates[l] : (e == null ? void 0 : e.type) === "numeric" ? (e == null ? void 0 : e.subtype) === "currency" ? t.currency[l] : (e == null ? void 0 : e.subtype) === "duration" ? t.duration[l] : t.numeric[l] : (e == null ? void 0 : e.type) === "datetime" ? (e == null ? void 0 : e.subtype) === "time" ? t.time[l] : (e == null ? void 0 : e.subtype) === "date" ? t.date[l] : t.datetime[l] : (e == null ? void 0 : e.type) === "hierarchy" && (e == null ? void 0 : e.subtype) === "ipaddress" ? t.ipaddress[l] : t.hierarchy[l], Ie = (l) => {
+  var b, c, v, z, k, w, S, C, D, E, P, $, I, O, R, _, j;
+  const e = l.source.element;
+  let a = "";
+  (z = (v = (c = (b = l.source) == null ? void 0 : b.element) == null ? void 0 : c.renderRoot) == null ? void 0 : v.querySelector(".data-label")) != null && z.textContent && (a = (S = (w = (k = l.source) == null ? void 0 : k.element) == null ? void 0 : w.renderRoot) == null ? void 0 : S.querySelector(
+    ".data-label"
+  ).textContent), a || (a = Pe(
+    (D = (C = l == null ? void 0 : l.source) == null ? void 0 : C.data) == null ? void 0 : D.label,
+    (P = (E = l == null ? void 0 : l.source) == null ? void 0 : E.element) == null ? void 0 : P.language
+  ), a = a || "Untitled");
+  const m = (I = ($ = l == null ? void 0 : l.source) == null ? void 0 : $.data) == null ? void 0 : I.type, r = (R = (O = l == null ? void 0 : l.source) == null ? void 0 : O.data) == null ? void 0 : R.subtype, d = Q(e.size, { type: m, subtype: r }), o = {};
+  [
+    [
+      "borderColor",
+      "--luzmo-draggable-data-item-level-border-color",
+      "--draggable-data-item-level-border-color"
+    ],
+    [
+      "backgroundColor",
+      "--luzmo-draggable-data-item-level-background-color",
+      "--draggable-data-item-level-background-color"
+    ],
+    [
+      "color",
+      "--luzmo-draggable-data-item-level-font-color",
+      "--draggable-data-item-level-font-color"
+    ],
+    [
+      "fontSize",
+      "--luzmo-draggable-data-item-level-label-font-size",
+      "--draggable-data-item-level-label-font-size"
+    ],
+    [
+      "height",
+      "--luzmo-draggable-data-item-level-height",
+      "--draggable-data-item-level-height"
+    ],
+    [
+      "borderRadius",
+      "--luzmo-draggable-data-item-level-border-radius",
+      "--draggable-data-item-level-border-radius"
+    ],
+    [
+      "fontFamily",
+      "--luzmo-draggable-data-item-level-font-family",
+      "--luzmo-font-family"
+    ],
+    [
+      "horizontalPadding",
+      "--luzmo-draggable-data-item-level-horizontal-padding",
+      "--draggable-data-item-level-horizontal-padding"
+    ],
+    [
+      "gap",
+      "--luzmo-draggable-data-item-level-gap",
+      "--draggable-data-item-level-gap"
+    ]
+  ].forEach(([h, W, X]) => {
+    const Z = F(e, W) || F(e, X);
+    o[h] = Z;
+  });
+  const u = document.createElement("div"), s = document.createElement("div");
+  if (u.innerHTML = a, !((j = (_ = l == null ? void 0 : l.source) == null ? void 0 : _.element) != null && j.sublevel)) {
+    const h = document.createElement("luzmo-icon");
+    h.icon = d, s.append(h);
+  }
+  return s.append(u), Object.assign(s.style, {
+    display: "flex",
+    alignItems: "center",
+    height: o.height,
+    border: `1px solid ${o.borderColor}`,
+    backgroundColor: o.backgroundColor,
+    borderRadius: o.borderRadius,
+    fontFamily: o.fontFamily,
+    fontSize: o.fontSize,
+    color: o.color,
+    padding: `0 ${o.horizontalPadding}`,
+    gap: o.gap
+  }), s;
+};
+var Oe = Object.defineProperty, n = (l, e, a, m) => {
+  for (var r = void 0, d = l.length - 1, o; d >= 0; d--)
+    (o = l[d]) && (r = o(e, a, r) || r);
+  return r && Oe(e, a, r), r;
+};
+const x = class x extends Ee(Ce, {
+  validSizes: ["s", "m", "l", "xl"],
+  noDefaultSize: !0
+}) {
+  constructor() {
+    super(...arguments), this.language = "en", this.data = {}, this.dataItemLevelDropped = (e) => {
+      this.dispatchEvent(
+        new CustomEvent("data-item-dropped", {
+          bubbles: !0,
+          composed: !0,
+          cancelable: !0,
+          detail: {
+            data: e
+          }
+        })
+      );
+    };
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._cleanupDraggable();
+  }
+  firstUpdated(e) {
+    this._cleanupDraggable = Y({
+      element: this,
+      canDrag: () => !this.disabled,
+      onDragStart: () => {
+        this.style.opacity = "0.5";
+      },
+      onDrop: () => {
+        this.style.opacity = "1", this.dataItemLevelDropped(this.data);
+      },
+      getInitialData: () => {
+        const a = { ...this.data };
+        return this.label && this.language && !this.sublevel && (a.label = {}, a.label[this.language] = this.label), this.description && this.language && (a.description = {}, a.description[this.language] = this.description), a;
+      },
+      onGenerateDragPreview: (a) => {
+        const m = a.nativeSetDragImage;
+        J({
+          render({ container: r }) {
+            const d = Ie(a);
+            r.append(d);
+          },
+          nativeSetDragImage: m
+        });
+      }
+    });
+  }
+  render() {
+    var m, r, d, o, u, s, b, c, v, z;
+    const e = this.label ?? ((r = (m = this.data) == null ? void 0 : m.label) == null ? void 0 : r[this.language]) ?? ((u = (d = this.data) == null ? void 0 : d.label) == null ? void 0 : u[Object.keys((o = this.data) == null ? void 0 : o.label)[0]]) ?? "Untitled", a = this.description ?? ((b = (s = this.data) == null ? void 0 : s.description) == null ? void 0 : b[this.language]) ?? ((z = (c = this.data) == null ? void 0 : c.description) == null ? void 0 : z[Object.keys((v = this.data) == null ? void 0 : v.description)[0]]);
+    return y`
+      <div class="draggable-data-item-level">
+        <div class="drag-handle-icon">
+          ${this.sublevel ? f(ke) : f(we)}
+        </div>
+        ${this.sublevel || this.hideTypeIcon ? "" : y`<div class="data-icon-type">
+              ${f(Q(this.size, this.data))}
+            </div>`}
+        <div class="data-label">${e}</div>
+        ${!this.sublevel && a ? y`<button class="data-description">
+              ${f(Se)}
+              <luzmo-tooltip self-managed placement="top" size=${this.size}>
+                ${a}
+              </luzmo-tooltip>
+            </button>` : ""}
+      </div>
+    `;
+  }
+};
+x.styles = De($e);
+let i = x;
+n([
+  g({ type: String, reflect: !0 })
+], i.prototype, "variant");
+n([
+  g({ type: Boolean, reflect: !0, attribute: "hide-type-icon" })
+], i.prototype, "hideTypeIcon");
+n([
+  g({ type: Boolean, reflect: !0 })
+], i.prototype, "sublevel");
+n([
+  g({ type: String, reflect: !0 })
+], i.prototype, "language");
+n([
+  g({ type: Boolean, reflect: !0 })
+], i.prototype, "disabled");
+n([
+  g({ type: String, reflect: !0 })
+], i.prototype, "label");
+n([
+  g({ type: String, reflect: !0 })
+], i.prototype, "description");
+n([
+  g({ type: Object })
+], i.prototype, "data");
+customElements.get("luzmo-draggable-data-item-level") || customElements.define(
+  "luzmo-draggable-data-item-level",
+  i
+);
+export {
+  i as LuzmoDraggableDataItemLevel
+};

package/components/dropdown-filter-options.config-D9dvPypF.js

@@ -0,0 +1,163 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Luzmo web components (“Luzmo Web Components”)
+ * must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account
+ * to use the Luzmo Web Components. This license terminates
+ * automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+const t = [
+  {
+    key: "general",
+    type: "group",
+    open: !0,
+    children: [
+      {
+        key: "display.title",
+        control: {
+          type: "switch",
+          label: "Title",
+          default: !1
+        }
+      },
+      {
+        key: "display.label",
+        control: {
+          type: "switch",
+          label: "Label",
+          default: !1
+        }
+      },
+      {
+        key: "multiselect",
+        control: {
+          type: "switch",
+          label: "Multiselect",
+          default: !1
+        }
+      },
+      {
+        key: "applyFiltersWithButton",
+        control: {
+          type: "switch",
+          label: "Filter with Apply button",
+          default: !1
+        },
+        visibleIf: ({ options: e }) => e == null ? void 0 : e.multiselect
+      },
+      {
+        key: "showCheckboxes",
+        control: {
+          type: "switch",
+          label: "Show checkboxes",
+          default: !0
+        },
+        visibleIf: ({ options: e }) => e == null ? void 0 : e.multiselect
+      },
+      {
+        key: "display.search",
+        control: {
+          type: "switch",
+          label: "Search",
+          default: !0
+        },
+        visibleIf: ({ options: e }) => !(e != null && e.multiselect)
+      },
+      {
+        key: "display.clear",
+        control: {
+          type: "switch",
+          label: "Show clear selection",
+          default: !0
+        },
+        visibleIf: ({ options: e }) => !(e != null && e.multiselect)
+      }
+    ]
+  },
+  {
+    key: "order",
+    type: "group",
+    open: !1,
+    children: [
+      {
+        key: "sort.direction",
+        control: {
+          type: "picker",
+          label: "Ordering",
+          default: "asc",
+          enum: ["asc", "desc"]
+        }
+      }
+    ]
+  },
+  {
+    key: "placeholder",
+    type: "group",
+    open: !0,
+    children: [
+      {
+        key: "display.placeholder",
+        control: {
+          type: "switch",
+          label: "Display",
+          default: !0
+        }
+      },
+      {
+        key: "placeholder",
+        control: {
+          type: "multi-language-field",
+          label: "Text",
+          placeholder: "Select..."
+        },
+        visibleIf: ({ options: e }) => {
+          var l;
+          return ((l = e == null ? void 0 : e.display) == null ? void 0 : l.placeholder) !== !1;
+        }
+      }
+    ]
+  },
+  {
+    key: "padding",
+    type: "group",
+    open: !1,
+    children: [
+      {
+        key: "padding.left",
+        control: {
+          label: "Padding left",
+          type: "number-field",
+          default: 16,
+          min: 0,
+          max: 100,
+          step: 1
+        }
+      },
+      {
+        key: "padding.right",
+        control: {
+          label: "Padding right",
+          type: "number-field",
+          default: 16,
+          min: 0,
+          max: 100,
+          step: 1
+        }
+      }
+    ]
+  }
+];
+export {
+  t as default
+};

package/components/dropdown-filter-options.config-DS-MORmq.cjs

@@ -0,0 +1,20 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Luzmo web components (“Luzmo Web Components”)
+ * must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account
+ * to use the Luzmo Web Components. This license terminates
+ * automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * 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 t=[{key:"general",type:"group",open:!0,children:[{key:"display.title",control:{type:"switch",label:"Title",default:!1}},{key:"display.label",control:{type:"switch",label:"Label",default:!1}},{key:"multiselect",control:{type:"switch",label:"Multiselect",default:!1}},{key:"applyFiltersWithButton",control:{type:"switch",label:"Filter with Apply button",default:!1},visibleIf:({options:e})=>e==null?void 0:e.multiselect},{key:"showCheckboxes",control:{type:"switch",label:"Show checkboxes",default:!0},visibleIf:({options:e})=>e==null?void 0:e.multiselect},{key:"display.search",control:{type:"switch",label:"Search",default:!0},visibleIf:({options:e})=>!(e!=null&&e.multiselect)},{key:"display.clear",control:{type:"switch",label:"Show clear selection",default:!0},visibleIf:({options:e})=>!(e!=null&&e.multiselect)}]},{key:"order",type:"group",open:!1,children:[{key:"sort.direction",control:{type:"picker",label:"Ordering",default:"asc",enum:["asc","desc"]}}]},{key:"placeholder",type:"group",open:!0,children:[{key:"display.placeholder",control:{type:"switch",label:"Display",default:!0}},{key:"placeholder",control:{type:"multi-language-field",label:"Text",placeholder:"Select..."},visibleIf:({options:e})=>{var l;return((l=e==null?void 0:e.display)==null?void 0:l.placeholder)!==!1}}]},{key:"padding",type:"group",open:!1,children:[{key:"padding.left",control:{label:"Padding left",type:"number-field",default:16,min:0,max:100,step:1}},{key:"padding.right",control:{label:"Padding right",type:"number-field",default:16,min:0,max:100,step:1}}]}];exports.default=t;

package/components/dropdown-filter-options.de-0HBcrwev.js

@@ -0,0 +1,82 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Luzmo web components (“Luzmo Web Components”)
+ * must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account
+ * to use the Luzmo Web Components. This license terminates
+ * automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+const e = {
+  name: "Dropdown-Filter",
+  groups: {
+    general: {
+      label: "Allgemein"
+    },
+    order: {
+      label: "Sortierung"
+    },
+    placeholder: {
+      label: "Platzhalter"
+    },
+    padding: {
+      label: "Abstand"
+    }
+  },
+  options: {
+    "display.title": {
+      label: "Titel"
+    },
+    "display.label": {
+      label: "Beschriftung"
+    },
+    multiselect: {
+      label: "Mehrfachauswahl"
+    },
+    applyFiltersWithButton: {
+      label: "Mit Anwenden-Button filtern"
+    },
+    showCheckboxes: {
+      label: "Kontrollkästchen anzeigen"
+    },
+    "display.search": {
+      label: "Suche"
+    },
+    "display.clear": {
+      label: "Auswahl löschen anzeigen"
+    },
+    "sort.direction": {
+      label: "Sortierung",
+      enum: {
+        asc: "Aufsteigend",
+        desc: "Absteigend"
+      }
+    },
+    "display.placeholder": {
+      label: "Anzeigen"
+    },
+    placeholder: {
+      label: "Text",
+      placeholder: "Auswählen..."
+    },
+    "padding.left": {
+      label: "Linker Abstand"
+    },
+    "padding.right": {
+      label: "Rechter Abstand"
+    }
+  }
+};
+export {
+  e as default
+};

package/components/dropdown-filter-options.de-WLFUtnO_.cjs

@@ -0,0 +1,20 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Luzmo web components (“Luzmo Web Components”)
+ * must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account
+ * to use the Luzmo Web Components. This license terminates
+ * automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * 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={name:"Dropdown-Filter",groups:{general:{label:"Allgemein"},order:{label:"Sortierung"},placeholder:{label:"Platzhalter"},padding:{label:"Abstand"}},options:{"display.title":{label:"Titel"},"display.label":{label:"Beschriftung"},multiselect:{label:"Mehrfachauswahl"},applyFiltersWithButton:{label:"Mit Anwenden-Button filtern"},showCheckboxes:{label:"Kontrollkästchen anzeigen"},"display.search":{label:"Suche"},"display.clear":{label:"Auswahl löschen anzeigen"},"sort.direction":{label:"Sortierung",enum:{asc:"Aufsteigend",desc:"Absteigend"}},"display.placeholder":{label:"Anzeigen"},placeholder:{label:"Text",placeholder:"Auswählen..."},"padding.left":{label:"Linker Abstand"},"padding.right":{label:"Rechter Abstand"}}};exports.default=e;

package/components/dropdown-filter-options.en-CNdmMsNW.js

@@ -0,0 +1,82 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Luzmo web components (“Luzmo Web Components”)
+ * must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account
+ * to use the Luzmo Web Components. This license terminates
+ * automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+const l = {
+  name: "Dropdown filter",
+  groups: {
+    general: {
+      label: "General"
+    },
+    order: {
+      label: "Order"
+    },
+    placeholder: {
+      label: "Placeholder"
+    },
+    padding: {
+      label: "Padding"
+    }
+  },
+  options: {
+    "display.title": {
+      label: "Title"
+    },
+    "display.label": {
+      label: "Label"
+    },
+    multiselect: {
+      label: "Multiselect"
+    },
+    applyFiltersWithButton: {
+      label: "Filter with Apply button"
+    },
+    showCheckboxes: {
+      label: "Show checkboxes"
+    },
+    "display.search": {
+      label: "Search"
+    },
+    "display.clear": {
+      label: "Show clear selection"
+    },
+    "sort.direction": {
+      label: "Ordering",
+      enum: {
+        asc: "Ascending",
+        desc: "Descending"
+      }
+    },
+    "display.placeholder": {
+      label: "Display"
+    },
+    placeholder: {
+      label: "Text",
+      placeholder: "Select..."
+    },
+    "padding.left": {
+      label: "Padding left"
+    },
+    "padding.right": {
+      label: "Padding right"
+    }
+  }
+};
+export {
+  l as default
+};