@luzmo/analytics-components-kit 1.0.6 → 1.0.7

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

@@ -0,0 +1,80 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import '@luzmo/analytics-components-kit/item-grid';
+import type { LuzmoItemGrid as LuzmoItemGridHostElement, ClonedItemPositioning, GridItemActionEventDetail, GridItemData, GridItemRenderer, GridItemStatesChangedEventDetail, GridLifecycleEventDetail, InputActionGroup, ItemStates } from '@luzmo/analytics-components-kit/item-grid';
+import type { ThemeConfig } from '@luzmo/dashboard-contents-types';
+import type { Placement } from '@luzmo/lucero';
+import * as i0 from "@angular/core";
+export type { Action, ActionGroup, AddGridItemInput, ClonedItemPositioning, DefaultActionType, GridItemActionEventDetail, GridItemData, GridItemPatch, GridItemPosition, GridItemPositionPatch, GridItemRenderer, GridItemSizePatch, GridItemStatesChangedEventDetail, GridLifecycleEventDetail, InputActionGroup, ItemStates } from '@luzmo/analytics-components-kit/item-grid';
+export declare class LuzmoItemGrid 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(): LuzmoItemGridHostElement;
+    /** The URL of the app server */
+    appServer?: string;
+    /** The API Host of the databroker */
+    apiHost?: string;
+    /** The auth key of the databroker */
+    authKey?: string;
+    /** The auth token of the databroker */
+    authToken?: string;
+    /** The cache time of the databroker */
+    cacheTime?: number;
+    /** The language of the settings interface */
+    language?: string;
+    /** The language to use for locale-aware formatting and labels */
+    contentLanguage?: string;
+    /** The number of columns in the grid. */
+    columns?: number;
+    /** The height of each row in pixels in the grid. */
+    rowHeight?: number;
+    /** Whether the grid is in view mode. When true, dragging, resizing and action buttons are disabled. */
+    viewMode?: boolean;
+    /** When true (default), the item actions menu uses the Document Popover API (`popover="manual"`), which paints in the top layer. Set to false when embedding the grid next to another UI that also uses a document popover (e.g. an analyst side pane) so the actions menu stays in normal stacking with `position: fixed` + Floating UI instead. */
+    itemActionsDocumentPopover?: boolean;
+    /** The placement of the item actions menu. */
+    placementItemActionsMenu?: Placement;
+    /** The default item actions menu. */
+    defaultItemActionsMenu?: InputActionGroup[];
+    /** Where to position a cloned item in the grid. - `'below-item'` (default): places the clone directly below the original item, shifting other items down. - `'auto-position'`: lets the grid engine find the first available space (row-major scan, then compact upward). */
+    clonedItemPositioning?: ClonedItemPositioning;
+    /** Grid options configuration */
+    theme?: ThemeConfig;
+    /** Items to add to the grid. The array is cloned on set so the component never mutates the caller's data. */
+    items?: GridItemData[];
+    /** Seed value for uncontrolled items mode. The component manages item changes internally from this starting point. Ignored when `items` is set. */
+    initialItems?: GridItemData[];
+    /** Custom renderers for different item types */
+    renderers?: Record<string, GridItemRenderer>;
+    /** Controlled item states. When set, the component becomes controlled: it only reflects what the parent provides and does not update internal state on user interaction. */
+    itemStates?: ItemStates;
+    /** Seed value for uncontrolled mode. The component manages state internally from this starting point. Ignored if `itemStates` is set.  Only one item with one active action is supported. If multiple items or actions are provided, a warning is emitted and only the first item with its first action is applied. Use controlled mode (`itemStates`) for multiple simultaneous active items. */
+    initialItemStates?: ItemStates;
+    /** Fired when an item action is performed */
+    readonly luzmoItemGridItemAction: import("@angular/core").OutputEmitterRef<CustomEvent<GridItemActionEventDetail>>;
+    /** Fired when the grid layout is changed */
+    readonly luzmoItemGridLayoutChanged: import("@angular/core").OutputEmitterRef<CustomEvent<GridLifecycleEventDetail>>;
+    /** Fired when the grid is ready */
+    readonly luzmoItemGridReady: import("@angular/core").OutputEmitterRef<CustomEvent<GridLifecycleEventDetail>>;
+    /** Fired when item states change (controlled and uncontrolled mode) */
+    readonly luzmoItemGridItemStatesChanged: import("@angular/core").OutputEmitterRef<CustomEvent<GridItemStatesChangedEventDetail>>;
+    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<LuzmoItemGrid, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoItemGrid, "luzmo-item-grid", ["luzmoItemGrid"], { "appServer": { "alias": "appServer"; "required": false; }; "apiHost": { "alias": "apiHost"; "required": false; }; "authKey": { "alias": "authKey"; "required": false; }; "authToken": { "alias": "authToken"; "required": false; }; "cacheTime": { "alias": "cacheTime"; "required": false; }; "language": { "alias": "language"; "required": false; }; "contentLanguage": { "alias": "contentLanguage"; "required": false; }; "columns": { "alias": "columns"; "required": false; }; "rowHeight": { "alias": "rowHeight"; "required": false; }; "viewMode": { "alias": "viewMode"; "required": false; }; "itemActionsDocumentPopover": { "alias": "itemActionsDocumentPopover"; "required": false; }; "placementItemActionsMenu": { "alias": "placementItemActionsMenu"; "required": false; }; "defaultItemActionsMenu": { "alias": "defaultItemActionsMenu"; "required": false; }; "clonedItemPositioning": { "alias": "clonedItemPositioning"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "items": { "alias": "items"; "required": false; }; "initialItems": { "alias": "initialItems"; "required": false; }; "renderers": { "alias": "renderers"; "required": false; }; "itemStates": { "alias": "itemStates"; "required": false; }; "initialItemStates": { "alias": "initialItemStates"; "required": false; }; }, { "luzmoItemGridItemAction": "luzmoItemGridItemAction"; "luzmoItemGridLayoutChanged": "luzmoItemGridLayoutChanged"; "luzmoItemGridReady": "luzmoItemGridReady"; "luzmoItemGridItemStatesChanged": "luzmoItemGridItemStatesChanged"; }, never, ["*"], true, never>;
+    static ngAcceptInputType_viewMode: unknown;
+    static ngAcceptInputType_itemActionsDocumentPopover: unknown;
+}
+/** The underlying custom element type for LuzmoItemGrid */
+export type LuzmoItemGridElement = LuzmoItemGridHostElement;

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

@@ -0,0 +1,245 @@
+import { booleanAttribute, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, output, Renderer2 } from '@angular/core';
+import '@luzmo/analytics-components-kit/item-grid';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+/**
+ * Angular wrapper component for <luzmo-item-grid>
+ */
+export class LuzmoItemGrid {
+    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;
+    }
+    /** The URL of the app server */
+    appServer;
+    /** The API Host of the databroker */
+    apiHost;
+    /** The auth key of the databroker */
+    authKey;
+    /** The auth token of the databroker */
+    authToken;
+    /** The cache time of the databroker */
+    cacheTime;
+    /** The language of the settings interface */
+    language;
+    /** The language to use for locale-aware formatting and labels */
+    contentLanguage;
+    /** The number of columns in the grid. */
+    columns;
+    /** The height of each row in pixels in the grid. */
+    rowHeight;
+    /** Whether the grid is in view mode. When true, dragging, resizing and action buttons are disabled. */
+    viewMode;
+    /** When true (default), the item actions menu uses the Document Popover API (`popover="manual"`), which paints in the top layer. Set to false when embedding the grid next to another UI that also uses a document popover (e.g. an analyst side pane) so the actions menu stays in normal stacking with `position: fixed` + Floating UI instead. */
+    itemActionsDocumentPopover;
+    /** The placement of the item actions menu. */
+    placementItemActionsMenu;
+    /** The default item actions menu. */
+    defaultItemActionsMenu;
+    /** Where to position a cloned item in the grid. - `'below-item'` (default): places the clone directly below the original item, shifting other items down. - `'auto-position'`: lets the grid engine find the first available space (row-major scan, then compact upward). */
+    clonedItemPositioning;
+    /** Grid options configuration */
+    theme;
+    /** Items to add to the grid. The array is cloned on set so the component never mutates the caller's data. */
+    items;
+    /** Seed value for uncontrolled items mode. The component manages item changes internally from this starting point. Ignored when `items` is set. */
+    initialItems;
+    /** Custom renderers for different item types */
+    renderers;
+    /** Controlled item states. When set, the component becomes controlled: it only reflects what the parent provides and does not update internal state on user interaction. */
+    itemStates;
+    /** Seed value for uncontrolled mode. The component manages state internally from this starting point. Ignored if `itemStates` is set.  Only one item with one active action is supported. If multiple items or actions are provided, a warning is emitted and only the first item with its first action is applied. Use controlled mode (`itemStates`) for multiple simultaneous active items. */
+    initialItemStates;
+    /** Fired when an item action is performed */
+    luzmoItemGridItemAction = output({ alias: 'luzmoItemGridItemAction' });
+    /** Fired when the grid layout is changed */
+    luzmoItemGridLayoutChanged = output({ alias: 'luzmoItemGridLayoutChanged' });
+    /** Fired when the grid is ready */
+    luzmoItemGridReady = output({ alias: 'luzmoItemGridReady' });
+    /** Fired when item states change (controlled and uncontrolled mode) */
+    luzmoItemGridItemStatesChanged = output({ alias: 'luzmoItemGridItemStatesChanged' });
+    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 'appServer':
+                    this.setHostProperty('appServer', changes['appServer'].currentValue);
+                    break;
+                case 'apiHost':
+                    this.setHostProperty('apiHost', changes['apiHost'].currentValue);
+                    break;
+                case 'authKey':
+                    this.setHostProperty('authKey', changes['authKey'].currentValue);
+                    break;
+                case 'authToken':
+                    this.setHostProperty('authToken', changes['authToken'].currentValue);
+                    break;
+                case 'cacheTime':
+                    this.setHostProperty('cacheTime', changes['cacheTime'].currentValue);
+                    break;
+                case 'language':
+                    this.setHostProperty('language', changes['language'].currentValue);
+                    break;
+                case 'contentLanguage':
+                    this.setHostProperty('contentLanguage', changes['contentLanguage'].currentValue);
+                    break;
+                case 'columns':
+                    this.setHostProperty('columns', changes['columns'].currentValue);
+                    break;
+                case 'rowHeight':
+                    this.setHostProperty('rowHeight', changes['rowHeight'].currentValue);
+                    break;
+                case 'viewMode':
+                    this.setHostProperty('viewMode', changes['viewMode'].currentValue);
+                    break;
+                case 'itemActionsDocumentPopover':
+                    this.setHostProperty('itemActionsDocumentPopover', changes['itemActionsDocumentPopover'].currentValue);
+                    break;
+                case 'placementItemActionsMenu':
+                    this.setHostProperty('placementItemActionsMenu', changes['placementItemActionsMenu'].currentValue);
+                    break;
+                case 'defaultItemActionsMenu':
+                    this.setHostProperty('defaultItemActionsMenu', changes['defaultItemActionsMenu'].currentValue);
+                    break;
+                case 'clonedItemPositioning':
+                    this.setHostProperty('clonedItemPositioning', changes['clonedItemPositioning'].currentValue);
+                    break;
+                case 'theme':
+                    this.setHostProperty('theme', changes['theme'].currentValue);
+                    break;
+                case 'items':
+                    this.setHostProperty('items', changes['items'].currentValue);
+                    break;
+                case 'initialItems':
+                    this.setHostProperty('initialItems', changes['initialItems'].currentValue);
+                    break;
+                case 'renderers':
+                    this.setHostProperty('renderers', changes['renderers'].currentValue);
+                    break;
+                case 'itemStates':
+                    this.setHostProperty('itemStates', changes['itemStates'].currentValue);
+                    break;
+                case 'initialItemStates':
+                    this.setHostProperty('initialItemStates', changes['initialItemStates'].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-item-grid-item-action', (event) => {
+            const typed = event;
+            this.luzmoItemGridItemAction.emit(typed);
+        }));
+        this.listenerCleanup.push(this.renderer.listen(this.host, 'luzmo-item-grid-layout-changed', (event) => {
+            const typed = event;
+            this.luzmoItemGridLayoutChanged.emit(typed);
+        }));
+        this.listenerCleanup.push(this.renderer.listen(this.host, 'luzmo-item-grid-ready', (event) => {
+            const typed = event;
+            this.luzmoItemGridReady.emit(typed);
+        }));
+        this.listenerCleanup.push(this.renderer.listen(this.host, 'luzmo-item-grid-item-states-changed', (event) => {
+            const typed = event;
+            this.luzmoItemGridItemStatesChanged.emit(typed);
+        }));
+    }
+    static ɵfac = function LuzmoItemGrid_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoItemGrid)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoItemGrid, selectors: [["luzmo-item-grid"]], inputs: { appServer: "appServer", apiHost: "apiHost", authKey: "authKey", authToken: "authToken", cacheTime: "cacheTime", language: "language", contentLanguage: "contentLanguage", columns: "columns", rowHeight: "rowHeight", viewMode: [2, "viewMode", "viewMode", booleanAttribute], itemActionsDocumentPopover: [2, "itemActionsDocumentPopover", "itemActionsDocumentPopover", booleanAttribute], placementItemActionsMenu: "placementItemActionsMenu", defaultItemActionsMenu: "defaultItemActionsMenu", clonedItemPositioning: "clonedItemPositioning", theme: "theme", items: "items", initialItems: "initialItems", renderers: "renderers", itemStates: "itemStates", initialItemStates: "initialItemStates" }, outputs: { luzmoItemGridItemAction: "luzmoItemGridItemAction", luzmoItemGridLayoutChanged: "luzmoItemGridLayoutChanged", luzmoItemGridReady: "luzmoItemGridReady", luzmoItemGridItemStatesChanged: "luzmoItemGridItemStatesChanged" }, exportAs: ["luzmoItemGrid"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoItemGrid_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0);
+        } }, encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoItemGrid, [{
+        type: Component,
+        args: [{
+                selector: 'luzmo-item-grid',
+                exportAs: 'luzmoItemGrid',
+                standalone: true,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content />'
+            }]
+    }], () => [], { appServer: [{
+            type: Input,
+            args: [{ alias: 'appServer' }]
+        }], apiHost: [{
+            type: Input,
+            args: [{ alias: 'apiHost' }]
+        }], authKey: [{
+            type: Input,
+            args: [{ alias: 'authKey' }]
+        }], authToken: [{
+            type: Input,
+            args: [{ alias: 'authToken' }]
+        }], cacheTime: [{
+            type: Input,
+            args: [{ alias: 'cacheTime' }]
+        }], language: [{
+            type: Input,
+            args: [{ alias: 'language' }]
+        }], contentLanguage: [{
+            type: Input,
+            args: [{ alias: 'contentLanguage' }]
+        }], columns: [{
+            type: Input,
+            args: [{ alias: 'columns' }]
+        }], rowHeight: [{
+            type: Input,
+            args: [{ alias: 'rowHeight' }]
+        }], viewMode: [{
+            type: Input,
+            args: [{ alias: 'viewMode', transform: booleanAttribute }]
+        }], itemActionsDocumentPopover: [{
+            type: Input,
+            args: [{ alias: 'itemActionsDocumentPopover', transform: booleanAttribute }]
+        }], placementItemActionsMenu: [{
+            type: Input,
+            args: [{ alias: 'placementItemActionsMenu' }]
+        }], defaultItemActionsMenu: [{
+            type: Input,
+            args: [{ alias: 'defaultItemActionsMenu' }]
+        }], clonedItemPositioning: [{
+            type: Input,
+            args: [{ alias: 'clonedItemPositioning' }]
+        }], theme: [{
+            type: Input,
+            args: [{ alias: 'theme' }]
+        }], items: [{
+            type: Input,
+            args: [{ alias: 'items' }]
+        }], initialItems: [{
+            type: Input,
+            args: [{ alias: 'initialItems' }]
+        }], renderers: [{
+            type: Input,
+            args: [{ alias: 'renderers' }]
+        }], itemStates: [{
+            type: Input,
+            args: [{ alias: 'itemStates' }]
+        }], initialItemStates: [{
+            type: Input,
+            args: [{ alias: 'initialItemStates' }]
+        }], luzmoItemGridItemAction: [{ type: i0.Output, args: ["luzmoItemGridItemAction"] }], luzmoItemGridLayoutChanged: [{ type: i0.Output, args: ["luzmoItemGridLayoutChanged"] }], luzmoItemGridReady: [{ type: i0.Output, args: ["luzmoItemGridReady"] }], luzmoItemGridItemStatesChanged: [{ type: i0.Output, args: ["luzmoItemGridItemStatesChanged"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoItemGrid, { className: "LuzmoItemGrid", filePath: "components/item-grid.ts", lineNumber: 18 }); })();

package/angular/esm/components/item-option-action-button-group.d.ts

@@ -0,0 +1,41 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import '@luzmo/analytics-components-kit/item-option-action-button-group';
+import type { LuzmoItemOptionActionButtonGroup as LuzmoItemOptionActionButtonGroupHostElement, ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-action-button-group';
+import * as i0 from "@angular/core";
+export type { ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-action-button-group';
+export declare class LuzmoItemOptionActionButtonGroup 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(): LuzmoItemOptionActionButtonGroupHostElement;
+    /** The available buttons to choose from (key → button content). */
+    values?: unknown;
+    /** Whether the control is disabled (non-interactive). */
+    disabled?: boolean;
+    /** Selection mode: `single` or `multiple`. */
+    selects?: 'single' | 'multiple';
+    /** The currently selected button key(s). */
+    value?: [string];
+    /** The default selection used when no value is set. */
+    default?: [string];
+    /** Emitted when the option value changes. */
+    readonly luzmoOptionChanged: import("@angular/core").OutputEmitterRef<CustomEvent<ItemOptionChangedEventDetail>>;
+    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<LuzmoItemOptionActionButtonGroup, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoItemOptionActionButtonGroup, "luzmo-item-option-action-button-group", ["luzmoItemOptionActionButtonGroup"], { "values": { "alias": "values"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "selects": { "alias": "selects"; "required": false; }; "value": { "alias": "value"; "required": false; }; "default": { "alias": "default"; "required": false; }; }, { "luzmoOptionChanged": "luzmoOptionChanged"; }, never, ["*"], true, never>;
+    static ngAcceptInputType_disabled: unknown;
+}
+/** The underlying custom element type for LuzmoItemOptionActionButtonGroup */
+export type LuzmoItemOptionActionButtonGroupElement = LuzmoItemOptionActionButtonGroupHostElement;

package/angular/esm/components/item-option-action-button-group.js

@@ -0,0 +1,107 @@
+import { booleanAttribute, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, output, Renderer2 } from '@angular/core';
+import '@luzmo/analytics-components-kit/item-option-action-button-group';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+/**
+ * Angular wrapper component for <luzmo-item-option-action-button-group>
+ */
+export class LuzmoItemOptionActionButtonGroup {
+    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;
+    }
+    /** The available buttons to choose from (key → button content). */
+    values;
+    /** Whether the control is disabled (non-interactive). */
+    disabled;
+    /** Selection mode: `single` or `multiple`. */
+    selects;
+    /** The currently selected button key(s). */
+    value;
+    /** The default selection used when no value is set. */
+    default;
+    /** Emitted when the option value changes. */
+    luzmoOptionChanged = output({ alias: 'luzmoOptionChanged' });
+    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 'values':
+                    this.setHostProperty('values', changes['values'].currentValue);
+                    break;
+                case 'disabled':
+                    this.setHostProperty('disabled', changes['disabled'].currentValue);
+                    break;
+                case 'selects':
+                    this.setHostProperty('selects', changes['selects'].currentValue);
+                    break;
+                case 'value':
+                    this.setHostProperty('value', changes['value'].currentValue);
+                    break;
+                case 'default':
+                    this.setHostProperty('default', changes['default'].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-option-changed', (event) => {
+            const typed = event;
+            this.luzmoOptionChanged.emit(typed);
+        }));
+    }
+    static ɵfac = function LuzmoItemOptionActionButtonGroup_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoItemOptionActionButtonGroup)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoItemOptionActionButtonGroup, selectors: [["luzmo-item-option-action-button-group"]], inputs: { values: "values", disabled: [2, "disabled", "disabled", booleanAttribute], selects: "selects", value: "value", default: "default" }, outputs: { luzmoOptionChanged: "luzmoOptionChanged" }, exportAs: ["luzmoItemOptionActionButtonGroup"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoItemOptionActionButtonGroup_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0);
+        } }, encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoItemOptionActionButtonGroup, [{
+        type: Component,
+        args: [{
+                selector: 'luzmo-item-option-action-button-group',
+                exportAs: 'luzmoItemOptionActionButtonGroup',
+                standalone: true,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content />'
+            }]
+    }], () => [], { values: [{
+            type: Input,
+            args: [{ alias: 'values' }]
+        }], disabled: [{
+            type: Input,
+            args: [{ alias: 'disabled', transform: booleanAttribute }]
+        }], selects: [{
+            type: Input,
+            args: [{ alias: 'selects' }]
+        }], value: [{
+            type: Input,
+            args: [{ alias: 'value' }]
+        }], default: [{
+            type: Input,
+            args: [{ alias: 'default' }]
+        }], luzmoOptionChanged: [{ type: i0.Output, args: ["luzmoOptionChanged"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoItemOptionActionButtonGroup, { className: "LuzmoItemOptionActionButtonGroup", filePath: "components/item-option-action-button-group.ts", lineNumber: 16 }); })();

package/angular/esm/components/item-option-color-palette-picker.d.ts

@@ -0,0 +1,48 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import '@luzmo/analytics-components-kit/item-option-color-palette-picker';
+import type { LuzmoItemOptionColorPalettePicker as LuzmoItemOptionColorPalettePickerHostElement, ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-color-palette-picker';
+import * as i0 from "@angular/core";
+export type { ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-color-palette-picker';
+export declare class LuzmoItemOptionColorPalettePicker 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(): LuzmoItemOptionColorPalettePickerHostElement;
+    /** The selected color palette key of the picker */
+    value?: string;
+    /** The default color palette key of the picker */
+    default?: string;
+    /** The color palette keys of the picker */
+    values?: string[];
+    /** Whether the picker is disabled */
+    disabled?: boolean;
+    /** Whether the picker is horizontal */
+    horizontal?: boolean;
+    /** The function to parse the value */
+    parseValue?: unknown;
+    /** The function to convert the value to a string */
+    toValue?: unknown;
+    /** The number of colors to display */
+    numberOfColors?: number;
+    /** Emitted when the option value changes. */
+    readonly luzmoOptionChanged: import("@angular/core").OutputEmitterRef<CustomEvent<ItemOptionChangedEventDetail>>;
+    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<LuzmoItemOptionColorPalettePicker, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoItemOptionColorPalettePicker, "luzmo-item-option-color-palette-picker", ["luzmoItemOptionColorPalettePicker"], { "value": { "alias": "value"; "required": false; }; "default": { "alias": "default"; "required": false; }; "values": { "alias": "values"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "horizontal": { "alias": "horizontal"; "required": false; }; "parseValue": { "alias": "parseValue"; "required": false; }; "toValue": { "alias": "toValue"; "required": false; }; "numberOfColors": { "alias": "numberOfColors"; "required": false; }; }, { "luzmoOptionChanged": "luzmoOptionChanged"; }, never, ["*"], true, never>;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_horizontal: unknown;
+}
+/** The underlying custom element type for LuzmoItemOptionColorPalettePicker */
+export type LuzmoItemOptionColorPalettePickerElement = LuzmoItemOptionColorPalettePickerHostElement;