@luzmo/analytics-components-kit 1.0.5 → 1.0.7

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

@@ -17,6 +17,4 @@
  * 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("../decorate-DCJt-2rt.cjs");let t=require("lit"),n=require("lit/decorators.js");require("@luzmo/lucero/picker");let r=require("@luzmo/lucero/utils");var i=`:host{--var:blue}`,a=class extends (0,r.SizedMixin)(r.LuzmoElement,{validSizes:Object.values(r.ElementSizes)}){constructor(...e){super(...e),this.language=`en`,this.contentLanguage=`en`}static get styles(){return[(0,t.unsafeCSS)(i)]}willUpdate(){}render(){return t.html`
-      test
-    `}};e.t([(0,n.property)({type:String,reflect:!0})],a.prototype,`language`,void 0),e.t([(0,n.property)({type:String,attribute:`content-language`,reflect:!0})],a.prototype,`contentLanguage`,void 0),customElements.get(`luzmo-filter-parameter-picker`)||customElements.define(`luzmo-filter-parameter-picker`,a),exports.LuzmoFilterParameterPicker=a;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../filter-parameter-picker-CxbAY5hy.cjs");Object.defineProperty(exports,"LuzmoFilterParameterPicker",{enumerable:!0,get:function(){return e.t}}),exports.createFilterParameter=e.n,exports.getDefaultLiteralValue=e.r,exports.getParameterTypeLabel=e.i,exports.getSelectableParameterTypes=e.a,exports.isFilterParameterDefinition=e.o,exports.normalizeParameterName=e.s;

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

@@ -5,3 +5,5 @@ declare global {
     }
 }
 export { LuzmoFilterParameterPicker } from './filter-parameter-picker';
+export type { FilterParameterPickerEventDetail } from './types';
+export { createFilterParameter, getDefaultLiteralValue, getParameterTypeLabel, getSelectableParameterTypes, isFilterParameterDefinition, normalizeParameterName } from './filter-parameter-picker.helpers';

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

@@ -21,38 +21,8 @@
 (function() {
 	if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
 		let 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: color-mix(in oklch, var(--luzmo-border-color-full), black 25%);--luzmo-border-color-full-down: color-mix(in oklch, var(--luzmo-border-color-full), black 45%);--luzmo-border-color-full-focus: color-mix(in oklch, var(--luzmo-border-color-full), black 25%);--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: color-mix( in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 5%), black 1.5% );--luzmo-background-color-down: color-mix(in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 7%), black 1%);--luzmo-background-color-focus: color-mix( in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 5%), black 1.5% );--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: color-mix(in oklch, var(--luzmo-background-color-highlight), black 10%);--luzmo-background-color-highlight-down: color-mix(in oklch, var(--luzmo-background-color-highlight), black 20%);--luzmo-background-color-highlight-focus: color-mix(in oklch, var(--luzmo-background-color-highlight), black 10%);--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: color-mix(in oklch, var(--luzmo-font-color), black 8%);--luzmo-font-color-down: color-mix(in oklch, var(--luzmo-font-color), black 20%);--luzmo-font-color-focus: color-mix(in oklch, var(--luzmo-font-color), black 8%);--luzmo-scrollbar-size: 6px;--luzmo-scrollbar-width: thin;--luzmo-scrollbar-track-background: transparent;--luzmo-scrollbar-track-border-radius: var(--luzmo-border-radius-s);--luzmo-scrollbar-thumb-background: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-scrollbar-thumb-border-radius: var(--luzmo-border-radius-s);--luzmo-scrollbar-thumb-hover-background: rgba(var(--luzmo-border-color-rgb), 0.4);--luzmo-primary: #4434ff;--luzmo-primary-hover: color-mix(in oklch, var(--luzmo-primary), black 8%);--luzmo-primary-down: color-mix(in oklch, var(--luzmo-primary), black 20%);--luzmo-primary-focus: color-mix(in oklch, var(--luzmo-primary), black 8%);--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: color-mix(in oklch, var(--luzmo-secondary), black 8%);--luzmo-secondary-down: color-mix(in oklch, var(--luzmo-secondary), black 20%);--luzmo-secondary-focus: color-mix(in oklch, var(--luzmo-secondary), black 8%);--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: color-mix(in oklch, var(--luzmo-negative-color), black 8%);--luzmo-negative-color-down: color-mix(in oklch, var(--luzmo-negative-color), black 20%);--luzmo-negative-color-focus: color-mix(in oklch, var(--luzmo-negative-color), black 8%);--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: color-mix(in oklch, var(--luzmo-positive-color), black 8%);--luzmo-positive-color-down: color-mix(in oklch, var(--luzmo-positive-color), black 20%);--luzmo-positive-color-focus: color-mix(in oklch, var(--luzmo-positive-color), black 8%);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: color-mix(in oklch, var(--luzmo-selected-color), black 25%);--luzmo-selected-color-down: color-mix(in oklch, var(--luzmo-selected-color), black 45%);--luzmo-selected-color-focus: color-mix(in oklch, var(--luzmo-selected-color), black 25%);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: color-mix(in oklch, var(--luzmo-selected-color-hard), black 25%);--luzmo-selected-color-hard-down: color-mix(in oklch, var(--luzmo-selected-color-hard), black 45%);--luzmo-selected-color-hard-focus: color-mix(in oklch, var(--luzmo-selected-color-hard), black 25%);--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);
+		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: color-mix(in oklch, var(--luzmo-border-color-full), black 25%);--luzmo-border-color-full-down: color-mix(in oklch, var(--luzmo-border-color-full), black 45%);--luzmo-border-color-full-focus: color-mix(in oklch, var(--luzmo-border-color-full), black 25%);--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: color-mix( in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 5%), black 1.5% );--luzmo-background-color-down: color-mix(in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 7%), black 1%);--luzmo-background-color-focus: color-mix( in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 5%), black 1.5% );--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: color-mix(in oklch, var(--luzmo-background-color-highlight), black 10%);--luzmo-background-color-highlight-down: color-mix(in oklch, var(--luzmo-background-color-highlight), black 20%);--luzmo-background-color-highlight-focus: color-mix(in oklch, var(--luzmo-background-color-highlight), black 10%);--luzmo-background-color-alt-1: rgb(250, 250, 250);--luzmo-background-color-alt-2: rgb(239, 239, 239);--luzmo-border-width: 1px;--luzmo-shadow-color-rgb: 0, 0, 0;--luzmo-shadow-opacity: 0.1;--luzmo-shadow-color: rgba(var(--luzmo-shadow-color-rgb), var(--luzmo-shadow-opacity));--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: color-mix(in oklch, var(--luzmo-font-color), black 8%);--luzmo-font-color-down: color-mix(in oklch, var(--luzmo-font-color), black 20%);--luzmo-font-color-focus: color-mix(in oklch, var(--luzmo-font-color), black 8%);--luzmo-scrollbar-size: 6px;--luzmo-scrollbar-width: thin;--luzmo-scrollbar-track-background: transparent;--luzmo-scrollbar-track-border-radius: var(--luzmo-border-radius-s);--luzmo-scrollbar-thumb-background: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-scrollbar-thumb-border-radius: var(--luzmo-border-radius-s);--luzmo-scrollbar-thumb-hover-background: rgba(var(--luzmo-border-color-rgb), 0.4);--luzmo-primary: #4434ff;--luzmo-primary-hover: color-mix(in oklch, var(--luzmo-primary), black 8%);--luzmo-primary-down: color-mix(in oklch, var(--luzmo-primary), black 20%);--luzmo-primary-focus: color-mix(in oklch, var(--luzmo-primary), black 8%);--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: color-mix(in oklch, var(--luzmo-secondary), black 8%);--luzmo-secondary-down: color-mix(in oklch, var(--luzmo-secondary), black 20%);--luzmo-secondary-focus: color-mix(in oklch, var(--luzmo-secondary), black 8%);--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: color-mix(in oklch, var(--luzmo-negative-color), black 8%);--luzmo-negative-color-down: color-mix(in oklch, var(--luzmo-negative-color), black 20%);--luzmo-negative-color-focus: color-mix(in oklch, var(--luzmo-negative-color), black 8%);--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: color-mix(in oklch, var(--luzmo-positive-color), black 8%);--luzmo-positive-color-down: color-mix(in oklch, var(--luzmo-positive-color), black 20%);--luzmo-positive-color-focus: color-mix(in oklch, var(--luzmo-positive-color), black 8%);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: color-mix(in oklch, var(--luzmo-selected-color), black 25%);--luzmo-selected-color-down: color-mix(in oklch, var(--luzmo-selected-color), black 45%);--luzmo-selected-color-focus: color-mix(in oklch, var(--luzmo-selected-color), black 25%);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: color-mix(in oklch, var(--luzmo-selected-color-hard), black 25%);--luzmo-selected-color-hard-down: color-mix(in oklch, var(--luzmo-selected-color-hard), black 45%);--luzmo-selected-color-hard-focus: color-mix(in oklch, var(--luzmo-selected-color-hard), black 25%);--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);
 	}
 })();
-import { t as e } from "../decorate-DyMgX_Uh.js";
-import { html as t, unsafeCSS as n } from "lit";
-import { property as r } from "lit/decorators.js";
-import "@luzmo/lucero/picker";
-import { ElementSizes as i, LuzmoElement as a, SizedMixin as o } from "@luzmo/lucero/utils";
-//#region src/components/filter-parameter-picker/filter-parameter-picker.module.scss?inline
-var s = ":host{--var:blue}", c = class extends o(a, { validSizes: Object.values(i) }) {
-	constructor(...e) {
-		super(...e), this.language = "en", this.contentLanguage = "en";
-	}
-	static get styles() {
-		return [n(s)];
-	}
-	willUpdate() {}
-	render() {
-		return t`
-      test
-    `;
-	}
-};
-//#endregion
-//#region src/components/filter-parameter-picker/index.ts
-e([r({
-	type: String,
-	reflect: !0
-})], c.prototype, "language", void 0), e([r({
-	type: String,
-	attribute: "content-language",
-	reflect: !0
-})], c.prototype, "contentLanguage", void 0), customElements.get("luzmo-filter-parameter-picker") || customElements.define("luzmo-filter-parameter-picker", c);
-//#endregion
-export { c as LuzmoFilterParameterPicker };
+import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "../filter-parameter-picker-CU48aEOS.js";
+export { o as LuzmoFilterParameterPicker, n as createFilterParameter, i as getDefaultLiteralValue, t as getParameterTypeLabel, e as getSelectableParameterTypes, r as isFilterParameterDefinition, a as normalizeParameterName };

package/components/filter-parameter-picker/types.d.ts

@@ -0,0 +1,4 @@
+import type { ItemFilterParameterDefinition } from '@luzmo/dashboard-contents-types';
+export interface FilterParameterPickerEventDetail {
+    parameter: ItemFilterParameterDefinition;
+}

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

@@ -0,0 +1,363 @@
+/*! * 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 "./decorate-DyMgX_Uh.js";
+import { t } from "./localized-mixin-D-vXCJuU.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 { ElementSizes as f, LuzmoElement as p, SizedMixin as m } from "@luzmo/lucero/utils";
+import "@luzmo/lucero/divider";
+import "@luzmo/lucero/options";
+import "@luzmo/lucero/text-field";
+//#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._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.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.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() {
+		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.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}
+                  ?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.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-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([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-CxbAY5hy.cjs

@@ -0,0 +1,123 @@
+/*! * 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.
+ * */
+const e=require("./decorate-DCJt-2rt.cjs"),t=require("./localized-mixin-BForHr3t.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");let s=require("@luzmo/lucero/utils");require("@luzmo/lucero/divider"),require("@luzmo/lucero/options"),require("@luzmo/lucero/text-field");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._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.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.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(){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.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}
+                  ?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.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-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.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

@@ -14,6 +14,7 @@ declare const LuzmoFilterValuePicker_base: (new (...args: any[]) => {
 /**
  * @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;

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

@@ -17,4 +17,4 @@
  * 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-D08bAAKt.cjs");exports.LuzmoFilterValuePicker=e.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../filter-value-picker-CRrUhngj.cjs");exports.LuzmoFilterValuePicker=e.t;