@luzmo/analytics-components-kit 1.0.1-alpha.4 → 1.0.1-alpha.6

package/{lib/index-DrIA0eFE.js → components/draggable-data-item-level/index.js}

@@ -17,94 +17,104 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { S as Z, L as G, r as J, x as c, n as o } from "./if-defined-BbzmSG-O.js";
-import { l as te, g as F, d as re, s as ie } from "./get-css-variable-BHHQ0SnL.js";
-import { x as R, w as oe, D as de, N as U, Q as ge, a as se, W as x, u as H, Z as ne, A as be, p as V, H as ve, V as me, f as W, S as ue, k as ce, _ as A, Y as he, X as pe, r as N, L as ze, M as ye, t as Q, o as fe, b as xe, l as Y, z as ke, n as we, F as q, B as $e, c as Se, U as X, P as Ce, E as Ee, O as k, e as Pe, g as De, i as _e } from "./index-DdtjeKYI.js";
-import "./index-C9xEN5Ji.js";
-const Oe = ":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}", g = {
+import { g as A, a as Y, s as Z } from "../get-css-variable-Bhbr-Kr1.js";
+import { luzmoTypeArray as H, luzmoTypeArray14 as ee, luzmoTypeArray12 as le, luzmoTypeImage as _, luzmoTypeImage14 as ae, luzmoTypeImage12 as oe, luzmoTypeTopography as h, luzmoTypeCoordinates as N, luzmoTypeCoordinates14 as re, luzmoTypeCoordinates12 as te, luzmoTypeCurrency as U, luzmoTypeCurrency14 as ie, luzmoTypeCurrency12 as de, luzmoTypeDuration as B, luzmoTypeDuration14 as me, luzmoTypeDuration12 as ge, luzmoTypeNumeric as F, luzmoTypeNumeric14 as ne, luzmoTypeNumeric12 as ue, luzmoTypeTime as q, luzmoTypeTime14 as ce, luzmoTypeTime12 as be, luzmoTypeDate as V, luzmoTypeDate14 as se, luzmoTypeDate12 as ve, luzmoTypeDatetime as G, luzmoTypeDatetime14 as ze, luzmoTypeDatetime12 as pe, luzmoRouter16 as M, luzmoRouter14 as he, luzmoRouter12 as fe, luzmoTypeHierarchy as L, luzmoTypeHierarchy14 as ye, luzmoTypeHierarchy12 as xe, luzmoIcon as f, luzmoDragLines as ke, luzmoArrows as we, luzmoInfoCircleOutline as Te } from "@luzmo/icons";
+import "../index-DMbzEC_s.js";
+import "../index-Ci0Pe5UA.js";
+import { k as Ce, a as De, x as y, n as m } from "../property-CXJD1jOW.js";
+import { m as Se } from "../sized-mixin-BxMraZLS-Dc6r-Wg4.js";
+import { l as Ie } from "../localize-B6AsX_Zv.js";
+const X = () => {
+  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);
+  }
+};
+X();
+const Ee = ":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: de,
-    m: oe,
-    l: R,
-    xl: R
-  },
-  coordinates: {
-    s: be,
-    m: ne,
+    s: le,
+    m: ee,
     l: H,
     xl: H
   },
+  coordinates: {
+    s: te,
+    m: re,
+    l: N,
+    xl: N
+  },
   currency: {
-    s: me,
-    m: ve,
-    l: V,
-    xl: V
+    s: de,
+    m: ie,
+    l: U,
+    xl: U
   },
   date: {
-    s: xe,
-    m: fe,
-    l: Q,
-    xl: Q
+    s: ve,
+    m: se,
+    l: V,
+    xl: V
   },
   datetime: {
-    s: we,
-    m: ke,
-    l: Y,
-    xl: Y
+    s: pe,
+    m: ze,
+    l: G,
+    xl: G
   },
   duration: {
-    s: ce,
-    m: ue,
-    l: W,
-    xl: W
+    s: ge,
+    m: me,
+    l: B,
+    xl: B
   },
   hierarchy: {
-    s: Ee,
-    m: Ce,
-    l: X,
-    xl: X
+    s: xe,
+    m: ye,
+    l: L,
+    xl: L
   },
   image: {
-    s: se,
-    m: ge,
-    l: U,
-    xl: U
+    s: oe,
+    m: ae,
+    l: _,
+    xl: _
   },
   numeric: {
-    s: pe,
-    m: he,
-    l: A,
-    xl: A
+    s: ue,
+    m: ne,
+    l: F,
+    xl: F
   },
   time: {
-    s: ye,
-    m: ze,
-    l: N,
-    xl: N
+    s: be,
+    m: ce,
+    l: q,
+    xl: q
   },
   topography: {
-    s: x,
-    m: x,
-    l: x,
-    xl: x
+    s: h,
+    m: h,
+    l: h,
+    xl: h
   },
   ipaddress: {
-    s: Se,
-    m: $e,
-    l: q,
-    xl: q
+    s: fe,
+    m: he,
+    l: M,
+    xl: M
   }
-}, K = (a, e) => (e == null ? void 0 : e.type) === "array" ? g.array[a] : (e == null ? void 0 : e.type) === "image" ? g.image[a] : (e == null ? void 0 : e.type) === "spatial" ? (e == null ? void 0 : e.subtype) === "topography" ? g.topography[a] : g.coordinates[a] : (e == null ? void 0 : e.type) === "numeric" ? (e == null ? void 0 : e.subtype) === "currency" ? g.currency[a] : (e == null ? void 0 : e.subtype) === "duration" ? g.duration[a] : g.numeric[a] : (e == null ? void 0 : e.type) === "datetime" ? (e == null ? void 0 : e.subtype) === "time" ? g.time[a] : (e == null ? void 0 : e.subtype) === "date" ? g.date[a] : g.datetime[a] : (e == null ? void 0 : e.type) === "hierarchy" && (e == null ? void 0 : e.subtype) === "ipaddress" ? g.ipaddress[a] : g.hierarchy[a], Ie = (a) => {
-  var v, u, z, y, S, C, E, P, D, _, O, I, L, T, j, B, M;
-  const e = a.source.element;
-  let l = "";
-  (y = (z = (u = (v = a.source) == null ? void 0 : v.element) == null ? void 0 : u.renderRoot) == null ? void 0 : z.querySelector(".data-label")) != null && y.textContent && (l = (E = (C = (S = a.source) == null ? void 0 : S.element) == null ? void 0 : C.renderRoot) == null ? void 0 : E.querySelector(
+}, J = (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], $e = (l) => {
+  var b, s, v, z, k, w, T, C, D, S, I, E, $, P, R, O, j;
+  const e = l.source.element;
+  let a = "";
+  (z = (v = (s = (b = l.source) == null ? void 0 : b.element) == null ? void 0 : s.renderRoot) == null ? void 0 : v.querySelector(".data-label")) != null && z.textContent && (a = (T = (w = (k = l.source) == null ? void 0 : k.element) == null ? void 0 : w.renderRoot) == null ? void 0 : T.querySelector(
     ".data-label"
-  ).textContent), l || (l = te(
-    (D = (P = a == null ? void 0 : a.source) == null ? void 0 : P.data) == null ? void 0 : D.label,
-    (O = (_ = a == null ? void 0 : a.source) == null ? void 0 : _.element) == null ? void 0 : O.language
-  ), l = l || "Untitled");
-  const s = (L = (I = a == null ? void 0 : a.source) == null ? void 0 : I.data) == null ? void 0 : L.type, t = (j = (T = a == null ? void 0 : a.source) == null ? void 0 : T.data) == null ? void 0 : j.subtype, i = K(e.size, { type: s, subtype: t }), r = {};
+  ).textContent), a || (a = Ie(
+    (D = (C = l == null ? void 0 : l.source) == null ? void 0 : C.data) == null ? void 0 : D.label,
+    (I = (S = l == null ? void 0 : l.source) == null ? void 0 : S.element) == null ? void 0 : I.language
+  ), a = a || "Untitled");
+  const n = ($ = (E = l == null ? void 0 : l.source) == null ? void 0 : E.data) == null ? void 0 : $.type, r = (R = (P = l == null ? void 0 : l.source) == null ? void 0 : P.data) == null ? void 0 : R.subtype, d = J(e.size, { type: n, subtype: r }), o = {};
   [
     [
       "borderColor",
@@ -151,35 +161,35 @@ const Oe = ":host{font-family:var(--luzmo-draggable-data-item-level-font-family,
       "--luzmo-draggable-data-item-level-gap",
       "--draggable-data-item-level-gap"
     ]
-  ].forEach(([f, ee, ae]) => {
-    const le = F(e, ee) || F(e, ae);
-    r[f] = le;
+  ].forEach(([p, K, Q]) => {
+    const W = A(e, K) || A(e, Q);
+    o[p] = W;
   });
-  const m = document.createElement("div"), d = document.createElement("div");
-  if (m.innerHTML = l, !((M = (B = a == null ? void 0 : a.source) == null ? void 0 : B.element) != null && M.sublevel)) {
-    const f = document.createElement("luzmo-icon");
-    f.icon = i, d.append(f);
+  const c = document.createElement("div"), u = document.createElement("div");
+  if (c.innerHTML = a, !((j = (O = l == null ? void 0 : l.source) == null ? void 0 : O.element) != null && j.sublevel)) {
+    const p = document.createElement("luzmo-icon");
+    p.icon = d, u.append(p);
   }
-  return d.append(m), Object.assign(d.style, {
+  return u.append(c), Object.assign(u.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
-  }), d;
+    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
+  }), u;
 };
-var Le = Object.defineProperty, h = (a, e, l, s) => {
-  for (var t = void 0, i = a.length - 1, r; i >= 0; i--)
-    (r = a[i]) && (t = r(e, l, t) || t);
-  return t && Le(e, l, t), t;
+var Pe = Object.defineProperty, g = (l, e, a, n) => {
+  for (var r = void 0, d = l.length - 1, o; d >= 0; d--)
+    (o = l[d]) && (r = o(e, a, r) || r);
+  return r && Pe(e, a, r), r;
 };
-const w = class w extends Z(G, {
+const x = class x extends Se(Ce, {
   validSizes: ["s", "m", "l", "xl"],
   noDefaultSize: !0
 }) {
@@ -201,7 +211,7 @@ const w = class w extends Z(G, {
     super.disconnectedCallback(), this._cleanupDraggable();
   }
   firstUpdated(e) {
-    this._cleanupDraggable = re({
+    this._cleanupDraggable = Y({
       element: this,
       canDrag: () => !this.disabled,
       onDragStart: () => {
@@ -211,182 +221,73 @@ const w = class w extends Z(G, {
         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 s = l.nativeSetDragImage;
-        ie({
-          render({ container: t }) {
-            const i = Ie(l);
-            t.append(i);
+      onGenerateDragPreview: (a) => {
+        const n = a.nativeSetDragImage;
+        Z({
+          render({ container: r }) {
+            const d = $e(a);
+            r.append(d);
           },
-          nativeSetDragImage: s
+          nativeSetDragImage: n
         });
       }
     });
   }
   render() {
-    var s, t, i, r, m, d, v, u, z, y;
-    const e = this.label ?? ((t = (s = this.data) == null ? void 0 : s.label) == null ? void 0 : t[this.language]) ?? ((m = (i = this.data) == null ? void 0 : i.label) == null ? void 0 : m[Object.keys((r = this.data) == null ? void 0 : r.label)[0]]) ?? "Untitled", l = this.description ?? ((v = (d = this.data) == null ? void 0 : d.description) == null ? void 0 : v[this.language]) ?? ((y = (u = this.data) == null ? void 0 : u.description) == null ? void 0 : y[Object.keys((z = this.data) == null ? void 0 : z.description)[0]]);
-    return c`
+    var n, r, d, o, c, u, b, s, v, z;
+    const e = this.label ?? ((r = (n = this.data) == null ? void 0 : n.label) == null ? void 0 : r[this.language]) ?? ((c = (d = this.data) == null ? void 0 : d.label) == null ? void 0 : c[Object.keys((o = this.data) == null ? void 0 : o.label)[0]]) ?? "Untitled", a = this.description ?? ((b = (u = this.data) == null ? void 0 : u.description) == null ? void 0 : b[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]]);
+    return y`
       <div class="draggable-data-item-level">
         <div class="drag-handle-icon">
-          ${this.sublevel ? k(Pe) : k(De)}
+          ${this.sublevel ? f(ke) : f(we)}
         </div>
-        ${this.sublevel || this.hideTypeIcon ? "" : c`<div class="data-icon-type">
-              ${k(K(this.size, this.data))}
+        ${this.sublevel || this.hideTypeIcon ? "" : y`<div class="data-icon-type">
+              ${f(J(this.size, this.data))}
             </div>`}
         <div class="data-label">${e}</div>
-        ${l ? c`<button class="data-description">
-              ${k(_e)}
+        ${a ? y`<button class="data-description">
+              ${f(Te)}
               <luzmo-tooltip self-managed placement="top" size=${this.size}>
-                ${l}
+                ${a}
               </luzmo-tooltip>
             </button>` : ""}
       </div>
     `;
   }
 };
-w.styles = J(Oe);
-let n = w;
-h([
-  o({ type: String, reflect: !0 })
-], n.prototype, "variant");
-h([
-  o({ type: Boolean, reflect: !0, attribute: "hide-type-icon" })
-], n.prototype, "hideTypeIcon");
-h([
-  o({ type: Boolean, reflect: !0 })
-], n.prototype, "sublevel");
-h([
-  o({ type: String, reflect: !0 })
-], n.prototype, "language");
-h([
-  o({ type: Boolean, reflect: !0 })
-], n.prototype, "disabled");
-h([
-  o({ type: String, reflect: !0 })
-], n.prototype, "label");
-h([
-  o({ type: String, reflect: !0 })
-], n.prototype, "description");
-h([
-  o({ type: Object })
-], n.prototype, "data");
+x.styles = De(Ee);
+let i = x;
+g([
+  m({ type: String, reflect: !0 })
+], i.prototype, "variant");
+g([
+  m({ type: Boolean, reflect: !0, attribute: "hide-type-icon" })
+], i.prototype, "hideTypeIcon");
+g([
+  m({ type: Boolean, reflect: !0 })
+], i.prototype, "sublevel");
+g([
+  m({ type: String, reflect: !0 })
+], i.prototype, "language");
+g([
+  m({ type: Boolean, reflect: !0 })
+], i.prototype, "disabled");
+g([
+  m({ type: String, reflect: !0 })
+], i.prototype, "label");
+g([
+  m({ type: String, reflect: !0 })
+], i.prototype, "description");
+g([
+  m({ type: Object })
+], i.prototype, "data");
 customElements.get("luzmo-draggable-data-item-level") || customElements.define(
   "luzmo-draggable-data-item-level",
-  n
+  i
 );
-const Te = ":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 je = Object.defineProperty, p = (a, e, l, s) => {
-  for (var t = void 0, i = a.length - 1, r; i >= 0; i--)
-    (r = a[i]) && (t = r(e, l, t) || t);
-  return t && je(e, l, t), t;
-};
-const $ = class $ extends Z(G, {
-  validSizes: ["s", "m", "l", "xl"],
-  noDefaultSize: !0
-}) {
-  constructor() {
-    super(...arguments), this.language = "en", this.data = {};
-  }
-  renderSublevels() {
-    var l, s, t, i, r;
-    let e;
-    if (((l = this.data) == null ? void 0 : l.type) === "datetime") {
-      e = ((s = this.data) == null ? void 0 : s.subtype) === "date" ? this.data.lowestLevel ?? 5 : this.data.lowestLevel ?? 9;
-      const m = [
-        "Year",
-        "Quarter",
-        "Month",
-        "Week",
-        "Day",
-        "Hour",
-        "Minute",
-        "Second",
-        "Millisecond"
-      ];
-      return c`
-        <div class="draggable-data-item-sublevels">
-          ${Array.from({ length: e }, (d, v) => {
-        const u = m[v], z = { ...this.data, level: v + 1 };
-        return c`<luzmo-draggable-data-item-level
-              sublevel
-              .data=${z}
-              .language=${this.language}
-              .size=${this.size}
-              .variant=${this.variant}
-              .disabled=${this.disabled}
-              .label=${u}
-              ?hide-type-icon=${this.hideTypeIcon}
-            ></luzmo-draggable-data-item-level>`;
-      })}
-        </div>
-      `;
-    } else if (((t = this.data) == null ? void 0 : t.type) === "hierarchy" && ((r = (i = this.data) == null ? void 0 : i.hierarchyLevels) == null ? void 0 : r.length) > 2) {
-      const m = this.data.hierarchyLevels.filter((d) => (d == null ? void 0 : d.level) >= 1).map((d, v) => {
-        const u = { ...this.data, level: v, label: d.label };
-        return c`<luzmo-draggable-data-item-level
-            sublevel
-            .data=${u}
-            .language=${this.language}
-            .size=${this.size}
-            .variant=${this.variant}
-            .disabled=${this.disabled}
-            ?hide-type-icon=${this.hideTypeIcon}
-          ></luzmo-draggable-data-item-level>`;
-      });
-      return c`
-        <div class="draggable-data-item-sublevels">${m}</div>
-      `;
-    }
-    return c``;
-  }
-  render() {
-    return c`
-      <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()}
-    `;
-  }
-};
-$.styles = J(Te);
-let b = $;
-p([
-  o({ type: String, reflect: !0 })
-], b.prototype, "variant");
-p([
-  o({ type: String, reflect: !0 })
-], b.prototype, "language");
-p([
-  o({ type: Boolean, reflect: !0 })
-], b.prototype, "disabled");
-p([
-  o({ type: Boolean, reflect: !0, attribute: "hide-sublevels" })
-], b.prototype, "hideSublevels");
-p([
-  o({ type: Boolean, reflect: !0, attribute: "hide-type-icon" })
-], b.prototype, "hideTypeIcon");
-p([
-  o({ type: String, reflect: !0 })
-], b.prototype, "label");
-p([
-  o({ type: String, reflect: !0 })
-], b.prototype, "description");
-p([
-  o({ type: Object })
-], b.prototype, "data");
-customElements.get("luzmo-draggable-data-item") || customElements.define("luzmo-draggable-data-item", b);
 export {
-  b as L,
-  n as a
+  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 {};