@luzmo/ngx-lucero 1.0.1-alpha.78

package/esm/components/color-menu.js

@@ -0,0 +1,97 @@
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, output, Renderer2 } from '@angular/core';
+import '@luzmo/lucero/color-menu';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+/**
+ * Angular wrapper component for <luzmo-color-menu>
+ */
+export class LuzmoColorMenu {
+    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 value of the Color Menu */
+    color;
+    /** Whether the alpha channel is available */
+    noAlphaChannel;
+    /** The swatches available in the color menu */
+    swatches;
+    areaElement;
+    /** An alteration to the value of the Color Menu has been committed by the user. */
+    changeEvent = output({ alias: 'change' });
+    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 'color':
+                    this.setHostProperty('color', changes['color'].currentValue);
+                    break;
+                case 'noAlphaChannel':
+                    this.setHostProperty('noAlphaChannel', changes['noAlphaChannel'].currentValue);
+                    break;
+                case 'swatches':
+                    this.setHostProperty('swatches', changes['swatches'].currentValue);
+                    break;
+                case 'areaElement':
+                    this.setHostProperty('areaElement', changes['areaElement'].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, 'change', (event) => {
+            this.changeEvent.emit(event);
+        }));
+    }
+    static ɵfac = function LuzmoColorMenu_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoColorMenu)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoColorMenu, selectors: [["luzmo-color-menu"]], inputs: { color: "color", noAlphaChannel: [0, "no-alpha-channel", "noAlphaChannel"], swatches: "swatches", areaElement: [0, "area-element", "areaElement"] }, outputs: { changeEvent: "change" }, exportAs: ["luzmoColorMenu"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoColorMenu_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0);
+        } }, encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoColorMenu, [{
+        type: Component,
+        args: [{
+                selector: 'luzmo-color-menu',
+                exportAs: 'luzmoColorMenu',
+                standalone: true,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content />'
+            }]
+    }], () => [], { color: [{
+            type: Input,
+            args: [{ alias: 'color' }]
+        }], noAlphaChannel: [{
+            type: Input,
+            args: [{ alias: 'no-alpha-channel' }]
+        }], swatches: [{
+            type: Input,
+            args: [{ alias: 'swatches' }]
+        }], areaElement: [{
+            type: Input,
+            args: [{ alias: 'area-element' }]
+        }], changeEvent: [{ type: i0.Output, args: ["change"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoColorMenu, { className: "LuzmoColorMenu", filePath: "components/color-menu.ts", lineNumber: 15 }); })();

package/esm/components/color-palette-group.d.ts

@@ -0,0 +1,40 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import '@luzmo/lucero/color-palette-group';
+import type { LuzmoColorPaletteGroup as LuzmoColorPaletteGroupHostElement } from '@luzmo/lucero/color-palette-group';
+import * as i0 from "@angular/core";
+export declare class LuzmoColorPaletteGroup 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(): LuzmoColorPaletteGroupHostElement;
+    /** Set the color palette group to a disabled state */
+    disabled?: boolean;
+    /** Set the color palette group to a horizontal state */
+    horizontal?: boolean;
+    rovingTabindexController?: unknown;
+    /** The aria-label of the color palette group */
+    label?: string;
+    /** The selected color palette value */
+    selected?: string;
+    slotElement?: unknown;
+    /** Announces the color palette value has been changed by user */
+    readonly changeEvent: import("@angular/core").OutputEmitterRef<Event>;
+    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;
+    focus(options?: FocusOptions): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoColorPaletteGroup, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoColorPaletteGroup, "luzmo-color-palette-group", ["luzmoColorPaletteGroup"], { "disabled": { "alias": "disabled"; "required": false; }; "horizontal": { "alias": "horizontal"; "required": false; }; "rovingTabindexController": { "alias": "roving-tabindex-controller"; "required": false; }; "label": { "alias": "label"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "slotElement": { "alias": "slot-element"; "required": false; }; }, { "changeEvent": "change"; }, never, ["*"], true, never>;
+}
+/** The underlying custom element type for LuzmoColorPaletteGroup */
+export type LuzmoColorPaletteGroupElement = LuzmoColorPaletteGroupHostElement;

package/esm/components/color-palette-group.js

@@ -0,0 +1,117 @@
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, output, Renderer2 } from '@angular/core';
+import '@luzmo/lucero/color-palette-group';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+/**
+ * Angular wrapper component for <luzmo-color-palette-group>
+ *
+ * @slot (default) - the luzmo-color-palette elements that make up the group
+ */
+export class LuzmoColorPaletteGroup {
+    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;
+    }
+    /** Set the color palette group to a disabled state */
+    disabled;
+    /** Set the color palette group to a horizontal state */
+    horizontal;
+    rovingTabindexController;
+    /** The aria-label of the color palette group */
+    label;
+    /** The selected color palette value */
+    selected;
+    slotElement;
+    /** Announces the color palette value has been changed by user */
+    changeEvent = output({ alias: 'change' });
+    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 'disabled':
+                    this.setHostProperty('disabled', changes['disabled'].currentValue);
+                    break;
+                case 'horizontal':
+                    this.setHostProperty('horizontal', changes['horizontal'].currentValue);
+                    break;
+                case 'rovingTabindexController':
+                    this.setHostProperty('rovingTabindexController', changes['rovingTabindexController'].currentValue);
+                    break;
+                case 'label':
+                    this.setHostProperty('label', changes['label'].currentValue);
+                    break;
+                case 'selected':
+                    this.setHostProperty('selected', changes['selected'].currentValue);
+                    break;
+                case 'slotElement':
+                    this.setHostProperty('slotElement', changes['slotElement'].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, 'change', (event) => {
+            this.changeEvent.emit(event);
+        }));
+    }
+    focus(options) {
+        return this.host.focus(options);
+    }
+    static ɵfac = function LuzmoColorPaletteGroup_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoColorPaletteGroup)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoColorPaletteGroup, selectors: [["luzmo-color-palette-group"]], inputs: { disabled: "disabled", horizontal: "horizontal", rovingTabindexController: [0, "roving-tabindex-controller", "rovingTabindexController"], label: "label", selected: "selected", slotElement: [0, "slot-element", "slotElement"] }, outputs: { changeEvent: "change" }, exportAs: ["luzmoColorPaletteGroup"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoColorPaletteGroup_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0);
+        } }, encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoColorPaletteGroup, [{
+        type: Component,
+        args: [{
+                selector: 'luzmo-color-palette-group',
+                exportAs: 'luzmoColorPaletteGroup',
+                standalone: true,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content />'
+            }]
+    }], () => [], { disabled: [{
+            type: Input,
+            args: [{ alias: 'disabled' }]
+        }], horizontal: [{
+            type: Input,
+            args: [{ alias: 'horizontal' }]
+        }], rovingTabindexController: [{
+            type: Input,
+            args: [{ alias: 'roving-tabindex-controller' }]
+        }], label: [{
+            type: Input,
+            args: [{ alias: 'label' }]
+        }], selected: [{
+            type: Input,
+            args: [{ alias: 'selected' }]
+        }], slotElement: [{
+            type: Input,
+            args: [{ alias: 'slot-element' }]
+        }], changeEvent: [{ type: i0.Output, args: ["change"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoColorPaletteGroup, { className: "LuzmoColorPaletteGroup", filePath: "components/color-palette-group.ts", lineNumber: 17 }); })();

package/esm/components/color-palette.d.ts

@@ -0,0 +1,43 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import '@luzmo/lucero/color-palette';
+import type { LuzmoColorPalette as LuzmoColorPaletteHostElement } from '@luzmo/lucero/color-palette';
+import * as i0 from "@angular/core";
+export declare class LuzmoColorPalette 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(): LuzmoColorPaletteHostElement;
+    /** Set the color palette to a disabled state */
+    disabled?: boolean;
+    /** Set the color palette to a focused state */
+    focused?: boolean;
+    /** Set the color palette to a selected state */
+    selected?: boolean;
+    /** Set the color palette to an active state */
+    active?: boolean;
+    /** Identifies this color palette within its color palette group */
+    value?: string;
+    /** Set the colors to be displayed in the color palette */
+    colors?: string[];
+    /** Set the color palette to a reverse state */
+    reverse?: boolean;
+    /** Set the color palette to a horizontal state */
+    horizontal?: boolean;
+    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<LuzmoColorPalette, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoColorPalette, "luzmo-color-palette", ["luzmoColorPalette"], { "disabled": { "alias": "disabled"; "required": false; }; "focused": { "alias": "focused"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "active": { "alias": "active"; "required": false; }; "value": { "alias": "value"; "required": false; }; "colors": { "alias": "colors"; "required": false; }; "reverse": { "alias": "reverse"; "required": false; }; "horizontal": { "alias": "horizontal"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+/** The underlying custom element type for LuzmoColorPalette */
+export type LuzmoColorPaletteElement = LuzmoColorPaletteHostElement;

package/esm/components/color-palette.js

@@ -0,0 +1,126 @@
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, Renderer2 } from '@angular/core';
+import '@luzmo/lucero/color-palette';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+/**
+ * Angular wrapper component for <luzmo-color-palette>
+ */
+export class LuzmoColorPalette {
+    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;
+    }
+    /** Set the color palette to a disabled state */
+    disabled;
+    /** Set the color palette to a focused state */
+    focused;
+    /** Set the color palette to a selected state */
+    selected;
+    /** Set the color palette to an active state */
+    active;
+    /** Identifies this color palette within its color palette group */
+    value;
+    /** Set the colors to be displayed in the color palette */
+    colors;
+    /** Set the color palette to a reverse state */
+    reverse;
+    /** Set the color palette to a horizontal state */
+    horizontal;
+    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 'disabled':
+                    this.setHostProperty('disabled', changes['disabled'].currentValue);
+                    break;
+                case 'focused':
+                    this.setHostProperty('focused', changes['focused'].currentValue);
+                    break;
+                case 'selected':
+                    this.setHostProperty('selected', changes['selected'].currentValue);
+                    break;
+                case 'active':
+                    this.setHostProperty('active', changes['active'].currentValue);
+                    break;
+                case 'value':
+                    this.setHostProperty('value', changes['value'].currentValue);
+                    break;
+                case 'colors':
+                    this.setHostProperty('colors', changes['colors'].currentValue);
+                    break;
+                case 'reverse':
+                    this.setHostProperty('reverse', changes['reverse'].currentValue);
+                    break;
+                case 'horizontal':
+                    this.setHostProperty('horizontal', changes['horizontal'].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() {
+        // No custom events for this wrapper.
+    }
+    static ɵfac = function LuzmoColorPalette_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoColorPalette)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoColorPalette, selectors: [["luzmo-color-palette"]], inputs: { disabled: "disabled", focused: "focused", selected: "selected", active: "active", value: "value", colors: "colors", reverse: "reverse", horizontal: "horizontal" }, exportAs: ["luzmoColorPalette"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoColorPalette_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0);
+        } }, encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoColorPalette, [{
+        type: Component,
+        args: [{
+                selector: 'luzmo-color-palette',
+                exportAs: 'luzmoColorPalette',
+                standalone: true,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content />'
+            }]
+    }], () => [], { disabled: [{
+            type: Input,
+            args: [{ alias: 'disabled' }]
+        }], focused: [{
+            type: Input,
+            args: [{ alias: 'focused' }]
+        }], selected: [{
+            type: Input,
+            args: [{ alias: 'selected' }]
+        }], active: [{
+            type: Input,
+            args: [{ alias: 'active' }]
+        }], value: [{
+            type: Input,
+            args: [{ alias: 'value' }]
+        }], colors: [{
+            type: Input,
+            args: [{ alias: 'colors' }]
+        }], reverse: [{
+            type: Input,
+            args: [{ alias: 'reverse' }]
+        }], horizontal: [{
+            type: Input,
+            args: [{ alias: 'horizontal' }]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoColorPalette, { className: "LuzmoColorPalette", filePath: "components/color-palette.ts", lineNumber: 15 }); })();

package/esm/components/color-picker.d.ts

@@ -0,0 +1,49 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import '@luzmo/lucero/color-picker';
+import type { LuzmoColorPicker as LuzmoColorPickerHostElement } from '@luzmo/lucero/color-picker';
+import * as i0 from "@angular/core";
+export declare class LuzmoColorPicker 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(): LuzmoColorPickerHostElement;
+    /** The color of the color picker. */
+    color?: unknown;
+    /** Whether the color picker is open. */
+    open?: boolean;
+    /** Whether the color picker is disabled. */
+    disabled?: boolean;
+    /** Whether the color picker is read only. */
+    readOnly?: boolean;
+    /** The placement of the color picker. */
+    placement?: unknown;
+    /** The rounding of the color picker. */
+    rounding?: unknown;
+    /** The shape of the color picker. */
+    shape?: unknown;
+    /** The swatches of the color picker. */
+    swatches?: string[];
+    /** Whether the color picker has an alpha channel. */
+    noAlphaChannel?: boolean;
+    /** An alteration to the value of the Color Picker has been committed by the user. */
+    readonly changeEvent: import("@angular/core").OutputEmitterRef<Event>;
+    /** The value of the Color Picker has changed. */
+    readonly inputEvent: import("@angular/core").OutputEmitterRef<CustomEvent<unknown>>;
+    constructor();
+    ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * Forward a wrapper @Input to the underlying host element via Renderer2 so
+     * the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
+     * Unlike a "skip undefined" guard, this lets consumers reset values back to
+     * undefined / null by clearing their bindings.
+     */
+    private setHostProperty;
+    private bindEvents;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoColorPicker, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoColorPicker, "luzmo-color-picker", ["luzmoColorPicker"], { "color": { "alias": "color"; "required": false; }; "open": { "alias": "open"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readOnly": { "alias": "read-only"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "rounding": { "alias": "rounding"; "required": false; }; "shape": { "alias": "shape"; "required": false; }; "swatches": { "alias": "swatches"; "required": false; }; "noAlphaChannel": { "alias": "no-alpha-channel"; "required": false; }; }, { "changeEvent": "change"; "inputEvent": "input"; }, never, ["*"], true, never>;
+}
+/** The underlying custom element type for LuzmoColorPicker */
+export type LuzmoColorPickerElement = LuzmoColorPickerHostElement;

package/esm/components/color-picker.js

@@ -0,0 +1,143 @@
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, output, Renderer2 } from '@angular/core';
+import '@luzmo/lucero/color-picker';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+/**
+ * Angular wrapper component for <luzmo-color-picker>
+ */
+export class LuzmoColorPicker {
+    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 of the color picker. */
+    color;
+    /** Whether the color picker is open. */
+    open;
+    /** Whether the color picker is disabled. */
+    disabled;
+    /** Whether the color picker is read only. */
+    readOnly;
+    /** The placement of the color picker. */
+    placement;
+    /** The rounding of the color picker. */
+    rounding;
+    /** The shape of the color picker. */
+    shape;
+    /** The swatches of the color picker. */
+    swatches;
+    /** Whether the color picker has an alpha channel. */
+    noAlphaChannel;
+    /** An alteration to the value of the Color Picker has been committed by the user. */
+    changeEvent = output({ alias: 'change' });
+    /** The value of the Color Picker has changed. */
+    inputEvent = output({ alias: 'input' });
+    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 'color':
+                    this.setHostProperty('color', changes['color'].currentValue);
+                    break;
+                case 'open':
+                    this.setHostProperty('open', changes['open'].currentValue);
+                    break;
+                case 'disabled':
+                    this.setHostProperty('disabled', changes['disabled'].currentValue);
+                    break;
+                case 'readOnly':
+                    this.setHostProperty('readOnly', changes['readOnly'].currentValue);
+                    break;
+                case 'placement':
+                    this.setHostProperty('placement', changes['placement'].currentValue);
+                    break;
+                case 'rounding':
+                    this.setHostProperty('rounding', changes['rounding'].currentValue);
+                    break;
+                case 'shape':
+                    this.setHostProperty('shape', changes['shape'].currentValue);
+                    break;
+                case 'swatches':
+                    this.setHostProperty('swatches', changes['swatches'].currentValue);
+                    break;
+                case 'noAlphaChannel':
+                    this.setHostProperty('noAlphaChannel', changes['noAlphaChannel'].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, 'change', (event) => {
+            this.changeEvent.emit(event);
+        }));
+        this.listenerCleanup.push(this.renderer.listen(this.host, 'input', (event) => {
+            this.inputEvent.emit(event);
+        }));
+    }
+    static ɵfac = function LuzmoColorPicker_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoColorPicker)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoColorPicker, selectors: [["luzmo-color-picker"]], inputs: { color: "color", open: "open", disabled: "disabled", readOnly: [0, "read-only", "readOnly"], placement: "placement", rounding: "rounding", shape: "shape", swatches: "swatches", noAlphaChannel: [0, "no-alpha-channel", "noAlphaChannel"] }, outputs: { changeEvent: "change", inputEvent: "input" }, exportAs: ["luzmoColorPicker"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoColorPicker_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0);
+        } }, encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoColorPicker, [{
+        type: Component,
+        args: [{
+                selector: 'luzmo-color-picker',
+                exportAs: 'luzmoColorPicker',
+                standalone: true,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content />'
+            }]
+    }], () => [], { color: [{
+            type: Input,
+            args: [{ alias: 'color' }]
+        }], open: [{
+            type: Input,
+            args: [{ alias: 'open' }]
+        }], disabled: [{
+            type: Input,
+            args: [{ alias: 'disabled' }]
+        }], readOnly: [{
+            type: Input,
+            args: [{ alias: 'read-only' }]
+        }], placement: [{
+            type: Input,
+            args: [{ alias: 'placement' }]
+        }], rounding: [{
+            type: Input,
+            args: [{ alias: 'rounding' }]
+        }], shape: [{
+            type: Input,
+            args: [{ alias: 'shape' }]
+        }], swatches: [{
+            type: Input,
+            args: [{ alias: 'swatches' }]
+        }], noAlphaChannel: [{
+            type: Input,
+            args: [{ alias: 'no-alpha-channel' }]
+        }], changeEvent: [{ type: i0.Output, args: ["change"] }], inputEvent: [{ type: i0.Output, args: ["input"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoColorPicker, { className: "LuzmoColorPicker", filePath: "components/color-picker.ts", lineNumber: 15 }); })();