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

package/components/filter-value-picker-hierarchy/index.js

@@ -19,34 +19,34 @@
  * */
 import "@luzmo/lucero/select";
 import "@luzmo/lucero/text-field";
-import { unsafeCSS as $, html as y } from "lit";
-import { msg as b, localized as C } from "@lit/localize";
-import { SizedMixin as T, LuzmoElement as E, ElementSizes as I } from "@luzmo/lucero/utils";
-import { d as v } from "../index-CDi4fe3N.js";
-import { l as w } from "../localize-BX7q0S0M.js";
-import { property as z, state as _ } from "lit/decorators.js";
-import { g as H, t as R, s as O } from "../set-locale-Dp3N_gXN.js";
+import { unsafeCSS as x, html as z } from "lit";
+import { msg as f, localized as w } from "@lit/localize";
+import { SizedMixin as S, LuzmoElement as k, ElementSizes as L } from "@luzmo/lucero/utils";
+import { d as v } from "../index-DNPULp4A.js";
+import { l as y } from "../localize-CcDpq940.js";
+import { property as h, state as p } from "lit/decorators.js";
+import { g as V, t as $, s as C } from "../set-locale-hKTMz37h.js";
 (function() {
   if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
     const r = document.createElement("style");
     r.setAttribute("data-luzmo-vars", ""), r.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(r);
   }
 })();
-const D = ".missing-value{opacity:.4}:host{--var: blue}";
-var P = Object.defineProperty, Q = Object.getOwnPropertyDescriptor, m = (e, r, o, s) => {
-  for (var t = s > 1 ? void 0 : s ? Q(r, o) : r, n = e.length - 1, a; n >= 0; n--)
-    (a = e[n]) && (t = (s ? a(r, o, t) : a(t)) || t);
-  return s && t && P(r, o, t), t;
+const T = ".missing-value{opacity:.4}:host{--var: blue}";
+var E = Object.defineProperty, I = Object.getOwnPropertyDescriptor, s = (e, r, t, i) => {
+  for (var o = i > 1 ? void 0 : i ? I(r, t) : r, c = e.length - 1, u; c >= 0; c--)
+    (u = e[c]) && (o = (i ? u(r, t, o) : u(o)) || o);
+  return i && o && E(r, t, o), o;
 };
-const S = 5e3;
-let u = class extends T(E, {
-  validSizes: Object.values(I)
+const _ = 5e3;
+let l = class extends S(k, {
+  validSizes: Object.values(L)
 }) {
   constructor() {
     super(...arguments), this.language = "en", this.contentLanguage = "en", this._hierarchyValues = [], this._retrieving = !0, this._search = "", this._error = null, this._allValuesRetrieved = !1, this._runningQueries = [];
   }
   static get styles() {
-    return [$(D)];
+    return [x(T)];
   }
   connectedCallback() {
     super.connectedCallback();
@@ -54,13 +54,12 @@ let u = class extends T(E, {
     this.apiUrl && (e.apiUrl = this.apiUrl), this.cacheTime && (e.staleTime = this.cacheTime, e.gcTime = this.cacheTime * 2), this.authKey && this.authToken && (e.authKey = this.authKey, e.authToken = this.authToken), v.configure(e);
   }
   willUpdate(e) {
-    var o, s, t, n, a, d, c, f, g, p, i, l, h, x;
-    if (e.has("language") && this.language !== H() && ([...R].includes(this.language ?? "en") || this.language === "en") && O(this.language), e.has("filter") && this.filter) {
-      const k = (o = e.get("filter")) == null ? void 0 : o.expression, L = ((n = (t = (s = e.get("filter")) == null ? void 0 : s.parameters) == null ? void 0 : t[0]) == null ? void 0 : n.columnId) || ((c = (d = (a = e.get("filter")) == null ? void 0 : a.parameters) == null ? void 0 : d[0]) == null ? void 0 : c.formulaId), V = ((p = (g = (f = this.filter) == null ? void 0 : f.parameters) == null ? void 0 : g[0]) == null ? void 0 : p.columnId) || ((h = (l = (i = this.filter) == null ? void 0 : i.parameters) == null ? void 0 : l[0]) == null ? void 0 : h.formulaId);
-      L !== V && (["? in ?", "? not in ?", "? = ?", "? != ?"].includes(
-        (x = this.filter) == null ? void 0 : x.expression
+    if (e.has("language") && this.language !== V() && ([...$].includes(this.language ?? "en") || this.language === "en") && C(this.language), e.has("filter") && this.filter) {
+      const t = e.get("filter")?.expression, i = e.get("filter")?.parameters?.[0]?.columnId || e.get("filter")?.parameters?.[0]?.formulaId, o = this.filter?.parameters?.[0]?.columnId || this.filter?.parameters?.[0]?.formulaId;
+      i !== o && (["? in ?", "? not in ?", "? = ?", "? != ?"].includes(
+        this.filter?.expression
       ) || !["? in ?", "? not in ?", "? = ?", "? != ?"].includes(
-        k
+        t
       )) && (this._hierarchyValues = [], this._allValuesRetrieved = !1, this._retrieving = !0);
     }
   }
@@ -68,76 +67,75 @@ let u = class extends T(E, {
    * Fetches hierarchy values from the databroker
    */
   async _fetchHierarchyValues(e = 0) {
-    var g, p;
     if (this._allValuesRetrieved) {
       this._retrieving = !1;
       return;
     }
-    if (!((p = (g = this.filter) == null ? void 0 : g.parameters) != null && p[0])) {
+    if (!this.filter?.parameters?.[0]) {
       this._retrieving = !1, this._error = "Missing column parameters";
       return;
     }
-    const r = this.filter.parameters[0], o = r.columnId, s = r.formulaId, t = r.datasetId;
-    if (!o && !s) {
+    const r = this.filter.parameters[0], t = r.columnId, i = r.formulaId, o = r.datasetId;
+    if (!t && !i) {
       this._retrieving = !1, this._error = "Missing column id or formula id";
       return;
-    } else if (!t) {
+    } else if (!o) {
       this._retrieving = !1, this._error = "Missing dataset id";
       return;
     }
     this._retrieving = !0, this._error = null;
-    const n = {
+    const c = {
       expression: "? like ?",
       parameters: [
         {
-          column_id: o,
-          formula_id: s,
-          dataset_id: t
+          column_id: t,
+          formula_id: i,
+          dataset_id: o
         },
         this._search
       ]
-    }, a = {
+    }, u = {
       dimensions: [
         {
-          column_id: o,
-          formula_id: s,
-          dataset_id: t
+          column_id: t,
+          formula_id: i,
+          dataset_id: o
         }
       ],
       where: [],
       order: [
         {
-          column_id: o,
-          formula_id: s,
-          dataset_id: t,
+          column_id: t,
+          formula_id: i,
+          dataset_id: o,
           order: "asc"
         }
       ],
       limit: {
-        by: S,
+        by: _,
         offset: e
       }
     };
-    this._search && this._allValuesRetrieved && a.where.push(n);
-    const d = new AbortController(), c = new Promise((i, l) => {
-      v.fetchData(a).then(i).catch(l), d.signal.addEventListener("abort", () => {
-        console.warn("Request aborted"), l({ status: "aborted" });
+    this._search && this._allValuesRetrieved && u.where.push(c);
+    const g = new AbortController(), n = new Promise((a, m) => {
+      v.fetchData(u).then(a).catch(m), g.signal.addEventListener("abort", () => {
+        console.warn("Request aborted"), m({ status: "aborted" });
       });
-    }), f = {
-      promise: c,
-      abortController: d
+    }), d = {
+      promise: n,
+      abortController: g
     };
-    this._runningQueries.push(f);
+    this._runningQueries.push(d);
     try {
-      const i = await c, l = i && Array.isArray(i.data) ? i.data.map((h) => h[0]) : [];
-      this._search || (this._allValuesRetrieved = l.length < S), this._hierarchyValues = e > 0 ? [...this._hierarchyValues, ...l] : l;
-    } catch (i) {
-      if ((i == null ? void 0 : i.status) === "aborted")
+      const a = await n, m = a && Array.isArray(a.data) ? a.data.map((b) => b[0]) : [];
+      this._search || (this._allValuesRetrieved = m.length < _), this._hierarchyValues = e > 0 ? [...this._hierarchyValues, ...m] : m;
+    } catch (a) {
+      if (a?.status === "aborted")
         return;
-      this._error = i instanceof Error ? i.message : "Unknown error", this._hierarchyValues = [];
+      this._error = a instanceof Error ? a.message : "Unknown error", this._hierarchyValues = [];
     } finally {
       this._runningQueries = this._runningQueries.filter(
-        (i) => i.promise !== c
+        (a) => a.promise !== n
       ), this._retrieving = !1;
     }
   }
@@ -154,30 +152,26 @@ let u = class extends T(E, {
     );
   }
   setHierarchy(e) {
-    var o, s, t, n, a, d, c, f;
     let r;
-    ["? in ?", "? not in ?"].includes((o = this.filter) == null ? void 0 : o.expression) ? r = (s = e == null ? void 0 : e.detail) == null ? void 0 : s.value : ["? = ?", "? != ?"].includes((t = this.filter) == null ? void 0 : t.expression) ? r = (a = (n = e == null ? void 0 : e.detail) == null ? void 0 : n.value) == null ? void 0 : a[0] : r = (d = e == null ? void 0 : e.target) == null ? void 0 : d.value, this._value !== r && (this._value = r, this.filter = {
+    ["? in ?", "? not in ?"].includes(this.filter?.expression) ? r = e?.detail?.value : ["? = ?", "? != ?"].includes(this.filter?.expression) ? r = e?.detail?.value?.[0] : r = e?.target?.value, this._value !== r && (this._value = r, this.filter = {
       ...this.filter,
-      parameters: [{ ...(f = (c = this.filter) == null ? void 0 : c.parameters) == null ? void 0 : f[0] }, this._value]
+      parameters: [{ ...this.filter?.parameters?.[0] }, this._value]
     }, this._sendChangeEvent());
   }
   onScrolled(e) {
-    var r;
-    !this._retrieving && !this._allValuesRetrieved && ((r = e == null ? void 0 : e.detail) == null ? void 0 : r.last) === this._hierarchyValues.length - 1 && this._fetchHierarchyValues(this._hierarchyValues.length);
+    !this._retrieving && !this._allValuesRetrieved && e?.detail?.last === this._hierarchyValues.length - 1 && this._fetchHierarchyValues(this._hierarchyValues.length);
   }
   renderTextField() {
-    var e, r;
-    return y`<luzmo-text-field
+    return z`<luzmo-text-field
       .size=${this.size}
       @change=${this.setHierarchy}
       @input=${this.setHierarchy}
-      .value=${((r = (e = this.filter) == null ? void 0 : e.parameters) == null ? void 0 : r[1]) ?? ""}
+      .value=${this.filter?.parameters?.[1] ?? ""}
     ></luzmo-text-field>`;
   }
   setSearchString(e) {
-    var r;
-    this._search = ((r = e == null ? void 0 : e.detail) == null ? void 0 : r.string) ?? "", this._allValuesRetrieved || (this._searchQueryTimeout && (this._runningQueries.forEach((o) => {
-      o != null && o.abortController && o.abortController.abort();
+    this._search = e?.detail?.string ?? "", this._allValuesRetrieved || (this._searchQueryTimeout && (this._runningQueries.forEach((r) => {
+      r?.abortController && r.abortController.abort();
     }), this._runningQueries = [], clearTimeout(this._searchQueryTimeout)), this._searchQueryTimeout = setTimeout(() => {
       this._fetchHierarchyValues();
     }, 500));
@@ -189,88 +183,83 @@ let u = class extends T(E, {
     this._fetchHierarchyValues();
   }
   renderHierarchyPicker() {
-    var c, f, g, p, i;
     if (this._error)
-      return y`<div class="error">Error: ${this._error}</div>`;
-    const e = (this._search ? this._hierarchyValues.filter((l) => {
-      var h;
-      return ((h = w(l.name, this.contentLanguage, { allowEmpty: !0 })) == null ? void 0 : h.toLowerCase().includes(this._search.toLowerCase())) || l.toString().toLowerCase().includes(this._search.toLowerCase());
-    }) : this._hierarchyValues).map((l) => {
-      let h = w(l == null ? void 0 : l.name, this.contentLanguage) ?? "N/A";
-      return typeof h != "string" && (h = "N/A"), {
-        value: l == null ? void 0 : l.id,
-        label: h
+      return z`<div class="error">Error: ${this._error}</div>`;
+    const e = (this._search ? this._hierarchyValues.filter((n) => y(n.name, this.contentLanguage, { allowEmpty: !0 })?.toLowerCase().includes(this._search.toLowerCase()) || n.toString().toLowerCase().includes(this._search.toLowerCase())) : this._hierarchyValues).map((n) => {
+      let d = y(n?.name, this.contentLanguage) ?? "N/A";
+      return typeof d != "string" && (d = "N/A"), {
+        value: n?.id,
+        label: d
       };
-    }), r = (c = this.filter) == null ? void 0 : c.expression, o = ["? = ?", "? != ?"].includes(r), s = b("Selected {count} items"), t = b("Search"), n = b("No data"), a = b("No results"), d = b("Select...");
-    return y`<luzmo-select
+    }), r = this.filter?.expression, t = ["? = ?", "? != ?"].includes(r), i = f("Selected {count} items"), o = f("Search"), c = f("No data"), u = f("No results"), g = f("Select...");
+    return z`<luzmo-select
       .size=${this.size}
-      .label=${d}
+      .label=${g}
       .retrieving=${this._retrieving}
-      .selects=${o ? "single" : "multiple"}
-      .variant=${o ? "highlight" : "checkboxes"}
+      .selects=${t ? "single" : "multiple"}
+      .variant=${t ? "highlight" : "checkboxes"}
       emphasized
       no-wrap
       ?invalid=${!!this._error}
-      .multipleLabelTemplate=${s}
-      .searchLabel=${t}
-      .noDataLabel=${n}
-      .noResultsLabel=${a}
+      .multipleLabelTemplate=${i}
+      .searchLabel=${o}
+      .noDataLabel=${c}
+      .noResultsLabel=${u}
       @change=${this.setHierarchy}
       @luzmo-search=${this.setSearchString}
       @luzmo-opened=${this.onOpened}
       @luzmo-closed=${this.resetSearchString}
       @luzmo-scrolled=${this.onScrolled}
       .options=${e}
-      .value=${o ? [(g = (f = this.filter) == null ? void 0 : f.parameters) == null ? void 0 : g[1]] : (i = (p = this.filter) == null ? void 0 : p.parameters) == null ? void 0 : i[1]}
+      .value=${t ? [this.filter?.parameters?.[1]] : this.filter?.parameters?.[1]}
     >
     </luzmo-select>`;
   }
   render() {
-    var r;
-    const e = (r = this.filter) == null ? void 0 : r.expression;
+    const e = this.filter?.expression;
     return ["? in ?", "? not in ?", "? = ?", "? != ?"].includes(e) ? this.renderHierarchyPicker() : this.renderTextField();
   }
 };
-m([
-  z({ type: String, attribute: "api-url", reflect: !0 })
-], u.prototype, "apiUrl", 2);
-m([
-  z({ type: String, attribute: "auth-key", reflect: !0 })
-], u.prototype, "authKey", 2);
-m([
-  z({ type: String, attribute: "auth-token", reflect: !0 })
-], u.prototype, "authToken", 2);
-m([
-  z({ type: Number, attribute: "cache-time", reflect: !0 })
-], u.prototype, "cacheTime", 2);
-m([
-  z({ type: String, reflect: !0 })
-], u.prototype, "language", 2);
-m([
-  z({ type: String, attribute: "content-language", reflect: !0 })
-], u.prototype, "contentLanguage", 2);
-m([
-  z({ type: Object, reflect: !1 })
-], u.prototype, "filter", 2);
-m([
-  _()
-], u.prototype, "_hierarchyValues", 2);
-m([
-  _()
-], u.prototype, "_retrieving", 2);
-m([
-  _()
-], u.prototype, "_search", 2);
-m([
-  _()
-], u.prototype, "_error", 2);
-u = m([
-  C()
-], u);
+s([
+  h({ type: String, attribute: "api-url", reflect: !0 })
+], l.prototype, "apiUrl", 2);
+s([
+  h({ type: String, attribute: "auth-key", reflect: !0 })
+], l.prototype, "authKey", 2);
+s([
+  h({ type: String, attribute: "auth-token", reflect: !0 })
+], l.prototype, "authToken", 2);
+s([
+  h({ type: Number, attribute: "cache-time", reflect: !0 })
+], l.prototype, "cacheTime", 2);
+s([
+  h({ type: String, reflect: !0 })
+], l.prototype, "language", 2);
+s([
+  h({ type: String, attribute: "content-language", reflect: !0 })
+], l.prototype, "contentLanguage", 2);
+s([
+  h({ type: Object, reflect: !1 })
+], l.prototype, "filter", 2);
+s([
+  p()
+], l.prototype, "_hierarchyValues", 2);
+s([
+  p()
+], l.prototype, "_retrieving", 2);
+s([
+  p()
+], l.prototype, "_search", 2);
+s([
+  p()
+], l.prototype, "_error", 2);
+l = s([
+  w()
+], l);
 customElements.get("luzmo-filter-value-picker-hierarchy") || customElements.define(
   "luzmo-filter-value-picker-hierarchy",
-  u
+  l
 );
 export {
-  u as LuzmoFilterValuePickerHierarchy
+  l as LuzmoFilterValuePickerHierarchy
 };

package/components/filter-value-picker-numeric/filter-value-picker-numeric.d.ts

@@ -0,0 +1,83 @@
+import '@luzmo/lucero/number-field';
+import '@luzmo/lucero/select';
+import { CSSResultArray, PropertyValues, TemplateResult } from 'lit';
+import { LuzmoElement } from '@luzmo/lucero/utils';
+declare const LuzmoFilterValuePickerNumeric_base: typeof LuzmoElement & {
+    new (...args: any[]): import("@luzmo/lucero").SizedElementInterface;
+    prototype: import("@luzmo/lucero").SizedElementInterface;
+};
+/**
+ * @element luzmo-filter-value-picker-numeric
+ */
+export declare class LuzmoFilterValuePickerNumeric extends LuzmoFilterValuePickerNumeric_base {
+    static get styles(): CSSResultArray;
+    /**
+     * The API URL of the databroker
+     * @default https://api.luzmo.com
+     * @description The URL of the databroker API
+     */
+    apiUrl?: string;
+    /**
+     * The auth key of the databroker
+     */
+    authKey?: string;
+    /**
+     * The auth token of the databroker
+     */
+    authToken?: string;
+    /**
+     * The cache time of the databroker
+     * @default 30000
+     * @description The time to cache the data in milliseconds
+     */
+    cacheTime?: number;
+    /**
+     * The language of the settings interface
+     */
+    language: string;
+    /**
+     * The language to use for locale-aware formatting and labels
+     */
+    contentLanguage: string;
+    /**
+     * The filter used to retrieve the value
+     */
+    filter?: any;
+    /**
+     * Stores the hierarchy values fetched from the databroker
+     */
+    private _numericValues;
+    /**
+     * Loading state for hierarchy values
+     */
+    private _retrieving;
+    /**
+     * Search state for hierarchy values
+     */
+    private _search;
+    /**
+     * Error state for hierarchy values fetching
+     */
+    private _error;
+    private _value;
+    private _searchQueryTimeout;
+    private _allValuesRetrieved;
+    private _runningQueries;
+    connectedCallback(): void;
+    protected willUpdate(changedProperties: PropertyValues): void;
+    /**
+     * Fetches numeric values from the databroker
+     */
+    private _fetchNumericValues;
+    private _sendChangeEvent;
+    private setValue;
+    private selectValue;
+    private onScrolled;
+    private renderNumberField;
+    private setSearchString;
+    private resetSearchString;
+    private onOpened;
+    private renderValuePicker;
+    protected render(): TemplateResult;
+}
+export {};

package/components/filter-value-picker-numeric/index.cjs

@@ -0,0 +1,46 @@
+/*! * 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"});require("@luzmo/lucero/number-field");require("@luzmo/lucero/select");const d=require("lit"),h=require("@lit/localize"),f=require("@luzmo/lucero/utils"),b=require("../index-CFL6gmIu.cjs"),g=require("../set-locale-BRRalqne.cjs"),u=require("lit/decorators.js"),L=".missing-value{opacity:.4}:host{--var: blue}";var z=Object.defineProperty,k=Object.getOwnPropertyDescriptor,a=(m,e,t,i)=>{for(var r=i>1?void 0:i?k(e,t):e,s=m.length-1,n;s>=0;s--)(n=m[s])&&(r=(i?n(e,t,r):n(r))||r);return i&&r&&z(e,t,r),r};const y=5e3;exports.LuzmoFilterValuePickerNumeric=class extends f.SizedMixin(f.LuzmoElement,{validSizes:Object.values(f.ElementSizes)}){constructor(){super(...arguments),this.language="en",this.contentLanguage="en",this._numericValues=[],this._retrieving=!0,this._search="",this._error=null,this._allValuesRetrieved=!1,this._runningQueries=[]}static get styles(){return[d.unsafeCSS(L)]}connectedCallback(){super.connectedCallback();const e={};this.apiUrl&&(e.apiUrl=this.apiUrl),this.cacheTime&&(e.staleTime=this.cacheTime,e.gcTime=this.cacheTime*2),this.authKey&&this.authToken&&(e.authKey=this.authKey,e.authToken=this.authToken),b.dataBroker.configure(e)}willUpdate(e){const t=e.has("filter");if(e.has("language")&&this.language!==g.getLocale()&&([...g.targetLocales].includes(this.language??"en")||this.language==="en")&&g.setLocale(this.language),t&&this.filter){const r=e.get("filter")?.expression,s=this.filter?.expression,n=e.get("filter")?.parameters?.[0]?.columnId||e.get("filter")?.parameters?.[0]?.formulaId,o=this.filter?.parameters?.[0]?.columnId||this.filter?.parameters?.[0]?.formulaId;(n!==o||!["? in ?","? not in ?"].includes(r))&&["? in ?","? not in ?"].includes(s)&&(this._numericValues=[],this._allValuesRetrieved=!1,this._retrieving=!0)}}async _fetchNumericValues(e=0){if(this._allValuesRetrieved){this._retrieving=!1;return}if(!this.filter?.parameters?.[0]){this._retrieving=!1,this._error="Missing column parameters";return}const t=this.filter.parameters[0],i=t.columnId,r=t.formulaId,s=t.datasetId;if(!i&&!r){this._retrieving=!1,this._error="Missing column id or formula id";return}else if(!s){this._retrieving=!1,this._error="Missing dataset id";return}this._retrieving=!0,this._error=null;const n={expression:"? like ?",parameters:[{dataset_id:s,expression:`CAST({${s}:${i??r}},hierarchy)`},this._search]},o={dimensions:[{column_id:i,formula_id:r,dataset_id:s}],where:[],order:[{column_id:i,formula_id:r,dataset_id:s,order:"asc"}],limit:{by:y,offset:e}};this._search&&!this._allValuesRetrieved&&o.where.push(n);const _=new AbortController,p=new Promise((l,c)=>{b.dataBroker.fetchData(o).then(l).catch(c),_.signal.addEventListener("abort",()=>{console.warn("Request aborted"),c({status:"aborted"})})}),V={promise:p,abortController:_};this._runningQueries.push(V);try{const l=await p,c=l&&Array.isArray(l.data)?l.data.map(v=>v[0]):[];this._search||(this._allValuesRetrieved=c.length<y),this._numericValues=e>0?[...this._numericValues,...c]:c}catch(l){if(l?.status==="aborted")return;this._error=l instanceof Error?l.message:"Unknown error",this._numericValues=[]}finally{this._runningQueries=this._runningQueries.filter(l=>l.promise!==p),this._retrieving=!1}}_sendChangeEvent(){this.dispatchEvent(new CustomEvent("filter-value-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{value:this._value}}))}setValue(e){const t=["? in ?","? not in ?"].includes(this.filter?.expression)?e?.detail?.value:e?.target?.value;this._value!==t&&(this._value=t,this.filter={...this.filter,parameters:[{...this.filter?.parameters?.[0]},t]},this._sendChangeEvent())}selectValue(e){const i=(e.detail?.value??"").map(r=>Number.parseFloat(r));this.filter={...this.filter,parameters:[{...this.filter?.parameters?.[0]},i]},this._value=i,this._sendChangeEvent()}onScrolled(e){!this._retrieving&&!this._allValuesRetrieved&&e?.detail?.last===this._numericValues.length-1&&this._fetchNumericValues(this._numericValues.length)}renderNumberField(){return d.html`<luzmo-number-field
+      .size=${this.size}
+      @change=${this.setValue}
+      @input=${this.setValue}
+      .value=${this.filter?.parameters?.[1]}
+    ></luzmo-number-field>`}setSearchString(e){this._search=e?.detail?.string??"",this._allValuesRetrieved||(this._searchQueryTimeout&&(this._runningQueries.forEach(t=>{t?.abortController&&t.abortController.abort()}),this._runningQueries=[],clearTimeout(this._searchQueryTimeout)),this._searchQueryTimeout=setTimeout(()=>{this._fetchNumericValues()},500))}resetSearchString(){this._search=""}onOpened(){this._fetchNumericValues()}renderValuePicker(){this._error&&console.error(`Numeric value retrieve error: ${this._error}`);const e=this._numericValues.filter(o=>o.toString().toLowerCase().includes(this._search.toLowerCase())).map(o=>({value:o,label:o})),t=h.msg("Selected {count} items"),i=h.msg("Search"),r=h.msg("No data"),s=h.msg("No results"),n=h.msg("Select...");return d.html`<luzmo-select
+      .size=${this.size}
+      .label=${n}
+      .retrieving=${this._retrieving}
+      selects="multiple"
+      variant="checkboxes"
+      emphasized
+      no-wrap
+      ?invalid=${!!this._error}
+      .multipleLabelTemplate=${t}
+      .searchLabel=${i}
+      .noDataLabel=${r}
+      .noResultsLabel=${s}
+      @change=${this.selectValue}
+      @luzmo-search=${this.setSearchString}
+      @luzmo-opened=${this.onOpened}
+      @luzmo-closed=${this.resetSearchString}
+      @luzmo-scrolled=${this.onScrolled}
+      .options=${e}
+      .value=${this.filter?.parameters?.[1]}
+    >
+    </luzmo-select>`}render(){const e=this.filter?.expression;return["? in ?","? not in ?"].includes(e)?this.renderValuePicker():this.renderNumberField()}};a([u.property({type:String,attribute:"api-url",reflect:!0})],exports.LuzmoFilterValuePickerNumeric.prototype,"apiUrl",2);a([u.property({type:String,attribute:"auth-key",reflect:!0})],exports.LuzmoFilterValuePickerNumeric.prototype,"authKey",2);a([u.property({type:String,attribute:"auth-token",reflect:!0})],exports.LuzmoFilterValuePickerNumeric.prototype,"authToken",2);a([u.property({type:Number,attribute:"cache-time",reflect:!0})],exports.LuzmoFilterValuePickerNumeric.prototype,"cacheTime",2);a([u.property({type:String,reflect:!0})],exports.LuzmoFilterValuePickerNumeric.prototype,"language",2);a([u.property({type:String,attribute:"content-language",reflect:!0})],exports.LuzmoFilterValuePickerNumeric.prototype,"contentLanguage",2);a([u.property({type:Object,reflect:!1})],exports.LuzmoFilterValuePickerNumeric.prototype,"filter",2);a([u.state()],exports.LuzmoFilterValuePickerNumeric.prototype,"_numericValues",2);a([u.state()],exports.LuzmoFilterValuePickerNumeric.prototype,"_retrieving",2);a([u.state()],exports.LuzmoFilterValuePickerNumeric.prototype,"_search",2);a([u.state()],exports.LuzmoFilterValuePickerNumeric.prototype,"_error",2);exports.LuzmoFilterValuePickerNumeric=a([h.localized()],exports.LuzmoFilterValuePickerNumeric);customElements.get("luzmo-filter-value-picker-numeric")||customElements.define("luzmo-filter-value-picker-numeric",exports.LuzmoFilterValuePickerNumeric);

package/components/filter-value-picker-numeric/index.d.ts

@@ -0,0 +1,7 @@
+import { LuzmoFilterValuePickerNumeric } from './filter-value-picker-numeric';
+declare global {
+    interface HTMLElementTagNameMap {
+        'luzmo-filter-value-picker-numeric': LuzmoFilterValuePickerNumeric;
+    }
+}
+export { LuzmoFilterValuePickerNumeric } from './filter-value-picker-numeric';