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

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

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

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

@@ -0,0 +1,84 @@
+import '@luzmo/lucero/action-button';
+import '@luzmo/lucero/action-group';
+import '@luzmo/lucero/field-label';
+import '@luzmo/lucero/menu';
+import '@luzmo/lucero/number-field';
+import '@luzmo/lucero/picker';
+import '@luzmo/lucero/popover';
+import { CSSResultArray, TemplateResult } from 'lit';
+import '@luzmo/lucero/tooltip';
+import { LuzmoElement } from '../../utils/base';
+import { MeasureColumnsItem } from '../slot-menu/types';
+declare const LuzmoDisplaySettingsNumeric_base: typeof LuzmoElement & {
+    new (...args: any[]): import("../../utils/base/sized-mixin").SizedElementInterface;
+    prototype: import("../../utils/base/sized-mixin").SizedElementInterface;
+};
+/**
+ * @element luzmo-display-settings-numeric
+ * @fires slot-content-changed - Event that is fired when the slot content is changed
+ */
+export declare class LuzmoDisplaySettingsNumeric extends LuzmoDisplaySettingsNumeric_base {
+    static get styles(): CSSResultArray;
+    /**
+     * The language used in the settings
+     */
+    language: string;
+    /**
+     * The slotContent that is passed to the settings
+     */
+    slotContent: any;
+    /**
+     * The list of measure columns grouped by dataset that can be used for the rate aggregation.
+     * Shape: [{ datasetId, datasetName, columns: Column[] }]
+     */
+    measureColumns: MeasureColumnsItem[];
+    /**
+     * Whether or not to show the aggregation options
+     */
+    isAggregationDisabled?: boolean;
+    /**
+     * Whether or not to show the cumulative sum options
+     */
+    isCumulativeSumEnabled?: boolean;
+    private _displayAs?;
+    private _displayMode?;
+    private _numericFormatGroup?;
+    private _precision?;
+    private _thousandSeparator?;
+    private _commaDecimals?;
+    private _isAuto?;
+    private _format?;
+    private _durationFormat?;
+    private _durationLevels;
+    private _maxDurationLevel?;
+    private _aggregationFunc?;
+    private _aggregationWeightColumn?;
+    private _isFormula?;
+    private _displayAsElement;
+    private _precisionElement;
+    private _aggregationElement;
+    private _aggregationWeightElement;
+    private _durationLevelsElement;
+    private _durationFormatElement;
+    private _renderDurationLevelMenu;
+    private _handleSlottableRequest;
+    private _sendEvent;
+    private _parseSavedNumericFormatSettings;
+    private _setNumericDisplayAs;
+    private _setNumericSeparators;
+    private _setPrecision;
+    private _setNumericFormat;
+    private _setAggregationFunc;
+    private _setAggregationWeight;
+    private _setDurationLevels;
+    private _setDurationFormat;
+    private _fillTimeDurationLevels;
+    protected willUpdate(changedProperties: Map<string, any>): void;
+    private _renderDurationLevelsSettings;
+    private _renderDurationFormatSettings;
+    private _renderNumericDisplayAsSettings;
+    private _renderNumericFormatSettings;
+    private _renderAggregationSettings;
+    protected render(): TemplateResult;
+}
+export {};

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

@@ -0,0 +1,19 @@
+export type NumericSeparatorFormatKeys = 'Auto' | '1,000.00' | '1.000,00' | '1000.00' | '1000,00';
+export type DurationFormat = 'time' | 'short' | 'long';
+export type DisplayAsFormatLabel = 'general' | 'scientific' | 'percentage';
+export declare const AGGREGATIONS: Record<string, () => string>;
+export declare const DISPLAY_AS_LABELS: Record<DisplayAsFormatLabel, string>;
+export declare const DURATION_FORMATS: Record<DurationFormat, () => string>;
+export declare const NUMERIC_SEPARATOR_FORMATS: Record<NumericSeparatorFormatKeys, {
+    auto: boolean;
+    label: () => string;
+    thousandSeparator?: ',' | '.';
+    decimalSeparator?: ',' | '.';
+    hiddenFor?: DisplayAsFormatLabel;
+}>;
+export declare const DURATION: {
+    levels: {
+        level: number;
+        label: string;
+    }[];
+};

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

@@ -0,0 +1,184 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Luzmo web components (“Luzmo Web Components”)
+ * must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account
+ * to use the Luzmo Web Components. This license terminates
+ * automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("@lit/localize");require("@luzmo/lucero/action-button");require("@luzmo/lucero/action-group");require("@luzmo/lucero/field-label");require("@luzmo/lucero/menu");require("@luzmo/lucero/number-field");require("@luzmo/lucero/picker");require("@luzmo/lucero/popover");const _=require("../decompose-numeric-format-B3rVVHpO.cjs"),s=require("lit"),c=require("@luzmo/icons"),F=require("@luzmo/lucero/overlay");require("@luzmo/lucero/tooltip");const $=require("../calculate-data-item-icon-DtVGbet3.cjs"),f=require("../localize-C4zNlrwK.cjs"),r=require("lit/decorators.js"),D=require("../focusable-QLh-LlNt.cjs"),y=require("../sized-mixin-DcvJLFeo.cjs"),d=require("../set-locale-BRRalqne.cjs"),N=":host .settings-container{display:flex;flex-direction:column;gap:var(--luzmo-display-settings-vertical-gap, var(--luzmo-spacing-2))}:host .settings-row{display:flex;justify-content:flex-start;align-items:center;gap:var(--luzmo-display-settings-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{max-width:100%;font-weight:600;text-transform:uppercase;margin:.5rem 1rem;color:var(--luzmo-font-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:default}.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 )}",w={sum:()=>a.msg("Sum",{desc:"Numeric Aggregation option"}),cumulativesum:()=>a.msg("Cumulative sum",{desc:"Numeric Aggregation option"}),average:()=>a.msg("Average",{desc:"Numeric Aggregation option"}),median:()=>a.msg("Median",{desc:"Numeric Aggregation option"}),count:()=>a.msg("Count rows",{desc:"Numeric Aggregation option"}),distinctcount:()=>a.msg("Count distinct",{desc:"Numeric Aggregation option"}),min:()=>a.msg("Minimum",{desc:"Numeric Aggregation option"}),max:()=>a.msg("Maximum",{desc:"Numeric Aggregation option"}),stddev:()=>a.msg("Standard deviation",{desc:"Numeric Aggregation option"}),rate:()=>a.msg("Rate",{desc:"Numeric Aggregation option"})},z={general:"123",percentage:"%",scientific:"SI"},b={time:()=>a.msg("Time",{desc:"Time format option"}),short:()=>a.msg("Short",{desc:"Short format option"}),long:()=>a.msg("Long",{desc:"Long format option"})},L={Auto:{auto:!0,label:()=>a.msg("Auto",{desc:"Automatic setting of the option"})},"1,000.00":{auto:!1,label:()=>"1,000.00",thousandSeparator:",",decimalSeparator:".",hiddenFor:"scientific"},"1.000,00":{auto:!1,label:()=>"1.000,00",thousandSeparator:".",decimalSeparator:",",hiddenFor:"scientific"},"1000.00":{auto:!1,label:()=>"1000.00",decimalSeparator:"."},"1000,00":{auto:!1,label:()=>"1000,00",decimalSeparator:","}},C={levels:[{level:1,label:"years"},{level:2,label:"quarters"},{level:3,label:"months"},{level:4,label:"weeks"},{level:5,label:"days"},{level:6,label:"hours"},{level:7,label:"minutes"},{level:8,label:"seconds"},{level:9,label:"milliseconds"}]};var q=Object.defineProperty,E=Object.getOwnPropertyDescriptor,n=(g,e,t,i)=>{for(var o=i>1?void 0:i?E(e,t):e,l=g.length-1,u;l>=0;l--)(u=g[l])&&(o=(i?u(e,t,o):u(o))||o);return i&&o&&q(e,t,o),o};exports.LuzmoDisplaySettingsNumeric=class extends y.SizedMixin(D.LuzmoElement,{validSizes:Object.values(y.ElementSizes)}){constructor(){super(...arguments),this.language="en",this.slotContent={},this.measureColumns=[],this._durationLevels=[],this._renderDurationLevelMenu=!1,this._handleSlottableRequest=e=>{this._renderDurationLevelMenu=e.data!==F.removeSlottableRequest},this._sendEvent=()=>{const e={...this.slotContent,format:this._format,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:e}}))}}static get styles(){return[s.unsafeCSS(N)]}_parseSavedNumericFormatSettings(){if(this._displayMode=this.slotContent?.subtype==="duration"?"duration":"numeric",this._durationFormat=this.slotContent?.duration?.format??"short",this._durationLevels=this.slotContent?.duration?.levels??[1],this._displayMode==="duration")this._precision=2,this._commaDecimals=!1,this._thousandSeparator=!1;else{this._format=this.slotContent?.format??".0f";const e=_.decomposeNumericFormat(this._format??".0f");this._isAuto=e.typeFormat?.includes("a")??!1,["%","a%","y","ay"].includes(e.typeFormat)?this._displayAs="percentage":["s","as","w","aw"].includes(e.typeFormat)?this._displayAs="scientific":this._displayAs="general",this._precision=e.precision?Number.parseInt(e.precision.replace(".",""),10):this._displayAs==="scientific"?1:0,this._commaDecimals=["z","az","y","ay","w","aw"].includes(e.typeFormat),this._thousandSeparator=e.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(){this._displayAs=this._displayAsElement?.selected?.[0]??"general",this._displayAs==="scientific"&&(this._precision=Math.max(this._precision??0,1),this._thousandSeparator=!1),this._setNumericFormat(),this._sendEvent(),this.requestUpdate()}_setNumericSeparators(e){const t=L[e?.detail??"Auto"];this._thousandSeparator=[",","."].includes(t?.thousandSeparator??""),this._commaDecimals=t?.decimalSeparator===",",this._isAuto=t?.auto,this._setNumericFormat(),this._sendEvent()}_setPrecision(){this._precision=this._precisionElement.value,this._setNumericFormat(),this._sendEvent()}_setNumericFormat(){let e="f";const t=this.slotContent.subtype==="duration"?this._durationLevels&&this._durationLevels?.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 e=this._aggregationElement.value,t=this._aggregationFunc,i=this.slotContent.format;if(e!==(t==="weightedaverage"?"average":t)){if(this._aggregationFunc=e==="average"&&this._aggregationWeightColumn?.column?"weightedaverage":e,t==="rate"){const l=_.decomposeNumericFormat(i),u=["%","y","a%","ay"].includes(l.typeFormat);this.slotContent.subtype==="currency"&&u&&this._setNumericDisplayAs()}this._sendEvent(),(this._aggregationFunc==="rate"||t==="rate")&&this.requestUpdate()}}_setAggregationWeight(){const e=this._aggregationWeightElement.value,t=this._aggregationFunc;if(e==="none")this._aggregationWeightColumn=void 0,this._aggregationFunc==="weightedaverage"&&(this._aggregationFunc="average");else{let i,o;for(const l of this.measureColumns??[]){const u=l.columns?.find(m=>m.id===e);if(u){i=u,o=l.datasetId;break}}i&&(this._aggregationWeightColumn={column:i.id,set:o,columnSubType:i.subtype}),this._aggregationFunc==="average"&&(this._aggregationFunc="weightedaverage")}this._sendEvent(),this.requestUpdate(),(t==="weightedaverage"&&this._aggregationFunc==="average"||t==="average"&&this._aggregationFunc==="weightedaverage")&&this.requestUpdate()}_setDurationLevels(){const e=this._durationLevels,t=this._durationLevelsElement.value.split(",").filter(i=>i!=="").map(i=>Number.parseInt(i,10));this._durationLevels=(t?.length??0)>=1?t:e,this._maxDurationLevel=Math.min(...this._durationLevels),this._fillTimeDurationLevels(),this._setNumericFormat(),this._sendEvent(),this.requestUpdate()}_setDurationFormat(){this._durationFormat=this._durationFormatElement?.selected?.[0],this._fillTimeDurationLevels(),this._setNumericFormat(),this._sendEvent(),this.requestUpdate()}_fillTimeDurationLevels(){if(this._durationFormat==="time"){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 t["lev"+e])this._durationLevels.includes(i)||this._durationLevels.push(i);this._durationLevels=[...this._durationLevels].sort()}}}willUpdate(e){e.has("slotContent")&&(this._parseSavedNumericFormatSettings(),this._aggregationFunc=this.slotContent?.aggregationFunc??(this.slotContent?.type==="numeric"?"sum":"count"),this._aggregationWeightColumn=this.slotContent?.aggregationWeight,this._isFormula=this.slotContent?.formula||this.slotContent?.formulaId),e.has("language")&&this.language!==d.getLocale()&&([...d.targetLocales].includes(this.language??"en")||this.language==="en")&&d.setLocale(this.language)}_renderDurationLevelsSettings(){const e=C.levels.map(t=>{let i=!1;return this._durationFormat==="time"&&t.level>=6&&this._durationLevels.includes(t.level)&&t.level!==Math.max(...this._durationLevels)&&(i=!0),this._durationLevels.length===1&&this._durationLevels.includes(t.level)&&(i=!0),s.html`<luzmo-menu-item
+        value=${t.level}
+        ?selected=${this._durationLevels.includes(t.level)}
+        ?disabled=${i}
+      >
+        ${t.label}
+      </luzmo-menu-item>`});return s.html` <div class="setting">
+      <luzmo-field-label for="duration-levels">
+        ${a.msg("Duration levels",{desc:"Label for duration levels setting"})}
+      </luzmo-field-label>
+      <luzmo-action-button id="duration-levels-trigger" size=${this.size}>
+        ${this._durationLevels.length}
+        ${this._durationLevels.length===1?"level":"levels"} active
+        <span class="duration-angle-down-icon">
+          ${c.luzmoIcon(c.luzmoAngleDown)}
+        </span>
+      </luzmo-action-button>
+      <luzmo-overlay
+        id="duration-levels-overlay"
+        trigger="duration-levels-trigger@click"
+        type="auto"
+        placement="bottom-start"
+        type="page"
+        @slottable-request=${this._handleSlottableRequest}
+      >
+        <luzmo-popover style="position: relative">
+          ${this._renderDurationLevelMenu?s.html` <luzmo-menu
+                id="duration-levels"
+                size=${this.size}
+                selects="multiple"
+                .value=${this._durationLevels.join(",")}
+                @change=${this._setDurationLevels}
+              >
+                ${e}
+              </luzmo-menu>`:""}
+        </luzmo-popover>
+      </luzmo-overlay>
+    </div>`}_renderDurationFormatSettings(){const e=Object.keys(b).map(t=>t==="time"&&(this._maxDurationLevel??1)<6?"":s.html`<luzmo-action-button value=${t}>
+        ${b[t]()}
+      </luzmo-action-button>`);return s.html` <div class="setting">
+      <luzmo-field-label for="duration-format">
+        ${a.msg("Format",{desc:"Label for format setting"})}
+      </luzmo-field-label>
+      <luzmo-action-group
+        emphasized
+        id="duration-format"
+        size=${this.size}
+        compact=""
+        .selected=${[this._durationFormat??"short"]}
+        selects="single"
+        @change=${this._setDurationFormat}
+      >
+        ${e}
+      </luzmo-action-group>
+    </div>`}_renderNumericDisplayAsSettings(){const e=Object.keys(z).filter(t=>t!=="percentage"||(this.slotContent.subtype!=="currency"||this.slotContent.aggregationFunc==="rate")&&this.slotContent.periodOverPeriod?.type!=="percentageChange").map(t=>s.html`<luzmo-action-button value=${t}
+            >${z[t]}</luzmo-action-button
+          >`);return s.html`<div class="setting">
+      <luzmo-field-label for="display-as">
+        ${a.msg("Display as",{desc:"Label for display as setting for the datetime field"})}
+      </luzmo-field-label>
+      <luzmo-action-group
+        emphasized
+        id="display-as"
+        size=${this.size}
+        compact=""
+        .selected=${[this._displayAs]}
+        selects="single"
+        @change=${this._setNumericDisplayAs}
+      >
+        ${e}
+      </luzmo-action-group>
+    </div>`}_renderNumericFormatSettings(){const e=Object.entries(L).filter(([,{hiddenFor:t}])=>!t||t!==this._displayAs).map(([t,{label:i}])=>s.html`<luzmo-menu-item value=${t}>${i()}</luzmo-menu-item>`);return s.html` <div class="setting">
+        <luzmo-field-label for="format">
+          ${a.msg("Format",{desc:"Label for format setting"})}
+        </luzmo-field-label>
+        <luzmo-picker
+          id="format"
+          size=${this.size}
+          variant="highlight"
+          value=${this._numericFormatGroup??"Auto"}
+          @change=${this._setNumericSeparators}
+        >
+          ${e}
+        </luzmo-picker>
+      </div>
+      <div class="setting">
+        <luzmo-field-label for="precision" id="precision-label">
+          ${this._displayAs==="scientific"?a.msg("Precision",{desc:"Label for precision setting"}):a.msg("Decimals",{desc:"Label for decimals setting"})}
+        </luzmo-field-label>
+        <luzmo-number-field
+          id="precision"
+          min=${this._displayAs==="scientific"?1:0}
+          max="22"
+          size=${this.size}
+          value=${this._precision??(this._displayAs==="scientific"?1:0)}
+          @change=${this._setPrecision}
+        ></luzmo-number-field>
+      </div>`}_renderAggregationSettings(){const e=Object.entries(w).filter(([i])=>["count","distinctcount"].includes(i)||this.slotContent?.type==="numeric").filter(([i])=>i!=="cumulativesum"||this.isCumulativeSumEnabled).map(([i,o])=>s.html`<luzmo-menu-item value=${i}>${o()}</luzmo-menu-item>`),t=[s.html`<luzmo-menu-item value="none" class="no-weight">
+        <span class="no-weight-label">No weight</span>
+      </luzmo-menu-item>`,...(this.measureColumns??[]).flatMap(i=>{const o=typeof i.datasetName=="object"?f.localize(i.datasetName,this.language):i.datasetName,l=s.html`<div class="dataset-header">
+          ${o}
+          <luzmo-tooltip self-managed placement="right" size=${this.size}>
+            ${o}
+          </luzmo-tooltip>
+        </div>`,u=(i.columns??[]).map(m=>{const h=typeof m.name=="object"?f.localize(m.name,this.language):m.name,S=c.luzmoIcon($.calculateDataItemIcon(m,"s")),p=m.expression?c.luzmoTypeDerived12:void 0,v=!!p,A=v?s.html`<span class="secondary-icon"
+                >${c.luzmoIcon(p)}</span
+              >`:s.nothing;return s.html`<luzmo-menu-item value=${m.id}>
+            <span class="data-icon-type" slot="icon">
+              <span class=${v?"with-secondary-icon":""}
+                >${S}</span
+              >
+              ${A}
+            </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 s.html`<div class="settings-row">
+      <div class="setting">
+        <luzmo-field-label for="aggregation">
+          ${a.msg("Aggregation",{desc:"Label for aggregation setting"})}
+        </luzmo-field-label>
+        <luzmo-picker
+          id="aggregation"
+          size=${this.size}
+          variant="highlight"
+          value=${(()=>{const i=this.slotContent?.type==="numeric"?"sum":"count";return this._aggregationFunc==="weightedaverage"?"average":this._aggregationFunc??i})()}
+          @change=${this._setAggregationFunc}
+        >
+          ${e}
+        </luzmo-picker>
+      </div>
+      ${["rate","average","weightedaverage"].includes(this._aggregationFunc??"")?s.html`<div class="setting">
+            <luzmo-field-label for="weighting-column">
+              ${this._aggregationFunc==="rate"?"Denominator":"Weight"}
+            </luzmo-field-label>
+            ${this.measureColumns.length>0?s.html`
+                  <luzmo-picker
+                    id="weighting-column"
+                    size=${this.size}
+                    variant="highlight"
+                    icons="none"
+                    value=${this._aggregationWeightColumn?.column??"none"}
+                    @change=${this._setAggregationWeight}
+                  >
+                    ${t}
+                  </luzmo-picker>
+                `:s.html`<luzmo-picker
+                  id="weighting-column"
+                  size=${this.size}
+                  variant="highlight"
+                  icons="none"
+                  value="none"
+                >
+                  <luzmo-menu-item value="none">No weight</luzmo-menu-item>
+                </luzmo-picker>`}
+          </div>`:""}
+    </div>`}render(){return s.html`<div class="settings-container">
+      <div class="settings-row">
+      ${this._displayMode==="duration"?this._renderDurationLevelsSettings():this._renderNumericDisplayAsSettings()}
+      ${this._durationLevels?.length>1?this._renderDurationFormatSettings():this._renderNumericFormatSettings()}
+      </div>
+      ${this._isFormula||this.isAggregationDisabled?s.nothing:this._renderAggregationSettings()}
+      </div>
+    </div>`}};n([r.property({type:String,reflect:!0})],exports.LuzmoDisplaySettingsNumeric.prototype,"language",2);n([r.property({type:Object,reflect:!0})],exports.LuzmoDisplaySettingsNumeric.prototype,"slotContent",2);n([r.property({type:Array,reflect:!1})],exports.LuzmoDisplaySettingsNumeric.prototype,"measureColumns",2);n([r.property({type:Boolean})],exports.LuzmoDisplaySettingsNumeric.prototype,"isAggregationDisabled",2);n([r.property({type:Boolean})],exports.LuzmoDisplaySettingsNumeric.prototype,"isCumulativeSumEnabled",2);n([r.query("#display-as")],exports.LuzmoDisplaySettingsNumeric.prototype,"_displayAsElement",2);n([r.query("#precision")],exports.LuzmoDisplaySettingsNumeric.prototype,"_precisionElement",2);n([r.query("#aggregation")],exports.LuzmoDisplaySettingsNumeric.prototype,"_aggregationElement",2);n([r.query("#weighting-column")],exports.LuzmoDisplaySettingsNumeric.prototype,"_aggregationWeightElement",2);n([r.query("#duration-levels")],exports.LuzmoDisplaySettingsNumeric.prototype,"_durationLevelsElement",2);n([r.query("#duration-format")],exports.LuzmoDisplaySettingsNumeric.prototype,"_durationFormatElement",2);n([r.state()],exports.LuzmoDisplaySettingsNumeric.prototype,"_renderDurationLevelMenu",2);exports.LuzmoDisplaySettingsNumeric=n([a.localized()],exports.LuzmoDisplaySettingsNumeric);customElements.get("luzmo-display-settings-numeric")||customElements.define("luzmo-display-settings-numeric",exports.LuzmoDisplaySettingsNumeric);

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

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