@luzmo/analytics-components-kit 1.0.1-alpha.1 → 1.0.1-alpha.10

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

@@ -0,0 +1,135 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2024 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 { t as b, s as p, l as h } from "../set-locale-DJYT4V7U.js";
+import { k as f, x as n, a as v, n as t } from "../property-B2F7x7Cz.js";
+import { m as x } from "../sized-mixin-BxMraZLS-B_y0PzR3.js";
+import { D as y } from "../periods.const-GHh5bPfs.js";
+import "../draggable-data-item-level/index.js";
+const z = () => {
+  if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
+    const o = document.createElement("style");
+    o.setAttribute("data-luzmo-vars", ""), o.textContent = 'html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-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-color-negative: #ca221c;--luzmo-color-negative-hover: #b3241f;--luzmo-color-negative-down: #9f231f;--luzmo-color-negative-focus: #b3241f;--luzmo-color-negative-rgb: 202, 34, 28;--luzmo-color-positive: rgb(20, 150, 101);--luzmo-color-positive-hover: rgb(17, 128, 86);--luzmo-color-positive-down: rgb(16, 105, 71);--luzmo-color-positive-focus: rgb(17, 128, 86);--luzmo-color-positive-rgb: 20, 150, 101;--luzmo-color-selected: rgb(110, 110, 110);--luzmo-color-selected-hover: rgb(70, 70, 70);--luzmo-color-selected-down: rgb(40, 40, 40);--luzmo-color-selected-focus: rgb(70, 70, 70);--luzmo-color-selected-hard: #1e1e1e;--luzmo-color-selected-hard-hover: rgb(0, 0, 0);--luzmo-color-selected-hard-down: rgb(0, 0, 0);--luzmo-color-selected-hard-focus: rgb(0, 0, 0);--luzmo-color-informative: #1a77e9;--luzmo-color-informative-rgb: 26, 119, 233;--luzmo-color-disabled: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(o);
+  }
+};
+z();
+const $ = ":host{--draggable-data-item-sublevels-margin-vertical: var(--luzmo-spacing-1);--draggable-data-item-sublevels-gap: 0}:host([size=s]){--draggable-data-item-sublevels-margin-vertical: var(--luzmo-spacing-1)}:host([size=l]){--draggable-data-item-sublevels-margin-vertical: var(--luzmo-spacing-2)}:host([size=xl]){--draggable-data-item-sublevels-margin-vertical: var(--luzmo-spacing-3)}.draggable-data-item-sublevels{display:flex;flex-direction:column;gap:var(--luzmo-draggable-data-item-sublevels-gap, var(--draggable-data-item-sublevels-gap));margin:var(--luzmo-draggable-data-item-sublevels-margin-vertical, var(--draggable-data-item-sublevels-margin-vertical)) 0}:host{box-sizing:border-box}";
+var w = Object.defineProperty, S = Object.getOwnPropertyDescriptor, r = (o, i, u, s) => {
+  for (var l = s > 1 ? void 0 : s ? S(i, u) : i, m = o.length - 1, d; m >= 0; m--)
+    (d = o[m]) && (l = (s ? d(i, u, l) : d(l)) || l);
+  return s && l && w(i, u, l), l;
+};
+let e = class extends x(f, {
+  validSizes: ["s", "m", "l", "xl"],
+  noDefaultSize: !0
+}) {
+  constructor() {
+    super(...arguments), this.language = "en", this.data = {};
+  }
+  willUpdate(o) {
+    o.has("language") && ([...b].includes(this.language) || this.language === "en") && (p(this.language), this.requestUpdate());
+  }
+  renderSublevels() {
+    var i, u, s, l, m;
+    let o;
+    if (((i = this.data) == null ? void 0 : i.type) === "datetime")
+      return o = ((u = this.data) == null ? void 0 : u.subtype) === "date" ? this.data.lowestLevel ?? 5 : this.data.lowestLevel ?? 9, n`
+        <div class="draggable-data-item-sublevels">
+          ${Array.from({ length: o }, (d, a) => {
+        const c = y[a].i18n(), g = { ...this.data, level: a + 1 };
+        return n`<luzmo-draggable-data-item-level
+              sublevel
+              .data=${g}
+              .language=${this.language}
+              .size=${this.size}
+              .variant=${this.variant}
+              .disabled=${this.disabled}
+              .label=${c}
+              ?hide-type-icon=${this.hideTypeIcon}
+            ></luzmo-draggable-data-item-level>`;
+      })}
+        </div>
+      `;
+    if (((s = this.data) == null ? void 0 : s.type) === "hierarchy" && ((m = (l = this.data) == null ? void 0 : l.hierarchyLevels) == null ? void 0 : m.length) > 2) {
+      const d = this.data.hierarchyLevels.filter((a) => (a == null ? void 0 : a.level) >= 1).map((a, c) => {
+        const g = { ...this.data, level: c, label: a.label };
+        return n`<luzmo-draggable-data-item-level
+            sublevel
+            .data=${g}
+            .language=${this.language}
+            .size=${this.size}
+            .variant=${this.variant}
+            .disabled=${this.disabled}
+            ?hide-type-icon=${this.hideTypeIcon}
+          ></luzmo-draggable-data-item-level>`;
+      });
+      return n`
+        <div class="draggable-data-item-sublevels">${d}</div>
+      `;
+    }
+    return n``;
+  }
+  render() {
+    return n`
+      <luzmo-draggable-data-item-level
+        .data=${this.data}
+        .language=${this.language}
+        .size=${this.size}
+        .variant=${this.variant}
+        .disabled=${this.disabled}
+        .label=${this.label}
+        .description=${this.description}
+        ?hide-type-icon=${this.hideTypeIcon}
+      ></luzmo-draggable-data-item-level>
+      ${this.hideSublevels ? "" : this.renderSublevels()}
+    `;
+  }
+};
+e.styles = v($);
+r([
+  t({ type: String, reflect: !0 })
+], e.prototype, "variant", 2);
+r([
+  t({ type: String, reflect: !0 })
+], e.prototype, "language", 2);
+r([
+  t({ type: Boolean, reflect: !0 })
+], e.prototype, "disabled", 2);
+r([
+  t({ type: Boolean, reflect: !0, attribute: "hide-sublevels" })
+], e.prototype, "hideSublevels", 2);
+r([
+  t({ type: Boolean, reflect: !0, attribute: "hide-type-icon" })
+], e.prototype, "hideTypeIcon", 2);
+r([
+  t({ type: String, reflect: !0 })
+], e.prototype, "label", 2);
+r([
+  t({ type: String, reflect: !0 })
+], e.prototype, "description", 2);
+r([
+  t({ type: Object })
+], e.prototype, "data", 2);
+e = r([
+  h()
+], e);
+customElements.get("luzmo-draggable-data-item") || customElements.define("luzmo-draggable-data-item", e);
+export {
+  e as LuzmoDraggableDataItem
+};

package/components/draggable-data-item-level/draggable-data-item-level.d.ts

@@ -0,0 +1,29 @@
+import '@luzmo/lucero/icon';
+import '@luzmo/lucero/tooltip';
+import { LuzmoElement } from '@luzmo/lucero/utils';
+import { PropertyValues, TemplateResult } from 'lit';
+declare const LuzmoDraggableDataItemLevel_base: typeof LuzmoElement & {
+    new (...args: any[]): import("@luzmo/lucero").SizedElementInterface;
+    prototype: import("@luzmo/lucero").SizedElementInterface;
+};
+/**
+ * @element luzmo-draggable-data-item-level
+ * @fires data-item-dropped - Announces that the draggable data item has been dropped
+ */
+export declare class LuzmoDraggableDataItemLevel extends LuzmoDraggableDataItemLevel_base {
+    static styles: import("lit").CSSResult;
+    variant?: 'highlight' | 'normal';
+    hideTypeIcon?: boolean;
+    sublevel?: boolean;
+    language: string;
+    disabled: boolean;
+    label: string;
+    description: string;
+    data: any;
+    private _cleanupDraggable;
+    disconnectedCallback(): void;
+    private dataItemLevelDropped;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    protected render(): TemplateResult;
+}
+export {};

package/components/draggable-data-item-level/helpers/calculate-type-icon.d.ts

@@ -0,0 +1,2 @@
+import { IconDefinition } from '@luzmo/icons';
+export declare const calculateIconType: (size: string, data: any) => IconDefinition;

package/components/draggable-data-item-level/helpers/generate-preview.d.ts

@@ -0,0 +1 @@
+export declare const generateDragPreview: (args: any) => HTMLDivElement;

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

@@ -0,0 +1,36 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2024 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 f=require("../get-css-variable-DLiZYZEi.cjs"),e=require("../luzmo-icons-XsFsTAl3.cjs");require("../index-h9T5DPIm.cjs");require("../index-ByjLd3bT.cjs");const i=require("../property-0L4eB11h.cjs"),F=require("../sized-mixin-BxMraZLS-DEFWqo8f.cjs"),M=require("../localize-DbobqcKs.cjs"),R=":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))}.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;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 )}: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}",d={array:{s:e.D0,m:e.w0,l:e.x0,xl:e.x0},coordinates:{s:e.A0,m:e.Z0,l:e.u0,xl:e.u0},currency:{s:e.V0,m:e.H0,l:e.p0,xl:e.p0},date:{s:e.a0,m:e.o0,l:e.t,xl:e.t},datetime:{s:e.n0,m:e.z0,l:e.l0,xl:e.l0},duration:{s:e.k0,m:e.S0,l:e.f0,xl:e.f0},hierarchy:{s:e.E0,m:e.P0,l:e.U0,xl:e.U0},image:{s:e.O0,m:e.Q0,l:e.N0,xl:e.N0},numeric:{s:e.X0,m:e.Y0,l:e._0,xl:e._0},time:{s:e.M2,m:e.L2,l:e.r2,xl:e.r2},topography:{s:e.W1,m:e.W1,l:e.W1,xl:e.W1},ipaddress:{s:e.x2,m:e.B2,l:e.F2,xl:e.F2}},j=(a,l)=>(l==null?void 0:l.type)==="array"?d.array[a]:(l==null?void 0:l.type)==="image"?d.image[a]:(l==null?void 0:l.type)==="spatial"?(l==null?void 0:l.subtype)==="topography"?d.topography[a]:d.coordinates[a]:(l==null?void 0:l.type)==="numeric"?(l==null?void 0:l.subtype)==="currency"?d.currency[a]:(l==null?void 0:l.subtype)==="duration"?d.duration[a]:d.numeric[a]:(l==null?void 0:l.type)==="datetime"?(l==null?void 0:l.subtype)==="time"?d.time[a]:(l==null?void 0:l.subtype)==="date"?d.date[a]:d.datetime[a]:(l==null?void 0:l.type)==="hierarchy"&&(l==null?void 0:l.subtype)==="ipaddress"?d.ipaddress[a]:d.hierarchy[a],U=a=>{var u,c,h,p,x,k,w,S,C,D,O,P,$,q,E,I,_;const l=a.source.element;let t="";(p=(h=(c=(u=a.source)==null?void 0:u.element)==null?void 0:c.renderRoot)==null?void 0:h.querySelector(".data-label"))!=null&&p.textContent&&(t=(w=(k=(x=a.source)==null?void 0:x.element)==null?void 0:k.renderRoot)==null?void 0:w.querySelector(".data-label").textContent),t||(t=M.localize((C=(S=a==null?void 0:a.source)==null?void 0:S.data)==null?void 0:C.label,(O=(D=a==null?void 0:a.source)==null?void 0:D.element)==null?void 0:O.language),t=t||"Untitled");const v=($=(P=a==null?void 0:a.source)==null?void 0:P.data)==null?void 0:$.type,o=(E=(q=a==null?void 0:a.source)==null?void 0:q.data)==null?void 0:E.subtype,n=j(l.size,{type:v,subtype:o}),r={};[["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(([z,T,V])=>{const B=f.getCssVariableValue(l,T)||f.getCssVariableValue(l,V);r[z]=B});const m=document.createElement("div"),s=document.createElement("div");if(m.innerHTML=t,!((_=(I=a==null?void 0:a.source)==null?void 0:I.element)!=null&&_.sublevel)){const z=document.createElement("luzmo-icon");z.icon=n,s.append(z)}return s.append(m),Object.assign(s.style,{display:"flex",alignItems:"center",height:r.height,border:`1px solid ${r.borderColor}`,backgroundColor:r.backgroundColor,borderRadius:r.borderRadius,fontFamily:r.fontFamily,fontSize:r.fontSize,color:r.color,padding:`0 ${r.horizontalPadding}`,gap:r.gap}),s};var W=Object.defineProperty,b=(a,l,t,v)=>{for(var o=void 0,n=a.length-1,r;n>=0;n--)(r=a[n])&&(o=r(l,t,o)||o);return o&&W(l,t,o),o};const y=class y extends F.m(i.kt,{validSizes:["s","m","l","xl"],noDefaultSize:!0}){constructor(){super(...arguments),this.language="en",this.data={},this.dataItemLevelDropped=l=>{this.dispatchEvent(new CustomEvent("data-item-dropped",{bubbles:!0,composed:!0,cancelable:!0,detail:{data:l}}))}}disconnectedCallback(){super.disconnectedCallback(),this._cleanupDraggable()}firstUpdated(l){this._cleanupDraggable=f.draggable({element:this,canDrag:()=>!this.disabled,onDragStart:()=>{this.style.opacity="0.5"},onDrop:()=>{this.style.opacity="1",this.dataItemLevelDropped(this.data)},getInitialData:()=>{const t={...this.data};return this.label&&this.language&&!this.sublevel&&(t.label={},t.label[this.language]=this.label),this.description&&this.language&&(t.description={},t.description[this.language]=this.description),t},onGenerateDragPreview:t=>{const v=t.nativeSetDragImage;f.setCustomNativeDragPreview({render({container:o}){const n=U(t);o.append(n)},nativeSetDragImage:v})}})}render(){var v,o,n,r,m,s,u,c,h,p;const l=this.label??((o=(v=this.data)==null?void 0:v.label)==null?void 0:o[this.language])??((m=(n=this.data)==null?void 0:n.label)==null?void 0:m[Object.keys((r=this.data)==null?void 0:r.label)[0]])??"Untitled",t=this.description??((u=(s=this.data)==null?void 0:s.description)==null?void 0:u[this.language])??((p=(c=this.data)==null?void 0:c.description)==null?void 0:p[Object.keys((h=this.data)==null?void 0:h.description)[0]]);return i.x`
+      <div class="draggable-data-item-level">
+        <div class="drag-handle-icon">
+          ${this.sublevel?e.O2(e.b0):e.O2(e.W)}
+        </div>
+        ${this.sublevel||this.hideTypeIcon?"":i.x`<div class="data-icon-type">
+              ${e.O2(j(this.size,this.data))}
+            </div>`}
+        <div class="data-label">${l}</div>
+        ${t?i.x`<button class="data-description">
+              ${e.O2(e.p1)}
+              <luzmo-tooltip self-managed placement="top" size=${this.size}>
+                ${t}
+              </luzmo-tooltip>
+            </button>`:""}
+      </div>
+    `}};y.styles=i.r$1(R);let g=y;b([i.n({type:String,reflect:!0})],g.prototype,"variant");b([i.n({type:Boolean,reflect:!0,attribute:"hide-type-icon"})],g.prototype,"hideTypeIcon");b([i.n({type:Boolean,reflect:!0})],g.prototype,"sublevel");b([i.n({type:String,reflect:!0})],g.prototype,"language");b([i.n({type:Boolean,reflect:!0})],g.prototype,"disabled");b([i.n({type:String,reflect:!0})],g.prototype,"label");b([i.n({type:String,reflect:!0})],g.prototype,"description");b([i.n({type:Object})],g.prototype,"data");customElements.get("luzmo-draggable-data-item-level")||customElements.define("luzmo-draggable-data-item-level",g);exports.LuzmoDraggableDataItemLevel=g;

package/components/draggable-data-item-level/index.d.ts

@@ -0,0 +1,7 @@
+import { LuzmoDraggableDataItemLevel } from './draggable-data-item-level';
+declare global {
+    interface HTMLElementTagNameMap {
+        'luzmo-draggable-data-item-level': LuzmoDraggableDataItemLevel;
+    }
+}
+export { LuzmoDraggableDataItemLevel } from './draggable-data-item-level';

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 © 2024 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 U, a as Y, s as J } from "../get-css-variable-Bhbr-Kr1.js";
+import { o as B, s as ee, t as le, N as F, Q as ae, u as oe, y as p, z as H, Z as re, A as te, H as T, K as ie, V as de, L as V, R as ge, X as ne, a0 as A, a1 as me, a2 as se, a3 as N, a4 as ue, a5 as be, a6 as q, a7 as ce, a8 as ve, a9 as M, aa as ze, ab as he, ac as G, ad as pe, ae as fe, af as L, ag as ye, ah as xe, O as f, ai as ke, W as we, p as Se } from "../luzmo-icons-BE2T8vWu.js";
+import "../index-ymMEPngt.js";
+import "../index-C8IL2IZ6.js";
+import { k as Ce, a as De, x as y, n as g } from "../property-B2F7x7Cz.js";
+import { m as Ee } from "../sized-mixin-BxMraZLS-B_y0PzR3.js";
+import { l as Pe } from "../localize-B6AsX_Zv.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-color-negative: #ca221c;--luzmo-color-negative-hover: #b3241f;--luzmo-color-negative-down: #9f231f;--luzmo-color-negative-focus: #b3241f;--luzmo-color-negative-rgb: 202, 34, 28;--luzmo-color-positive: rgb(20, 150, 101);--luzmo-color-positive-hover: rgb(17, 128, 86);--luzmo-color-positive-down: rgb(16, 105, 71);--luzmo-color-positive-focus: rgb(17, 128, 86);--luzmo-color-positive-rgb: 20, 150, 101;--luzmo-color-selected: rgb(110, 110, 110);--luzmo-color-selected-hover: rgb(70, 70, 70);--luzmo-color-selected-down: rgb(40, 40, 40);--luzmo-color-selected-focus: rgb(70, 70, 70);--luzmo-color-selected-hard: #1e1e1e;--luzmo-color-selected-hard-hover: rgb(0, 0, 0);--luzmo-color-selected-hard-down: rgb(0, 0, 0);--luzmo-color-selected-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))}.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;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 )}: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: B,
+    xl: B
+  },
+  coordinates: {
+    s: te,
+    m: re,
+    l: H,
+    xl: H
+  },
+  currency: {
+    s: de,
+    m: ie,
+    l: T,
+    xl: T
+  },
+  date: {
+    s: ve,
+    m: ce,
+    l: q,
+    xl: q
+  },
+  datetime: {
+    s: he,
+    m: ze,
+    l: M,
+    xl: M
+  },
+  duration: {
+    s: ne,
+    m: ge,
+    l: V,
+    xl: V
+  },
+  hierarchy: {
+    s: xe,
+    m: ye,
+    l: L,
+    xl: L
+  },
+  image: {
+    s: oe,
+    m: ae,
+    l: F,
+    xl: F
+  },
+  numeric: {
+    s: se,
+    m: me,
+    l: A,
+    xl: A
+  },
+  time: {
+    s: be,
+    m: ue,
+    l: N,
+    xl: N
+  },
+  topography: {
+    s: p,
+    m: p,
+    l: p,
+    xl: p
+  },
+  ipaddress: {
+    s: fe,
+    m: pe,
+    l: G,
+    xl: G
+  }
+}, 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], Oe = (l) => {
+  var b, c, v, z, k, w, S, C, D, E, P, $, O, I, 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 = (O = ($ = l == null ? void 0 : l.source) == null ? void 0 : $.data) == null ? void 0 : O.type, r = (R = (I = l == null ? void 0 : l.source) == null ? void 0 : I.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 = U(e, W) || U(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 Ie = 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 && Ie(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 = Oe(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>
+        ${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/droppable-slot/droppable-slot.d.ts

@@ -0,0 +1,49 @@
+import { Placement } from '@floating-ui/dom';
+import '@luzmo/lucero/tooltip';
+import { LuzmoElement } from '@luzmo/lucero/utils';
+import { PropertyValues } from 'lit';
+import './../slot-menu';
+declare const LuzmoDroppableSlot_base: typeof LuzmoElement & {
+    new (...args: any[]): import("@luzmo/lucero").SizedElementInterface;
+    prototype: import("@luzmo/lucero").SizedElementInterface;
+};
+/**
+ * @element luzmo-droppable-slot
+ * @fires slot-contents-changed - Announces that the slot contents has changed
+ */
+export declare class LuzmoDroppableSlot extends LuzmoDroppableSlot_base {
+    static styles: import("lit").CSSResult;
+    private _loadSlotsConfig;
+    private _itemTypeLoaded?;
+    private _slotsConfig?;
+    itemType?: string;
+    slotName?: string;
+    slotConfiguration: any;
+    slotContents: any;
+    label?: string;
+    language: string;
+    /**
+     * The type of config interaction
+     */
+    menu: 'default' | 'popup' | 'draggable' | 'event-only';
+    /**
+     * Placement of the slot menu. Only relevant for 'popup' and 'draggable' menu type
+     */
+    placement: Placement;
+    hideDelete?: string;
+    hideConfiguration?: string;
+    private _droppableSlotLabelElement;
+    private changedSlotContents;
+    private _cleanupDroppable;
+    private _currentSlotContents;
+    disconnectedCallback(): void;
+    private emptySlotContents;
+    protected willUpdate(_changedProperties: PropertyValues): void;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    protected updated(): void;
+    private _onSlotMenuChanges;
+    private createFullLabel;
+    droppableSlotMarkup(): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1> | undefined;
+}
+export {};