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

package/components/display-settings-datetime/index.js

@@ -25,15 +25,15 @@ import "@luzmo/lucero/icon";
 import "@luzmo/lucero/number-field";
 import "@luzmo/lucero/picker";
 import "@luzmo/lucero/progress-circle";
-import { unsafeCSS as b, html as s } from "lit";
-import { msg as l, localized as k } from "@lit/localize";
+import { unsafeCSS as b, html as a } from "lit";
+import { msg as i, localized as k } from "@lit/localize";
 import { luzmoCheckboxChecked as c, luzmoCheckbox as p } from "@luzmo/icons";
-import { a as S, S as f, f as _ } from "../en-BOTjhwEc.js";
-import { a as w, b as z, W as g } from "../periods.const-CjHXYn-w.js";
-import { property as d, query as n } from "lit/decorators.js";
-import { L as F } from "../focusable-DCIFkpiW.js";
+import { a as S, S as f, f as _ } from "../en-D3ihEGXg.js";
+import { a as F, b as z, W as g } from "../periods.const-CjHXYn-w.js";
+import { property as d, query as m } from "lit/decorators.js";
+import { L as w } from "../focusable-BS2pbY7w.js";
 import { S as $, E as x } from "../sized-mixin-cJbo3PKR.js";
-import { g as A, t as L, s as D } from "../set-locale-Dp3N_gXN.js";
+import { g as A, t as L, s as D } from "../set-locale-hKTMz37h.js";
 (function() {
   if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
     const e = document.createElement("style");
@@ -41,17 +41,17 @@ import { g as A, t as L, s as D } from "../set-locale-Dp3N_gXN.js";
   }
 })();
 const y = {
-  "~": () => l("Auto", { desc: "Automatic setting of the option" }),
+  "~": () => i("Auto", { desc: "Automatic setting of the option" }),
   "/": () => "/",
   "-": () => "-",
   ".": () => "."
 }, E = ":host{font-family:var(--luzmo-display-settings-datetime-font-family, var(--luzmo-font-family))}:host .settings-container{display:flex;flex-direction:column;gap:var(--luzmo-display-settings-vertical-gap, var(--luzmo-spacing-2))}:host .settings-row{display:flex;justify-content:flex-start;align-items:center;gap:var(--luzmo-display-settings-datetime-gap, var(--display-settings-datetime-gap))}:host{--display-settings-datetime-example-font-size: var(--luzmo-font-size);--display-settings-datetime-example-color: var(--luzmo-font-color);--display-settings-datetime-example-label-font-weight: bold;--display-settings-datetime-example-label-color: var(--luzmo-primary);--display-settings-datetime-example-language-color: var(--luzmo-primary)}:host{--display-settings-datetime-gap: var(--luzmo-spacing-3);--display-settings-datetime-example-height: var(--luzmo-component-height);--display-settings-datetime-example-font-size: var(--luzmo-font-size-s)}:host([size=s]){--display-settings-datetime-gap: var(--luzmo-spacing-3);--display-settings-datetime-example-height: var(--luzmo-component-height-s);--display-settings-datetime-example-font-size: var(--luzmo-font-size-s)}:host([size=l]){--display-settings-datetime-gap: var(--luzmo-spacing-4);--display-settings-datetime-example-height: var(--luzmo-component-height-l);--display-settings-datetime-example-font-size: var(--luzmo-font-size)}:host([size=xl]){--display-settings-datetime-gap: var(--luzmo-spacing-5);--display-settings-datetime-example-height: var(--luzmo-component-height-xl);--display-settings-datetime-example-font-size: var(--luzmo-font-size-l)}";
-var M = Object.defineProperty, C = Object.getOwnPropertyDescriptor, m = (t, e, o, a) => {
-  for (var i = a > 1 ? void 0 : a ? C(e, o) : e, h = t.length - 1, u; h >= 0; h--)
-    (u = t[h]) && (i = (a ? u(e, o, i) : u(i)) || i);
-  return a && i && M(e, o, i), i;
+var M = Object.defineProperty, C = Object.getOwnPropertyDescriptor, l = (t, e, o, r) => {
+  for (var n = r > 1 ? void 0 : r ? C(e, o) : e, h = t.length - 1, u; h >= 0; h--)
+    (u = t[h]) && (n = (r ? u(e, o, n) : u(n)) || n);
+  return r && n && M(e, o, n), n;
 };
-let r = class extends $(F, {
+let s = class extends $(w, {
   validSizes: Object.values(x)
 }) {
   constructor() {
@@ -62,9 +62,9 @@ let r = class extends $(F, {
             "../../utils/formatter/formats/cs.ts": () => import("../cs-DVZ0Tapy.js"),
             "../../utils/formatter/formats/da.ts": () => import("../da-DHy05oSR.js"),
             "../../utils/formatter/formats/de.ts": () => import("../de-iM39JlAt.js"),
-            "../../utils/formatter/formats/en-GB.ts": () => import("../en-GB-CEHEs8F2.js"),
-            "../../utils/formatter/formats/en-US.ts": () => import("../en-BOTjhwEc.js").then((o) => o.e),
-            "../../utils/formatter/formats/en.ts": () => import("../en-BOTjhwEc.js").then((o) => o.b),
+            "../../utils/formatter/formats/en-GB.ts": () => import("../en-GB-ialeqj_z.js"),
+            "../../utils/formatter/formats/en-US.ts": () => import("../en-D3ihEGXg.js").then((o) => o.e),
+            "../../utils/formatter/formats/en.ts": () => import("../en-D3ihEGXg.js").then((o) => o.b),
             "../../utils/formatter/formats/es.ts": () => import("../es-KhTq4jX8.js"),
             "../../utils/formatter/formats/fi.ts": () => import("../fi-Dh_ebgpe.js"),
             "../../utils/formatter/formats/fr.ts": () => import("../fr-CU727YF1.js"),
@@ -86,7 +86,7 @@ let r = class extends $(F, {
           });
           if (e[`../../utils/formatter/formats/${t}.ts`]) {
             const o = await e[`../../utils/formatter/formats/${t}.ts`]();
-            this._localeFormats = (o == null ? void 0 : o.default) ?? {};
+            this._localeFormats = o?.default ?? {};
           }
           return this._contentLanguageLoaded = t, this._localeFormats;
         }
@@ -109,30 +109,27 @@ let r = class extends $(F, {
     return [b(E)];
   }
   _parseSlotContent() {
-    var t, e, o;
-    this._dateLevel = ((t = this.slotContent) == null ? void 0 : t.level) ?? ((e = this.slotContent) == null ? void 0 : e.lowestLevel) ?? 5, this._displayAs = ((o = this.slotContent) == null ? void 0 : o.datetimeDisplayMode) ?? "default", this._displayAs === "weekday_number" && (this._displayAs = "day_in_week", this._weekDayAndMonthInYearFormat = "number"), this._displayAs === "weekday_name" && (this._displayAs = "day_in_week"), this._displayAs === "month_number" && (this._displayAs = "month_in_year", this._weekDayAndMonthInYearFormat = "number"), this._displayAs === "month_name" && (this._displayAs = "month_in_year"), this._parseSavedFormat();
+    this._dateLevel = this.slotContent?.level ?? this.slotContent?.lowestLevel ?? 5, this._displayAs = this.slotContent?.datetimeDisplayMode ?? "default", this._displayAs === "weekday_number" && (this._displayAs = "day_in_week", this._weekDayAndMonthInYearFormat = "number"), this._displayAs === "weekday_name" && (this._displayAs = "day_in_week"), this._displayAs === "month_number" && (this._displayAs = "month_in_year", this._weekDayAndMonthInYearFormat = "number"), this._displayAs === "month_name" && (this._displayAs = "month_in_year"), this._parseSavedFormat();
   }
   _parseSavedFormat() {
-    var o;
-    const t = ((o = this.slotContent) == null ? void 0 : o.format) ?? S, e = t.match(/[./-]/);
-    if (this._dateSeparator = t.includes("~") ? "~" : (e == null ? void 0 : e[0]) ?? "~", t.includes("%amd"))
+    const t = this.slotContent?.format ?? S, e = t.match(/[./-]/);
+    if (this._dateSeparator = t.includes("~") ? "~" : e?.[0] ?? "~", t.includes("%amd"))
       this._dateFormat = "auto";
     else {
-      const a = t.indexOf("%d"), i = t.indexOf("%m");
-      a !== -1 && i !== -1 && (this._dateFormat = a < i ? "ddmm" : "mmdd");
+      const o = t.indexOf("%d"), r = t.indexOf("%m");
+      o !== -1 && r !== -1 && (this._dateFormat = o < r ? "ddmm" : "mmdd");
     }
     this._24hFormat = t.includes("%H"), this._monthName = /%B|%b/.test(t), this._weekDay = /%a|%A/.test(t), this._monthName && (this._monthNameFormat = t.includes("%b") ? "short" : "long"), this._weekDay && (this._weekDayAndMonthInYearFormat = t.includes("%a") ? "short" : "long");
   }
   _calculateFormat() {
-    var o;
     let t;
-    const e = ((o = this._localeFormats) == null ? void 0 : o.smartDateFormats) ?? f;
+    const e = this._localeFormats?.smartDateFormats ?? f;
     this._monthName ? (t = e.filter(
-      (a) => a.monthType === "name" && a.longText === (this._monthNameFormat === "long") && a.weekday === this._weekDay
+      (o) => o.monthType === "name" && o.longText === (this._monthNameFormat === "long") && o.weekday === this._weekDay
     ), t.length > 0 ? this._format = t[0].key : (this._weekDayAndMonthInYearFormat = "short", this._weekDay = !0, this._format = "%a %e %B %Y")) : (t = this._dateLevel && this._dateLevel === 4 ? e.filter(
-      (a) => a.monthType === "number" && a.mmdd === (this._weekFormat === "mmdd" ? !0 : this._weekFormat === "ddmm" ? !1 : null) && a.separator === this._dateSeparator
+      (o) => o.monthType === "number" && o.mmdd === (this._weekFormat === "mmdd" ? !0 : this._weekFormat === "ddmm" ? !1 : null) && o.separator === this._dateSeparator
     ) : e.filter(
-      (a) => a.monthType === "number" && a.mmdd === (this._dateFormat === "mmdd" ? !0 : this._dateFormat === "ddmm" ? !1 : null) && a.separator === this._dateSeparator
+      (o) => o.monthType === "number" && o.mmdd === (this._dateFormat === "mmdd" ? !0 : this._dateFormat === "ddmm" ? !1 : null) && o.separator === this._dateSeparator
     ), this._dateFormat === "auto" && this._dateLevel && this._dateLevel !== 4 ? this._format = "%amd" + this._dateSeparator + "%Y" : t.length > 0 ? this._format = t[0].key : (this._dateFormat = "ddmm", this._dateSeparator = "/", this._format = "%d/%m/%Y")), this._dateLevel && this._dateLevel > 5 && (this._format += this._24hFormat ? " %H:%M:%S.%L" : " %I:%M:%S.%L %p");
   }
   _setWeekStartsOn() {
@@ -142,19 +139,16 @@ let r = class extends $(F, {
     this._displayAs = this._displayAsElement.value, this._sendEvent(), this.requestUpdate();
   }
   _setWeekdayAndMonthInYearFormat() {
-    var t;
-    this._weekDayAndMonthInYearFormat = ((t = this._weekDayAndMonthInYearFormatElement.selected) == null ? void 0 : t[0]) ?? "long", this._sendEvent(), this.requestUpdate();
+    this._weekDayAndMonthInYearFormat = this._weekDayAndMonthInYearFormatElement.selected?.[0] ?? "long", this._sendEvent(), this.requestUpdate();
   }
   _setMonthNameFormat() {
-    var t;
-    this._monthNameFormat = (t = this._monthNameFormatElement.selected) == null ? void 0 : t[0], this._sendEvent(), this.requestUpdate();
+    this._monthNameFormat = this._monthNameFormatElement.selected?.[0], this._sendEvent(), this.requestUpdate();
   }
   _setMonthName() {
     this._monthName = this._monthNameElement.selected, this._sendEvent(), this.requestUpdate();
   }
   _setWeekFormat() {
-    var t;
-    this._weekFormat = (t = this._weekFormatElement.selected) == null ? void 0 : t[0], this._sendEvent(), this.requestUpdate();
+    this._weekFormat = this._weekFormatElement.selected?.[0], this._sendEvent(), this.requestUpdate();
   }
   _setDateFormat() {
     this._dateFormat = this._dateFormatElement.value, this._sendEvent(), this.requestUpdate();
@@ -175,15 +169,14 @@ let r = class extends $(F, {
     t.has("slotContent") && (this._parseSlotContent(), this._calculateSlotContent()), t.has("language") && this.language !== A() && ([...L].includes(this.language ?? "en") || this.language === "en") && D(this.language);
   }
   _renderDisplaySettings() {
-    var e, o;
-    const t = (o = (e = w) == null ? void 0 : e[`level${this._dateLevel ?? 0}`]) == null ? void 0 : o.map(
-      (a) => s`<luzmo-menu-item value=${a.key}>
-          ${a.i18n()}
+    const t = F?.[`level${this._dateLevel ?? 0}`]?.map(
+      (e) => a`<luzmo-menu-item value=${e.key}>
+          ${e.i18n()}
         </luzmo-menu-item>`
     );
-    return s`<div class="setting">
+    return a`<div class="setting">
       <luzmo-field-label for="display-as"
-        >${l("Display", {
+        >${i("Display", {
       desc: "Label for display setting"
     })}</luzmo-field-label
       >
@@ -201,12 +194,12 @@ let r = class extends $(F, {
   _renderWeekDayAndMonthNameFormatSettings() {
     const t = Object.keys(
       z
-    ).map((e) => s`<luzmo-action-button value=${e}>
+    ).map((e) => a`<luzmo-action-button value=${e}>
         ${z[e]()}
       </luzmo-action-button>`);
-    return s` <div class="setting">
+    return a` <div class="setting">
       <luzmo-field-label for="weekday-and-month-in-year-format"
-        >${l("Format", {
+        >${i("Format", {
       desc: "Label for format setting"
     })}</luzmo-field-label
       >
@@ -224,9 +217,9 @@ let r = class extends $(F, {
     </div>`;
   }
   _renderMonthNameFormatSettings() {
-    return s` <div class="setting">
+    return a` <div class="setting">
       <luzmo-field-label for="month-name-format"
-        >${l("Format", {
+        >${i("Format", {
       desc: "Label for format setting"
     })}</luzmo-field-label
       >
@@ -240,24 +233,23 @@ let r = class extends $(F, {
         @change=${this._setMonthNameFormat}
       >
         <luzmo-action-button value="short">
-          ${l("Short", { desc: "Short format option" })}
+          ${i("Short", { desc: "Short format option" })}
         </luzmo-action-button>
         <luzmo-action-button value="long">
-          ${l("Long", { desc: "Long format option" })}
+          ${i("Long", { desc: "Long format option" })}
         </luzmo-action-button>
       </luzmo-action-group>
     </div>`;
   }
   _renderWeekFormatSettings() {
-    var a;
-    const t = ((a = this._localeFormats) == null ? void 0 : a.smartDateFormats) ?? f, e = t.find(
-      (i) => i.mmdd === !0 && i.separator === this._dateSeparator && i.monthType === "number"
+    const t = this._localeFormats?.smartDateFormats ?? f, e = t.find(
+      (r) => r.mmdd === !0 && r.separator === this._dateSeparator && r.monthType === "number"
     ), o = t.find(
-      (i) => i.mmdd === !1 && i.separator === this._dateSeparator && i.monthType === "number"
+      (r) => r.mmdd === !1 && r.separator === this._dateSeparator && r.monthType === "number"
     );
-    return s` <div class="setting">
+    return a` <div class="setting">
       <luzmo-field-label for="week-format"
-        >${l("Format", {
+        >${i("Format", {
       desc: "Label for format setting"
     })}</luzmo-field-label
       >
@@ -275,7 +267,7 @@ let r = class extends $(F, {
       {
         ...this._currentSlotContent,
         type: "datetime",
-        format: o == null ? void 0 : o.key
+        format: o?.key
       },
       {
         localFormats: this._localeFormats,
@@ -288,7 +280,7 @@ let r = class extends $(F, {
       {
         ...this._currentSlotContent,
         type: "datetime",
-        format: e == null ? void 0 : e.key
+        format: e?.key
       },
       {
         localFormats: this._localeFormats,
@@ -301,13 +293,13 @@ let r = class extends $(F, {
   }
   _renderWeekStartsOnSettings() {
     const t = Object.keys(g).map(
-      (e) => s`<luzmo-menu-item value=${e}>
+      (e) => a`<luzmo-menu-item value=${e}>
           ${g[e]()}
         </luzmo-menu-item>`
     );
-    return s`<div class="setting">
+    return a`<div class="setting">
       <luzmo-field-label for="week-start"
-        >${l("Week starts on", {
+        >${i("Week starts on", {
       desc: "Label for week start setting"
     })}</luzmo-field-label
       >
@@ -323,9 +315,9 @@ let r = class extends $(F, {
     </div>`;
   }
   _renderMonthNameSettings() {
-    return s`<div class="settings-">
+    return a`<div class="settings-">
       <luzmo-field-label for="month-name"
-        >${l("Month", { desc: "Month format setting" })}</luzmo-field-label
+        >${i("Month", { desc: "Month format setting" })}</luzmo-field-label
       >
       <luzmo-action-button
         id="month-name"
@@ -340,15 +332,15 @@ let r = class extends $(F, {
           .size=${this.size}
           .icon=${this._monthName ? c : p}
         ></luzmo-icon>
-        ${l("Name")}
+        ${i("Name")}
       </luzmo-action-button>
     </div>`;
   }
   _renderDateFormatSettings() {
     const t = this._dateSeparator === "~" ? "/" : this._dateSeparator;
-    return s`<div class="setting">
+    return a`<div class="setting">
       <luzmo-field-label for="date-format"
-        >${l("Format", {
+        >${i("Format", {
       desc: "Label for format setting"
     })}</luzmo-field-label
       >
@@ -360,7 +352,7 @@ let r = class extends $(F, {
         @change=${this._setDateFormat}
       >
         <luzmo-menu-item value="auto">
-          ${l("Auto", { desc: "Automatic setting of the option" })}
+          ${i("Auto", { desc: "Automatic setting of the option" })}
         </luzmo-menu-item>
         <luzmo-menu-item value="mmdd">12${t}31</luzmo-menu-item>
         <luzmo-menu-item value="ddmm">31${t}12</luzmo-menu-item>
@@ -369,13 +361,13 @@ let r = class extends $(F, {
   }
   _renderSeparatorSettings() {
     const t = Object.keys(y).map(
-      (e) => s`<luzmo-menu-item value=${e}>
+      (e) => a`<luzmo-menu-item value=${e}>
           ${y[e]()}
         </luzmo-menu-item>`
     );
-    return s`<div class="setting">
+    return a`<div class="setting">
       <luzmo-field-label for="date-separator"
-        >${l("Separator", {
+        >${i("Separator", {
       desc: "Label for date separator setting"
     })}</luzmo-field-label
       >
@@ -391,9 +383,9 @@ let r = class extends $(F, {
     </div>`;
   }
   _render24hFormatSettings() {
-    return s`<div class="settings-">
+    return a`<div class="settings-">
       <luzmo-field-label for="format-24h"
-        >${l("24h", {
+        >${i("24h", {
       desc: "Label for 24h format setting"
     })}</luzmo-field-label
       >
@@ -414,9 +406,9 @@ let r = class extends $(F, {
     </div>`;
   }
   _renderWeekdaySettings() {
-    return s`<div class="settings-">
+    return a`<div class="settings-">
       <luzmo-field-label for="weekday"
-        >${l("Weekday", {
+        >${i("Weekday", {
       desc: "Label for weekday setting"
     })}</luzmo-field-label
       >
@@ -433,20 +425,20 @@ let r = class extends $(F, {
           .size=${this.size}
           .icon=${this._weekDay ? c : p}
         ></luzmo-icon>
-        ${l("Show")}
+        ${i("Show")}
       </luzmo-action-button>
     </div>`;
   }
   _renderAllSettings() {
-    return s`<div class="settings-container">
-      ${this._dateLevel && ![1, 9].includes(this._dateLevel) ? s` <div class="settings-row">
+    return a`<div class="settings-container">
+      ${this._dateLevel && ![1, 9].includes(this._dateLevel) ? a` <div class="settings-row">
             ${this._renderDisplaySettings()}
             ${this._dateLevel && this._dateLevel >= 5 && this._displayAs === "day_in_week" ? this._renderWeekStartsOnSettings() : ""}
           </div>` : ""}
-      ${["month_in_year", "day_in_week"].includes(this._displayAs ?? "") ? s` <div class="settings-row">
+      ${["month_in_year", "day_in_week"].includes(this._displayAs ?? "") ? a` <div class="settings-row">
             ${this._renderWeekDayAndMonthNameFormatSettings()}
           </div>` : ""}
-      ${this._dateLevel && this._dateLevel > 1 && this._displayAs === "default" ? s` <div class="settings-row">
+      ${this._dateLevel && this._dateLevel > 1 && this._displayAs === "default" ? a` <div class="settings-row">
             ${this._dateLevel && this._dateLevel !== 4 && this._dateLevel !== 2 ? this._renderMonthNameSettings() : ""}
             ${this._dateLevel && this._dateLevel !== 4 && this._dateLevel > 2 && this._monthName ? this._renderMonthNameFormatSettings() : ""}
             ${this._dateLevel && this._dateLevel === 4 && !this._monthName ? this._renderWeekFormatSettings() : ""}
@@ -459,7 +451,7 @@ let r = class extends $(F, {
   }
   render() {
     return this._loadLocaleFormatsConfig.render({
-      pending: () => s`<luzmo-progress-circle
+      pending: () => a`<luzmo-progress-circle
           indeterminate
           .size=${this.size}
         ></luzmo-progress-circle>`,
@@ -468,55 +460,55 @@ let r = class extends $(F, {
     });
   }
 };
-m([
+l([
   d({ type: String })
-], r.prototype, "language", 2);
-m([
+], s.prototype, "language", 2);
+l([
   d({ type: String })
-], r.prototype, "contentLanguage", 2);
-m([
+], s.prototype, "contentLanguage", 2);
+l([
   d({ type: String })
-], r.prototype, "size", 2);
-m([
+], s.prototype, "size", 2);
+l([
   d({ type: Object, reflect: !1 })
-], r.prototype, "slotContent", 2);
-m([
-  n("#display-as")
-], r.prototype, "_displayAsElement", 2);
-m([
-  n("#week-start")
-], r.prototype, "_weekStartElement", 2);
-m([
-  n("#weekday-and-month-in-year-format")
-], r.prototype, "_weekDayAndMonthInYearFormatElement", 2);
-m([
-  n("#month-name-format")
-], r.prototype, "_monthNameFormatElement", 2);
-m([
-  n("#month-name")
-], r.prototype, "_monthNameElement", 2);
-m([
-  n("#week-format")
-], r.prototype, "_weekFormatElement", 2);
-m([
-  n("#date-format")
-], r.prototype, "_dateFormatElement", 2);
-m([
-  n("#date-separator")
-], r.prototype, "_dateSeparatorElement", 2);
-m([
-  n("#weekday")
-], r.prototype, "_weekDayElement", 2);
-m([
-  n("#format-24h")
-], r.prototype, "_format24hElement", 2);
-r = m([
+], s.prototype, "slotContent", 2);
+l([
+  m("#display-as")
+], s.prototype, "_displayAsElement", 2);
+l([
+  m("#week-start")
+], s.prototype, "_weekStartElement", 2);
+l([
+  m("#weekday-and-month-in-year-format")
+], s.prototype, "_weekDayAndMonthInYearFormatElement", 2);
+l([
+  m("#month-name-format")
+], s.prototype, "_monthNameFormatElement", 2);
+l([
+  m("#month-name")
+], s.prototype, "_monthNameElement", 2);
+l([
+  m("#week-format")
+], s.prototype, "_weekFormatElement", 2);
+l([
+  m("#date-format")
+], s.prototype, "_dateFormatElement", 2);
+l([
+  m("#date-separator")
+], s.prototype, "_dateSeparatorElement", 2);
+l([
+  m("#weekday")
+], s.prototype, "_weekDayElement", 2);
+l([
+  m("#format-24h")
+], s.prototype, "_format24hElement", 2);
+s = l([
   k()
-], r);
+], s);
 customElements.get("luzmo-display-settings-datetime") || customElements.define(
   "luzmo-display-settings-datetime",
-  r
+  s
 );
 export {
-  r as LuzmoDisplaySettingsDatetime
+  s as LuzmoDisplaySettingsDatetime
 };

package/components/display-settings-grand-totals/display-settings-grand-totals.d.ts

@@ -0,0 +1,31 @@
+import '@luzmo/lucero/action-button';
+import '@luzmo/lucero/field-label';
+import '@luzmo/lucero/icon';
+import { CSSResultArray, PropertyValues, TemplateResult } from 'lit';
+import type { GenericSlotContent } from '@luzmo/dashboard-contents-types';
+import { LuzmoElement } from '../../utils/base';
+declare const LuzmoDisplaySettingsGrandTotals_base: typeof LuzmoElement & {
+    new (...args: any[]): import("../../utils/base/sized-mixin").SizedElementInterface;
+    prototype: import("../../utils/base/sized-mixin").SizedElementInterface;
+};
+/**
+ * @element luzmo-display-settings-grand-totals
+ * @fires slot-content-changed - Event that is fired when the slot content is changed
+ */
+export declare class LuzmoDisplaySettingsGrandTotals extends LuzmoDisplaySettingsGrandTotals_base {
+    static get styles(): CSSResultArray;
+    /**
+     * The language used in the settings
+     */
+    language: string;
+    /**
+     * The slotContent that is passed to the settings
+     */
+    slotContent: GenericSlotContent;
+    private _enabled?;
+    protected willUpdate(changedProperties: PropertyValues): void;
+    private toggleGrandTotals;
+    private sendEvent;
+    protected render(): TemplateResult;
+}
+export {};

package/components/display-settings-grand-totals/index.cjs

@@ -0,0 +1,44 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Luzmo web components (“Luzmo Web Components”)
+ * must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account
+ * to use the Luzmo Web Components. This license terminates
+ * automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("@luzmo/lucero/action-button");require("@luzmo/lucero/field-label");require("@luzmo/lucero/icon");const c=require("lit"),a=require("@lit/localize"),u=require("@luzmo/icons"),g=require("lit/decorators.js"),m=require("lit/directives/if-defined.js"),z=require("../focusable-QLh-LlNt.cjs"),p=require("../sized-mixin-DcvJLFeo.cjs"),d=require("../set-locale-BRRalqne.cjs"),h=":host .settings-container{display:flex;flex-direction:column;gap:var(--luzmo-display-settings-vertical-gap, var(--luzmo-spacing-2))}:host .settings-row{display:flex;justify-content:flex-start;align-items:center;gap:var(--luzmo-display-settings-grand-totals-gap, var(--display-settings-grand-totals-gap))}:host{--display-settings-grand-totals-gap: var(--luzmo-spacing-3)}:host([size=s]){--display-settings-grand-totals-gap: var(--luzmo-spacing-3)}:host([size=l]){--display-settings-grand-totals-gap: var(--luzmo-spacing-4)}:host([size=xl]){--display-settings-grand-totals-gap: var(--luzmo-spacing-5)}";var b=Object.defineProperty,v=Object.getOwnPropertyDescriptor,n=(l,t,i,s)=>{for(var e=s>1?void 0:s?v(t,i):t,o=l.length-1,r;o>=0;o--)(r=l[o])&&(e=(s?r(t,i,e):r(e))||e);return s&&e&&b(t,i,e),e};exports.LuzmoDisplaySettingsGrandTotals=class extends p.SizedMixin(z.LuzmoElement,{validSizes:Object.values(p.ElementSizes)}){constructor(){super(...arguments),this.language="en",this.slotContent={}}static get styles(){return[c.unsafeCSS(h)]}willUpdate(t){t.has("slotContent")&&(this._enabled=this.slotContent?.grandTotals?.enabled??!1),t.has("language")&&this.language!==d.getLocale()&&([...d.targetLocales].includes(this.language??"en")||this.language==="en")&&d.setLocale(this.language)}toggleGrandTotals(){this._enabled=!this._enabled,this.sendEvent()}sendEvent(){const t={enabled:!!this._enabled};this.dispatchEvent(new CustomEvent("slot-content-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{slotContent:{...this.slotContent,grandTotals:t}}}))}render(){return c.html`<div class="settings-container">
+      <div class="settings-row">
+        <div class="setting">
+          <luzmo-field-label for="grand-totals"
+            >${a.msg("Grand totals",{desc:"Label for grand totals setting in a table"})}</luzmo-field-label
+          >
+          <luzmo-action-button
+            id="grand-totals"
+            toggles
+            emphasized
+            .size=${this.size}
+            ?selected=${this._enabled}
+            class=${m.ifDefined(this._enabled?"active":"inactive")}
+            @click=${this.toggleGrandTotals}
+          >
+            <luzmo-icon
+              slot="icon"
+              .size=${this.size}
+              .icon=${this._enabled?u.luzmoCheckboxChecked:u.luzmoCheckbox}
+            ></luzmo-icon>
+            ${this._enabled?a.msg("Enabled",{desc:"Option set to enabled"}):a.msg("Disabled",{desc:"Option set to disabled"})}
+          </luzmo-action-button>
+        </div>
+      </div>
+    </div>`}};n([g.property({type:String,reflect:!0})],exports.LuzmoDisplaySettingsGrandTotals.prototype,"language",2);n([g.property()],exports.LuzmoDisplaySettingsGrandTotals.prototype,"slotContent",2);n([g.state()],exports.LuzmoDisplaySettingsGrandTotals.prototype,"_enabled",2);exports.LuzmoDisplaySettingsGrandTotals=n([a.localized()],exports.LuzmoDisplaySettingsGrandTotals);customElements.get("luzmo-display-settings-grand-totals")||customElements.define("luzmo-display-settings-grand-totals",exports.LuzmoDisplaySettingsGrandTotals);

package/components/display-settings-grand-totals/index.d.ts

@@ -0,0 +1,7 @@
+import { LuzmoDisplaySettingsGrandTotals } from './display-settings-grand-totals';
+declare global {
+    interface HTMLElementTagNameMap {
+        'luzmo-display-settings-grand-totals': LuzmoDisplaySettingsGrandTotals;
+    }
+}
+export { LuzmoDisplaySettingsGrandTotals } from './display-settings-grand-totals';