@luzmo/analytics-components-kit 1.0.1-alpha.15 → 1.0.1-alpha.151

package/components/display-settings-period-over-period-Lwj0ffDX.js

@@ -0,0 +1,428 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2026 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 { i as LuzmoElement, n as SizedMixin, t as ElementSizes } from "./base-rg2x95aL.js";
+import { t as __decorate } from "./decorate-Da6S_xrw.js";
+import { t as LocalizedMixin } from "./localized-mixin-12rLbXJL.js";
+import { t as localize } from "./localize-Dlt3EN5i.js";
+import { t as decomposeNumericFormat } from "./decompose-numeric-format-zrP4WxE7.js";
+import { t as PeriodOverPeriodCondition } from "./period-over-period-condition.const-DasWQHju.js";
+import { html, unsafeCSS } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { localized, msg } from "@lit/localize";
+import "@luzmo/lucero/field-label";
+import "@luzmo/lucero/action-button";
+import "@luzmo/lucero/number-field";
+import "@luzmo/lucero/action-group";
+import "@luzmo/lucero/picker";
+import "@luzmo/lucero/menu";
+import "@luzmo/lucero/accordion";
+import "@luzmo/lucero/checkbox";
+const PERIOD_OVER_PERIOD_VALUES = {
+	none: () => msg("None"),
+	past: () => msg("Past value", { desc: "Period option" }),
+	absoluteChange: () => msg("Absolute change", { desc: "Period option" }),
+	percentageChange: () => msg("% change", { desc: "Period option" })
+}, LEVEL_LIST = [
+	{
+		key: "periods",
+		i18n: () => msg("Periods", { desc: "Period option" })
+	},
+	{
+		key: "years",
+		i18n: () => msg("Years", { desc: "Period option" })
+	},
+	{
+		key: "quarters",
+		i18n: () => msg("Quarters", { desc: "Period option" })
+	},
+	{
+		key: "months",
+		i18n: () => msg("Months", { desc: "Period option" })
+	},
+	{
+		key: "weeks",
+		i18n: () => msg("Weeks", { desc: "Period option" })
+	},
+	{
+		key: "days",
+		i18n: () => msg("Days", { desc: "Period option" })
+	},
+	{
+		key: "hours",
+		i18n: () => msg("Hours", { desc: "Period option" })
+	},
+	{
+		key: "minutes",
+		i18n: () => msg("Minutes", { desc: "Period option" })
+	},
+	{
+		key: "seconds",
+		i18n: () => msg("Seconds", { desc: "Period option" })
+	}
+];
+let RangeTypeListKeys = /* @__PURE__ */ function(e) {
+	return e.Relative = "relative", e.UserDefined = "user-defined", e;
+}({});
+const RANGE_TYPE_LIST = [{
+	key: RangeTypeListKeys.Relative,
+	i18n: () => msg("Relative", { desc: "Range type option" })
+}, {
+	key: RangeTypeListKeys.UserDefined,
+	i18n: () => msg("User-defined", { desc: "Range type option" })
+}];
+var display_settings_period_over_period_module_default = ":host{font-family:var(--luzmo-display-settings-period-over-period-font-family,var(--luzmo-font-family));font-size:var(--luzmo-display-settings-period-over-period-font-size,var(--display-settings-period-over-period-font-size));color:var(--luzmo-display-settings-period-over-period-color,var(--luzmo-font-color))}:host .settings-container{gap:var(--luzmo-display-settings-vertical-gap,0);flex-direction:column;display:flex}:host .settings-container:first-of-type{margin-right:var(--luzmo-spacing-4)}:host .settings-row{justify-content:flex-start;align-items:center;gap:var(--luzmo-display-settings-period-over-period-gap,var(--display-settings-period-over-period-gap));display:flex}:host .wrap{flex-wrap:wrap}:host .setting.period-number-setting{align-items:center;display:flex}:host .dynamic-settings-container{max-width:var(--luzmo-display-setting-period-over-period-dynamic-max-width,var(--display-setting-period-over-period-dynamic-max-width))}:host luzmo-accordion{--luzmo-accordion-item-content-area-top-to-content:0;--luzmo-accordion-item-content-padding-left:var(--luzmo-spacing-1);--luzmo-accordion-item-header-bottom-margin:0;--luzmo-accordion-item-content-area-bottom-to-content:var(--luzmo-spacing-2);--accordion-item-header-font-size:var(--luzmo-display-settings-period-over-period-font-size,var(--display-settings-period-over-period-font-size));--accordion-item-content-font-size:var(--luzmo-display-settings-period-over-period-font-size,var(--display-settings-period-over-period-font-size));--field-label-font-size:var(--luzmo-display-settings-period-over-period-font-size,var(--display-settings-period-over-period-font-size))}:host .label-container{align-items:center;gap:var(--luzmo-spacing-2);display:flex}:host .academy-link{color:var(--luzmo-link-color);font-size:var(--luzmo-font-size-s);margin-left:var(--luzmo-spacing-2);text-decoration:none}:host .academy-link:hover{color:var(--luzmo-link-color-hover)}:host(:focus){--luzmo-menu-item-label-icon-color-focus:var(--luzmo-menu-item-label-icon-color-focus,var(--luzmo-font-color))}luzmo-menu-item{--luzmo-menu-item-tooltip-font-size:var(--luzmo-display-settings-tooltip-font-size)}luzmo-field-label{--field-label-font-size:var(--luzmo-display-settings-period-over-period-font-size,var(--display-settings-period-over-period-font-size))}luzmo-checkbox{--checkbox-font-size:var(--luzmo-display-settings-period-over-period-font-size,var(--display-settings-period-over-period-font-size))}luzmo-picker{--picker-font-size:var(--luzmo-display-settings-period-over-period-font-size,var(--display-settings-period-over-period-font-size))}luzmo-number-field{--text-field-placeholder-font-size:var(--luzmo-display-settings-period-over-period-font-size,var(--display-settings-period-over-period-font-size));--stepper-button-font-size:var(--luzmo-display-settings-period-over-period-font-size,var(--display-settings-period-over-period-font-size))}:host{--display-settings-period-over-period-gap:var(--luzmo-spacing-3);--display-settings-period-over-period-font-size:var(--luzmo-font-size);--display-setting-period-over-period-dynamic-max-width:22rem}:host([size=xs]){--display-settings-period-over-period-gap:var(--luzmo-spacing-2);--display-settings-period-over-period-font-size:var(--luzmo-font-size-xs);--display-setting-period-over-period-dynamic-max-width:17rem}:host([size=s]){--display-settings-period-over-period-gap:var(--luzmo-spacing-3);--display-settings-period-over-period-font-size:var(--luzmo-font-size-s);--display-setting-period-over-period-dynamic-max-width:19rem}:host([size=l]){--display-settings-period-over-period-gap:var(--luzmo-spacing-4);--display-settings-period-over-period-font-size:var(--luzmo-font-size-l);--display-setting-period-over-period-dynamic-max-width:26rem}:host([size=xl]){--display-settings-period-over-period-gap:var(--luzmo-spacing-5);--display-settings-period-over-period-font-size:var(--luzmo-font-size-xl);--display-setting-period-over-period-dynamic-max-width:30rem}", LuzmoDisplaySettingsPeriodOverPeriod = class extends LocalizedMixin(SizedMixin(LuzmoElement, { validSizes: Object.values(ElementSizes) })) {
+	constructor(...e) {
+		super(...e), this.slotContent = {}, this.linkedDatasetDatetimeColumns = [], this.needsOffsetDatetimeColumn = () => this.periodOverPeriodUiType === PeriodOverPeriodCondition.NoDatetimeColumnButComparisonFilters || this.periodOverPeriodUiType === PeriodOverPeriodCondition.NoDatetimeColumnAndNoComparisonFilters;
+	}
+	static get styles() {
+		return [unsafeCSS(display_settings_period_over_period_module_default)];
+	}
+	willUpdate(e) {
+		if (super.willUpdate(e), e.has("slotContent")) {
+			this._periodComparison = this.slotContent?.periodOverPeriod?.type, this._numberPeriods = this.slotContent?.periodOverPeriod?.quantity;
+			let e = this.slotContent?.periodOverPeriod?.level;
+			this._periodLevel = typeof e == "number" && e >= 0 && e < LEVEL_LIST.length ? LEVEL_LIST[e].key : this.slotContent?.periodOverPeriod?.level || "periods", this._incompletePeriods = this.slotContent?.periodOverPeriod?.periodToDate, this._offsetDateColumn = this.slotContent?.periodOverPeriod?.offsetDateColumn, this._minLevel = this.slotContent?.periodOverPeriod?.minLevel ?? this.slotContent?.periodOverPeriod?.offsetDateColumn?.lowestLevel ?? this.slotContent?.lowestLevel ?? (this.slotContent?.subtype === "date" ? 5 : 9), this._rangeType = this.slotContent?.periodOverPeriod?.rangeType;
+		}
+		this._periodComparison = this._periodComparison ?? "none", this._numberPeriods = this._numberPeriods ?? 1, this._periodLevel = this._periodLevel ?? "periods", this._incompletePeriods = this._incompletePeriods ?? !1, this._minLevel = this._minLevel ?? 9, this._rangeType = this._rangeType ?? RangeTypeListKeys.Relative, this._offsetDateColumn = this._offsetDateColumn || void 0;
+	}
+	setPeriodComparison() {
+		let e = { ...this.slotContent };
+		this.setInitialOffsetDateColumn(e), this._periodComparison = this._periodComparisonElement.value;
+		let m = decomposeNumericFormat(this.slotContent?.format), h = [
+			"%",
+			"y",
+			"a%",
+			"ay"
+		].includes(m.typeFormat), g = m.typeFormat.includes("a"), _ = g ? "a" : "", v = m.comma === "," || g ? "," : "", y = m.precision ? Number.parseInt(m.precision.replace(".", ""), 10) : 0, b = [
+			"z",
+			"az",
+			"y",
+			"ay",
+			"w",
+			"aw"
+		].includes(m.typeFormat);
+		this._periodComparison === "percentageChange" && h && (e.format = `${v}.${y}${_}${b ? "z" : "f"}`), this.sendEvent(e);
+	}
+	setNumberOfPeriods() {
+		this._numberPeriods = Number.parseInt(this._numberPeriodsElement.value, 10);
+		let e = { ...this.slotContent };
+		this.sendEvent(e);
+	}
+	setPeriodLevel() {
+		this._periodLevel = this._periodLevelElement.value;
+		let e = { ...this.slotContent };
+		this.sendEvent(e);
+	}
+	setOffsetDateColumn() {
+		this._offsetDateColumn = this.linkedDatasetDatetimeColumns.find((e) => e.id === this._offsetDateColumnElement.value);
+		let e = { ...this.slotContent };
+		this.sendEvent(e);
+	}
+	setIncompletePeriods() {
+		this._incompletePeriods = this._incompletePeriodsElement.checked;
+		let e = { ...this.slotContent };
+		this.sendEvent(e);
+	}
+	setRangeType(e) {
+		this._rangeType = e;
+		let m = { ...this.slotContent };
+		this.setInitialOffsetDateColumn(m), this.sendEvent(m);
+	}
+	sendEvent(e) {
+		let m = { ...e }, h = LEVEL_LIST.findIndex((e) => e.key === this._periodLevel);
+		m.periodOverPeriod = {
+			...e.periodOverPeriod,
+			type: this._periodComparison,
+			level: Math.max(h, 0),
+			quantity: this._numberPeriods,
+			periodToDate: this._incompletePeriods,
+			minLevel: this._minLevel,
+			rangeType: this._rangeType,
+			offsetDateColumn: this._offsetDateColumn
+		}, this._periodComparison === "none" && delete m.periodOverPeriod, this.dispatchEvent(new CustomEvent("luzmo-slot-content-changed", {
+			bubbles: !0,
+			composed: !0,
+			cancelable: !0,
+			detail: { slotContent: m }
+		}));
+	}
+	incompletePeriodsSetting() {
+		return html`
+      <div class="settings-row">
+        <div class="setting">
+          <luzmo-checkbox
+            id="incomplete-periods"
+            size=${this.size}
+            emphasized
+            ?checked=${this._incompletePeriods ?? !1}
+            @change=${this.setIncompletePeriods}
+          >
+            ${msg("Use period-to-date for incomplete periods", { desc: "Checkbox label for incomplete periods" })}
+          </luzmo-checkbox>
+        </div>
+      </div>
+    `;
+	}
+	relativeOffsetSetting() {
+		let e = LEVEL_LIST.slice(this.needsOffsetDatetimeColumn() ? 1 : 0, (this._minLevel ?? 0) + 1).map((e) => html`<luzmo-menu-item
+        value=${e.key}
+        tooltip=${e.key === "periods" ? msg("Matches the date range visible in the chart or table", { desc: "Tooltip for periods" }) : ""}
+      >
+        ${e.i18n()}
+      </luzmo-menu-item>`);
+		return html`
+      <div class="settings-container">
+        <luzmo-field-label for="period-comparison">
+          ${msg("Relative offset", { desc: "Label for relative offset" })}
+        </luzmo-field-label>
+
+        <div class="settings-row">
+          <div class="setting period-number-setting">
+            <luzmo-number-field
+              id="number-periods"
+              min="1"
+              size=${this.size}
+              max="9999999999"
+              value=${this._numberPeriods ?? 1}
+              @change=${this.setNumberOfPeriods}
+            ></luzmo-number-field>
+          </div>
+
+          <div class="setting">
+            <luzmo-picker
+              id="period-level"
+              size=${this.size}
+              variant="highlight"
+              value=${this._periodLevel ?? "periods"}
+              @change=${this.setPeriodLevel}
+            >
+              ${e}
+            </luzmo-picker>
+          </div>
+        </div>
+      </div>
+    `;
+	}
+	rangeTypeSetting() {
+		let e = RANGE_TYPE_LIST.map((e) => html`<luzmo-action-button
+        data-range-type=${e.key}
+        value=${e.key}
+        @click=${this._handleRangeTypeClick}
+      >
+        ${e.i18n()}
+      </luzmo-action-button>`);
+		return html`
+      <div class="settings-container">
+        <luzmo-field-label for="range-type">
+          ${msg("Range type", { desc: "Label for range type" })}
+        </luzmo-field-label>
+
+        <luzmo-action-group
+          size=${this.size}
+          compact
+          ?emphasized=${!0}
+          selected=${JSON.stringify([this._rangeType])}
+          selects="single"
+        >
+          ${e}
+        </luzmo-action-group>
+      </div>
+    `;
+	}
+	_handleRangeTypeClick(e) {
+		let m = e.currentTarget?.dataset?.rangeType;
+		m && this.setRangeType(m);
+	}
+	offsetDateColumnSetting() {
+		let e = this.linkedDatasetDatetimeColumns.map((e) => html`<luzmo-menu-item value=${e.id}>
+          ${localize(e.name, this.language)}
+        </luzmo-menu-item>`);
+		return html`
+      <div class="settings-container">
+        <luzmo-field-label for="offset-date-column">
+          ${msg("Offset date column", { desc: "Label for offset date column" })}
+        </luzmo-field-label>
+
+        <div class="setting">
+          <luzmo-picker
+            id="offset-date-column"
+            size=${this.size}
+            variant="highlight"
+            value=${this._offsetDateColumn?.id}
+            @change=${this.setOffsetDateColumn}
+          >
+            ${e}
+          </luzmo-picker>
+        </div>
+      </div>
+    `;
+	}
+	typeOfComparisonSetting() {
+		let e = Object.keys(PERIOD_OVER_PERIOD_VALUES).map((e) => html`<luzmo-menu-item value=${e}>
+          ${PERIOD_OVER_PERIOD_VALUES[e]()}
+        </luzmo-menu-item>`);
+		return html`<div class="settings-container">
+      <luzmo-field-label for="period-comparison">
+        ${msg("Show")}
+      </luzmo-field-label>
+      <luzmo-picker
+        id="period-comparison"
+        size=${this.size}
+        variant="highlight"
+        value=${this._periodComparison ?? "none"}
+        @change=${this.setPeriodComparison}
+      >
+        ${e}
+      </luzmo-picker>
+    </div>`;
+	}
+	renderPeriodSettings() {
+		return {
+			[PeriodOverPeriodCondition.HasDatetimeColumnAndNoComparisonFilters]: () => html`
+            ${this.relativeOffsetSetting()} ${this.incompletePeriodsSetting()}
+          `,
+			[PeriodOverPeriodCondition.NoDatetimeColumnAndNoComparisonFilters]: () => html`
+            ${this.relativeOffsetSetting()} ${this.offsetDateColumnSetting()}
+            ${this.incompletePeriodsSetting()}
+          `,
+			[PeriodOverPeriodCondition.HasDatetimeColumnAndComparisonFilters]: () => this._rangeType === RangeTypeListKeys.Relative ? html`${this.rangeTypeSetting()} ${this.relativeOffsetSetting()}
+          ${this.incompletePeriodsSetting()} ` : html` ${this.rangeTypeSetting()} `,
+			[PeriodOverPeriodCondition.NoDatetimeColumnButComparisonFilters]: () => this._rangeType === RangeTypeListKeys.Relative ? html`
+            ${this.rangeTypeSetting()} ${this.relativeOffsetSetting()}
+            ${this.offsetDateColumnSetting()} ${this.incompletePeriodsSetting()}
+          ` : html` ${this.rangeTypeSetting()} `,
+			[PeriodOverPeriodCondition.OldImplementation]: () => ""
+		}[this.periodOverPeriodUiType]?.() ?? "";
+	}
+	renderOldUiPeriodSettings() {
+		let e = LEVEL_LIST.slice(0, (this._minLevel ?? 0) + 1).map((e) => html`<luzmo-menu-item
+          value=${e.key}
+          tooltip=${e.key === "periods" ? msg("Matches the date range visible in the chart or table", { desc: "Tooltip for periods" }) : ""}
+        >
+          ${e.i18n()}
+        </luzmo-menu-item>`);
+		return html` <div class="settings-row">
+        <div class="setting period-number-setting">
+          ${["percentageChange", "absoluteChange"].includes(this._periodComparison ?? "") ? html`<luzmo-field-label for="number-periods" side-aligned="start">
+                ${msg("From", { desc: "Label for number of periods" })}
+              </luzmo-field-label>` : ""}
+          <luzmo-number-field
+            id="number-periods"
+            min="1"
+            size=${this.size}
+            max="9999999999"
+            value=${this._numberPeriods ?? 1}
+            @change=${this.setNumberOfPeriods}
+          ></luzmo-number-field>
+        </div>
+        <div class="setting">
+          <luzmo-picker
+            id="period-level"
+            size=${this.size}
+            variant="highlight"
+            value=${this._periodLevel ?? "periods"}
+            @change=${this.setPeriodLevel}
+          >
+            ${e}
+          </luzmo-picker>
+        </div>
+        <div>${msg("ago", { desc: "Label for period ago" })}</div>
+      </div>
+      <div class="settings-row">
+        <div class="setting">
+          <luzmo-checkbox
+            id="incomplete-periods"
+            size=${this.size}
+            emphasized
+            ?checked=${this._incompletePeriods ?? !1}
+            @change=${this.setIncompletePeriods}
+          >
+            ${msg("Use period-to-date for incomplete periods", { desc: "Checkbox label for incomplete periods" })}
+          </luzmo-checkbox>
+        </div>
+      </div>`;
+	}
+	renderOldUi() {
+		let e = Object.keys(PERIOD_OVER_PERIOD_VALUES).map((e) => html`<luzmo-menu-item value=${e}>
+          ${PERIOD_OVER_PERIOD_VALUES[e]()}
+        </luzmo-menu-item>`);
+		return html`<div class="settings-container">
+      <div class="settings-row">
+        <div class="setting">
+          <div class="label-container">
+            <luzmo-field-label for="period-comparison">
+              ${msg("Period comparison", { desc: "Label for period comparison" })}
+            </luzmo-field-label>
+
+            <a
+              target="_blank"
+              href="https://academy.luzmo.com/article/yh728g3n"
+              class="academy-link"
+            >
+              ${msg("Learn more", { desc: "Label for academy link" })}
+            </a>
+          </div>
+
+          <luzmo-picker
+            id="period-comparison"
+            size=${this.size}
+            variant="highlight"
+            value=${this._periodComparison ?? "none"}
+            @change=${this.setPeriodComparison}
+          >
+            ${e}
+          </luzmo-picker>
+        </div>
+      </div>
+      ${this._periodComparison === "none" ? "" : this.renderOldUiPeriodSettings()}
+    </div>`;
+	}
+	render() {
+		return this.periodOverPeriodUiType === PeriodOverPeriodCondition.OldImplementation ? this.renderOldUi() : html`
+      <luzmo-accordion variant="highlight-child" class="setting">
+        <luzmo-accordion-item
+          ?open=${this._periodComparison !== "none"}
+          label=${msg("Period comparison", { desc: "Label for period comparison" })}
+        >
+          <div class="settings-container dynamic-settings-container">
+            <div class="settings-row wrap">
+              ${this.typeOfComparisonSetting()}
+              ${this._periodComparison === "none" ? "" : this.renderPeriodSettings()}
+            </div>
+          </div>
+        </luzmo-accordion-item>
+      </luzmo-accordion>
+    `;
+	}
+	setInitialOffsetDateColumn(e) {
+		this._offsetDateColumn = this.needsOffsetDatetimeColumn() ? this.linkedDatasetDatetimeColumns[0] : void 0, e.periodOverPeriod.offsetDateColumn = this._offsetDateColumn;
+	}
+};
+__decorate([property({
+	type: Object,
+	attribute: "slot-content"
+})], LuzmoDisplaySettingsPeriodOverPeriod.prototype, "slotContent", void 0), __decorate([property({
+	type: String,
+	attribute: "period-over-period-type"
+})], LuzmoDisplaySettingsPeriodOverPeriod.prototype, "periodOverPeriodUiType", void 0), __decorate([property({
+	type: Array,
+	attribute: "linked-dataset-datetime-columns"
+})], LuzmoDisplaySettingsPeriodOverPeriod.prototype, "linkedDatasetDatetimeColumns", void 0), __decorate([query("#period-comparison")], LuzmoDisplaySettingsPeriodOverPeriod.prototype, "_periodComparisonElement", void 0), __decorate([query("#number-periods")], LuzmoDisplaySettingsPeriodOverPeriod.prototype, "_numberPeriodsElement", void 0), __decorate([query("#period-level")], LuzmoDisplaySettingsPeriodOverPeriod.prototype, "_periodLevelElement", void 0), __decorate([query("#offset-date-column")], LuzmoDisplaySettingsPeriodOverPeriod.prototype, "_offsetDateColumnElement", void 0), __decorate([query("#incomplete-periods")], LuzmoDisplaySettingsPeriodOverPeriod.prototype, "_incompletePeriodsElement", void 0), __decorate([state()], LuzmoDisplaySettingsPeriodOverPeriod.prototype, "_periodComparison", void 0), __decorate([state()], LuzmoDisplaySettingsPeriodOverPeriod.prototype, "_rangeType", void 0), LuzmoDisplaySettingsPeriodOverPeriod = __decorate([localized()], LuzmoDisplaySettingsPeriodOverPeriod), customElements.get("luzmo-display-settings-period-over-period") || customElements.define("luzmo-display-settings-period-over-period", LuzmoDisplaySettingsPeriodOverPeriod);
+export { LuzmoDisplaySettingsPeriodOverPeriod as t };

package/components/display-settings-xKZk3Bn-.cjs

@@ -0,0 +1,121 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2026 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.
+ * */
+const e=require(`./chunk-350yNsax.cjs`),t=require(`./base-C_azywlB.cjs`),n=require(`./decorate-Dq4-zbi1.cjs`),r=require(`./formatter-CWhf4xbq.cjs`);let i=require(`@luzmo/icons`),a=require(`lit`),o=require(`lit/decorators.js`),s=require(`@lit/localize`);require(`@luzmo/lucero/tooltip`);let c=require(`@lit-labs/signals`),l=require(`@lit/context`),u=require(`@lit/task`);require(`@luzmo/lucero/divider`),require(`@luzmo/lucero/field-label`),require(`@luzmo/lucero/icon`),require(`@luzmo/lucero/multi-language-field`),require(`@luzmo/lucero/progress-circle`),require(`@luzmo/lucero/text-field`);const d=(0,l.createContext)(Symbol(`slot-store-context`));var f=`:host{font-family:var(--luzmo-display-settings-font-family,var(--luzmo-font-family));font-size:var(--luzmo-display-settings-font-size,var(--display-settings-font-size));color:var(--luzmo-display-settings-font-color,var(--luzmo-font-color))}.settings-container{gap:var(--luzmo-display-settings-vertical-gap,var(--luzmo-spacing-2));flex-direction:column;display:flex}.settings-row{justify-content:flex-start;align-items:center;gap:var(--luzmo-display-settings-gap,var(--display-settings-gap));display:flex}luzmo-divider{margin:var(--luzmo-display-settings-ids-container-vertical-margin,var(--display-settings-ids-container-vertical-margin))0}luzmo-tooltip{--tooltip-font-size:var(--luzmo-display-settings-tooltip-font-size,var(--tooltip-font-size))}.setting{align-items:center;display:flex}.label-action-container{justify-content:space-between;align-items:center;gap:var(--luzmo-display-settings-info-to-remove-icon-gap,var(--display-settings-info-to-remove-icon-gap));display:flex}.id-button,.remove-button{cursor:pointer;font-size:var(--luzmo-display-settings-id-button-font-size,var(--luzmo-display-settings-font-size,var(--display-settings-font-size)));color:var(--luzmo-display-settings-font-color,var(--luzmo-font-color));background:0 0;border:none;outline:none}.remove-button{width:var(--luzmo-display-settings-remove-button-size,var(--display-settings-remove-button-size));height:var(--luzmo-display-settings-remove-button-size,var(--display-settings-remove-button-size));border-radius:var(--luzmo-display-settings-remove-button-border-radius,50%);display:block}.remove-button:hover{background-color:var(--luzmo-display-settings-remove-button-background-color-hover,var(--luzmo-background-color-hover))}.remove-button:active,.remove-button:focus{background-color:var(--luzmo-display-settings-remove-button-background-color-down,var(--luzmo-background-color-down))}.remove-button:focus-visible{box-shadow:0 0 0 var(--luzmo-display-settings-remove-button-indicator-thickness,var(--display-settings-remove-button-indicator-thickness))var(--highcontrast-remove-button-indicator-color,var(--luzmo-display-settings-remove-button-indicator-color,var(--display-settings-remove-button-indicator-color)))}.ids-container{gap:var(--luzmo-display-settings-ids-container-gap,var(--luzmo-spacing-2));border-radius:50%;flex-direction:column;display:flex}.id-label{text-transform:var(--luzmo-display-settings-id-label-text-transform,var(--display-settings-id-label-text-transform));font-size:var(--luzmo-display-settings-id-label-font-size,var(--display-settings-id-label-font-size));color:var(--luzmo-display-settings-id-label-color,var(--display-settings-id-label-color))}.id-value{-webkit-user-select:text;user-select:text;cursor:text}.example-container{line-height:var(--luzmo-display-settings-example-height,var(--display-settings-example-height));font-size:var(--luzmo-display-settings-example-font-size,var(--display-settings-example-font-size));color:var(--luzmo-display-settings-example-color,var(--display-settings-example-color))}.example-container .example-label{font-weight:var(--luzmo-display-settings-example-label-font-weight,var(--display-settings-example-label-font-weight));color:var(--luzmo-display-settings-example-label-color,var(--display-settings-example-label-color))}.example-container .example-language{text-transform:uppercase;color:var(--luzmo-display-settings-example-language-color,var(--display-settings-example-language-color))}.example-container{gap:var(--luzmo-display-settings-example-container-gap,var(--luzmo-spacing-2))}:host{--display-settings-font-family:var(--luzmo-font-family);--display-settings-id-label-text-transform:uppercase;--display-settings-id-label-color:var(--luzmo-secondary);--display-settings-remove-button-indicator-color:var(--luzmo-primary);--display-settings-remove-button-indicator-thickness:var(--luzmo-border-width);--display-settings-font-size:var(--luzmo-font-size);--display-settings-id-label-font-size:var(--luzmo-font-size-s);--display-settings-gap:var(--luzmo-spacing-3);--display-settings-ids-container-vertical-margin:var(--luzmo-spacing-4);--display-settings-info-to-remove-icon-gap:var(--luzmo-spacing-5);--display-settings-remove-button-size:var(--luzmo-component-height)}:host([size=s]){--display-settings-id-label-font-size:var(--luzmo-font-size-s);--display-settings-font-size:var(--luzmo-font-size-s);--display-settings-gap:var(--luzmo-spacing-3);--display-settings-ids-container-vertical-margin:var(--luzmo-spacing-3);--display-settings-info-to-remove-icon-gap:var(--luzmo-spacing-4);--display-settings-remove-button-size:var(--luzmo-component-height-s)}:host([size=l]){--display-settings-id-label-font-size:var(--luzmo-font-size);--display-settings-font-size:var(--luzmo-font-size-l);--display-settings-gap:var(--luzmo-spacing-4);--display-settings-ids-container-vertical-margin:var(--luzmo-spacing-5);--display-settings-info-to-remove-icon-gap:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1));--display-settings-remove-button-size:var(--luzmo-component-height-l)}:host([size=xl]){--display-settings-id-label-font-size:var(--luzmo-font-size-l);--display-settings-font-size:var(--luzmo-font-size-xl);--display-settings-gap:var(--luzmo-spacing-5);--display-settings-ids-container-vertical-margin:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1));--display-settings-info-to-remove-icon-gap:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-2));--display-settings-remove-button-size:var(--luzmo-component-height-xl)}:host{--display-settings-example-font-size:var(--luzmo-font-size);--display-settings-example-color:var(--luzmo-font-color);--display-settings-example-label-font-weight:bold;--display-settings-example-label-color:var(--luzmo-primary);--display-settings-example-language-color:var(--luzmo-primary);--display-settings-example-height:var(--luzmo-component-height)}:host([size=s]){--display-settings-example-height:var(--luzmo-component-height-s);--display-settings-example-font-size:var(--luzmo-font-size-s)}:host([size=l]){--display-settings-example-height:var(--luzmo-component-height-l);--display-settings-example-font-size:var(--luzmo-font-size)}:host([size=xl]){--display-settings-example-height:var(--luzmo-component-height-xl);--display-settings-example-font-size:var(--luzmo-font-size-l)}`,p=class extends (0,c.SignalWatcher)(t.n(t.i,{validSizes:Object.values(t.t)})){constructor(...e){super(...e),this._loadDisplaySettings=new u.Task(this,{task:async([e,t,n,r,i,a])=>{let o=[];a&&o.push(`grandTotals`),n&&o.push(`periodOverPeriod`),(e===`numeric`||e===`mixed`&&this._currentSlotContent?.type===`numeric`)&&o.push(`numeric`),e!==`numeric`&&this._currentSlotContent?.type===`datetime`&&o.push(`datetime`),![`numeric`,`mixed`].includes(e??``)&&this._currentSlotContent?.type===`numeric`&&!r&&o.push(`binning`),n&&!this._settingsTypeLoaded.periodOverPeriod&&(await Promise.resolve().then(()=>require(`./display-settings-period-over-period/index.cjs`)),this._settingsTypeLoaded.periodOverPeriod=!0),o.length>0&&!t&&(o.includes(`numeric`)&&!this._settingsTypeLoaded.numeric?(await Promise.resolve().then(()=>require(`./display-settings-numeric/index.cjs`)),this._settingsTypeLoaded.numeric=!0):o.includes(`datetime`)&&!this._settingsTypeLoaded.datetime&&i?(await Promise.resolve().then(()=>require(`./display-settings-datetime/index.cjs`)),this._settingsTypeLoaded.datetime=!0):o.includes(`binning`)&&!this._settingsTypeLoaded.binning?(await Promise.resolve().then(()=>require(`./display-settings-binning/index.cjs`)),this._settingsTypeLoaded.binning=!0):o.includes(`grandTotals`)&&!this._settingsTypeLoaded.grandTotals&&(await Promise.resolve().then(()=>require(`./display-settings-grand-totals/index.cjs`)),this._settingsTypeLoaded.grandTotals=!0))},args:()=>[this.slotType,this.hideDisplaySettings,this._store?.periodOverPeriodUiType.get(),this.isBinningDisabled,this.areDatetimeOptionsEnabled,this.areGrandTotalsEnabled,this.slotContent]}),this.language=`en`,this.contentLanguage=`en`,this.slotType=`numeric`,this.slotContent={},this._showIds=!1,this.measureColumns=[],this._settingsTypeLoaded={binning:!1,datetime:!1,numeric:!1,grandTotals:!1,periodOverPeriod:!1,hierarchy:!0},this._currentSlotContent={}}static get styles(){return[(0,a.unsafeCSS)(f)]}_datasetDatetimeColumns(){return this._store?.linkedDataset.get().flatMap(e=>e.columns?.filter(e=>e.type===`datetime`).map(t=>({...t,datasetId:e.id})))}willUpdate(e){let t=this._store?.activeSlotContents.get(),n=this._store?.periodOverPeriodUiType.get();if(this.periodOverPeriodUiType!==n&&(this.periodOverPeriodUiType=n),this._store){t!==this._lastStoreContent&&(this._lastStoreContent=t,this._currentSlotContent=t?structuredClone(t):{});return}if(e.has(`slotContent`)||Object.keys(this._currentSlotContent).length===0){let e=this.slotContent;e&&(this._currentSlotContent=structuredClone(e))}}get datasetId(){return this._currentSlotContent.datasetId??this._currentSlotContent.set}get formulaOrColumnId(){return this._currentSlotContent.formula??this._currentSlotContent.columnId??this._currentSlotContent.column}resetInfoVisibility(e){this._showIds&&this._toggleIds(e)}_onSlotContentChange(e){e.stopPropagation(),e.preventDefault(),this._currentSlotContent=structuredClone(e.detail.slotContent),this._sendEvent(),this.requestUpdate()}_onLabelChange(){this._currentSlotContent=structuredClone(this._currentSlotContent),this._currentSlotContent.label=this._multiLanguageFieldElement.value||{},this._sendEvent(),this.requestUpdate()}_sendEvent(){this.dispatchEvent(new CustomEvent(`luzmo-slot-content-changed`,{bubbles:!0,composed:!0,cancelable:!0,detail:{slotContent:{...this._currentSlotContent}}})),this._store&&(this._store.updateContent({...this._currentSlotContent}),this._lastStoreContent=this._store.activeSlotContents.get())}_removeEvent(){this.dispatchEvent(new CustomEvent(`luzmo-remove-slot-content`,{bubbles:!0,composed:!0,cancelable:!0,detail:{slotContent:this._currentSlotContent}}))}_toggleIds(e=!0){this._showIds=!this._showIds,e&&this.dispatchEvent(new CustomEvent(`luzmo-info-visibility-changed`,{detail:{isVisible:this._showIds,slotContent:{...this._currentSlotContent}}}))}_renderExampleRow(){let e=this.slotType===`numeric`||this.slotType===`mixed`&&this._currentSlotContent.type===`numeric`,t=this.slotType!==`datetime`&&this._currentSlotContent.type===`datetime`&&this.areDatetimeOptionsEnabled;if(!(e||t))return a.nothing;let n=!this._currentSlotContent.datetimeDisplayMode||this._currentSlotContent.datetimeDisplayMode===`default`,i=e?1234.56:n?new Date:1,o=r.t({...this._currentSlotContent,type:e?`numeric`:`datetime`},{locale:this.contentLanguage,level:this._currentSlotContent.level})(i);return a.html`<div class="settings-row example-container">
+      <span class="example-label"
+        >${(0,s.msg)(`Example`,{desc:`Label for example`})}:</span
+      >
+      <span class="example">${o}</span>
+    </div>`}_renderDisplaySettings(){return a.html`<div class="settings-container">
+        <div class="settings-row">
+          <div class="setting">
+            <div class="label-container">
+              <luzmo-field-label side-aligned="start" .size=${this.size}
+                >Label:</luzmo-field-label
+              >
+              <luzmo-multi-language-field
+                .language=${this.contentLanguage}
+                .value=${this._currentSlotContent.label??{}}
+                .size=${this.size}
+                debounce="200"
+                @change=${this._onLabelChange}
+              ></luzmo-multi-language-field>
+            </div>
+            <div class="label-action-container">
+              <button class="id-button" @click=${this._toggleIds}>
+                ${(0,i.luzmoIcon)(i.luzmoInfoCircleOutline)}
+                <luzmo-tooltip self-managed placement="top" size=${this.size}>
+                  Show dataset and column id's
+                </luzmo-tooltip>
+              </button>
+              ${this.showRemoveButton?a.html`<button
+                    class="remove-button"
+                    @click=${this._removeEvent}
+                  >
+                    ${(0,i.luzmoIcon)(i.luzmoTrashOutline)}
+                    <luzmo-tooltip
+                      self-managed
+                      placement="top"
+                      size=${this.size}
+                    >
+                      Remove
+                    </luzmo-tooltip>
+                  </button>`:``}
+            </div>
+          </div>
+        </div>
+        ${this.areGrandTotalsEnabled?a.html`<luzmo-display-settings-grand-totals
+              .language=${this.language}
+              .slotContent=${this._currentSlotContent}
+              .size=${this.size}
+              @luzmo-slot-content-changed=${this._onSlotContentChange}
+            ></luzmo-display-settings-grand-totals>`:``}
+        ${this.slotType===`numeric`||this.slotType===`mixed`&&this._currentSlotContent.type===`numeric`?a.html`<luzmo-display-settings-numeric
+              .language=${this.language}
+              .slotContent=${this._currentSlotContent}
+              .size=${this.size}
+              .measureColumns=${this.measureColumns}
+              .isAggregationDisabled=${this.isAggregationDisabled}
+              .isCumulativeSumEnabled=${this.isCumulativeSumEnabled}
+              @luzmo-slot-content-changed=${this._onSlotContentChange}
+            ></luzmo-display-settings-numeric>`:``}
+        ${this.slotType!==`numeric`&&this._currentSlotContent.type===`datetime`&&this.areDatetimeOptionsEnabled?a.html`<luzmo-display-settings-datetime
+              .language=${this.language}
+              .contentLanguage=${this.contentLanguage}
+              .slotContent=${this._currentSlotContent}
+              .size=${this.size}
+              @luzmo-slot-content-changed=${this._onSlotContentChange}
+            ></luzmo-display-settings-datetime>`:``}
+        ${![`numeric`,`mixed`].includes(this.slotType??``)&&this._currentSlotContent.type===`numeric`&&!this.isBinningDisabled?a.html`<luzmo-display-settings-binning
+              .language=${this.language}
+              .slotContent=${this._currentSlotContent}
+              .size=${this.size}
+              @luzmo-slot-content-changed=${this._onSlotContentChange}
+            ></luzmo-display-settings-binning>`:``}
+        ${this.periodOverPeriodUiType?a.html`<luzmo-display-settings-period-over-period
+              .language=${this.language}
+              .slotContent=${this._currentSlotContent}
+              .size=${this.size}
+              .periodOverPeriodUiType=${this.periodOverPeriodUiType}
+              .linkedDatasetDatetimeColumns=${this._datasetDatetimeColumns()}
+              @luzmo-slot-content-changed=${this._onSlotContentChange}
+            ></luzmo-display-settings-period-over-period>`:``}
+        ${this._renderExampleRow()}
+      </div>
+      ${this._showIds?a.html` <luzmo-divider></luzmo-divider>
+            <div class="ids-container">
+              <div>
+                <span class="id-label"
+                  >${this._currentSlotContent.formula?(0,s.msg)(`Formula`,{desc:`Label for formula type`}):(0,s.msg)(`Column`,{desc:`Label for column type`})}:
+                </span>
+                <span class="id-value">
+                  ${this.formulaOrColumnId}
+                </span>
+              </div>
+              <div>
+                <span class="id-label">Dataset: </span>
+                <span class="id-value">
+                  ${this.datasetId}
+                </span>
+              </div>
+              <div></div>
+            </div>`:``}`}render(){return this._loadDisplaySettings.render({pending:()=>a.html`<luzmo-progress-circle
+          indeterminate
+          .size=${this.size}
+        ></luzmo-progress-circle>`,complete:()=>this._renderDisplaySettings(),error:()=>this._renderDisplaySettings()})}disconnectedCallback(){super.disconnectedCallback?.(),this._loadDisplaySettings.abort?.()}};n.t([(0,o.property)({type:String})],p.prototype,`language`,void 0),n.t([(0,o.property)({type:String,attribute:`content-language`})],p.prototype,`contentLanguage`,void 0),n.t([(0,o.property)({type:Boolean,attribute:`hide-display-settings`})],p.prototype,`hideDisplaySettings`,void 0),n.t([(0,o.property)({type:Boolean})],p.prototype,`isBinningDisabled`,void 0),n.t([(0,o.property)({type:Boolean})],p.prototype,`areDatetimeOptionsEnabled`,void 0),n.t([(0,o.property)({type:Boolean})],p.prototype,`areGrandTotalsEnabled`,void 0),n.t([(0,o.property)({type:Boolean})],p.prototype,`isAggregationDisabled`,void 0),n.t([(0,o.property)({type:Boolean})],p.prototype,`isCumulativeSumEnabled`,void 0),n.t([(0,o.property)({type:String})],p.prototype,`periodOverPeriodUiType`,void 0),n.t([(0,o.property)({type:Boolean,attribute:`show-remove-button`})],p.prototype,`showRemoveButton`,void 0),n.t([(0,o.property)({type:String,attribute:`slot-type`})],p.prototype,`slotType`,void 0),n.t([(0,o.property)({type:Object,attribute:!1})],p.prototype,`slotContent`,void 0),n.t([(0,o.state)()],p.prototype,`_showIds`,void 0),n.t([(0,o.property)({type:Array,reflect:!1})],p.prototype,`measureColumns`,void 0),n.t([(0,o.query)(`luzmo-multi-language-field`)],p.prototype,`_multiLanguageFieldElement`,void 0),n.t([(0,l.consume)({context:d,subscribe:!0})],p.prototype,`_store`,void 0),customElements.get(`luzmo-display-settings`)||customElements.define(`luzmo-display-settings`,p),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return p}});