@luzmo/analytics-components-kit 1.0.1-alpha.30 → 1.0.1-alpha.32

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

@@ -0,0 +1,82 @@
+import '@luzmo/lucero/select';
+import '@luzmo/lucero/text-field';
+import { CSSResultArray, PropertyValues, TemplateResult } from 'lit';
+import { LuzmoElement } from '@luzmo/lucero/utils';
+declare const LuzmoFilterValuePickerHierarchy_base: typeof LuzmoElement & {
+    new (...args: any[]): import("@luzmo/lucero").SizedElementInterface;
+    prototype: import("@luzmo/lucero").SizedElementInterface;
+};
+/**
+ * @element luzmo-filter-value-picker-hierarchy
+ */
+export declare class LuzmoFilterValuePickerHierarchy extends LuzmoFilterValuePickerHierarchy_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 _hierarchyValues;
+    /**
+     * 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 hierarchy values from the databroker
+     */
+    private _fetchHierarchyValues;
+    private _sendChangeEvent;
+    private setHierarchy;
+    private onScrolled;
+    private renderTextField;
+    private setSearchString;
+    private resetSearchString;
+    private onOpened;
+    private renderHierarchyPicker;
+    protected render(): TemplateResult;
+}
+export {};

package/components/filter-value-picker-hierarchy/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("../index-CTHlwZ9E.cjs");require("../index-CSm0I7Gz.cjs");const u=require("../property-Dlf9S6Jz.cjs"),_=require("../set-locale-5FFfQpVQ.cjs"),$=require("../localized-decorator-ClAOFk8M.cjs"),L=require("../base-D76d76ww-tT6yr8eb.cjs");require("../focusable-BxtpnzWp-CkK9AeMt.cjs");const z=require("../index-TQG9Xdxu.cjs"),k=require("../localize-r7ALOUy_.cjs"),y=require("../state-CrfOw8Zp.cjs"),T=".missing-value{opacity:.4}:host{--var: blue}";var x=Object.defineProperty,F=Object.getOwnPropertyDescriptor,h=(b,e,r,t)=>{for(var i=t>1?void 0:t?F(e,r):e,l=b.length-1,n;l>=0;l--)(n=b[l])&&(i=(t?n(e,r,i):n(i))||i);return t&&i&&x(e,r,i),i};const H=5e3;exports.LuzmoFilterValuePickerHierarchy=class extends L.m(L.It,{validSizes:Object.values(L.d$1)}){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[u.r(T)]}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),z.dataBroker.configure(e)}willUpdate(e){var t,i,l,n,m,d,o,f,g,p,s,a,c,V;if(e.has("language")&&this.language!==_.getLocale()&&([..._.targetLocales].includes(this.language??"en")||this.language==="en")&&_.setLocale(this.language),e.has("filter")&&this.filter){const v=(t=e.get("filter"))==null?void 0:t.expression,P=((n=(l=(i=e.get("filter"))==null?void 0:i.parameters)==null?void 0:l[0])==null?void 0:n.columnId)||((o=(d=(m=e.get("filter"))==null?void 0:m.parameters)==null?void 0:d[0])==null?void 0:o.formulaId),S=((p=(g=(f=this.filter)==null?void 0:f.parameters)==null?void 0:g[0])==null?void 0:p.columnId)||((c=(a=(s=this.filter)==null?void 0:s.parameters)==null?void 0:a[0])==null?void 0:c.formulaId);P!==S&&(["? in ?","? not in ?","? = ?","? != ?"].includes((V=this.filter)==null?void 0:V.expression)||!["? in ?","? not in ?","? = ?","? != ?"].includes(v))&&(this._hierarchyValues=[],this._allValuesRetrieved=!1,this._retrieving=!0)}}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])){this._retrieving=!1,this._error="Missing column parameters";return}const r=this.filter.parameters[0],t=r.columnId,i=r.formulaId,l=r.datasetId;if(!t&&!i){this._retrieving=!1,this._error="Missing column id or formula id";return}else if(!l){this._retrieving=!1,this._error="Missing dataset id";return}this._retrieving=!0,this._error=null;const n={expression:"? like ?",parameters:[{column_id:t,formula_id:i,dataset_id:l},this._search]},m={dimensions:[{column_id:t,formula_id:i,dataset_id:l}],where:[],order:[{column_id:t,formula_id:i,dataset_id:l,order:"asc"}],limit:{by:H,offset:e}};this._search&&this._allValuesRetrieved&&m.where.push(n);const d=new AbortController,o=new Promise((s,a)=>{z.dataBroker.fetchData(m).then(s).catch(a),d.signal.addEventListener("abort",()=>{console.warn("Request aborted"),a({status:"aborted"})})}),f={promise:o,abortController:d};this._runningQueries.push(f);try{const s=await o,a=s&&Array.isArray(s.data)?s.data.map(c=>c[0]):[];this._search||(this._allValuesRetrieved=a.length<H),this._hierarchyValues=e>0?[...this._hierarchyValues,...a]:a}catch(s){if((s==null?void 0:s.status)==="aborted")return;this._error=s instanceof Error?s.message:"Unknown error",this._hierarchyValues=[]}finally{this._runningQueries=this._runningQueries.filter(s=>s.promise!==o),this._retrieving=!1}}_sendChangeEvent(){this.dispatchEvent(new CustomEvent("filter-value-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{value:this._value}}))}setHierarchy(e){var t,i,l,n,m,d,o,f;let r;["? in ?","? not in ?"].includes((t=this.filter)==null?void 0:t.expression)?r=(i=e==null?void 0:e.detail)==null?void 0:i.value:["? = ?","? != ?"].includes((l=this.filter)==null?void 0:l.expression)?r=(m=(n=e==null?void 0:e.detail)==null?void 0:n.value)==null?void 0:m[0]:r=(d=e==null?void 0:e.target)==null?void 0:d.value,this._value!==r&&(this._value=r,this.filter={...this.filter,parameters:[{...(f=(o=this.filter)==null?void 0:o.parameters)==null?void 0:f[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)}renderTextField(){var e,r;return u.x`<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])??""}
+    ></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(t=>{t!=null&&t.abortController&&t.abortController.abort()}),this._runningQueries=[],clearTimeout(this._searchQueryTimeout)),this._searchQueryTimeout=setTimeout(()=>{this._fetchHierarchyValues()},500))}resetSearchString(){this._search=""}onOpened(){this._fetchHierarchyValues()}renderHierarchyPicker(){var o,f,g,p,s;if(this._error)return u.x`<div class="error">Error: ${this._error}</div>`;const e=(this._search?this._hierarchyValues.filter(a=>{var c;return((c=k.localize(a.name,this.contentLanguage,{allowEmpty:!0}))==null?void 0:c.toLowerCase().includes(this._search.toLowerCase()))||a.toString().toLowerCase().includes(this._search.toLowerCase())}):this._hierarchyValues).map(a=>{let c=k.localize(a==null?void 0:a.name,this.contentLanguage)??"N/A";return typeof c!="string"&&(c="N/A"),{value:a==null?void 0:a.id,label:c}}),r=(o=this.filter)==null?void 0:o.expression,t=["? = ?","? != ?"].includes(r),i=_.msg("Selected {count} items"),l=_.msg("Search"),n=_.msg("No data"),m=_.msg("No results"),d=_.msg("Select...");return u.x`<luzmo-select
+      .size=${this.size}
+      .label=${d}
+      .retrieving=${this._retrieving}
+      .selects=${t?"single":"multiple"}
+      .variant=${t?"highlight":"checkboxes"}
+      emphasized
+      no-wrap
+      ?invalid=${!!this._error}
+      .multipleLabelTemplate=${i}
+      .searchLabel=${l}
+      .noDataLabel=${n}
+      .noResultsLabel=${m}
+      @change=${this.setHierarchy}
+      @luzmo-search=${this.setSearchString}
+      @luzmo-opened=${this.onOpened}
+      @luzmo-closed=${this.resetSearchString}
+      @luzmo-scrolled=${this.onScrolled}
+      .options=${e}
+      .value=${t?[(g=(f=this.filter)==null?void 0:f.parameters)==null?void 0:g[1]]:(s=(p=this.filter)==null?void 0:p.parameters)==null?void 0:s[1]}
+    >
+    </luzmo-select>`}render(){var r;const e=(r=this.filter)==null?void 0:r.expression;return["? in ?","? not in ?","? = ?","? != ?"].includes(e)?this.renderHierarchyPicker():this.renderTextField()}};h([u.n({type:String,attribute:"api-url",reflect:!0})],exports.LuzmoFilterValuePickerHierarchy.prototype,"apiUrl",2);h([u.n({type:String,attribute:"auth-key",reflect:!0})],exports.LuzmoFilterValuePickerHierarchy.prototype,"authKey",2);h([u.n({type:String,attribute:"auth-token",reflect:!0})],exports.LuzmoFilterValuePickerHierarchy.prototype,"authToken",2);h([u.n({type:Number,attribute:"cache-time",reflect:!0})],exports.LuzmoFilterValuePickerHierarchy.prototype,"cacheTime",2);h([u.n({type:String,reflect:!0})],exports.LuzmoFilterValuePickerHierarchy.prototype,"language",2);h([u.n({type:String,attribute:"content-language",reflect:!0})],exports.LuzmoFilterValuePickerHierarchy.prototype,"contentLanguage",2);h([u.n({type:Object,reflect:!1})],exports.LuzmoFilterValuePickerHierarchy.prototype,"filter",2);h([y.r()],exports.LuzmoFilterValuePickerHierarchy.prototype,"_hierarchyValues",2);h([y.r()],exports.LuzmoFilterValuePickerHierarchy.prototype,"_retrieving",2);h([y.r()],exports.LuzmoFilterValuePickerHierarchy.prototype,"_search",2);h([y.r()],exports.LuzmoFilterValuePickerHierarchy.prototype,"_error",2);exports.LuzmoFilterValuePickerHierarchy=h([$.localized()],exports.LuzmoFilterValuePickerHierarchy);customElements.get("luzmo-filter-value-picker-hierarchy")||customElements.define("luzmo-filter-value-picker-hierarchy",exports.LuzmoFilterValuePickerHierarchy);

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

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

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

@@ -0,0 +1,278 @@
+/*! * 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.
+ * */
+import "../index-CyWwLYEO.js";
+import "../index-BbuNpVBr.js";
+import { r as T, x as y, n as z } from "../property-CxtZroGf.js";
+import { g as C, t as I, s as E, m as b } from "../set-locale-DAGnJZD8.js";
+import { l as H } from "../localized-decorator-DGnMToFa.js";
+import { m as R, b as O, I as D } from "../base-D76d76ww-BGkuhs54.js";
+import "../focusable-BxtpnzWp-DJQkL8Zv.js";
+import { d as v } from "../index-D9yzIoGv.js";
+import { l as w } from "../localize-BX7q0S0M.js";
+import { r as _ } from "../state-BVYsk_HZ.js";
+const $ = () => {
+  if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
+    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-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);
+  }
+};
+$();
+const P = ".missing-value{opacity:.4}:host{--var: blue}";
+var Q = Object.defineProperty, U = Object.getOwnPropertyDescriptor, m = (e, r, o, s) => {
+  for (var t = s > 1 ? void 0 : s ? U(r, o) : r, u = e.length - 1, a; u >= 0; u--)
+    (a = e[u]) && (t = (s ? a(r, o, t) : a(t)) || t);
+  return s && t && Q(r, o, t), t;
+};
+const S = 5e3;
+let n = class extends R(D, {
+  validSizes: Object.values(O)
+}) {
+  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 [T(P)];
+  }
+  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), v.configure(e);
+  }
+  willUpdate(e) {
+    var o, s, t, u, a, d, c, f, g, p, i, l, h, x;
+    if (e.has("language") && this.language !== C() && ([...I].includes(this.language ?? "en") || this.language === "en") && E(this.language), e.has("filter") && this.filter) {
+      const L = (o = e.get("filter")) == null ? void 0 : o.expression, k = ((u = (t = (s = e.get("filter")) == null ? void 0 : s.parameters) == null ? void 0 : t[0]) == null ? void 0 : u.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);
+      k !== V && (["? in ?", "? not in ?", "? = ?", "? != ?"].includes(
+        (x = this.filter) == null ? void 0 : x.expression
+      ) || !["? in ?", "? not in ?", "? = ?", "? != ?"].includes(
+        L
+      )) && (this._hierarchyValues = [], this._allValuesRetrieved = !1, this._retrieving = !0);
+    }
+  }
+  /**
+   * 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])) {
+      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) {
+      this._retrieving = !1, this._error = "Missing column id or formula id";
+      return;
+    } else if (!t) {
+      this._retrieving = !1, this._error = "Missing dataset id";
+      return;
+    }
+    this._retrieving = !0, this._error = null;
+    const u = {
+      expression: "? like ?",
+      parameters: [
+        {
+          column_id: o,
+          formula_id: s,
+          dataset_id: t
+        },
+        this._search
+      ]
+    }, a = {
+      dimensions: [
+        {
+          column_id: o,
+          formula_id: s,
+          dataset_id: t
+        }
+      ],
+      where: [],
+      order: [
+        {
+          column_id: o,
+          formula_id: s,
+          dataset_id: t,
+          order: "asc"
+        }
+      ],
+      limit: {
+        by: S,
+        offset: e
+      }
+    };
+    this._search && this._allValuesRetrieved && a.where.push(u);
+    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" });
+      });
+    }), f = {
+      promise: c,
+      abortController: d
+    };
+    this._runningQueries.push(f);
+    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")
+        return;
+      this._error = i instanceof Error ? i.message : "Unknown error", this._hierarchyValues = [];
+    } finally {
+      this._runningQueries = this._runningQueries.filter(
+        (i) => i.promise !== c
+      ), this._retrieving = !1;
+    }
+  }
+  _sendChangeEvent() {
+    this.dispatchEvent(
+      new CustomEvent("filter-value-changed", {
+        bubbles: !0,
+        composed: !0,
+        cancelable: !0,
+        detail: {
+          value: this._value
+        }
+      })
+    );
+  }
+  setHierarchy(e) {
+    var o, s, t, u, 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 = (u = e == null ? void 0 : e.detail) == null ? void 0 : u.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 = {
+      ...this.filter,
+      parameters: [{ ...(f = (c = this.filter) == null ? void 0 : c.parameters) == null ? void 0 : f[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);
+  }
+  renderTextField() {
+    var e, r;
+    return y`<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]) ?? ""}
+    ></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._runningQueries = [], clearTimeout(this._searchQueryTimeout)), this._searchQueryTimeout = setTimeout(() => {
+      this._fetchHierarchyValues();
+    }, 500));
+  }
+  resetSearchString() {
+    this._search = "";
+  }
+  onOpened() {
+    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
+      };
+    }), r = (c = this.filter) == null ? void 0 : c.expression, o = ["? = ?", "? != ?"].includes(r), s = b("Selected {count} items"), t = b("Search"), u = b("No data"), a = b("No results"), d = b("Select...");
+    return y`<luzmo-select
+      .size=${this.size}
+      .label=${d}
+      .retrieving=${this._retrieving}
+      .selects=${o ? "single" : "multiple"}
+      .variant=${o ? "highlight" : "checkboxes"}
+      emphasized
+      no-wrap
+      ?invalid=${!!this._error}
+      .multipleLabelTemplate=${s}
+      .searchLabel=${t}
+      .noDataLabel=${u}
+      .noResultsLabel=${a}
+      @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]}
+    >
+    </luzmo-select>`;
+  }
+  render() {
+    var r;
+    const e = (r = this.filter) == null ? void 0 : r.expression;
+    return ["? in ?", "? not in ?", "? = ?", "? != ?"].includes(e) ? this.renderHierarchyPicker() : this.renderTextField();
+  }
+};
+m([
+  z({ type: String, attribute: "api-url", reflect: !0 })
+], n.prototype, "apiUrl", 2);
+m([
+  z({ type: String, attribute: "auth-key", reflect: !0 })
+], n.prototype, "authKey", 2);
+m([
+  z({ type: String, attribute: "auth-token", reflect: !0 })
+], n.prototype, "authToken", 2);
+m([
+  z({ type: Number, attribute: "cache-time", reflect: !0 })
+], n.prototype, "cacheTime", 2);
+m([
+  z({ type: String, reflect: !0 })
+], n.prototype, "language", 2);
+m([
+  z({ type: String, attribute: "content-language", reflect: !0 })
+], n.prototype, "contentLanguage", 2);
+m([
+  z({ type: Object, reflect: !1 })
+], n.prototype, "filter", 2);
+m([
+  _()
+], n.prototype, "_hierarchyValues", 2);
+m([
+  _()
+], n.prototype, "_retrieving", 2);
+m([
+  _()
+], n.prototype, "_search", 2);
+m([
+  _()
+], n.prototype, "_error", 2);
+n = m([
+  H()
+], n);
+customElements.get("luzmo-filter-value-picker-hierarchy") || customElements.define(
+  "luzmo-filter-value-picker-hierarchy",
+  n
+);
+export {
+  n 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("../index-CBOAQ3-E.cjs");require("../index-CTHlwZ9E.cjs");const c=require("../property-Dlf9S6Jz.cjs"),d=require("../set-locale-5FFfQpVQ.cjs"),F=require("../localized-decorator-ClAOFk8M.cjs"),v=require("../base-D76d76ww-tT6yr8eb.cjs");require("../focusable-BxtpnzWp-CkK9AeMt.cjs");const z=require("../index-TQG9Xdxu.cjs"),b=require("../state-CrfOw8Zp.cjs"),T=".missing-value{opacity:.4}:host{--var: blue}";var I=Object.defineProperty,w=Object.getOwnPropertyDescriptor,n=(V,e,t,r)=>{for(var i=r>1?void 0:r?w(e,t):e,s=V.length-1,a;s>=0;s--)(a=V[s])&&(i=(r?a(e,t,i):a(i))||i);return r&&i&&I(e,t,i),i};const k=5e3;exports.LuzmoFilterValuePickerNumeric=class extends v.m(v.It,{validSizes:Object.values(v.d$1)}){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[c.r(T)]}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),z.dataBroker.configure(e)}willUpdate(e){var i,s,a,u,m,o,_,p,f,l,h,g,L,y;const t=e.has("filter");if(e.has("language")&&this.language!==d.getLocale()&&([...d.targetLocales].includes(this.language??"en")||this.language==="en")&&d.setLocale(this.language),t&&this.filter){const N=(i=e.get("filter"))==null?void 0:i.expression,S=(s=this.filter)==null?void 0:s.expression,P=((m=(u=(a=e.get("filter"))==null?void 0:a.parameters)==null?void 0:u[0])==null?void 0:m.columnId)||((p=(_=(o=e.get("filter"))==null?void 0:o.parameters)==null?void 0:_[0])==null?void 0:p.formulaId),$=((h=(l=(f=this.filter)==null?void 0:f.parameters)==null?void 0:l[0])==null?void 0:h.columnId)||((y=(L=(g=this.filter)==null?void 0:g.parameters)==null?void 0:L[0])==null?void 0:y.formulaId);(P!==$||!["? in ?","? not in ?"].includes(N))&&["? in ?","? not in ?"].includes(S)&&(this._numericValues=[],this._allValuesRetrieved=!1,this._retrieving=!0)}}async _fetchNumericValues(e=0){var p,f;if(this._allValuesRetrieved){this._retrieving=!1;return}if(!((f=(p=this.filter)==null?void 0:p.parameters)!=null&&f[0])){this._retrieving=!1,this._error="Missing column parameters";return}const t=this.filter.parameters[0],r=t.columnId,i=t.formulaId,s=t.datasetId;if(!r&&!i){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 a={expression:"? like ?",parameters:[{dataset_id:s,expression:`CAST({${s}:${r??i}},hierarchy)`},this._search]},u={dimensions:[{column_id:r,formula_id:i,dataset_id:s}],where:[],order:[{column_id:r,formula_id:i,dataset_id:s,order:"asc"}],limit:{by:k,offset:e}};this._search&&!this._allValuesRetrieved&&u.where.push(a);const m=new AbortController,o=new Promise((l,h)=>{z.dataBroker.fetchData(u).then(l).catch(h),m.signal.addEventListener("abort",()=>{console.warn("Request aborted"),h({status:"aborted"})})}),_={promise:o,abortController:m};this._runningQueries.push(_);try{const l=await o,h=l&&Array.isArray(l.data)?l.data.map(g=>g[0]):[];this._search||(this._allValuesRetrieved=h.length<k),this._numericValues=e>0?[...this._numericValues,...h]:h}catch(l){if((l==null?void 0:l.status)==="aborted")return;this._error=l instanceof Error?l.message:"Unknown error",this._numericValues=[]}finally{this._runningQueries=this._runningQueries.filter(l=>l.promise!==o),this._retrieving=!1}}_sendChangeEvent(){this.dispatchEvent(new CustomEvent("filter-value-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{value:this._value}}))}setValue(e){var r,i,s,a,u;const t=["? in ?","? not in ?"].includes((r=this.filter)==null?void 0:r.expression)?(i=e==null?void 0:e.detail)==null?void 0:i.value:(s=e==null?void 0:e.target)==null?void 0:s.value;this._value!==t&&(this._value=t,this.filter={...this.filter,parameters:[{...(u=(a=this.filter)==null?void 0:a.parameters)==null?void 0:u[0]},t]},this._sendChangeEvent())}selectValue(e){var i,s,a;const r=(((i=e.detail)==null?void 0:i.value)??"").map(u=>Number.parseFloat(u));this.filter={...this.filter,parameters:[{...(a=(s=this.filter)==null?void 0:s.parameters)==null?void 0:a[0]},r]},this._value=r,this._sendChangeEvent()}onScrolled(e){var t;!this._retrieving&&!this._allValuesRetrieved&&((t=e==null?void 0:e.detail)==null?void 0:t.last)===this._numericValues.length-1&&this._fetchNumericValues(this._numericValues.length)}renderNumberField(){var e,t;return c.x`<luzmo-number-field
+      .size=${this.size}
+      @change=${this.setValue}
+      @input=${this.setValue}
+      .value=${(t=(e=this.filter)==null?void 0:e.parameters)==null?void 0:t[1]}
+    ></luzmo-number-field>`}setSearchString(e){var t;this._search=((t=e==null?void 0:e.detail)==null?void 0:t.string)??"",this._allValuesRetrieved||(this._searchQueryTimeout&&(this._runningQueries.forEach(r=>{r!=null&&r.abortController&&r.abortController.abort()}),this._runningQueries=[],clearTimeout(this._searchQueryTimeout)),this._searchQueryTimeout=setTimeout(()=>{this._fetchNumericValues()},500))}resetSearchString(){this._search=""}onOpened(){this._fetchNumericValues()}renderValuePicker(){var u,m;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=d.msg("Selected {count} items"),r=d.msg("Search"),i=d.msg("No data"),s=d.msg("No results"),a=d.msg("Select...");return c.x`<luzmo-select
+      .size=${this.size}
+      .label=${a}
+      .retrieving=${this._retrieving}
+      selects="multiple"
+      variant="checkboxes"
+      emphasized
+      no-wrap
+      ?invalid=${!!this._error}
+      .multipleLabelTemplate=${t}
+      .searchLabel=${r}
+      .noDataLabel=${i}
+      .noResultsLabel=${s}
+      @change=${this.selectValue}
+      @luzmo-search=${this.setSearchString}
+      @luzmo-opened=${this.onOpened}
+      @luzmo-closed=${this.resetSearchString}
+      @luzmo-scrolled=${this.onScrolled}
+      .options=${e}
+      .value=${(m=(u=this.filter)==null?void 0:u.parameters)==null?void 0:m[1]}
+    >
+    </luzmo-select>`}render(){var t;const e=(t=this.filter)==null?void 0:t.expression;return["? in ?","? not in ?"].includes(e)?this.renderValuePicker():this.renderNumberField()}};n([c.n({type:String,attribute:"api-url",reflect:!0})],exports.LuzmoFilterValuePickerNumeric.prototype,"apiUrl",2);n([c.n({type:String,attribute:"auth-key",reflect:!0})],exports.LuzmoFilterValuePickerNumeric.prototype,"authKey",2);n([c.n({type:String,attribute:"auth-token",reflect:!0})],exports.LuzmoFilterValuePickerNumeric.prototype,"authToken",2);n([c.n({type:Number,attribute:"cache-time",reflect:!0})],exports.LuzmoFilterValuePickerNumeric.prototype,"cacheTime",2);n([c.n({type:String,reflect:!0})],exports.LuzmoFilterValuePickerNumeric.prototype,"language",2);n([c.n({type:String,attribute:"content-language",reflect:!0})],exports.LuzmoFilterValuePickerNumeric.prototype,"contentLanguage",2);n([c.n({type:Object,reflect:!1})],exports.LuzmoFilterValuePickerNumeric.prototype,"filter",2);n([b.r()],exports.LuzmoFilterValuePickerNumeric.prototype,"_numericValues",2);n([b.r()],exports.LuzmoFilterValuePickerNumeric.prototype,"_retrieving",2);n([b.r()],exports.LuzmoFilterValuePickerNumeric.prototype,"_search",2);n([b.r()],exports.LuzmoFilterValuePickerNumeric.prototype,"_error",2);exports.LuzmoFilterValuePickerNumeric=n([F.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';