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

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-dJXOanPE.js";
+import "../index-BuW8doNV.js";
+import "../index-fbS4OrPM.js";
+import "../index-FSUV_4nO.js";
+import "../index-aLxc3xA_.js";
+import "../index-Pmv-d4iw.js";
+import "../index-Dkom_Qy5.js";
+import { k as x, a as F, x as r, n as p } from "../property-CXJD1jOW.js";
+import { m as A, d as S } from "../sized-mixin-BxMraZLS-Dc6r-Wg4.js";
+import { d as v } from "../decompose-numeric-format-BuZcjH2k.js";
+import { luzmoIcon as $, luzmoAngleDown as L } from "@luzmo/icons";
+import { a as D } from "../index-DUlH3hbL.js";
+import { r as w } from "../state-DwFtyqCc.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, o) => {
+  for (var s = void 0, i = u.length - 1, n; i >= 0; i--)
+    (n = u[i]) && (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, o, s, i, n, d, g, h, z;
+    if (this._displayMode = ((t = this.slotContent) == null ? void 0 : t.subtype) === "duration" ? ((s = (o = (e = this.slotContent) == null ? void 0 : e.duration) == null ? void 0 : o.levels) == null ? void 0 : s.length) === 1 ? "numeric" : "duration" : "numeric", this._durationFormat = ((n = (i = this.slotContent) == null ? void 0 : i.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();
@@ -127,19 +137,19 @@ class o extends b(A, {
     this._precision = this._precisionElement.value, this._setNumericFormat(), this._sendEvent();
   }
   _setNumericFormat() {
-    var i;
+    var o;
     let t = "f";
-    const e = this.slotContent.subtype === "duration" ? this._durationLevels && ((i = this._durationLevels) == null ? void 0 : i.length) === 1 ? "numeric" : "duration" : "numeric";
+    const e = this.slotContent.subtype === "duration" ? this._durationLevels && ((o = this._durationLevels) == null ? void 0 : o.length) === 1 ? "numeric" : "duration" : "numeric";
     this._maxDurationLevel = Math.min(...this._durationLevels), e === "duration" ? (!["time", "short", "long"].includes(this._durationFormat ?? "") || this._maxDurationLevel < 6 && this._durationFormat === "time") && (this._durationFormat = "short") : (this._displayAs === "general" && this._commaDecimals ? t = "z" : this._displayAs === "percentage" && this._commaDecimals ? t = "y" : this._displayAs === "scientific" && this._commaDecimals ? t = "w" : this._displayAs === "percentage" ? t = "%" : this._displayAs === "scientific" && (t = "s"), this._format = (this._thousandSeparator || this._isAuto ? "," : "") + "." + this._precision + (this._isAuto ? "a" : "") + t);
   }
   _setAggregationFunc() {
     const t = this._aggregationFunc, e = this.slotContent.format;
     if (this._aggregationElement.value !== t) {
       if (this._aggregationFunc = this._aggregationElement.value, t === "rate") {
-        const i = v(e), a = ["%", "y", "a%", "ay"].includes(
-          i.typeFormat
+        const o = v(e), s = ["%", "y", "a%", "ay"].includes(
+          o.typeFormat
         );
-        this.slotContent.subtype === "currency" && a && this._setNumericDisplayAs();
+        this.slotContent.subtype === "currency" && s && this._setNumericDisplayAs();
       }
       this._sendEvent(), (this._aggregationFunc === "rate" || t === "rate") && this.requestUpdate();
     }
@@ -150,7 +160,7 @@ class o extends b(A, {
       this._aggregationWeightColumn = void 0;
     else {
       const e = this.measureColumns.find(
-        (i) => i.columnId === t
+        (o) => o.columnId === t
       );
       this._aggregationWeightColumn = {
         column: e == null ? void 0 : e.columnId,
@@ -161,7 +171,7 @@ class o extends b(A, {
     this._sendEvent();
   }
   _setDurationLevels() {
-    const t = this._durationLevels, e = this._durationLevelsElement.value.split(",").filter((i) => i !== "").map((i) => Number.parseInt(i, 10));
+    const t = this._durationLevels, e = this._durationLevelsElement.value.split(",").filter((o) => o !== "").map((o) => Number.parseInt(o, 10));
     this._durationLevels = ((e == null ? void 0 : e.length) ?? 0) >= 1 ? e : t, this._maxDurationLevel = Math.min(...this._durationLevels), this._fillTimeDurationLevels(), this._setNumericFormat(), this._sendEvent(), this.requestUpdate();
   }
   _setDurationFormat() {
@@ -177,8 +187,8 @@ class o extends b(A, {
           lev8: [6, 7],
           lev9: [6, 7, 8]
         };
-        for (const i of e["lev" + t])
-          this._durationLevels.includes(i) || this._durationLevels.push(i);
+        for (const o of e["lev" + t])
+          this._durationLevels.includes(o) || this._durationLevels.push(o);
         this._durationLevels = [...this._durationLevels].sort();
       }
     }
@@ -220,30 +230,30 @@ 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, o, s;
+    t.has("slotContent") && (this._parseSavedNumericFormatSettings(), this._aggregationFunc = ((e = this.slotContent) == null ? void 0 : e.aggregationFunc) ?? ((o = this.slotContent) == null ? void 0 : o.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) => {
-      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
+    const t = N.levels.map((e) => {
+      let o = !1;
+      return this._durationFormat === "time" && e.level >= 6 && this._durationLevels.includes(e.level) && e.level !== Math.max(...this._durationLevels) && (o = !0), this._durationLevels.length === 1 && this._durationLevels.includes(e.level) && (o = !0), r`<luzmo-menu-item
         value=${e.level}
         ?selected=${this._durationLevels.includes(e.level)}
-        ?disabled=${i}
+        ?disabled=${o}
       >
         ${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,33 +356,33 @@ 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 o, s;
+    const t = Object.entries(E).map(
+      ([i, n]) => r`<luzmo-menu-item value=${i}>${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((i) => {
+        var d, g, h;
+        const n = ((d = i == null ? void 0 : i.label) == null ? void 0 : d[this.language ?? "en"]) ?? ((h = i == null ? void 0 : i.label) == null ? void 0 : h[(g = Object.keys(i == null ? void 0 : i.label)) == null ? void 0 : g[0]]) ?? "Untitled";
+        return r`<luzmo-menu-item value=${i.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
           id="aggregation"
           size=${this.size}
           variant="highlight"
-          value=${this._aggregationFunc ?? (((i = this.slotContent) == null ? void 0 : i.type) === "numeric" ? "sum" : "count")}
+          value=${this._aggregationFunc ?? (((o = this.slotContent) == null ? void 0 : o.type) === "numeric" ? "sum" : "count")}
           @change=${this._setAggregationFunc}
         >
           ${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;
+}