@luzmo/analytics-components-kit 1.0.1-alpha.48 → 1.0.1-alpha.49

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 O, d as L, s as q } from "../get-css-variable-YlLiVgo8.js";
-import { a8 as h, ad as H, ae as M, af as V } from "../luzmo-icons-4Tmb3sKr.js";
-import "../index-COU9XhBt.js";
+import { g as P, d as V, s as B } from "../get-css-variable-YlLiVgo8.js";
+import { a8 as z, ad as F, ae as q, af as A } from "../luzmo-icons-CVeTZ59u.js";
+import "../index-BC1LV3vH.js";
 import "../index-BmshD32H.js";
-import { r as A, x as f, n as i } from "../property-BFMfZY1k.js";
-import { L as G } from "../focusable-Bhf_beoW.js";
-import { S as N } from "../sized-mixin-CkdMApAU.js";
-import { c as R, a as W } from "../calculate-data-item-icon-BiIL_s4Z.js";
+import { r as M, x as f, n as g } from "../property-DCzt3DR1.js";
+import { L as G } from "../focusable-BbymtxWI.js";
+import { S as N } from "../sized-mixin-BGzkX2g1.js";
+import { c as T, a as W } from "../calculate-data-item-icon-Dpvf1aLI.js";
 import { l as J } from "../localize-BX7q0S0M.js";
-const F = () => {
+const U = () => {
   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);
+    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-secondary-outline: rgba(255, 0, 255, 0.2);--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);
   }
 };
-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;
+U();
+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(.highlighted) .draggable-data-item-level{background-color:var(--luzmo-primary);color:var(--luzmo-primary-inverse-color);border-color:var(--luzmo-primary)}: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 c, u, b, v, h, x, k, w, I, S, D, C, E, $, _, L, H;
+  const t = e.source.element;
   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(
+  (v = (b = (u = (c = e.source) == null ? void 0 : c.element) == null ? void 0 : u.renderRoot) == null ? void 0 : b.querySelector(".data-label")) != null && v.textContent && (a = (k = (x = (h = e.source) == null ? void 0 : h.element) == null ? void 0 : x.renderRoot) == null ? void 0 : k.querySelector(
     ".data-label"
   ).textContent), a || (a = J(
-    (S = (w = e == null ? void 0 : e.source) == null ? void 0 : w.data) == null ? void 0 : S.label,
-    (I = (C = e == null ? void 0 : e.source) == null ? void 0 : C.element) == null ? void 0 : I.language
+    (I = (w = e == null ? void 0 : e.source) == null ? void 0 : w.data) == null ? void 0 : I.label,
+    (D = (S = e == null ? void 0 : e.source) == null ? void 0 : S.element) == null ? void 0 : D.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 = {};
+  const m = (E = (C = e == null ? void 0 : e.source) == null ? void 0 : C.data) == null ? void 0 : E.type, o = (_ = ($ = e == null ? void 0 : e.source) == null ? void 0 : $.data) == null ? void 0 : _.subtype, d = T({ type: m, subtype: o }, t.size), l = {};
   [
     [
       "borderColor",
@@ -90,16 +90,16 @@ const K = ":host{font-family:var(--luzmo-draggable-data-item-level-font-family,
       "--luzmo-draggable-data-item-level-gap",
       "--draggable-data-item-level-gap"
     ]
-  ].forEach(([p, _, U]) => {
-    const B = O(r, _) || O(r, U);
-    l[p] = B;
+  ].forEach(([p, j, O]) => {
+    const R = P(t, j) || P(t, O);
+    l[p] = R;
   });
-  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 s = document.createElement("div"), i = document.createElement("div");
+  if (s.innerHTML = a, !((H = (L = e == null ? void 0 : e.source) == null ? void 0 : L.element) != null && H.sublevel)) {
     const p = document.createElement("luzmo-icon");
-    p.icon = d, m.append(p);
+    p.icon = d, i.append(p);
   }
-  return m.append(c), Object.assign(m.style, {
+  return i.append(s), Object.assign(i.style, {
     display: "flex",
     alignItems: "center",
     height: l.height,
@@ -111,26 +111,38 @@ const K = ":host{font-family:var(--luzmo-draggable-data-item-level-font-family,
     color: l.color,
     padding: `0 ${l.horizontalPadding}`,
     gap: l.gap
-  }), m;
+  }), i;
 };
-var X = Object.defineProperty, g = (e, r, a, n) => {
+var X = Object.defineProperty, n = (e, t, a, m) => {
   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;
+    (l = e[d]) && (o = l(t, a, o) || o);
+  return o && X(t, a, o), o;
 };
 const y = class y extends N(G, {
   validSizes: ["s", "m", "l", "xl"],
   noDefaultSize: !0
 }) {
   constructor() {
-    super(...arguments), this.language = "en", this.data = {}, this.dataItemLevelDropped = (r) => {
+    super(...arguments), this.language = "en", this.data = {}, this.linkedDatasetsIds = [], this._handleHighlight = (t) => {
+      var i, c, u, b, v, h;
+      const a = t.detail ?? {}, { id: m, level: o } = a, d = ((i = this.data) == null ? void 0 : i.columnId) ?? ((c = this.data) == null ? void 0 : c.column) ?? ((u = this.data) == null ? void 0 : u.formulaId) ?? ((b = this.data) == null ? void 0 : b.formula) ?? ((v = this.data) == null ? void 0 : v.id), l = ((h = this.data) == null ? void 0 : h.level) ?? 0, s = d === m && l === (o ?? 0);
+      if (this.classList.toggle("highlighted", s), s)
+        try {
+          this.scrollIntoView({ block: "nearest" });
+        } catch {
+          this.scrollIntoView(!0);
+        }
+    }, this._clearHighlight = () => {
+      this.classList.remove("highlighted");
+    }, this.dataItemLevelDropped = (t) => {
       this.dispatchEvent(
         new CustomEvent("data-item-dropped", {
           bubbles: !0,
           composed: !0,
           cancelable: !0,
           detail: {
-            data: r
+            data: t,
+            linkedDatasetsIds: this.linkedDatasetsIds
           }
         })
       );
@@ -141,17 +153,24 @@ const y = class y extends N(G, {
           composed: !0,
           cancelable: !0,
           detail: {
-            data: this.data
+            data: this.data,
+            linkedDatasetsIds: this.linkedDatasetsIds
           }
         })
       );
     };
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this._cleanupDraggable();
+    super.disconnectedCallback(), this._cleanupDraggable(), window.removeEventListener("slot-menu-highlight", this._handleHighlight), window.removeEventListener(
+      "slot-menu-highlight-clear",
+      this._clearHighlight
+    );
   }
-  firstUpdated(r) {
-    this._cleanupDraggable = L({
+  connectedCallback() {
+    super.connectedCallback(), window.addEventListener("slot-menu-highlight", this._handleHighlight), window.addEventListener("slot-menu-highlight-clear", this._clearHighlight);
+  }
+  firstUpdated(t) {
+    this._cleanupDraggable = V({
       element: this,
       canDrag: () => !this.disabled,
       onDragStart: () => {
@@ -162,39 +181,42 @@ const y = class y extends N(G, {
       },
       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;
+        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,
+          linkedDatasetsIds: this.linkedDatasetsIds
+        };
       },
       onGenerateDragPreview: (a) => {
-        const n = a.nativeSetDragImage;
-        q({
+        const m = a.nativeSetDragImage;
+        B({
           render({ container: o }) {
             const d = Q(a);
             o.append(d);
           },
-          nativeSetDragImage: n
+          nativeSetDragImage: m
         });
       }
     });
   }
   render() {
-    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;
+    var o, d, l, s, i, c, u, b, v, h;
+    const t = this.label ?? ((d = (o = this.data) == null ? void 0 : o.label) == null ? void 0 : d[this.language]) ?? ((i = (l = this.data) == null ? void 0 : l.label) == null ? void 0 : i[Object.keys((s = this.data) == null ? void 0 : s.label)[0]]) ?? "Untitled", a = this.description ?? ((u = (c = this.data) == null ? void 0 : c.description) == null ? void 0 : u[this.language]) ?? ((h = (b = this.data) == null ? void 0 : b.description) == null ? void 0 : h[Object.keys((v = this.data) == null ? void 0 : v.description)[0]]), m = 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(H) : h(M)}
+          ${this.sublevel ? z(F) : z(q)}
         </div>
         ${this.sublevel || this.hideTypeIcon ? "" : f`<div class="data-icon-type">
               <div class=${this.secondaryIconType ? "with-secondary-icon" : ""}>
-                ${h(R(this.data, this.size))}
+                ${z(T(this.data, this.size))}
               </div>
-              ${n ? f`<div class="secondary-icon">
-                    ${h(n)}
+              ${m ? f`<div class="secondary-icon">
+                    ${z(m)}
                   </div>` : ""}
             </div>`}
-        <div class="data-label">${r}</div>
+        <div class="data-label">${t}</div>
         ${!this.sublevel && a ? f`<button class="data-description">
-              ${h(V)}
+              ${z(A)}
               <luzmo-tooltip self-managed placement="top" size=${this.size}>
                 ${a}
               </luzmo-tooltip>
@@ -203,39 +225,42 @@ const y = class y extends N(G, {
     `;
   }
 };
-y.styles = A(K);
-let t = y;
-g([
-  i({ type: String, reflect: !0 })
-], t.prototype, "variant");
-g([
-  i({ type: Boolean, reflect: !0, attribute: "hide-type-icon" })
-], t.prototype, "hideTypeIcon");
-g([
-  i({ type: Boolean, reflect: !0 })
-], t.prototype, "sublevel");
-g([
-  i({ type: String, reflect: !0 })
-], t.prototype, "language");
-g([
-  i({ type: Boolean, reflect: !0 })
-], t.prototype, "disabled");
-g([
-  i({ type: String, reflect: !0 })
-], t.prototype, "label");
-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");
+y.styles = M(K);
+let r = y;
+n([
+  g({ type: String, reflect: !0 })
+], r.prototype, "variant");
+n([
+  g({ type: Boolean, reflect: !0, attribute: "hide-type-icon" })
+], r.prototype, "hideTypeIcon");
+n([
+  g({ type: Boolean, reflect: !0 })
+], r.prototype, "sublevel");
+n([
+  g({ type: String, reflect: !0 })
+], r.prototype, "language");
+n([
+  g({ type: Boolean, reflect: !0 })
+], r.prototype, "disabled");
+n([
+  g({ type: String, reflect: !0 })
+], r.prototype, "label");
+n([
+  g({ type: String, reflect: !0 })
+], r.prototype, "description");
+n([
+  g({ type: String, reflect: !0, attribute: "secondary-icon-type" })
+], r.prototype, "secondaryIconType");
+n([
+  g({ type: Object })
+], r.prototype, "data");
+n([
+  g({ type: Array, attribute: "linked-datasets-ids", reflect: !0 })
+], r.prototype, "linkedDatasetsIds");
 customElements.get("luzmo-draggable-data-item-level") || customElements.define(
   "luzmo-draggable-data-item-level",
-  t
+  r
 );
 export {
-  t as LuzmoDraggableDataItemLevel
+  r as LuzmoDraggableDataItemLevel
 };

package/components/droppable-slot/droppable-slot.d.ts

@@ -1,8 +1,8 @@
 import { Placement } from '@floating-ui/dom';
+import { ItemType, SlotName, VizItemSlots } from '@luzmo/dashboard-contents-types';
 import '@luzmo/lucero/tooltip';
 import { PropertyValues } from 'lit';
 import { LuzmoElement } from '../../utils/base';
-import { SlotContent } from '../../utils/store/slot-store';
 import './../slot-menu';
 declare const LuzmoDroppableSlot_base: typeof LuzmoElement & {
     new (...args: any[]): import("../../utils/base/sized-mixin").SizedElementInterface;
@@ -17,13 +17,27 @@ export declare class LuzmoDroppableSlot extends LuzmoDroppableSlot_base {
     private _loadSlotsConfig;
     private _itemTypeLoaded?;
     private _slotsConfig?;
-    itemType?: string;
-    slotName?: string;
+    itemType?: ItemType;
+    slotName?: SlotName;
     slotConfiguration: any;
-    slotContents: SlotContent[];
+    slotsContents: VizItemSlots;
     label?: string;
     language: string;
     dragBoundary?: string;
+    /**
+     * The API URL of the databroker
+     * @default https://api.luzmo.com
+     * @description The URL of the databroker API
+     */
+    apiUrl?: string;
+    /**
+     * The auth key of the databroker
+     */
+    authKey?: string;
+    /**
+     * The auth token of the databroker
+     */
+    authToken?: string;
     /**
      * The type of config interaction
      */
@@ -34,7 +48,8 @@ export declare class LuzmoDroppableSlot extends LuzmoDroppableSlot_base {
     placement: Placement;
     hideDelete?: boolean;
     hideConfiguration?: boolean;
-    private _droppableSlotLabelElement;
+    private _slotMenuElement;
+    private _slotContents;
     private readonly _store;
     private _currentSlotContents;
     constructor();
@@ -42,11 +57,16 @@ export declare class LuzmoDroppableSlot extends LuzmoDroppableSlot_base {
     private _cleanupDroppable;
     disconnectedCallback(): void;
     private emptySlotContents;
-    protected willUpdate(_changedProperties: PropertyValues): void;
-    protected firstUpdated(_changedProperties: PropertyValues): void;
-    protected updated(): void;
+    protected willUpdate(changedProperties: PropertyValues): void;
+    private _processSlotsContents;
+    protected firstUpdated(): void;
+    /**
+     * Handle overlay open event - reset slot menu position
+     */
+    private _onOverlayClosed;
+    private _onOverlayOpened;
     private _onSlotMenuChanges;
-    private createFullLabel;
+    private get _fullLabel();
     droppableSlotMarkup(): import("lit-html").TemplateResult<1>;
     render(): import("lit-html").TemplateResult<1> | undefined;
 }