@luzmo/ngx-lucero 2.0.1 → 2.2.0

package/esm/components/clear-button.d.ts

@@ -46,7 +46,7 @@ export declare class LuzmoClearButton implements OnChanges {
     private bindEvents;
     focus(options?: FocusOptions): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoClearButton, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoClearButton, "luzmo-clear-button", ["luzmoClearButton"], { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "download": { "alias": "download"; "required": false; }; "label": { "alias": "label"; "required": false; }; "href": { "alias": "href"; "required": false; }; "target": { "alias": "target"; "required": false; }; "referrerpolicy": { "alias": "referrerpolicy"; "required": false; }; "rel": { "alias": "rel"; "required": false; }; "active": { "alias": "active"; "required": false; }; "type": { "alias": "type"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "keydownEvent": "keydown"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoClearButton, "luzmo-clear-button", ["luzmoClearButton"], { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "download": { "alias": "download"; "required": false; }; "label": { "alias": "label"; "required": false; }; "href": { "alias": "href"; "required": false; }; "target": { "alias": "target"; "required": false; }; "referrerpolicy": { "alias": "referrerpolicy"; "required": false; }; "rel": { "alias": "rel"; "required": false; }; "active": { "alias": "active"; "required": false; }; "type": { "alias": "type"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "keydownEvent": "keydownEvent"; }, never, ["*"], true, never>;
 }
 /** The underlying custom element type for LuzmoClearButton */
 export type LuzmoClearButtonElement = LuzmoClearButtonHostElement;

package/esm/components/clear-button.js

@@ -41,7 +41,7 @@ export class LuzmoClearButton {
     /** The tab index to apply to this control. See general documentation about the tabindex HTML property */
     tabIndex;
     /** Trick :focus-visible polyfill into thinking keyboard based focus */
-    keydownEvent = output({ alias: 'keydown' });
+    keydownEvent = output();
     constructor() {
         this.bindEvents();
         this.destroyRef.onDestroy(() => {
@@ -112,7 +112,7 @@ export class LuzmoClearButton {
         return this.host.focus(options);
     }
     static ɵfac = function LuzmoClearButton_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoClearButton)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoClearButton, selectors: [["luzmo-clear-button"]], inputs: { variant: "variant", size: "size", download: "download", label: "label", href: "href", target: "target", referrerpolicy: "referrerpolicy", rel: "rel", active: "active", type: "type", disabled: "disabled", tabIndex: "tabIndex" }, outputs: { keydownEvent: "keydown" }, exportAs: ["luzmoClearButton"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoClearButton_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoClearButton, selectors: [["luzmo-clear-button"]], inputs: { variant: "variant", size: "size", download: "download", label: "label", href: "href", target: "target", referrerpolicy: "referrerpolicy", rel: "rel", active: "active", type: "type", disabled: "disabled", tabIndex: "tabIndex" }, outputs: { keydownEvent: "keydownEvent" }, exportAs: ["luzmoClearButton"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoClearButton_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
         } }, encapsulation: 2 });
@@ -162,5 +162,5 @@ export class LuzmoClearButton {
         }], tabIndex: [{
             type: Input,
             args: [{ alias: 'tabIndex' }]
-        }], keydownEvent: [{ type: i0.Output, args: ["keydown"] }] }); })();
+        }], keydownEvent: [{ type: i0.Output, args: ["keydownEvent"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoClearButton, { className: "LuzmoClearButton", filePath: "components/clear-button.ts", lineNumber: 18 }); })();

package/esm/components/close-button.d.ts

@@ -47,7 +47,7 @@ export declare class LuzmoCloseButton implements OnChanges {
     private bindEvents;
     focus(options?: FocusOptions): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoCloseButton, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoCloseButton, "luzmo-close-button", ["luzmoCloseButton"], { "variant": { "alias": "variant"; "required": false; }; "staticColor": { "alias": "staticColor"; "required": false; }; "size": { "alias": "size"; "required": false; }; "download": { "alias": "download"; "required": false; }; "label": { "alias": "label"; "required": false; }; "href": { "alias": "href"; "required": false; }; "target": { "alias": "target"; "required": false; }; "referrerpolicy": { "alias": "referrerpolicy"; "required": false; }; "rel": { "alias": "rel"; "required": false; }; "active": { "alias": "active"; "required": false; }; "type": { "alias": "type"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "keydownEvent": "keydown"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoCloseButton, "luzmo-close-button", ["luzmoCloseButton"], { "variant": { "alias": "variant"; "required": false; }; "staticColor": { "alias": "staticColor"; "required": false; }; "size": { "alias": "size"; "required": false; }; "download": { "alias": "download"; "required": false; }; "label": { "alias": "label"; "required": false; }; "href": { "alias": "href"; "required": false; }; "target": { "alias": "target"; "required": false; }; "referrerpolicy": { "alias": "referrerpolicy"; "required": false; }; "rel": { "alias": "rel"; "required": false; }; "active": { "alias": "active"; "required": false; }; "type": { "alias": "type"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "keydownEvent": "keydownEvent"; }, never, ["*"], true, never>;
 }
 /** The underlying custom element type for LuzmoCloseButton */
 export type LuzmoCloseButtonElement = LuzmoCloseButtonHostElement;

package/esm/components/close-button.js

@@ -42,7 +42,7 @@ export class LuzmoCloseButton {
     /** The tab index to apply to this control. See general documentation about the tabindex HTML property */
     tabIndex;
     /** Trick :focus-visible polyfill into thinking keyboard based focus */
-    keydownEvent = output({ alias: 'keydown' });
+    keydownEvent = output();
     constructor() {
         this.bindEvents();
         this.destroyRef.onDestroy(() => {
@@ -116,7 +116,7 @@ export class LuzmoCloseButton {
         return this.host.focus(options);
     }
     static ɵfac = function LuzmoCloseButton_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoCloseButton)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoCloseButton, selectors: [["luzmo-close-button"]], inputs: { variant: "variant", staticColor: "staticColor", size: "size", download: "download", label: "label", href: "href", target: "target", referrerpolicy: "referrerpolicy", rel: "rel", active: "active", type: "type", disabled: "disabled", tabIndex: "tabIndex" }, outputs: { keydownEvent: "keydown" }, exportAs: ["luzmoCloseButton"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoCloseButton_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoCloseButton, selectors: [["luzmo-close-button"]], inputs: { variant: "variant", staticColor: "staticColor", size: "size", download: "download", label: "label", href: "href", target: "target", referrerpolicy: "referrerpolicy", rel: "rel", active: "active", type: "type", disabled: "disabled", tabIndex: "tabIndex" }, outputs: { keydownEvent: "keydownEvent" }, exportAs: ["luzmoCloseButton"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoCloseButton_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
         } }, encapsulation: 2 });
@@ -169,5 +169,5 @@ export class LuzmoCloseButton {
         }], tabIndex: [{
             type: Input,
             args: [{ alias: 'tabIndex' }]
-        }], keydownEvent: [{ type: i0.Output, args: ["keydown"] }] }); })();
+        }], keydownEvent: [{ type: i0.Output, args: ["keydownEvent"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoCloseButton, { className: "LuzmoCloseButton", filePath: "components/close-button.ts", lineNumber: 18 }); })();

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

@@ -37,7 +37,7 @@ export declare class LuzmoColorArea implements OnChanges {
     private bindEvents;
     focus(focusOptions: FocusOptions): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoColorArea, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoColorArea, "luzmo-color-area", ["luzmoColorArea"], { "disabled": { "alias": "disabled"; "required": false; }; "focused": { "alias": "focused"; "required": false; }; "labelX": { "alias": "labelX"; "required": false; }; "labelY": { "alias": "labelY"; "required": false; }; "hue": { "alias": "hue"; "required": false; }; "color": { "alias": "color"; "required": false; }; "x": { "alias": "x"; "required": false; }; "y": { "alias": "y"; "required": false; }; "step": { "alias": "step"; "required": false; }; "inputX": { "alias": "inputX"; "required": false; }; "inputY": { "alias": "inputY"; "required": false; }; }, { "inputEvent": "input"; "changeEvent": "change"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoColorArea, "luzmo-color-area", ["luzmoColorArea"], { "disabled": { "alias": "disabled"; "required": false; }; "focused": { "alias": "focused"; "required": false; }; "labelX": { "alias": "labelX"; "required": false; }; "labelY": { "alias": "labelY"; "required": false; }; "hue": { "alias": "hue"; "required": false; }; "color": { "alias": "color"; "required": false; }; "x": { "alias": "x"; "required": false; }; "y": { "alias": "y"; "required": false; }; "step": { "alias": "step"; "required": false; }; "inputX": { "alias": "inputX"; "required": false; }; "inputY": { "alias": "inputY"; "required": false; }; }, { "inputEvent": "inputEvent"; "changeEvent": "changeEvent"; }, never, ["*"], true, never>;
 }
 /** The underlying custom element type for LuzmoColorArea */
 export type LuzmoColorAreaElement = LuzmoColorAreaHostElement;

package/esm/components/color-area.js

@@ -29,9 +29,9 @@ export class LuzmoColorArea {
     inputX;
     inputY;
     /** The value of the Color Area has changed. */
-    inputEvent = output({ alias: 'input' });
+    inputEvent = output();
     /** An alteration to the value of the Color Area has been committed by the user. */
-    changeEvent = output({ alias: 'change' });
+    changeEvent = output();
     constructor() {
         this.bindEvents();
         this.destroyRef.onDestroy(() => {
@@ -102,7 +102,7 @@ export class LuzmoColorArea {
         return this.host.focus(focusOptions);
     }
     static ɵfac = function LuzmoColorArea_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoColorArea)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoColorArea, selectors: [["luzmo-color-area"]], inputs: { disabled: "disabled", focused: "focused", labelX: "labelX", labelY: "labelY", hue: "hue", color: "color", x: "x", y: "y", step: "step", inputX: "inputX", inputY: "inputY" }, outputs: { inputEvent: "input", changeEvent: "change" }, exportAs: ["luzmoColorArea"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoColorArea_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoColorArea, selectors: [["luzmo-color-area"]], inputs: { disabled: "disabled", focused: "focused", labelX: "labelX", labelY: "labelY", hue: "hue", color: "color", x: "x", y: "y", step: "step", inputX: "inputX", inputY: "inputY" }, outputs: { inputEvent: "inputEvent", changeEvent: "changeEvent" }, exportAs: ["luzmoColorArea"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoColorArea_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
         } }, encapsulation: 2 });
@@ -149,5 +149,5 @@ export class LuzmoColorArea {
         }], inputY: [{
             type: Input,
             args: [{ alias: 'inputY' }]
-        }], inputEvent: [{ type: i0.Output, args: ["input"] }], changeEvent: [{ type: i0.Output, args: ["change"] }] }); })();
+        }], inputEvent: [{ type: i0.Output, args: ["inputEvent"] }], changeEvent: [{ type: i0.Output, args: ["changeEvent"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoColorArea, { className: "LuzmoColorArea", filePath: "components/color-area.ts", lineNumber: 17 }); })();

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

@@ -93,7 +93,7 @@ export declare class LuzmoColorField implements OnChanges, ControlValueAccessor
     select(): void;
     focus(options?: FocusOptions): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoColorField, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoColorField, "luzmo-color-field", ["luzmoColorField"], { "viewColor": { "alias": "viewColor"; "required": false; }; "noAlphaChannel": { "alias": "noAlphaChannel"; "required": false; }; "value": { "alias": "value"; "required": false; }; "helpTextManager": { "alias": "helpTextManager"; "required": false; }; "size": { "alias": "size"; "required": false; }; "allowedKeys": { "alias": "allowedKeys"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "label": { "alias": "label"; "required": false; }; "name": { "alias": "name"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "type": { "alias": "type"; "required": false; }; "pattern": { "alias": "pattern"; "required": false; }; "grows": { "alias": "grows"; "required": false; }; "maxlength": { "alias": "maxlength"; "required": false; }; "minlength": { "alias": "minlength"; "required": false; }; "multiline": { "alias": "multiline"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "maxRows": { "alias": "maxRows"; "required": false; }; "valid": { "alias": "valid"; "required": false; }; "hideValidationIcons": { "alias": "hideValidationIcons"; "required": false; }; "quiet": { "alias": "quiet"; "required": false; }; "required": { "alias": "required"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "inputEvent": "input"; "changeEvent": "change"; "keypressEvent": "keypress"; "keydownEvent": "keydown"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoColorField, "luzmo-color-field", ["luzmoColorField"], { "viewColor": { "alias": "viewColor"; "required": false; }; "noAlphaChannel": { "alias": "noAlphaChannel"; "required": false; }; "value": { "alias": "value"; "required": false; }; "helpTextManager": { "alias": "helpTextManager"; "required": false; }; "size": { "alias": "size"; "required": false; }; "allowedKeys": { "alias": "allowedKeys"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "label": { "alias": "label"; "required": false; }; "name": { "alias": "name"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "type": { "alias": "type"; "required": false; }; "pattern": { "alias": "pattern"; "required": false; }; "grows": { "alias": "grows"; "required": false; }; "maxlength": { "alias": "maxlength"; "required": false; }; "minlength": { "alias": "minlength"; "required": false; }; "multiline": { "alias": "multiline"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "maxRows": { "alias": "maxRows"; "required": false; }; "valid": { "alias": "valid"; "required": false; }; "hideValidationIcons": { "alias": "hideValidationIcons"; "required": false; }; "quiet": { "alias": "quiet"; "required": false; }; "required": { "alias": "required"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "inputEvent": "inputEvent"; "changeEvent": "changeEvent"; "keypressEvent": "keypressEvent"; "keydownEvent": "keydownEvent"; }, never, ["*"], true, never>;
 }
 /** The underlying custom element type for LuzmoColorField */
 export type LuzmoColorFieldElement = LuzmoColorFieldHostElement;

package/esm/components/color-field.js

@@ -66,13 +66,13 @@ export class LuzmoColorField {
     /** The tab index to apply to this control. See general documentation about the tabindex HTML property */
     tabIndex;
     /** The value of the color-field has changed. */
-    inputEvent = output({ alias: 'input' });
+    inputEvent = output();
     /** An alteration to the value of the color-field has been committed by the user. */
-    changeEvent = output({ alias: 'change' });
+    changeEvent = output();
     /** A key has been pressed. */
-    keypressEvent = output({ alias: 'keypress' });
+    keypressEvent = output();
     /** Trick :focus-visible polyfill into thinking keyboard based focus */
-    keydownEvent = output({ alias: 'keydown' });
+    keydownEvent = output();
     constructor() {
         this.bindEvents();
         this.destroyRef.onDestroy(() => {
@@ -178,7 +178,6 @@ export class LuzmoColorField {
     }
     bindEvents() {
         this.listenerCleanup.push(this.renderer.listen(this.host, 'input', (event) => {
-            this.inputEvent.emit(event);
             if (!this.isWritingValue) {
                 const eventWithDetail = event;
                 const eventTarget = event.target;
@@ -190,13 +189,13 @@ export class LuzmoColorField {
                     : (detailRecord === undefined ? detail : undefined)
                         ?? eventTarget?.['value']
                         ?? hostRecord['value']);
-                if (Object.is(this.lastCvaValue, nextValue)) {
-                    return;
+                if (!Object.is(this.lastCvaValue, nextValue)) {
+                    this.lastCvaValue = nextValue;
+                    this.setHostProperty('value', nextValue);
+                    this.onChange(nextValue);
                 }
-                this.lastCvaValue = nextValue;
-                this.setHostProperty('value', nextValue);
-                this.onChange(nextValue);
             }
+            this.inputEvent.emit(event);
         }));
         this.listenerCleanup.push(this.renderer.listen(this.host, 'change', (event) => {
             this.changeEvent.emit(event);
@@ -251,7 +250,7 @@ export class LuzmoColorField {
         return this.host.focus(options);
     }
     static ɵfac = function LuzmoColorField_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoColorField)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoColorField, selectors: [["luzmo-color-field"]], inputs: { viewColor: "viewColor", noAlphaChannel: "noAlphaChannel", value: "value", helpTextManager: "helpTextManager", size: "size", allowedKeys: "allowedKeys", invalid: "invalid", label: "label", name: "name", placeholder: "placeholder", type: "type", pattern: "pattern", grows: "grows", maxlength: "maxlength", minlength: "minlength", multiline: "multiline", readonly: "readonly", rows: "rows", maxRows: "maxRows", valid: "valid", hideValidationIcons: "hideValidationIcons", quiet: "quiet", required: "required", autocomplete: "autocomplete", disabled: "disabled", tabIndex: "tabIndex" }, outputs: { inputEvent: "input", changeEvent: "change", keypressEvent: "keypress", keydownEvent: "keydown" }, exportAs: ["luzmoColorField"], features: [i0.ɵɵProvidersFeature([
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoColorField, selectors: [["luzmo-color-field"]], inputs: { viewColor: "viewColor", noAlphaChannel: "noAlphaChannel", value: "value", helpTextManager: "helpTextManager", size: "size", allowedKeys: "allowedKeys", invalid: "invalid", label: "label", name: "name", placeholder: "placeholder", type: "type", pattern: "pattern", grows: "grows", maxlength: "maxlength", minlength: "minlength", multiline: "multiline", readonly: "readonly", rows: "rows", maxRows: "maxRows", valid: "valid", hideValidationIcons: "hideValidationIcons", quiet: "quiet", required: "required", autocomplete: "autocomplete", disabled: "disabled", tabIndex: "tabIndex" }, outputs: { inputEvent: "inputEvent", changeEvent: "changeEvent", keypressEvent: "keypressEvent", keydownEvent: "keydownEvent" }, exportAs: ["luzmoColorField"], features: [i0.ɵɵProvidersFeature([
                 {
                     provide: NG_VALUE_ACCESSOR,
                     useExisting: forwardRef(() => LuzmoColorField),
@@ -356,5 +355,5 @@ export class LuzmoColorField {
         }], tabIndex: [{
             type: Input,
             args: [{ alias: 'tabIndex' }]
-        }], inputEvent: [{ type: i0.Output, args: ["input"] }], changeEvent: [{ type: i0.Output, args: ["change"] }], keypressEvent: [{ type: i0.Output, args: ["keypress"] }], keydownEvent: [{ type: i0.Output, args: ["keydown"] }] }); })();
+        }], inputEvent: [{ type: i0.Output, args: ["inputEvent"] }], changeEvent: [{ type: i0.Output, args: ["changeEvent"] }], keypressEvent: [{ type: i0.Output, args: ["keypressEvent"] }], keydownEvent: [{ type: i0.Output, args: ["keydownEvent"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoColorField, { className: "LuzmoColorField", filePath: "components/color-field.ts", lineNumber: 23 }); })();

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

@@ -38,7 +38,7 @@ export declare class LuzmoColorMenu implements OnChanges {
     private bindEvents;
     focus(options?: FocusOptions): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoColorMenu, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoColorMenu, "luzmo-color-menu", ["luzmoColorMenu"], { "color": { "alias": "color"; "required": false; }; "noAlphaChannel": { "alias": "noAlphaChannel"; "required": false; }; "swatches": { "alias": "swatches"; "required": false; }; "areaElement": { "alias": "areaElement"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "changeEvent": "change"; "keydownEvent": "keydown"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoColorMenu, "luzmo-color-menu", ["luzmoColorMenu"], { "color": { "alias": "color"; "required": false; }; "noAlphaChannel": { "alias": "noAlphaChannel"; "required": false; }; "swatches": { "alias": "swatches"; "required": false; }; "areaElement": { "alias": "areaElement"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "changeEvent": "changeEvent"; "keydownEvent": "keydownEvent"; }, never, ["*"], true, never>;
 }
 /** The underlying custom element type for LuzmoColorMenu */
 export type LuzmoColorMenuElement = LuzmoColorMenuHostElement;

package/esm/components/color-menu.js

@@ -28,9 +28,9 @@ export class LuzmoColorMenu {
     /** The tab index to apply to this control. See general documentation about the tabindex HTML property */
     tabIndex;
     /** An alteration to the value of the Color Menu has been committed by the user. */
-    changeEvent = output({ alias: 'change' });
+    changeEvent = output();
     /** Trick :focus-visible polyfill into thinking keyboard based focus */
-    keydownEvent = output({ alias: 'keydown' });
+    keydownEvent = output();
     constructor() {
         this.bindEvents();
         this.destroyRef.onDestroy(() => {
@@ -89,7 +89,7 @@ export class LuzmoColorMenu {
         return this.host.focus(options);
     }
     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: "noAlphaChannel", swatches: "swatches", areaElement: "areaElement", size: "size", disabled: "disabled", tabIndex: "tabIndex" }, outputs: { changeEvent: "change", keydownEvent: "keydown" }, exportAs: ["luzmoColorMenu"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoColorMenu_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoColorMenu, selectors: [["luzmo-color-menu"]], inputs: { color: "color", noAlphaChannel: "noAlphaChannel", swatches: "swatches", areaElement: "areaElement", size: "size", disabled: "disabled", tabIndex: "tabIndex" }, outputs: { changeEvent: "changeEvent", keydownEvent: "keydownEvent" }, 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 });
@@ -124,5 +124,5 @@ export class LuzmoColorMenu {
         }], tabIndex: [{
             type: Input,
             args: [{ alias: 'tabIndex' }]
-        }], changeEvent: [{ type: i0.Output, args: ["change"] }], keydownEvent: [{ type: i0.Output, args: ["keydown"] }] }); })();
+        }], changeEvent: [{ type: i0.Output, args: ["changeEvent"] }], keydownEvent: [{ type: i0.Output, args: ["keydownEvent"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoColorMenu, { className: "LuzmoColorMenu", filePath: "components/color-menu.ts", lineNumber: 15 }); })();

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

@@ -35,7 +35,7 @@ export declare class LuzmoColorPaletteGroup implements OnChanges {
     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": "rovingTabindexController"; "required": false; }; "label": { "alias": "label"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "slotElement": { "alias": "slotElement"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "changeEvent": "change"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoColorPaletteGroup, "luzmo-color-palette-group", ["luzmoColorPaletteGroup"], { "disabled": { "alias": "disabled"; "required": false; }; "horizontal": { "alias": "horizontal"; "required": false; }; "rovingTabindexController": { "alias": "rovingTabindexController"; "required": false; }; "label": { "alias": "label"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "slotElement": { "alias": "slotElement"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "changeEvent": "changeEvent"; }, never, ["*"], true, never>;
 }
 /** The underlying custom element type for LuzmoColorPaletteGroup */
 export type LuzmoColorPaletteGroupElement = LuzmoColorPaletteGroupHostElement;

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

@@ -29,7 +29,7 @@ export class LuzmoColorPaletteGroup {
     slotElement;
     size;
     /** Announces the color palette value has been changed by user */
-    changeEvent = output({ alias: 'change' });
+    changeEvent = output();
     constructor() {
         this.bindEvents();
         this.destroyRef.onDestroy(() => {
@@ -85,7 +85,7 @@ export class LuzmoColorPaletteGroup {
         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: "rovingTabindexController", label: "label", selected: "selected", slotElement: "slotElement", size: "size" }, outputs: { changeEvent: "change" }, exportAs: ["luzmoColorPaletteGroup"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoColorPaletteGroup_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoColorPaletteGroup, selectors: [["luzmo-color-palette-group"]], inputs: { disabled: "disabled", horizontal: "horizontal", rovingTabindexController: "rovingTabindexController", label: "label", selected: "selected", slotElement: "slotElement", size: "size" }, outputs: { changeEvent: "changeEvent" }, 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 });
@@ -120,5 +120,5 @@ export class LuzmoColorPaletteGroup {
         }], size: [{
             type: Input,
             args: [{ alias: 'size' }]
-        }], changeEvent: [{ type: i0.Output, args: ["change"] }] }); })();
+        }], changeEvent: [{ type: i0.Output, args: ["changeEvent"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoColorPaletteGroup, { className: "LuzmoColorPaletteGroup", filePath: "components/color-palette-group.ts", lineNumber: 17 }); })();

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

@@ -43,7 +43,7 @@ export declare class LuzmoColorPalette implements OnChanges {
     private bindEvents;
     focus(options?: FocusOptions): void;
     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; }; "size": { "alias": "size"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "keydownEvent": "keydown"; }, never, ["*"], true, 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; }; "size": { "alias": "size"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "keydownEvent": "keydownEvent"; }, never, ["*"], true, never>;
 }
 /** The underlying custom element type for LuzmoColorPalette */
 export type LuzmoColorPaletteElement = LuzmoColorPaletteHostElement;

package/esm/components/color-palette.js

@@ -35,7 +35,7 @@ export class LuzmoColorPalette {
     /** The tab index to apply to this control. See general documentation about the tabindex HTML property */
     tabIndex;
     /** Trick :focus-visible polyfill into thinking keyboard based focus */
-    keydownEvent = output({ alias: 'keydown' });
+    keydownEvent = output();
     constructor() {
         this.bindEvents();
         this.destroyRef.onDestroy(() => {
@@ -100,7 +100,7 @@ export class LuzmoColorPalette {
         return this.host.focus(options);
     }
     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", size: "size", tabIndex: "tabIndex" }, outputs: { keydownEvent: "keydown" }, exportAs: ["luzmoColorPalette"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoColorPalette_Template(rf, ctx) { if (rf & 1) {
+    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", size: "size", tabIndex: "tabIndex" }, outputs: { keydownEvent: "keydownEvent" }, 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 });
@@ -144,5 +144,5 @@ export class LuzmoColorPalette {
         }], tabIndex: [{
             type: Input,
             args: [{ alias: 'tabIndex' }]
-        }], keydownEvent: [{ type: i0.Output, args: ["keydown"] }] }); })();
+        }], keydownEvent: [{ type: i0.Output, args: ["keydownEvent"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoColorPalette, { className: "LuzmoColorPalette", filePath: "components/color-palette.ts", lineNumber: 15 }); })();

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

@@ -44,7 +44,7 @@ export declare class LuzmoColorPicker implements OnChanges {
     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": "readOnly"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "rounding": { "alias": "rounding"; "required": false; }; "shape": { "alias": "shape"; "required": false; }; "swatches": { "alias": "swatches"; "required": false; }; "noAlphaChannel": { "alias": "noAlphaChannel"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "changeEvent": "change"; "inputEvent": "input"; }, never, ["*"], true, 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": "readOnly"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "rounding": { "alias": "rounding"; "required": false; }; "shape": { "alias": "shape"; "required": false; }; "swatches": { "alias": "swatches"; "required": false; }; "noAlphaChannel": { "alias": "noAlphaChannel"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "changeEvent": "changeEvent"; "inputEvent": "inputEvent"; }, never, ["*"], true, never>;
 }
 /** The underlying custom element type for LuzmoColorPicker */
 export type LuzmoColorPickerElement = LuzmoColorPickerHostElement;

package/esm/components/color-picker.js

@@ -35,9 +35,9 @@ export class LuzmoColorPicker {
     noAlphaChannel;
     size;
     /** An alteration to the value of the Color Picker has been committed by the user. */
-    changeEvent = output({ alias: 'change' });
+    changeEvent = output();
     /** The value of the Color Picker has changed. */
-    inputEvent = output({ alias: 'input' });
+    inputEvent = output();
     constructor() {
         this.bindEvents();
         this.destroyRef.onDestroy(() => {
@@ -102,7 +102,7 @@ export class LuzmoColorPicker {
         }));
     }
     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: "readOnly", placement: "placement", rounding: "rounding", shape: "shape", swatches: "swatches", noAlphaChannel: "noAlphaChannel", size: "size" }, 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) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoColorPicker, selectors: [["luzmo-color-picker"]], inputs: { color: "color", open: "open", disabled: "disabled", readOnly: "readOnly", placement: "placement", rounding: "rounding", shape: "shape", swatches: "swatches", noAlphaChannel: "noAlphaChannel", size: "size" }, outputs: { changeEvent: "changeEvent", inputEvent: "inputEvent" }, 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 });
@@ -146,5 +146,5 @@ export class LuzmoColorPicker {
         }], size: [{
             type: Input,
             args: [{ alias: 'size' }]
-        }], changeEvent: [{ type: i0.Output, args: ["change"] }], inputEvent: [{ type: i0.Output, args: ["input"] }] }); })();
+        }], changeEvent: [{ type: i0.Output, args: ["changeEvent"] }], inputEvent: [{ type: i0.Output, args: ["inputEvent"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoColorPicker, { className: "LuzmoColorPicker", filePath: "components/color-picker.ts", lineNumber: 15 }); })();

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

@@ -50,7 +50,7 @@ export declare class LuzmoColorSlider implements OnChanges, ControlValueAccessor
     setDisabledState(isDisabled: boolean): void;
     focus(focusOptions: FocusOptions): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoColorSlider, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoColorSlider, "luzmo-color-slider", ["luzmoColorSlider"], { "mode": { "alias": "mode"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "focused": { "alias": "focused"; "required": false; }; "label": { "alias": "label"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; "value": { "alias": "value"; "required": false; }; "sliderHandlePosition": { "alias": "sliderHandlePosition"; "required": false; }; "color": { "alias": "color"; "required": false; }; "step": { "alias": "step"; "required": false; }; "input": { "alias": "input"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "inputEvent": "input"; "changeEvent": "change"; "keydownEvent": "keydown"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoColorSlider, "luzmo-color-slider", ["luzmoColorSlider"], { "mode": { "alias": "mode"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "focused": { "alias": "focused"; "required": false; }; "label": { "alias": "label"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; "value": { "alias": "value"; "required": false; }; "sliderHandlePosition": { "alias": "sliderHandlePosition"; "required": false; }; "color": { "alias": "color"; "required": false; }; "step": { "alias": "step"; "required": false; }; "input": { "alias": "input"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "inputEvent": "inputEvent"; "changeEvent": "changeEvent"; "keydownEvent": "keydownEvent"; }, never, ["*"], true, never>;
 }
 /** The underlying custom element type for LuzmoColorSlider */
 export type LuzmoColorSliderElement = LuzmoColorSliderHostElement;

package/esm/components/color-slider.js

@@ -30,11 +30,11 @@ export class LuzmoColorSlider {
     /** The tab index to apply to this control. See general documentation about the tabindex HTML property */
     tabIndex;
     /** The value of the Color Slider has changed. */
-    inputEvent = output({ alias: 'input' });
+    inputEvent = output();
     /** An alteration to the value of the Color Slider has been committed by the user. */
-    changeEvent = output({ alias: 'change' });
+    changeEvent = output();
     /** Trick :focus-visible polyfill into thinking keyboard based focus */
-    keydownEvent = output({ alias: 'keydown' });
+    keydownEvent = output();
     constructor() {
         this.bindEvents();
         this.destroyRef.onDestroy(() => {
@@ -95,7 +95,6 @@ export class LuzmoColorSlider {
     }
     bindEvents() {
         this.listenerCleanup.push(this.renderer.listen(this.host, 'input', (event) => {
-            this.inputEvent.emit(event);
             if (!this.isWritingValue) {
                 const eventWithDetail = event;
                 const eventTarget = event.target;
@@ -107,13 +106,13 @@ export class LuzmoColorSlider {
                     : (detailRecord === undefined ? detail : undefined)
                         ?? eventTarget?.['value']
                         ?? hostRecord['value']);
-                if (Object.is(this.lastCvaValue, nextValue)) {
-                    return;
+                if (!Object.is(this.lastCvaValue, nextValue)) {
+                    this.lastCvaValue = nextValue;
+                    this.setHostProperty('value', nextValue);
+                    this.onChange(nextValue);
                 }
-                this.lastCvaValue = nextValue;
-                this.setHostProperty('value', nextValue);
-                this.onChange(nextValue);
             }
+            this.inputEvent.emit(event);
         }));
         this.listenerCleanup.push(this.renderer.listen(this.host, 'change', (event) => {
             this.changeEvent.emit(event);
@@ -154,7 +153,7 @@ export class LuzmoColorSlider {
         return this.host.focus(focusOptions);
     }
     static ɵfac = function LuzmoColorSlider_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoColorSlider)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoColorSlider, selectors: [["luzmo-color-slider"]], inputs: { mode: "mode", disabled: "disabled", focused: "focused", label: "label", vertical: "vertical", value: "value", sliderHandlePosition: "sliderHandlePosition", color: "color", step: "step", input: "input", tabIndex: "tabIndex" }, outputs: { inputEvent: "input", changeEvent: "change", keydownEvent: "keydown" }, exportAs: ["luzmoColorSlider"], features: [i0.ɵɵProvidersFeature([
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoColorSlider, selectors: [["luzmo-color-slider"]], inputs: { mode: "mode", disabled: "disabled", focused: "focused", label: "label", vertical: "vertical", value: "value", sliderHandlePosition: "sliderHandlePosition", color: "color", step: "step", input: "input", tabIndex: "tabIndex" }, outputs: { inputEvent: "inputEvent", changeEvent: "changeEvent", keydownEvent: "keydownEvent" }, exportAs: ["luzmoColorSlider"], features: [i0.ɵɵProvidersFeature([
                 {
                     provide: NG_VALUE_ACCESSOR,
                     useExisting: forwardRef(() => LuzmoColorSlider),
@@ -214,5 +213,5 @@ export class LuzmoColorSlider {
         }], tabIndex: [{
             type: Input,
             args: [{ alias: 'tabIndex' }]
-        }], inputEvent: [{ type: i0.Output, args: ["input"] }], changeEvent: [{ type: i0.Output, args: ["change"] }], keydownEvent: [{ type: i0.Output, args: ["keydown"] }] }); })();
+        }], inputEvent: [{ type: i0.Output, args: ["inputEvent"] }], changeEvent: [{ type: i0.Output, args: ["changeEvent"] }], keydownEvent: [{ type: i0.Output, args: ["keydownEvent"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoColorSlider, { className: "LuzmoColorSlider", filePath: "components/color-slider.ts", lineNumber: 23 }); })();

package/esm/components/date-range-picker.d.ts

@@ -71,7 +71,7 @@ export declare class LuzmoDateRangePicker implements OnChanges {
     clear(): void;
     focus(options?: FocusOptions): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoDateRangePicker, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoDateRangePicker, "luzmo-date-range-picker", ["luzmoDateRangePicker"], { "startDate": { "alias": "startDate"; "required": false; }; "endDate": { "alias": "endDate"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "dateFormat": { "alias": "dateFormat"; "required": false; }; "dateSeparator": { "alias": "dateSeparator"; "required": false; }; "precision": { "alias": "precision"; "required": false; }; "calendars": { "alias": "calendars"; "required": false; }; "showDefinedRanges": { "alias": "showDefinedRanges"; "required": false; }; "definedRanges": { "alias": "definedRanges"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "quiet": { "alias": "quiet"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "timeZone": { "alias": "timeZone"; "required": false; }; "language": { "alias": "language"; "required": false; }; "labels": { "alias": "labels"; "required": false; }; "focused": { "alias": "focused"; "required": false; }; "helpTextManager": { "alias": "helpTextManager"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "changeEvent": "change"; "inputEvent": "input"; "keydownEvent": "keydown"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoDateRangePicker, "luzmo-date-range-picker", ["luzmoDateRangePicker"], { "startDate": { "alias": "startDate"; "required": false; }; "endDate": { "alias": "endDate"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "dateFormat": { "alias": "dateFormat"; "required": false; }; "dateSeparator": { "alias": "dateSeparator"; "required": false; }; "precision": { "alias": "precision"; "required": false; }; "calendars": { "alias": "calendars"; "required": false; }; "showDefinedRanges": { "alias": "showDefinedRanges"; "required": false; }; "definedRanges": { "alias": "definedRanges"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "quiet": { "alias": "quiet"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "timeZone": { "alias": "timeZone"; "required": false; }; "language": { "alias": "language"; "required": false; }; "labels": { "alias": "labels"; "required": false; }; "focused": { "alias": "focused"; "required": false; }; "helpTextManager": { "alias": "helpTextManager"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "changeEvent": "changeEvent"; "inputEvent": "inputEvent"; "keydownEvent": "keydownEvent"; }, never, ["*"], true, never>;
 }
 /** The underlying custom element type for LuzmoDateRangePicker */
 export type LuzmoDateRangePickerElement = LuzmoDateRangePickerHostElement;

package/esm/components/date-range-picker.js

@@ -61,11 +61,11 @@ export class LuzmoDateRangePicker {
     /** The tab index to apply to this control. See general documentation about the tabindex HTML property */
     tabIndex;
     /** Announces when a new date range is committed by the user */
-    changeEvent = output({ alias: 'change' });
+    changeEvent = output();
     /** Announces when the user's input changes the component's segments */
-    inputEvent = output({ alias: 'input' });
+    inputEvent = output();
     /** Trick :focus-visible polyfill into thinking keyboard based focus */
-    keydownEvent = output({ alias: 'keydown' });
+    keydownEvent = output();
     constructor() {
         this.bindEvents();
         this.destroyRef.onDestroy(() => {
@@ -175,7 +175,7 @@ export class LuzmoDateRangePicker {
         return this.host.focus(options);
     }
     static ɵfac = function LuzmoDateRangePicker_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoDateRangePicker)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoDateRangePicker, selectors: [["luzmo-date-range-picker"]], inputs: { startDate: "startDate", endDate: "endDate", min: "min", max: "max", dateFormat: "dateFormat", dateSeparator: "dateSeparator", precision: "precision", calendars: "calendars", showDefinedRanges: "showDefinedRanges", definedRanges: "definedRanges", invalid: "invalid", readonly: "readonly", quiet: "quiet", placement: "placement", timeZone: "timeZone", language: "language", labels: "labels", focused: "focused", helpTextManager: "helpTextManager", size: "size", disabled: "disabled", tabIndex: "tabIndex" }, outputs: { changeEvent: "change", inputEvent: "input", keydownEvent: "keydown" }, exportAs: ["luzmoDateRangePicker"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoDateRangePicker_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoDateRangePicker, selectors: [["luzmo-date-range-picker"]], inputs: { startDate: "startDate", endDate: "endDate", min: "min", max: "max", dateFormat: "dateFormat", dateSeparator: "dateSeparator", precision: "precision", calendars: "calendars", showDefinedRanges: "showDefinedRanges", definedRanges: "definedRanges", invalid: "invalid", readonly: "readonly", quiet: "quiet", placement: "placement", timeZone: "timeZone", language: "language", labels: "labels", focused: "focused", helpTextManager: "helpTextManager", size: "size", disabled: "disabled", tabIndex: "tabIndex" }, outputs: { changeEvent: "changeEvent", inputEvent: "inputEvent", keydownEvent: "keydownEvent" }, exportAs: ["luzmoDateRangePicker"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoDateRangePicker_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
         } }, encapsulation: 2 });
@@ -255,5 +255,5 @@ export class LuzmoDateRangePicker {
         }], tabIndex: [{
             type: Input,
             args: [{ alias: 'tabIndex' }]
-        }], changeEvent: [{ type: i0.Output, args: ["change"] }], inputEvent: [{ type: i0.Output, args: ["input"] }], keydownEvent: [{ type: i0.Output, args: ["keydown"] }] }); })();
+        }], changeEvent: [{ type: i0.Output, args: ["changeEvent"] }], inputEvent: [{ type: i0.Output, args: ["inputEvent"] }], keydownEvent: [{ type: i0.Output, args: ["keydownEvent"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoDateRangePicker, { className: "LuzmoDateRangePicker", filePath: "components/date-range-picker.ts", lineNumber: 20 }); })();

package/esm/components/date-time-picker.d.ts

@@ -73,7 +73,7 @@ export declare class LuzmoDateTimePicker implements OnChanges, ControlValueAcces
     clear(): void;
     focus(options?: FocusOptions): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoDateTimePicker, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoDateTimePicker, "luzmo-date-time-picker", ["luzmoDateTimePicker"], { "value": { "alias": "value"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "dateFormat": { "alias": "dateFormat"; "required": false; }; "dateSeparator": { "alias": "dateSeparator"; "required": false; }; "precision": { "alias": "precision"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "quiet": { "alias": "quiet"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "timeZone": { "alias": "timeZone"; "required": false; }; "language": { "alias": "language"; "required": false; }; "labels": { "alias": "labels"; "required": false; }; "focused": { "alias": "focused"; "required": false; }; "helpTextManager": { "alias": "helpTextManager"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "changeEvent": "change"; "inputEvent": "input"; "keydownEvent": "keydown"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoDateTimePicker, "luzmo-date-time-picker", ["luzmoDateTimePicker"], { "value": { "alias": "value"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "dateFormat": { "alias": "dateFormat"; "required": false; }; "dateSeparator": { "alias": "dateSeparator"; "required": false; }; "precision": { "alias": "precision"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "quiet": { "alias": "quiet"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "timeZone": { "alias": "timeZone"; "required": false; }; "language": { "alias": "language"; "required": false; }; "labels": { "alias": "labels"; "required": false; }; "focused": { "alias": "focused"; "required": false; }; "helpTextManager": { "alias": "helpTextManager"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "changeEvent": "changeEvent"; "inputEvent": "inputEvent"; "keydownEvent": "keydownEvent"; }, never, ["*"], true, never>;
 }
 /** The underlying custom element type for LuzmoDateTimePicker */
 export type LuzmoDateTimePickerElement = LuzmoDateTimePickerHostElement;

package/esm/components/date-time-picker.js

@@ -54,11 +54,11 @@ export class LuzmoDateTimePicker {
     /** The tab index to apply to this control. See general documentation about the tabindex HTML property */
     tabIndex;
     /** Announces when a new date/time is committed by the user */
-    changeEvent = output({ alias: 'change' });
+    changeEvent = output();
     /** Announces when the user's input changes the component's segments */
-    inputEvent = output({ alias: 'input' });
+    inputEvent = output();
     /** Trick :focus-visible polyfill into thinking keyboard based focus */
-    keydownEvent = output({ alias: 'keydown' });
+    keydownEvent = output();
     constructor() {
         this.bindEvents();
         this.destroyRef.onDestroy(() => {
@@ -140,7 +140,6 @@ export class LuzmoDateTimePicker {
     }
     bindEvents() {
         this.listenerCleanup.push(this.renderer.listen(this.host, 'change', (event) => {
-            this.changeEvent.emit(event);
             if (!this.isWritingValue) {
                 const eventWithDetail = event;
                 const eventTarget = event.target;
@@ -152,13 +151,13 @@ export class LuzmoDateTimePicker {
                     : (detailRecord === undefined ? detail : undefined)
                         ?? eventTarget?.['value']
                         ?? hostRecord['value']);
-                if (Object.is(this.lastCvaValue, nextValue)) {
-                    return;
+                if (!Object.is(this.lastCvaValue, nextValue)) {
+                    this.lastCvaValue = nextValue;
+                    this.setHostProperty('value', nextValue);
+                    this.onChange(nextValue);
                 }
-                this.lastCvaValue = nextValue;
-                this.setHostProperty('value', nextValue);
-                this.onChange(nextValue);
             }
+            this.changeEvent.emit(event);
         }));
         this.listenerCleanup.push(this.renderer.listen(this.host, 'input', (event) => {
             this.inputEvent.emit(event);
@@ -203,7 +202,7 @@ export class LuzmoDateTimePicker {
         return this.host.focus(options);
     }
     static ɵfac = function LuzmoDateTimePicker_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoDateTimePicker)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoDateTimePicker, selectors: [["luzmo-date-time-picker"]], inputs: { value: "value", min: "min", max: "max", dateFormat: "dateFormat", dateSeparator: "dateSeparator", precision: "precision", invalid: "invalid", readonly: "readonly", quiet: "quiet", placement: "placement", timeZone: "timeZone", language: "language", labels: "labels", focused: "focused", helpTextManager: "helpTextManager", size: "size", disabled: "disabled", tabIndex: "tabIndex" }, outputs: { changeEvent: "change", inputEvent: "input", keydownEvent: "keydown" }, exportAs: ["luzmoDateTimePicker"], features: [i0.ɵɵProvidersFeature([
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoDateTimePicker, selectors: [["luzmo-date-time-picker"]], inputs: { value: "value", min: "min", max: "max", dateFormat: "dateFormat", dateSeparator: "dateSeparator", precision: "precision", invalid: "invalid", readonly: "readonly", quiet: "quiet", placement: "placement", timeZone: "timeZone", language: "language", labels: "labels", focused: "focused", helpTextManager: "helpTextManager", size: "size", disabled: "disabled", tabIndex: "tabIndex" }, outputs: { changeEvent: "changeEvent", inputEvent: "inputEvent", keydownEvent: "keydownEvent" }, exportAs: ["luzmoDateTimePicker"], features: [i0.ɵɵProvidersFeature([
                 {
                     provide: NG_VALUE_ACCESSOR,
                     useExisting: forwardRef(() => LuzmoDateTimePicker),
@@ -284,5 +283,5 @@ export class LuzmoDateTimePicker {
         }], tabIndex: [{
             type: Input,
             args: [{ alias: 'tabIndex' }]
-        }], changeEvent: [{ type: i0.Output, args: ["change"] }], inputEvent: [{ type: i0.Output, args: ["input"] }], keydownEvent: [{ type: i0.Output, args: ["keydown"] }] }); })();
+        }], changeEvent: [{ type: i0.Output, args: ["changeEvent"] }], inputEvent: [{ type: i0.Output, args: ["inputEvent"] }], keydownEvent: [{ type: i0.Output, args: ["keydownEvent"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoDateTimePicker, { className: "LuzmoDateTimePicker", filePath: "components/date-time-picker.ts", lineNumber: 28 }); })();