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

package/lib/index-CM80_HQw.js

@@ -1,442 +0,0 @@
-/*! * 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

@@ -1,71 +0,0 @@
-/*! * 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;