@luzmo/analytics-components-kit 1.0.1-alpha.94 → 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/index.cjs

@@ -17,11 +17,11 @@
  * 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"),n=require("@lit/localize"),u=require("@luzmo/icons"),g=require("lit/decorators.js"),m=require("lit/directives/if-defined.js"),z=require("../focusable-B3E_hQmm.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,l=(i,t,a,e)=>{for(var s=e>1?void 0:e?v(t,a):t,o=i.length-1,r;o>=0;o--)(r=i[o])&&(s=(e?r(t,a,s):r(s))||s);return e&&s&&b(t,a,s),s};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){var a,e;t.has("slotContent")&&(this._enabled=((e=(a=this.slotContent)==null?void 0:a.grandTotals)==null?void 0:e.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">
+"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"
-            >${n.msg("Grand totals",{desc:"Label for grand totals setting in a table"})}</luzmo-field-label
+            >${a.msg("Grand totals",{desc:"Label for grand totals setting in a table"})}</luzmo-field-label
           >
           <luzmo-action-button
             id="grand-totals"
@@ -37,8 +37,8 @@
               .size=${this.size}
               .icon=${this._enabled?u.luzmoCheckboxChecked:u.luzmoCheckbox}
             ></luzmo-icon>
-            ${this._enabled?n.msg("Enabled",{desc:"Option set to enabled"}):n.msg("Disabled",{desc:"Option set to disabled"})}
+            ${this._enabled?a.msg("Enabled",{desc:"Option set to enabled"}):a.msg("Disabled",{desc:"Option set to disabled"})}
           </luzmo-action-button>
         </div>
       </div>
-    </div>`}};l([g.property({type:String,reflect:!0})],exports.LuzmoDisplaySettingsGrandTotals.prototype,"language",2);l([g.property()],exports.LuzmoDisplaySettingsGrandTotals.prototype,"slotContent",2);l([g.state()],exports.LuzmoDisplaySettingsGrandTotals.prototype,"_enabled",2);exports.LuzmoDisplaySettingsGrandTotals=l([n.localized()],exports.LuzmoDisplaySettingsGrandTotals);customElements.get("luzmo-display-settings-grand-totals")||customElements.define("luzmo-display-settings-grand-totals",exports.LuzmoDisplaySettingsGrandTotals);
+    </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.js

@@ -25,22 +25,22 @@ import { msg as u, localized as z } from "@lit/localize";
 import { luzmoCheckboxChecked as g, luzmoCheckbox as p } from "@luzmo/icons";
 import { property as m, state as b } from "lit/decorators.js";
 import { ifDefined as f } from "lit/directives/if-defined.js";
-import { L as h } from "../focusable-DCIFkpiW.js";
+import { L as h } from "../focusable-BS2pbY7w.js";
 import { S as v, E as x } from "../sized-mixin-cJbo3PKR.js";
-import { g as y, t as w, s as C } from "../set-locale-Dp3N_gXN.js";
+import { g as y, t as w, s as C } from "../set-locale-hKTMz37h.js";
 (function() {
   if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
-    const o = document.createElement("style");
-    o.setAttribute("data-luzmo-vars", ""), o.textContent = 'html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-background-color-alt-1: rgb(250, 250, 250);--luzmo-background-color-alt-2: rgb(239, 239, 239);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-color-disabled);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-secondary-outline: rgba(255, 0, 255, 0.2);--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-color-informative: #1a77e9;--luzmo-color-informative-rgb: 26, 119, 233;--luzmo-color-disabled: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(o);
+    const l = document.createElement("style");
+    l.setAttribute("data-luzmo-vars", ""), l.textContent = 'html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-background-color-alt-1: rgb(250, 250, 250);--luzmo-background-color-alt-2: rgb(239, 239, 239);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-color-disabled);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-secondary-outline: rgba(255, 0, 255, 0.2);--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-color-informative: #1a77e9;--luzmo-color-informative-rgb: 26, 119, 233;--luzmo-color-disabled: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(l);
   }
 })();
 const _ = ":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 S = Object.defineProperty, k = Object.getOwnPropertyDescriptor, a = (l, o, t, s) => {
-  for (var e = s > 1 ? void 0 : s ? k(o, t) : o, n = l.length - 1, i; n >= 0; n--)
-    (i = l[n]) && (e = (s ? i(o, t, e) : i(e)) || e);
-  return s && e && S(o, t, e), e;
+var S = Object.defineProperty, k = Object.getOwnPropertyDescriptor, s = (o, l, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? k(l, a) : l, n = o.length - 1, i; n >= 0; n--)
+    (i = o[n]) && (e = (r ? i(l, a, e) : i(e)) || e);
+  return r && e && S(l, a, e), e;
 };
-let r = class extends v(h, {
+let t = class extends v(h, {
   validSizes: Object.values(x)
 }) {
   constructor() {
@@ -49,15 +49,14 @@ let r = class extends v(h, {
   static get styles() {
     return [c(_)];
   }
-  willUpdate(l) {
-    var o, t;
-    l.has("slotContent") && (this._enabled = ((t = (o = this.slotContent) == null ? void 0 : o.grandTotals) == null ? void 0 : t.enabled) ?? !1), l.has("language") && this.language !== y() && ([...w].includes(this.language ?? "en") || this.language === "en") && C(this.language);
+  willUpdate(o) {
+    o.has("slotContent") && (this._enabled = this.slotContent?.grandTotals?.enabled ?? !1), o.has("language") && this.language !== y() && ([...w].includes(this.language ?? "en") || this.language === "en") && C(this.language);
   }
   toggleGrandTotals() {
     this._enabled = !this._enabled, this.sendEvent();
   }
   sendEvent() {
-    const l = {
+    const o = {
       enabled: !!this._enabled
     };
     this.dispatchEvent(
@@ -68,7 +67,7 @@ let r = class extends v(h, {
         detail: {
           slotContent: {
             ...this.slotContent,
-            grandTotals: l
+            grandTotals: o
           }
         }
       })
@@ -104,22 +103,22 @@ let r = class extends v(h, {
     </div>`;
   }
 };
-a([
+s([
   m({ type: String, reflect: !0 })
-], r.prototype, "language", 2);
-a([
+], t.prototype, "language", 2);
+s([
   m()
-], r.prototype, "slotContent", 2);
-a([
+], t.prototype, "slotContent", 2);
+s([
   b()
-], r.prototype, "_enabled", 2);
-r = a([
+], t.prototype, "_enabled", 2);
+t = s([
   z()
-], r);
+], t);
 customElements.get("luzmo-display-settings-grand-totals") || customElements.define(
   "luzmo-display-settings-grand-totals",
-  r
+  t
 );
 export {
-  r as LuzmoDisplaySettingsGrandTotals
+  t as LuzmoDisplaySettingsGrandTotals
 };

package/components/display-settings-numeric/display-settings-numeric.d.ts

@@ -60,8 +60,8 @@ export declare class LuzmoDisplaySettingsNumeric extends LuzmoDisplaySettingsNum
     private _aggregationWeightElement;
     private _durationLevelsElement;
     private _durationFormatElement;
-    private _durationLevelsOverlay;
     private _renderDurationLevelMenu;
+    private _handleSlottableRequest;
     private _sendEvent;
     private _parseSavedNumericFormatSettings;
     private _setNumericDisplayAs;
@@ -74,7 +74,6 @@ export declare class LuzmoDisplaySettingsNumeric extends LuzmoDisplaySettingsNum
     private _setDurationFormat;
     private _fillTimeDurationLevels;
     protected willUpdate(changedProperties: Map<string, any>): void;
-    protected firstUpdated(): void;
     private _renderDurationLevelsSettings;
     private _renderDurationFormatSettings;
     private _renderNumericDisplayAsSettings;