@luzmo/analytics-components-kit 1.0.8-beta.5 → 1.0.8-beta.6

package/angular/esm/components/data-field-panel.d.ts

@@ -0,0 +1,86 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import '@luzmo/analytics-components-kit/data-field-panel';
+import type { LuzmoDataFieldPanel as LuzmoDataFieldPanelHostElement, DataFieldDragStartedEventDetail, DataFieldDroppedEventDetail, DatasetChangedEventDetail, DatasetDataFields } from '@luzmo/analytics-components-kit/data-field-panel';
+import * as i0 from "@angular/core";
+export type { DataFieldDragStartedEventDetail, DataFieldDroppedEventDetail, DatasetChangedEventDetail, DatasetDataFields } from '@luzmo/analytics-components-kit/data-field-panel';
+export declare class LuzmoDataFieldPanel implements OnChanges {
+    private readonly elementRef;
+    private readonly renderer;
+    private readonly destroyRef;
+    private readonly host;
+    private readonly listenerCleanup;
+    /** The underlying custom element instance. Use to call imperative methods. */
+    get nativeElement(): LuzmoDataFieldPanelHostElement;
+    /** Array of dataset IDs to fetch and display. Used as an alternative to datasetsDataFields - when provided (and datasetsDataFields is empty), the component will fetch the dataset metadata automatically. Requires apiUrl, authKey, and authToken to be set. */
+    datasetIds?: string[];
+    /** The datasets and their data fields (columns and formulas) to display. Takes preference over datasetIds when provided. */
+    datasetsDataFields?: DatasetDataFields[];
+    /** The currently selected dataset ID. If not provided, defaults to the first available dataset. */
+    selectedDatasetId?: string;
+    /** Whether to show the dataset picker dropdown. */
+    datasetPicker?: boolean;
+    /** Whether the panel is disabled. */
+    disabled?: boolean;
+    /** Whether the panel is in a pending/loading state. When true, shows a loading indicator instead of data fields. */
+    pending?: boolean;
+    /** Visual variant for the draggable items. */
+    dataFieldVariant?: 'highlight' | 'normal';
+    /** Whether the search input should use quiet styling. */
+    searchQuiet?: boolean;
+    /** Whether to hide the type icons on data fields. */
+    hideTypeIcon?: boolean;
+    /** Whether to hide the sublevels (datetime levels, hierarchy levels) on data fields. */
+    hideSublevels?: boolean;
+    /** Placeholder text for the dataset picker. */
+    datasetPickerPlaceholder?: string;
+    /** The Luzmo API URL. Required when using datasetIds. */
+    apiUrl?: string;
+    /** Authentication key for the Luzmo API. Required when using datasetIds. */
+    authKey?: string;
+    /** Authentication token for the Luzmo API. Required when using datasetIds. */
+    authToken?: string;
+    /** The search input container */
+    search?: 'on' | 'off' | 'auto';
+    /** Placeholder text for the search input. */
+    searchPlaceholder?: string;
+    /** Threshold for auto-showing search (number of items). */
+    searchThreshold?: number;
+    /** The main container element */
+    container?: string;
+    /** The scrollable list of data fields */
+    datafieldslist?: string;
+    /** The pending state container with progress circle */
+    pendingstate?: string;
+    /** The empty state container when no data fields are available */
+    emptystate?: string;
+    /** The language for UI labels. Supported values: 'en', 'nl', 'fr', 'de', 'es' */
+    language?: string;
+    /** The size of the element */
+    size?: 's' | 'm' | 'l' | 'xl';
+    /** Announces that the selected dataset has changed */
+    readonly luzmoDatasetChanged: import("@angular/core").OutputEmitterRef<CustomEvent<DatasetChangedEventDetail>>;
+    /** Announces that a data field has been dropped */
+    readonly luzmoDataFieldDropped: import("@angular/core").OutputEmitterRef<CustomEvent<DataFieldDroppedEventDetail>>;
+    /** Announces that a drag has started on a data field */
+    readonly luzmoDataFieldDragStarted: import("@angular/core").OutputEmitterRef<CustomEvent<DataFieldDragStartedEventDetail>>;
+    constructor();
+    ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * Forward a wrapper @Input to the underlying host element via Renderer2 so
+     * the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
+     * Unlike a "skip undefined" guard, this lets consumers reset values back to
+     * undefined / null by clearing their bindings.
+     */
+    private setHostProperty;
+    private bindEvents;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoDataFieldPanel, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoDataFieldPanel, "luzmo-data-field-panel", ["luzmoDataFieldPanel"], { "datasetIds": { "alias": "datasetIds"; "required": false; }; "datasetsDataFields": { "alias": "datasetsDataFields"; "required": false; }; "selectedDatasetId": { "alias": "selectedDatasetId"; "required": false; }; "datasetPicker": { "alias": "datasetPicker"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "pending": { "alias": "pending"; "required": false; }; "dataFieldVariant": { "alias": "dataFieldVariant"; "required": false; }; "searchQuiet": { "alias": "searchQuiet"; "required": false; }; "hideTypeIcon": { "alias": "hideTypeIcon"; "required": false; }; "hideSublevels": { "alias": "hideSublevels"; "required": false; }; "datasetPickerPlaceholder": { "alias": "datasetPickerPlaceholder"; "required": false; }; "apiUrl": { "alias": "apiUrl"; "required": false; }; "authKey": { "alias": "authKey"; "required": false; }; "authToken": { "alias": "authToken"; "required": false; }; "search": { "alias": "search"; "required": false; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; }; "searchThreshold": { "alias": "searchThreshold"; "required": false; }; "container": { "alias": "container"; "required": false; }; "datafieldslist": { "alias": "dataFieldsList"; "required": false; }; "pendingstate": { "alias": "pendingState"; "required": false; }; "emptystate": { "alias": "emptyState"; "required": false; }; "language": { "alias": "language"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "luzmoDatasetChanged": "luzmoDatasetChanged"; "luzmoDataFieldDropped": "luzmoDataFieldDropped"; "luzmoDataFieldDragStarted": "luzmoDataFieldDragStarted"; }, never, ["*"], true, never>;
+    static ngAcceptInputType_datasetPicker: unknown;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_pending: unknown;
+    static ngAcceptInputType_searchQuiet: unknown;
+    static ngAcceptInputType_hideTypeIcon: unknown;
+    static ngAcceptInputType_hideSublevels: unknown;
+}
+/** The underlying custom element type for LuzmoDataFieldPanel */
+export type LuzmoDataFieldPanelElement = LuzmoDataFieldPanelHostElement;

package/angular/esm/components/data-field-panel.js

@@ -0,0 +1,268 @@
+import { booleanAttribute, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, output, Renderer2 } from '@angular/core';
+import '@luzmo/analytics-components-kit/data-field-panel';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+/**
+ * A panel component that displays a list of data fields from a dataset.
+ * Optionally includes a dataset picker dropdown to switch between datasets.
+ *
+ * Data can be provided in two ways:
+ * 1. `datasetsDataFields` - Direct data, takes preference when provided
+ * 2. `datasetIds` + auth props - Fetches data automatically using the Luzmo API
+ */
+export class LuzmoDataFieldPanel {
+    elementRef = inject(ElementRef);
+    renderer = inject(Renderer2);
+    destroyRef = inject(DestroyRef);
+    host = this.elementRef.nativeElement;
+    listenerCleanup = [];
+    /** The underlying custom element instance. Use to call imperative methods. */
+    get nativeElement() {
+        return this.host;
+    }
+    /** Array of dataset IDs to fetch and display. Used as an alternative to datasetsDataFields - when provided (and datasetsDataFields is empty), the component will fetch the dataset metadata automatically. Requires apiUrl, authKey, and authToken to be set. */
+    datasetIds;
+    /** The datasets and their data fields (columns and formulas) to display. Takes preference over datasetIds when provided. */
+    datasetsDataFields;
+    /** The currently selected dataset ID. If not provided, defaults to the first available dataset. */
+    selectedDatasetId;
+    /** Whether to show the dataset picker dropdown. */
+    datasetPicker;
+    /** Whether the panel is disabled. */
+    disabled;
+    /** Whether the panel is in a pending/loading state. When true, shows a loading indicator instead of data fields. */
+    pending;
+    /** Visual variant for the draggable items. */
+    dataFieldVariant;
+    /** Whether the search input should use quiet styling. */
+    searchQuiet;
+    /** Whether to hide the type icons on data fields. */
+    hideTypeIcon;
+    /** Whether to hide the sublevels (datetime levels, hierarchy levels) on data fields. */
+    hideSublevels;
+    /** Placeholder text for the dataset picker. */
+    datasetPickerPlaceholder;
+    /** The Luzmo API URL. Required when using datasetIds. */
+    apiUrl;
+    /** Authentication key for the Luzmo API. Required when using datasetIds. */
+    authKey;
+    /** Authentication token for the Luzmo API. Required when using datasetIds. */
+    authToken;
+    /** The search input container */
+    search;
+    /** Placeholder text for the search input. */
+    searchPlaceholder;
+    /** Threshold for auto-showing search (number of items). */
+    searchThreshold;
+    /** The main container element */
+    container;
+    /** The scrollable list of data fields */
+    datafieldslist;
+    /** The pending state container with progress circle */
+    pendingstate;
+    /** The empty state container when no data fields are available */
+    emptystate;
+    /** The language for UI labels. Supported values: 'en', 'nl', 'fr', 'de', 'es' */
+    language;
+    /** The size of the element */
+    size;
+    /** Announces that the selected dataset has changed */
+    luzmoDatasetChanged = output({ alias: 'luzmoDatasetChanged' });
+    /** Announces that a data field has been dropped */
+    luzmoDataFieldDropped = output({ alias: 'luzmoDataFieldDropped' });
+    /** Announces that a drag has started on a data field */
+    luzmoDataFieldDragStarted = output({ alias: 'luzmoDataFieldDragStarted' });
+    constructor() {
+        this.bindEvents();
+        this.destroyRef.onDestroy(() => {
+            for (const cleanup of this.listenerCleanup) {
+                cleanup();
+            }
+        });
+    }
+    ngOnChanges(changes) {
+        for (const key of Object.keys(changes)) {
+            switch (key) {
+                case 'datasetIds':
+                    this.setHostProperty('datasetIds', changes['datasetIds'].currentValue);
+                    break;
+                case 'datasetsDataFields':
+                    this.setHostProperty('datasetsDataFields', changes['datasetsDataFields'].currentValue);
+                    break;
+                case 'selectedDatasetId':
+                    this.setHostProperty('selectedDatasetId', changes['selectedDatasetId'].currentValue);
+                    break;
+                case 'datasetPicker':
+                    this.setHostProperty('datasetPicker', changes['datasetPicker'].currentValue);
+                    break;
+                case 'disabled':
+                    this.setHostProperty('disabled', changes['disabled'].currentValue);
+                    break;
+                case 'pending':
+                    this.setHostProperty('pending', changes['pending'].currentValue);
+                    break;
+                case 'dataFieldVariant':
+                    this.setHostProperty('dataFieldVariant', changes['dataFieldVariant'].currentValue);
+                    break;
+                case 'searchQuiet':
+                    this.setHostProperty('searchQuiet', changes['searchQuiet'].currentValue);
+                    break;
+                case 'hideTypeIcon':
+                    this.setHostProperty('hideTypeIcon', changes['hideTypeIcon'].currentValue);
+                    break;
+                case 'hideSublevels':
+                    this.setHostProperty('hideSublevels', changes['hideSublevels'].currentValue);
+                    break;
+                case 'datasetPickerPlaceholder':
+                    this.setHostProperty('datasetPickerPlaceholder', changes['datasetPickerPlaceholder'].currentValue);
+                    break;
+                case 'apiUrl':
+                    this.setHostProperty('apiUrl', changes['apiUrl'].currentValue);
+                    break;
+                case 'authKey':
+                    this.setHostProperty('authKey', changes['authKey'].currentValue);
+                    break;
+                case 'authToken':
+                    this.setHostProperty('authToken', changes['authToken'].currentValue);
+                    break;
+                case 'search':
+                    this.setHostProperty('search', changes['search'].currentValue);
+                    break;
+                case 'searchPlaceholder':
+                    this.setHostProperty('searchPlaceholder', changes['searchPlaceholder'].currentValue);
+                    break;
+                case 'searchThreshold':
+                    this.setHostProperty('searchThreshold', changes['searchThreshold'].currentValue);
+                    break;
+                case 'container':
+                    this.setHostProperty('container', changes['container'].currentValue);
+                    break;
+                case 'datafieldslist':
+                    this.setHostProperty('data-fields-list', changes['datafieldslist'].currentValue);
+                    break;
+                case 'pendingstate':
+                    this.setHostProperty('pending-state', changes['pendingstate'].currentValue);
+                    break;
+                case 'emptystate':
+                    this.setHostProperty('empty-state', changes['emptystate'].currentValue);
+                    break;
+                case 'language':
+                    this.setHostProperty('language', changes['language'].currentValue);
+                    break;
+                case 'size':
+                    this.setHostProperty('size', changes['size'].currentValue);
+                    break;
+                default:
+                    break;
+            }
+        }
+    }
+    /**
+     * Forward a wrapper @Input to the underlying host element via Renderer2 so
+     * the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
+     * Unlike a "skip undefined" guard, this lets consumers reset values back to
+     * undefined / null by clearing their bindings.
+     */
+    setHostProperty(key, value) {
+        this.renderer.setProperty(this.host, key, value);
+    }
+    bindEvents() {
+        this.listenerCleanup.push(this.renderer.listen(this.host, 'luzmo-dataset-changed', (event) => {
+            const typed = event;
+            this.luzmoDatasetChanged.emit(typed);
+        }));
+        this.listenerCleanup.push(this.renderer.listen(this.host, 'luzmo-data-field-dropped', (event) => {
+            const typed = event;
+            this.luzmoDataFieldDropped.emit(typed);
+        }));
+        this.listenerCleanup.push(this.renderer.listen(this.host, 'luzmo-data-field-drag-started', (event) => {
+            const typed = event;
+            this.luzmoDataFieldDragStarted.emit(typed);
+        }));
+    }
+    static ɵfac = function LuzmoDataFieldPanel_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoDataFieldPanel)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoDataFieldPanel, selectors: [["luzmo-data-field-panel"]], inputs: { datasetIds: "datasetIds", datasetsDataFields: "datasetsDataFields", selectedDatasetId: "selectedDatasetId", datasetPicker: [2, "datasetPicker", "datasetPicker", booleanAttribute], disabled: [2, "disabled", "disabled", booleanAttribute], pending: [2, "pending", "pending", booleanAttribute], dataFieldVariant: "dataFieldVariant", searchQuiet: [2, "searchQuiet", "searchQuiet", booleanAttribute], hideTypeIcon: [2, "hideTypeIcon", "hideTypeIcon", booleanAttribute], hideSublevels: [2, "hideSublevels", "hideSublevels", booleanAttribute], datasetPickerPlaceholder: "datasetPickerPlaceholder", apiUrl: "apiUrl", authKey: "authKey", authToken: "authToken", search: "search", searchPlaceholder: "searchPlaceholder", searchThreshold: "searchThreshold", container: "container", datafieldslist: [0, "dataFieldsList", "datafieldslist"], pendingstate: [0, "pendingState", "pendingstate"], emptystate: [0, "emptyState", "emptystate"], language: "language", size: "size" }, outputs: { luzmoDatasetChanged: "luzmoDatasetChanged", luzmoDataFieldDropped: "luzmoDataFieldDropped", luzmoDataFieldDragStarted: "luzmoDataFieldDragStarted" }, exportAs: ["luzmoDataFieldPanel"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoDataFieldPanel_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0);
+        } }, encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoDataFieldPanel, [{
+        type: Component,
+        args: [{
+                selector: 'luzmo-data-field-panel',
+                exportAs: 'luzmoDataFieldPanel',
+                standalone: true,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content />'
+            }]
+    }], () => [], { datasetIds: [{
+            type: Input,
+            args: [{ alias: 'datasetIds' }]
+        }], datasetsDataFields: [{
+            type: Input,
+            args: [{ alias: 'datasetsDataFields' }]
+        }], selectedDatasetId: [{
+            type: Input,
+            args: [{ alias: 'selectedDatasetId' }]
+        }], datasetPicker: [{
+            type: Input,
+            args: [{ alias: 'datasetPicker', transform: booleanAttribute }]
+        }], disabled: [{
+            type: Input,
+            args: [{ alias: 'disabled', transform: booleanAttribute }]
+        }], pending: [{
+            type: Input,
+            args: [{ alias: 'pending', transform: booleanAttribute }]
+        }], dataFieldVariant: [{
+            type: Input,
+            args: [{ alias: 'dataFieldVariant' }]
+        }], searchQuiet: [{
+            type: Input,
+            args: [{ alias: 'searchQuiet', transform: booleanAttribute }]
+        }], hideTypeIcon: [{
+            type: Input,
+            args: [{ alias: 'hideTypeIcon', transform: booleanAttribute }]
+        }], hideSublevels: [{
+            type: Input,
+            args: [{ alias: 'hideSublevels', transform: booleanAttribute }]
+        }], datasetPickerPlaceholder: [{
+            type: Input,
+            args: [{ alias: 'datasetPickerPlaceholder' }]
+        }], apiUrl: [{
+            type: Input,
+            args: [{ alias: 'apiUrl' }]
+        }], authKey: [{
+            type: Input,
+            args: [{ alias: 'authKey' }]
+        }], authToken: [{
+            type: Input,
+            args: [{ alias: 'authToken' }]
+        }], search: [{
+            type: Input,
+            args: [{ alias: 'search' }]
+        }], searchPlaceholder: [{
+            type: Input,
+            args: [{ alias: 'searchPlaceholder' }]
+        }], searchThreshold: [{
+            type: Input,
+            args: [{ alias: 'searchThreshold' }]
+        }], container: [{
+            type: Input,
+            args: [{ alias: 'container' }]
+        }], datafieldslist: [{
+            type: Input,
+            args: [{ alias: 'dataFieldsList' }]
+        }], pendingstate: [{
+            type: Input,
+            args: [{ alias: 'pendingState' }]
+        }], emptystate: [{
+            type: Input,
+            args: [{ alias: 'emptyState' }]
+        }], language: [{
+            type: Input,
+            args: [{ alias: 'language' }]
+        }], size: [{
+            type: Input,
+            args: [{ alias: 'size' }]
+        }], luzmoDatasetChanged: [{ type: i0.Output, args: ["luzmoDatasetChanged"] }], luzmoDataFieldDropped: [{ type: i0.Output, args: ["luzmoDataFieldDropped"] }], luzmoDataFieldDragStarted: [{ type: i0.Output, args: ["luzmoDataFieldDragStarted"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoDataFieldPanel, { className: "LuzmoDataFieldPanel", filePath: "components/data-field-panel.ts", lineNumber: 21 }); })();

package/angular/esm/components/data-field.d.ts

@@ -0,0 +1,50 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import '@luzmo/analytics-components-kit/data-field';
+import type { LuzmoDataField as LuzmoDataFieldHostElement, DataFieldDragStartedEventDetail, DataFieldDroppedEventDetail } from '@luzmo/analytics-components-kit/data-field';
+import type { DatasetDataField } from '@luzmo/analytics-components-kit/types';
+import * as i0 from "@angular/core";
+export type { DataFieldDragStartedEventDetail, DataFieldDroppedEventDetail, DatasetDataFieldWithSublevel } from '@luzmo/analytics-components-kit/data-field';
+export declare class LuzmoDataField implements OnChanges {
+    private readonly elementRef;
+    private readonly renderer;
+    private readonly destroyRef;
+    private readonly host;
+    private readonly listenerCleanup;
+    /** The underlying custom element instance. Use to call imperative methods. */
+    get nativeElement(): LuzmoDataFieldHostElement;
+    /** Visual treatment of the field: `highlight` to emphasize it, or `normal` (default). */
+    variant?: 'highlight' | 'normal';
+    /** Whether the data field is disabled (non-interactive and visually muted). */
+    disabled?: boolean;
+    /** Hides the expandable sublevel rows (datetime levels and hierarchy levels). */
+    hideSublevels?: boolean;
+    /** Hides the data type icon shown before the field label. */
+    hideTypeIcon?: boolean;
+    /** The dataset data field descriptor to render (a column or formula field). */
+    data?: DatasetDataField;
+    /** The language for UI labels. Supported values: 'en', 'nl', 'fr', 'de', 'es' */
+    language?: string;
+    /** The size of the element */
+    size?: 's' | 'm' | 'l' | 'xl';
+    /** Announces that the data field has been dropped */
+    readonly luzmoDataFieldDropped: import("@angular/core").OutputEmitterRef<CustomEvent<DataFieldDroppedEventDetail>>;
+    /** Announces that the drag is started on the data field */
+    readonly luzmoDataFieldDragStarted: import("@angular/core").OutputEmitterRef<CustomEvent<DataFieldDragStartedEventDetail>>;
+    constructor();
+    ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * Forward a wrapper @Input to the underlying host element via Renderer2 so
+     * the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
+     * Unlike a "skip undefined" guard, this lets consumers reset values back to
+     * undefined / null by clearing their bindings.
+     */
+    private setHostProperty;
+    private bindEvents;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoDataField, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoDataField, "luzmo-data-field", ["luzmoDataField"], { "variant": { "alias": "variant"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "hideSublevels": { "alias": "hideSublevels"; "required": false; }; "hideTypeIcon": { "alias": "hideTypeIcon"; "required": false; }; "data": { "alias": "data"; "required": false; }; "language": { "alias": "language"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "luzmoDataFieldDropped": "luzmoDataFieldDropped"; "luzmoDataFieldDragStarted": "luzmoDataFieldDragStarted"; }, never, ["*"], true, never>;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_hideSublevels: unknown;
+    static ngAcceptInputType_hideTypeIcon: unknown;
+}
+/** The underlying custom element type for LuzmoDataField */
+export type LuzmoDataFieldElement = LuzmoDataFieldHostElement;

package/angular/esm/components/data-field.js

@@ -0,0 +1,129 @@
+import { booleanAttribute, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, output, Renderer2 } from '@angular/core';
+import '@luzmo/analytics-components-kit/data-field';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+/**
+ * Angular wrapper component for <luzmo-data-field>
+ */
+export class LuzmoDataField {
+    elementRef = inject(ElementRef);
+    renderer = inject(Renderer2);
+    destroyRef = inject(DestroyRef);
+    host = this.elementRef.nativeElement;
+    listenerCleanup = [];
+    /** The underlying custom element instance. Use to call imperative methods. */
+    get nativeElement() {
+        return this.host;
+    }
+    /** Visual treatment of the field: `highlight` to emphasize it, or `normal` (default). */
+    variant;
+    /** Whether the data field is disabled (non-interactive and visually muted). */
+    disabled;
+    /** Hides the expandable sublevel rows (datetime levels and hierarchy levels). */
+    hideSublevels;
+    /** Hides the data type icon shown before the field label. */
+    hideTypeIcon;
+    /** The dataset data field descriptor to render (a column or formula field). */
+    data;
+    /** The language for UI labels. Supported values: 'en', 'nl', 'fr', 'de', 'es' */
+    language;
+    /** The size of the element */
+    size;
+    /** Announces that the data field has been dropped */
+    luzmoDataFieldDropped = output({ alias: 'luzmoDataFieldDropped' });
+    /** Announces that the drag is started on the data field */
+    luzmoDataFieldDragStarted = output({ alias: 'luzmoDataFieldDragStarted' });
+    constructor() {
+        this.bindEvents();
+        this.destroyRef.onDestroy(() => {
+            for (const cleanup of this.listenerCleanup) {
+                cleanup();
+            }
+        });
+    }
+    ngOnChanges(changes) {
+        for (const key of Object.keys(changes)) {
+            switch (key) {
+                case 'variant':
+                    this.setHostProperty('variant', changes['variant'].currentValue);
+                    break;
+                case 'disabled':
+                    this.setHostProperty('disabled', changes['disabled'].currentValue);
+                    break;
+                case 'hideSublevels':
+                    this.setHostProperty('hideSublevels', changes['hideSublevels'].currentValue);
+                    break;
+                case 'hideTypeIcon':
+                    this.setHostProperty('hideTypeIcon', changes['hideTypeIcon'].currentValue);
+                    break;
+                case 'data':
+                    this.setHostProperty('data', changes['data'].currentValue);
+                    break;
+                case 'language':
+                    this.setHostProperty('language', changes['language'].currentValue);
+                    break;
+                case 'size':
+                    this.setHostProperty('size', changes['size'].currentValue);
+                    break;
+                default:
+                    break;
+            }
+        }
+    }
+    /**
+     * Forward a wrapper @Input to the underlying host element via Renderer2 so
+     * the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
+     * Unlike a "skip undefined" guard, this lets consumers reset values back to
+     * undefined / null by clearing their bindings.
+     */
+    setHostProperty(key, value) {
+        this.renderer.setProperty(this.host, key, value);
+    }
+    bindEvents() {
+        this.listenerCleanup.push(this.renderer.listen(this.host, 'luzmo-data-field-dropped', (event) => {
+            const typed = event;
+            this.luzmoDataFieldDropped.emit(typed);
+        }));
+        this.listenerCleanup.push(this.renderer.listen(this.host, 'luzmo-data-field-drag-started', (event) => {
+            const typed = event;
+            this.luzmoDataFieldDragStarted.emit(typed);
+        }));
+    }
+    static ɵfac = function LuzmoDataField_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoDataField)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoDataField, selectors: [["luzmo-data-field"]], inputs: { variant: "variant", disabled: [2, "disabled", "disabled", booleanAttribute], hideSublevels: [2, "hideSublevels", "hideSublevels", booleanAttribute], hideTypeIcon: [2, "hideTypeIcon", "hideTypeIcon", booleanAttribute], data: "data", language: "language", size: "size" }, outputs: { luzmoDataFieldDropped: "luzmoDataFieldDropped", luzmoDataFieldDragStarted: "luzmoDataFieldDragStarted" }, exportAs: ["luzmoDataField"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoDataField_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0);
+        } }, encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoDataField, [{
+        type: Component,
+        args: [{
+                selector: 'luzmo-data-field',
+                exportAs: 'luzmoDataField',
+                standalone: true,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content />'
+            }]
+    }], () => [], { variant: [{
+            type: Input,
+            args: [{ alias: 'variant' }]
+        }], disabled: [{
+            type: Input,
+            args: [{ alias: 'disabled', transform: booleanAttribute }]
+        }], hideSublevels: [{
+            type: Input,
+            args: [{ alias: 'hideSublevels', transform: booleanAttribute }]
+        }], hideTypeIcon: [{
+            type: Input,
+            args: [{ alias: 'hideTypeIcon', transform: booleanAttribute }]
+        }], data: [{
+            type: Input,
+            args: [{ alias: 'data' }]
+        }], language: [{
+            type: Input,
+            args: [{ alias: 'language' }]
+        }], size: [{
+            type: Input,
+            args: [{ alias: 'size' }]
+        }], luzmoDataFieldDropped: [{ type: i0.Output, args: ["luzmoDataFieldDropped"] }], luzmoDataFieldDragStarted: [{ type: i0.Output, args: ["luzmoDataFieldDragStarted"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoDataField, { className: "LuzmoDataField", filePath: "components/data-field.ts", lineNumber: 17 }); })();

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

@@ -0,0 +1,81 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import '@luzmo/analytics-components-kit/data-fields-select';
+import type { LuzmoDataFieldsSelect as LuzmoDataFieldsSelectHostElement, AdHocFormulaInput, DataFieldsSelectedEventDetail } from '@luzmo/analytics-components-kit/data-fields-select';
+import type { DatasetFormulaMetadata, DatasetMetadata } from '@luzmo/analytics-components-kit/types';
+import type { Placement } from '@luzmo/lucero';
+import * as i0 from "@angular/core";
+export type { AdHocFormulaFieldData, AdHocFormulaInput, DataFieldsSelectedEventDetail } from '@luzmo/analytics-components-kit/data-fields-select';
+export declare class LuzmoDataFieldsSelect implements OnChanges {
+    private readonly elementRef;
+    private readonly renderer;
+    private readonly destroyRef;
+    private readonly host;
+    private readonly listenerCleanup;
+    /** The underlying custom element instance. Use to call imperative methods. */
+    get nativeElement(): LuzmoDataFieldsSelectHostElement;
+    /** The language to use for locale-aware formatting and labels */
+    contentLanguage?: string;
+    /** The accessible label for the select (used for aria-label) */
+    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. */
+    placeholder?: string;
+    /** Whether the picker allows single or multiple selections. */
+    selects?: 'single' | 'multiple';
+    /** The IDs of the selected data fields. If not provided, the first item will be selected (when allowEmpty is false). */
+    value?: string[];
+    /** Whether the picker is in retrieving state (shows loading indicator) */
+    retrieving?: boolean;
+    /** Whether the picker is invalid - eg. the dataFieldId is not found in the datasetsDataFields or query failed to fetch data */
+    invalid?: boolean;
+    /** Whether the picker is clearable */
+    clearable?: boolean;
+    /** Whether the picker is in pending state */
+    pending?: boolean;
+    /** Whether the picker is disabled */
+    disabled?: boolean;
+    /** Whether to show a search field in the dropdown */
+    search?: 'on' | 'off' | 'auto';
+    /** The placement of the dropdown menu */
+    placement?: Placement;
+    /** The datasets and their dataFields to display. The `formulas` array accepts both saved formulas (with `id`) and ad hoc formulas (with a `formula` expression string). Ad hoc formulas render inline with a formula icon. */
+    datasetsDataFields?: (Pick<DatasetMetadata, 'id' | 'name' | 'columns'> & {
+        formulas: (DatasetFormulaMetadata | AdHocFormulaInput)[];
+    })[];
+    /** The language for UI labels. Supported values: 'en', 'nl', 'fr', 'de', 'es' */
+    language?: string;
+    /** The size of the element */
+    size?: 's' | 'm' | 'l' | 'xl';
+    /** 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;
+    /** Emitted when data fields are selected */
+    readonly luzmoDataFieldsSelected: import("@angular/core").OutputEmitterRef<CustomEvent<DataFieldsSelectedEventDetail>>;
+    constructor();
+    ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * Forward a wrapper @Input to the underlying host element via Renderer2 so
+     * the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
+     * Unlike a "skip undefined" guard, this lets consumers reset values back to
+     * undefined / null by clearing their bindings.
+     */
+    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; }; "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;
+    static ngAcceptInputType_clearable: unknown;
+    static ngAcceptInputType_pending: unknown;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_autofocus: unknown;
+}
+/** The underlying custom element type for LuzmoDataFieldsSelect */
+export type LuzmoDataFieldsSelectElement = LuzmoDataFieldsSelectHostElement;