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

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

@@ -0,0 +1,131 @@
+import { booleanAttribute, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, output, Renderer2 } from '@angular/core';
+import '@luzmo/analytics-components-kit/item-option-color-palette-picker';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+/**
+ * Angular wrapper component for <luzmo-item-option-color-palette-picker>
+ */
+export class LuzmoItemOptionColorPalettePicker {
+    elementRef = inject(ElementRef);
+    renderer = inject(Renderer2);
+    destroyRef = inject(DestroyRef);
+    host = this.elementRef.nativeElement;
+    listenerCleanup = [];
+    /** The underlying custom element instance. Use to call imperative methods. */
+    get nativeElement() {
+        return this.host;
+    }
+    /** The selected color palette key of the picker */
+    value;
+    /** The default color palette key of the picker */
+    default;
+    /** The color palette keys of the picker */
+    values;
+    /** Whether the picker is disabled */
+    disabled;
+    /** Whether the picker is horizontal */
+    horizontal;
+    /** The function to parse the value */
+    parseValue;
+    /** The function to convert the value to a string */
+    toValue;
+    /** The number of colors to display */
+    numberOfColors;
+    /** Emitted when the option value changes. */
+    luzmoOptionChanged = output({ alias: 'luzmoOptionChanged' });
+    constructor() {
+        this.bindEvents();
+        this.destroyRef.onDestroy(() => {
+            for (const cleanup of this.listenerCleanup) {
+                cleanup();
+            }
+        });
+    }
+    ngOnChanges(changes) {
+        for (const key of Object.keys(changes)) {
+            switch (key) {
+                case 'value':
+                    this.setHostProperty('value', changes['value'].currentValue);
+                    break;
+                case 'default':
+                    this.setHostProperty('default', changes['default'].currentValue);
+                    break;
+                case 'values':
+                    this.setHostProperty('values', changes['values'].currentValue);
+                    break;
+                case 'disabled':
+                    this.setHostProperty('disabled', changes['disabled'].currentValue);
+                    break;
+                case 'horizontal':
+                    this.setHostProperty('horizontal', changes['horizontal'].currentValue);
+                    break;
+                case 'parseValue':
+                    this.setHostProperty('parseValue', changes['parseValue'].currentValue);
+                    break;
+                case 'toValue':
+                    this.setHostProperty('toValue', changes['toValue'].currentValue);
+                    break;
+                case 'numberOfColors':
+                    this.setHostProperty('numberOfColors', changes['numberOfColors'].currentValue);
+                    break;
+                default:
+                    break;
+            }
+        }
+    }
+    /**
+     * Forward a wrapper @Input to the underlying host element via Renderer2 so
+     * the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
+     * Unlike a "skip undefined" guard, this lets consumers reset values back to
+     * undefined / null by clearing their bindings.
+     */
+    setHostProperty(key, value) {
+        this.renderer.setProperty(this.host, key, value);
+    }
+    bindEvents() {
+        this.listenerCleanup.push(this.renderer.listen(this.host, 'luzmo-option-changed', (event) => {
+            const typed = event;
+            this.luzmoOptionChanged.emit(typed);
+        }));
+    }
+    static ɵfac = function LuzmoItemOptionColorPalettePicker_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoItemOptionColorPalettePicker)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoItemOptionColorPalettePicker, selectors: [["luzmo-item-option-color-palette-picker"]], inputs: { value: "value", default: "default", values: "values", disabled: [2, "disabled", "disabled", booleanAttribute], horizontal: [2, "horizontal", "horizontal", booleanAttribute], parseValue: "parseValue", toValue: "toValue", numberOfColors: "numberOfColors" }, outputs: { luzmoOptionChanged: "luzmoOptionChanged" }, exportAs: ["luzmoItemOptionColorPalettePicker"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoItemOptionColorPalettePicker_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0);
+        } }, encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoItemOptionColorPalettePicker, [{
+        type: Component,
+        args: [{
+                selector: 'luzmo-item-option-color-palette-picker',
+                exportAs: 'luzmoItemOptionColorPalettePicker',
+                standalone: true,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content />'
+            }]
+    }], () => [], { value: [{
+            type: Input,
+            args: [{ alias: 'value' }]
+        }], default: [{
+            type: Input,
+            args: [{ alias: 'default' }]
+        }], values: [{
+            type: Input,
+            args: [{ alias: 'values' }]
+        }], disabled: [{
+            type: Input,
+            args: [{ alias: 'disabled', transform: booleanAttribute }]
+        }], horizontal: [{
+            type: Input,
+            args: [{ alias: 'horizontal', transform: booleanAttribute }]
+        }], parseValue: [{
+            type: Input,
+            args: [{ alias: 'parseValue' }]
+        }], toValue: [{
+            type: Input,
+            args: [{ alias: 'toValue' }]
+        }], numberOfColors: [{
+            type: Input,
+            args: [{ alias: 'numberOfColors' }]
+        }], luzmoOptionChanged: [{ type: i0.Output, args: ["luzmoOptionChanged"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoItemOptionColorPalettePicker, { className: "LuzmoItemOptionColorPalettePicker", filePath: "components/item-option-color-palette-picker.ts", lineNumber: 16 }); })();

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

@@ -0,0 +1,51 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import '@luzmo/analytics-components-kit/item-option-color-picker';
+import type { LuzmoItemOptionColorPicker as LuzmoItemOptionColorPickerHostElement, ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-color-picker';
+import type { Placement } from '@luzmo/lucero';
+import * as i0 from "@angular/core";
+export type { ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-color-picker';
+export declare class LuzmoItemOptionColorPicker implements OnChanges {
+    private readonly elementRef;
+    private readonly renderer;
+    private readonly destroyRef;
+    private readonly host;
+    private readonly listenerCleanup;
+    /** The underlying custom element instance. Use to call imperative methods. */
+    get nativeElement(): LuzmoItemOptionColorPickerHostElement;
+    /** 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';
+    /** 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;
+    /** 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. */
+    readonly luzmoOptionChanged: import("@angular/core").OutputEmitterRef<CustomEvent<ItemOptionChangedEventDetail>>;
+    constructor();
+    ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * Forward a wrapper @Input to the underlying host element via Renderer2 so
+     * the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
+     * Unlike a "skip undefined" guard, this lets consumers reset values back to
+     * undefined / null by clearing their bindings.
+     */
+    private setHostProperty;
+    private bindEvents;
+    static ɵfac: i0.ɵɵFactoryDeclaration<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; }; "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"; }, never, ["*"], true, never>;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_noAlphaChannel: unknown;
+}
+/** The underlying custom element type for LuzmoItemOptionColorPicker */
+export type LuzmoItemOptionColorPickerElement = LuzmoItemOptionColorPickerHostElement;

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

@@ -0,0 +1,139 @@
+import { booleanAttribute, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, output, Renderer2 } from '@angular/core';
+import '@luzmo/analytics-components-kit/item-option-color-picker';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+/**
+ * Angular wrapper component for <luzmo-item-option-color-picker>
+ */
+export class LuzmoItemOptionColorPicker {
+    elementRef = inject(ElementRef);
+    renderer = inject(Renderer2);
+    destroyRef = inject(DestroyRef);
+    host = this.elementRef.nativeElement;
+    listenerCleanup = [];
+    /** The underlying custom element instance. Use to call imperative methods. */
+    get nativeElement() {
+        return this.host;
+    }
+    /** 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;
+    /** Delay in milliseconds before the change event is emitted after the user stops interacting. */
+    debounce;
+    /** 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. */
+    luzmoOptionChanged = output({ alias: 'luzmoOptionChanged' });
+    constructor() {
+        this.bindEvents();
+        this.destroyRef.onDestroy(() => {
+            for (const cleanup of this.listenerCleanup) {
+                cleanup();
+            }
+        });
+    }
+    ngOnChanges(changes) {
+        for (const key of Object.keys(changes)) {
+            switch (key) {
+                case 'swatches':
+                    this.setHostProperty('swatches', changes['swatches'].currentValue);
+                    break;
+                case 'rounding':
+                    this.setHostProperty('rounding', changes['rounding'].currentValue);
+                    break;
+                case 'shape':
+                    this.setHostProperty('shape', changes['shape'].currentValue);
+                    break;
+                case 'debounce':
+                    this.setHostProperty('debounce', changes['debounce'].currentValue);
+                    break;
+                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;
+            }
+        }
+    }
+    /**
+     * Forward a wrapper @Input to the underlying host element via Renderer2 so
+     * the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
+     * Unlike a "skip undefined" guard, this lets consumers reset values back to
+     * undefined / null by clearing their bindings.
+     */
+    setHostProperty(key, value) {
+        this.renderer.setProperty(this.host, key, value);
+    }
+    bindEvents() {
+        this.listenerCleanup.push(this.renderer.listen(this.host, 'luzmo-option-changed', (event) => {
+            const typed = event;
+            this.luzmoOptionChanged.emit(typed);
+        }));
+    }
+    static ɵfac = function 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", debounceTimeout: "debounceTimeout", value: "value", disabled: [2, "disabled", "disabled", booleanAttribute], noAlphaChannel: [2, "noAlphaChannel", "noAlphaChannel", booleanAttribute], placement: "placement" }, outputs: { luzmoOptionChanged: "luzmoOptionChanged" }, 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 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoItemOptionColorPicker, [{
+        type: Component,
+        args: [{
+                selector: 'luzmo-item-option-color-picker',
+                exportAs: 'luzmoItemOptionColorPicker',
+                standalone: true,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content />'
+            }]
+    }], () => [], { swatches: [{
+            type: Input,
+            args: [{ alias: 'swatches' }]
+        }], rounding: [{
+            type: Input,
+            args: [{ alias: 'rounding' }]
+        }], shape: [{
+            type: Input,
+            args: [{ alias: 'shape' }]
+        }], debounce: [{
+            type: Input,
+            args: [{ alias: 'debounce' }]
+        }], 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"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoItemOptionColorPicker, { className: "LuzmoItemOptionColorPicker", filePath: "components/item-option-color-picker.ts", lineNumber: 17 }); })();

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

@@ -0,0 +1,66 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import '@luzmo/analytics-components-kit/item-option-color-range';
+import type { LuzmoItemOptionColorRange as LuzmoItemOptionColorRangeHostElement, ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-color-range';
+import * as i0 from "@angular/core";
+export type { ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-color-range';
+export declare class LuzmoItemOptionColorRange implements OnChanges {
+    private readonly elementRef;
+    private readonly renderer;
+    private readonly destroyRef;
+    private readonly host;
+    private readonly listenerCleanup;
+    /** The underlying custom element instance. Use to call imperative methods. */
+    get nativeElement(): LuzmoItemOptionColorRangeHostElement;
+    /** The color range */
+    value?: unknown;
+    /** The default color range */
+    default?: unknown;
+    /** Whether the color-range is disabled */
+    disabled?: boolean;
+    /** Range with percentage values */
+    percentage?: boolean;
+    /** Range colors can have alpha values */
+    noAlphaChannel?: boolean;
+    /** The number of values in the range can be changed */
+    editRangeSize?: boolean;
+    /** The values in the range can be changed by the user in the input field */
+    noValues?: boolean;
+    /** The minimum range size */
+    minimumRangeSize?: number;
+    /** Whether there is a first range value that sets color from negative infinity to the next range value. That first range value has a color, but the value is disregarded */
+    negativeInfinityValue?: boolean;
+    /** The color pickers can be read-only */
+    readOnlyColorPicker?: boolean;
+    /** Whether the colors are reversed */
+    reverse?: boolean;
+    /** The debounce time in milliseconds */
+    debounce?: number;
+    /** The function to parse the value */
+    parseValue?: unknown;
+    /** The function to convert the value */
+    toValue?: unknown;
+    /** Emitted when the option value changes. */
+    readonly luzmoOptionChanged: import("@angular/core").OutputEmitterRef<CustomEvent<ItemOptionChangedEventDetail>>;
+    constructor();
+    ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * Forward a wrapper @Input to the underlying host element via Renderer2 so
+     * the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
+     * Unlike a "skip undefined" guard, this lets consumers reset values back to
+     * undefined / null by clearing their bindings.
+     */
+    private setHostProperty;
+    private bindEvents;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoItemOptionColorRange, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoItemOptionColorRange, "luzmo-item-option-color-range", ["luzmoItemOptionColorRange"], { "value": { "alias": "value"; "required": false; }; "default": { "alias": "default"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "percentage": { "alias": "percentage"; "required": false; }; "noAlphaChannel": { "alias": "noAlphaChannel"; "required": false; }; "editRangeSize": { "alias": "editRangeSize"; "required": false; }; "noValues": { "alias": "noValues"; "required": false; }; "minimumRangeSize": { "alias": "minimumRangeSize"; "required": false; }; "negativeInfinityValue": { "alias": "negativeInfinityValue"; "required": false; }; "readOnlyColorPicker": { "alias": "readOnlyColorPicker"; "required": false; }; "reverse": { "alias": "reverse"; "required": false; }; "debounce": { "alias": "debounce"; "required": false; }; "parseValue": { "alias": "parseValue"; "required": false; }; "toValue": { "alias": "toValue"; "required": false; }; }, { "luzmoOptionChanged": "luzmoOptionChanged"; }, never, ["*"], true, never>;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_percentage: unknown;
+    static ngAcceptInputType_noAlphaChannel: unknown;
+    static ngAcceptInputType_editRangeSize: unknown;
+    static ngAcceptInputType_noValues: unknown;
+    static ngAcceptInputType_negativeInfinityValue: unknown;
+    static ngAcceptInputType_readOnlyColorPicker: unknown;
+    static ngAcceptInputType_reverse: unknown;
+}
+/** The underlying custom element type for LuzmoItemOptionColorRange */
+export type LuzmoItemOptionColorRangeElement = LuzmoItemOptionColorRangeHostElement;

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

@@ -0,0 +1,179 @@
+import { booleanAttribute, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, output, Renderer2 } from '@angular/core';
+import '@luzmo/analytics-components-kit/item-option-color-range';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+/**
+ * Angular wrapper component for <luzmo-item-option-color-range>
+ */
+export class LuzmoItemOptionColorRange {
+    elementRef = inject(ElementRef);
+    renderer = inject(Renderer2);
+    destroyRef = inject(DestroyRef);
+    host = this.elementRef.nativeElement;
+    listenerCleanup = [];
+    /** The underlying custom element instance. Use to call imperative methods. */
+    get nativeElement() {
+        return this.host;
+    }
+    /** The color range */
+    value;
+    /** The default color range */
+    default;
+    /** Whether the color-range is disabled */
+    disabled;
+    /** Range with percentage values */
+    percentage;
+    /** Range colors can have alpha values */
+    noAlphaChannel;
+    /** The number of values in the range can be changed */
+    editRangeSize;
+    /** The values in the range can be changed by the user in the input field */
+    noValues;
+    /** The minimum range size */
+    minimumRangeSize;
+    /** Whether there is a first range value that sets color from negative infinity to the next range value. That first range value has a color, but the value is disregarded */
+    negativeInfinityValue;
+    /** The color pickers can be read-only */
+    readOnlyColorPicker;
+    /** Whether the colors are reversed */
+    reverse;
+    /** The debounce time in milliseconds */
+    debounce;
+    /** The function to parse the value */
+    parseValue;
+    /** The function to convert the value */
+    toValue;
+    /** Emitted when the option value changes. */
+    luzmoOptionChanged = output({ alias: 'luzmoOptionChanged' });
+    constructor() {
+        this.bindEvents();
+        this.destroyRef.onDestroy(() => {
+            for (const cleanup of this.listenerCleanup) {
+                cleanup();
+            }
+        });
+    }
+    ngOnChanges(changes) {
+        for (const key of Object.keys(changes)) {
+            switch (key) {
+                case 'value':
+                    this.setHostProperty('value', changes['value'].currentValue);
+                    break;
+                case 'default':
+                    this.setHostProperty('default', changes['default'].currentValue);
+                    break;
+                case 'disabled':
+                    this.setHostProperty('disabled', changes['disabled'].currentValue);
+                    break;
+                case 'percentage':
+                    this.setHostProperty('percentage', changes['percentage'].currentValue);
+                    break;
+                case 'noAlphaChannel':
+                    this.setHostProperty('noAlphaChannel', changes['noAlphaChannel'].currentValue);
+                    break;
+                case 'editRangeSize':
+                    this.setHostProperty('editRangeSize', changes['editRangeSize'].currentValue);
+                    break;
+                case 'noValues':
+                    this.setHostProperty('noValues', changes['noValues'].currentValue);
+                    break;
+                case 'minimumRangeSize':
+                    this.setHostProperty('minimumRangeSize', changes['minimumRangeSize'].currentValue);
+                    break;
+                case 'negativeInfinityValue':
+                    this.setHostProperty('negativeInfinityValue', changes['negativeInfinityValue'].currentValue);
+                    break;
+                case 'readOnlyColorPicker':
+                    this.setHostProperty('readOnlyColorPicker', changes['readOnlyColorPicker'].currentValue);
+                    break;
+                case 'reverse':
+                    this.setHostProperty('reverse', changes['reverse'].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;
+                default:
+                    break;
+            }
+        }
+    }
+    /**
+     * Forward a wrapper @Input to the underlying host element via Renderer2 so
+     * the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
+     * Unlike a "skip undefined" guard, this lets consumers reset values back to
+     * undefined / null by clearing their bindings.
+     */
+    setHostProperty(key, value) {
+        this.renderer.setProperty(this.host, key, value);
+    }
+    bindEvents() {
+        this.listenerCleanup.push(this.renderer.listen(this.host, 'luzmo-option-changed', (event) => {
+            const typed = event;
+            this.luzmoOptionChanged.emit(typed);
+        }));
+    }
+    static ɵfac = function LuzmoItemOptionColorRange_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoItemOptionColorRange)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoItemOptionColorRange, selectors: [["luzmo-item-option-color-range"]], inputs: { value: "value", default: "default", disabled: [2, "disabled", "disabled", booleanAttribute], percentage: [2, "percentage", "percentage", booleanAttribute], noAlphaChannel: [2, "noAlphaChannel", "noAlphaChannel", booleanAttribute], editRangeSize: [2, "editRangeSize", "editRangeSize", booleanAttribute], noValues: [2, "noValues", "noValues", booleanAttribute], minimumRangeSize: "minimumRangeSize", negativeInfinityValue: [2, "negativeInfinityValue", "negativeInfinityValue", booleanAttribute], readOnlyColorPicker: [2, "readOnlyColorPicker", "readOnlyColorPicker", booleanAttribute], reverse: [2, "reverse", "reverse", booleanAttribute], debounce: "debounce", parseValue: "parseValue", toValue: "toValue" }, outputs: { luzmoOptionChanged: "luzmoOptionChanged" }, exportAs: ["luzmoItemOptionColorRange"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoItemOptionColorRange_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0);
+        } }, encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoItemOptionColorRange, [{
+        type: Component,
+        args: [{
+                selector: 'luzmo-item-option-color-range',
+                exportAs: 'luzmoItemOptionColorRange',
+                standalone: true,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content />'
+            }]
+    }], () => [], { value: [{
+            type: Input,
+            args: [{ alias: 'value' }]
+        }], default: [{
+            type: Input,
+            args: [{ alias: 'default' }]
+        }], disabled: [{
+            type: Input,
+            args: [{ alias: 'disabled', transform: booleanAttribute }]
+        }], percentage: [{
+            type: Input,
+            args: [{ alias: 'percentage', transform: booleanAttribute }]
+        }], noAlphaChannel: [{
+            type: Input,
+            args: [{ alias: 'noAlphaChannel', transform: booleanAttribute }]
+        }], editRangeSize: [{
+            type: Input,
+            args: [{ alias: 'editRangeSize', transform: booleanAttribute }]
+        }], noValues: [{
+            type: Input,
+            args: [{ alias: 'noValues', transform: booleanAttribute }]
+        }], minimumRangeSize: [{
+            type: Input,
+            args: [{ alias: 'minimumRangeSize' }]
+        }], negativeInfinityValue: [{
+            type: Input,
+            args: [{ alias: 'negativeInfinityValue', transform: booleanAttribute }]
+        }], readOnlyColorPicker: [{
+            type: Input,
+            args: [{ alias: 'readOnlyColorPicker', transform: booleanAttribute }]
+        }], reverse: [{
+            type: Input,
+            args: [{ alias: 'reverse', transform: booleanAttribute }]
+        }], debounce: [{
+            type: Input,
+            args: [{ alias: 'debounce' }]
+        }], parseValue: [{
+            type: Input,
+            args: [{ alias: 'parseValue' }]
+        }], toValue: [{
+            type: Input,
+            args: [{ alias: 'toValue' }]
+        }], luzmoOptionChanged: [{ type: i0.Output, args: ["luzmoOptionChanged"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoItemOptionColorRange, { className: "LuzmoItemOptionColorRange", filePath: "components/item-option-color-range.ts", lineNumber: 16 }); })();

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

@@ -0,0 +1,34 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import '@luzmo/analytics-components-kit/item-option-guidelines';
+import type { LuzmoItemOptionGuidelines as LuzmoItemOptionGuidelinesHostElement, ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-guidelines';
+import * as i0 from "@angular/core";
+export type { GuidelineLine, GuidelineLineType, GuidelineStyle, GuidelineStyleType, GuidelineWidth, Guidelines, ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-guidelines';
+export declare class LuzmoItemOptionGuidelines implements OnChanges {
+    private readonly elementRef;
+    private readonly renderer;
+    private readonly destroyRef;
+    private readonly host;
+    private readonly listenerCleanup;
+    /** The underlying custom element instance. Use to call imperative methods. */
+    get nativeElement(): LuzmoItemOptionGuidelinesHostElement;
+    /** Default color used when adding a guideline. */
+    defaultColor?: string;
+    /** Delay in milliseconds before color and number changes are emitted. */
+    debounce?: number;
+    /** Emitted when the guidelines value changes. */
+    readonly luzmoOptionChanged: import("@angular/core").OutputEmitterRef<CustomEvent<ItemOptionChangedEventDetail>>;
+    constructor();
+    ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * Forward a wrapper @Input to the underlying host element via Renderer2 so
+     * the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
+     * Unlike a "skip undefined" guard, this lets consumers reset values back to
+     * undefined / null by clearing their bindings.
+     */
+    private setHostProperty;
+    private bindEvents;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoItemOptionGuidelines, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoItemOptionGuidelines, "luzmo-item-option-guidelines", ["luzmoItemOptionGuidelines"], { "defaultColor": { "alias": "defaultColor"; "required": false; }; "debounce": { "alias": "debounce"; "required": false; }; }, { "luzmoOptionChanged": "luzmoOptionChanged"; }, never, ["*"], true, never>;
+}
+/** The underlying custom element type for LuzmoItemOptionGuidelines */
+export type LuzmoItemOptionGuidelinesElement = LuzmoItemOptionGuidelinesHostElement;