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

package/angular/esm/components/formula.js

@@ -0,0 +1,177 @@
+import { booleanAttribute, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, output, Renderer2 } from '@angular/core';
+import '@luzmo/analytics-components-kit/formula';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+/**
+ * Angular wrapper component for <luzmo-formula>
+ */
+export class LuzmoFormula {
+    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;
+    }
+    /** Rendering mode. `rich` (default) renders read-only column / aggregation pills; `text` renders plain text with an inline type icon per column. Both are always read-only. */
+    display;
+    /** The language for UI labels. Supported values: 'en', 'nl', 'fr', 'de', 'es' */
+    language;
+    /** The formula expression (function syntax), e.g. `SUM({datasetId:columnId})`. */
+    expression;
+    /** Datasets and their data fields, provided directly (takes preference over `datasetIds`). */
+    datasetsDataFields;
+    /** Dataset ids to fetch from the Luzmo API (auth attributes optional for public datasets). */
+    datasetIds;
+    /** Base URL of the Luzmo API used to fetch datasets by id. */
+    apiUrl;
+    /** Luzmo API authorization key, used with `authToken` to fetch datasets by id. */
+    authKey;
+    /** Luzmo API authorization token, used with `authKey` to fetch datasets by id. */
+    authToken;
+    /** Whether aggregation functions are offered (in the autocompletion, and - for the editor - via the aggregations list and pills). Defaults to `true`.  Note: as a boolean attribute defaulting to `true` it cannot be turned off via markup (an absent attribute keeps the default); set the `.showAggregations` property to `false` to disable. */
+    showAggregations;
+    /** Language used for data labels (column / dataset names). */
+    contentLanguage;
+    /** When true, aggregations render as multi-stage nested widgets. */
+    multiStageAggregation;
+    /** When true, aggregations can be nested inside other aggregations. */
+    nestedAggregation;
+    /** The size of the element */
+    size;
+    /** Fired (debounced) when the formula expression changes; `detail.expression` holds the new expression. */
+    luzmoExpressionChanged = output({ alias: 'luzmoExpressionChanged' });
+    /** Fired when fetching datasets by id fails. */
+    luzmoDatasetsError = output({ alias: 'luzmoDatasetsError' });
+    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 'display':
+                    this.setHostProperty('display', changes['display'].currentValue);
+                    break;
+                case 'language':
+                    this.setHostProperty('language', changes['language'].currentValue);
+                    break;
+                case 'expression':
+                    this.setHostProperty('expression', changes['expression'].currentValue);
+                    break;
+                case 'datasetsDataFields':
+                    this.setHostProperty('datasetsDataFields', changes['datasetsDataFields'].currentValue);
+                    break;
+                case 'datasetIds':
+                    this.setHostProperty('datasetIds', changes['datasetIds'].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 'showAggregations':
+                    this.setHostProperty('showAggregations', changes['showAggregations'].currentValue);
+                    break;
+                case 'contentLanguage':
+                    this.setHostProperty('contentLanguage', changes['contentLanguage'].currentValue);
+                    break;
+                case 'multiStageAggregation':
+                    this.setHostProperty('multiStageAggregation', changes['multiStageAggregation'].currentValue);
+                    break;
+                case 'nestedAggregation':
+                    this.setHostProperty('nestedAggregation', changes['nestedAggregation'].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-expression-changed', (event) => {
+            const typed = event;
+            this.luzmoExpressionChanged.emit(typed);
+        }));
+        this.listenerCleanup.push(this.renderer.listen(this.host, 'luzmo-datasets-error', (event) => {
+            const typed = event;
+            this.luzmoDatasetsError.emit(typed);
+        }));
+    }
+    static ɵfac = function LuzmoFormula_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoFormula)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoFormula, selectors: [["luzmo-formula"]], inputs: { display: "display", language: "language", expression: "expression", datasetsDataFields: "datasetsDataFields", datasetIds: "datasetIds", apiUrl: "apiUrl", authKey: "authKey", authToken: "authToken", showAggregations: [2, "showAggregations", "showAggregations", booleanAttribute], contentLanguage: "contentLanguage", multiStageAggregation: [2, "multiStageAggregation", "multiStageAggregation", booleanAttribute], nestedAggregation: [2, "nestedAggregation", "nestedAggregation", booleanAttribute], size: "size" }, outputs: { luzmoExpressionChanged: "luzmoExpressionChanged", luzmoDatasetsError: "luzmoDatasetsError" }, exportAs: ["luzmoFormula"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoFormula_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0);
+        } }, encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoFormula, [{
+        type: Component,
+        args: [{
+                selector: 'luzmo-formula',
+                exportAs: 'luzmoFormula',
+                standalone: true,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content />'
+            }]
+    }], () => [], { display: [{
+            type: Input,
+            args: [{ alias: 'display' }]
+        }], language: [{
+            type: Input,
+            args: [{ alias: 'language' }]
+        }], expression: [{
+            type: Input,
+            args: [{ alias: 'expression' }]
+        }], datasetsDataFields: [{
+            type: Input,
+            args: [{ alias: 'datasetsDataFields' }]
+        }], datasetIds: [{
+            type: Input,
+            args: [{ alias: 'datasetIds' }]
+        }], apiUrl: [{
+            type: Input,
+            args: [{ alias: 'apiUrl' }]
+        }], authKey: [{
+            type: Input,
+            args: [{ alias: 'authKey' }]
+        }], authToken: [{
+            type: Input,
+            args: [{ alias: 'authToken' }]
+        }], showAggregations: [{
+            type: Input,
+            args: [{ alias: 'showAggregations', transform: booleanAttribute }]
+        }], contentLanguage: [{
+            type: Input,
+            args: [{ alias: 'contentLanguage' }]
+        }], multiStageAggregation: [{
+            type: Input,
+            args: [{ alias: 'multiStageAggregation', transform: booleanAttribute }]
+        }], nestedAggregation: [{
+            type: Input,
+            args: [{ alias: 'nestedAggregation', transform: booleanAttribute }]
+        }], size: [{
+            type: Input,
+            args: [{ alias: 'size' }]
+        }], luzmoExpressionChanged: [{ type: i0.Output, args: ["luzmoExpressionChanged"] }], luzmoDatasetsError: [{ type: i0.Output, args: ["luzmoDatasetsError"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoFormula, { className: "LuzmoFormula", filePath: "components/formula.ts", lineNumber: 15 }); })();

package/angular/esm/components/interactive-viz-item.d.ts

@@ -0,0 +1,63 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import '@luzmo/analytics-components-kit/interactive-viz-item';
+import type { LuzmoInteractiveVizItem as LuzmoInteractiveVizItemHostElement, ChartFeedback, FlexChartConfig, InteractiveVizItemChartChangedEventDetail, InteractiveVizItemChartOptionsChangedEventDetail, InteractiveVizItemFeedbackChangedEventDetail } from '@luzmo/analytics-components-kit/interactive-viz-item';
+import * as i0 from "@angular/core";
+export type { ChartActionDescriptor, ChartActionType, ChartFeedback, ChartFeedbackRating, ChartMutationRequest, ChartOption, FlexChartConfig, InteractiveVizItemChartChangedEventDetail, InteractiveVizItemChartOptionsChangedEventDetail, InteractiveVizItemFeedbackChangedEventDetail, NormalizedChartConfig, Ranking, Sort } from '@luzmo/analytics-components-kit/interactive-viz-item';
+export declare class LuzmoInteractiveVizItem 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(): LuzmoInteractiveVizItemHostElement;
+    /** The language for UI labels. Supported values: 'en', 'nl', 'fr', 'de', 'es' */
+    language?: string;
+    /** Loose chart config (type, options, slots, filters); slots may use the keyed-object form. */
+    chart?: FlexChartConfig | null;
+    /** Current feedback (drives the thumbs up/down selection). */
+    feedback?: ChartFeedback | null;
+    /** Message id from the backend. Feedback is only shown when set. */
+    messageId?: string;
+    /** Auth key for the embedded chart and config panels. */
+    authKey?: string;
+    /** Auth token for the embedded chart and config panels. */
+    authToken?: string;
+    /** API URL for the embedded chart and config panels. */
+    apiUrl?: string;
+    /** App server URL for the embedded chart (assets, thumbnails). */
+    appServer?: string;
+    /** Content language for chart data and dataset metadata. Defaults to the UI `language`. */
+    contentLanguage?: string;
+    /** When present, hides the inline chart actions (ranking, display mode). */
+    hideActions?: boolean;
+    /** When present, hides the feedback bar. */
+    hideFeedback?: boolean;
+    /** When present, hides the config-panel toggle and the panel itself. */
+    hideConfigPanel?: boolean;
+    /** The size of the element */
+    size?: 's' | 'm' | 'l' | 'xl';
+    /** Fired when the inline actions (ranking, sort, display mode) change the chart options. */
+    readonly luzmoChartOptionsChanged: import("@angular/core").OutputEmitterRef<CustomEvent<InteractiveVizItemChartOptionsChangedEventDetail>>;
+    /** Fired when the config panel changes slots, filters, or options (full chart). */
+    readonly luzmoChartChanged: import("@angular/core").OutputEmitterRef<CustomEvent<InteractiveVizItemChartChangedEventDetail>>;
+    /** Fired when the user changes the thumbs up/down rating. */
+    readonly luzmoFeedbackChanged: import("@angular/core").OutputEmitterRef<CustomEvent<InteractiveVizItemFeedbackChangedEventDetail>>;
+    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<LuzmoInteractiveVizItem, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoInteractiveVizItem, "luzmo-interactive-viz-item", ["luzmoInteractiveVizItem"], { "language": { "alias": "language"; "required": false; }; "chart": { "alias": "chart"; "required": false; }; "feedback": { "alias": "feedback"; "required": false; }; "messageId": { "alias": "messageId"; "required": false; }; "authKey": { "alias": "authKey"; "required": false; }; "authToken": { "alias": "authToken"; "required": false; }; "apiUrl": { "alias": "apiUrl"; "required": false; }; "appServer": { "alias": "appServer"; "required": false; }; "contentLanguage": { "alias": "contentLanguage"; "required": false; }; "hideActions": { "alias": "hideActions"; "required": false; }; "hideFeedback": { "alias": "hideFeedback"; "required": false; }; "hideConfigPanel": { "alias": "hideConfigPanel"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "luzmoChartOptionsChanged": "luzmoChartOptionsChanged"; "luzmoChartChanged": "luzmoChartChanged"; "luzmoFeedbackChanged": "luzmoFeedbackChanged"; }, never, ["*"], true, never>;
+    static ngAcceptInputType_hideActions: unknown;
+    static ngAcceptInputType_hideFeedback: unknown;
+    static ngAcceptInputType_hideConfigPanel: unknown;
+}
+/** The underlying custom element type for LuzmoInteractiveVizItem */
+export type LuzmoInteractiveVizItemElement = LuzmoInteractiveVizItemHostElement;

package/angular/esm/components/interactive-viz-item.js

@@ -0,0 +1,188 @@
+import { booleanAttribute, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, output, Renderer2 } from '@angular/core';
+import '@luzmo/analytics-components-kit/interactive-viz-item';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+/**
+ * Angular wrapper component for <luzmo-interactive-viz-item>
+ *
+ * @slot chart-actions-extra - Host-injected actions rendered at the end of the inline actions bar (e.g. copy-to-dashboard).
+ * @csspart container - The viz item container.
+ * @csspart chart-container - The embedded chart wrapper.
+ * @csspart config-panel - The expandable configuration panel.
+ */
+export class LuzmoInteractiveVizItem {
+    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 language for UI labels. Supported values: 'en', 'nl', 'fr', 'de', 'es' */
+    language;
+    /** Loose chart config (type, options, slots, filters); slots may use the keyed-object form. */
+    chart;
+    /** Current feedback (drives the thumbs up/down selection). */
+    feedback;
+    /** Message id from the backend. Feedback is only shown when set. */
+    messageId;
+    /** Auth key for the embedded chart and config panels. */
+    authKey;
+    /** Auth token for the embedded chart and config panels. */
+    authToken;
+    /** API URL for the embedded chart and config panels. */
+    apiUrl;
+    /** App server URL for the embedded chart (assets, thumbnails). */
+    appServer;
+    /** Content language for chart data and dataset metadata. Defaults to the UI `language`. */
+    contentLanguage;
+    /** When present, hides the inline chart actions (ranking, display mode). */
+    hideActions;
+    /** When present, hides the feedback bar. */
+    hideFeedback;
+    /** When present, hides the config-panel toggle and the panel itself. */
+    hideConfigPanel;
+    /** The size of the element */
+    size;
+    /** Fired when the inline actions (ranking, sort, display mode) change the chart options. */
+    luzmoChartOptionsChanged = output({ alias: 'luzmoChartOptionsChanged' });
+    /** Fired when the config panel changes slots, filters, or options (full chart). */
+    luzmoChartChanged = output({ alias: 'luzmoChartChanged' });
+    /** Fired when the user changes the thumbs up/down rating. */
+    luzmoFeedbackChanged = output({ alias: 'luzmoFeedbackChanged' });
+    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 'language':
+                    this.setHostProperty('language', changes['language'].currentValue);
+                    break;
+                case 'chart':
+                    this.setHostProperty('chart', changes['chart'].currentValue);
+                    break;
+                case 'feedback':
+                    this.setHostProperty('feedback', changes['feedback'].currentValue);
+                    break;
+                case 'messageId':
+                    this.setHostProperty('messageId', changes['messageId'].currentValue);
+                    break;
+                case 'authKey':
+                    this.setHostProperty('authKey', changes['authKey'].currentValue);
+                    break;
+                case 'authToken':
+                    this.setHostProperty('authToken', changes['authToken'].currentValue);
+                    break;
+                case 'apiUrl':
+                    this.setHostProperty('apiUrl', changes['apiUrl'].currentValue);
+                    break;
+                case 'appServer':
+                    this.setHostProperty('appServer', changes['appServer'].currentValue);
+                    break;
+                case 'contentLanguage':
+                    this.setHostProperty('contentLanguage', changes['contentLanguage'].currentValue);
+                    break;
+                case 'hideActions':
+                    this.setHostProperty('hideActions', changes['hideActions'].currentValue);
+                    break;
+                case 'hideFeedback':
+                    this.setHostProperty('hideFeedback', changes['hideFeedback'].currentValue);
+                    break;
+                case 'hideConfigPanel':
+                    this.setHostProperty('hideConfigPanel', changes['hideConfigPanel'].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-chart-options-changed', (event) => {
+            const typed = event;
+            this.luzmoChartOptionsChanged.emit(typed);
+        }));
+        this.listenerCleanup.push(this.renderer.listen(this.host, 'luzmo-chart-changed', (event) => {
+            const typed = event;
+            this.luzmoChartChanged.emit(typed);
+        }));
+        this.listenerCleanup.push(this.renderer.listen(this.host, 'luzmo-feedback-changed', (event) => {
+            const typed = event;
+            this.luzmoFeedbackChanged.emit(typed);
+        }));
+    }
+    static ɵfac = function LuzmoInteractiveVizItem_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoInteractiveVizItem)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoInteractiveVizItem, selectors: [["luzmo-interactive-viz-item"]], inputs: { language: "language", chart: "chart", feedback: "feedback", messageId: "messageId", authKey: "authKey", authToken: "authToken", apiUrl: "apiUrl", appServer: "appServer", contentLanguage: "contentLanguage", hideActions: [2, "hideActions", "hideActions", booleanAttribute], hideFeedback: [2, "hideFeedback", "hideFeedback", booleanAttribute], hideConfigPanel: [2, "hideConfigPanel", "hideConfigPanel", booleanAttribute], size: "size" }, outputs: { luzmoChartOptionsChanged: "luzmoChartOptionsChanged", luzmoChartChanged: "luzmoChartChanged", luzmoFeedbackChanged: "luzmoFeedbackChanged" }, exportAs: ["luzmoInteractiveVizItem"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoInteractiveVizItem_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0);
+        } }, encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoInteractiveVizItem, [{
+        type: Component,
+        args: [{
+                selector: 'luzmo-interactive-viz-item',
+                exportAs: 'luzmoInteractiveVizItem',
+                standalone: true,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content />'
+            }]
+    }], () => [], { language: [{
+            type: Input,
+            args: [{ alias: 'language' }]
+        }], chart: [{
+            type: Input,
+            args: [{ alias: 'chart' }]
+        }], feedback: [{
+            type: Input,
+            args: [{ alias: 'feedback' }]
+        }], messageId: [{
+            type: Input,
+            args: [{ alias: 'messageId' }]
+        }], authKey: [{
+            type: Input,
+            args: [{ alias: 'authKey' }]
+        }], authToken: [{
+            type: Input,
+            args: [{ alias: 'authToken' }]
+        }], apiUrl: [{
+            type: Input,
+            args: [{ alias: 'apiUrl' }]
+        }], appServer: [{
+            type: Input,
+            args: [{ alias: 'appServer' }]
+        }], contentLanguage: [{
+            type: Input,
+            args: [{ alias: 'contentLanguage' }]
+        }], hideActions: [{
+            type: Input,
+            args: [{ alias: 'hideActions', transform: booleanAttribute }]
+        }], hideFeedback: [{
+            type: Input,
+            args: [{ alias: 'hideFeedback', transform: booleanAttribute }]
+        }], hideConfigPanel: [{
+            type: Input,
+            args: [{ alias: 'hideConfigPanel', transform: booleanAttribute }]
+        }], size: [{
+            type: Input,
+            args: [{ alias: 'size' }]
+        }], luzmoChartOptionsChanged: [{ type: i0.Output, args: ["luzmoChartOptionsChanged"] }], luzmoChartChanged: [{ type: i0.Output, args: ["luzmoChartChanged"] }], luzmoFeedbackChanged: [{ type: i0.Output, args: ["luzmoFeedbackChanged"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoInteractiveVizItem, { className: "LuzmoInteractiveVizItem", filePath: "components/interactive-viz-item.ts", lineNumber: 21 }); })();

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

@@ -0,0 +1,45 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import '@luzmo/analytics-components-kit/item-grid';
+import type { LuzmoItemGridItemActionsMenu as LuzmoItemGridItemActionsMenuHostElement, ActionGroup } from '@luzmo/analytics-components-kit/item-grid';
+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 LuzmoItemGridItemActionsMenu 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(): LuzmoItemGridItemActionsMenuHostElement;
+    /** The preferred placement of the menu */
+    placement?: Placement;
+    /** The Actions to display in the menu */
+    actions?: ActionGroup[];
+    /** The language for UI labels. Supported values: 'en', 'nl', 'fr', 'de', 'es' */
+    language?: string;
+    /** 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 the user clicks an action in the menu; `detail` holds the action key, type, and active state. */
+    readonly luzmoItemGridItemAction: import("@angular/core").OutputEmitterRef<CustomEvent<unknown>>;
+    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<LuzmoItemGridItemActionsMenu, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoItemGridItemActionsMenu, "luzmo-item-grid-item-actions-menu", ["luzmoItemGridItemActionsMenu"], { "placement": { "alias": "placement"; "required": false; }; "actions": { "alias": "actions"; "required": false; }; "language": { "alias": "language"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "luzmoItemGridItemAction": "luzmoItemGridItemAction"; }, never, ["*"], true, never>;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_autofocus: unknown;
+}
+/** The underlying custom element type for LuzmoItemGridItemActionsMenu */
+export type LuzmoItemGridItemActionsMenuElement = LuzmoItemGridItemActionsMenuHostElement;

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

@@ -0,0 +1,115 @@
+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-item-actions-menu>
+ */
+export class LuzmoItemGridItemActionsMenu {
+    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 preferred placement of the menu */
+    placement;
+    /** The Actions to display in the menu */
+    actions;
+    /** The language for UI labels. Supported values: 'en', 'nl', 'fr', 'de', 'es' */
+    language;
+    /** Disable this control. It will not receive focus or events */
+    disabled;
+    /** When this control is rendered, focus it automatically */
+    autofocus;
+    /** The tab index to apply to this control. See general documentation about the tabindex HTML property */
+    tabIndex;
+    /** Fired when the user clicks an action in the menu; `detail` holds the action key, type, and active state. */
+    luzmoItemGridItemAction = output({ alias: 'luzmoItemGridItemAction' });
+    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 'placement':
+                    this.setHostProperty('placement', changes['placement'].currentValue);
+                    break;
+                case 'actions':
+                    this.setHostProperty('actions', changes['actions'].currentValue);
+                    break;
+                case 'language':
+                    this.setHostProperty('language', changes['language'].currentValue);
+                    break;
+                case 'disabled':
+                    this.setHostProperty('disabled', changes['disabled'].currentValue);
+                    break;
+                case 'autofocus':
+                    this.setHostProperty('autofocus', changes['autofocus'].currentValue);
+                    break;
+                case 'tabIndex':
+                    this.setHostProperty('tabIndex', changes['tabIndex'].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);
+        }));
+    }
+    static ɵfac = function LuzmoItemGridItemActionsMenu_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoItemGridItemActionsMenu)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoItemGridItemActionsMenu, selectors: [["luzmo-item-grid-item-actions-menu"]], inputs: { placement: "placement", actions: "actions", language: "language", disabled: [2, "disabled", "disabled", booleanAttribute], autofocus: [2, "autofocus", "autofocus", booleanAttribute], tabIndex: "tabIndex" }, outputs: { luzmoItemGridItemAction: "luzmoItemGridItemAction" }, exportAs: ["luzmoItemGridItemActionsMenu"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoItemGridItemActionsMenu_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0);
+        } }, encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoItemGridItemActionsMenu, [{
+        type: Component,
+        args: [{
+                selector: 'luzmo-item-grid-item-actions-menu',
+                exportAs: 'luzmoItemGridItemActionsMenu',
+                standalone: true,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content />'
+            }]
+    }], () => [], { placement: [{
+            type: Input,
+            args: [{ alias: 'placement' }]
+        }], actions: [{
+            type: Input,
+            args: [{ alias: 'actions' }]
+        }], language: [{
+            type: Input,
+            args: [{ alias: 'language' }]
+        }], disabled: [{
+            type: Input,
+            args: [{ alias: 'disabled', transform: booleanAttribute }]
+        }], autofocus: [{
+            type: Input,
+            args: [{ alias: 'autofocus', transform: booleanAttribute }]
+        }], tabIndex: [{
+            type: Input,
+            args: [{ alias: 'tabIndex' }]
+        }], luzmoItemGridItemAction: [{ type: i0.Output, args: ["luzmoItemGridItemAction"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoItemGridItemActionsMenu, { className: "LuzmoItemGridItemActionsMenu", filePath: "components/item-grid-item-actions-menu.ts", lineNumber: 17 }); })();