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

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

@@ -1,6 +1,6 @@
 /*! * A kit of modern Luzmo Web Components for analytics in your web application.
  * 
- * Copyright © 2024 Luzmo
+ * Copyright © 2025 Luzmo
  * All rights reserved.
  * Luzmo web components (“Luzmo Web Components”)
  * must be used according to the Luzmo Terms of Service.
@@ -17,62 +17,72 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-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 = () => {
+import { m as a, g as w, t as S, s as D } from "../set-locale-GI34z_M7.js";
+import { l as C } from "../localized-decorator-Bl5gcI6n.js";
+import "../index-D_jFGBMs.js";
+import "../index-BW3AUnEX.js";
+import "../index-CsDgk_sj.js";
+import "../index-BssHAgUU.js";
+import "../index-DsP81c4M.js";
+import "../index-B2ngKWOI.js";
+import "../index-CTVNGPeT.js";
+import { d as y } from "../decompose-numeric-format-BuZcjH2k.js";
+import { r as N, x as r, E as f, n as _ } from "../property-DCzt3DR1.js";
+import { a8 as z, ac as E } from "../luzmo-icons-CVeTZ59u.js";
+import { a as I } from "../index-DUF6bALI.js";
+import "../index-BmshD32H.js";
+import { c as M, a as O } from "../calculate-data-item-icon-Dpvf1aLI.js";
+import { l as x } from "../localize-BX7q0S0M.js";
+import { r as k } from "../state-nDsQPund.js";
+import { e as g } from "../query-Ddbd72Um.js";
+import { L as W } from "../focusable-BbymtxWI.js";
+import { S as T, E as U } from "../sized-mixin-BGzkX2g1.js";
+const L = () => {
   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);
+    const e = document.createElement("style");
+    e.setAttribute("data-luzmo-vars", ""), e.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-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(e);
   }
 };
-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",
-  weightedaverage: "Weighted average",
-  median: "Median",
-  count: "Count",
-  distinctcount: "Distinct count",
-  min: "Minimum",
-  max: "Maximum",
-  stddev: "Standard deviation",
-  rate: "Rate"
-}, f = {
+L();
+const j = ":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))}.dataset-header{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;font-weight:600;text-transform:uppercase;margin-bottom:.5rem;margin-top:.5rem;margin-left:1rem}.no-weight-label{margin-left:1rem}.with-secondary-icon{clip-path:polygon(0 0,60% 0,65% 60%,100% 65%,100% 100%,0 100%)}.secondary-icon{position:absolute;bottom:45%;left:60%;width:auto;font-size:.75em;line-height:1}.data-icon-type{width:1.5rem;text-align:center;position:relative;display:inline-block}: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 )}", P = {
+  sum: () => a("Sum", { desc: "Numeric Aggregation option" }),
+  cumulativesum: () => a("Cumulative sum", { desc: "Numeric Aggregation option" }),
+  average: () => a("Average", { desc: "Numeric Aggregation option" }),
+  median: () => a("Median", { desc: "Numeric Aggregation option" }),
+  count: () => a("Count", { desc: "Numeric Aggregation option" }),
+  distinctcount: () => a("Distinct count", { desc: "Numeric Aggregation option" }),
+  min: () => a("Minimum", { desc: "Numeric Aggregation option" }),
+  max: () => a("Maximum", { desc: "Numeric Aggregation option" }),
+  stddev: () => a("Standard deviation", { desc: "Numeric Aggregation option" }),
+  rate: () => a("Rate", { desc: "Numeric Aggregation option" })
+}, A = {
   general: "123",
   percentage: "%",
   scientific: "SI"
-}, _ = {
-  time: "Time",
-  short: "Short",
-  long: "Long"
-}, b = {
-  Auto: { auto: !0 },
+}, $ = {
+  time: () => a("Time", { desc: "Time format option" }),
+  short: () => a("Short", { desc: "Short format option" }),
+  long: () => a("Long", { desc: "Long format option" })
+}, v = {
+  Auto: {
+    auto: !0,
+    label: () => a("Auto", { desc: "Automatic setting of the option" })
+  },
   "1,000.00": {
     auto: !1,
+    label: () => "1,000.00",
     thousandSeparator: ",",
     decimalSeparator: "."
   },
   "1.000,00": {
     auto: !1,
+    label: () => "1.000,00",
     thousandSeparator: ".",
     decimalSeparator: ","
   },
-  "1000.00": { auto: !1, decimalSeparator: "." },
-  "1000,00": { auto: !1, decimalSeparator: "," }
-}, N = {
+  "1000.00": { auto: !1, label: () => "1000.00", decimalSeparator: "." },
+  "1000,00": { auto: !1, label: () => "1000,00", decimalSeparator: "," }
+}, G = {
   levels: [
     { level: 1, label: "years" },
     { level: 2, label: "quarters" },
@@ -85,110 +95,117 @@ const C = ":host .settings-container{display:flex;flex-direction:column;gap:var(
     { level: 9, label: "milliseconds" }
   ]
 };
-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;
+var R = Object.defineProperty, q = Object.getOwnPropertyDescriptor, m = (e, t, o, s) => {
+  for (var i = s > 1 ? void 0 : s ? q(t, o) : t, l = e.length - 1, u; l >= 0; l--)
+    (u = e[l]) && (i = (s ? u(t, o, i) : u(i)) || i);
+  return s && i && R(t, o, i), i;
 };
-class l extends A(x, {
-  validSizes: Object.values(S)
+let n = class extends T(W, {
+  validSizes: Object.values(U)
 }) {
   constructor() {
-    super(...arguments), this.slotContent = {}, this.measureColumns = [], this._durationLevels = [], this._renderDurationLevelMenu = !1, this._sendEvent = () => {
-      const t = { ...this.slotContent };
-      t.format = this._format, t.aggregationFunc = this._aggregationFunc, this._aggregationWeightColumn ? t.aggregationWeight = { ...this._aggregationWeightColumn } : this._aggregationFunc === "rate" && (t.aggregationFunc = "average"), this._displayMode === "duration" ? (t.duration = t.duration ?? {}, t.duration.format = this._durationFormat, t.duration.levels = this._durationLevels) : delete t.duration, this.dispatchEvent(
+    super(...arguments), this.language = "en", this.slotContent = {}, this.measureColumns = [], this._durationLevels = [], this._renderDurationLevelMenu = !1, this._sendEvent = () => {
+      const e = { ...this.slotContent };
+      e.format = this._format, e.aggregationFunc = this._aggregationFunc, this._aggregationWeightColumn ? e.aggregationWeight = { ...this._aggregationWeightColumn } : delete e.aggregationWeight, this._displayMode === "duration" ? (e.duration = e.duration ?? {}, e.duration.format = this._durationFormat, e.duration.levels = this._durationLevels) : delete e.duration, this.dispatchEvent(
         new CustomEvent("slot-content-changed", {
           bubbles: !0,
           composed: !0,
           cancelable: !0,
           detail: {
-            slotContent: t
+            slotContent: e
           }
         })
       );
     };
   }
   static get styles() {
-    return [F(C)];
+    return [N(j)];
   }
   _parseSavedNumericFormatSettings() {
-    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")
+    var e, t, o, s, i, l, u, c, h, p;
+    if (this._displayMode = ((e = this.slotContent) == null ? void 0 : e.subtype) === "duration" ? ((s = (o = (t = this.slotContent) == null ? void 0 : t.duration) == null ? void 0 : o.levels) == null ? void 0 : s.length) === 1 ? "numeric" : "duration" : "numeric", this._durationFormat = ((l = (i = this.slotContent) == null ? void 0 : i.duration) == null ? void 0 : l.format) ?? "short", this._durationLevels = ((c = (u = this.slotContent) == null ? void 0 : u.duration) == null ? void 0 : c.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 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");
+      const d = y(this._format ?? ".0f");
+      this._isAuto = ((p = d.typeFormat) == null ? void 0 : p.includes("a")) ?? !1, ["%", "a%", "y", "ay"].includes(d.typeFormat) ? this._displayAs = "percentage" : ["s", "as", "w", "aw"].includes(d.typeFormat) ? this._displayAs = "scientific" : this._displayAs = "general", this._precision = d.precision ? Number.parseInt(d.precision.replace(".", ""), 10) : this._displayAs === "scientific" ? 1 : 0, this._commaDecimals = ["z", "az", "y", "ay", "w", "aw"].includes(
+        d.typeFormat
+      ), this._thousandSeparator = d.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() {
-    var t, e;
-    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();
+    var e, t;
+    this._displayAs = ((t = (e = this._displayAsElement) == null ? void 0 : e.selected) == null ? void 0 : t[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 = b[(t == null ? void 0 : t.detail) ?? "Auto"];
+  _setNumericSeparators(e) {
+    const t = v[(e == null ? void 0 : e.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();
+      (t == null ? void 0 : t.thousandSeparator) ?? ""
+    ), this._commaDecimals = (t == null ? void 0 : t.decimalSeparator) === ",", this._isAuto = t == null ? void 0 : t.auto, this._setNumericFormat(), this._sendEvent();
   }
   _setPrecision() {
     this._precision = this._precisionElement.value, this._setNumericFormat(), this._sendEvent();
   }
   _setNumericFormat() {
-    var i;
-    let t = "f";
-    const e = this.slotContent.subtype === "duration" ? this._durationLevels && ((i = this._durationLevels) == null ? void 0 : i.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);
+    var o;
+    let e = "f";
+    const t = this.slotContent.subtype === "duration" ? this._durationLevels && ((o = this._durationLevels) == null ? void 0 : o.length) === 1 ? "numeric" : "duration" : "numeric";
+    this._maxDurationLevel = Math.min(...this._durationLevels), t === "duration" ? (!["time", "short", "long"].includes(this._durationFormat ?? "") || this._maxDurationLevel < 6 && this._durationFormat === "time") && (this._durationFormat = "short") : (this._displayAs === "general" && this._commaDecimals ? e = "z" : this._displayAs === "percentage" && this._commaDecimals ? e = "y" : this._displayAs === "scientific" && this._commaDecimals ? e = "w" : this._displayAs === "percentage" ? e = "%" : this._displayAs === "scientific" && (e = "s"), this._format = (this._thousandSeparator || this._isAuto ? "," : "") + "." + this._precision + (this._isAuto ? "a" : "") + e);
   }
   _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), s = ["%", "y", "a%", "ay"].includes(
-          i.typeFormat
+    var i;
+    const e = this._aggregationElement.value, t = this._aggregationFunc, o = this.slotContent.format;
+    if (e !== (t === "weightedaverage" ? "average" : t)) {
+      if (this._aggregationFunc = e === "average" && ((i = this._aggregationWeightColumn) != null && i.column) ? "weightedaverage" : e, t === "rate") {
+        const l = y(o), u = ["%", "y", "a%", "ay"].includes(
+          l.typeFormat
         );
-        this.slotContent.subtype === "currency" && s && this._setNumericDisplayAs();
+        this.slotContent.subtype === "currency" && u && this._setNumericDisplayAs();
       }
       this._sendEvent(), (this._aggregationFunc === "rate" || t === "rate") && this.requestUpdate();
     }
   }
   _setAggregationWeight() {
-    const t = this._aggregationWeightElement.value;
-    if (t === "none")
-      this._aggregationWeightColumn = void 0;
+    var o;
+    const e = this._aggregationWeightElement.value, t = this._aggregationFunc;
+    if (e === "none")
+      this._aggregationWeightColumn = void 0, this._aggregationFunc === "weightedaverage" && (this._aggregationFunc = "average");
     else {
-      const e = this.measureColumns.find(
-        (i) => i.columnId === t
-      );
-      this._aggregationWeightColumn = {
-        column: e == null ? void 0 : e.columnId,
-        set: e == null ? void 0 : e.datasetId,
-        columnSubType: e == null ? void 0 : e.subtype
-      };
+      let s, i;
+      for (const l of this.measureColumns ?? []) {
+        const u = (o = l.columns) == null ? void 0 : o.find((c) => c.id === e);
+        if (u) {
+          s = u, i = l.datasetId;
+          break;
+        }
+      }
+      s && (this._aggregationWeightColumn = {
+        column: s.id,
+        set: i,
+        columnSubType: s.subtype
+      }), this._aggregationFunc === "average" && (this._aggregationFunc = "weightedaverage");
     }
-    this._sendEvent();
+    this._sendEvent(), this.requestUpdate(), (t === "weightedaverage" && this._aggregationFunc === "average" || t === "average" && this._aggregationFunc === "weightedaverage") && this.requestUpdate();
   }
   _setDurationLevels() {
-    const t = this._durationLevels, e = this._durationLevelsElement.value.split(",").filter((i) => i !== "").map((i) => Number.parseInt(i, 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();
+    const e = this._durationLevels, t = this._durationLevelsElement.value.split(",").filter((o) => o !== "").map((o) => Number.parseInt(o, 10));
+    this._durationLevels = ((t == null ? void 0 : t.length) ?? 0) >= 1 ? t : e, this._maxDurationLevel = Math.min(...this._durationLevels), this._fillTimeDurationLevels(), this._setNumericFormat(), this._sendEvent(), this.requestUpdate();
   }
   _setDurationFormat() {
-    var t, e;
-    this._durationFormat = (e = (t = this._durationFormatElement) == null ? void 0 : t.selected) == null ? void 0 : e[0], this._fillTimeDurationLevels(), this._setNumericFormat(), this._sendEvent(), this.requestUpdate();
+    var e, t;
+    this._durationFormat = (t = (e = this._durationFormatElement) == null ? void 0 : e.selected) == null ? void 0 : t[0], this._fillTimeDurationLevels(), this._setNumericFormat(), this._sendEvent(), this.requestUpdate();
   }
   _fillTimeDurationLevels() {
     if (this._durationFormat === "time") {
-      const t = this._durationLevels.sort().at(-1);
-      if ([7, 8, 9].includes(t)) {
-        const e = {
+      const e = this._durationLevels.sort().at(-1);
+      if ([7, 8, 9].includes(e)) {
+        const t = {
           lev7: [6],
           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 t["lev" + e])
+          this._durationLevels.includes(o) || this._durationLevels.push(o);
         this._durationLevels = [...this._durationLevels].sort();
       }
     }
@@ -229,39 +246,39 @@ class l extends A(x, {
         });
       }
     } */
-  willUpdate(t) {
-    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);
+  willUpdate(e) {
+    var t, o, s, i, l;
+    e.has("slotContent") && (this._parseSavedNumericFormatSettings(), this._aggregationFunc = ((t = this.slotContent) == null ? void 0 : t.aggregationFunc) ?? (((o = this.slotContent) == null ? void 0 : o.type) === "numeric" ? "sum" : "count"), this._aggregationWeightColumn = (s = this.slotContent) == null ? void 0 : s.aggregationWeight, this._isFormula = ((i = this.slotContent) == null ? void 0 : i.formula) || ((l = this.slotContent) == null ? void 0 : l.formulaId)), e.has("language") && this.language !== w() && ([...S].includes(this.language ?? "en") || this.language === "en") && D(this.language);
   }
   firstUpdated() {
-    var t;
-    (t = this.slotContent) != null && t.duration && this._durationLevelsOverlay.addEventListener(
+    var e;
+    (e = this.slotContent) != null && e.duration && this._durationLevelsOverlay.addEventListener(
       "slottable-request",
-      (e) => {
-        this._renderDurationLevelMenu = e.data !== D;
+      (t) => {
+        this._renderDurationLevelMenu = t.data !== I;
       }
     );
   }
   _renderDurationLevelsSettings() {
-    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), r`<luzmo-menu-item
-        value=${e.level}
-        ?selected=${this._durationLevels.includes(e.level)}
-        ?disabled=${i}
+    const e = G.levels.map((t) => {
+      let o = !1;
+      return this._durationFormat === "time" && t.level >= 6 && this._durationLevels.includes(t.level) && t.level !== Math.max(...this._durationLevels) && (o = !0), this._durationLevels.length === 1 && this._durationLevels.includes(t.level) && (o = !0), r`<luzmo-menu-item
+        value=${t.level}
+        ?selected=${this._durationLevels.includes(t.level)}
+        ?disabled=${o}
       >
-        ${e.label}
+        ${t.label}
       </luzmo-menu-item>`;
     });
     return r` <div class="setting">
       <luzmo-field-label for="duration-levels">
-        Duration levels
+        ${a("Duration levels", { desc: "Label for duration levels setting" })}
       </luzmo-field-label>
       <luzmo-action-button id="trigger" size=${this.size}>
         ${this._durationLevels.length}
         ${this._durationLevels.length === 1 ? "level" : "levels"} active
         <span class="duration-angle-down-icon">
-          ${$(L)}
+          ${z(E)}
         </span>
       </luzmo-action-button>
       <luzmo-overlay
@@ -279,18 +296,20 @@ class l extends A(x, {
                 .value=${this._durationLevels.join(",")}
                 @change=${this._setDurationLevels}
               >
-                ${t}
+                ${e}
               </luzmo-menu>` : ""}
         </luzmo-popover>
       </luzmo-overlay>
     </div>`;
   }
   _renderDurationFormatSettings() {
-    const t = Object.keys(_).map((e) => e === "time" && (this._maxDurationLevel ?? 1) < 6 ? "" : r`<luzmo-action-button value=${e}>
-        ${_[e]}
+    const e = Object.keys($).map((t) => t === "time" && (this._maxDurationLevel ?? 1) < 6 ? "" : r`<luzmo-action-button value=${t}>
+        ${$[t]()}
       </luzmo-action-button>`);
     return r` <div class="setting">
-      <luzmo-field-label for="duration-format">Format</luzmo-field-label>
+      <luzmo-field-label for="duration-format">
+        ${a("Format", { desc: "Label for format setting" })}
+      </luzmo-field-label>
       <luzmo-action-group
         emphasized
         id="duration-format"
@@ -300,18 +319,22 @@ class l extends A(x, {
         selects="single"
         @change=${this._setDurationFormat}
       >
-        ${t}
+        ${e}
       </luzmo-action-group>
     </div>`;
   }
   _renderNumericDisplayAsSettings() {
-    const t = Object.keys(f).map(
-      (e) => r`<luzmo-action-button value=${e}
-          >${f[e]}</luzmo-action-button
+    const e = Object.keys(A).map(
+      (t) => r`<luzmo-action-button value=${t}
+          >${A[t]}</luzmo-action-button
         >`
     );
     return r`<div class="setting">
-      <luzmo-field-label for="display-as">Display as</luzmo-field-label>
+      <luzmo-field-label for="display-as">
+        ${a("Display as", {
+      desc: "Label for display as setting for the datetime field"
+    })}
+      </luzmo-field-label>
       <luzmo-action-group
         emphasized
         id="display-as"
@@ -321,16 +344,20 @@ class l extends A(x, {
         selects="single"
         @change=${this._setNumericDisplayAs}
       >
-        ${t}
+        ${e}
       </luzmo-action-group>
     </div>`;
   }
   _renderNumericFormatSettings() {
-    const t = Object.keys(b).map(
-      (e) => r`<luzmo-menu-item value=${e}>${e}</luzmo-menu-item>`
+    const e = Object.keys(v).map(
+      (t) => r`<luzmo-menu-item value=${t}>
+          ${v[t].label()}
+        </luzmo-menu-item>`
     );
     return r` <div class="setting">
-        <luzmo-field-label for="format">Format</luzmo-field-label>
+        <luzmo-field-label for="format">
+          ${a("Format", { desc: "Label for format setting" })}
+        </luzmo-field-label>
         <luzmo-picker
           id="format"
           size=${this.size}
@@ -338,13 +365,17 @@ class l extends A(x, {
           value=${this._numericFormatGroup ?? "Auto"}
           @change=${this._setNumericSeparators}
         >
-          ${t}
+          ${e}
         </luzmo-picker>
       </div>
       <div class="setting">
-        <luzmo-field-label for="precision" id="precision-label"
-          >${this._displayAs === "scientific" ? "Precision" : "Decimals"}</luzmo-field-label
-        >
+        <luzmo-field-label for="precision" id="precision-label">
+          ${this._displayAs === "scientific" ? a("Precision", {
+      desc: "Label for precision setting"
+    }) : a("Decimals", {
+      desc: "Label for decimals setting"
+    })}
+        </luzmo-field-label>
         <luzmo-number-field
           id="precision"
           min=${this._displayAs === "scientific" ? 1 : 0}
@@ -356,97 +387,139 @@ class l extends A(x, {
       </div>`;
   }
   _renderAggregationSettings() {
-    var i, s;
-    const t = Object.entries(E).map(
-      ([o, n]) => r`<luzmo-menu-item value=${o}>${n}</luzmo-menu-item>`
-    ), e = [
-      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>`;
+    var o;
+    const e = Object.entries(P).filter(
+      ([s]) => {
+        var i;
+        return ["count", "distinctcount"].includes(s) || ((i = this.slotContent) == null ? void 0 : i.type) === "numeric";
+      }
+    ).map(
+      ([s, i]) => r`<luzmo-menu-item value=${s}>${i()}</luzmo-menu-item>`
+    ), t = [
+      r`<luzmo-menu-item value="none" class="no-weight">
+        <span class="no-weight-label">No weight</span>
+      </luzmo-menu-item>`,
+      ...(this.measureColumns ?? []).flatMap((s) => {
+        const i = typeof s.datasetName == "object" ? x(
+          s.datasetName,
+          this.language
+        ) : s.datasetName, l = r`<div class="dataset-header">
+          ${i}
+          <luzmo-tooltip self-managed placement="right" size=${this.size}>
+            ${i}
+          </luzmo-tooltip>
+        </div>`, u = (s.columns ?? []).map((c) => {
+          const h = typeof c.name == "object" ? x(c.name, this.language) : c.name, p = z(M(c, "s")), d = c.expression ? O("derived", "s") : void 0, b = !!d, F = b ? r`<span class="secondary-icon"
+                >${z(d)}</span
+              >` : f;
+          return r`<luzmo-menu-item value=${c.id}>
+            <span class="data-icon-type" slot="icon">
+              <span class=${b ? "with-secondary-icon" : ""}
+                >${p}</span
+              >
+              ${F}
+            </span>
+            <span class="column-label text-truncate">${h}</span>
+            <luzmo-tooltip self-managed placement="right" size=${this.size}>
+              ${h}
+            </luzmo-tooltip>
+          </luzmo-menu-item>`;
+        });
+        return [l, ...u];
       })
     ];
     return r`<div class="settings-row">
       <div class="setting">
-        <luzmo-field-label for="aggregation">Aggregation</luzmo-field-label>
+        <luzmo-field-label for="aggregation">
+          ${a("Aggregation", { desc: "Label for aggregation setting" })}
+        </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=${(() => {
+      var i;
+      const s = ((i = this.slotContent) == null ? void 0 : i.type) === "numeric" ? "sum" : "count";
+      return this._aggregationFunc === "weightedaverage" ? "average" : this._aggregationFunc ?? s;
+    })()}
           @change=${this._setAggregationFunc}
         >
-          ${t}
+          ${e}
         </luzmo-picker>
       </div>
-      ${this._aggregationFunc === "rate" ? r`<div class="setting">
+      ${["rate", "average", "weightedaverage"].includes(
+      this._aggregationFunc ?? ""
+    ) ? r`<div class="setting">
             <luzmo-field-label for="weighting-column">
-              Denominator
+              ${this._aggregationFunc === "rate" ? "Denominator" : "Weight"}
             </luzmo-field-label>
-            <luzmo-picker
-              id="weighting-column"
-              size=${this.size}
-              variant="highlight"
-              value=${((s = this._aggregationWeightColumn) == null ? void 0 : s.column) ?? "none"}
-              @change=${this._setAggregationWeight}
-            >
-              ${e}
-            </luzmo-picker>
+            ${this.measureColumns.length > 0 ? r`
+                  <luzmo-picker
+                    id="weighting-column"
+                    size=${this.size}
+                    variant="highlight"
+                    icons="none"
+                    value=${((o = this._aggregationWeightColumn) == null ? void 0 : o.column) ?? "none"}
+                    @change=${this._setAggregationWeight}
+                  >
+                    ${t}
+                  </luzmo-picker>
+                ` : f}
           </div>` : ""}
     </div>`;
   }
   render() {
-    var t;
+    var e;
     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()}
+      ${((e = this._durationLevels) == null ? void 0 : e.length) > 1 ? this._renderDurationFormatSettings() : this._renderNumericFormatSettings()}
       </div>
-      ${this._renderAggregationSettings()}
+      ${this._isFormula ? f : this._renderAggregationSettings()}
       </div>
     </div>`;
   }
-}
-a([
-  p({ type: String, reflect: !0 })
-], l.prototype, "language");
-a([
-  p({ type: Object, reflect: !0 })
-], l.prototype, "slotContent");
-a([
-  p({ type: Array, reflect: !1 })
-], 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");
+};
+m([
+  _({ type: String, reflect: !0 })
+], n.prototype, "language", 2);
+m([
+  _({ type: Object, reflect: !0 })
+], n.prototype, "slotContent", 2);
+m([
+  _({ type: Array, reflect: !1 })
+], n.prototype, "measureColumns", 2);
+m([
+  g("#display-as")
+], n.prototype, "_displayAsElement", 2);
+m([
+  g("#precision")
+], n.prototype, "_precisionElement", 2);
+m([
+  g("#aggregation")
+], n.prototype, "_aggregationElement", 2);
+m([
+  g("#weighting-column")
+], n.prototype, "_aggregationWeightElement", 2);
+m([
+  g("#duration-levels")
+], n.prototype, "_durationLevelsElement", 2);
+m([
+  g("#duration-format")
+], n.prototype, "_durationFormatElement", 2);
+m([
+  g("#duration-levels-overlay")
+], n.prototype, "_durationLevelsOverlay", 2);
+m([
+  k()
+], n.prototype, "_renderDurationLevelMenu", 2);
+n = m([
+  C()
+], n);
 customElements.get("luzmo-display-settings-numeric") || customElements.define(
   "luzmo-display-settings-numeric",
-  l
+  n
 );
 export {
-  l as LuzmoDisplaySettingsNumeric
+  n as LuzmoDisplaySettingsNumeric
 };