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

package/{lib/index-CM80_HQw.js → components/display-settings-numeric/index.js}

@@ -17,18 +17,28 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { d as v } from "./decompose-numeric-format-BuZcjH2k.js";
-import { S as b, a as F, L as A, r as L, x as n, n as p, e as m } from "./if-defined-BbzmSG-O.js";
-import "./index-Bd4cKS9O.js";
-import "./index-DSbgZduE.js";
-import "./index-CtEJZdT0.js";
-import "./index-D37RwuEH.js";
-import "./index-CBCm4_7S.js";
-import "./index-D_KYpfBM.js";
-import { O as $, T as S } from "./index-DdtjeKYI.js";
-import { r as D } from "./directive-helpers-eY1rHtyn.js";
-import { r as C } from "./index-B9h2L_hV.js";
-const E = ":host .settings-container{display:flex;flex-direction:column;gap:var(--luzmo-spacing-2)}:host .settings-row{display:flex;justify-content:flex-start;align-items:center;gap:var(--luzmo-display-settings-numeric-gap, var(--display-settings-numeric-gap))}.duration-angle-down-icon{margin-inline-start:var(--luzmo-numeric-duration-levels-dropdown-icon-margin-inline-start, var(--numeric-duration-levels-dropdown-icon-margin-inline-start))}:host{--display-settings-numeric-gap: var(--luzmo-spacing-3);--numeric-duration-levels-dropdown-icon-margin-inline-start: var( --luzmo-spacing-2 )}:host([size=s]){--display-settings-numeric-gap: var(--luzmo-spacing-3);--numeric-duration-levels-dropdown-icon-margin-inline-start: var( --luzmo-spacing-1 )}:host([size=l]){--display-settings-numeric-gap: var(--luzmo-spacing-4);--numeric-duration-levels-dropdown-icon-margin-inline-start: var( --luzmo-spacing-3 )}:host([size=xl]){--display-settings-numeric-gap: var(--luzmo-spacing-5);--numeric-duration-levels-dropdown-icon-margin-inline-start: var( --luzmo-spacing-4 )}", N = {
+import "../index-EQldC-LR.js";
+import "../index-BGaxFTL4.js";
+import "../index-B5VaT0lQ.js";
+import "../index-BD3VxQBH.js";
+import "../index-DszPbTTD.js";
+import "../index-CkDDDzuJ.js";
+import "../index-DVaeDCbe.js";
+import { I as x, r as F, x as r, n as p } from "../property-CD3dwBJC.js";
+import { m as A, d as S } from "../sized-mixin-PyCYpyQq-B40Ek2UB.js";
+import { d as v } from "../decompose-numeric-format-BuZcjH2k.js";
+import { O as $, T as L } from "../luzmo-icons-CZEpXpvy.js";
+import { a as D } from "../index-BRk42NQn.js";
+import { r as w } from "../state-B1a8XIDm.js";
+import { e as c } from "../query-Ddbd72Um.js";
+const y = () => {
+  if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
+    const u = document.createElement("style");
+    u.setAttribute("data-luzmo-vars", ""), u.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-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-color-negative: #ca221c;--luzmo-color-negative-hover: #b3241f;--luzmo-color-negative-down: #9f231f;--luzmo-color-negative-focus: #b3241f;--luzmo-color-negative-rgb: 202, 34, 28;--luzmo-color-positive: rgb(20, 150, 101);--luzmo-color-positive-hover: rgb(17, 128, 86);--luzmo-color-positive-down: rgb(16, 105, 71);--luzmo-color-positive-focus: rgb(17, 128, 86);--luzmo-color-positive-rgb: 20, 150, 101;--luzmo-color-selected: rgb(110, 110, 110);--luzmo-color-selected-hover: rgb(70, 70, 70);--luzmo-color-selected-down: rgb(40, 40, 40);--luzmo-color-selected-focus: rgb(70, 70, 70);--luzmo-color-selected-hard: #1e1e1e;--luzmo-color-selected-hard-hover: rgb(0, 0, 0);--luzmo-color-selected-hard-down: rgb(0, 0, 0);--luzmo-color-selected-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(u);
+  }
+};
+y();
+const C = ":host .settings-container{display:flex;flex-direction:column;gap:var(--luzmo-spacing-2)}:host .settings-row{display:flex;justify-content:flex-start;align-items:center;gap:var(--luzmo-display-settings-numeric-gap, var(--display-settings-numeric-gap))}.duration-angle-down-icon{margin-inline-start:var(--luzmo-numeric-duration-levels-dropdown-icon-margin-inline-start, var(--numeric-duration-levels-dropdown-icon-margin-inline-start))}:host{--display-settings-numeric-gap: var(--luzmo-spacing-3);--numeric-duration-levels-dropdown-icon-margin-inline-start: var( --luzmo-spacing-2 )}:host([size=s]){--display-settings-numeric-gap: var(--luzmo-spacing-3);--numeric-duration-levels-dropdown-icon-margin-inline-start: var( --luzmo-spacing-1 )}:host([size=l]){--display-settings-numeric-gap: var(--luzmo-spacing-4);--numeric-duration-levels-dropdown-icon-margin-inline-start: var( --luzmo-spacing-3 )}:host([size=xl]){--display-settings-numeric-gap: var(--luzmo-spacing-5);--numeric-duration-levels-dropdown-icon-margin-inline-start: var( --luzmo-spacing-4 )}", E = {
   sum: "Sum",
   cumulativesum: "Cumulative sum",
   average: "Average",
@@ -44,11 +54,11 @@ const E = ":host .settings-container{display:flex;flex-direction:column;gap:var(
   general: "123",
   percentage: "%",
   scientific: "SI"
-}, y = {
+}, _ = {
   time: "Time",
   short: "Short",
   long: "Long"
-}, z = {
+}, b = {
   Auto: { auto: !0 },
   "1,000.00": {
     auto: !1,
@@ -62,7 +72,7 @@ const E = ":host .settings-container{display:flex;flex-direction:column;gap:var(
   },
   "1000.00": { auto: !1, decimalSeparator: "." },
   "1000,00": { auto: !1, decimalSeparator: "," }
-}, w = {
+}, N = {
   levels: [
     { level: 1, label: "years" },
     { level: 2, label: "quarters" },
@@ -75,13 +85,13 @@ const E = ":host .settings-container{display:flex;flex-direction:column;gap:var(
     { level: 9, label: "milliseconds" }
   ]
 };
-var M = Object.defineProperty, r = (g, t, e, i) => {
-  for (var a = void 0, s = g.length - 1, l; s >= 0; s--)
-    (l = g[s]) && (a = l(t, e, a) || a);
-  return a && M(t, e, a), a;
+var k = Object.defineProperty, a = (u, t, e, i) => {
+  for (var s = void 0, o = u.length - 1, n; o >= 0; o--)
+    (n = u[o]) && (s = n(t, e, s) || s);
+  return s && k(t, e, s), s;
 };
-class o extends b(A, {
-  validSizes: Object.values(F)
+class l extends A(x, {
+  validSizes: Object.values(S)
 }) {
   constructor() {
     super(...arguments), this.slotContent = {}, this.measureColumns = [], this._durationLevels = [], this._renderDurationLevelMenu = !1, this._sendEvent = () => {
@@ -99,18 +109,18 @@ class o extends b(A, {
     };
   }
   static get styles() {
-    return [L(E)];
+    return [F(C)];
   }
   _parseSavedNumericFormatSettings() {
-    var t, e, i, a, s, l, d, c, h, _;
-    if (this._displayMode = ((t = this.slotContent) == null ? void 0 : t.subtype) === "duration" ? ((a = (i = (e = this.slotContent) == null ? void 0 : e.duration) == null ? void 0 : i.levels) == null ? void 0 : a.length) === 1 ? "numeric" : "duration" : "numeric", this._durationFormat = ((l = (s = this.slotContent) == null ? void 0 : s.duration) == null ? void 0 : l.format) ?? "short", this._durationLevels = ((c = (d = this.slotContent) == null ? void 0 : d.duration) == null ? void 0 : c.levels) ?? [1], this._displayMode === "duration")
+    var t, e, i, s, o, n, d, g, h, z;
+    if (this._displayMode = ((t = this.slotContent) == null ? void 0 : t.subtype) === "duration" ? ((s = (i = (e = this.slotContent) == null ? void 0 : e.duration) == null ? void 0 : i.levels) == null ? void 0 : s.length) === 1 ? "numeric" : "duration" : "numeric", this._durationFormat = ((n = (o = this.slotContent) == null ? void 0 : o.duration) == null ? void 0 : n.format) ?? "short", this._durationLevels = ((g = (d = this.slotContent) == null ? void 0 : d.duration) == null ? void 0 : g.levels) ?? [1], this._displayMode === "duration")
       this._precision = 2, this._commaDecimals = !1, this._thousandSeparator = !1;
     else {
       this._format = ((h = this.slotContent) == null ? void 0 : h.format) ?? ".0f";
-      const u = v(this._format ?? ".0f");
-      this._isAuto = ((_ = u.typeFormat) == null ? void 0 : _.includes("a")) ?? !1, ["%", "a%", "y", "ay"].includes(u.typeFormat) ? this._displayAs = "percentage" : ["s", "as", "w", "aw"].includes(u.typeFormat) ? this._displayAs = "scientific" : this._displayAs = "general", this._precision = u.precision ? Number.parseInt(u.precision.replace(".", ""), 10) : this._displayAs === "scientific" ? 1 : 0, this._commaDecimals = ["z", "az", "y", "ay", "w", "aw"].includes(
-        u.typeFormat
-      ), this._thousandSeparator = u.comma === ",", this._isAuto ? this._numericFormatGroup = "Auto" : this._commaDecimals && this._thousandSeparator ? this._numericFormatGroup = "1.000,00" : !this._commaDecimals && this._thousandSeparator ? this._numericFormatGroup = "1,000.00" : this._commaDecimals && !this._thousandSeparator ? this._numericFormatGroup = "1000,00" : !this._commaDecimals && !this._thousandSeparator && (this._numericFormatGroup = "1000.00");
+      const m = v(this._format ?? ".0f");
+      this._isAuto = ((z = m.typeFormat) == null ? void 0 : z.includes("a")) ?? !1, ["%", "a%", "y", "ay"].includes(m.typeFormat) ? this._displayAs = "percentage" : ["s", "as", "w", "aw"].includes(m.typeFormat) ? this._displayAs = "scientific" : this._displayAs = "general", this._precision = m.precision ? Number.parseInt(m.precision.replace(".", ""), 10) : this._displayAs === "scientific" ? 1 : 0, this._commaDecimals = ["z", "az", "y", "ay", "w", "aw"].includes(
+        m.typeFormat
+      ), this._thousandSeparator = m.comma === ",", this._isAuto ? this._numericFormatGroup = "Auto" : this._commaDecimals && this._thousandSeparator ? this._numericFormatGroup = "1.000,00" : !this._commaDecimals && this._thousandSeparator ? this._numericFormatGroup = "1,000.00" : this._commaDecimals && !this._thousandSeparator ? this._numericFormatGroup = "1000,00" : !this._commaDecimals && !this._thousandSeparator && (this._numericFormatGroup = "1000.00");
     }
   }
   _setNumericDisplayAs() {
@@ -118,7 +128,7 @@ class o extends b(A, {
     this._displayAs = ((e = (t = this._displayAsElement) == null ? void 0 : t.selected) == null ? void 0 : e[0]) ?? "general", this._displayAs === "scientific" && (this._precision = Math.max(this._precision ?? 0, 1), this._thousandSeparator = !1), this._setNumericFormat(), this._sendEvent(), this.requestUpdate();
   }
   _setNumericSeparators(t) {
-    const e = z[(t == null ? void 0 : t.detail) ?? "Auto"];
+    const e = b[(t == null ? void 0 : t.detail) ?? "Auto"];
     this._thousandSeparator = [",", "."].includes(
       (e == null ? void 0 : e.thousandSeparator) ?? ""
     ), this._commaDecimals = (e == null ? void 0 : e.decimalSeparator) === ",", this._isAuto = e == null ? void 0 : e.auto, this._setNumericFormat(), this._sendEvent();
@@ -136,10 +146,10 @@ class o extends b(A, {
     const t = this._aggregationFunc, e = this.slotContent.format;
     if (this._aggregationElement.value !== t) {
       if (this._aggregationFunc = this._aggregationElement.value, t === "rate") {
-        const i = v(e), a = ["%", "y", "a%", "ay"].includes(
+        const i = v(e), s = ["%", "y", "a%", "ay"].includes(
           i.typeFormat
         );
-        this.slotContent.subtype === "currency" && a && this._setNumericDisplayAs();
+        this.slotContent.subtype === "currency" && s && this._setNumericDisplayAs();
       }
       this._sendEvent(), (this._aggregationFunc === "rate" || t === "rate") && this.requestUpdate();
     }
@@ -220,22 +230,22 @@ class o extends b(A, {
       }
     } */
   willUpdate(t) {
-    var e, i, a;
-    t.has("slotContent") && (this._parseSavedNumericFormatSettings(), this._aggregationFunc = ((e = this.slotContent) == null ? void 0 : e.aggregationFunc) ?? ((i = this.slotContent) == null ? void 0 : i.type) === "numeric" ? "sum" : "count", this._aggregationWeightColumn = (a = this.slotContent) == null ? void 0 : a.aggregationWeight);
+    var e, i, s;
+    t.has("slotContent") && (this._parseSavedNumericFormatSettings(), this._aggregationFunc = ((e = this.slotContent) == null ? void 0 : e.aggregationFunc) ?? ((i = this.slotContent) == null ? void 0 : i.type) === "numeric" ? "sum" : "count", this._aggregationWeightColumn = (s = this.slotContent) == null ? void 0 : s.aggregationWeight);
   }
-  firstUpdated(t) {
-    var e;
-    (e = this.slotContent) != null && e.duration && this._durationLevelsOverlay.addEventListener(
+  firstUpdated() {
+    var t;
+    (t = this.slotContent) != null && t.duration && this._durationLevelsOverlay.addEventListener(
       "slottable-request",
-      (i) => {
-        this._renderDurationLevelMenu = i.data !== C;
+      (e) => {
+        this._renderDurationLevelMenu = e.data !== D;
       }
     );
   }
   _renderDurationLevelsSettings() {
-    const t = w.levels.map((e) => {
+    const t = N.levels.map((e) => {
       let i = !1;
-      return this._durationFormat === "time" && e.level >= 6 && this._durationLevels.includes(e.level) && e.level !== Math.max(...this._durationLevels) && (i = !0), this._durationLevels.length === 1 && this._durationLevels.includes(e.level) && (i = !0), n`<luzmo-menu-item
+      return this._durationFormat === "time" && e.level >= 6 && this._durationLevels.includes(e.level) && e.level !== Math.max(...this._durationLevels) && (i = !0), this._durationLevels.length === 1 && this._durationLevels.includes(e.level) && (i = !0), r`<luzmo-menu-item
         value=${e.level}
         ?selected=${this._durationLevels.includes(e.level)}
         ?disabled=${i}
@@ -243,7 +253,7 @@ class o extends b(A, {
         ${e.label}
       </luzmo-menu-item>`;
     });
-    return n` <div class="setting">
+    return r` <div class="setting">
       <luzmo-field-label for="duration-levels">
         Duration levels
       </luzmo-field-label>
@@ -251,7 +261,7 @@ class o extends b(A, {
         ${this._durationLevels.length}
         ${this._durationLevels.length === 1 ? "level" : "levels"} active
         <span class="duration-angle-down-icon">
-          ${$(S)}
+          ${$(L)}
         </span>
       </luzmo-action-button>
       <luzmo-overlay
@@ -262,7 +272,7 @@ class o extends b(A, {
         type="page"
       >
         <luzmo-popover style="position: relative">
-          ${this._renderDurationLevelMenu ? n` <luzmo-menu
+          ${this._renderDurationLevelMenu ? r` <luzmo-menu
                 id="duration-levels"
                 size=${this.size}
                 selects="multiple"
@@ -276,10 +286,10 @@ class o extends b(A, {
     </div>`;
   }
   _renderDurationFormatSettings() {
-    const t = Object.keys(y).map((e) => e === "time" && (this._maxDurationLevel ?? 1) < 6 ? "" : n`<luzmo-action-button value=${e}>
-        ${y[e]}
+    const t = Object.keys(_).map((e) => e === "time" && (this._maxDurationLevel ?? 1) < 6 ? "" : r`<luzmo-action-button value=${e}>
+        ${_[e]}
       </luzmo-action-button>`);
-    return n` <div class="setting">
+    return r` <div class="setting">
       <luzmo-field-label for="duration-format">Format</luzmo-field-label>
       <luzmo-action-group
         emphasized
@@ -296,11 +306,11 @@ class o extends b(A, {
   }
   _renderNumericDisplayAsSettings() {
     const t = Object.keys(f).map(
-      (e) => n`<luzmo-action-button value=${e}
+      (e) => r`<luzmo-action-button value=${e}
           >${f[e]}</luzmo-action-button
         >`
     );
-    return n`<div class="setting">
+    return r`<div class="setting">
       <luzmo-field-label for="display-as">Display as</luzmo-field-label>
       <luzmo-action-group
         emphasized
@@ -316,10 +326,10 @@ class o extends b(A, {
     </div>`;
   }
   _renderNumericFormatSettings() {
-    const t = Object.keys(z).map(
-      (e) => n`<luzmo-menu-item value=${e}>${e}</luzmo-menu-item>`
+    const t = Object.keys(b).map(
+      (e) => r`<luzmo-menu-item value=${e}>${e}</luzmo-menu-item>`
     );
-    return n` <div class="setting">
+    return r` <div class="setting">
         <luzmo-field-label for="format">Format</luzmo-field-label>
         <luzmo-picker
           id="format"
@@ -346,20 +356,20 @@ class o extends b(A, {
       </div>`;
   }
   _renderAggregationSettings() {
-    var i, a;
-    const t = Object.entries(N).map(
-      ([s, l]) => n`<luzmo-menu-item value=${s}>${l}</luzmo-menu-item>`
+    var i, s;
+    const t = Object.entries(E).map(
+      ([o, n]) => r`<luzmo-menu-item value=${o}>${n}</luzmo-menu-item>`
     ), e = [
-      n`<luzmo-menu-item value="none">No weight</luzmo-menu-item>`,
-      ...this.measureColumns.map((s) => {
-        var d, c, h;
-        const l = ((d = s == null ? void 0 : s.label) == null ? void 0 : d[this.language ?? "en"]) ?? ((h = s == null ? void 0 : s.label) == null ? void 0 : h[(c = Object.keys(s == null ? void 0 : s.label)) == null ? void 0 : c[0]]) ?? "Untitled";
-        return n`<luzmo-menu-item value=${s.id}>
-          ${l}
+      r`<luzmo-menu-item value="none">No weight</luzmo-menu-item>`,
+      ...this.measureColumns.map((o) => {
+        var d, g, h;
+        const n = ((d = o == null ? void 0 : o.label) == null ? void 0 : d[this.language ?? "en"]) ?? ((h = o == null ? void 0 : o.label) == null ? void 0 : h[(g = Object.keys(o == null ? void 0 : o.label)) == null ? void 0 : g[0]]) ?? "Untitled";
+        return r`<luzmo-menu-item value=${o.id}>
+          ${n}
         </luzmo-menu-item>`;
       })
     ];
-    return n`<div class="settings-row">
+    return r`<div class="settings-row">
       <div class="setting">
         <luzmo-field-label for="aggregation">Aggregation</luzmo-field-label>
         <luzmo-picker
@@ -372,7 +382,7 @@ class o extends b(A, {
           ${t}
         </luzmo-picker>
       </div>
-      ${this._aggregationFunc === "rate" ? n`<div class="setting">
+      ${this._aggregationFunc === "rate" ? r`<div class="setting">
             <luzmo-field-label for="weighting-column">
               Denominator
             </luzmo-field-label>
@@ -380,7 +390,7 @@ class o extends b(A, {
               id="weighting-column"
               size=${this.size}
               variant="highlight"
-              value=${((a = this._aggregationWeightColumn) == null ? void 0 : a.column) ?? "none"}
+              value=${((s = this._aggregationWeightColumn) == null ? void 0 : s.column) ?? "none"}
               @change=${this._setAggregationWeight}
             >
               ${e}
@@ -390,7 +400,7 @@ class o extends b(A, {
   }
   render() {
     var t;
-    return n`<div class="settings-container">
+    return r`<div class="settings-container">
       <div class="settings-row">
       ${this._displayMode === "duration" ? this._renderDurationLevelsSettings() : this._renderNumericDisplayAsSettings()}
       ${((t = this._durationLevels) == null ? void 0 : t.length) > 1 ? this._renderDurationFormatSettings() : this._renderNumericFormatSettings()}
@@ -400,43 +410,43 @@ class o extends b(A, {
     </div>`;
   }
 }
-r([
+a([
   p({ type: String, reflect: !0 })
-], o.prototype, "language");
-r([
+], l.prototype, "language");
+a([
   p({ type: Object, reflect: !0 })
-], o.prototype, "slotContent");
-r([
+], l.prototype, "slotContent");
+a([
   p({ type: Array, reflect: !1 })
-], o.prototype, "measureColumns");
-r([
-  m("#display-as")
-], o.prototype, "_displayAsElement");
-r([
-  m("#precision")
-], o.prototype, "_precisionElement");
-r([
-  m("#aggregation")
-], o.prototype, "_aggregationElement");
-r([
-  m("#weighting-column")
-], o.prototype, "_aggregationWeightElement");
-r([
-  m("#duration-levels")
-], o.prototype, "_durationLevelsElement");
-r([
-  m("#duration-format")
-], o.prototype, "_durationFormatElement");
-r([
-  m("#duration-levels-overlay")
-], o.prototype, "_durationLevelsOverlay");
-r([
-  D()
-], o.prototype, "_renderDurationLevelMenu");
+], l.prototype, "measureColumns");
+a([
+  c("#display-as")
+], l.prototype, "_displayAsElement");
+a([
+  c("#precision")
+], l.prototype, "_precisionElement");
+a([
+  c("#aggregation")
+], l.prototype, "_aggregationElement");
+a([
+  c("#weighting-column")
+], l.prototype, "_aggregationWeightElement");
+a([
+  c("#duration-levels")
+], l.prototype, "_durationLevelsElement");
+a([
+  c("#duration-format")
+], l.prototype, "_durationFormatElement");
+a([
+  c("#duration-levels-overlay")
+], l.prototype, "_durationLevelsOverlay");
+a([
+  w()
+], l.prototype, "_renderDurationLevelMenu");
 customElements.get("luzmo-display-settings-numeric") || customElements.define(
   "luzmo-display-settings-numeric",
-  o
+  l
 );
 export {
-  o as LuzmoDisplaySettingsNumeric
+  l as LuzmoDisplaySettingsNumeric
 };

package/components/display-settings-period-over-period/display-settings-period-over-period.d.ts

@@ -0,0 +1,44 @@
+import '@luzmo/lucero/checkbox';
+import '@luzmo/lucero/field-label';
+import '@luzmo/lucero/menu';
+import '@luzmo/lucero/number-field';
+import '@luzmo/lucero/picker';
+import { LuzmoElement } from '@luzmo/lucero/utils';
+import { CSSResultArray, PropertyValues, TemplateResult } from 'lit';
+declare const LuzmoDisplaySettingsPeriodOverPeriod_base: typeof LuzmoElement & {
+    new (...args: any[]): import("@luzmo/lucero").SizedElementInterface;
+    prototype: import("@luzmo/lucero").SizedElementInterface;
+};
+/**
+ * @element luzmo-display-settings-period-over-period
+ * @fires slot-content-changed - Event that is fired when the slot content is changed
+ */
+export declare class LuzmoDisplaySettingsPeriodOverPeriod extends LuzmoDisplaySettingsPeriodOverPeriod_base {
+    static get styles(): CSSResultArray;
+    /**
+     * The language used in the settings
+     */
+    language?: string;
+    /**
+     * The slotContent that is passed to the settings
+     */
+    slotContent: any;
+    private _periodComparisonElement;
+    private _numberPeriodsElement;
+    private _periodLevelElement;
+    private _incompletePeriodsElement;
+    private _periodComparison?;
+    private _numberPeriods?;
+    private _periodLevel?;
+    private _incompletePeriods?;
+    private _minLevel?;
+    protected willUpdate(changedProperties: PropertyValues): void;
+    private setPeriodComparison;
+    private setNumberOfPeriods;
+    private setPeriodLevel;
+    private setIncompletePeriods;
+    private sendEvent;
+    private renderPeriodSettings;
+    protected render(): TemplateResult;
+}
+export {};

package/components/display-settings-period-over-period/helpers/constants.d.ts

@@ -0,0 +1,33 @@
+export declare const PERIOD_OVER_PERIOD_VALUES: Record<PeriodOverPeriodType, string>;
+export declare const LEVEL_LIST: string[];
+/**
+ * Period over period comparison type:
+ * 'none' - turned off,
+ * 'past' - absolute value comparison to the past,
+ * 'absoluteChange' - absolute change comparison to the past,
+ * 'percentageChange' - percentage change comparison to the past
+ */
+export type PeriodOverPeriodType = 'none' | 'past' | 'absoluteChange' | 'percentageChange';
+export interface PeriodOverPeriod {
+    /**
+     * Period over period comparison type
+     */
+    type: PeriodOverPeriodType;
+    /**
+     * Period of time level
+     * 0 - period, 1 - year, 2 - quarter, 3 - month, 4 - week, 5 - day... 9 - millisecond
+     */
+    level: number;
+    /**
+     * Number of periods
+     */
+    quantity: number;
+    /**
+     * Turn ON/OFF period to date comparison
+     */
+    periodToDate: boolean;
+    /**
+     * Category date level to disallow smaller Period-Over-Period levels. For internal use only
+     */
+    minLevel: number;
+}

package/components/display-settings-period-over-period/index.cjs

@@ -0,0 +1,103 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2024 Luzmo
+ * All rights reserved.
+ * Luzmo web components (“Luzmo Web Components”)
+ * must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account
+ * to use the Luzmo Web Components. This license terminates
+ * automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const v=require("../luzmo-icons-BrtBl3E5.cjs"),r=require("../property-Su1Q6aME.cjs"),x=require("../sized-mixin-PyCYpyQq-sKzDjc75.cjs"),w=require("../checkbox-mixin-DXUIwtea-DNISZS47.cjs");require("../index-C_3Ak4MQ.cjs");require("../index-Bofs4Q2E.cjs");require("../index-D9vzXhtJ.cjs");require("../index-Bjs6Yqet.cjs");const P=require("../decompose-numeric-format-B3rVVHpO.cjs"),_=require("../state-ByiKNRhp.cjs"),p=require("../query-D5qWDopr.cjs");/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * 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=()=>{if(typeof document<"u"&&!document.querySelector("style[data-luzmo-vars]")){const c=document.createElement("style");c.setAttribute("data-luzmo-vars",""),c.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-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-color-negative: #ca221c;--luzmo-color-negative-hover: #b3241f;--luzmo-color-negative-down: #9f231f;--luzmo-color-negative-focus: #b3241f;--luzmo-color-negative-rgb: 202, 34, 28;--luzmo-color-positive: rgb(20, 150, 101);--luzmo-color-positive-hover: rgb(17, 128, 86);--luzmo-color-positive-down: rgb(16, 105, 71);--luzmo-color-positive-focus: rgb(17, 128, 86);--luzmo-color-positive-rgb: 20, 150, 101;--luzmo-color-selected: rgb(110, 110, 110);--luzmo-color-selected-hover: rgb(70, 70, 70);--luzmo-color-selected-down: rgb(40, 40, 40);--luzmo-color-selected-focus: rgb(70, 70, 70);--luzmo-color-selected-hard: #1e1e1e;--luzmo-color-selected-hard-hover: rgb(0, 0, 0);--luzmo-color-selected-hard-down: rgb(0, 0, 0);--luzmo-color-selected-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(c)}};E();const $=':host{color:var(--highcontrast-checkbox-content-color-default, var(--luzmo-checkbox-content-color-default, var(--luzmo-font-color-hard)));min-block-size:var(--luzmo-checkbox-height, var(--checkbox-height, 32px));max-inline-size:100%;vertical-align:top;align-items:flex-start;display:inline-flex;position:relative;font-family:var(--luzmo-checkbox-font-family, var(--luzmo-font-family))}:host(:is(:active,[active])) #box:before{border-color:var(--highcontrast-checkbox-highlight-color-down, var(--luzmo-checkbox-control-color-down, var(--luzmo-font-color-hard)))}:host(:is(:active,[active])) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-down, var(--luzmo-checkbox-control-selected-color-down, var(--luzmo-font-color-hard)))}:host(:is(:active,[active])) #label{color:var(--highcontrast-checkbox-content-color-down, var(--luzmo-checkbox-content-color-down, var(--luzmo-font-color-hard)))}:host([invalid][invalid]) #box:before,:host([invalid][invalid]) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-invalid-color-default, var(--luzmo-color-negative)))}:host([invalid][invalid]) #input:focus-visible+#box:before,:host([invalid][invalid][indeterminate]) #input:focus-visible+#box:before{border-color:var(--highcontrast-checkbox-color-hover, var(--luzmo-checkbox-invalid-color-hover, var(--luzmo-color-negative)))}:host([readonly]){border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)))}:host([readonly]:is(:active,[active])) #box:before{border-color:var(--highcontrast-checkbox-selected-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)))}:host([readonly]) #input:checked:disabled+#box:before,:host([readonly]) #input:disabled+#box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)));background-color:var(--highcontrast-checkbox-background-color-default, var(--luzmo-checkbox-checkmark-color, var(--luzmo-background-color)))}:host([readonly]) #input:checked:disabled~#label,:host([readonly]) #input:disabled~#label{forced-color-adjust:none;color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-content-color-default, var(--luzmo-font-color-hard)))}:host([indeterminate]) #box:before,:host([indeterminate]) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)));border-width:var(--luzmo-checkbox-selected-border-width, calc(var(--checkbox-control-size, 14px) / 2))}:host([indeterminate]) #box #checkmark,:host([indeterminate]) #input:checked+#box #checkmark{display:none}:host([indeterminate]) #box #partialCheckmark,:host([indeterminate]) #input:checked+#box #partialCheckmark{opacity:1;display:flex;transform:scale(1)}:host([indeterminate]) #input:focus-visible+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-focus, var(--luzmo-checkbox-control-selected-color-focus, var(--luzmo-font-color-hard)))}:host([invalid][invalid][indeterminate]) #box:before,:host([invalid][invalid][indeterminate]) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-invalid-color-default, var(--luzmo-color-negative)));border-width:var(--luzmo-checkbox-selected-border-width, calc(var(--checkbox-control-size, 14px) / 2))}:host([emphasized]) #input:checked+#box:before,:host([emphasized][indeterminate]) #box:before,:host([emphasized][indeterminate]) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default, var(--luzmo-checkbox-emphasized-color-default, var(--luzmo-primary)))}:host([emphasized]) #input:focus-visible:checked+#box:before,:host([emphasized][indeterminate]) #input:focus-visible+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-focus, var(--luzmo-checkbox-emphasized-color-focus, var(--luzmo-primary)))}:host([emphasized][invalid][invalid]) #input:focus-visible:checked+#box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-invalid-color-focus, var(--luzmo-color-negative)))}@media (hover: hover){:host(:hover) #box:before{border-color:var(--highcontrast-checkbox-highlight-color-hover, var(--luzmo-checkbox-control-color-hover, var(--luzmo-font-color)))}:host(:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-hover, var(--luzmo-checkbox-control-selected-color-hover, var(--luzmo-font-color-hard)))}:host(:hover) #label{color:var(--highcontrast-checkbox-content-color-hover, var(--luzmo-checkbox-content-color-hover, var(--luzmo-font-color-hard)))}:host([invalid][invalid]:hover) #box:before,:host([invalid][invalid]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-hover, var(--luzmo-checkbox-invalid-color-hover, var(--luzmo-color-negative)))}:host([readonly]:hover) #box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)))}:host([indeterminate]:hover) #box:before,:host([indeterminate]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-hover, var(--luzmo-checkbox-control-selected-color-hover, var(--luzmo-font-color-hard)))}:host([invalid][invalid][indeterminate]:hover) #box:before,:host([invalid][invalid][indeterminate]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-invalid-color-hover, var(--luzmo-color-negative)))}:host([invalid][invalid][indeterminate]:hover) #label{color:var(--highcontrast-checkbox-content-color-hover, var(--luzmo-checkbox-content-color-hover, var(--luzmo-font-color-hard)))}:host([emphasized][indeterminate]:hover) #box:before,:host([emphasized][indeterminate]:hover) #input:checked+#box:before,:host([emphasized]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-hover, var(--luzmo-checkbox-emphasized-color-hover, var(--luzmo-primary)))}:host([emphasized][invalid][invalid][indeterminate]:hover) #box:before,:host([emphasized][invalid][invalid][indeterminate]:hover) #input:checked+#box:before,:host([emphasized][invalid][invalid]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-hover, var(--luzmo-checkbox-invalid-color-hover, var(--luzmo-color-negative)))}:host([emphasized][indeterminate]:hover) #box:before,:host([emphasized][indeterminate]:hover) #input:checked+#box:before,:host([emphasized]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-hover, var(--luzmo-checkbox-emphasized-color-hover, var(--luzmo-primary)))}}:host([emphasized][indeterminate]:is(:active,[active])) #box:before,:host([emphasized][indeterminate]:is(:active,[active])) #input:checked+#box:before,:host([emphasized]:is(:active,[active])) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default, var(--luzmo-checkbox-emphasized-color-down, var(--luzmo-primary)))}:host([emphasized][invalid][invalid]:is(:active,[active])) #box:before,:host([emphasized][invalid][invalid]:is(:active,[active])) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default, var(--luzmo-checkbox-control-invalid-color-down, var(--luzmo-color-negative)))}:host([emphasized]:focus-visible) #box:before,:host([emphasized]:focus-visible) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-focus, var(--luzmo-checkbox-control-color-focus, var(--luzmo-font-color)))}#label{text-align:start;font-size:var(--luzmo-checkbox-font-size, var(--checkbox-font-size, 14px));transition:color var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-in-out;line-height:var(--luzmo-checkbox-line-height, 1.3);margin-block-start:var(--luzmo-checkbox-top-to-text, var(--checkbox-top-to-text, 6px));margin-inline-start:var(--luzmo-checkbox-text-to-control, var(--checkbox-text-to-control, 10px))}#label:lang(ja),#label:lang(ko),#label:lang(zh){line-height:var(--luzmo-checkbox-line-height-cjk, 1.5)}#input{color:var(--luzmo-checkbox-control-color-default, var(--luzmo-font-color));box-sizing:border-box;inline-size:100%;block-size:100%;opacity:.0001;z-index:1;cursor:pointer;margin:0;padding:0;font-family:inherit;font-size:100%;line-height:1.15;position:absolute;overflow:visible}#input:disabled{cursor:default}#input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)));background-color:var(--luzmo-checkbox-checkmark-color, var(--luzmo-background-color));border-width:var(--luzmo-checkbox-selected-border-width, calc(var(--checkbox-control-size, 14px) / 2))}#input:checked+#box #checkmark{opacity:1;transform:scale(1)}#input:focus-visible+#box:before{border-color:var(--highcontrast-checkbox-color-focus, var(--luzmo-checkbox-control-color-focus, var(--luzmo-font-color)))}#input:focus-visible+#box:after{forced-color-adjust:none;box-shadow:0 0 0 var(--luzmo-checkbox-focus-indicator-width, var(--luzmo-indicator-width)) var(--highcontrast-checkbox-focus-indicator-color, var(--luzmo-checkbox-focus-indicator-color, var(--luzmo-primary)));margin:calc(var(--luzmo-checkbox-focus-indicator-gap, 2px) * -1)}#input:focus-visible+#label{color:var(--highcontrast-checkbox-content-color-focus, var(--luzmo-checkbox-content-color-focus, var(--luzmo-font-color-hard)))}#input:focus-visible:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-focus, var(--luzmo-checkbox-control-selected-color-focus, var(--luzmo-font-color-hard)))}#box{--luzmo-checkbox-spacing: calc( var(--luzmo-checkbox-height, var(--checkbox-height, 32px)) - var( --luzmo-checkbox-control-size, var(--checkbox-control-size, 14px) ) );margin:calc(var(--luzmo-checkbox-spacing) / 2) 0;flex-grow:0;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}#box,#box:before{box-sizing:border-box;inline-size:var(--luzmo-checkbox-control-size, var(--checkbox-control-size, 14px));block-size:var(--luzmo-checkbox-control-size, var(--checkbox-control-size, 14px))}#box:before{forced-color-adjust:none;border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-control-color-default, var(--luzmo-font-color)));z-index:0;content:"";border-radius:var(--luzmo-checkbox-control-corner-radius, 2px);border-width:var(--luzmo-checkbox-border-width, var(--luzmo-border-width));transition:border var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-in-out,box-shadow var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-in-out;border-style:solid;display:block;position:absolute}#box:after{border-radius:calc(var(--luzmo-checkbox-control-corner-radius, 2px) + var(--luzmo-checkbox-focus-indicator-gap, 2px));content:"";margin:var(--luzmo-checkbox-focus-indicator-gap, 2px);transition:box-shadow var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-out,margin var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-out;display:block;position:absolute;inset-block:0;inset-inline:0;transform:translate(0)}#checkmark,#partialCheckmark{pointer-events:none;color:var(--highcontrast-checkbox-background-color-default, var(--luzmo-checkbox-checkmark-color, var(--luzmo-background-color)));opacity:0;transition:opacity var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-in-out,transform var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-in-out;transform:scale(0);width:var(--textbox-control-size, 14px);display:flex;align-items:center;justify-content:center;font-size:var(--checkbox-icon-size)}#partialCheckmark{display:none}#input:checked:disabled+#box:before,#input:disabled+#box:before{border-color:var(--highcontrast-checkbox-disabled-color-default, var(--luzmo-checkbox-control-color-disabled, var(--luzmo-color-disabled)));background-color:var(--highcontrast-checkbox-background-color-default, var(--luzmo-checkbox-checkmark-color, var(--luzmo-background-color)))}#input:checked:disabled~#label,#input:disabled~#label{forced-color-adjust:none;color:var(--highcontrast-checkbox-disabled-color-default, var(--luzmo-checkbox-content-color-disabled, var(--luzmo-color-disabled)))}@media (forced-colors: active){#input:focus-visible+#box{forced-color-adjust:none;outline-color:var(--highcontrast-checkbox-focus-indicator-color, var(--luzmo-checkbox-focus-indicator-color, var(--luzmo-primary)));outline-offset:var(--highcontrast-checkbox-focus-indicator-gap, var(--luzmo-checkbox-focus-indicator-gap, 2px));outline-style:auto;outline-width:var(--luzmo-focus-indicator-width, var(--luzmo-indicator-width))}#input:focus-visible+#box:after{box-shadow:0 0 0 0 var(--highcontrast-checkbox-focus-indicator-color, var(--luzmo-checkbox-focus-indicator-color, var(--luzmo-primary)))}:host{--highcontrast-checkbox-content-color-default: CanvasText;--highcontrast-checkbox-content-color-hover: CanvasText;--highcontrast-checkbox-content-color-down: CanvasText;--highcontrast-checkbox-content-color-focus: CanvasText;--highcontrast-checkbox-background-color-default: Canvas;--highcontrast-checkbox-color-default: ButtonText;--highcontrast-checkbox-color-hover: ButtonText;--highcontrast-checkbox-color-focus: Highlight;--highcontrast-checkbox-highlight-color-default: Highlight;--highcontrast-checkbox-highlight-color-hover: Highlight;--highcontrast-checkbox-highlight-color-down: Highlight;--highcontrast-checkbox-highlight-color-focus: Highlight;--highcontrast-checkbox-disabled-color-default: GrayText;--highcontrast-checkbox-focus-indicator-color: CanvasText}}:host([size=s]){--checkbox-font-size: var(--luzmo-checkbox-size-s-font-size, 12px);--checkbox-height: var(--luzmo-checkbox-size-s-height, 24px);--checkbox-control-size: var(--luzmo-checkbox-size-s-control-size, 12px);--checkbox-top-to-text: var(--luzmo-checkbox-size-s-top-to-text, 4px);--checkbox-text-to-control: var(--luzmo-checkbox-size-s-text-to-control, 9px);--checkbox-icon-size: var(--luzmo-checkbox-size-s-icon-size, 9px)}:host{--checkbox-font-size: var(--luzmo-checkbox-size-m-font-size, 14px);--checkbox-height: var(--luzmo-checkbox-size-m-height, 32px);--checkbox-control-size: var(--luzmo-checkbox-size-m-control-size, 14px);--checkbox-top-to-text: var(--luzmo-checkbox-size-m-top-to-text, 6px);--checkbox-text-to-control: var( --luzmo-checkbox-size-m-text-to-control, 10px );--checkbox-icon-size: var(--luzmo-checkbox-size-m-icon-size, 10px)}:host([size=l]){--checkbox-font-size: var(--luzmo-checkbox-size-l-font-size, 16px);--checkbox-height: var(--luzmo-checkbox-size-l-height, 40px);--checkbox-control-size: var(--luzmo-checkbox-size-l-control-size, 16px);--checkbox-top-to-text: var(--luzmo-checkbox-size-l-top-to-text, 9px);--checkbox-text-to-control: var( --luzmo-checkbox-size-l-text-to-control, 11px );--checkbox-icon-size: var(--luzmo-checkbox-size-l-icon-size, 11px)}:host([size=xl]){--checkbox-font-size: var(--luzmo-checkbox-size-xl-font-size, 18px);--checkbox-height: var(--luzmo-checkbox-size-xl-height, 48px);--checkbox-control-size: var(--luzmo-checkbox-size-xl-control-size, 18px);--checkbox-top-to-text: var(--luzmo-checkbox-size-xl-top-to-text, 12px);--checkbox-text-to-control: var( --luzmo-checkbox-size-xl-text-to-control, 13px );--checkbox-icon-size: var(--luzmo-checkbox-size-xl-icon-size, 12px)}:host{display:inline-flex;vertical-align:top}:host(:focus){outline:none}:host([disabled]){pointer-events:none}:host(:empty) label{display:none}';var L=Object.defineProperty,h=(c,o,e,n)=>{for(var t=void 0,i=c.length-1,l;i>=0;i--)(l=c[i])&&(t=l(o,e,t)||t);return t&&L(o,e,t),t};const O=()=>r.x`<div id="checkmark">${v.O2(v.F)}</div>`,I=()=>r.x`<div id="partialCheckmark">${v.O2(v.$)}</div>`,C=class extends x.m(w.y(r.I),{noDefaultSize:!0}){constructor(){super(...arguments),this.disabled=!1,this.indeterminate=!1,this.autofocus=!1,this.invalid=!1,this.emphasized=!1,this.tabIndex=0}connectedCallback(){super.connectedCallback(),this.hasAttribute("autofocus")&&this.updateComplete.then(()=>{this.focus()})}static get styles(){return[r.r($)]}click(){var o;this.disabled||(o=this.inputElement)==null||o.click()}handleChange(){this.indeterminate=!1,super.handleChange()}render(){return r.x`
+      ${super.render()}
+      <span id="box">
+        ${this.checked?O():r.x``}
+        ${this.indeterminate?I():r.x``}
+      </span>
+      <label id="label" for="input"><slot></slot></label>
+    `}updated(o){super.updated(o),o.has("disabled")&&(o.get("disabled")!==void 0||this.disabled)&&(this.disabled?(this.inputElement.tabIndex=this.tabIndex,this.tabIndex=-1):(this.tabIndex=this.inputElement.tabIndex,this.inputElement.removeAttribute("tabindex")),this.inputElement.disabled=this.disabled),o.has("indeterminate")&&(this.inputElement.indeterminate=this.indeterminate),o.has("invalid")&&(this.invalid?this.inputElement.setAttribute("aria-invalid","true"):this.inputElement.removeAttribute("aria-invalid"))}};C.shadowRootOptions={...r.I.shadowRootOptions,delegatesFocus:!0};let s=C;h([r.H({type:Boolean,reflect:!0})],s.prototype,"disabled");h([r.H({type:Boolean,reflect:!0})],s.prototype,"indeterminate");h([r.H({type:Boolean,reflect:!0})],s.prototype,"autofocus");h([r.H({type:Boolean,reflect:!0})],s.prototype,"invalid");h([r.H({type:Boolean,reflect:!0})],s.prototype,"emphasized");h([r.H({reflect:!0,type:Number,attribute:"tabindex"})],s.prototype,"tabIndex");customElements.get("luzmo-checkbox")||customElements.define("luzmo-checkbox",s);const y={none:"None",past:"Past value",absoluteChange:"Absolute change",percentageChange:"% change"},q=["periods","years","quarters","months","weeks","days","hours","minutes","seconds"],S=":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(--luzmo-font-size));color:var(--luzmo-display-settings-period-over-period-color, var(--luzmo-font-color))}:host .settings-container{display:flex;flex-direction:column;gap:var(--luzmo-spacing-2)}:host .settings-row{display:flex;justify-content:flex-start;align-items:center;gap:var(--luzmo-display-settings-period-over-period-gap, var(--display-settings-period-over-period-gap))}:host{--display-settings-period-over-period-gap: var(--luzmo-spacing-3)}:host([size=s]){--display-settings-period-over-period-gap: var(--luzmo-spacing-3)}:host([size=l]){--display-settings-period-over-period-gap: var(--luzmo-spacing-4)}:host([size=xl]){--display-settings-period-over-period-gap: var(--luzmo-spacing-5)}";var j=Object.defineProperty,d=(c,o,e,n)=>{for(var t=void 0,i=c.length-1,l;i>=0;i--)(l=c[i])&&(t=l(o,e,t)||t);return t&&j(o,e,t),t};class a extends x.m(r.I,{validSizes:Object.values(x.d)}){constructor(){super(...arguments),this.slotContent={}}static get styles(){return[r.r(S)]}willUpdate(o){var e,n,t,i,l,u,m,b,z,f,g,k;o.has("slotContent")&&(this._periodComparison=(n=(e=this.slotContent)==null?void 0:e.PeriodOverPeriod)==null?void 0:n.type,this._numberPeriods=(i=(t=this.slotContent)==null?void 0:t.PeriodOverPeriod)==null?void 0:i.quantity,this._periodLevel=(u=(l=this.slotContent)==null?void 0:l.PeriodOverPeriod)==null?void 0:u.level,this._incompletePeriods=(b=(m=this.slotContent)==null?void 0:m.PeriodOverPeriod)==null?void 0:b.periodToDate,this._minLevel=((f=(z=this.slotContent)==null?void 0:z.PeriodOverPeriod)==null?void 0:f.minLevel)??((g=this.slotContent)==null?void 0:g.lowestLevel)??(((k=this.slotContent)==null?void 0:k.subtype)==="date"?5:9)),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}setPeriodComparison(){var b;const o={...this.slotContent};this._periodComparison=this._periodComparisonElement.value;const e=P.decomposeNumericFormat((b=this.slotContent)==null?void 0:b.format),n=["%","y","a%","ay"].includes(e.typeFormat),t=e.typeFormat.includes("a"),i=t?"a":"",l=e.comma===","||t?",":"",u=e.precision?Number.parseInt(e.precision.replace(".",""),10):0,m=["z","az","y","ay","w","aw"].includes(e.typeFormat);this._periodComparison==="percentageChange"&&!n?o.format=`${l}.${u}${i}${m?"y":"%"}`:this._periodComparison!=="percentageChange"&&o.subtype==="currency"&&n&&(o.format=`${l}.${u}${i}${m?"z":"f"}`),this.sendEvent(o)}setNumberOfPeriods(){this._numberPeriods=Number.parseInt(this._numberPeriodsElement.value,10);const o={...this.slotContent};this.sendEvent(o)}setPeriodLevel(){this._periodLevel=this._periodLevelElement.value;const o={...this.slotContent};this.sendEvent(o)}setIncompletePeriods(){this._incompletePeriods=this._incompletePeriodsElement.checked;const o={...this.slotContent};this.sendEvent(o)}sendEvent(o){const e={...o};e.PeriodOverPeriod={type:this._periodComparison,level:this._periodLevel,quantity:this._numberPeriods,periodToDate:this._incompletePeriods,minLevel:this._minLevel},this._periodComparison==="none"&&delete e.PeriodOverPeriod,this.dispatchEvent(new CustomEvent("slot-content-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{slotContent:e}}))}renderPeriodSettings(){const o=q.slice(0,(this._minLevel??0)+1).map(e=>r.x`<luzmo-menu-item value=${e}>
+          ${e}
+        </luzmo-menu-item>`);return r.x` <div class="settings-row">
+        <div class="setting">
+          ${["percentageChange","absoluteChange"].includes(this._periodComparison??"")?r.x`<luzmo-field-label for="number-periods" side-aligned="start">
+                From
+              </luzmo-field-label>`:""}
+          <luzmo-number-field
+            id="number-periods"
+            min="1"
+            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??"period(s)"}
+            @change=${this.setPeriodLevel}
+          >
+            ${o}
+          </luzmo-picker>
+        </div>
+        <div>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}
+          >
+            Use period-to-date for incomplete periods
+          </luzmo-checkbox>
+        </div>
+      </div>`}render(){const o=Object.keys(y).map(e=>r.x`<luzmo-menu-item value=${e}>
+          ${y[e]}
+        </luzmo-menu-item>`);return r.x`<div class="settings-container">
+      <div class="settings-row">
+        <div class="setting">
+          <luzmo-field-label for="period-comparison">
+            Period comparison
+          </luzmo-field-label>
+          <luzmo-picker
+            id="period-comparison"
+            size=${this.size}
+            variant="highlight"
+            value=${this._periodComparison??"none"}
+            @change=${this.setPeriodComparison}
+          >
+            ${o}
+          </luzmo-picker>
+        </div>
+      </div>
+      ${this._periodComparison==="none"?"":this.renderPeriodSettings()}
+    </div>`}}d([r.n({type:String,reflect:!0})],a.prototype,"language");d([p.e("#period-comparison")],a.prototype,"_periodComparisonElement");d([p.e("#number-periods")],a.prototype,"_numberPeriodsElement");d([p.e("#period-level")],a.prototype,"_periodLevelElement");d([p.e("#incomplete-periods")],a.prototype,"_incompletePeriodsElement");d([_.r()],a.prototype,"_periodComparison");customElements.get("luzmo-display-settings-period-over-period")||customElements.define("luzmo-display-settings-period-over-period",a);exports.LuzmoDisplaySettingsPeriodOverPeriod=a;

package/components/display-settings-period-over-period/index.d.ts

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