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

package/lib/index-CM80_HQw.js

@@ -0,0 +1,442 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2024 Luzmo
+ * All rights reserved.
+ * Luzmo web components (“Luzmo Web Components”)
+ * must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account
+ * to use the Luzmo Web Components. This license terminates
+ * automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+import { d as v } from "./decompose-numeric-format-BuZcjH2k.js";
+import { S as b, a as F, L as A, r as L, x as n, n as p, e as m } from "./if-defined-BbzmSG-O.js";
+import "./index-Bd4cKS9O.js";
+import "./index-DSbgZduE.js";
+import "./index-CtEJZdT0.js";
+import "./index-D37RwuEH.js";
+import "./index-CBCm4_7S.js";
+import "./index-D_KYpfBM.js";
+import { O as $, T as S } from "./index-DdtjeKYI.js";
+import { r as D } from "./directive-helpers-eY1rHtyn.js";
+import { r as C } from "./index-B9h2L_hV.js";
+const E = ":host .settings-container{display:flex;flex-direction:column;gap:var(--luzmo-spacing-2)}:host .settings-row{display:flex;justify-content:flex-start;align-items:center;gap:var(--luzmo-display-settings-numeric-gap, var(--display-settings-numeric-gap))}.duration-angle-down-icon{margin-inline-start:var(--luzmo-numeric-duration-levels-dropdown-icon-margin-inline-start, var(--numeric-duration-levels-dropdown-icon-margin-inline-start))}:host{--display-settings-numeric-gap: var(--luzmo-spacing-3);--numeric-duration-levels-dropdown-icon-margin-inline-start: var( --luzmo-spacing-2 )}:host([size=s]){--display-settings-numeric-gap: var(--luzmo-spacing-3);--numeric-duration-levels-dropdown-icon-margin-inline-start: var( --luzmo-spacing-1 )}:host([size=l]){--display-settings-numeric-gap: var(--luzmo-spacing-4);--numeric-duration-levels-dropdown-icon-margin-inline-start: var( --luzmo-spacing-3 )}:host([size=xl]){--display-settings-numeric-gap: var(--luzmo-spacing-5);--numeric-duration-levels-dropdown-icon-margin-inline-start: var( --luzmo-spacing-4 )}", N = {
+  sum: "Sum",
+  cumulativesum: "Cumulative sum",
+  average: "Average",
+  weightedaverage: "Weighted average",
+  median: "Median",
+  count: "Count",
+  distinctcount: "Distinct count",
+  min: "Minimum",
+  max: "Maximum",
+  stddev: "Standard deviation",
+  rate: "Rate"
+}, f = {
+  general: "123",
+  percentage: "%",
+  scientific: "SI"
+}, y = {
+  time: "Time",
+  short: "Short",
+  long: "Long"
+}, z = {
+  Auto: { auto: !0 },
+  "1,000.00": {
+    auto: !1,
+    thousandSeparator: ",",
+    decimalSeparator: "."
+  },
+  "1.000,00": {
+    auto: !1,
+    thousandSeparator: ".",
+    decimalSeparator: ","
+  },
+  "1000.00": { auto: !1, decimalSeparator: "." },
+  "1000,00": { auto: !1, decimalSeparator: "," }
+}, w = {
+  levels: [
+    { level: 1, label: "years" },
+    { level: 2, label: "quarters" },
+    { level: 3, label: "months" },
+    { level: 4, label: "weeks" },
+    { level: 5, label: "days" },
+    { level: 6, label: "hours" },
+    { level: 7, label: "minutes" },
+    { level: 8, label: "seconds" },
+    { level: 9, label: "milliseconds" }
+  ]
+};
+var M = Object.defineProperty, r = (g, t, e, i) => {
+  for (var a = void 0, s = g.length - 1, l; s >= 0; s--)
+    (l = g[s]) && (a = l(t, e, a) || a);
+  return a && M(t, e, a), a;
+};
+class o extends b(A, {
+  validSizes: Object.values(F)
+}) {
+  constructor() {
+    super(...arguments), this.slotContent = {}, this.measureColumns = [], this._durationLevels = [], this._renderDurationLevelMenu = !1, this._sendEvent = () => {
+      const t = { ...this.slotContent };
+      t.format = this._format, t.aggregationFunc = this._aggregationFunc, this._aggregationWeightColumn ? t.aggregationWeight = { ...this._aggregationWeightColumn } : this._aggregationFunc === "rate" && (t.aggregationFunc = "average"), this._displayMode === "duration" ? (t.duration = t.duration ?? {}, t.duration.format = this._durationFormat, t.duration.levels = this._durationLevels) : delete t.duration, this.dispatchEvent(
+        new CustomEvent("slot-content-changed", {
+          bubbles: !0,
+          composed: !0,
+          cancelable: !0,
+          detail: {
+            slotContent: t
+          }
+        })
+      );
+    };
+  }
+  static get styles() {
+    return [L(E)];
+  }
+  _parseSavedNumericFormatSettings() {
+    var t, e, i, a, s, l, d, c, h, _;
+    if (this._displayMode = ((t = this.slotContent) == null ? void 0 : t.subtype) === "duration" ? ((a = (i = (e = this.slotContent) == null ? void 0 : e.duration) == null ? void 0 : i.levels) == null ? void 0 : a.length) === 1 ? "numeric" : "duration" : "numeric", this._durationFormat = ((l = (s = this.slotContent) == null ? void 0 : s.duration) == null ? void 0 : l.format) ?? "short", this._durationLevels = ((c = (d = this.slotContent) == null ? void 0 : d.duration) == null ? void 0 : c.levels) ?? [1], this._displayMode === "duration")
+      this._precision = 2, this._commaDecimals = !1, this._thousandSeparator = !1;
+    else {
+      this._format = ((h = this.slotContent) == null ? void 0 : h.format) ?? ".0f";
+      const u = v(this._format ?? ".0f");
+      this._isAuto = ((_ = u.typeFormat) == null ? void 0 : _.includes("a")) ?? !1, ["%", "a%", "y", "ay"].includes(u.typeFormat) ? this._displayAs = "percentage" : ["s", "as", "w", "aw"].includes(u.typeFormat) ? this._displayAs = "scientific" : this._displayAs = "general", this._precision = u.precision ? Number.parseInt(u.precision.replace(".", ""), 10) : this._displayAs === "scientific" ? 1 : 0, this._commaDecimals = ["z", "az", "y", "ay", "w", "aw"].includes(
+        u.typeFormat
+      ), this._thousandSeparator = u.comma === ",", this._isAuto ? this._numericFormatGroup = "Auto" : this._commaDecimals && this._thousandSeparator ? this._numericFormatGroup = "1.000,00" : !this._commaDecimals && this._thousandSeparator ? this._numericFormatGroup = "1,000.00" : this._commaDecimals && !this._thousandSeparator ? this._numericFormatGroup = "1000,00" : !this._commaDecimals && !this._thousandSeparator && (this._numericFormatGroup = "1000.00");
+    }
+  }
+  _setNumericDisplayAs() {
+    var t, e;
+    this._displayAs = ((e = (t = this._displayAsElement) == null ? void 0 : t.selected) == null ? void 0 : e[0]) ?? "general", this._displayAs === "scientific" && (this._precision = Math.max(this._precision ?? 0, 1), this._thousandSeparator = !1), this._setNumericFormat(), this._sendEvent(), this.requestUpdate();
+  }
+  _setNumericSeparators(t) {
+    const e = z[(t == null ? void 0 : t.detail) ?? "Auto"];
+    this._thousandSeparator = [",", "."].includes(
+      (e == null ? void 0 : e.thousandSeparator) ?? ""
+    ), this._commaDecimals = (e == null ? void 0 : e.decimalSeparator) === ",", this._isAuto = e == null ? void 0 : e.auto, this._setNumericFormat(), this._sendEvent();
+  }
+  _setPrecision() {
+    this._precision = this._precisionElement.value, this._setNumericFormat(), this._sendEvent();
+  }
+  _setNumericFormat() {
+    var i;
+    let t = "f";
+    const e = this.slotContent.subtype === "duration" ? this._durationLevels && ((i = this._durationLevels) == null ? void 0 : i.length) === 1 ? "numeric" : "duration" : "numeric";
+    this._maxDurationLevel = Math.min(...this._durationLevels), e === "duration" ? (!["time", "short", "long"].includes(this._durationFormat ?? "") || this._maxDurationLevel < 6 && this._durationFormat === "time") && (this._durationFormat = "short") : (this._displayAs === "general" && this._commaDecimals ? t = "z" : this._displayAs === "percentage" && this._commaDecimals ? t = "y" : this._displayAs === "scientific" && this._commaDecimals ? t = "w" : this._displayAs === "percentage" ? t = "%" : this._displayAs === "scientific" && (t = "s"), this._format = (this._thousandSeparator || this._isAuto ? "," : "") + "." + this._precision + (this._isAuto ? "a" : "") + t);
+  }
+  _setAggregationFunc() {
+    const t = this._aggregationFunc, e = this.slotContent.format;
+    if (this._aggregationElement.value !== t) {
+      if (this._aggregationFunc = this._aggregationElement.value, t === "rate") {
+        const i = v(e), a = ["%", "y", "a%", "ay"].includes(
+          i.typeFormat
+        );
+        this.slotContent.subtype === "currency" && a && this._setNumericDisplayAs();
+      }
+      this._sendEvent(), (this._aggregationFunc === "rate" || t === "rate") && this.requestUpdate();
+    }
+  }
+  _setAggregationWeight() {
+    const t = this._aggregationWeightElement.value;
+    if (t === "none")
+      this._aggregationWeightColumn = void 0;
+    else {
+      const e = this.measureColumns.find(
+        (i) => i.columnId === t
+      );
+      this._aggregationWeightColumn = {
+        column: e == null ? void 0 : e.columnId,
+        set: e == null ? void 0 : e.datasetId,
+        columnSubType: e == null ? void 0 : e.subtype
+      };
+    }
+    this._sendEvent();
+  }
+  _setDurationLevels() {
+    const t = this._durationLevels, e = this._durationLevelsElement.value.split(",").filter((i) => i !== "").map((i) => Number.parseInt(i, 10));
+    this._durationLevels = ((e == null ? void 0 : e.length) ?? 0) >= 1 ? e : t, this._maxDurationLevel = Math.min(...this._durationLevels), this._fillTimeDurationLevels(), this._setNumericFormat(), this._sendEvent(), this.requestUpdate();
+  }
+  _setDurationFormat() {
+    var t, e;
+    this._durationFormat = (e = (t = this._durationFormatElement) == null ? void 0 : t.selected) == null ? void 0 : e[0], this._fillTimeDurationLevels(), this._setNumericFormat(), this._sendEvent(), this.requestUpdate();
+  }
+  _fillTimeDurationLevels() {
+    if (this._durationFormat === "time") {
+      const t = this._durationLevels.sort().at(-1);
+      if ([7, 8, 9].includes(t)) {
+        const e = {
+          lev7: [6],
+          lev8: [6, 7],
+          lev9: [6, 7, 8]
+        };
+        for (const i of e["lev" + t])
+          this._durationLevels.includes(i) || this._durationLevels.push(i);
+        this._durationLevels = [...this._durationLevels].sort();
+      }
+    }
+  }
+  // TODO set in upper level the same format for all measures remove this comment once implemented
+  /*   private setMeasureNumericFormat(
+      slot: any,
+      changedContent: any,
+      changedFormatGroup: string
+    ): void {
+      if (
+        slot.name === 'measure' &&
+        changedContent.type === 'numeric' &&
+        changedContent.subtype !== 'duration'
+      ) {
+        slot.content.forEach((content: any) => {
+          if (
+            content.format !== changedContent.format &&
+            content.datasetId === changedContent.datasetId &&
+            ((content.columnId && content.columnId === changedContent.columnId) ||
+              (content.formula && content.formula === changedContent.formula))
+          ) {
+            let contentNumericFormatGroup = 'general';
+            const contentDecomp = decomposeNumericFormat(content.format);
+  
+            if (['%', 'a%', 'y', 'ay'].includes(contentDecomp.typeFormat)) {
+              contentNumericFormatGroup = 'percentage';
+            } else if (
+              ['s', 'as', 'w', 'aw'].includes(contentDecomp.typeFormat)
+            ) {
+              contentNumericFormatGroup = 'scientific';
+            }
+  
+            if (contentNumericFormatGroup === changedFormatGroup) {
+              content.format = changedContent.format;
+            }
+          }
+        });
+      }
+    } */
+  willUpdate(t) {
+    var e, i, a;
+    t.has("slotContent") && (this._parseSavedNumericFormatSettings(), this._aggregationFunc = ((e = this.slotContent) == null ? void 0 : e.aggregationFunc) ?? ((i = this.slotContent) == null ? void 0 : i.type) === "numeric" ? "sum" : "count", this._aggregationWeightColumn = (a = this.slotContent) == null ? void 0 : a.aggregationWeight);
+  }
+  firstUpdated(t) {
+    var e;
+    (e = this.slotContent) != null && e.duration && this._durationLevelsOverlay.addEventListener(
+      "slottable-request",
+      (i) => {
+        this._renderDurationLevelMenu = i.data !== C;
+      }
+    );
+  }
+  _renderDurationLevelsSettings() {
+    const t = w.levels.map((e) => {
+      let i = !1;
+      return this._durationFormat === "time" && e.level >= 6 && this._durationLevels.includes(e.level) && e.level !== Math.max(...this._durationLevels) && (i = !0), this._durationLevels.length === 1 && this._durationLevels.includes(e.level) && (i = !0), n`<luzmo-menu-item
+        value=${e.level}
+        ?selected=${this._durationLevels.includes(e.level)}
+        ?disabled=${i}
+      >
+        ${e.label}
+      </luzmo-menu-item>`;
+    });
+    return n` <div class="setting">
+      <luzmo-field-label for="duration-levels">
+        Duration levels
+      </luzmo-field-label>
+      <luzmo-action-button id="trigger" size=${this.size}>
+        ${this._durationLevels.length}
+        ${this._durationLevels.length === 1 ? "level" : "levels"} active
+        <span class="duration-angle-down-icon">
+          ${$(S)}
+        </span>
+      </luzmo-action-button>
+      <luzmo-overlay
+        id="duration-levels-overlay"
+        trigger="trigger@click"
+        type="auto"
+        placement="bottom-start"
+        type="page"
+      >
+        <luzmo-popover style="position: relative">
+          ${this._renderDurationLevelMenu ? n` <luzmo-menu
+                id="duration-levels"
+                size=${this.size}
+                selects="multiple"
+                .value=${this._durationLevels.join(",")}
+                @change=${this._setDurationLevels}
+              >
+                ${t}
+              </luzmo-menu>` : ""}
+        </luzmo-popover>
+      </luzmo-overlay>
+    </div>`;
+  }
+  _renderDurationFormatSettings() {
+    const t = Object.keys(y).map((e) => e === "time" && (this._maxDurationLevel ?? 1) < 6 ? "" : n`<luzmo-action-button value=${e}>
+        ${y[e]}
+      </luzmo-action-button>`);
+    return n` <div class="setting">
+      <luzmo-field-label for="duration-format">Format</luzmo-field-label>
+      <luzmo-action-group
+        emphasized
+        id="duration-format"
+        size=${this.size}
+        compact=""
+        .selected=${[this._durationFormat ?? "short"]}
+        selects="single"
+        @change=${this._setDurationFormat}
+      >
+        ${t}
+      </luzmo-action-group>
+    </div>`;
+  }
+  _renderNumericDisplayAsSettings() {
+    const t = Object.keys(f).map(
+      (e) => n`<luzmo-action-button value=${e}
+          >${f[e]}</luzmo-action-button
+        >`
+    );
+    return n`<div class="setting">
+      <luzmo-field-label for="display-as">Display as</luzmo-field-label>
+      <luzmo-action-group
+        emphasized
+        id="display-as"
+        size=${this.size}
+        compact=""
+        .selected=${[this._displayAs]}
+        selects="single"
+        @change=${this._setNumericDisplayAs}
+      >
+        ${t}
+      </luzmo-action-group>
+    </div>`;
+  }
+  _renderNumericFormatSettings() {
+    const t = Object.keys(z).map(
+      (e) => n`<luzmo-menu-item value=${e}>${e}</luzmo-menu-item>`
+    );
+    return n` <div class="setting">
+        <luzmo-field-label for="format">Format</luzmo-field-label>
+        <luzmo-picker
+          id="format"
+          size=${this.size}
+          variant="highlight"
+          value=${this._numericFormatGroup ?? "Auto"}
+          @change=${this._setNumericSeparators}
+        >
+          ${t}
+        </luzmo-picker>
+      </div>
+      <div class="setting">
+        <luzmo-field-label for="precision" id="precision-label"
+          >${this._displayAs === "scientific" ? "Precision" : "Decimals"}</luzmo-field-label
+        >
+        <luzmo-number-field
+          id="precision"
+          min=${this._displayAs === "scientific" ? 1 : 0}
+          max="22"
+          size=${this.size}
+          value=${this._precision ?? (this._displayAs === "scientific" ? 1 : 0)}
+          @change=${this._setPrecision}
+        ></luzmo-number-field>
+      </div>`;
+  }
+  _renderAggregationSettings() {
+    var i, a;
+    const t = Object.entries(N).map(
+      ([s, l]) => n`<luzmo-menu-item value=${s}>${l}</luzmo-menu-item>`
+    ), e = [
+      n`<luzmo-menu-item value="none">No weight</luzmo-menu-item>`,
+      ...this.measureColumns.map((s) => {
+        var d, c, h;
+        const l = ((d = s == null ? void 0 : s.label) == null ? void 0 : d[this.language ?? "en"]) ?? ((h = s == null ? void 0 : s.label) == null ? void 0 : h[(c = Object.keys(s == null ? void 0 : s.label)) == null ? void 0 : c[0]]) ?? "Untitled";
+        return n`<luzmo-menu-item value=${s.id}>
+          ${l}
+        </luzmo-menu-item>`;
+      })
+    ];
+    return n`<div class="settings-row">
+      <div class="setting">
+        <luzmo-field-label for="aggregation">Aggregation</luzmo-field-label>
+        <luzmo-picker
+          id="aggregation"
+          size=${this.size}
+          variant="highlight"
+          value=${this._aggregationFunc ?? (((i = this.slotContent) == null ? void 0 : i.type) === "numeric" ? "sum" : "count")}
+          @change=${this._setAggregationFunc}
+        >
+          ${t}
+        </luzmo-picker>
+      </div>
+      ${this._aggregationFunc === "rate" ? n`<div class="setting">
+            <luzmo-field-label for="weighting-column">
+              Denominator
+            </luzmo-field-label>
+            <luzmo-picker
+              id="weighting-column"
+              size=${this.size}
+              variant="highlight"
+              value=${((a = this._aggregationWeightColumn) == null ? void 0 : a.column) ?? "none"}
+              @change=${this._setAggregationWeight}
+            >
+              ${e}
+            </luzmo-picker>
+          </div>` : ""}
+    </div>`;
+  }
+  render() {
+    var t;
+    return n`<div class="settings-container">
+      <div class="settings-row">
+      ${this._displayMode === "duration" ? this._renderDurationLevelsSettings() : this._renderNumericDisplayAsSettings()}
+      ${((t = this._durationLevels) == null ? void 0 : t.length) > 1 ? this._renderDurationFormatSettings() : this._renderNumericFormatSettings()}
+      </div>
+      ${this._renderAggregationSettings()}
+      </div>
+    </div>`;
+  }
+}
+r([
+  p({ type: String, reflect: !0 })
+], o.prototype, "language");
+r([
+  p({ type: Object, reflect: !0 })
+], o.prototype, "slotContent");
+r([
+  p({ type: Array, reflect: !1 })
+], o.prototype, "measureColumns");
+r([
+  m("#display-as")
+], o.prototype, "_displayAsElement");
+r([
+  m("#precision")
+], o.prototype, "_precisionElement");
+r([
+  m("#aggregation")
+], o.prototype, "_aggregationElement");
+r([
+  m("#weighting-column")
+], o.prototype, "_aggregationWeightElement");
+r([
+  m("#duration-levels")
+], o.prototype, "_durationLevelsElement");
+r([
+  m("#duration-format")
+], o.prototype, "_durationFormatElement");
+r([
+  m("#duration-levels-overlay")
+], o.prototype, "_durationLevelsOverlay");
+r([
+  D()
+], o.prototype, "_renderDurationLevelMenu");
+customElements.get("luzmo-display-settings-numeric") || customElements.define(
+  "luzmo-display-settings-numeric",
+  o
+);
+export {
+  o as LuzmoDisplaySettingsNumeric
+};

package/lib/index-CcF-9wyF.cjs

@@ -0,0 +1,71 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2024 Luzmo
+ * All rights reserved.
+ * Luzmo web components (“Luzmo Web Components”)
+ * must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account
+ * to use the Luzmo Web Components. This license terminates
+ * automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+"use strict";const t=require("./if-defined-V7yEJWI3.cjs"),f=require("./get-css-variable-D439CdH9.cjs"),e=require("./index-Bo1DpZ-1.cjs");require("./index-jt6FL_uE.cjs");const F=":host{font-family:var(--luzmo-draggable-data-item-level-font-family, var(--luzmo-font-family));color:var(--luzmo-draggable-data-item-level-font-color, var(--draggable-data-item-level-font-color))}.draggable-data-item-level{transition:background-color var(--luzmo-animation-duration);background-color:var(--luzmo-draggable-data-item-level-background-color, var(--draggable-data-item-level-background-color));display:flex;justify-content:space-between;align-items:center;padding:0 var(--luzmo-draggable-data-item-level-horizontal-padding, var(--draggable-data-item-level-horizontal-padding));gap:var(--luzmo-draggable-data-item-level-gap, var(--draggable-data-item-level-gap));border-radius:var(--luzmo-draggable-data-item-level-border-radius, var(--draggable-data-item-level-border-radius));border-width:var(--luzmo-draggable-data-item-level-border-width, var(--draggable-data-item-level-border-width));border-style:var(--luzmo-draggable-data-item-level-border-style, var(--draggable-data-item-level-border-style));border-color:var(--luzmo-draggable-data-item-level-border-color, var(--draggable-data-item-level-border-color));height:var(--luzmo-draggable-data-item-level-height, var(--draggable-data-item-level-height));cursor:move}.draggable-data-item-level:hover{background-color:var(--luzmo-draggable-data-item-level-background-color-hover, var(--draggable-data-item-level-background-color-hover))}.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}",n={array:{s:e.D0,m:e.w0,l:e.x0,xl:e.x0},coordinates:{s:e.A0,m:e.Z0,l:e.u0,xl:e.u0},currency:{s:e.V0,m:e.H0,l:e.p0,xl:e.p0},date:{s:e.a0,m:e.o0,l:e.t,xl:e.t},datetime:{s:e.n0,m:e.z0,l:e.l0,xl:e.l0},duration:{s:e.k0,m:e.S0,l:e.f0,xl:e.f0},hierarchy:{s:e.E0,m:e.P0,l:e.U0,xl:e.U0},image:{s:e.O0,m:e.Q0,l:e.N0,xl:e.N0},numeric:{s:e.X0,m:e.Y0,l:e._0,xl:e._0},time:{s:e.M2,m:e.L2,l:e.r2,xl:e.r2},topography:{s:e.W1,m:e.W1,l:e.W1,xl:e.W1},ipaddress:{s:e.x2,m:e.B2,l:e.F2,xl:e.F2}},M=(l,a)=>(a==null?void 0:a.type)==="array"?n.array[l]:(a==null?void 0:a.type)==="image"?n.image[l]:(a==null?void 0:a.type)==="spatial"?(a==null?void 0:a.subtype)==="topography"?n.topography[l]:n.coordinates[l]:(a==null?void 0:a.type)==="numeric"?(a==null?void 0:a.subtype)==="currency"?n.currency[l]:(a==null?void 0:a.subtype)==="duration"?n.duration[l]:n.numeric[l]:(a==null?void 0:a.type)==="datetime"?(a==null?void 0:a.subtype)==="time"?n.time[l]:(a==null?void 0:a.subtype)==="date"?n.date[l]:n.datetime[l]:(a==null?void 0:a.type)==="hierarchy"&&(a==null?void 0:a.subtype)==="ipaddress"?n.ipaddress[l]:n.hierarchy[l],R=l=>{var m,c,z,y,w,S,C,D,E,O,P,_,I,L,T,j,B;const a=l.source.element;let r="";(y=(z=(c=(m=l.source)==null?void 0:m.element)==null?void 0:c.renderRoot)==null?void 0:z.querySelector(".data-label"))!=null&&y.textContent&&(r=(C=(S=(w=l.source)==null?void 0:w.element)==null?void 0:S.renderRoot)==null?void 0:C.querySelector(".data-label").textContent),r||(r=f.localize((E=(D=l==null?void 0:l.source)==null?void 0:D.data)==null?void 0:E.label,(P=(O=l==null?void 0:l.source)==null?void 0:O.element)==null?void 0:P.language),r=r||"Untitled");const v=(I=(_=l==null?void 0:l.source)==null?void 0:_.data)==null?void 0:I.type,i=(T=(L=l==null?void 0:l.source)==null?void 0:L.data)==null?void 0:T.subtype,d=M(a.size,{type:v,subtype:i}),o={};[["borderColor","--luzmo-draggable-data-item-level-border-color","--draggable-data-item-level-border-color"],["backgroundColor","--luzmo-draggable-data-item-level-background-color","--draggable-data-item-level-background-color"],["color","--luzmo-draggable-data-item-level-font-color","--draggable-data-item-level-font-color"],["fontSize","--luzmo-draggable-data-item-level-label-font-size","--draggable-data-item-level-label-font-size"],["height","--luzmo-draggable-data-item-level-height","--draggable-data-item-level-height"],["borderRadius","--luzmo-draggable-data-item-level-border-radius","--draggable-data-item-level-border-radius"],["fontFamily","--luzmo-draggable-data-item-level-font-family","--luzmo-font-family"],["horizontalPadding","--luzmo-draggable-data-item-level-horizontal-padding","--draggable-data-item-level-horizontal-padding"],["gap","--luzmo-draggable-data-item-level-gap","--draggable-data-item-level-gap"]].forEach(([x,q,V])=>{const W=f.getCssVariableValue(a,q)||f.getCssVariableValue(a,V);o[x]=W});const u=document.createElement("div"),g=document.createElement("div");if(u.innerHTML=r,!((B=(j=l==null?void 0:l.source)==null?void 0:j.element)!=null&&B.sublevel)){const x=document.createElement("luzmo-icon");x.icon=d,g.append(x)}return g.append(u),Object.assign(g.style,{display:"flex",alignItems:"center",height:o.height,border:`1px solid ${o.borderColor}`,backgroundColor:o.backgroundColor,borderRadius:o.borderRadius,fontFamily:o.fontFamily,fontSize:o.fontSize,color:o.color,padding:`0 ${o.horizontalPadding}`,gap:o.gap}),g};var U=Object.defineProperty,h=(l,a,r,v)=>{for(var i=void 0,d=l.length-1,o;d>=0;d--)(o=l[d])&&(i=o(a,r,i)||i);return i&&U(a,r,i),i};const k=class k extends t.SizedMixin(t.LuzmoElement,{validSizes:["s","m","l","xl"],noDefaultSize:!0}){constructor(){super(...arguments),this.language="en",this.data={},this.dataItemLevelDropped=a=>{this.dispatchEvent(new CustomEvent("data-item-dropped",{bubbles:!0,composed:!0,cancelable:!0,detail:{data:a}}))}}disconnectedCallback(){super.disconnectedCallback(),this._cleanupDraggable()}firstUpdated(a){this._cleanupDraggable=f.draggable({element:this,canDrag:()=>!this.disabled,onDragStart:()=>{this.style.opacity="0.5"},onDrop:()=>{this.style.opacity="1",this.dataItemLevelDropped(this.data)},getInitialData:()=>{const r={...this.data};return this.label&&this.language&&!this.sublevel&&(r.label={},r.label[this.language]=this.label),this.description&&this.language&&(r.description={},r.description[this.language]=this.description),r},onGenerateDragPreview:r=>{const v=r.nativeSetDragImage;f.setCustomNativeDragPreview({render({container:i}){const d=R(r);i.append(d)},nativeSetDragImage:v})}})}render(){var v,i,d,o,u,g,m,c,z,y;const a=this.label??((i=(v=this.data)==null?void 0:v.label)==null?void 0:i[this.language])??((u=(d=this.data)==null?void 0:d.label)==null?void 0:u[Object.keys((o=this.data)==null?void 0:o.label)[0]])??"Untitled",r=this.description??((m=(g=this.data)==null?void 0:g.description)==null?void 0:m[this.language])??((y=(c=this.data)==null?void 0:c.description)==null?void 0:y[Object.keys((z=this.data)==null?void 0:z.description)[0]]);return t.x`
+      <div class="draggable-data-item-level">
+        <div class="drag-handle-icon">
+          ${this.sublevel?e.O2(e.b0):e.O2(e.W)}
+        </div>
+        ${this.sublevel||this.hideTypeIcon?"":t.x`<div class="data-icon-type">
+              ${e.O2(M(this.size,this.data))}
+            </div>`}
+        <div class="data-label">${a}</div>
+        ${r?t.x`<button class="data-description">
+              ${e.O2(e.p1)}
+              <luzmo-tooltip self-managed placement="top" size=${this.size}>
+                ${r}
+              </luzmo-tooltip>
+            </button>`:""}
+      </div>
+    `}};k.styles=t.r(F);let s=k;h([t.n({type:String,reflect:!0})],s.prototype,"variant");h([t.n({type:Boolean,reflect:!0,attribute:"hide-type-icon"})],s.prototype,"hideTypeIcon");h([t.n({type:Boolean,reflect:!0})],s.prototype,"sublevel");h([t.n({type:String,reflect:!0})],s.prototype,"language");h([t.n({type:Boolean,reflect:!0})],s.prototype,"disabled");h([t.n({type:String,reflect:!0})],s.prototype,"label");h([t.n({type:String,reflect:!0})],s.prototype,"description");h([t.n({type:Object})],s.prototype,"data");customElements.get("luzmo-draggable-data-item-level")||customElements.define("luzmo-draggable-data-item-level",s);const H=":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 N=Object.defineProperty,p=(l,a,r,v)=>{for(var i=void 0,d=l.length-1,o;d>=0;d--)(o=l[d])&&(i=o(a,r,i)||i);return i&&N(a,r,i),i};const $=class $ extends t.SizedMixin(t.LuzmoElement,{validSizes:["s","m","l","xl"],noDefaultSize:!0}){constructor(){super(...arguments),this.language="en",this.data={}}renderSublevels(){var r,v,i,d,o;let a;if(((r=this.data)==null?void 0:r.type)==="datetime"){a=((v=this.data)==null?void 0:v.subtype)==="date"?this.data.lowestLevel??5:this.data.lowestLevel??9;const u=["Year","Quarter","Month","Week","Day","Hour","Minute","Second","Millisecond"];return t.x`
+        <div class="draggable-data-item-sublevels">
+          ${Array.from({length:a},(g,m)=>{const c=u[m],z={...this.data,level:m+1};return t.x`<luzmo-draggable-data-item-level
+              sublevel
+              .data=${z}
+              .language=${this.language}
+              .size=${this.size}
+              .variant=${this.variant}
+              .disabled=${this.disabled}
+              .label=${c}
+              ?hide-type-icon=${this.hideTypeIcon}
+            ></luzmo-draggable-data-item-level>`})}
+        </div>
+      `}else if(((i=this.data)==null?void 0:i.type)==="hierarchy"&&((o=(d=this.data)==null?void 0:d.hierarchyLevels)==null?void 0:o.length)>2){const u=this.data.hierarchyLevels.filter(g=>(g==null?void 0:g.level)>=1).map((g,m)=>{const c={...this.data,level:m,label:g.label};return t.x`<luzmo-draggable-data-item-level
+            sublevel
+            .data=${c}
+            .language=${this.language}
+            .size=${this.size}
+            .variant=${this.variant}
+            .disabled=${this.disabled}
+            ?hide-type-icon=${this.hideTypeIcon}
+          ></luzmo-draggable-data-item-level>`});return t.x`
+        <div class="draggable-data-item-sublevels">${u}</div>
+      `}return t.x``}render(){return t.x`
+      <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=t.r(H);let b=$;p([t.n({type:String,reflect:!0})],b.prototype,"variant");p([t.n({type:String,reflect:!0})],b.prototype,"language");p([t.n({type:Boolean,reflect:!0})],b.prototype,"disabled");p([t.n({type:Boolean,reflect:!0,attribute:"hide-sublevels"})],b.prototype,"hideSublevels");p([t.n({type:Boolean,reflect:!0,attribute:"hide-type-icon"})],b.prototype,"hideTypeIcon");p([t.n({type:String,reflect:!0})],b.prototype,"label");p([t.n({type:String,reflect:!0})],b.prototype,"description");p([t.n({type:Object})],b.prototype,"data");customElements.get("luzmo-draggable-data-item")||customElements.define("luzmo-draggable-data-item",b);exports.LuzmoDraggableDataItem=b;exports.LuzmoDraggableDataItemLevel=s;