@luzmo/analytics-components-kit 1.0.1-alpha.96 → 1.0.1-alpha.97

package/components/donut-chart-slots.config-DBowIZNO.cjs

@@ -0,0 +1,20 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Luzmo web components (“Luzmo Web Components”)
+ * must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account
+ * to use the Luzmo Web Components. This license terminates
+ * automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=[{name:"measure",rotate:!1,label:"Measure",type:"numeric",canAcceptMultipleDataItems:!0,canAcceptFormula:!0},{name:"category",rotate:!1,label:"Category",type:"categorical",options:{areDatetimeOptionsEnabled:!0}}];exports.default=e;

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

@@ -0,0 +1,26 @@
+import { PropertyValues, TemplateResult } from 'lit';
+import { LuzmoElement } from '../../utils/base';
+import './../draggable-data-item-level';
+import type { DraggableDataItemData } from './types';
+declare const LuzmoDraggableDataItem_base: typeof LuzmoElement & {
+    new (...args: any[]): import("../../utils/base/sized-mixin").SizedElementInterface;
+    prototype: import("../../utils/base/sized-mixin").SizedElementInterface;
+};
+/**
+ * @element luzmo-draggable-data-item
+ * @fires {CustomEvent<{data: DraggableDataItemData}>} data-item-dropped - Announces that the draggable data item has been dropped
+ * @fires {CustomEvent<{data: DraggableDataItemData}>} data-item-drag-started - Announces that the drag is started on the data item
+ */
+export declare class LuzmoDraggableDataItem extends LuzmoDraggableDataItem_base {
+    static styles: import("lit").CSSResult;
+    variant: 'highlight' | 'normal';
+    language: string;
+    disabled: boolean;
+    hideSublevels: boolean;
+    hideTypeIcon: boolean;
+    data: DraggableDataItemData;
+    protected willUpdate(changedProperties: PropertyValues): void;
+    private renderSublevels;
+    protected render(): TemplateResult;
+}
+export {};

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

@@ -0,0 +1,48 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Luzmo web components (“Luzmo Web Components”)
+ * must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account
+ * to use the Luzmo Web Components. This license terminates
+ * automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("@lit/localize"),u=require("../periods.const-3jA-ECRf.cjs"),i=require("lit"),o=require("lit/decorators.js"),v=require("../focusable-QLh-LlNt.cjs"),b=require("../sized-mixin-DcvJLFeo.cjs"),m=require("../set-locale-BRRalqne.cjs");require("../draggable-data-item-level/index.cjs");const p=":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)}:host{display:block}.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,z=Object.getOwnPropertyDescriptor,g=(n,a,r,t)=>{for(var l=t>1?void 0:t?z(a,r):a,e=n.length-1,s;e>=0;e--)(s=n[e])&&(l=(t?s(a,r,l):s(l))||l);return t&&l&&y(a,r,l),l};exports.LuzmoDraggableDataItem=class extends b.SizedMixin(v.LuzmoElement,{validSizes:["s","m","l","xl"],noDefaultSize:!0}){constructor(){super(...arguments),this.variant="normal",this.language="en",this.data={}}willUpdate(a){if(a.has("language")){const r=[...m.targetLocales];this.language!==m.getLocale()&&(r.includes(this.language)||this.language==="en")&&m.setLocale(this.language)}}renderSublevels(){if(!this.data)return i.html``;const a=this.data?.type,r=a==="datetime"||a==="array[datetime]",t=[],l=e=>"formulaId"in e;if("hierarchyLevels"in this.data&&Array.isArray(this.data.hierarchyLevels)&&this.data.hierarchyLevels.length>2&&this.data.hierarchy_enabled&&t.push(...this.data.hierarchyLevels.filter(e=>e?.level>=1).map(e=>{const s={...this.data,level:e.level,name:e.name};return i.html`<luzmo-draggable-data-item-level
+            sublevel
+            .data=${s}
+            .language=${this.language}
+            .size=${this.size}
+            .variant=${this.variant}
+            .disabled=${this.disabled}
+            ?hide-type-icon=${this.hideTypeIcon}
+          ></luzmo-draggable-data-item-level>`})),!l(this.data)&&r&&this.data.lowestLevel){const e=Math.min(Math.max(this.data.lowestLevel,1),u.DATETIME_LEVELS.length),s=Math.min(Math.max(this.data.highestLevel??1,1),u.DATETIME_LEVELS.length);for(let d=s;d<=e;d++){const h={...this.data,level:d,name:{[this.language]:u.DATETIME_LEVELS[d-1].i18n()}};t.push(i.html`<luzmo-draggable-data-item-level
+              sublevel
+              .data=${h}
+              .language=${this.language}
+              .size=${this.size}
+              .variant=${this.variant}
+              .disabled=${this.disabled}
+              ?hide-type-icon=${this.hideTypeIcon}
+            ></luzmo-draggable-data-item-level>`)}}return t.length>0?i.html`
+        <div class="draggable-data-item-sublevels">${t}</div>
+      `:i.html``}render(){return this.data?i.html`
+      <luzmo-draggable-data-item-level
+        .data=${this.data}
+        .language=${this.language}
+        .size=${this.size}
+        .variant=${this.variant}
+        .disabled=${this.disabled}
+        ?hide-type-icon=${this.hideTypeIcon}
+      ></luzmo-draggable-data-item-level>
+      ${this.hideSublevels?"":this.renderSublevels()}
+    `:i.html``}};exports.LuzmoDraggableDataItem.styles=i.unsafeCSS(p);g([o.property({type:String,reflect:!0})],exports.LuzmoDraggableDataItem.prototype,"variant",2);g([o.property({type:String,reflect:!0})],exports.LuzmoDraggableDataItem.prototype,"language",2);g([o.property({type:Boolean,reflect:!0})],exports.LuzmoDraggableDataItem.prototype,"disabled",2);g([o.property({type:Boolean,reflect:!0,attribute:"hide-sublevels"})],exports.LuzmoDraggableDataItem.prototype,"hideSublevels",2);g([o.property({type:Boolean,reflect:!0,attribute:"hide-type-icon"})],exports.LuzmoDraggableDataItem.prototype,"hideTypeIcon",2);g([o.property({type:Object})],exports.LuzmoDraggableDataItem.prototype,"data",2);exports.LuzmoDraggableDataItem=g([c.localized()],exports.LuzmoDraggableDataItem);customElements.get("luzmo-draggable-data-item")||customElements.define("luzmo-draggable-data-item",exports.LuzmoDraggableDataItem);

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

@@ -0,0 +1,8 @@
+import { LuzmoDraggableDataItem } from './draggable-data-item';
+declare global {
+    interface HTMLElementTagNameMap {
+        'luzmo-draggable-data-item': LuzmoDraggableDataItem;
+    }
+}
+export { LuzmoDraggableDataItem } from './draggable-data-item';
+export type { DraggableDataItemData } from './types';

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

@@ -17,50 +17,49 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { localized as z } from "@lit/localize";
-import { D as c } from "../periods.const-CjHXYn-w.js";
-import { html as s, unsafeCSS as b } from "lit";
+import { localized as g } from "@lit/localize";
+import { D as d } from "../periods.const-CjHXYn-w.js";
+import { html as s, unsafeCSS as z } from "lit";
 import { property as n } from "lit/decorators.js";
-import { L as h } from "../focusable-DCIFkpiW.js";
-import { S as p } from "../sized-mixin-cJbo3PKR.js";
-import { t as f, g as v, s as x } from "../set-locale-Dp3N_gXN.js";
+import { L as b } from "../focusable-BS2pbY7w.js";
+import { S as h } from "../sized-mixin-cJbo3PKR.js";
+import { t as p, g as f, s as v } from "../set-locale-hKTMz37h.js";
 import "../draggable-data-item-level/index.js";
 (function() {
   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-background-color-alt-1: rgb(250, 250, 250);--luzmo-background-color-alt-2: rgb(239, 239, 239);--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);
+    const o = document.createElement("style");
+    o.setAttribute("data-luzmo-vars", ""), o.textContent = 'html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-background-color-alt-1: rgb(250, 250, 250);--luzmo-background-color-alt-2: rgb(239, 239, 239);--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(o);
   }
 })();
-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)}:host{display:block}.draggable-data-item-sublevels{display:flex;flex-direction:column;gap:var(--luzmo-draggable-data-item-sublevels-gap, var(--draggable-data-item-sublevels-gap));margin:var(--luzmo-draggable-data-item-sublevels-margin-vertical, var(--draggable-data-item-sublevels-margin-vertical)) 0}:host{box-sizing:border-box}";
-var w = Object.defineProperty, L = Object.getOwnPropertyDescriptor, u = (r, e, t, m) => {
-  for (var l = m > 1 ? void 0 : m ? L(e, t) : e, o = r.length - 1, i; o >= 0; o--)
-    (i = r[o]) && (l = (m ? i(e, t, l) : i(l)) || l);
-  return m && l && w(e, t, l), l;
+const x = ":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)}:host{display:block}.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, w = Object.getOwnPropertyDescriptor, u = (a, o, r, m) => {
+  for (var e = m > 1 ? void 0 : m ? w(o, r) : o, i = a.length - 1, t; i >= 0; i--)
+    (t = a[i]) && (e = (m ? t(o, r, e) : t(e)) || e);
+  return m && e && y(o, r, e), e;
 };
-let a = class extends p(h, {
+let l = class extends h(b, {
   validSizes: ["s", "m", "l", "xl"],
   noDefaultSize: !0
 }) {
   constructor() {
     super(...arguments), this.variant = "normal", this.language = "en", this.data = {};
   }
-  willUpdate(r) {
-    if (r.has("language")) {
-      const e = [...f];
-      this.language !== v() && (e.includes(this.language) || this.language === "en") && x(this.language);
+  willUpdate(a) {
+    if (a.has("language")) {
+      const o = [...p];
+      this.language !== f() && (o.includes(this.language) || this.language === "en") && v(this.language);
     }
   }
   renderSublevels() {
-    var l;
     if (!this.data)
       return s``;
-    const r = (l = this.data) == null ? void 0 : l.type, e = r === "datetime" || r === "array[datetime]", t = [], m = (o) => "formulaId" in o;
-    if ("hierarchyLevels" in this.data && Array.isArray(this.data.hierarchyLevels) && this.data.hierarchyLevels.length > 2 && this.data.hierarchy_enabled && t.push(
-      ...this.data.hierarchyLevels.filter((o) => (o == null ? void 0 : o.level) >= 1).map((o) => {
+    const a = this.data?.type, o = a === "datetime" || a === "array[datetime]", r = [], m = (e) => "formulaId" in e;
+    if ("hierarchyLevels" in this.data && Array.isArray(this.data.hierarchyLevels) && this.data.hierarchyLevels.length > 2 && this.data.hierarchy_enabled && r.push(
+      ...this.data.hierarchyLevels.filter((e) => e?.level >= 1).map((e) => {
         const i = {
           ...this.data,
-          level: o.level,
-          name: o.name
+          level: e.level,
+          name: e.name
         };
         return s`<luzmo-draggable-data-item-level
             sublevel
@@ -72,18 +71,18 @@ let a = class extends p(h, {
             ?hide-type-icon=${this.hideTypeIcon}
           ></luzmo-draggable-data-item-level>`;
       })
-    ), !m(this.data) && e && this.data.lowestLevel) {
-      const o = Math.min(Math.max(this.data.lowestLevel, 1), c.length), i = Math.min(Math.max(this.data.highestLevel ?? 1, 1), c.length);
-      for (let d = i; d <= o; d++) {
-        const g = {
+    ), !m(this.data) && o && this.data.lowestLevel) {
+      const e = Math.min(Math.max(this.data.lowestLevel, 1), d.length), i = Math.min(Math.max(this.data.highestLevel ?? 1, 1), d.length);
+      for (let t = i; t <= e; t++) {
+        const c = {
           ...this.data,
-          level: d,
-          name: { [this.language]: c[d - 1].i18n() }
+          level: t,
+          name: { [this.language]: d[t - 1].i18n() }
         };
-        t.push(
+        r.push(
           s`<luzmo-draggable-data-item-level
               sublevel
-              .data=${g}
+              .data=${c}
               .language=${this.language}
               .size=${this.size}
               .variant=${this.variant}
@@ -93,8 +92,8 @@ let a = class extends p(h, {
         );
       }
     }
-    return t.length > 0 ? s`
-        <div class="draggable-data-item-sublevels">${t}</div>
+    return r.length > 0 ? s`
+        <div class="draggable-data-item-sublevels">${r}</div>
       ` : s``;
   }
   render() {
@@ -111,29 +110,29 @@ let a = class extends p(h, {
     ` : s``;
   }
 };
-a.styles = b(y);
+l.styles = z(x);
 u([
   n({ type: String, reflect: !0 })
-], a.prototype, "variant", 2);
+], l.prototype, "variant", 2);
 u([
   n({ type: String, reflect: !0 })
-], a.prototype, "language", 2);
+], l.prototype, "language", 2);
 u([
   n({ type: Boolean, reflect: !0 })
-], a.prototype, "disabled", 2);
+], l.prototype, "disabled", 2);
 u([
   n({ type: Boolean, reflect: !0, attribute: "hide-sublevels" })
-], a.prototype, "hideSublevels", 2);
+], l.prototype, "hideSublevels", 2);
 u([
   n({ type: Boolean, reflect: !0, attribute: "hide-type-icon" })
-], a.prototype, "hideTypeIcon", 2);
+], l.prototype, "hideTypeIcon", 2);
 u([
   n({ type: Object })
-], a.prototype, "data", 2);
-a = u([
-  z()
-], a);
-customElements.get("luzmo-draggable-data-item") || customElements.define("luzmo-draggable-data-item", a);
+], l.prototype, "data", 2);
+l = u([
+  g()
+], l);
+customElements.get("luzmo-draggable-data-item") || customElements.define("luzmo-draggable-data-item", l);
 export {
-  a as LuzmoDraggableDataItem
+  l as LuzmoDraggableDataItem
 };

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

@@ -0,0 +1,21 @@
+import { Column, Currency, Formula, HierarchyLevel } from '@luzmo/dashboard-contents-types';
+export type ColumnItemData = {
+    type: Column['type'];
+    name: Column['name'];
+    datasetId: string;
+    formulaId?: never;
+    columnId: Column['id'];
+    level?: number;
+    hierarchyLevels?: Pick<HierarchyLevel, 'id' | 'level' | 'name'>[];
+    currency?: Pick<Currency, 'id' | 'name' | 'symbol'>;
+} & Partial<Pick<Column, 'description' | 'subtype' | 'format' | 'lowestLevel' | 'highestLevel' | 'hierarchy_enabled' | 'duration_levels' | 'duration_format' | 'expression'>>;
+export type FormulaItemData = {
+    type: Formula['type'];
+    name: Formula['name'];
+    datasetId: string;
+    formulaId: Formula['id'];
+    columnId?: never;
+    level?: number;
+    currency?: Pick<Currency, 'id' | 'name' | 'symbol'>;
+} & Partial<Pick<Formula, 'description' | 'subtype' | 'format' | 'lowestLevel' | 'duration_levels' | 'duration_format' | 'expression'>>;
+export type DraggableDataItemData = ColumnItemData | FormulaItemData;

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

@@ -0,0 +1,34 @@
+import '@luzmo/lucero/icon';
+import '@luzmo/lucero/tooltip';
+import { PropertyValues, TemplateResult } from 'lit';
+import { LuzmoElement } from '../../utils/base';
+import type { DraggableDataItemData } from '../draggable-data-item/types';
+declare const LuzmoDraggableDataItemLevel_base: typeof LuzmoElement & {
+    new (...args: any[]): import("../../utils/base/sized-mixin").SizedElementInterface;
+    prototype: import("../../utils/base/sized-mixin").SizedElementInterface;
+};
+/**
+ * @element luzmo-draggable-data-item-level
+ * @fires {CustomEvent<{data: DraggableDataItemData}>} data-item-dropped - Announces that the draggable data item has been dropped
+ * @fires {CustomEvent<{data: DraggableDataItemData}>} 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;
+    variant?: 'highlight' | 'normal';
+    hideTypeIcon?: boolean;
+    sublevel?: boolean;
+    language: string;
+    disabled: boolean;
+    data: DraggableDataItemData;
+    private _cleanupDraggable;
+    private _isCurrentlyHighlighted;
+    private _handleHighlight;
+    private _clearHighlight;
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+    private dataItemLevelDropped;
+    private dataItemLevelDragStarted;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    protected render(): TemplateResult;
+}
+export {};

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

@@ -0,0 +1,9 @@
+interface GenerateDragPreviewArgs {
+    source: {
+        element: HTMLElement;
+        data: Record<string, unknown>;
+    };
+    nativeSetDragImage: ((image: Element, offsetX: number, offsetY: number) => void) | null;
+}
+export declare const generateDragPreview: (args: GenerateDragPreviewArgs) => HTMLDivElement;
+export {};

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

@@ -0,0 +1,50 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Luzmo web components (“Luzmo Web Components”)
+ * must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account
+ * to use the Luzmo Web Components. This license terminates
+ * automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const z=require("../get-css-variable-Pzks_rOx.cjs"),n=require("@luzmo/icons");require("@luzmo/lucero/icon");require("@luzmo/lucero/tooltip");const v=require("lit"),m=require("lit/decorators.js"),I=require("../focusable-QLh-LlNt.cjs"),x=require("../sized-mixin-DcvJLFeo.cjs"),y=require("../calculate-data-item-icon-DtVGbet3.cjs"),C=require("../localize-C4zNlrwK.cjs"),D=":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:grid;grid-template-columns:var(--luzmo-draggable-data-item-level-drag-handle-width, var(--draggable-data-item-level-drag-handle-width)) var(--luzmo-draggable-data-item-level-data-icon-width, var(--draggable-data-item-level-data-icon-width)) 1fr var(--luzmo-draggable-data-item-level-description-width, var(--draggable-data-item-level-description-width, auto));gap:var(--luzmo-draggable-data-item-level-gap, var(--draggable-data-item-level-gap));align-items:center;padding:0 var(--luzmo-draggable-data-item-level-horizontal-padding, var(--draggable-data-item-level-horizontal-padding));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))}.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:hover .data-description{color:var(--luzmo-draggable-data-item-level-font-color-hover, var(--draggable-data-item-level-font-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;min-width:0}.draggable-data-item-level .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))}.draggable-data-item-level{height:var(--luzmo-draggable-data-item-level-height, var(--draggable-data-item-level-height));cursor:move}: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));grid-template-columns:var(--luzmo-draggable-data-item-level-sublevel-drag-handle-width, var(--luzmo-draggable-data-item-level-drag-handle-width)) 1fr}: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));color:var(--luzmo-draggable-data-item-level-sublevel-font-color-hover, var(--draggable-data-item-level-sublevel-font-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(.highlighted) .draggable-data-item-level:not(:hover){background-color:var(--luzmo-draggable-data-item-level-background-color-highlighted, var(--draggable-data-item-level-background-color-highlighted));color:var(--luzmo-draggable-data-item-level-font-color-highlighted, var(--draggable-data-item-level-font-color-highlighted));border-color:var(--luzmo-draggable-data-item-level-border-color-highlighted, var(--draggable-data-item-level-border-color-highlighted))}:host(.highlighted) .draggable-data-item-level:not(:hover) .data-description{color:var(--luzmo-draggable-data-item-level-font-color-highlighted, var(--draggable-data-item-level-font-color-highlighted))}: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))}:host(.pulse) .draggable-data-item-level{box-shadow:0 0 0 0 var(--luzmo-draggable-data-item-level-pulse-color, var(--draggable-data-item-level-pulse-color)),0 0 0 0 var(--luzmo-draggable-data-item-level-pulse-color, var(--draggable-data-item-level-pulse-color));animation:draggableDataItemPulse 1.5s infinite cubic-bezier(.66,.33,0,1)}:host(.focus) .draggable-data-item-level{background-color:var(--luzmo-draggable-data-item-level-background-color-focus, var(--draggable-data-item-level-background-color-focus));color:var(--luzmo-draggable-data-item-level-font-color-focus, var(--draggable-data-item-level-font-color-focus));border-color:var(--luzmo-draggable-data-item-level-border-color-focus, var(--draggable-data-item-level-border-color-focus))}:host(.focus) .draggable-data-item-level .data-description{color:var(--luzmo-draggable-data-item-level-font-color-focus, var(--draggable-data-item-level-font-color-focus))}@keyframes draggableDataItemPulse{0%{box-shadow:0 0 0 0 var(--luzmo-draggable-data-item-level-pulse-color, var(--draggable-data-item-level-pulse-color)),0 0 0 0 var(--luzmo-draggable-data-item-level-pulse-color, var(--draggable-data-item-level-pulse-color))}to{box-shadow:0 0 0 .5rem transparent,0 0 0 .5rem transparent}}.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;justify-self: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;justify-self:center}.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}: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) );--luzmo-draggable-data-item-level-description-width: calc( var(--draggable-data-item-level-icon-type-size) + var(--luzmo-spacing-2) );--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-highlighted: var( --luzmo-primary );--draggable-data-item-level-font-color-highlighted: var( --luzmo-primary-inverse-color );--draggable-data-item-level-border-color-highlighted: var( --luzmo-border-color )}:host(.focus){--draggable-data-item-level-background-color-focus: var( --luzmo-background-color-focus, var(--luzmo-secondary) );--draggable-data-item-level-font-color-focus: var( --luzmo-font-color-focus, var(--luzmo-secondary-inverse-color) );--draggable-data-item-level-border-color-focus: var( --luzmo-border-color-focus, var(--luzmo-secondary) )}:host(.pulse){--draggable-data-item-level-pulse-color: var( --luzmo-secondary-outline, rgba(var(--luzmo-secondary-rgb), .4) )}: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}",_=b=>{const e=b.source.element,a=b.source.data,r=e.renderRoot?.querySelector(".data-label")?.textContent||C.localize(a.name,e.language)||"Untitled",t=a.type,o=a.subtype,i=y.calculateDataItemIcon({type:t,subtype:o},e.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(([g,h,f])=>{const k=z.getCssVariableValue(e,h)||z.getCssVariableValue(e,f);l[g]=k});const u=document.createElement("div"),s=document.createElement("div");if(u.innerHTML=r,Object.assign(u.style,{maxWidth:"12rem",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}),!e.sublevel){const g=document.createElement("luzmo-icon");g.icon=i,s.append(g)}return s.append(u),Object.assign(s.style,{display:"flex",alignItems:"center",maxWidth:"12rem",lineHeight:"1",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}),s};var S=Object.defineProperty,c=(b,e,a,r)=>{for(var t=void 0,o=b.length-1,i;o>=0;o--)(i=b[o])&&(t=i(e,a,t)||t);return t&&S(e,a,t),t};const w=class w extends x.SizedMixin(I.LuzmoElement,{validSizes:["s","m","l","xl"],noDefaultSize:!0}){constructor(){super(...arguments),this.language="en",this.data={},this._isCurrentlyHighlighted=!1,this._handleHighlight=e=>{const a=e.detail??{},{columnId:r,level:t,formulaId:o}=a,i=this.data?.columnId??this.data?.column??this.data?.formulaId??this.data?.formula??this.data?.id,l=this.data?.level??0,p=t??0,u=(i===r||i===o)&&l===p,s=(i===r||i===o)&&l===0&&p>0,g=u||s;if(this.classList.toggle("highlighted",g),g&&!this._isCurrentlyHighlighted){this._isCurrentlyHighlighted=!0;const h=this.getBoundingClientRect(),f=window.innerHeight||document.documentElement.clientHeight;if(h.top<0||h.bottom>f)try{this.scrollIntoView({block:"center"})}catch{this.scrollIntoView(!0)}}else!g&&this._isCurrentlyHighlighted&&(this._isCurrentlyHighlighted=!1)},this._clearHighlight=()=>{this.classList.remove("highlighted"),this._isCurrentlyHighlighted=!1},this.dataItemLevelDropped=e=>{this.dispatchEvent(new CustomEvent("data-item-dropped",{bubbles:!0,composed:!0,cancelable:!0,detail:{data:e}}))},this.dataItemLevelDragStarted=e=>{this.dispatchEvent(new CustomEvent("data-item-drag-started",{bubbles:!0,composed:!0,cancelable:!0,detail:{data:e}}))}}disconnectedCallback(){super.disconnectedCallback(),this._cleanupDraggable&&(this._cleanupDraggable(),this._cleanupDraggable=void 0),window.removeEventListener("slot-menu-highlight",this._handleHighlight),window.removeEventListener("slot-menu-inactive",this._clearHighlight)}connectedCallback(){super.connectedCallback(),window.addEventListener("slot-menu-highlight",this._handleHighlight),window.addEventListener("slot-menu-inactive",this._clearHighlight)}firstUpdated(e){this._cleanupDraggable=z.draggable({element:this,canDrag:()=>!this.disabled,onDragStart:()=>{this.style.opacity="0.5",this.dataItemLevelDragStarted(this.data)},onDrop:()=>{this.style.opacity="1",this.dataItemLevelDropped(this.data)},getInitialData:()=>({...this.data}),onGenerateDragPreview:a=>{const r=a.nativeSetDragImage;z.setCustomNativeDragPreview({render({container:t}){const o=_(a);t.append(o)},nativeSetDragImage:r})}})}render(){if(!this.data)return v.html`<div class="draggable-data-item-level" tabindex="0"></div>`;const e=this.data.name?.[this.language]??this.data.name?.[Object.keys(this.data.name)[0]]??"Untitled",a=this.data.description?.[this.language]??this.data.description?.[Object.keys(this.data.description)[0]],r=y.calculateDataItemSecondaryIcon(this.data,this.size);return v.html`
+      <div class="draggable-data-item-level" tabindex="0">
+        <div class="drag-handle-icon">
+          ${this.sublevel?n.luzmoIcon(n.luzmoDragLines):n.luzmoIcon(n.luzmoArrows)}
+        </div>
+        ${this.sublevel||this.hideTypeIcon?"":v.html`<div class="data-icon-type">
+              <div class=${r?"with-secondary-icon":""}>
+                ${n.luzmoIcon(y.calculateDataItemIcon(this.data,this.size))}
+              </div>
+              ${r?v.html`<div class="secondary-icon">
+                    ${n.luzmoIcon(r)}
+                  </div>`:""}
+            </div>`}
+        <div class="data-label">${e}</div>
+        ${!this.sublevel&&a?v.html`<button class="data-description">
+              ${n.luzmoIcon(n.luzmoInfoCircleOutline)}
+              <luzmo-tooltip self-managed placement="top" size=${this.size}>
+                ${a}
+              </luzmo-tooltip>
+            </button>`:""}
+        <luzmo-tooltip
+          self-managed
+          placement="top"
+          size=${this.size}
+          show-only-if-truncated
+          truncated-element-selector=".data-label"
+        >
+          ${e}
+        </luzmo-tooltip>
+      </div>
+    `}};w.styles=v.unsafeCSS(D);let d=w;c([m.property({type:String,reflect:!0})],d.prototype,"variant");c([m.property({type:Boolean,reflect:!0,attribute:"hide-type-icon"})],d.prototype,"hideTypeIcon");c([m.property({type:Boolean,reflect:!0})],d.prototype,"sublevel");c([m.property({type:String,reflect:!0})],d.prototype,"language");c([m.property({type:Boolean,reflect:!0})],d.prototype,"disabled");c([m.property({type:Object})],d.prototype,"data");customElements.get("luzmo-draggable-data-item-level")||customElements.define("luzmo-draggable-data-item-level",d);exports.LuzmoDraggableDataItemLevel=d;

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

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