@luzmo/analytics-components-kit 1.0.1-alpha.41 → 1.0.1-alpha.42

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

@@ -17,20 +17,20 @@
  * 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 c=require("../localized-decorator-SOrjcPab.cjs"),m=require("../set-locale-Cam8nRIW.cjs"),v=require("../periods.const-CfXsouLz.cjs"),e=require("../property-BCb4Kybn.cjs"),h=require("../focusable-BTJYY_Mf.cjs"),p=require("../sized-mixin-BNtmplgF.cjs");require("../draggable-data-item-level/index.cjs");const z=":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 y=Object.defineProperty,D=Object.getOwnPropertyDescriptor,l=(d,t,s,r)=>{for(var a=r>1?void 0:r?D(t,s):t,g=d.length-1,o;g>=0;g--)(o=d[g])&&(a=(r?o(t,s,a):o(a))||a);return r&&a&&y(t,s,a),a};exports.LuzmoDraggableDataItem=class extends p.SizedMixin(h.LuzmoElement,{validSizes:["s","m","l","xl"],noDefaultSize:!0}){constructor(){super(...arguments),this.language="en",this.data={}}willUpdate(t){t.has("language")&&this.language!==m.getLocale()&&([...m.targetLocales].includes(this.language??"en")||this.language==="en")&&m.setLocale(this.language)}renderSublevels(){var s,r,a,g,o;let t;if(((s=this.data)==null?void 0:s.type)==="datetime")return t=((r=this.data)==null?void 0:r.subtype)==="date"?this.data.lowestLevel??5:this.data.lowestLevel??9,e.x`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("../localized-decorator-SOrjcPab.cjs"),m=require("../set-locale-Cam8nRIW.cjs"),v=require("../periods.const-CfXsouLz.cjs"),e=require("../property-BCb4Kybn.cjs"),p=require("../focusable-BTJYY_Mf.cjs"),h=require("../sized-mixin-BNtmplgF.cjs");require("../draggable-data-item-level/index.cjs");const y=":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 z=Object.defineProperty,D=Object.getOwnPropertyDescriptor,t=(n,l,s,i)=>{for(var a=i>1?void 0:i?D(l,s):l,g=n.length-1,o;g>=0;g--)(o=n[g])&&(a=(i?o(l,s,a):o(a))||a);return i&&a&&z(l,s,a),a};exports.LuzmoDraggableDataItem=class extends h.SizedMixin(p.LuzmoElement,{validSizes:["s","m","l","xl"],noDefaultSize:!0}){constructor(){super(...arguments),this.language="en",this.data={}}willUpdate(l){l.has("language")&&this.language!==m.getLocale()&&([...m.targetLocales].includes(this.language??"en")||this.language==="en")&&m.setLocale(this.language)}renderSublevels(){var s,i,a,g,o;let l;if(((s=this.data)==null?void 0:s.type)==="datetime")return l=((i=this.data)==null?void 0:i.subtype)==="date"?this.data.lowestLevel??5:this.data.lowestLevel??9,e.x`
         <div class="draggable-data-item-sublevels">
-          ${Array.from({length:t},(b,i)=>{const n=v.DATETIME_LEVELS[i].i18n(),u={...this.data,level:i+1};return e.x`<luzmo-draggable-data-item-level
+          ${Array.from({length:l},(b,r)=>{const d=v.DATETIME_LEVELS[r].i18n(),u={...this.data,level:r+1};return e.x`<luzmo-draggable-data-item-level
               sublevel
               .data=${u}
               .language=${this.language}
               .size=${this.size}
               .variant=${this.variant}
               .disabled=${this.disabled}
-              .label=${n}
+              .label=${d}
               ?hide-type-icon=${this.hideTypeIcon}
             ></luzmo-draggable-data-item-level>`})}
         </div>
-      `;if(((a=this.data)==null?void 0:a.type)==="hierarchy"&&((o=(g=this.data)==null?void 0:g.hierarchyLevels)==null?void 0:o.length)>2){const b=this.data.hierarchyLevels.filter(i=>(i==null?void 0:i.level)>=1).map((i,n)=>{const u={...this.data,level:n,label:i.label};return e.x`<luzmo-draggable-data-item-level
+      `;if(((a=this.data)==null?void 0:a.type)==="hierarchy"&&((o=(g=this.data)==null?void 0:g.hierarchyLevels)==null?void 0:o.length)>2){const b=this.data.hierarchyLevels.filter(r=>(r==null?void 0:r.level)>=1).map((r,d)=>{const u={...this.data,level:d,label:r.label};return e.x`<luzmo-draggable-data-item-level
             sublevel
             .data=${u}
             .language=${this.language}
@@ -49,7 +49,8 @@
         .disabled=${this.disabled}
         .label=${this.label}
         .description=${this.description}
+        .secondaryIconType=${this.secondaryIconType}
         ?hide-type-icon=${this.hideTypeIcon}
       ></luzmo-draggable-data-item-level>
       ${this.hideSublevels?"":this.renderSublevels()}
-    `}};exports.LuzmoDraggableDataItem.styles=e.r(z);l([e.n({type:String,reflect:!0})],exports.LuzmoDraggableDataItem.prototype,"variant",2);l([e.n({type:String,reflect:!0})],exports.LuzmoDraggableDataItem.prototype,"language",2);l([e.n({type:Boolean,reflect:!0})],exports.LuzmoDraggableDataItem.prototype,"disabled",2);l([e.n({type:Boolean,reflect:!0,attribute:"hide-sublevels"})],exports.LuzmoDraggableDataItem.prototype,"hideSublevels",2);l([e.n({type:Boolean,reflect:!0,attribute:"hide-type-icon"})],exports.LuzmoDraggableDataItem.prototype,"hideTypeIcon",2);l([e.n({type:String,reflect:!0})],exports.LuzmoDraggableDataItem.prototype,"label",2);l([e.n({type:String,reflect:!0})],exports.LuzmoDraggableDataItem.prototype,"description",2);l([e.n({type:Object})],exports.LuzmoDraggableDataItem.prototype,"data",2);exports.LuzmoDraggableDataItem=l([c.localized()],exports.LuzmoDraggableDataItem);customElements.get("luzmo-draggable-data-item")||customElements.define("luzmo-draggable-data-item",exports.LuzmoDraggableDataItem);
+    `}};exports.LuzmoDraggableDataItem.styles=e.r(y);t([e.n({type:String,reflect:!0})],exports.LuzmoDraggableDataItem.prototype,"variant",2);t([e.n({type:String,reflect:!0})],exports.LuzmoDraggableDataItem.prototype,"language",2);t([e.n({type:Boolean,reflect:!0})],exports.LuzmoDraggableDataItem.prototype,"disabled",2);t([e.n({type:Boolean,reflect:!0,attribute:"hide-sublevels"})],exports.LuzmoDraggableDataItem.prototype,"hideSublevels",2);t([e.n({type:Boolean,reflect:!0,attribute:"hide-type-icon"})],exports.LuzmoDraggableDataItem.prototype,"hideTypeIcon",2);t([e.n({type:String,reflect:!0,attribute:"secondary-icon-type"})],exports.LuzmoDraggableDataItem.prototype,"secondaryIconType",2);t([e.n({type:String,reflect:!0})],exports.LuzmoDraggableDataItem.prototype,"label",2);t([e.n({type:String,reflect:!0})],exports.LuzmoDraggableDataItem.prototype,"description",2);t([e.n({type:Object})],exports.LuzmoDraggableDataItem.prototype,"data",2);exports.LuzmoDraggableDataItem=t([c.localized()],exports.LuzmoDraggableDataItem);customElements.get("luzmo-draggable-data-item")||customElements.define("luzmo-draggable-data-item",exports.LuzmoDraggableDataItem);

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

@@ -20,8 +20,8 @@
 import { l as b } from "../localized-decorator-DNr1P1m0.js";
 import { g as p, t as h, s as f } from "../set-locale-DbEAMqUs.js";
 import { D as v } from "../periods.const-C89NNRX-.js";
-import { x as n, r as x, n as t } from "../property-Dn4zSyxu.js";
-import { L as y } from "../focusable-BXhQz3_k.js";
+import { x as n, r as y, n as a } from "../property-Dn4zSyxu.js";
+import { L as x } from "../focusable-BXhQz3_k.js";
 import { S as $ } from "../sized-mixin-BR_Ii7le.js";
 import "../draggable-data-item-level/index.js";
 const z = () => {
@@ -37,7 +37,7 @@ var S = Object.defineProperty, L = Object.getOwnPropertyDescriptor, r = (o, i, u
     (d = o[m]) && (l = (s ? d(i, u, l) : d(l)) || l);
   return s && l && S(i, u, l), l;
 };
-let e = class extends $(y, {
+let e = class extends $(x, {
   validSizes: ["s", "m", "l", "xl"],
   noDefaultSize: !0
 }) {
@@ -53,8 +53,8 @@ let e = class extends $(y, {
     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 = v[a].i18n(), g = { ...this.data, level: a + 1 };
+          ${Array.from({ length: o }, (d, t) => {
+        const c = v[t].i18n(), g = { ...this.data, level: t + 1 };
         return n`<luzmo-draggable-data-item-level
               sublevel
               .data=${g}
@@ -69,8 +69,8 @@ let e = class extends $(y, {
         </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 };
+      const d = this.data.hierarchyLevels.filter((t) => (t == null ? void 0 : t.level) >= 1).map((t, c) => {
+        const g = { ...this.data, level: c, label: t.label };
         return n`<luzmo-draggable-data-item-level
             sublevel
             .data=${g}
@@ -97,36 +97,40 @@ let e = class extends $(y, {
         .disabled=${this.disabled}
         .label=${this.label}
         .description=${this.description}
+        .secondaryIconType=${this.secondaryIconType}
         ?hide-type-icon=${this.hideTypeIcon}
       ></luzmo-draggable-data-item-level>
       ${this.hideSublevels ? "" : this.renderSublevels()}
     `;
   }
 };
-e.styles = x(w);
+e.styles = y(w);
 r([
-  t({ type: String, reflect: !0 })
+  a({ type: String, reflect: !0 })
 ], e.prototype, "variant", 2);
 r([
-  t({ type: String, reflect: !0 })
+  a({ type: String, reflect: !0 })
 ], e.prototype, "language", 2);
 r([
-  t({ type: Boolean, reflect: !0 })
+  a({ type: Boolean, reflect: !0 })
 ], e.prototype, "disabled", 2);
 r([
-  t({ type: Boolean, reflect: !0, attribute: "hide-sublevels" })
+  a({ type: Boolean, reflect: !0, attribute: "hide-sublevels" })
 ], e.prototype, "hideSublevels", 2);
 r([
-  t({ type: Boolean, reflect: !0, attribute: "hide-type-icon" })
+  a({ type: Boolean, reflect: !0, attribute: "hide-type-icon" })
 ], e.prototype, "hideTypeIcon", 2);
 r([
-  t({ type: String, reflect: !0 })
+  a({ type: String, reflect: !0, attribute: "secondary-icon-type" })
+], e.prototype, "secondaryIconType", 2);
+r([
+  a({ type: String, reflect: !0 })
 ], e.prototype, "label", 2);
 r([
-  t({ type: String, reflect: !0 })
+  a({ type: String, reflect: !0 })
 ], e.prototype, "description", 2);
 r([
-  t({ type: Object })
+  a({ type: Object })
 ], e.prototype, "data", 2);
 e = r([
   b()

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

@@ -9,6 +9,7 @@ declare const LuzmoDraggableDataItemLevel_base: typeof LuzmoElement & {
 /**
  * @element luzmo-draggable-data-item-level
  * @fires data-item-dropped - Announces that the draggable data item has been dropped
+ * @fires data-item-drag-started - Announces that the drag is started on the data item
  */
 export declare class LuzmoDraggableDataItemLevel extends LuzmoDraggableDataItemLevel_base {
     static styles: import("lit").CSSResult;
@@ -19,10 +20,12 @@ export declare class LuzmoDraggableDataItemLevel extends LuzmoDraggableDataItemL
     disabled: boolean;
     label: string;
     description: string;
+    secondaryIconType?: 'derived' | 'formula';
     data: any;
     private _cleanupDraggable;
     disconnectedCallback(): void;
     private dataItemLevelDropped;
+    private dataItemLevelDragStarted;
     protected firstUpdated(_changedProperties: PropertyValues): void;
     protected render(): TemplateResult;
 }

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

@@ -17,20 +17,25 @@
  * 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 p=require("../get-css-variable-DLiZYZEi.cjs"),b=require("../luzmo-icons-B_3XTuMC.cjs");require("../index-DSQyBS9Z.cjs");require("../index-CYeQkVeJ.cjs");const r=require("../property-BCb4Kybn.cjs"),M=require("../focusable-BTJYY_Mf.cjs"),T=require("../sized-mixin-BNtmplgF.cjs"),O=require("../calculate-data-item-icon-CjHO4KtA.cjs"),B=require("../localize-r7ALOUy_.cjs"),F=":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}",U=e=>{var s,c,u,h,y,k,w,x,D,S,C,I,q,P,$,E,j;const d=e.source.element;let a="";(h=(u=(c=(s=e.source)==null?void 0:s.element)==null?void 0:c.renderRoot)==null?void 0:u.querySelector(".data-label"))!=null&&h.textContent&&(a=(w=(k=(y=e.source)==null?void 0:y.element)==null?void 0:k.renderRoot)==null?void 0:w.querySelector(".data-label").textContent),a||(a=B.localize((D=(x=e==null?void 0:e.source)==null?void 0:x.data)==null?void 0:D.label,(C=(S=e==null?void 0:e.source)==null?void 0:S.element)==null?void 0:C.language),a=a||"Untitled");const n=(q=(I=e==null?void 0:e.source)==null?void 0:I.data)==null?void 0:q.type,t=($=(P=e==null?void 0:e.source)==null?void 0:P.data)==null?void 0:$.subtype,i=O.calculateDataItemIcon({type:n,subtype:t},d.size),l={};[["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,_,R])=>{const V=p.getCssVariableValue(d,_)||p.getCssVariableValue(d,R);l[z]=V});const m=document.createElement("div"),v=document.createElement("div");if(m.innerHTML=a,!((j=(E=e==null?void 0:e.source)==null?void 0:E.element)!=null&&j.sublevel)){const z=document.createElement("luzmo-icon");z.icon=i,v.append(z)}return v.append(m),Object.assign(v.style,{display:"flex",alignItems:"center",height:l.height,border:`1px solid ${l.borderColor}`,backgroundColor:l.backgroundColor,borderRadius:l.borderRadius,fontFamily:l.fontFamily,fontSize:l.fontSize,color:l.color,padding:`0 ${l.horizontalPadding}`,gap:l.gap}),v};var L=Object.defineProperty,g=(e,d,a,n)=>{for(var t=void 0,i=e.length-1,l;i>=0;i--)(l=e[i])&&(t=l(d,a,t)||t);return t&&L(d,a,t),t};const f=class f extends T.SizedMixin(M.LuzmoElement,{validSizes:["s","m","l","xl"],noDefaultSize:!0}){constructor(){super(...arguments),this.language="en",this.data={},this.dataItemLevelDropped=d=>{this.dispatchEvent(new CustomEvent("data-item-dropped",{bubbles:!0,composed:!0,cancelable:!0,detail:{data:d}}))}}disconnectedCallback(){super.disconnectedCallback(),this._cleanupDraggable()}firstUpdated(d){this._cleanupDraggable=p.draggable({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 n=a.nativeSetDragImage;p.setCustomNativeDragPreview({render({container:t}){const i=U(a);t.append(i)},nativeSetDragImage:n})}})}render(){var n,t,i,l,m,v,s,c,u,h;const d=this.label??((t=(n=this.data)==null?void 0:n.label)==null?void 0:t[this.language])??((m=(i=this.data)==null?void 0:i.label)==null?void 0:m[Object.keys((l=this.data)==null?void 0:l.label)[0]])??"Untitled",a=this.description??((s=(v=this.data)==null?void 0:v.description)==null?void 0:s[this.language])??((h=(c=this.data)==null?void 0:c.description)==null?void 0:h[Object.keys((u=this.data)==null?void 0:u.description)[0]]);return r.x`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("../get-css-variable-DLiZYZEi.cjs"),n=require("../luzmo-icons-CP__dRRM.cjs");require("../index-DSQyBS9Z.cjs");require("../index-CYeQkVeJ.cjs");const t=require("../property-BCb4Kybn.cjs"),V=require("../focusable-BTJYY_Mf.cjs"),L=require("../sized-mixin-BNtmplgF.cjs"),f=require("../calculate-data-item-icon-C_3QUGmB.cjs"),M=require("../localize-r7ALOUy_.cjs"),B=":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;position:relative}.with-secondary-icon{clip-path:polygon(0 0,60% 0,65% 60%,100% 65%,100% 100%,0 100%)}.secondary-icon{position:absolute;bottom:45%;left:70%;width:auto;font-size:.75em;line-height:1}.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}",F=e=>{var m,c,u,h,z,w,x,I,S,D,C,$,q,E,P,T,j;const d=e.source.element;let a="";(h=(u=(c=(m=e.source)==null?void 0:m.element)==null?void 0:c.renderRoot)==null?void 0:u.querySelector(".data-label"))!=null&&h.textContent&&(a=(x=(w=(z=e.source)==null?void 0:z.element)==null?void 0:w.renderRoot)==null?void 0:x.querySelector(".data-label").textContent),a||(a=M.localize((S=(I=e==null?void 0:e.source)==null?void 0:I.data)==null?void 0:S.label,(C=(D=e==null?void 0:e.source)==null?void 0:D.element)==null?void 0:C.language),a=a||"Untitled");const v=(q=($=e==null?void 0:e.source)==null?void 0:$.data)==null?void 0:q.type,r=(P=(E=e==null?void 0:e.source)==null?void 0:E.data)==null?void 0:P.subtype,i=f.calculateDataItemIcon({type:v,subtype:r},d.size),l={};[["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(([p,O,_])=>{const R=y.getCssVariableValue(d,O)||y.getCssVariableValue(d,_);l[p]=R});const s=document.createElement("div"),b=document.createElement("div");if(s.innerHTML=a,!((j=(T=e==null?void 0:e.source)==null?void 0:T.element)!=null&&j.sublevel)){const p=document.createElement("luzmo-icon");p.icon=i,b.append(p)}return b.append(s),Object.assign(b.style,{display:"flex",alignItems:"center",height:l.height,border:`1px solid ${l.borderColor}`,backgroundColor:l.backgroundColor,borderRadius:l.borderRadius,fontFamily:l.fontFamily,fontSize:l.fontSize,color:l.color,padding:`0 ${l.horizontalPadding}`,gap:l.gap}),b};var U=Object.defineProperty,g=(e,d,a,v)=>{for(var r=void 0,i=e.length-1,l;i>=0;i--)(l=e[i])&&(r=l(d,a,r)||r);return r&&U(d,a,r),r};const k=class k extends L.SizedMixin(V.LuzmoElement,{validSizes:["s","m","l","xl"],noDefaultSize:!0}){constructor(){super(...arguments),this.language="en",this.data={},this.dataItemLevelDropped=d=>{this.dispatchEvent(new CustomEvent("data-item-dropped",{bubbles:!0,composed:!0,cancelable:!0,detail:{data:d}}))},this.dataItemLevelDragStarted=()=>{this.dispatchEvent(new CustomEvent("data-item-drag-started",{bubbles:!0,composed:!0,cancelable:!0,detail:{data:this.data}}))}}disconnectedCallback(){super.disconnectedCallback(),this._cleanupDraggable()}firstUpdated(d){this._cleanupDraggable=y.draggable({element:this,canDrag:()=>!this.disabled,onDragStart:()=>{this.style.opacity="0.5",this.dataItemLevelDragStarted()},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 v=a.nativeSetDragImage;y.setCustomNativeDragPreview({render({container:r}){const i=F(a);r.append(i)},nativeSetDragImage:v})}})}render(){var r,i,l,s,b,m,c,u,h,z;const d=this.label??((i=(r=this.data)==null?void 0:r.label)==null?void 0:i[this.language])??((b=(l=this.data)==null?void 0:l.label)==null?void 0:b[Object.keys((s=this.data)==null?void 0:s.label)[0]])??"Untitled",a=this.description??((c=(m=this.data)==null?void 0:m.description)==null?void 0:c[this.language])??((z=(u=this.data)==null?void 0:u.description)==null?void 0:z[Object.keys((h=this.data)==null?void 0:h.description)[0]]),v=this.secondaryIconType?f.calculateDataItemSecondaryIcon(this.secondaryIconType,this.size):void 0;return t.x`
       <div class="draggable-data-item-level">
         <div class="drag-handle-icon">
-          ${this.sublevel?b.p3(b.b0):b.p3(b.W)}
+          ${this.sublevel?n.y3(n.b0):n.y3(n.W)}
         </div>
-        ${this.sublevel||this.hideTypeIcon?"":r.x`<div class="data-icon-type">
-              ${b.p3(O.calculateDataItemIcon(this.data,this.size))}
+        ${this.sublevel||this.hideTypeIcon?"":t.x`<div class="data-icon-type">
+              <div class=${this.secondaryIconType?"with-secondary-icon":""}>
+                ${n.y3(f.calculateDataItemIcon(this.data,this.size))}
+              </div>
+              ${v?t.x`<div class="secondary-icon">
+                    ${n.y3(v)}
+                  </div>`:""}
             </div>`}
         <div class="data-label">${d}</div>
-        ${!this.sublevel&&a?r.x`<button class="data-description">
-              ${b.p3(b.p1)}
+        ${!this.sublevel&&a?t.x`<button class="data-description">
+              ${n.y3(n.p1)}
               <luzmo-tooltip self-managed placement="top" size=${this.size}>
                 ${a}
               </luzmo-tooltip>
             </button>`:""}
       </div>
-    `}};f.styles=r.r(F);let o=f;g([r.n({type:String,reflect:!0})],o.prototype,"variant");g([r.n({type:Boolean,reflect:!0,attribute:"hide-type-icon"})],o.prototype,"hideTypeIcon");g([r.n({type:Boolean,reflect:!0})],o.prototype,"sublevel");g([r.n({type:String,reflect:!0})],o.prototype,"language");g([r.n({type:Boolean,reflect:!0})],o.prototype,"disabled");g([r.n({type:String,reflect:!0})],o.prototype,"label");g([r.n({type:String,reflect:!0})],o.prototype,"description");g([r.n({type:Object})],o.prototype,"data");customElements.get("luzmo-draggable-data-item-level")||customElements.define("luzmo-draggable-data-item-level",o);exports.LuzmoDraggableDataItemLevel=o;
+    `}};k.styles=t.r(B);let o=k;g([t.n({type:String,reflect:!0})],o.prototype,"variant");g([t.n({type:Boolean,reflect:!0,attribute:"hide-type-icon"})],o.prototype,"hideTypeIcon");g([t.n({type:Boolean,reflect:!0})],o.prototype,"sublevel");g([t.n({type:String,reflect:!0})],o.prototype,"language");g([t.n({type:Boolean,reflect:!0})],o.prototype,"disabled");g([t.n({type:String,reflect:!0})],o.prototype,"label");g([t.n({type:String,reflect:!0})],o.prototype,"description");g([t.n({type:String,reflect:!0,attribute:"secondary-icon-type"})],o.prototype,"secondaryIconType");g([t.n({type:Object})],o.prototype,"data");customElements.get("luzmo-draggable-data-item-level")||customElements.define("luzmo-draggable-data-item-level",o);exports.LuzmoDraggableDataItemLevel=o;

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

@@ -17,33 +17,33 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { g as R, d as H, s as M } from "../get-css-variable-YlLiVgo8.js";
-import { a3 as h, ac as T, a9 as V, a5 as A } from "../luzmo-icons-v9hKZ3HV.js";
+import { g as O, d as L, s as q } from "../get-css-variable-YlLiVgo8.js";
+import { a7 as h, ag as H, ad as M, a9 as V } from "../luzmo-icons-B2K7AcCF.js";
 import "../index-BC1LV3vH.js";
 import "../index-BmshD32H.js";
-import { r as G, x as p, n as i } from "../property-Dn4zSyxu.js";
-import { L } from "../focusable-BXhQz3_k.js";
+import { r as A, x as f, n as i } from "../property-Dn4zSyxu.js";
+import { L as G } from "../focusable-BXhQz3_k.js";
 import { S as N } from "../sized-mixin-BR_Ii7le.js";
-import { c as _ } from "../calculate-data-item-icon-B9B0iLjm.js";
-import { l as W } from "../localize-BX7q0S0M.js";
-const q = () => {
+import { c as R, a as W } from "../calculate-data-item-icon-BFpVWXnR.js";
+import { l as J } from "../localize-BX7q0S0M.js";
+const F = () => {
   if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
     const e = document.createElement("style");
     e.setAttribute("data-luzmo-vars", ""), e.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(e);
   }
 };
-q();
-const J = ":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}", K = (e) => {
-  var u, c, s, v, y, x, k, w, S, C, D, E, $, I, P, j, O;
+F();
+const K = ":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;position:relative}.with-secondary-icon{clip-path:polygon(0 0,60% 0,65% 60%,100% 65%,100% 100%,0 100%)}.secondary-icon{position:absolute;bottom:45%;left:70%;width:auto;font-size:.75em;line-height:1}.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}", Q = (e) => {
+  var b, u, s, v, z, x, k, w, S, C, I, D, E, $, P, T, j;
   const r = e.source.element;
-  let l = "";
-  (v = (s = (c = (u = e.source) == null ? void 0 : u.element) == null ? void 0 : c.renderRoot) == null ? void 0 : s.querySelector(".data-label")) != null && v.textContent && (l = (k = (x = (y = e.source) == null ? void 0 : y.element) == null ? void 0 : x.renderRoot) == null ? void 0 : k.querySelector(
+  let a = "";
+  (v = (s = (u = (b = e.source) == null ? void 0 : b.element) == null ? void 0 : u.renderRoot) == null ? void 0 : s.querySelector(".data-label")) != null && v.textContent && (a = (k = (x = (z = e.source) == null ? void 0 : z.element) == null ? void 0 : x.renderRoot) == null ? void 0 : k.querySelector(
     ".data-label"
-  ).textContent), l || (l = W(
+  ).textContent), a || (a = J(
     (S = (w = e == null ? void 0 : e.source) == null ? void 0 : w.data) == null ? void 0 : S.label,
-    (D = (C = e == null ? void 0 : e.source) == null ? void 0 : C.element) == null ? void 0 : D.language
-  ), l = l || "Untitled");
-  const m = ($ = (E = e == null ? void 0 : e.source) == null ? void 0 : E.data) == null ? void 0 : $.type, o = (P = (I = e == null ? void 0 : e.source) == null ? void 0 : I.data) == null ? void 0 : P.subtype, d = _({ type: m, subtype: o }, r.size), a = {};
+    (I = (C = e == null ? void 0 : e.source) == null ? void 0 : C.element) == null ? void 0 : I.language
+  ), a = a || "Untitled");
+  const n = (E = (D = e == null ? void 0 : e.source) == null ? void 0 : D.data) == null ? void 0 : E.type, o = (P = ($ = e == null ? void 0 : e.source) == null ? void 0 : $.data) == null ? void 0 : P.subtype, d = R({ type: n, subtype: o }, r.size), l = {};
   [
     [
       "borderColor",
@@ -90,35 +90,35 @@ const J = ":host{font-family:var(--luzmo-draggable-data-item-level-font-family,
       "--luzmo-draggable-data-item-level-gap",
       "--draggable-data-item-level-gap"
     ]
-  ].forEach(([z, U, B]) => {
-    const F = R(r, U) || R(r, B);
-    a[z] = F;
+  ].forEach(([p, _, U]) => {
+    const B = O(r, _) || O(r, U);
+    l[p] = B;
   });
-  const b = document.createElement("div"), n = document.createElement("div");
-  if (b.innerHTML = l, !((O = (j = e == null ? void 0 : e.source) == null ? void 0 : j.element) != null && O.sublevel)) {
-    const z = document.createElement("luzmo-icon");
-    z.icon = d, n.append(z);
+  const c = document.createElement("div"), m = document.createElement("div");
+  if (c.innerHTML = a, !((j = (T = e == null ? void 0 : e.source) == null ? void 0 : T.element) != null && j.sublevel)) {
+    const p = document.createElement("luzmo-icon");
+    p.icon = d, m.append(p);
   }
-  return n.append(b), Object.assign(n.style, {
+  return m.append(c), Object.assign(m.style, {
     display: "flex",
     alignItems: "center",
-    height: a.height,
-    border: `1px solid ${a.borderColor}`,
-    backgroundColor: a.backgroundColor,
-    borderRadius: a.borderRadius,
-    fontFamily: a.fontFamily,
-    fontSize: a.fontSize,
-    color: a.color,
-    padding: `0 ${a.horizontalPadding}`,
-    gap: a.gap
-  }), n;
+    height: l.height,
+    border: `1px solid ${l.borderColor}`,
+    backgroundColor: l.backgroundColor,
+    borderRadius: l.borderRadius,
+    fontFamily: l.fontFamily,
+    fontSize: l.fontSize,
+    color: l.color,
+    padding: `0 ${l.horizontalPadding}`,
+    gap: l.gap
+  }), m;
 };
-var Q = Object.defineProperty, g = (e, r, l, m) => {
-  for (var o = void 0, d = e.length - 1, a; d >= 0; d--)
-    (a = e[d]) && (o = a(r, l, o) || o);
-  return o && Q(r, l, o), o;
+var X = Object.defineProperty, g = (e, r, a, n) => {
+  for (var o = void 0, d = e.length - 1, l; d >= 0; d--)
+    (l = e[d]) && (o = l(r, a, o) || o);
+  return o && X(r, a, o), o;
 };
-const f = class f extends N(L, {
+const y = class y extends N(G, {
   validSizes: ["s", "m", "l", "xl"],
   noDefaultSize: !0
 }) {
@@ -134,61 +134,77 @@ const f = class f extends N(L, {
           }
         })
       );
+    }, this.dataItemLevelDragStarted = () => {
+      this.dispatchEvent(
+        new CustomEvent("data-item-drag-started", {
+          bubbles: !0,
+          composed: !0,
+          cancelable: !0,
+          detail: {
+            data: this.data
+          }
+        })
+      );
     };
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this._cleanupDraggable();
   }
   firstUpdated(r) {
-    this._cleanupDraggable = H({
+    this._cleanupDraggable = L({
       element: this,
       canDrag: () => !this.disabled,
       onDragStart: () => {
-        this.style.opacity = "0.5";
+        this.style.opacity = "0.5", this.dataItemLevelDragStarted();
       },
       onDrop: () => {
         this.style.opacity = "1", this.dataItemLevelDropped(this.data);
       },
       getInitialData: () => {
-        const l = { ...this.data };
-        return this.label && this.language && !this.sublevel && (l.label = {}, l.label[this.language] = this.label), this.description && this.language && (l.description = {}, l.description[this.language] = this.description), l;
+        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: (l) => {
-        const m = l.nativeSetDragImage;
-        M({
+      onGenerateDragPreview: (a) => {
+        const n = a.nativeSetDragImage;
+        q({
           render({ container: o }) {
-            const d = K(l);
+            const d = Q(a);
             o.append(d);
           },
-          nativeSetDragImage: m
+          nativeSetDragImage: n
         });
       }
     });
   }
   render() {
-    var m, o, d, a, b, n, u, c, s, v;
-    const r = this.label ?? ((o = (m = this.data) == null ? void 0 : m.label) == null ? void 0 : o[this.language]) ?? ((b = (d = this.data) == null ? void 0 : d.label) == null ? void 0 : b[Object.keys((a = this.data) == null ? void 0 : a.label)[0]]) ?? "Untitled", l = this.description ?? ((u = (n = this.data) == null ? void 0 : n.description) == null ? void 0 : u[this.language]) ?? ((v = (c = this.data) == null ? void 0 : c.description) == null ? void 0 : v[Object.keys((s = this.data) == null ? void 0 : s.description)[0]]);
-    return p`
+    var o, d, l, c, m, b, u, s, v, z;
+    const r = this.label ?? ((d = (o = this.data) == null ? void 0 : o.label) == null ? void 0 : d[this.language]) ?? ((m = (l = this.data) == null ? void 0 : l.label) == null ? void 0 : m[Object.keys((c = this.data) == null ? void 0 : c.label)[0]]) ?? "Untitled", a = this.description ?? ((u = (b = this.data) == null ? void 0 : b.description) == null ? void 0 : u[this.language]) ?? ((z = (s = this.data) == null ? void 0 : s.description) == null ? void 0 : z[Object.keys((v = this.data) == null ? void 0 : v.description)[0]]), n = this.secondaryIconType ? W(this.secondaryIconType, this.size) : void 0;
+    return f`
       <div class="draggable-data-item-level">
         <div class="drag-handle-icon">
-          ${this.sublevel ? h(T) : h(V)}
+          ${this.sublevel ? h(H) : h(M)}
         </div>
-        ${this.sublevel || this.hideTypeIcon ? "" : p`<div class="data-icon-type">
-              ${h(_(this.data, this.size))}
+        ${this.sublevel || this.hideTypeIcon ? "" : f`<div class="data-icon-type">
+              <div class=${this.secondaryIconType ? "with-secondary-icon" : ""}>
+                ${h(R(this.data, this.size))}
+              </div>
+              ${n ? f`<div class="secondary-icon">
+                    ${h(n)}
+                  </div>` : ""}
             </div>`}
         <div class="data-label">${r}</div>
-        ${!this.sublevel && l ? p`<button class="data-description">
-              ${h(A)}
+        ${!this.sublevel && a ? f`<button class="data-description">
+              ${h(V)}
               <luzmo-tooltip self-managed placement="top" size=${this.size}>
-                ${l}
+                ${a}
               </luzmo-tooltip>
             </button>` : ""}
       </div>
     `;
   }
 };
-f.styles = G(J);
-let t = f;
+y.styles = A(K);
+let t = y;
 g([
   i({ type: String, reflect: !0 })
 ], t.prototype, "variant");
@@ -210,6 +226,9 @@ g([
 g([
   i({ type: String, reflect: !0 })
 ], t.prototype, "description");
+g([
+  i({ type: String, reflect: !0, attribute: "secondary-icon-type" })
+], t.prototype, "secondaryIconType");
 g([
   i({ type: Object })
 ], t.prototype, "data");