@luzmo/analytics-components-kit 1.3.0 → 1.4.0

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;
 }

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

@@ -15,8 +15,6 @@ export class LuzmoItemOptionMultiLanguageField {
     get nativeElement() {
         return this.host;
     }
-    /** Internal timer handle used to debounce change events. */
-    debounceTimeout;
     /** The current value per language (language code → text). */
     value;
     /** Whether the control is shown in an invalid state. */
@@ -33,6 +31,8 @@ export class LuzmoItemOptionMultiLanguageField {
     toValue;
     /** Delay in milliseconds before the change event is emitted after the user stops interacting. */
     debounce;
+    /** Internal timer handle used to debounce change events. */
+    debounceTimeout;
     /** Emitted when the option value changes. */
     luzmoOptionChanged = output({ alias: 'luzmoOptionChanged' });
     constructor() {
@@ -46,9 +46,6 @@ export class LuzmoItemOptionMultiLanguageField {
     ngOnChanges(changes) {
         for (const key of Object.keys(changes)) {
             switch (key) {
-                case 'debounceTimeout':
-                    this.setHostProperty('debounceTimeout', changes['debounceTimeout'].currentValue);
-                    break;
                 case 'value':
                     this.setHostProperty('value', changes['value'].currentValue);
                     break;
@@ -73,6 +70,9 @@ export class LuzmoItemOptionMultiLanguageField {
                 case 'debounce':
                     this.setHostProperty('debounce', changes['debounce'].currentValue);
                     break;
+                case 'debounceTimeout':
+                    this.setHostProperty('debounceTimeout', changes['debounceTimeout'].currentValue);
+                    break;
                 default:
                     break;
             }
@@ -94,7 +94,7 @@ export class LuzmoItemOptionMultiLanguageField {
         }));
     }
     static ɵfac = function LuzmoItemOptionMultiLanguageField_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoItemOptionMultiLanguageField)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoItemOptionMultiLanguageField, selectors: [["luzmo-item-option-multi-language-field"]], inputs: { debounceTimeout: "debounceTimeout", value: "value", invalid: [2, "invalid", "invalid", booleanAttribute], readonly: [2, "readonly", "readonly", booleanAttribute], language: "language", placeholder: "placeholder", parseValue: "parseValue", toValue: "toValue", debounce: "debounce" }, outputs: { luzmoOptionChanged: "luzmoOptionChanged" }, exportAs: ["luzmoItemOptionMultiLanguageField"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoItemOptionMultiLanguageField_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoItemOptionMultiLanguageField, selectors: [["luzmo-item-option-multi-language-field"]], inputs: { value: "value", invalid: [2, "invalid", "invalid", booleanAttribute], readonly: [2, "readonly", "readonly", booleanAttribute], language: "language", placeholder: "placeholder", parseValue: "parseValue", toValue: "toValue", debounce: "debounce", debounceTimeout: "debounceTimeout" }, outputs: { luzmoOptionChanged: "luzmoOptionChanged" }, exportAs: ["luzmoItemOptionMultiLanguageField"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoItemOptionMultiLanguageField_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
         } }, encapsulation: 2 });
@@ -108,10 +108,7 @@ export class LuzmoItemOptionMultiLanguageField {
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 template: '<ng-content />'
             }]
-    }], () => [], { debounceTimeout: [{
-            type: Input,
-            args: [{ alias: 'debounceTimeout' }]
-        }], value: [{
+    }], () => [], { value: [{
             type: Input,
             args: [{ alias: 'value' }]
         }], invalid: [{
@@ -135,5 +132,8 @@ export class LuzmoItemOptionMultiLanguageField {
         }], debounce: [{
             type: Input,
             args: [{ alias: 'debounce' }]
+        }], debounceTimeout: [{
+            type: Input,
+            args: [{ alias: 'debounceTimeout' }]
         }], luzmoOptionChanged: [{ type: i0.Output, args: ["luzmoOptionChanged"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoItemOptionMultiLanguageField, { className: "LuzmoItemOptionMultiLanguageField", filePath: "components/item-option-multi-language-field.ts", lineNumber: 16 }); })();

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

@@ -11,10 +11,6 @@ export declare class LuzmoItemOptionNumberField implements OnChanges {
     private readonly listenerCleanup;
     /** The underlying custom element instance. Use to call imperative methods. */
     get nativeElement(): LuzmoItemOptionNumberFieldHostElement;
-    /** 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;
     /** Whether the control is disabled (non-interactive). */
     disabled?: boolean;
     /** The minimum allowed value. */
@@ -33,10 +29,14 @@ export declare class LuzmoItemOptionNumberField implements OnChanges {
     step?: number;
     /** Unit suffix shown after the value. */
     unit?: boolean;
+    /** Delay in milliseconds before the change event is emitted after the user stops interacting. */
+    debounce?: number;
     /** Optional transform applied to the stored value before it is displayed in the control. */
     parseValue?: unknown;
     /** Optional transform applied to the control's value before it is emitted in the change event. */
     toValue?: unknown;
+    /** 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();
@@ -50,7 +50,7 @@ export declare class LuzmoItemOptionNumberField implements OnChanges {
     private setHostProperty;
     private bindEvents;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoItemOptionNumberField, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoItemOptionNumberField, "luzmo-item-option-number-field", ["luzmoItemOptionNumberField"], { "debounce": { "alias": "debounce"; "required": false; }; "debounceTimeout": { "alias": "debounceTimeout"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "default": { "alias": "default"; "required": false; }; "value": { "alias": "value"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "minWidthInputField": { "alias": "minWidthInputField"; "required": false; }; "step": { "alias": "step"; "required": false; }; "unit": { "alias": "unit"; "required": false; }; "parseValue": { "alias": "parseValue"; "required": false; }; "toValue": { "alias": "toValue"; "required": false; }; }, { "luzmoOptionChanged": "luzmoOptionChanged"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoItemOptionNumberField, "luzmo-item-option-number-field", ["luzmoItemOptionNumberField"], { "disabled": { "alias": "disabled"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "default": { "alias": "default"; "required": false; }; "value": { "alias": "value"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "minWidthInputField": { "alias": "minWidthInputField"; "required": false; }; "step": { "alias": "step"; "required": false; }; "unit": { "alias": "unit"; "required": false; }; "debounce": { "alias": "debounce"; "required": false; }; "parseValue": { "alias": "parseValue"; "required": false; }; "toValue": { "alias": "toValue"; "required": false; }; "debounceTimeout": { "alias": "debounceTimeout"; "required": false; }; }, { "luzmoOptionChanged": "luzmoOptionChanged"; }, never, ["*"], true, never>;
     static ngAcceptInputType_disabled: unknown;
     static ngAcceptInputType_unit: unknown;
 }

package/angular/esm/components/item-option-number-field.js

@@ -15,10 +15,6 @@ export class LuzmoItemOptionNumberField {
     get nativeElement() {
         return this.host;
     }
-    /** Delay in milliseconds before the change event is emitted after the user stops interacting. */
-    debounce;
-    /** Internal timer handle used to debounce change events. */
-    debounceTimeout;
     /** Whether the control is disabled (non-interactive). */
     disabled;
     /** The minimum allowed value. */
@@ -37,10 +33,14 @@ export class LuzmoItemOptionNumberField {
     step;
     /** Unit suffix shown after the value. */
     unit;
+    /** Delay in milliseconds before the change event is emitted after the user stops interacting. */
+    debounce;
     /** Optional transform applied to the stored value before it is displayed in the control. */
     parseValue;
     /** Optional transform applied to the control's value before it is emitted in the change event. */
     toValue;
+    /** Internal timer handle used to debounce change events. */
+    debounceTimeout;
     /** Emitted when the option value changes. */
     luzmoOptionChanged = output({ alias: 'luzmoOptionChanged' });
     constructor() {
@@ -54,12 +54,6 @@ export class LuzmoItemOptionNumberField {
     ngOnChanges(changes) {
         for (const key of Object.keys(changes)) {
             switch (key) {
-                case 'debounce':
-                    this.setHostProperty('debounce', changes['debounce'].currentValue);
-                    break;
-                case 'debounceTimeout':
-                    this.setHostProperty('debounceTimeout', changes['debounceTimeout'].currentValue);
-                    break;
                 case 'disabled':
                     this.setHostProperty('disabled', changes['disabled'].currentValue);
                     break;
@@ -87,12 +81,18 @@ export class LuzmoItemOptionNumberField {
                 case 'unit':
                     this.setHostProperty('unit', changes['unit'].currentValue);
                     break;
+                case 'debounce':
+                    this.setHostProperty('debounce', changes['debounce'].currentValue);
+                    break;
                 case 'parseValue':
                     this.setHostProperty('parseValue', changes['parseValue'].currentValue);
                     break;
                 case 'toValue':
                     this.setHostProperty('toValue', changes['toValue'].currentValue);
                     break;
+                case 'debounceTimeout':
+                    this.setHostProperty('debounceTimeout', changes['debounceTimeout'].currentValue);
+                    break;
                 default:
                     break;
             }
@@ -114,7 +114,7 @@ export class LuzmoItemOptionNumberField {
         }));
     }
     static ɵfac = function LuzmoItemOptionNumberField_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoItemOptionNumberField)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoItemOptionNumberField, selectors: [["luzmo-item-option-number-field"]], inputs: { debounce: "debounce", debounceTimeout: "debounceTimeout", disabled: [2, "disabled", "disabled", booleanAttribute], min: "min", max: "max", default: "default", value: "value", placeholder: "placeholder", minWidthInputField: "minWidthInputField", step: "step", unit: [2, "unit", "unit", booleanAttribute], parseValue: "parseValue", toValue: "toValue" }, outputs: { luzmoOptionChanged: "luzmoOptionChanged" }, exportAs: ["luzmoItemOptionNumberField"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoItemOptionNumberField_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoItemOptionNumberField, selectors: [["luzmo-item-option-number-field"]], inputs: { disabled: [2, "disabled", "disabled", booleanAttribute], min: "min", max: "max", default: "default", value: "value", placeholder: "placeholder", minWidthInputField: "minWidthInputField", step: "step", unit: [2, "unit", "unit", booleanAttribute], debounce: "debounce", parseValue: "parseValue", toValue: "toValue", debounceTimeout: "debounceTimeout" }, outputs: { luzmoOptionChanged: "luzmoOptionChanged" }, exportAs: ["luzmoItemOptionNumberField"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoItemOptionNumberField_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
         } }, encapsulation: 2 });
@@ -128,13 +128,7 @@ export class LuzmoItemOptionNumberField {
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 template: '<ng-content />'
             }]
-    }], () => [], { debounce: [{
-            type: Input,
-            args: [{ alias: 'debounce' }]
-        }], debounceTimeout: [{
-            type: Input,
-            args: [{ alias: 'debounceTimeout' }]
-        }], disabled: [{
+    }], () => [], { disabled: [{
             type: Input,
             args: [{ alias: 'disabled', transform: booleanAttribute }]
         }], min: [{
@@ -161,11 +155,17 @@ export class LuzmoItemOptionNumberField {
         }], unit: [{
             type: Input,
             args: [{ alias: 'unit', transform: booleanAttribute }]
+        }], debounce: [{
+            type: Input,
+            args: [{ alias: 'debounce' }]
         }], parseValue: [{
             type: Input,
             args: [{ alias: 'parseValue' }]
         }], toValue: [{
             type: Input,
             args: [{ alias: 'toValue' }]
+        }], debounceTimeout: [{
+            type: Input,
+            args: [{ alias: 'debounceTimeout' }]
         }], luzmoOptionChanged: [{ type: i0.Output, args: ["luzmoOptionChanged"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoItemOptionNumberField, { className: "LuzmoItemOptionNumberField", filePath: "components/item-option-number-field.ts", lineNumber: 16 }); })();

package/angular/esm/components/item-option-positions-number-field.d.ts

@@ -11,10 +11,6 @@ export declare class LuzmoItemOptionPositionsNumberField implements OnChanges {
     private readonly listenerCleanup;
     /** The underlying custom element instance. Use to call imperative methods. */
     get nativeElement(): LuzmoItemOptionPositionsNumberFieldHostElement;
-    /** The value applied to all positions when sync is enabled. */
-    syncedValue?: number;
-    /** Internal timer handle used to debounce change events. */
-    debounceTimeout?: any;
     /** Which positions to render input fields for (e.g. top/right/bottom/left, or corners and center). */
     positions?: ('top' | 'right' | 'bottom' | 'left' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'center')[];
     /** The current numeric value for each position. */
@@ -31,6 +27,10 @@ export declare class LuzmoItemOptionPositionsNumberField implements OnChanges {
     debounce?: number;
     /** Whether all positions are currently synced to a single value. */
     sync?: boolean;
+    /** The value applied to all positions when sync is enabled. */
+    syncedValue?: 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();
@@ -44,7 +44,7 @@ export declare class LuzmoItemOptionPositionsNumberField implements OnChanges {
     private setHostProperty;
     private bindEvents;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoItemOptionPositionsNumberField, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoItemOptionPositionsNumberField, "luzmo-item-option-positions-number-field", ["luzmoItemOptionPositionsNumberField"], { "syncedValue": { "alias": "syncedValue"; "required": false; }; "debounceTimeout": { "alias": "debounceTimeout"; "required": false; }; "positions": { "alias": "positions"; "required": false; }; "values": { "alias": "values"; "required": false; }; "canSync": { "alias": "canSync"; "required": false; }; "positionConfiguration": { "alias": "positionConfiguration"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "debounce": { "alias": "debounce"; "required": false; }; "sync": { "alias": "sync"; "required": false; }; }, { "luzmoOptionChanged": "luzmoOptionChanged"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoItemOptionPositionsNumberField, "luzmo-item-option-positions-number-field", ["luzmoItemOptionPositionsNumberField"], { "positions": { "alias": "positions"; "required": false; }; "values": { "alias": "values"; "required": false; }; "canSync": { "alias": "canSync"; "required": false; }; "positionConfiguration": { "alias": "positionConfiguration"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "debounce": { "alias": "debounce"; "required": false; }; "sync": { "alias": "sync"; "required": false; }; "syncedValue": { "alias": "syncedValue"; "required": false; }; "debounceTimeout": { "alias": "debounceTimeout"; "required": false; }; }, { "luzmoOptionChanged": "luzmoOptionChanged"; }, never, ["*"], true, never>;
     static ngAcceptInputType_canSync: unknown;
     static ngAcceptInputType_invalid: unknown;
     static ngAcceptInputType_readonly: unknown;