@luzmo/analytics-components-kit 1.3.0 → 2.0.0

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

@@ -7,7 +7,10 @@ const _c0 = ["*"];
  *
  * @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 actions-bar - The bar above the chart holding the inline actions, the `chart-actions-extra` slot and add to dashboard.
+ * @csspart actions - The inline chart actions (ranking, display mode) inside the actions bar.
  * @csspart chart-container - The embedded chart wrapper.
+ * @csspart footer - The row below the chart holding the feedback buttons and the config-panel toggle.
  * @csspart config-panel - The expandable configuration panel.
  */
 export class LuzmoInteractiveVizItem {
@@ -20,12 +23,6 @@ export class LuzmoInteractiveVizItem {
     get nativeElement() {
         return this.host;
     }
-    /** The language for UI labels. Supported values: 'en', 'nl', 'fr', 'de', 'es' */
-    language;
-    /** When present, renders `luzmo-add-to-dashboard` in the actions bar. */
-    addToDashboard;
-    /** Click-to-filter on the embedded chart, forwarded as its `canFilter`. The `can-filter` attribute means `'all'`; unset keeps it off. */
-    canFilter;
     /** Loose chart config (type, options, slots, filters, inlineData); slots may use the keyed-object form. */
     chart;
     /** Current feedback (drives the thumbs up/down selection). */
@@ -48,10 +45,32 @@ export class LuzmoInteractiveVizItem {
     hideFeedback;
     /** When present, hides the config-panel toggle and the panel itself. */
     hideConfigPanel;
+    /** When present, hides the options tab of the config panel and keeps the data tab. */
+    hideConfigOptions;
+    /** Whether each slot in the config panel takes one field or several, forwarded to `luzmo-item-slot-picker-panel` as `selects`. */
+    slotSelects;
+    /** When present, the slot pickers in the config panel grow to full width, forwarded as `grows`. */
+    slotGrows;
+    /** Slots configuration for the config panel, for a chart type ACK has no definition for (e.g. a custom chart). */
+    slotsConfiguration;
+    /** Options configuration for the config panel, for a chart type ACK has no definition for (e.g. a custom chart). */
+    customOptionsConfiguration;
+    /** Option label translations that go with `customOptionsConfiguration`. */
+    customTranslations;
+    /** Options applied to the embedded chart only, merged one level deep over `chart.options` (e.g. `{ display: { title: false } }`). They are never emitted in chart events nor saved by add to dashboard. */
+    chartRenderOptions;
+    /** When present, renders `luzmo-add-to-dashboard` in the actions bar. */
+    addToDashboard;
+    /** Host data operations for add to dashboard. When unset, the built-in adapter on the auth properties is used. */
+    dashboardActions;
     /** When present, chart changes are only emitted and the host sets `chart`; otherwise they are applied here and still emitted. */
     controlled;
+    /** Click-to-filter on the embedded chart, forwarded as its `canFilter`. The `can-filter` attribute means `'all'`; unset keeps it off. */
+    canFilter;
     /** Applies and emits option changes live while a control is dragged or a key is held, without debounce, and forwards `luzmo-option-interaction-*` events. Off by default. */
     liveInteractions;
+    /** The language for UI labels. Supported values: 'en', 'nl', 'fr', 'de', 'es' */
+    language;
     /** The size of the element */
     size;
     /** Fired when the inline actions (ranking, sort, display mode) change the chart options. Applied to `chart` first unless `controlled` is set. */
@@ -81,15 +100,6 @@ export class LuzmoInteractiveVizItem {
     ngOnChanges(changes) {
         for (const key of Object.keys(changes)) {
             switch (key) {
-                case 'language':
-                    this.setHostProperty('language', changes['language'].currentValue);
-                    break;
-                case 'addToDashboard':
-                    this.setHostProperty('addToDashboard', changes['addToDashboard'].currentValue);
-                    break;
-                case 'canFilter':
-                    this.setHostProperty('canFilter', changes['canFilter'].currentValue);
-                    break;
                 case 'chart':
                     this.setHostProperty('chart', changes['chart'].currentValue);
                     break;
@@ -123,12 +133,45 @@ export class LuzmoInteractiveVizItem {
                 case 'hideConfigPanel':
                     this.setHostProperty('hideConfigPanel', changes['hideConfigPanel'].currentValue);
                     break;
+                case 'hideConfigOptions':
+                    this.setHostProperty('hideConfigOptions', changes['hideConfigOptions'].currentValue);
+                    break;
+                case 'slotSelects':
+                    this.setHostProperty('slotSelects', changes['slotSelects'].currentValue);
+                    break;
+                case 'slotGrows':
+                    this.setHostProperty('slotGrows', changes['slotGrows'].currentValue);
+                    break;
+                case 'slotsConfiguration':
+                    this.setHostProperty('slotsConfiguration', changes['slotsConfiguration'].currentValue);
+                    break;
+                case 'customOptionsConfiguration':
+                    this.setHostProperty('customOptionsConfiguration', changes['customOptionsConfiguration'].currentValue);
+                    break;
+                case 'customTranslations':
+                    this.setHostProperty('customTranslations', changes['customTranslations'].currentValue);
+                    break;
+                case 'chartRenderOptions':
+                    this.setHostProperty('chartRenderOptions', changes['chartRenderOptions'].currentValue);
+                    break;
+                case 'addToDashboard':
+                    this.setHostProperty('addToDashboard', changes['addToDashboard'].currentValue);
+                    break;
+                case 'dashboardActions':
+                    this.setHostProperty('dashboardActions', changes['dashboardActions'].currentValue);
+                    break;
                 case 'controlled':
                     this.setHostProperty('controlled', changes['controlled'].currentValue);
                     break;
+                case 'canFilter':
+                    this.setHostProperty('canFilter', changes['canFilter'].currentValue);
+                    break;
                 case 'liveInteractions':
                     this.setHostProperty('liveInteractions', changes['liveInteractions'].currentValue);
                     break;
+                case 'language':
+                    this.setHostProperty('language', changes['language'].currentValue);
+                    break;
                 case 'size':
                     this.setHostProperty('size', changes['size'].currentValue);
                     break;
@@ -180,8 +223,12 @@ export class LuzmoInteractiveVizItem {
             this.luzmoChartAddFailed.emit(typed);
         }));
     }
+    /** Exports the embedded chart, forwarded to its `export(type)`. Waits for the embedded renderer when it has not loaded yet. Resolves without a value when there is no chart, when the embed fails, or when the chart is cleared or the element removed before the renderer loaded. */
+    export(type) {
+        return this.host.export(type);
+    }
     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", addToDashboard: [2, "addToDashboard", "addToDashboard", booleanAttribute], canFilter: "canFilter", 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], controlled: [2, "controlled", "controlled", booleanAttribute], liveInteractions: [2, "liveInteractions", "liveInteractions", booleanAttribute], size: "size" }, outputs: { luzmoChartOptionsChanged: "luzmoChartOptionsChanged", luzmoChartChanged: "luzmoChartChanged", luzmoOptionInteractionStart: "luzmoOptionInteractionStart", luzmoOptionInteractionEnd: "luzmoOptionInteractionEnd", luzmoOptionInteractionCancel: "luzmoOptionInteractionCancel", luzmoFeedbackChanged: "luzmoFeedbackChanged", luzmoChartAdded: "luzmoChartAdded", luzmoChartAddFailed: "luzmoChartAddFailed" }, exportAs: ["luzmoInteractiveVizItem"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoInteractiveVizItem_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoInteractiveVizItem, selectors: [["luzmo-interactive-viz-item"]], inputs: { 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], hideConfigOptions: [2, "hideConfigOptions", "hideConfigOptions", booleanAttribute], slotSelects: "slotSelects", slotGrows: [2, "slotGrows", "slotGrows", booleanAttribute], slotsConfiguration: "slotsConfiguration", customOptionsConfiguration: "customOptionsConfiguration", customTranslations: "customTranslations", chartRenderOptions: "chartRenderOptions", addToDashboard: [2, "addToDashboard", "addToDashboard", booleanAttribute], dashboardActions: "dashboardActions", controlled: [2, "controlled", "controlled", booleanAttribute], canFilter: "canFilter", liveInteractions: [2, "liveInteractions", "liveInteractions", booleanAttribute], language: "language", size: "size" }, outputs: { luzmoChartOptionsChanged: "luzmoChartOptionsChanged", luzmoChartChanged: "luzmoChartChanged", luzmoOptionInteractionStart: "luzmoOptionInteractionStart", luzmoOptionInteractionEnd: "luzmoOptionInteractionEnd", luzmoOptionInteractionCancel: "luzmoOptionInteractionCancel", luzmoFeedbackChanged: "luzmoFeedbackChanged", luzmoChartAdded: "luzmoChartAdded", luzmoChartAddFailed: "luzmoChartAddFailed" }, 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 });
@@ -195,16 +242,7 @@ export class LuzmoInteractiveVizItem {
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 template: '<ng-content />'
             }]
-    }], () => [], { language: [{
-            type: Input,
-            args: [{ alias: 'language' }]
-        }], addToDashboard: [{
-            type: Input,
-            args: [{ alias: 'addToDashboard', transform: booleanAttribute }]
-        }], canFilter: [{
-            type: Input,
-            args: [{ alias: 'canFilter' }]
-        }], chart: [{
+    }], () => [], { chart: [{
             type: Input,
             args: [{ alias: 'chart' }]
         }], feedback: [{
@@ -237,14 +275,47 @@ export class LuzmoInteractiveVizItem {
         }], hideConfigPanel: [{
             type: Input,
             args: [{ alias: 'hideConfigPanel', transform: booleanAttribute }]
+        }], hideConfigOptions: [{
+            type: Input,
+            args: [{ alias: 'hideConfigOptions', transform: booleanAttribute }]
+        }], slotSelects: [{
+            type: Input,
+            args: [{ alias: 'slotSelects' }]
+        }], slotGrows: [{
+            type: Input,
+            args: [{ alias: 'slotGrows', transform: booleanAttribute }]
+        }], slotsConfiguration: [{
+            type: Input,
+            args: [{ alias: 'slotsConfiguration' }]
+        }], customOptionsConfiguration: [{
+            type: Input,
+            args: [{ alias: 'customOptionsConfiguration' }]
+        }], customTranslations: [{
+            type: Input,
+            args: [{ alias: 'customTranslations' }]
+        }], chartRenderOptions: [{
+            type: Input,
+            args: [{ alias: 'chartRenderOptions' }]
+        }], addToDashboard: [{
+            type: Input,
+            args: [{ alias: 'addToDashboard', transform: booleanAttribute }]
+        }], dashboardActions: [{
+            type: Input,
+            args: [{ alias: 'dashboardActions' }]
         }], controlled: [{
             type: Input,
             args: [{ alias: 'controlled', transform: booleanAttribute }]
+        }], canFilter: [{
+            type: Input,
+            args: [{ alias: 'canFilter' }]
         }], liveInteractions: [{
             type: Input,
             args: [{ alias: 'liveInteractions', transform: booleanAttribute }]
+        }], language: [{
+            type: Input,
+            args: [{ alias: 'language' }]
         }], size: [{
             type: Input,
             args: [{ alias: 'size' }]
         }], luzmoChartOptionsChanged: [{ type: i0.Output, args: ["luzmoChartOptionsChanged"] }], luzmoChartChanged: [{ type: i0.Output, args: ["luzmoChartChanged"] }], luzmoOptionInteractionStart: [{ type: i0.Output, args: ["luzmoOptionInteractionStart"] }], luzmoOptionInteractionEnd: [{ type: i0.Output, args: ["luzmoOptionInteractionEnd"] }], luzmoOptionInteractionCancel: [{ type: i0.Output, args: ["luzmoOptionInteractionCancel"] }], luzmoFeedbackChanged: [{ type: i0.Output, args: ["luzmoFeedbackChanged"] }], luzmoChartAdded: [{ type: i0.Output, args: ["luzmoChartAdded"] }], luzmoChartAddFailed: [{ type: i0.Output, args: ["luzmoChartAddFailed"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoInteractiveVizItem, { className: "LuzmoInteractiveVizItem", filePath: "components/interactive-viz-item.ts", lineNumber: 22 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoInteractiveVizItem, { className: "LuzmoInteractiveVizItem", filePath: "components/interactive-viz-item.ts", lineNumber: 26 }); })();

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

@@ -38,6 +38,8 @@ export declare class LuzmoItemGridItemActionsMenu implements OnChanges {
      */
     private setHostProperty;
     private bindEvents;
+    /** Focuses the first toggle action, or the first available action. */
+    focus(): void;
     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"; "luzmoItemGridItemActionHover": "luzmoItemGridItemActionHover"; }, never, ["*"], true, never>;
     static ngAcceptInputType_disabled: unknown;

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

@@ -84,6 +84,10 @@ export class LuzmoItemGridItemActionsMenu {
             this.luzmoItemGridItemActionHover.emit(typed);
         }));
     }
+    /** Focuses the first toggle action, or the first available action. */
+    focus() {
+        return this.host.focus();
+    }
     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", luzmoItemGridItemActionHover: "luzmoItemGridItemActionHover" }, exportAs: ["luzmoItemGridItemActionsMenu"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoItemGridItemActionsMenu_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();

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

@@ -53,6 +53,8 @@ export declare class LuzmoItemGrid implements OnChanges {
     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;
+    /** Renders an item whose type has no renderer registered with `registerRenderer`. */
+    defaultRenderer?: GridItemRenderer;
     /** Fired when an item action is performed */
     readonly luzmoItemGridItemAction: import("@angular/core").OutputEmitterRef<CustomEvent<GridItemActionEventDetail>>;
     /** Bubbles from the item actions menu when the pointer enters an action. The detail has only `action` and `type`, not the item. */
@@ -74,7 +76,7 @@ export declare class LuzmoItemGrid implements OnChanges {
     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"; "luzmoItemGridItemActionHover": "luzmoItemGridItemActionHover"; "luzmoItemGridLayoutChanged": "luzmoItemGridLayoutChanged"; "luzmoItemGridReady": "luzmoItemGridReady"; "luzmoItemGridItemStatesChanged": "luzmoItemGridItemStatesChanged"; }, never, ["*"], true, 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; }; "defaultRenderer": { "alias": "defaultRenderer"; "required": false; }; }, { "luzmoItemGridItemAction": "luzmoItemGridItemAction"; "luzmoItemGridItemActionHover": "luzmoItemGridItemActionHover"; "luzmoItemGridLayoutChanged": "luzmoItemGridLayoutChanged"; "luzmoItemGridReady": "luzmoItemGridReady"; "luzmoItemGridItemStatesChanged": "luzmoItemGridItemStatesChanged"; }, never, ["*"], true, never>;
     static ngAcceptInputType_viewMode: unknown;
     static ngAcceptInputType_itemActionsDocumentPopover: unknown;
 }

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

@@ -55,6 +55,8 @@ export class LuzmoItemGrid {
     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;
+    /** Renders an item whose type has no renderer registered with `registerRenderer`. */
+    defaultRenderer;
     /** Fired when an item action is performed */
     luzmoItemGridItemAction = output({ alias: 'luzmoItemGridItemAction' });
     /** Bubbles from the item actions menu when the pointer enters an action. The detail has only `action` and `type`, not the item. */
@@ -136,6 +138,9 @@ export class LuzmoItemGrid {
                 case 'initialItemStates':
                     this.setHostProperty('initialItemStates', changes['initialItemStates'].currentValue);
                     break;
+                case 'defaultRenderer':
+                    this.setHostProperty('defaultRenderer', changes['defaultRenderer'].currentValue);
+                    break;
                 default:
                     break;
             }
@@ -173,7 +178,7 @@ export class LuzmoItemGrid {
         }));
     }
     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", luzmoItemGridItemActionHover: "luzmoItemGridItemActionHover", 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) {
+    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", defaultRenderer: "defaultRenderer" }, outputs: { luzmoItemGridItemAction: "luzmoItemGridItemAction", luzmoItemGridItemActionHover: "luzmoItemGridItemActionHover", 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 });
@@ -247,5 +252,8 @@ export class LuzmoItemGrid {
         }], initialItemStates: [{
             type: Input,
             args: [{ alias: 'initialItemStates' }]
+        }], defaultRenderer: [{
+            type: Input,
+            args: [{ alias: 'defaultRenderer' }]
         }], luzmoItemGridItemAction: [{ type: i0.Output, args: ["luzmoItemGridItemAction"] }], luzmoItemGridItemActionHover: [{ type: i0.Output, args: ["luzmoItemGridItemActionHover"] }], 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-color-picker.d.ts

@@ -12,26 +12,26 @@ export declare class LuzmoItemOptionColorPicker implements OnChanges {
     private readonly listenerCleanup;
     /** The underlying custom element instance. Use to call imperative methods. */
     get nativeElement(): LuzmoItemOptionColorPickerHostElement;
+    /** The current color value. */
+    value?: string;
+    /** Whether the control is disabled (non-interactive). */
+    disabled?: boolean;
+    /** Disables the alpha (opacity) channel in the color picker. */
+    noAlphaChannel?: boolean;
     /** Preset colors offered as quick-pick swatches. */
     swatches?: string[];
     /** Corner rounding of the color swatch: `full`, `light`, or `none`. */
     rounding?: 'full' | 'light' | 'none';
     /** Shape of the color swatch: `circle` or `rectangle`. */
     shape?: 'circle' | 'rectangle';
+    /** Placement of the color picker dropdown relative to its trigger. */
+    placement?: Placement;
     /** Delay in milliseconds before the change event is emitted after the user stops interacting. */
     debounce?: number;
     /** Emits value updates live, without `debounce`, plus interaction lifecycle events for drags and held keys. */
     liveInteractions?: boolean;
     /** Internal timer handle used to debounce change events. */
     debounceTimeout?: any;
-    /** The current color value. */
-    value?: string;
-    /** Whether the control is disabled (non-interactive). */
-    disabled?: boolean;
-    /** Disables the alpha (opacity) channel in the color picker. */
-    noAlphaChannel?: boolean;
-    /** Placement of the color picker dropdown relative to its trigger. */
-    placement?: Placement;
     /** Emitted when the option value changes. With `live-interactions`, emitted on every color change and carries `interaction` inside a gesture. */
     readonly luzmoOptionChanged: import("@angular/core").OutputEmitterRef<CustomEvent<ItemOptionChangedEventDetail>>;
     /** With `live-interactions`: a color area, hue or opacity drag or held key first changed the color, right before that value update. A press that never changes the color emits no lifecycle. */
@@ -49,10 +49,10 @@ export declare class LuzmoItemOptionColorPicker implements OnChanges {
     private setHostProperty;
     private bindEvents;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoItemOptionColorPicker, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoItemOptionColorPicker, "luzmo-item-option-color-picker", ["luzmoItemOptionColorPicker"], { "swatches": { "alias": "swatches"; "required": false; }; "rounding": { "alias": "rounding"; "required": false; }; "shape": { "alias": "shape"; "required": false; }; "debounce": { "alias": "debounce"; "required": false; }; "liveInteractions": { "alias": "liveInteractions"; "required": false; }; "debounceTimeout": { "alias": "debounceTimeout"; "required": false; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "noAlphaChannel": { "alias": "noAlphaChannel"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; }, { "luzmoOptionChanged": "luzmoOptionChanged"; "luzmoOptionInteractionStart": "luzmoOptionInteractionStart"; "luzmoOptionInteractionEnd": "luzmoOptionInteractionEnd"; }, never, ["*"], true, never>;
-    static ngAcceptInputType_liveInteractions: unknown;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoItemOptionColorPicker, "luzmo-item-option-color-picker", ["luzmoItemOptionColorPicker"], { "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "noAlphaChannel": { "alias": "noAlphaChannel"; "required": false; }; "swatches": { "alias": "swatches"; "required": false; }; "rounding": { "alias": "rounding"; "required": false; }; "shape": { "alias": "shape"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "debounce": { "alias": "debounce"; "required": false; }; "liveInteractions": { "alias": "liveInteractions"; "required": false; }; "debounceTimeout": { "alias": "debounceTimeout"; "required": false; }; }, { "luzmoOptionChanged": "luzmoOptionChanged"; "luzmoOptionInteractionStart": "luzmoOptionInteractionStart"; "luzmoOptionInteractionEnd": "luzmoOptionInteractionEnd"; }, never, ["*"], true, never>;
     static ngAcceptInputType_disabled: unknown;
     static ngAcceptInputType_noAlphaChannel: unknown;
+    static ngAcceptInputType_liveInteractions: unknown;
 }
 /** The underlying custom element type for LuzmoItemOptionColorPicker */
 export type LuzmoItemOptionColorPickerElement = LuzmoItemOptionColorPickerHostElement;

package/angular/esm/components/item-option-color-picker.js

@@ -15,26 +15,26 @@ export class LuzmoItemOptionColorPicker {
     get nativeElement() {
         return this.host;
     }
+    /** The current color value. */
+    value;
+    /** Whether the control is disabled (non-interactive). */
+    disabled;
+    /** Disables the alpha (opacity) channel in the color picker. */
+    noAlphaChannel;
     /** Preset colors offered as quick-pick swatches. */
     swatches;
     /** Corner rounding of the color swatch: `full`, `light`, or `none`. */
     rounding;
     /** Shape of the color swatch: `circle` or `rectangle`. */
     shape;
+    /** Placement of the color picker dropdown relative to its trigger. */
+    placement;
     /** Delay in milliseconds before the change event is emitted after the user stops interacting. */
     debounce;
     /** Emits value updates live, without `debounce`, plus interaction lifecycle events for drags and held keys. */
     liveInteractions;
     /** Internal timer handle used to debounce change events. */
     debounceTimeout;
-    /** The current color value. */
-    value;
-    /** Whether the control is disabled (non-interactive). */
-    disabled;
-    /** Disables the alpha (opacity) channel in the color picker. */
-    noAlphaChannel;
-    /** Placement of the color picker dropdown relative to its trigger. */
-    placement;
     /** Emitted when the option value changes. With `live-interactions`, emitted on every color change and carries `interaction` inside a gesture. */
     luzmoOptionChanged = output({ alias: 'luzmoOptionChanged' });
     /** With `live-interactions`: a color area, hue or opacity drag or held key first changed the color, right before that value update. A press that never changes the color emits no lifecycle. */
@@ -52,6 +52,15 @@ export class LuzmoItemOptionColorPicker {
     ngOnChanges(changes) {
         for (const key of Object.keys(changes)) {
             switch (key) {
+                case 'value':
+                    this.setHostProperty('value', changes['value'].currentValue);
+                    break;
+                case 'disabled':
+                    this.setHostProperty('disabled', changes['disabled'].currentValue);
+                    break;
+                case 'noAlphaChannel':
+                    this.setHostProperty('noAlphaChannel', changes['noAlphaChannel'].currentValue);
+                    break;
                 case 'swatches':
                     this.setHostProperty('swatches', changes['swatches'].currentValue);
                     break;
@@ -61,6 +70,9 @@ export class LuzmoItemOptionColorPicker {
                 case 'shape':
                     this.setHostProperty('shape', changes['shape'].currentValue);
                     break;
+                case 'placement':
+                    this.setHostProperty('placement', changes['placement'].currentValue);
+                    break;
                 case 'debounce':
                     this.setHostProperty('debounce', changes['debounce'].currentValue);
                     break;
@@ -70,18 +82,6 @@ export class LuzmoItemOptionColorPicker {
                 case 'debounceTimeout':
                     this.setHostProperty('debounceTimeout', changes['debounceTimeout'].currentValue);
                     break;
-                case 'value':
-                    this.setHostProperty('value', changes['value'].currentValue);
-                    break;
-                case 'disabled':
-                    this.setHostProperty('disabled', changes['disabled'].currentValue);
-                    break;
-                case 'noAlphaChannel':
-                    this.setHostProperty('noAlphaChannel', changes['noAlphaChannel'].currentValue);
-                    break;
-                case 'placement':
-                    this.setHostProperty('placement', changes['placement'].currentValue);
-                    break;
                 default:
                     break;
             }
@@ -111,7 +111,7 @@ export class LuzmoItemOptionColorPicker {
         }));
     }
     static ɵfac = function LuzmoItemOptionColorPicker_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoItemOptionColorPicker)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoItemOptionColorPicker, selectors: [["luzmo-item-option-color-picker"]], inputs: { swatches: "swatches", rounding: "rounding", shape: "shape", debounce: "debounce", liveInteractions: [2, "liveInteractions", "liveInteractions", booleanAttribute], debounceTimeout: "debounceTimeout", value: "value", disabled: [2, "disabled", "disabled", booleanAttribute], noAlphaChannel: [2, "noAlphaChannel", "noAlphaChannel", booleanAttribute], placement: "placement" }, outputs: { luzmoOptionChanged: "luzmoOptionChanged", luzmoOptionInteractionStart: "luzmoOptionInteractionStart", luzmoOptionInteractionEnd: "luzmoOptionInteractionEnd" }, exportAs: ["luzmoItemOptionColorPicker"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoItemOptionColorPicker_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoItemOptionColorPicker, selectors: [["luzmo-item-option-color-picker"]], inputs: { value: "value", disabled: [2, "disabled", "disabled", booleanAttribute], noAlphaChannel: [2, "noAlphaChannel", "noAlphaChannel", booleanAttribute], swatches: "swatches", rounding: "rounding", shape: "shape", placement: "placement", debounce: "debounce", liveInteractions: [2, "liveInteractions", "liveInteractions", booleanAttribute], debounceTimeout: "debounceTimeout" }, outputs: { luzmoOptionChanged: "luzmoOptionChanged", luzmoOptionInteractionStart: "luzmoOptionInteractionStart", luzmoOptionInteractionEnd: "luzmoOptionInteractionEnd" }, exportAs: ["luzmoItemOptionColorPicker"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoItemOptionColorPicker_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
         } }, encapsulation: 2 });
@@ -125,7 +125,16 @@ export class LuzmoItemOptionColorPicker {
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 template: '<ng-content />'
             }]
-    }], () => [], { swatches: [{
+    }], () => [], { value: [{
+            type: Input,
+            args: [{ alias: 'value' }]
+        }], disabled: [{
+            type: Input,
+            args: [{ alias: 'disabled', transform: booleanAttribute }]
+        }], noAlphaChannel: [{
+            type: Input,
+            args: [{ alias: 'noAlphaChannel', transform: booleanAttribute }]
+        }], swatches: [{
             type: Input,
             args: [{ alias: 'swatches' }]
         }], rounding: [{
@@ -134,6 +143,9 @@ export class LuzmoItemOptionColorPicker {
         }], shape: [{
             type: Input,
             args: [{ alias: 'shape' }]
+        }], placement: [{
+            type: Input,
+            args: [{ alias: 'placement' }]
         }], debounce: [{
             type: Input,
             args: [{ alias: 'debounce' }]
@@ -143,17 +155,5 @@ export class LuzmoItemOptionColorPicker {
         }], debounceTimeout: [{
             type: Input,
             args: [{ alias: 'debounceTimeout' }]
-        }], value: [{
-            type: Input,
-            args: [{ alias: 'value' }]
-        }], disabled: [{
-            type: Input,
-            args: [{ alias: 'disabled', transform: booleanAttribute }]
-        }], noAlphaChannel: [{
-            type: Input,
-            args: [{ alias: 'noAlphaChannel', transform: booleanAttribute }]
-        }], placement: [{
-            type: Input,
-            args: [{ alias: 'placement' }]
         }], luzmoOptionChanged: [{ type: i0.Output, args: ["luzmoOptionChanged"] }], luzmoOptionInteractionStart: [{ type: i0.Output, args: ["luzmoOptionInteractionStart"] }], luzmoOptionInteractionEnd: [{ type: i0.Output, args: ["luzmoOptionInteractionEnd"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoItemOptionColorPicker, { className: "LuzmoItemOptionColorPicker", filePath: "components/item-option-color-picker.ts", lineNumber: 17 }); })();

package/angular/esm/components/item-option-guidelines.d.ts

@@ -1,6 +1,6 @@
 import { OnChanges, SimpleChanges } from '@angular/core';
 import '@luzmo/analytics-components-kit/item-option-guidelines';
-import type { LuzmoItemOptionGuidelines as LuzmoItemOptionGuidelinesHostElement, ItemOptionChangedEventDetail, ItemOptionInteractionEventDetail } from '@luzmo/analytics-components-kit/item-option-guidelines';
+import type { LuzmoItemOptionGuidelines as LuzmoItemOptionGuidelinesHostElement, Guidelines, ItemOptionChangedEventDetail, ItemOptionInteractionEventDetail } from '@luzmo/analytics-components-kit/item-option-guidelines';
 import * as i0 from "@angular/core";
 export type { GuidelineLine, GuidelineLineType, GuidelineStyle, GuidelineStyleType, GuidelineWidth, Guidelines, ItemOptionChangedEventDetail, ItemOptionInteraction, ItemOptionInteractionEventDetail } from '@luzmo/analytics-components-kit/item-option-guidelines';
 export declare class LuzmoItemOptionGuidelines implements OnChanges {
@@ -11,6 +11,12 @@ export declare class LuzmoItemOptionGuidelines implements OnChanges {
     private readonly listenerCleanup;
     /** The underlying custom element instance. Use to call imperative methods. */
     get nativeElement(): LuzmoItemOptionGuidelinesHostElement;
+    /** The current guidelines value (`lines` plus shared `style`). */
+    value?: Guidelines;
+    /** Allowed guideline calculation types for this chart (from the option config enum). */
+    lineTypes?: string[];
+    /** Display labels for guideline types (key → label). Missing keys fall back to built-in copy. */
+    lineTypeLabels?: Record<string, string>;
     /** Default color used when adding a guideline. */
     defaultColor?: string;
     /** Delay in milliseconds before color and number changes are emitted. */
@@ -34,7 +40,7 @@ export declare class LuzmoItemOptionGuidelines implements OnChanges {
     private setHostProperty;
     private bindEvents;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoItemOptionGuidelines, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoItemOptionGuidelines, "luzmo-item-option-guidelines", ["luzmoItemOptionGuidelines"], { "defaultColor": { "alias": "defaultColor"; "required": false; }; "debounce": { "alias": "debounce"; "required": false; }; "liveInteractions": { "alias": "liveInteractions"; "required": false; }; }, { "luzmoOptionChanged": "luzmoOptionChanged"; "luzmoOptionInteractionStart": "luzmoOptionInteractionStart"; "luzmoOptionInteractionEnd": "luzmoOptionInteractionEnd"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoItemOptionGuidelines, "luzmo-item-option-guidelines", ["luzmoItemOptionGuidelines"], { "value": { "alias": "value"; "required": false; }; "lineTypes": { "alias": "lineTypes"; "required": false; }; "lineTypeLabels": { "alias": "lineTypeLabels"; "required": false; }; "defaultColor": { "alias": "defaultColor"; "required": false; }; "debounce": { "alias": "debounce"; "required": false; }; "liveInteractions": { "alias": "liveInteractions"; "required": false; }; }, { "luzmoOptionChanged": "luzmoOptionChanged"; "luzmoOptionInteractionStart": "luzmoOptionInteractionStart"; "luzmoOptionInteractionEnd": "luzmoOptionInteractionEnd"; }, never, ["*"], true, never>;
     static ngAcceptInputType_liveInteractions: unknown;
 }
 /** The underlying custom element type for LuzmoItemOptionGuidelines */

package/angular/esm/components/item-option-guidelines.js

@@ -15,6 +15,12 @@ export class LuzmoItemOptionGuidelines {
     get nativeElement() {
         return this.host;
     }
+    /** The current guidelines value (`lines` plus shared `style`). */
+    value;
+    /** Allowed guideline calculation types for this chart (from the option config enum). */
+    lineTypes;
+    /** Display labels for guideline types (key → label). Missing keys fall back to built-in copy. */
+    lineTypeLabels;
     /** Default color used when adding a guideline. */
     defaultColor;
     /** Delay in milliseconds before color and number changes are emitted. */
@@ -38,6 +44,15 @@ export class LuzmoItemOptionGuidelines {
     ngOnChanges(changes) {
         for (const key of Object.keys(changes)) {
             switch (key) {
+                case 'value':
+                    this.setHostProperty('value', changes['value'].currentValue);
+                    break;
+                case 'lineTypes':
+                    this.setHostProperty('lineTypes', changes['lineTypes'].currentValue);
+                    break;
+                case 'lineTypeLabels':
+                    this.setHostProperty('lineTypeLabels', changes['lineTypeLabels'].currentValue);
+                    break;
                 case 'defaultColor':
                     this.setHostProperty('defaultColor', changes['defaultColor'].currentValue);
                     break;
@@ -76,7 +91,7 @@ export class LuzmoItemOptionGuidelines {
         }));
     }
     static ɵfac = function LuzmoItemOptionGuidelines_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoItemOptionGuidelines)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoItemOptionGuidelines, selectors: [["luzmo-item-option-guidelines"]], inputs: { defaultColor: "defaultColor", debounce: "debounce", liveInteractions: [2, "liveInteractions", "liveInteractions", booleanAttribute] }, outputs: { luzmoOptionChanged: "luzmoOptionChanged", luzmoOptionInteractionStart: "luzmoOptionInteractionStart", luzmoOptionInteractionEnd: "luzmoOptionInteractionEnd" }, exportAs: ["luzmoItemOptionGuidelines"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoItemOptionGuidelines_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoItemOptionGuidelines, selectors: [["luzmo-item-option-guidelines"]], inputs: { value: "value", lineTypes: "lineTypes", lineTypeLabels: "lineTypeLabels", defaultColor: "defaultColor", debounce: "debounce", liveInteractions: [2, "liveInteractions", "liveInteractions", booleanAttribute] }, outputs: { luzmoOptionChanged: "luzmoOptionChanged", luzmoOptionInteractionStart: "luzmoOptionInteractionStart", luzmoOptionInteractionEnd: "luzmoOptionInteractionEnd" }, exportAs: ["luzmoItemOptionGuidelines"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoItemOptionGuidelines_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
         } }, encapsulation: 2 });
@@ -90,7 +105,16 @@ export class LuzmoItemOptionGuidelines {
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 template: '<ng-content />'
             }]
-    }], () => [], { defaultColor: [{
+    }], () => [], { value: [{
+            type: Input,
+            args: [{ alias: 'value' }]
+        }], lineTypes: [{
+            type: Input,
+            args: [{ alias: 'lineTypes' }]
+        }], lineTypeLabels: [{
+            type: Input,
+            args: [{ alias: 'lineTypeLabels' }]
+        }], defaultColor: [{
             type: Input,
             args: [{ alias: 'defaultColor' }]
         }], debounce: [{

package/angular/esm/components/item-option-multi-language-field.d.ts

@@ -11,8 +11,6 @@ export declare class LuzmoItemOptionMultiLanguageField implements OnChanges {
     private readonly listenerCleanup;
     /** The underlying custom element instance. Use to call imperative methods. */
     get nativeElement(): LuzmoItemOptionMultiLangFieldHostElement;
-    /** Internal timer handle used to debounce change events. */
-    debounceTimeout?: any;
     /** The current value per language (language code → text). */
     value?: Record<string, string>;
     /** Whether the control is shown in an invalid state. */
@@ -29,6 +27,8 @@ export declare class LuzmoItemOptionMultiLanguageField implements OnChanges {
     toValue?: unknown;
     /** Delay in milliseconds before the change event is emitted after the user stops interacting. */
     debounce?: number;
+    /** Internal timer handle used to debounce change events. */
+    debounceTimeout?: any;
     /** Emitted when the option value changes. */
     readonly luzmoOptionChanged: import("@angular/core").OutputEmitterRef<CustomEvent<ItemOptionChangedEventDetail>>;
     constructor();
@@ -42,7 +42,7 @@ export declare class LuzmoItemOptionMultiLanguageField implements OnChanges {
     private setHostProperty;
     private bindEvents;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoItemOptionMultiLanguageField, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoItemOptionMultiLanguageField, "luzmo-item-option-multi-language-field", ["luzmoItemOptionMultiLanguageField"], { "debounceTimeout": { "alias": "debounceTimeout"; "required": false; }; "value": { "alias": "value"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "language": { "alias": "language"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "parseValue": { "alias": "parseValue"; "required": false; }; "toValue": { "alias": "toValue"; "required": false; }; "debounce": { "alias": "debounce"; "required": false; }; }, { "luzmoOptionChanged": "luzmoOptionChanged"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoItemOptionMultiLanguageField, "luzmo-item-option-multi-language-field", ["luzmoItemOptionMultiLanguageField"], { "value": { "alias": "value"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "language": { "alias": "language"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "parseValue": { "alias": "parseValue"; "required": false; }; "toValue": { "alias": "toValue"; "required": false; }; "debounce": { "alias": "debounce"; "required": false; }; "debounceTimeout": { "alias": "debounceTimeout"; "required": false; }; }, { "luzmoOptionChanged": "luzmoOptionChanged"; }, never, ["*"], true, never>;
     static ngAcceptInputType_invalid: unknown;
     static ngAcceptInputType_readonly: unknown;
 }