@luzmo/analytics-components-kit 1.0.8 → 1.0.9-beta.2

package/components/filter-parameter-picker-CB3uIoZ2.js

@@ -0,0 +1,372 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2026 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 "./tokens-Ov1pCR4Y.js";
+import { t as e } from "./decorate-DyMgX_Uh.js";
+import { t } from "./localized-mixin-DaLXe5J9.js";
+import { t as n } from "./calculate-data-field-icon-DrSg1PuD.js";
+import { luzmoFormula as r } from "@luzmo/icons";
+import "@luzmo/lucero/button";
+import "@luzmo/lucero/icon";
+import "@luzmo/lucero/overlay";
+import "@luzmo/lucero/popover";
+import { html as i, nothing as a, unsafeCSS as o } from "lit";
+import { property as s, query as c, state as l } from "lit/decorators.js";
+import { localized as u, msg as d } from "@lit/localize";
+import "@luzmo/lucero/action-button";
+import "@luzmo/lucero/tags";
+import "@luzmo/lucero/tooltip";
+import "@luzmo/lucero/divider";
+import "@luzmo/lucero/text-field";
+import { ElementSizes as f, LuzmoElement as p, SizedMixin as m } from "@luzmo/lucero/utils";
+import "@luzmo/lucero/options";
+//#region src/components/filter-parameter-picker/filter-parameter-picker.helpers.ts
+var h = /* @__PURE__ */ new Set([
+	"? is null",
+	"? is not null",
+	"? between ?",
+	"YTD",
+	"QTD",
+	"MTD",
+	"WTD",
+	"to_date",
+	"last_available",
+	"last_completed",
+	"last_now",
+	"more_than_ago",
+	"or_more_ago",
+	"next_now",
+	"next_full"
+]), g = /* @__PURE__ */ new Set([
+	"? length = ?",
+	"? length >= ?",
+	"? length <= ?"
+]), _ = /* @__PURE__ */ new Set([
+	"? in ?",
+	"? not in ?",
+	"? includes all ?",
+	"? includes any ?",
+	"? includes only ?"
+]);
+function v(e, t) {
+	return !e || e === "spatial" || !t || h.has(t) ? [] : g.has(t) ? ["numeric"] : e === "numeric" || e === "array[numeric]" ? _.has(t) ? ["array[numeric]"] : ["numeric"] : e === "datetime" || e === "array[datetime]" ? _.has(t) ? ["array[datetime]", "datetime"] : ["datetime", "array[datetime]"] : e === "hierarchy" || e === "array[hierarchy]" ? _.has(t) ? ["array[hierarchy]"] : ["hierarchy"] : [];
+}
+var y = {
+	numeric: () => d("Numeric", {
+		id: "filter-parameter-type-numeric",
+		desc: "Numeric filter parameter type"
+	}),
+	datetime: () => d("Datetime", {
+		id: "filter-parameter-type-datetime",
+		desc: "Datetime filter parameter type"
+	}),
+	hierarchy: () => d("Hierarchy", {
+		id: "filter-parameter-type-hierarchy",
+		desc: "Hierarchy filter parameter type"
+	}),
+	"array[numeric]": () => d("Numeric[]", {
+		id: "filter-parameter-type-numeric-list",
+		desc: "List of numeric values filter parameter type"
+	}),
+	"array[datetime]": () => d("Datetime[]", {
+		id: "filter-parameter-type-datetime-list",
+		desc: "List of datetime values filter parameter type"
+	}),
+	"array[hierarchy]": () => d("Hierarchy[]", {
+		id: "filter-parameter-type-hierarchy-list",
+		desc: "List of hierarchy values filter parameter type"
+	})
+};
+function b(e) {
+	return y[e]?.() ?? e;
+}
+function x(e) {
+	if (!e || typeof e != "object" || Array.isArray(e)) return !1;
+	let t = e;
+	return typeof t.parameter == "string" && typeof t.type == "string" && "value" in t;
+}
+function S(e) {
+	return `metadata.${e.trim().replace(/^metadata\./i, "")}`;
+}
+function C(e, t, n) {
+	let r;
+	if (t.startsWith("array[")) r = Array.isArray(n) ? structuredClone(n) : [];
+	else if (t === "numeric") r = typeof n == "number" && Number.isFinite(n) ? n : 0;
+	else if (t === "datetime") {
+		let e = n instanceof Date ? n : new Date(typeof n == "string" ? n : Date.now());
+		r = Number.isNaN(e.getTime()) ? (/* @__PURE__ */ new Date()).toISOString() : e.toISOString();
+	} else r = typeof n == "string" ? n : "";
+	return {
+		parameter: S(e),
+		type: t,
+		value: r
+	};
+}
+function w(e, t) {
+	if (!t || t === "? is null" || t === "? is not null") return;
+	let [n] = v(e, t);
+	if (n?.startsWith("array[")) return [];
+	if (n === "numeric") return 0;
+	if (n === "datetime") return (/* @__PURE__ */ new Date()).toISOString();
+	if (n === "hierarchy") return "";
+}
+//#endregion
+//#region src/components/filter-parameter-picker/filter-parameter-picker.module.scss?inline
+var T = ":host{min-width:0;max-width:100%;color:var(--luzmo-font-color);font-family:var(--luzmo-font-family);font-size:var(--luzmo-font-size);align-items:center;display:inline-flex;position:relative}.parameter-control{align-items:center;gap:var(--filter-parameter-picker-gap);min-width:0;max-width:100%;display:flex}.create-row{align-items:center;gap:var(--filter-parameter-picker-panel-gap);display:flex}.parameter-trigger,.create-parameter{flex:none}.parameter-trigger{font-weight:var(--luzmo-font-weight-bold)}.selected-parameter-tags{--luzmo-tag-group-item-margin-block:0;min-width:0;max-width:100%}.selected-parameter{--luzmo-tag-max-inline-size:min(180px, 100%);min-width:0;max-width:100%}.parameter-panel{min-inline-size:var(--filter-parameter-picker-panel-min-width);padding:var(--filter-parameter-picker-panel-padding);display:block}.parameter-name-input{--luzmo-text-field-width:100%;flex:1;min-inline-size:0}.panel-content{gap:var(--filter-parameter-picker-panel-gap);flex-direction:column;display:flex}.validation-message{color:var(--filter-parameter-picker-error-color);font-size:var(--luzmo-font-size-s)}.parameter-options{max-block-size:var(--filter-parameter-picker-options-max-height);overflow-y:auto}.parameter-type-footer{gap:var(--filter-parameter-picker-panel-gap);flex-direction:column;display:flex}.parameter-type{justify-content:flex-end;align-items:center;gap:var(--luzmo-spacing-1);font-size:var(--filter-parameter-picker-type-font-size);font-weight:var(--luzmo-font-weight);display:flex}.parameter-type-icon{justify-content:center;align-items:center;min-block-size:24px;min-inline-size:24px;display:inline-flex}:host{--filter-parameter-picker-gap:var(--luzmo-spacing-2);--filter-parameter-picker-control-size:var(--luzmo-component-height);--filter-parameter-picker-panel-min-width:220px;--filter-parameter-picker-options-max-height:240px;--filter-parameter-picker-panel-padding:var(--luzmo-spacing-3);--filter-parameter-picker-panel-gap:var(--luzmo-spacing-3);--filter-parameter-picker-type-font-size:var(--luzmo-font-size-s);--filter-parameter-picker-panel-background:var(--luzmo-background-color);--filter-parameter-picker-panel-border:var(--luzmo-border-color);--filter-parameter-picker-error-color:var(--luzmo-negative-color)}:host([size=xxs]),:host([size=xs]){--filter-parameter-picker-panel-padding:var(--luzmo-spacing-2);--filter-parameter-picker-panel-gap:var(--luzmo-spacing-2);--filter-parameter-picker-type-font-size:var(--luzmo-font-size-xs)}:host([size=s]){--filter-parameter-picker-panel-padding:var(--luzmo-spacing-3);--filter-parameter-picker-panel-gap:var(--luzmo-spacing-3);--filter-parameter-picker-type-font-size:var(--luzmo-font-size-xs)}:host([size=l]){--filter-parameter-picker-panel-padding:var(--luzmo-spacing-4);--filter-parameter-picker-panel-gap:var(--luzmo-spacing-4);--filter-parameter-picker-type-font-size:var(--luzmo-font-size-m)}:host([size=xl]){--filter-parameter-picker-panel-padding:var(--luzmo-spacing-4);--filter-parameter-picker-panel-gap:var(--luzmo-spacing-4);--filter-parameter-picker-type-font-size:var(--luzmo-font-size-l)}:host([size=xxl]){--filter-parameter-picker-panel-padding:var(--luzmo-spacing-5);--filter-parameter-picker-panel-gap:var(--luzmo-spacing-5);--filter-parameter-picker-type-font-size:var(--luzmo-font-size-xl)}", E = class extends t(m(p, { validSizes: Object.values(f) })) {
+	constructor(...e) {
+		super(...e), this.parameters = [], this.allowedTypes = [], this.disabled = !1, this.readonly = !1, this.quiet = !1, this._open = !1, this._newParameterName = "", this._handleDocumentClick = (e) => {
+			this._open && !e.composedPath().includes(this) && this._close();
+		};
+	}
+	static get styles() {
+		return [...super.styles ?? [], o(T)];
+	}
+	connectedCallback() {
+		super.connectedCallback(), document.addEventListener("click", this._handleDocumentClick);
+	}
+	disconnectedCallback() {
+		document.removeEventListener("click", this._handleDocumentClick), super.disconnectedCallback();
+	}
+	get _selectableParameters() {
+		return this.parameters.filter((e) => this.allowedTypes.includes(e.type));
+	}
+	get _parameterOptions() {
+		return this._selectableParameters.map((e) => ({
+			label: e.parameter.replace(/^metadata\./i, ""),
+			value: e.parameter
+		}));
+	}
+	get _parameterType() {
+		return this.selectedParameter?.type ?? this.allowedTypes[0];
+	}
+	get _duplicateName() {
+		if (!this._hasParameterName) return !1;
+		let e = S(this._newParameterName).toLowerCase();
+		return this.parameters.some((t) => S(t.parameter).toLowerCase() === e);
+	}
+	get _triggerIconSize() {
+		return {
+			xxs: "xs",
+			xs: "xs",
+			s: "xs",
+			m: "xs",
+			l: "s",
+			xl: "m",
+			xxl: "l"
+		}[this.size] ?? "xs";
+	}
+	get _hasParameterName() {
+		return S(this._newParameterName).replace(/^metadata\./i, "").trim().length > 0;
+	}
+	_dispatchSelected(e) {
+		this.dispatchEvent(new CustomEvent("luzmo-parameter-selected", {
+			bubbles: !0,
+			composed: !0,
+			detail: { parameter: e }
+		}));
+	}
+	_dispatchCreated(e) {
+		this.dispatchEvent(new CustomEvent("luzmo-parameter-created", {
+			bubbles: !0,
+			composed: !0,
+			detail: { parameter: e }
+		}));
+	}
+	_dispatchRemoved(e) {
+		this.dispatchEvent(new CustomEvent("luzmo-parameter-removed", {
+			bubbles: !0,
+			composed: !0,
+			detail: { parameter: e }
+		}));
+	}
+	async _handleTriggerClick() {
+		this.disabled || this.readonly || this.allowedTypes.length === 0 || !this._overlay || (this._open = !0, this._newParameterName = "", this._overlay.open = !0, await this.updateComplete, this.shadowRoot?.querySelector(".parameter-name-input")?.focusElement.focus());
+	}
+	_handleTriggerKeydown(e) {
+		e.key !== "Enter" && e.key !== " " && e.key !== "Space" || (e.preventDefault(), this._handleTriggerClick());
+	}
+	_handleOpened() {
+		this.shadowRoot?.querySelector(".parameter-name-input")?.focusElement.focus();
+	}
+	_handleClosed() {
+		this._open = !1, this._newParameterName = "";
+	}
+	_close() {
+		this._overlay && (this._overlay.open = !1), this._handleClosed(), this._triggerElement?.focusElement.focus();
+	}
+	_handlePanelKeydown(e) {
+		e.key === "Escape" && (e.preventDefault(), this._close());
+	}
+	_handleNameInput(e) {
+		this._newParameterName = e.currentTarget.value;
+	}
+	_selectParameter(e) {
+		this.disabled || this.readonly || (this.selectedParameter = e, this._dispatchSelected(e), this._close());
+	}
+	_handleOptionsChange(e) {
+		e.stopPropagation();
+		let [t] = e.detail.value, n = this._selectableParameters.find((e) => e.parameter === t);
+		n && this._selectParameter(n);
+	}
+	async _handleCreateParameter() {
+		if (this.disabled || this.readonly) return;
+		let e = this.allowedTypes[0];
+		if (!e || !this._hasParameterName || this._duplicateName) return;
+		let t = C(this._newParameterName, e, this.currentValue);
+		this.parameters = [...this.parameters, t], this._newParameterName = "", this._dispatchCreated(t), await this.updateComplete, this.shadowRoot?.querySelector(".parameter-name-input")?.focusElement.focus();
+	}
+	_handleNameKeydown(e) {
+		if (e.key === "Enter") {
+			e.preventDefault(), this._handleCreateParameter();
+			return;
+		}
+		e.key === "ArrowDown" && this._optionsElement && (e.preventDefault(), this._optionsElement.focus());
+	}
+	_handleRemoveParameter() {
+		this.disabled || this.readonly || !this.selectedParameter || this._dispatchRemoved(this.selectedParameter);
+	}
+	_renderParameterType() {
+		let e = this._parameterType;
+		if (!e) return a;
+		let t = b(e);
+		return i`
+      <div class="parameter-type-footer">
+        <luzmo-divider class="parameter-type-divider" size="s"></luzmo-divider>
+        <div class="parameter-type">
+          <span>${d("Parameter type:", { desc: "Label preceding the type of the filter parameter" })}</span>
+          <span class="parameter-type-icon" tabindex="0" role="img" aria-label=${t}>
+            <luzmo-icon
+              aria-hidden="true"
+              .icon=${n({ type: e }, "s")}
+              size="s"
+            ></luzmo-icon>
+            <luzmo-tooltip self-managed placement="top" .size=${this.size}>${t}</luzmo-tooltip>
+          </span>
+        </div>
+      </div>
+    `;
+	}
+	render() {
+		let e = this.selectedParameter?.parameter.replace(/^metadata\./i, ""), t = !this._hasParameterName || this._duplicateName;
+		return i`
+      <div class="parameter-control">
+        ${this.selectedParameter ? i`
+              <luzmo-tags class="selected-parameter-tags">
+                <luzmo-tag
+                  class="selected-parameter"
+                  size=${this.size}
+                  variant="accent"
+                  treatment="fill"
+                  ?deletable=${!this.disabled && !this.readonly}
+                  ?disabled=${this.disabled}
+                  aria-label=${d("Remove parameter", { desc: "Detach a parameter from a filter" })}
+                  @delete=${this._handleRemoveParameter}
+                >
+                  ${e}
+                </luzmo-tag>
+              </luzmo-tags>
+            ` : a}
+        <luzmo-action-button
+          id="parameter-trigger"
+          class="parameter-trigger"
+          size=${this.size}
+          ?quiet=${this.quiet || !this.selectedParameter}
+          .variant=${this.selectedParameter ? "primary" : "neutral"}
+          aria-label=${d("Use parameter", { desc: "Open the filter parameter picker" })}
+          .label=${d("Use parameter", { desc: "Open the filter parameter picker" })}
+          aria-haspopup="dialog"
+          aria-disabled=${this.readonly ? "true" : "false"}
+          aria-expanded=${this._open ? "true" : "false"}
+          .disabled=${this.disabled || this.allowedTypes.length === 0}
+          @click=${this._handleTriggerClick}
+          @keydown=${this._handleTriggerKeydown}
+        >
+          <luzmo-icon slot="icon" .icon=${r} .size=${this._triggerIconSize}></luzmo-icon>
+        </luzmo-action-button>
+        <luzmo-overlay
+          type="manual"
+          placement="bottom-end"
+          trigger="parameter-trigger"
+          receives-focus="false"
+          @luzmo-opened=${this._handleOpened}
+          @luzmo-closed=${this._handleClosed}
+        >
+          <luzmo-popover
+            class="parameter-panel"
+            size=${this.size}
+            role="dialog"
+            aria-label=${d("Filter parameters", { desc: "Filter parameter picker dialog label" })}
+            @keydown=${this._handlePanelKeydown}
+          >
+            <div class="panel-content">
+              <div class="create-row">
+                <luzmo-text-field
+                  id="parameter-name"
+                  class="parameter-name-input"
+                  size=${this.size}
+                  .label=${d("Parameter name", { desc: "Name for a new filter parameter" })}
+                  .placeholder=${d("New parameter…", { desc: "Placeholder of the new filter parameter name field" })}
+                  .invalid=${this._duplicateName}
+                  .value=${this._newParameterName}
+                  @input=${this._handleNameInput}
+                  @keydown=${this._handleNameKeydown}
+                ></luzmo-text-field>
+                <luzmo-button
+                  class="create-parameter"
+                  size=${this.size}
+                  variant="primary"
+                  ?disabled=${t}
+                  @click=${this._handleCreateParameter}
+                >
+                  ${d("Add", { desc: "Create a new filter parameter" })}
+                </luzmo-button>
+              </div>
+              ${this._duplicateName ? i`<div class="validation-message" role="alert">
+                    ${d("A parameter with this name already exists.", { desc: "Duplicate filter parameter name error" })}
+                  </div>` : a}
+              ${this._parameterOptions.length > 0 ? i`<luzmo-options
+                    class="parameter-options"
+                    size=${this.size}
+                    .label=${d("Available parameters", { desc: "Accessible label of the filter parameter list" })}
+                    .options=${this._parameterOptions}
+                    .value=${this.selectedParameter ? [this.selectedParameter.parameter] : []}
+                    @change=${this._handleOptionsChange}
+                  ></luzmo-options>` : a}
+              ${this._renderParameterType()}
+            </div>
+          </luzmo-popover>
+        </luzmo-overlay>
+      </div>
+    `;
+	}
+};
+//#endregion
+//#region src/components/filter-parameter-picker/index.ts
+e([s({ attribute: !1 })], E.prototype, "parameters", void 0), e([s({ attribute: !1 })], E.prototype, "allowedTypes", void 0), e([s({ attribute: !1 })], E.prototype, "selectedParameter", void 0), e([s({ attribute: !1 })], E.prototype, "currentValue", void 0), e([s({
+	type: Boolean,
+	reflect: !0
+})], E.prototype, "disabled", void 0), e([s({
+	type: Boolean,
+	reflect: !0
+})], E.prototype, "readonly", void 0), e([s({
+	type: Boolean,
+	reflect: !0
+})], E.prototype, "quiet", void 0), e([l()], E.prototype, "_open", void 0), e([l()], E.prototype, "_newParameterName", void 0), e([c("luzmo-overlay")], E.prototype, "_overlay", void 0), e([c(".parameter-trigger")], E.prototype, "_triggerElement", void 0), e([c(".parameter-options")], E.prototype, "_optionsElement", void 0), E = e([u()], E), typeof customElements < "u" && !customElements.get("luzmo-filter-parameter-picker") && customElements.define("luzmo-filter-parameter-picker", E);
+//#endregion
+export { v as a, b as i, C as n, x as o, w as r, S as s, E as t };

package/components/filter-parameter-picker-DJKHZxlT.cjs

@@ -0,0 +1,124 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2026 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.
+ * */
+require("./tokens-BWMfo_w4.cjs");const e=require("./decorate-DCJt-2rt.cjs"),t=require("./localized-mixin-DiUJOd06.cjs"),n=require("./calculate-data-field-icon-DenGmW74.cjs");let r=require("@luzmo/icons");require("@luzmo/lucero/button"),require("@luzmo/lucero/icon"),require("@luzmo/lucero/overlay"),require("@luzmo/lucero/popover");let i=require("lit"),a=require("lit/decorators.js"),o=require("@lit/localize");require("@luzmo/lucero/action-button"),require("@luzmo/lucero/tags"),require("@luzmo/lucero/tooltip"),require("@luzmo/lucero/divider"),require("@luzmo/lucero/text-field");let s=require("@luzmo/lucero/utils");require("@luzmo/lucero/options");var c=new Set([`? is null`,`? is not null`,`? between ?`,`YTD`,`QTD`,`MTD`,`WTD`,`to_date`,`last_available`,`last_completed`,`last_now`,`more_than_ago`,`or_more_ago`,`next_now`,`next_full`]),l=new Set([`? length = ?`,`? length >= ?`,`? length <= ?`]),u=new Set([`? in ?`,`? not in ?`,`? includes all ?`,`? includes any ?`,`? includes only ?`]);function d(e,t){return!e||e===`spatial`||!t||c.has(t)?[]:l.has(t)?[`numeric`]:e===`numeric`||e===`array[numeric]`?u.has(t)?[`array[numeric]`]:[`numeric`]:e===`datetime`||e===`array[datetime]`?u.has(t)?[`array[datetime]`,`datetime`]:[`datetime`,`array[datetime]`]:e===`hierarchy`||e===`array[hierarchy]`?u.has(t)?[`array[hierarchy]`]:[`hierarchy`]:[]}var f={numeric:()=>(0,o.msg)(`Numeric`,{id:`filter-parameter-type-numeric`,desc:`Numeric filter parameter type`}),datetime:()=>(0,o.msg)(`Datetime`,{id:`filter-parameter-type-datetime`,desc:`Datetime filter parameter type`}),hierarchy:()=>(0,o.msg)(`Hierarchy`,{id:`filter-parameter-type-hierarchy`,desc:`Hierarchy filter parameter type`}),"array[numeric]":()=>(0,o.msg)(`Numeric[]`,{id:`filter-parameter-type-numeric-list`,desc:`List of numeric values filter parameter type`}),"array[datetime]":()=>(0,o.msg)(`Datetime[]`,{id:`filter-parameter-type-datetime-list`,desc:`List of datetime values filter parameter type`}),"array[hierarchy]":()=>(0,o.msg)(`Hierarchy[]`,{id:`filter-parameter-type-hierarchy-list`,desc:`List of hierarchy values filter parameter type`})};function p(e){return f[e]?.()??e}function m(e){if(!e||typeof e!=`object`||Array.isArray(e))return!1;let t=e;return typeof t.parameter==`string`&&typeof t.type==`string`&&`value`in t}function h(e){return`metadata.${e.trim().replace(/^metadata\./i,``)}`}function g(e,t,n){let r;if(t.startsWith(`array[`))r=Array.isArray(n)?structuredClone(n):[];else if(t===`numeric`)r=typeof n==`number`&&Number.isFinite(n)?n:0;else if(t===`datetime`){let e=n instanceof Date?n:new Date(typeof n==`string`?n:Date.now());r=Number.isNaN(e.getTime())?new Date().toISOString():e.toISOString()}else r=typeof n==`string`?n:``;return{parameter:h(e),type:t,value:r}}function _(e,t){if(!t||t===`? is null`||t===`? is not null`)return;let[n]=d(e,t);if(n?.startsWith(`array[`))return[];if(n===`numeric`)return 0;if(n===`datetime`)return new Date().toISOString();if(n===`hierarchy`)return``}var v=`:host{min-width:0;max-width:100%;color:var(--luzmo-font-color);font-family:var(--luzmo-font-family);font-size:var(--luzmo-font-size);align-items:center;display:inline-flex;position:relative}.parameter-control{align-items:center;gap:var(--filter-parameter-picker-gap);min-width:0;max-width:100%;display:flex}.create-row{align-items:center;gap:var(--filter-parameter-picker-panel-gap);display:flex}.parameter-trigger,.create-parameter{flex:none}.parameter-trigger{font-weight:var(--luzmo-font-weight-bold)}.selected-parameter-tags{--luzmo-tag-group-item-margin-block:0;min-width:0;max-width:100%}.selected-parameter{--luzmo-tag-max-inline-size:min(180px, 100%);min-width:0;max-width:100%}.parameter-panel{min-inline-size:var(--filter-parameter-picker-panel-min-width);padding:var(--filter-parameter-picker-panel-padding);display:block}.parameter-name-input{--luzmo-text-field-width:100%;flex:1;min-inline-size:0}.panel-content{gap:var(--filter-parameter-picker-panel-gap);flex-direction:column;display:flex}.validation-message{color:var(--filter-parameter-picker-error-color);font-size:var(--luzmo-font-size-s)}.parameter-options{max-block-size:var(--filter-parameter-picker-options-max-height);overflow-y:auto}.parameter-type-footer{gap:var(--filter-parameter-picker-panel-gap);flex-direction:column;display:flex}.parameter-type{justify-content:flex-end;align-items:center;gap:var(--luzmo-spacing-1);font-size:var(--filter-parameter-picker-type-font-size);font-weight:var(--luzmo-font-weight);display:flex}.parameter-type-icon{justify-content:center;align-items:center;min-block-size:24px;min-inline-size:24px;display:inline-flex}:host{--filter-parameter-picker-gap:var(--luzmo-spacing-2);--filter-parameter-picker-control-size:var(--luzmo-component-height);--filter-parameter-picker-panel-min-width:220px;--filter-parameter-picker-options-max-height:240px;--filter-parameter-picker-panel-padding:var(--luzmo-spacing-3);--filter-parameter-picker-panel-gap:var(--luzmo-spacing-3);--filter-parameter-picker-type-font-size:var(--luzmo-font-size-s);--filter-parameter-picker-panel-background:var(--luzmo-background-color);--filter-parameter-picker-panel-border:var(--luzmo-border-color);--filter-parameter-picker-error-color:var(--luzmo-negative-color)}:host([size=xxs]),:host([size=xs]){--filter-parameter-picker-panel-padding:var(--luzmo-spacing-2);--filter-parameter-picker-panel-gap:var(--luzmo-spacing-2);--filter-parameter-picker-type-font-size:var(--luzmo-font-size-xs)}:host([size=s]){--filter-parameter-picker-panel-padding:var(--luzmo-spacing-3);--filter-parameter-picker-panel-gap:var(--luzmo-spacing-3);--filter-parameter-picker-type-font-size:var(--luzmo-font-size-xs)}:host([size=l]){--filter-parameter-picker-panel-padding:var(--luzmo-spacing-4);--filter-parameter-picker-panel-gap:var(--luzmo-spacing-4);--filter-parameter-picker-type-font-size:var(--luzmo-font-size-m)}:host([size=xl]){--filter-parameter-picker-panel-padding:var(--luzmo-spacing-4);--filter-parameter-picker-panel-gap:var(--luzmo-spacing-4);--filter-parameter-picker-type-font-size:var(--luzmo-font-size-l)}:host([size=xxl]){--filter-parameter-picker-panel-padding:var(--luzmo-spacing-5);--filter-parameter-picker-panel-gap:var(--luzmo-spacing-5);--filter-parameter-picker-type-font-size:var(--luzmo-font-size-xl)}`,y=class extends t.t((0,s.SizedMixin)(s.LuzmoElement,{validSizes:Object.values(s.ElementSizes)})){constructor(...e){super(...e),this.parameters=[],this.allowedTypes=[],this.disabled=!1,this.readonly=!1,this.quiet=!1,this._open=!1,this._newParameterName=``,this._handleDocumentClick=e=>{this._open&&!e.composedPath().includes(this)&&this._close()}}static get styles(){return[...super.styles??[],(0,i.unsafeCSS)(v)]}connectedCallback(){super.connectedCallback(),document.addEventListener(`click`,this._handleDocumentClick)}disconnectedCallback(){document.removeEventListener(`click`,this._handleDocumentClick),super.disconnectedCallback()}get _selectableParameters(){return this.parameters.filter(e=>this.allowedTypes.includes(e.type))}get _parameterOptions(){return this._selectableParameters.map(e=>({label:e.parameter.replace(/^metadata\./i,``),value:e.parameter}))}get _parameterType(){return this.selectedParameter?.type??this.allowedTypes[0]}get _duplicateName(){if(!this._hasParameterName)return!1;let e=h(this._newParameterName).toLowerCase();return this.parameters.some(t=>h(t.parameter).toLowerCase()===e)}get _triggerIconSize(){return{xxs:`xs`,xs:`xs`,s:`xs`,m:`xs`,l:`s`,xl:`m`,xxl:`l`}[this.size]??`xs`}get _hasParameterName(){return h(this._newParameterName).replace(/^metadata\./i,``).trim().length>0}_dispatchSelected(e){this.dispatchEvent(new CustomEvent(`luzmo-parameter-selected`,{bubbles:!0,composed:!0,detail:{parameter:e}}))}_dispatchCreated(e){this.dispatchEvent(new CustomEvent(`luzmo-parameter-created`,{bubbles:!0,composed:!0,detail:{parameter:e}}))}_dispatchRemoved(e){this.dispatchEvent(new CustomEvent(`luzmo-parameter-removed`,{bubbles:!0,composed:!0,detail:{parameter:e}}))}async _handleTriggerClick(){this.disabled||this.readonly||this.allowedTypes.length===0||!this._overlay||(this._open=!0,this._newParameterName=``,this._overlay.open=!0,await this.updateComplete,this.shadowRoot?.querySelector(`.parameter-name-input`)?.focusElement.focus())}_handleTriggerKeydown(e){e.key!==`Enter`&&e.key!==` `&&e.key!==`Space`||(e.preventDefault(),this._handleTriggerClick())}_handleOpened(){this.shadowRoot?.querySelector(`.parameter-name-input`)?.focusElement.focus()}_handleClosed(){this._open=!1,this._newParameterName=``}_close(){this._overlay&&(this._overlay.open=!1),this._handleClosed(),this._triggerElement?.focusElement.focus()}_handlePanelKeydown(e){e.key===`Escape`&&(e.preventDefault(),this._close())}_handleNameInput(e){this._newParameterName=e.currentTarget.value}_selectParameter(e){this.disabled||this.readonly||(this.selectedParameter=e,this._dispatchSelected(e),this._close())}_handleOptionsChange(e){e.stopPropagation();let[t]=e.detail.value,n=this._selectableParameters.find(e=>e.parameter===t);n&&this._selectParameter(n)}async _handleCreateParameter(){if(this.disabled||this.readonly)return;let e=this.allowedTypes[0];if(!e||!this._hasParameterName||this._duplicateName)return;let t=g(this._newParameterName,e,this.currentValue);this.parameters=[...this.parameters,t],this._newParameterName=``,this._dispatchCreated(t),await this.updateComplete,this.shadowRoot?.querySelector(`.parameter-name-input`)?.focusElement.focus()}_handleNameKeydown(e){if(e.key===`Enter`){e.preventDefault(),this._handleCreateParameter();return}e.key===`ArrowDown`&&this._optionsElement&&(e.preventDefault(),this._optionsElement.focus())}_handleRemoveParameter(){this.disabled||this.readonly||!this.selectedParameter||this._dispatchRemoved(this.selectedParameter)}_renderParameterType(){let e=this._parameterType;if(!e)return i.nothing;let t=p(e);return i.html`
+      <div class="parameter-type-footer">
+        <luzmo-divider class="parameter-type-divider" size="s"></luzmo-divider>
+        <div class="parameter-type">
+          <span>${(0,o.msg)(`Parameter type:`,{desc:`Label preceding the type of the filter parameter`})}</span>
+          <span class="parameter-type-icon" tabindex="0" role="img" aria-label=${t}>
+            <luzmo-icon
+              aria-hidden="true"
+              .icon=${n.t({type:e},`s`)}
+              size="s"
+            ></luzmo-icon>
+            <luzmo-tooltip self-managed placement="top" .size=${this.size}>${t}</luzmo-tooltip>
+          </span>
+        </div>
+      </div>
+    `}render(){let e=this.selectedParameter?.parameter.replace(/^metadata\./i,``),t=!this._hasParameterName||this._duplicateName;return i.html`
+      <div class="parameter-control">
+        ${this.selectedParameter?i.html`
+              <luzmo-tags class="selected-parameter-tags">
+                <luzmo-tag
+                  class="selected-parameter"
+                  size=${this.size}
+                  variant="accent"
+                  treatment="fill"
+                  ?deletable=${!this.disabled&&!this.readonly}
+                  ?disabled=${this.disabled}
+                  aria-label=${(0,o.msg)(`Remove parameter`,{desc:`Detach a parameter from a filter`})}
+                  @delete=${this._handleRemoveParameter}
+                >
+                  ${e}
+                </luzmo-tag>
+              </luzmo-tags>
+            `:i.nothing}
+        <luzmo-action-button
+          id="parameter-trigger"
+          class="parameter-trigger"
+          size=${this.size}
+          ?quiet=${this.quiet||!this.selectedParameter}
+          .variant=${this.selectedParameter?`primary`:`neutral`}
+          aria-label=${(0,o.msg)(`Use parameter`,{desc:`Open the filter parameter picker`})}
+          .label=${(0,o.msg)(`Use parameter`,{desc:`Open the filter parameter picker`})}
+          aria-haspopup="dialog"
+          aria-disabled=${this.readonly?`true`:`false`}
+          aria-expanded=${this._open?`true`:`false`}
+          .disabled=${this.disabled||this.allowedTypes.length===0}
+          @click=${this._handleTriggerClick}
+          @keydown=${this._handleTriggerKeydown}
+        >
+          <luzmo-icon slot="icon" .icon=${r.luzmoFormula} .size=${this._triggerIconSize}></luzmo-icon>
+        </luzmo-action-button>
+        <luzmo-overlay
+          type="manual"
+          placement="bottom-end"
+          trigger="parameter-trigger"
+          receives-focus="false"
+          @luzmo-opened=${this._handleOpened}
+          @luzmo-closed=${this._handleClosed}
+        >
+          <luzmo-popover
+            class="parameter-panel"
+            size=${this.size}
+            role="dialog"
+            aria-label=${(0,o.msg)(`Filter parameters`,{desc:`Filter parameter picker dialog label`})}
+            @keydown=${this._handlePanelKeydown}
+          >
+            <div class="panel-content">
+              <div class="create-row">
+                <luzmo-text-field
+                  id="parameter-name"
+                  class="parameter-name-input"
+                  size=${this.size}
+                  .label=${(0,o.msg)(`Parameter name`,{desc:`Name for a new filter parameter`})}
+                  .placeholder=${(0,o.msg)(`New parameter…`,{desc:`Placeholder of the new filter parameter name field`})}
+                  .invalid=${this._duplicateName}
+                  .value=${this._newParameterName}
+                  @input=${this._handleNameInput}
+                  @keydown=${this._handleNameKeydown}
+                ></luzmo-text-field>
+                <luzmo-button
+                  class="create-parameter"
+                  size=${this.size}
+                  variant="primary"
+                  ?disabled=${t}
+                  @click=${this._handleCreateParameter}
+                >
+                  ${(0,o.msg)(`Add`,{desc:`Create a new filter parameter`})}
+                </luzmo-button>
+              </div>
+              ${this._duplicateName?i.html`<div class="validation-message" role="alert">
+                    ${(0,o.msg)(`A parameter with this name already exists.`,{desc:`Duplicate filter parameter name error`})}
+                  </div>`:i.nothing}
+              ${this._parameterOptions.length>0?i.html`<luzmo-options
+                    class="parameter-options"
+                    size=${this.size}
+                    .label=${(0,o.msg)(`Available parameters`,{desc:`Accessible label of the filter parameter list`})}
+                    .options=${this._parameterOptions}
+                    .value=${this.selectedParameter?[this.selectedParameter.parameter]:[]}
+                    @change=${this._handleOptionsChange}
+                  ></luzmo-options>`:i.nothing}
+              ${this._renderParameterType()}
+            </div>
+          </luzmo-popover>
+        </luzmo-overlay>
+      </div>
+    `}};e.t([(0,a.property)({attribute:!1})],y.prototype,`parameters`,void 0),e.t([(0,a.property)({attribute:!1})],y.prototype,`allowedTypes`,void 0),e.t([(0,a.property)({attribute:!1})],y.prototype,`selectedParameter`,void 0),e.t([(0,a.property)({attribute:!1})],y.prototype,`currentValue`,void 0),e.t([(0,a.property)({type:Boolean,reflect:!0})],y.prototype,`disabled`,void 0),e.t([(0,a.property)({type:Boolean,reflect:!0})],y.prototype,`readonly`,void 0),e.t([(0,a.property)({type:Boolean,reflect:!0})],y.prototype,`quiet`,void 0),e.t([(0,a.state)()],y.prototype,`_open`,void 0),e.t([(0,a.state)()],y.prototype,`_newParameterName`,void 0),e.t([(0,a.query)(`luzmo-overlay`)],y.prototype,`_overlay`,void 0),e.t([(0,a.query)(`.parameter-trigger`)],y.prototype,`_triggerElement`,void 0),e.t([(0,a.query)(`.parameter-options`)],y.prototype,`_optionsElement`,void 0),y=e.t([(0,o.localized)()],y),typeof customElements<`u`&&!customElements.get(`luzmo-filter-parameter-picker`)&&customElements.define(`luzmo-filter-parameter-picker`,y),Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return g}}),Object.defineProperty(exports,"o",{enumerable:!0,get:function(){return m}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return _}}),Object.defineProperty(exports,"s",{enumerable:!0,get:function(){return h}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return y}});

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

@@ -0,0 +1,72 @@
+import '@luzmo/lucero/picker';
+import '@luzmo/lucero/text-field';
+import { CSSResultArray, TemplateResult } from 'lit';
+import { LuzmoElement } from '@luzmo/lucero/utils';
+import './../filter-value-picker-datetime';
+import './../filter-value-picker-hierarchy';
+import './../filter-value-picker-numeric';
+declare const LuzmoFilterValuePicker_base: (new (...args: any[]) => {
+    language: string;
+}) & typeof LuzmoElement & {
+    new (...args: any[]): import("@luzmo/lucero").SizedElementInterface;
+    prototype: import("@luzmo/lucero").SizedElementInterface;
+};
+/**
+ * @customElement luzmo-filter-value-picker
+ * @fires {CustomEvent} luzmo-filter-value-changed - Fired when the filter value changes; `detail.value` holds the new value.
+ * @cssprop --luzmo-filter-value-picker-control-min-width - Smallest width a value control may shrink to in a narrow filter row.
+ */
+export declare class LuzmoFilterValuePicker extends LuzmoFilterValuePicker_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 to use for locale-aware formatting and labels
+     */
+    contentLanguage: string;
+    /**
+     * The time zone to use for the date picker
+     */
+    timeZone?: string;
+    /**
+     * The type value picker to render
+     */
+    valueType?: 'hierarchy' | 'numeric' | 'datetime';
+    /**
+     * The filter for which to render the value picker
+     */
+    filter?: any;
+    /** @internal */
+    quiet: boolean;
+    /** @internal */
+    readonly: boolean;
+    /** @internal */
+    disabled: boolean;
+    private _expressionsWithoutValuePicker;
+    private _sendChangeEvent;
+    private setFilterValue;
+    private renderNumericValuePicker;
+    private renderHierarchyValuePicker;
+    private renderDateTimeValuePicker;
+    private renderDisabledTextField;
+    protected render(): TemplateResult;
+}
+export {};

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

@@ -0,0 +1,20 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2026 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.
+ * */
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../filter-value-picker-CW9vKpn1.cjs");exports.LuzmoFilterValuePicker=e.t;

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

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

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

@@ -0,0 +1,21 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2026 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 { t as e } from "../filter-value-picker-DeO855hf.js";
+export { e as LuzmoFilterValuePicker };