@luzmo/analytics-components-kit 1.0.5 → 1.0.7

package/README.md

@@ -15,9 +15,11 @@ ACK produces and edits chart configuration (type, slots, options, filters). It d
 ## Installation
 
 ```bash
-npm install @luzmo/analytics-components-kit
+npm install @luzmo/analytics-components-kit lit@^3.3.2 @luzmo/lucero@^2.0.1 @luzmo/icons@^1.0.1-alpha.46
 ```
 
+ACK uses Lucero 2 for its design-system primitives. Package managers that do not install peer dependencies automatically must install the compatible peer versions explicitly.
+
 To render the configured charts, also install Luzmo Embed (optional):
 
 ```bash
@@ -108,7 +110,11 @@ Individual option control editors are also exported for fully custom option UIs:
 | --------- | ----------------------------------------- | --------------------------------------- | --------------------------------------------------------------------------------- |
 | Filters   | `@luzmo/analytics-components-kit/filters` | Filter editor with nested AND/OR groups | [Docs](https://developer.luzmo.com/guide/ack--components--filters--luzmo-filters) |
 
-`<luzmo-filters>` outputs the standard Luzmo filter format (`ItemFilterGroup[]` from `@luzmo/dashboard-contents-types`), compatible with `luzmo-embed-viz-item`'s `filters` property and `luzmo-item-grid` items' `filters`. Group `condition` values are lowercase `and` / `or`. The published `FilterGroup` editor type uses the same casing, so typed consumers must migrate uppercase literals to `and` / `or`. At runtime uppercase `AND` / `OR` input is still accepted and normalized to lowercase on output.
+`<luzmo-filters>` defaults to the standard Luzmo filter format (`ItemFilterGroup[]` from `@luzmo/dashboard-contents-types`). Narrow `luzmo-filters-changed` on `event.detail.format` before forwarding: canonical groups are compatible with `luzmo-embed-viz-item`'s `filters` property and `luzmo-item-grid` items' `filters`; clean groups are for aligned hosts that accept `ItemFilterOutput` / `DashboardFilterOutput`. Group `condition` values are lowercase `and` / `or`. The published `FilterGroup` editor type uses the same casing, so typed consumers must migrate uppercase literals to `and` / `or`. At runtime uppercase `AND` / `OR` input is still accepted and normalized to lowercase on output.
+
+`filters` accepts both halves of the public `ItemFilterOutput` / `DashboardFilterOutput` unions, so the result of an aligned `getFilters()` can be passed straight back in: canonical `ItemFilterGroup[]`, or clean clause groups that own a top-level `clause`, nest inline, and flatten each leaf onto its reference (including dashboard retrieval envelopes). Output stays canonical unless you set `format="clean"`, and `event.detail.format` names the half you received. A tree that cannot be represented cleanly — mixed `where`/`having` under `or`, a missing reference or value, an `in` / `not in` expression whose value is not an array, or a `between` expression whose range does not contain exactly two values — falls back to canonical output. A leaf that mixes encodings, or that matches neither a complete clean nor a complete canonical encoding, is rejected and the previous `filters` value is kept. Typed consumers of `FiltersChangedEventDetail` must narrow on `format` to keep `filters` as `ItemFilterGroup[]`. `transformFilters`, `reverseTransformFilters`, and `detectFiltersFormat` are exported from `@luzmo/analytics-components-kit/filters` for hosts that convert outside the editor.
+
+Named parameter-backed values are opt-in with `allow-parameters`. Supply the initial definitions through the `parameters` property. A parameter created in the editor is appended to `parameters` and announced with `luzmo-parameter-created`, so handle that event to persist it; creating does not apply it to a filter, since the user attaches it by picking it from the list. Listen for `luzmo-parameter-removed` when a definition is detached from one filter. Detaching does not delete the definition. The exported `FilterParameter`, `FilterParameterType`, and `FilterParameterEventDetail` types describe this API.
 
 ### Chart rendering
 
@@ -180,7 +186,7 @@ vizItem.authToken = 'your-auth-token';
 vizItem.type = itemType; // chart type
 vizItem.slots = slotsContents; // from luzmo-slots-contents-changed
 vizItem.options = options; // from luzmo-options-changed
-vizItem.filters = filters; // from luzmo-filters-changed
+vizItem.filters = filters; // canonical ItemFilterGroup[] from luzmo-filters-changed (narrow on detail.format if you set format="clean")
 ```
 
 See the Flex reference and the "Using luzmo-embed-viz-item with the kit" guide in the [ACK docs](https://developer.luzmo.com/guide/ack--overview) for every viz item property, event, and method.
@@ -281,7 +287,14 @@ import type {
   SlotContentsChangedEventDetail,
   SlotConstraintTriggeredEventDetail,
   ItemFilterGroup,
-  FilterGroup
+  FilterGroup,
+  FiltersChangedEventDetail,
+  FiltersInput,
+  FiltersOutput,
+  FiltersFormat,
+  CleanFilterClauseGroup,
+  ItemFilterOutput,
+  DashboardFilterOutput
 } from '@luzmo/analytics-components-kit/types';
 ```
 

package/angular/components/data-fields-select.ts

@@ -39,6 +39,10 @@ export class LuzmoDataFieldsSelect implements OnChanges {
   @Input({ alias: 'icons' })
   icons?: 'none' | 'menu-only' | 'all';
 
+  /** Whether datetime and hierarchy columns expand into selectable sublevels. Turn this off in contexts that address the column as a whole, so the column stays selectable by its own id. */
+  @Input({ alias: 'levels' })
+  levels?: 'on' | 'off';
+
   /** Allow no selection. If true, the picker will not show a value when no item is selected. Else if no value is provided it will pick the first item. */
   @Input({ alias: 'allowEmpty', transform: booleanAttribute })
   allowEmpty?: boolean;
@@ -127,6 +131,9 @@ export class LuzmoDataFieldsSelect implements OnChanges {
         case 'icons':
           this.setHostProperty('icons', changes['icons'].currentValue);
           break;
+        case 'levels':
+          this.setHostProperty('levels', changes['levels'].currentValue);
+          break;
         case 'allowEmpty':
           this.setHostProperty('allowEmpty', changes['allowEmpty'].currentValue);
           break;

package/angular/components/filter-item.ts

@@ -1,6 +1,7 @@
 import { booleanAttribute, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, OnChanges, output, Renderer2, SimpleChanges } from '@angular/core';
 import '@luzmo/analytics-components-kit/filter-item';
 import type { LuzmoFilterItem as LuzmoFilterItemHostElement } from '@luzmo/analytics-components-kit/filter-item';
+import type { FilterParameter } from '@luzmo/analytics-components-kit/filters';
 
 @Component({
   selector: 'luzmo-filter-item',
@@ -56,6 +57,14 @@ export class LuzmoFilterItem implements OnChanges {
   @Input({ alias: 'filter' })
   filter?: any;
 
+  /** Whether parameter-backed filter values can be created and selected. */
+  @Input({ alias: 'allowParameters', transform: booleanAttribute })
+  allowParameters?: boolean;
+
+  /** Consumer-owned parameter definitions available for selection. */
+  @Input({ alias: 'parameters' })
+  parameters?: FilterParameter[];
+
   /** The language for UI labels. Supported values: 'en', 'nl', 'fr', 'de', 'es' */
   @Input({ alias: 'language' })
   language?: string;
@@ -115,6 +124,12 @@ export class LuzmoFilterItem implements OnChanges {
         case 'filter':
           this.setHostProperty('filter', changes['filter'].currentValue);
           break;
+        case 'allowParameters':
+          this.setHostProperty('allowParameters', changes['allowParameters'].currentValue);
+          break;
+        case 'parameters':
+          this.setHostProperty('parameters', changes['parameters'].currentValue);
+          break;
         case 'language':
           this.setHostProperty('language', changes['language'].currentValue);
           break;

package/angular/components/filter-parameter-picker.ts

@@ -1,6 +1,9 @@
-import { booleanAttribute, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, OnChanges, Renderer2, SimpleChanges } from '@angular/core';
+import { booleanAttribute, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, OnChanges, output, Renderer2, SimpleChanges } from '@angular/core';
 import '@luzmo/analytics-components-kit/filter-parameter-picker';
-import type { LuzmoFilterParameterPicker as LuzmoFilterParameterPickerHostElement } from '@luzmo/analytics-components-kit/filter-parameter-picker';
+import type { LuzmoFilterParameterPicker as LuzmoFilterParameterPickerHostElement, FilterParameterPickerEventDetail } from '@luzmo/analytics-components-kit/filter-parameter-picker';
+export type { FilterParameterPickerEventDetail } from '@luzmo/analytics-components-kit/filter-parameter-picker';
+import type { FilterParameterType } from '@luzmo/analytics-components-kit/filters';
+import type { ItemFilterParameterDefinition } from '@luzmo/dashboard-contents-types';
 
 @Component({
   selector: 'luzmo-filter-parameter-picker',
@@ -24,22 +27,34 @@ export class LuzmoFilterParameterPicker implements OnChanges {
     return this.host;
   }
 
-  /** The language of the settings interface */
+  /** Parameter definitions available for selection. */
+  @Input({ alias: 'parameters' })
+  parameters?: ItemFilterParameterDefinition[];
+
+  /** Parameter types compatible with the active field and expression. */
+  @Input({ alias: 'allowedTypes' })
+  allowedTypes?: FilterParameterType[];
+
+  /** The parameter currently attached to the filter. */
+  @Input({ alias: 'selectedParameter' })
+  selectedParameter?: ItemFilterParameterDefinition;
+
+  /** The current literal filter value used as the default for a new parameter. */
+  @Input({ alias: 'currentValue' })
+  currentValue?: unknown;
+
+  /** Whether parameter selection is disabled. */
+  @Input({ alias: 'disabled', transform: booleanAttribute })
+  disabled?: boolean;
+
+  /** The language for UI labels. Supported values: 'en', 'nl', 'fr', 'de', 'es' */
   @Input({ alias: 'language' })
   language?: string;
 
-  /** The language to use for locale-aware formatting and labels */
-  @Input({ alias: 'contentLanguage' })
-  contentLanguage?: string;
-
   /** The size of the element */
   @Input({ alias: 'size' })
   size?: 's' | 'm' | 'l' | 'xl';
 
-  /** Disable this control. It will not receive focus or events */
-  @Input({ alias: 'disabled', transform: booleanAttribute })
-  disabled?: boolean;
-
   /** When this control is rendered, focus it automatically */
   @Input({ alias: 'autofocus', transform: booleanAttribute })
   autofocus?: boolean;
@@ -48,6 +63,15 @@ export class LuzmoFilterParameterPicker implements OnChanges {
   @Input({ alias: 'tabIndex' })
   tabIndex?: number;
 
+  /** Fired when a parameter is selected. */
+  readonly luzmoParameterSelected = output<CustomEvent<FilterParameterPickerEventDetail>>({ alias: 'luzmoParameterSelected' });
+
+  /** Fired when a parameter is created. */
+  readonly luzmoParameterCreated = output<CustomEvent<FilterParameterPickerEventDetail>>({ alias: 'luzmoParameterCreated' });
+
+  /** Fired when a parameter is detached from the filter. */
+  readonly luzmoParameterRemoved = output<CustomEvent<FilterParameterPickerEventDetail>>({ alias: 'luzmoParameterRemoved' });
+
   constructor() {
     this.bindEvents();
     this.destroyRef.onDestroy(() => {
@@ -60,18 +84,27 @@ export class LuzmoFilterParameterPicker implements OnChanges {
   ngOnChanges(changes: SimpleChanges): void {
     for (const key of Object.keys(changes)) {
       switch (key) {
-        case 'language':
-          this.setHostProperty('language', changes['language'].currentValue);
+        case 'parameters':
+          this.setHostProperty('parameters', changes['parameters'].currentValue);
           break;
-        case 'contentLanguage':
-          this.setHostProperty('contentLanguage', changes['contentLanguage'].currentValue);
+        case 'allowedTypes':
+          this.setHostProperty('allowedTypes', changes['allowedTypes'].currentValue);
           break;
-        case 'size':
-          this.setHostProperty('size', changes['size'].currentValue);
+        case 'selectedParameter':
+          this.setHostProperty('selectedParameter', changes['selectedParameter'].currentValue);
+          break;
+        case 'currentValue':
+          this.setHostProperty('currentValue', changes['currentValue'].currentValue);
           break;
         case 'disabled':
           this.setHostProperty('disabled', changes['disabled'].currentValue);
           break;
+        case 'language':
+          this.setHostProperty('language', changes['language'].currentValue);
+          break;
+        case 'size':
+          this.setHostProperty('size', changes['size'].currentValue);
+          break;
         case 'autofocus':
           this.setHostProperty('autofocus', changes['autofocus'].currentValue);
           break;
@@ -95,7 +128,26 @@ export class LuzmoFilterParameterPicker implements OnChanges {
   }
 
   private bindEvents(): void {
-    // No custom events for this wrapper.
+    this.listenerCleanup.push(
+      this.renderer.listen(this.host, 'luzmo-parameter-selected', (event: Event) => {
+        const typed = event as CustomEvent<FilterParameterPickerEventDetail>;
+        this.luzmoParameterSelected.emit(typed);
+      })
+    );
+
+    this.listenerCleanup.push(
+      this.renderer.listen(this.host, 'luzmo-parameter-created', (event: Event) => {
+        const typed = event as CustomEvent<FilterParameterPickerEventDetail>;
+        this.luzmoParameterCreated.emit(typed);
+      })
+    );
+
+    this.listenerCleanup.push(
+      this.renderer.listen(this.host, 'luzmo-parameter-removed', (event: Event) => {
+        const typed = event as CustomEvent<FilterParameterPickerEventDetail>;
+        this.luzmoParameterRemoved.emit(typed);
+      })
+    );
   }
 }
 

package/angular/components/filters.ts

@@ -1,8 +1,7 @@
 import { booleanAttribute, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, OnChanges, output, Renderer2, SimpleChanges } from '@angular/core';
 import '@luzmo/analytics-components-kit/filters';
-import type { LuzmoFilters as LuzmoFiltersHostElement, FiltersChangedEventDetail } from '@luzmo/analytics-components-kit/filters';
-export type { FilterCondition, FilterGroup, FiltersChangedEventDetail } from '@luzmo/analytics-components-kit/filters';
-import type { ItemFilterGroup } from '@luzmo/dashboard-contents-types';
+import type { LuzmoFilters as LuzmoFiltersHostElement, FilterParameter, FiltersChangedEventDetail, FiltersFormat, FiltersInput } from '@luzmo/analytics-components-kit/filters';
+export type { CleanFilter, CleanFilterClauseGroup, CleanFilterGroup, CleanRetrievedFilterGroup, DashboardFilterOutput, DetectedFiltersFormat, FilterClause, FilterCondition, FilterGroup, FilterParameter, FilterParameterEventDetail, FilterParameterType, FiltersChangedEventDetail, FiltersFormat, FiltersInput, FiltersOutput, ItemFilterOutput, TransformFiltersOptions } from '@luzmo/analytics-components-kit/filters';
 
 @Component({
   selector: 'luzmo-filters',
@@ -54,9 +53,21 @@ export class LuzmoFilters implements OnChanges {
   @Input({ alias: 'datasetIds' })
   datasetIds?: string[];
 
-  /** The filter groups to display */
+  /** The filter groups to display.  Accepts both halves of the public `ItemFilterOutput` / `DashboardFilterOutput` unions: canonical `ItemFilterGroup[]` and clean clause groups with flattened leaves. Nested `and` / `or` groups are preserved either way. */
   @Input({ alias: 'filters' })
-  filters?: ItemFilterGroup[];
+  filters?: FiltersInput;
+
+  /** Output format for the `luzmo-filters-changed` event.  `canonical` emits `ItemFilterGroup[]`; `clean` emits the clean clause groups that aligned hosts consume. A tree that cannot be represented cleanly falls back to canonical output, and the event says which format it carries. */
+  @Input({ alias: 'format' })
+  format?: FiltersFormat;
+
+  /** Whether parameter-backed filter values can be created and selected. */
+  @Input({ alias: 'allowParameters', transform: booleanAttribute })
+  allowParameters?: boolean;
+
+  /** Consumer-owned parameter definitions available to filter rows. */
+  @Input({ alias: 'parameters' })
+  parameters?: FilterParameter[];
 
   /** Debounce time in milliseconds for the filters-changed event */
   @Input({ alias: 'debounce' })
@@ -82,9 +93,15 @@ export class LuzmoFilters implements OnChanges {
   @Input({ alias: 'tabIndex' })
   tabIndex?: number;
 
-  /** Announces that the filters have changed */
+  /** Announces that the filters have changed, carrying the emitted groups and the format they are in */
   readonly luzmoFiltersChanged = output<CustomEvent<FiltersChangedEventDetail>>({ alias: 'luzmoFiltersChanged' });
 
+  /** Announces that a parameter was created and added to `parameters`. */
+  readonly luzmoParameterCreated = output<CustomEvent<{ parameter: FilterParameter }>>({ alias: 'luzmoParameterCreated' });
+
+  /** Announces that a parameter was detached from a filter. */
+  readonly luzmoParameterRemoved = output<CustomEvent<{ parameter: FilterParameter }>>({ alias: 'luzmoParameterRemoved' });
+
   constructor() {
     this.bindEvents();
     this.destroyRef.onDestroy(() => {
@@ -121,6 +138,15 @@ export class LuzmoFilters implements OnChanges {
         case 'filters':
           this.setHostProperty('filters', changes['filters'].currentValue);
           break;
+        case 'format':
+          this.setHostProperty('format', changes['format'].currentValue);
+          break;
+        case 'allowParameters':
+          this.setHostProperty('allowParameters', changes['allowParameters'].currentValue);
+          break;
+        case 'parameters':
+          this.setHostProperty('parameters', changes['parameters'].currentValue);
+          break;
         case 'debounce':
           this.setHostProperty('debounce', changes['debounce'].currentValue);
           break;
@@ -162,6 +188,20 @@ export class LuzmoFilters implements OnChanges {
         this.luzmoFiltersChanged.emit(typed);
       })
     );
+
+    this.listenerCleanup.push(
+      this.renderer.listen(this.host, 'luzmo-parameter-created', (event: Event) => {
+        const typed = event as CustomEvent<{ parameter: FilterParameter }>;
+        this.luzmoParameterCreated.emit(typed);
+      })
+    );
+
+    this.listenerCleanup.push(
+      this.renderer.listen(this.host, 'luzmo-parameter-removed', (event: Event) => {
+        const typed = event as CustomEvent<{ parameter: FilterParameter }>;
+        this.luzmoParameterRemoved.emit(typed);
+      })
+    );
   }
 }
 

package/angular/esm/components/data-fields-select.d.ts

@@ -19,6 +19,8 @@ export declare class LuzmoDataFieldsSelect implements OnChanges {
     label?: string;
     /** Where to show icons */
     icons?: 'none' | 'menu-only' | 'all';
+    /** Whether datetime and hierarchy columns expand into selectable sublevels. Turn this off in contexts that address the column as a whole, so the column stays selectable by its own id. */
+    levels?: 'on' | 'off';
     /** Allow no selection. If true, the picker will not show a value when no item is selected. Else if no value is provided it will pick the first item. */
     allowEmpty?: boolean;
     /** The placeholder text for the picker is no value selected. If allowEmpty is true, this will be used as the label. */
@@ -66,7 +68,7 @@ export declare class LuzmoDataFieldsSelect implements OnChanges {
     private setHostProperty;
     private bindEvents;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoDataFieldsSelect, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoDataFieldsSelect, "luzmo-data-fields-select", ["luzmoDataFieldsSelect"], { "contentLanguage": { "alias": "contentLanguage"; "required": false; }; "label": { "alias": "label"; "required": false; }; "icons": { "alias": "icons"; "required": false; }; "allowEmpty": { "alias": "allowEmpty"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "selects": { "alias": "selects"; "required": false; }; "value": { "alias": "value"; "required": false; }; "retrieving": { "alias": "retrieving"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "pending": { "alias": "pending"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "search": { "alias": "search"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "datasetsDataFields": { "alias": "datasetsDataFields"; "required": false; }; "language": { "alias": "language"; "required": false; }; "size": { "alias": "size"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "luzmoDataFieldsSelected": "luzmoDataFieldsSelected"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoDataFieldsSelect, "luzmo-data-fields-select", ["luzmoDataFieldsSelect"], { "contentLanguage": { "alias": "contentLanguage"; "required": false; }; "label": { "alias": "label"; "required": false; }; "icons": { "alias": "icons"; "required": false; }; "levels": { "alias": "levels"; "required": false; }; "allowEmpty": { "alias": "allowEmpty"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "selects": { "alias": "selects"; "required": false; }; "value": { "alias": "value"; "required": false; }; "retrieving": { "alias": "retrieving"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "pending": { "alias": "pending"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "search": { "alias": "search"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "datasetsDataFields": { "alias": "datasetsDataFields"; "required": false; }; "language": { "alias": "language"; "required": false; }; "size": { "alias": "size"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "luzmoDataFieldsSelected": "luzmoDataFieldsSelected"; }, never, ["*"], true, never>;
     static ngAcceptInputType_allowEmpty: unknown;
     static ngAcceptInputType_retrieving: unknown;
     static ngAcceptInputType_invalid: unknown;

package/angular/esm/components/data-fields-select.js

@@ -21,6 +21,8 @@ export class LuzmoDataFieldsSelect {
     label;
     /** Where to show icons */
     icons;
+    /** Whether datetime and hierarchy columns expand into selectable sublevels. Turn this off in contexts that address the column as a whole, so the column stays selectable by its own id. */
+    levels;
     /** Allow no selection. If true, the picker will not show a value when no item is selected. Else if no value is provided it will pick the first item. */
     allowEmpty;
     /** The placeholder text for the picker is no value selected. If allowEmpty is true, this will be used as the label. */
@@ -75,6 +77,9 @@ export class LuzmoDataFieldsSelect {
                 case 'icons':
                     this.setHostProperty('icons', changes['icons'].currentValue);
                     break;
+                case 'levels':
+                    this.setHostProperty('levels', changes['levels'].currentValue);
+                    break;
                 case 'allowEmpty':
                     this.setHostProperty('allowEmpty', changes['allowEmpty'].currentValue);
                     break;
@@ -144,7 +149,7 @@ export class LuzmoDataFieldsSelect {
         }));
     }
     static ɵfac = function LuzmoDataFieldsSelect_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoDataFieldsSelect)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoDataFieldsSelect, selectors: [["luzmo-data-fields-select"]], inputs: { contentLanguage: "contentLanguage", label: "label", icons: "icons", allowEmpty: [2, "allowEmpty", "allowEmpty", booleanAttribute], placeholder: "placeholder", selects: "selects", value: "value", retrieving: [2, "retrieving", "retrieving", booleanAttribute], invalid: [2, "invalid", "invalid", booleanAttribute], clearable: [2, "clearable", "clearable", booleanAttribute], pending: [2, "pending", "pending", booleanAttribute], disabled: [2, "disabled", "disabled", booleanAttribute], search: "search", placement: "placement", datasetsDataFields: "datasetsDataFields", language: "language", size: "size", autofocus: [2, "autofocus", "autofocus", booleanAttribute], tabIndex: "tabIndex" }, outputs: { luzmoDataFieldsSelected: "luzmoDataFieldsSelected" }, exportAs: ["luzmoDataFieldsSelect"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoDataFieldsSelect_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoDataFieldsSelect, selectors: [["luzmo-data-fields-select"]], inputs: { contentLanguage: "contentLanguage", label: "label", icons: "icons", levels: "levels", allowEmpty: [2, "allowEmpty", "allowEmpty", booleanAttribute], placeholder: "placeholder", selects: "selects", value: "value", retrieving: [2, "retrieving", "retrieving", booleanAttribute], invalid: [2, "invalid", "invalid", booleanAttribute], clearable: [2, "clearable", "clearable", booleanAttribute], pending: [2, "pending", "pending", booleanAttribute], disabled: [2, "disabled", "disabled", booleanAttribute], search: "search", placement: "placement", datasetsDataFields: "datasetsDataFields", language: "language", size: "size", autofocus: [2, "autofocus", "autofocus", booleanAttribute], tabIndex: "tabIndex" }, outputs: { luzmoDataFieldsSelected: "luzmoDataFieldsSelected" }, exportAs: ["luzmoDataFieldsSelect"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoDataFieldsSelect_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
         } }, encapsulation: 2 });
@@ -167,6 +172,9 @@ export class LuzmoDataFieldsSelect {
         }], icons: [{
             type: Input,
             args: [{ alias: 'icons' }]
+        }], levels: [{
+            type: Input,
+            args: [{ alias: 'levels' }]
         }], allowEmpty: [{
             type: Input,
             args: [{ alias: 'allowEmpty', transform: booleanAttribute }]

package/angular/esm/components/filter-item.d.ts

@@ -1,6 +1,7 @@
 import { OnChanges, SimpleChanges } from '@angular/core';
 import '@luzmo/analytics-components-kit/filter-item';
 import type { LuzmoFilterItem as LuzmoFilterItemHostElement } from '@luzmo/analytics-components-kit/filter-item';
+import type { FilterParameter } from '@luzmo/analytics-components-kit/filters';
 import * as i0 from "@angular/core";
 export declare class LuzmoFilterItem implements OnChanges {
     private readonly elementRef;
@@ -26,6 +27,10 @@ export declare class LuzmoFilterItem implements OnChanges {
     datasetIds?: string[];
     /** The filter to display */
     filter?: any;
+    /** Whether parameter-backed filter values can be created and selected. */
+    allowParameters?: boolean;
+    /** Consumer-owned parameter definitions available for selection. */
+    parameters?: FilterParameter[];
     /** The language for UI labels. Supported values: 'en', 'nl', 'fr', 'de', 'es' */
     language?: string;
     /** The size of the element */
@@ -49,7 +54,8 @@ export declare class LuzmoFilterItem implements OnChanges {
     private setHostProperty;
     private bindEvents;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoFilterItem, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoFilterItem, "luzmo-filter-item", ["luzmoFilterItem"], { "apiUrl": { "alias": "apiUrl"; "required": false; }; "authKey": { "alias": "authKey"; "required": false; }; "authToken": { "alias": "authToken"; "required": false; }; "cacheTime": { "alias": "cacheTime"; "required": false; }; "contentLanguage": { "alias": "contentLanguage"; "required": false; }; "timeZone": { "alias": "timeZone"; "required": false; }; "datasetIds": { "alias": "datasetIds"; "required": false; }; "filter": { "alias": "filter"; "required": false; }; "language": { "alias": "language"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "luzmoFilterChanged": "luzmoFilterChanged"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoFilterItem, "luzmo-filter-item", ["luzmoFilterItem"], { "apiUrl": { "alias": "apiUrl"; "required": false; }; "authKey": { "alias": "authKey"; "required": false; }; "authToken": { "alias": "authToken"; "required": false; }; "cacheTime": { "alias": "cacheTime"; "required": false; }; "contentLanguage": { "alias": "contentLanguage"; "required": false; }; "timeZone": { "alias": "timeZone"; "required": false; }; "datasetIds": { "alias": "datasetIds"; "required": false; }; "filter": { "alias": "filter"; "required": false; }; "allowParameters": { "alias": "allowParameters"; "required": false; }; "parameters": { "alias": "parameters"; "required": false; }; "language": { "alias": "language"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "luzmoFilterChanged": "luzmoFilterChanged"; }, never, ["*"], true, never>;
+    static ngAcceptInputType_allowParameters: unknown;
     static ngAcceptInputType_disabled: unknown;
     static ngAcceptInputType_autofocus: unknown;
 }

package/angular/esm/components/filter-item.js

@@ -31,6 +31,10 @@ export class LuzmoFilterItem {
     datasetIds;
     /** The filter to display */
     filter;
+    /** Whether parameter-backed filter values can be created and selected. */
+    allowParameters;
+    /** Consumer-owned parameter definitions available for selection. */
+    parameters;
     /** The language for UI labels. Supported values: 'en', 'nl', 'fr', 'de', 'es' */
     language;
     /** The size of the element */
@@ -78,6 +82,12 @@ export class LuzmoFilterItem {
                 case 'filter':
                     this.setHostProperty('filter', changes['filter'].currentValue);
                     break;
+                case 'allowParameters':
+                    this.setHostProperty('allowParameters', changes['allowParameters'].currentValue);
+                    break;
+                case 'parameters':
+                    this.setHostProperty('parameters', changes['parameters'].currentValue);
+                    break;
                 case 'language':
                     this.setHostProperty('language', changes['language'].currentValue);
                     break;
@@ -114,7 +124,7 @@ export class LuzmoFilterItem {
         }));
     }
     static ɵfac = function LuzmoFilterItem_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoFilterItem)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoFilterItem, selectors: [["luzmo-filter-item"]], inputs: { apiUrl: "apiUrl", authKey: "authKey", authToken: "authToken", cacheTime: "cacheTime", contentLanguage: "contentLanguage", timeZone: "timeZone", datasetIds: "datasetIds", filter: "filter", language: "language", size: "size", disabled: [2, "disabled", "disabled", booleanAttribute], autofocus: [2, "autofocus", "autofocus", booleanAttribute], tabIndex: "tabIndex" }, outputs: { luzmoFilterChanged: "luzmoFilterChanged" }, exportAs: ["luzmoFilterItem"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoFilterItem_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoFilterItem, selectors: [["luzmo-filter-item"]], inputs: { apiUrl: "apiUrl", authKey: "authKey", authToken: "authToken", cacheTime: "cacheTime", contentLanguage: "contentLanguage", timeZone: "timeZone", datasetIds: "datasetIds", filter: "filter", allowParameters: [2, "allowParameters", "allowParameters", booleanAttribute], parameters: "parameters", language: "language", size: "size", disabled: [2, "disabled", "disabled", booleanAttribute], autofocus: [2, "autofocus", "autofocus", booleanAttribute], tabIndex: "tabIndex" }, outputs: { luzmoFilterChanged: "luzmoFilterChanged" }, exportAs: ["luzmoFilterItem"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoFilterItem_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
         } }, encapsulation: 2 });
@@ -152,6 +162,12 @@ export class LuzmoFilterItem {
         }], filter: [{
             type: Input,
             args: [{ alias: 'filter' }]
+        }], allowParameters: [{
+            type: Input,
+            args: [{ alias: 'allowParameters', transform: booleanAttribute }]
+        }], parameters: [{
+            type: Input,
+            args: [{ alias: 'parameters' }]
         }], language: [{
             type: Input,
             args: [{ alias: 'language' }]
@@ -168,4 +184,4 @@ export class LuzmoFilterItem {
             type: Input,
             args: [{ alias: 'tabIndex' }]
         }], luzmoFilterChanged: [{ type: i0.Output, args: ["luzmoFilterChanged"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoFilterItem, { className: "LuzmoFilterItem", filePath: "components/filter-item.ts", lineNumber: 15 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoFilterItem, { className: "LuzmoFilterItem", filePath: "components/filter-item.ts", lineNumber: 16 }); })();

package/angular/esm/components/filter-parameter-picker.d.ts

@@ -1,7 +1,10 @@
 import { OnChanges, SimpleChanges } from '@angular/core';
 import '@luzmo/analytics-components-kit/filter-parameter-picker';
-import type { LuzmoFilterParameterPicker as LuzmoFilterParameterPickerHostElement } from '@luzmo/analytics-components-kit/filter-parameter-picker';
+import type { LuzmoFilterParameterPicker as LuzmoFilterParameterPickerHostElement, FilterParameterPickerEventDetail } from '@luzmo/analytics-components-kit/filter-parameter-picker';
+import type { FilterParameterType } from '@luzmo/analytics-components-kit/filters';
+import type { ItemFilterParameterDefinition } from '@luzmo/dashboard-contents-types';
 import * as i0 from "@angular/core";
+export type { FilterParameterPickerEventDetail } from '@luzmo/analytics-components-kit/filter-parameter-picker';
 export declare class LuzmoFilterParameterPicker implements OnChanges {
     private readonly elementRef;
     private readonly renderer;
@@ -10,18 +13,30 @@ export declare class LuzmoFilterParameterPicker implements OnChanges {
     private readonly listenerCleanup;
     /** The underlying custom element instance. Use to call imperative methods. */
     get nativeElement(): LuzmoFilterParameterPickerHostElement;
-    /** The language of the settings interface */
+    /** Parameter definitions available for selection. */
+    parameters?: ItemFilterParameterDefinition[];
+    /** Parameter types compatible with the active field and expression. */
+    allowedTypes?: FilterParameterType[];
+    /** The parameter currently attached to the filter. */
+    selectedParameter?: ItemFilterParameterDefinition;
+    /** The current literal filter value used as the default for a new parameter. */
+    currentValue?: unknown;
+    /** Whether parameter selection is disabled. */
+    disabled?: boolean;
+    /** The language for UI labels. Supported values: 'en', 'nl', 'fr', 'de', 'es' */
     language?: string;
-    /** The language to use for locale-aware formatting and labels */
-    contentLanguage?: string;
     /** The size of the element */
     size?: 's' | 'm' | 'l' | 'xl';
-    /** Disable this control. It will not receive focus or events */
-    disabled?: boolean;
     /** When this control is rendered, focus it automatically */
     autofocus?: boolean;
     /** The tab index to apply to this control. See general documentation about the tabindex HTML property */
     tabIndex?: number;
+    /** Fired when a parameter is selected. */
+    readonly luzmoParameterSelected: import("@angular/core").OutputEmitterRef<CustomEvent<FilterParameterPickerEventDetail>>;
+    /** Fired when a parameter is created. */
+    readonly luzmoParameterCreated: import("@angular/core").OutputEmitterRef<CustomEvent<FilterParameterPickerEventDetail>>;
+    /** Fired when a parameter is detached from the filter. */
+    readonly luzmoParameterRemoved: import("@angular/core").OutputEmitterRef<CustomEvent<FilterParameterPickerEventDetail>>;
     constructor();
     ngOnChanges(changes: SimpleChanges): void;
     /**
@@ -33,7 +48,7 @@ export declare class LuzmoFilterParameterPicker implements OnChanges {
     private setHostProperty;
     private bindEvents;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoFilterParameterPicker, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoFilterParameterPicker, "luzmo-filter-parameter-picker", ["luzmoFilterParameterPicker"], { "language": { "alias": "language"; "required": false; }; "contentLanguage": { "alias": "contentLanguage"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoFilterParameterPicker, "luzmo-filter-parameter-picker", ["luzmoFilterParameterPicker"], { "parameters": { "alias": "parameters"; "required": false; }; "allowedTypes": { "alias": "allowedTypes"; "required": false; }; "selectedParameter": { "alias": "selectedParameter"; "required": false; }; "currentValue": { "alias": "currentValue"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "language": { "alias": "language"; "required": false; }; "size": { "alias": "size"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "luzmoParameterSelected": "luzmoParameterSelected"; "luzmoParameterCreated": "luzmoParameterCreated"; "luzmoParameterRemoved": "luzmoParameterRemoved"; }, never, ["*"], true, never>;
     static ngAcceptInputType_disabled: unknown;
     static ngAcceptInputType_autofocus: unknown;
 }