@luzmo/ngx-lucero 2.1.0 → 2.2.1

package/esm/components/slider-handle.js

@@ -40,9 +40,9 @@ export class LuzmoSliderHandle {
     /** Per-handle value formatter. */
     getAriaHandleText;
     /** The handle value changed during user interaction. */
-    inputEvent = output({ alias: 'input' });
+    inputEvent = output();
     /** The handle value change was committed. */
-    changeEvent = output({ alias: 'change' });
+    changeEvent = output();
     constructor() {
         this.bindEvents();
         this.destroyRef.onDestroy(() => {
@@ -103,7 +103,6 @@ export class LuzmoSliderHandle {
     }
     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;
@@ -115,13 +114,13 @@ export class LuzmoSliderHandle {
                     : (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 LuzmoSliderHandle {
         return this.host.focus(options);
     }
     static ɵfac = function LuzmoSliderHandle_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoSliderHandle)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoSliderHandle, selectors: [["luzmo-slider-handle"]], inputs: { name: "name", label: "label", value: "value", defaultValue: "defaultValue", min: "min", max: "max", step: "step", color: "color", formatOptions: "formatOptions", normalization: "normalization", getAriaHandleText: "getAriaHandleText" }, outputs: { inputEvent: "input", changeEvent: "change" }, exportAs: ["luzmoSliderHandle"], features: [i0.ɵɵProvidersFeature([
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoSliderHandle, selectors: [["luzmo-slider-handle"]], inputs: { name: "name", label: "label", value: "value", defaultValue: "defaultValue", min: "min", max: "max", step: "step", color: "color", formatOptions: "formatOptions", normalization: "normalization", getAriaHandleText: "getAriaHandleText" }, outputs: { inputEvent: "inputEvent", changeEvent: "changeEvent" }, exportAs: ["luzmoSliderHandle"], features: [i0.ɵɵProvidersFeature([
                 {
                     provide: NG_VALUE_ACCESSOR,
                     useExisting: forwardRef(() => LuzmoSliderHandle),
@@ -214,5 +213,5 @@ export class LuzmoSliderHandle {
         }], getAriaHandleText: [{
             type: Input,
             args: [{ alias: 'getAriaHandleText' }]
-        }], 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(LuzmoSliderHandle, { className: "LuzmoSliderHandle", filePath: "components/slider-handle.ts", lineNumber: 24 }); })();

package/esm/components/slider.d.ts

@@ -93,7 +93,7 @@ export declare class LuzmoSlider implements OnChanges, ControlValueAccessor {
     setDisabledState(isDisabled: boolean): void;
     focus(options?: FocusOptions): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoSlider, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoSlider, "luzmo-slider", ["luzmoSlider"], { "label": { "alias": "label"; "required": false; }; "labels": { "alias": "labels"; "required": false; }; "applyFocusElementLabel": { "alias": "applyFocusElementLabel"; "required": false; }; "value": { "alias": "value"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "step": { "alias": "step"; "required": false; }; "defaultValue": { "alias": "defaultValue"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "ramp": { "alias": "ramp"; "required": false; }; "ticks": { "alias": "ticks"; "required": false; }; "labelVisibility": { "alias": "labelVisibility"; "required": false; }; "fillStart": { "alias": "fillStart"; "required": false; }; "tickStep": { "alias": "tickStep"; "required": false; }; "tickLabels": { "alias": "tickLabels"; "required": false; }; "editable": { "alias": "editable"; "required": false; }; "hideStepper": { "alias": "hideStepper"; "required": false; }; "quiet": { "alias": "quiet"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "formatOptions": { "alias": "formatOptions"; "required": false; }; "normalization": { "alias": "normalization"; "required": false; }; "getAriaHandleText": { "alias": "getAriaHandleText"; "required": false; }; "getAriaValueText": { "alias": "getAriaValueText"; "required": false; }; "helpTextManager": { "alias": "helpTextManager"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "inputEvent": "input"; "changeEvent": "change"; "keydownEvent": "keydown"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoSlider, "luzmo-slider", ["luzmoSlider"], { "label": { "alias": "label"; "required": false; }; "labels": { "alias": "labels"; "required": false; }; "applyFocusElementLabel": { "alias": "applyFocusElementLabel"; "required": false; }; "value": { "alias": "value"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "step": { "alias": "step"; "required": false; }; "defaultValue": { "alias": "defaultValue"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "ramp": { "alias": "ramp"; "required": false; }; "ticks": { "alias": "ticks"; "required": false; }; "labelVisibility": { "alias": "labelVisibility"; "required": false; }; "fillStart": { "alias": "fillStart"; "required": false; }; "tickStep": { "alias": "tickStep"; "required": false; }; "tickLabels": { "alias": "tickLabels"; "required": false; }; "editable": { "alias": "editable"; "required": false; }; "hideStepper": { "alias": "hideStepper"; "required": false; }; "quiet": { "alias": "quiet"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "formatOptions": { "alias": "formatOptions"; "required": false; }; "normalization": { "alias": "normalization"; "required": false; }; "getAriaHandleText": { "alias": "getAriaHandleText"; "required": false; }; "getAriaValueText": { "alias": "getAriaValueText"; "required": false; }; "helpTextManager": { "alias": "helpTextManager"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "inputEvent": "inputEvent"; "changeEvent": "changeEvent"; "keydownEvent": "keydownEvent"; }, never, ["*"], true, never>;
 }
 /** The underlying custom element type for LuzmoSlider */
 export type LuzmoSliderElement = LuzmoSliderHostElement;

package/esm/components/slider.js

@@ -77,11 +77,11 @@ export class LuzmoSlider {
     /** The tab index to apply to this control. See general documentation about the tabindex HTML property */
     tabIndex;
     /** The value changes during user interaction. */
-    inputEvent = output({ alias: 'input' });
+    inputEvent = output();
     /** A user value change is committed. */
-    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(() => {
@@ -196,7 +196,6 @@ export class LuzmoSlider {
     }
     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;
@@ -208,13 +207,13 @@ export class LuzmoSlider {
                     : (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);
@@ -255,7 +254,7 @@ export class LuzmoSlider {
         return this.host.focus(options);
     }
     static ɵfac = function LuzmoSlider_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoSlider)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoSlider, selectors: [["luzmo-slider"]], inputs: { label: "label", labels: "labels", applyFocusElementLabel: "applyFocusElementLabel", value: "value", min: "min", max: "max", step: "step", defaultValue: "defaultValue", variant: "variant", ramp: "ramp", ticks: "ticks", labelVisibility: "labelVisibility", fillStart: "fillStart", tickStep: "tickStep", tickLabels: "tickLabels", editable: "editable", hideStepper: "hideStepper", quiet: "quiet", indeterminate: "indeterminate", invalid: "invalid", readonly: "readonly", formatOptions: "formatOptions", normalization: "normalization", getAriaHandleText: "getAriaHandleText", getAriaValueText: "getAriaValueText", helpTextManager: "helpTextManager", size: "size", disabled: "disabled", tabIndex: "tabIndex" }, outputs: { inputEvent: "input", changeEvent: "change", keydownEvent: "keydown" }, exportAs: ["luzmoSlider"], features: [i0.ɵɵProvidersFeature([
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoSlider, selectors: [["luzmo-slider"]], inputs: { label: "label", labels: "labels", applyFocusElementLabel: "applyFocusElementLabel", value: "value", min: "min", max: "max", step: "step", defaultValue: "defaultValue", variant: "variant", ramp: "ramp", ticks: "ticks", labelVisibility: "labelVisibility", fillStart: "fillStart", tickStep: "tickStep", tickLabels: "tickLabels", editable: "editable", hideStepper: "hideStepper", quiet: "quiet", indeterminate: "indeterminate", invalid: "invalid", readonly: "readonly", formatOptions: "formatOptions", normalization: "normalization", getAriaHandleText: "getAriaHandleText", getAriaValueText: "getAriaValueText", helpTextManager: "helpTextManager", size: "size", disabled: "disabled", tabIndex: "tabIndex" }, outputs: { inputEvent: "inputEvent", changeEvent: "changeEvent", keydownEvent: "keydownEvent" }, exportAs: ["luzmoSlider"], features: [i0.ɵɵProvidersFeature([
                 {
                     provide: NG_VALUE_ACCESSOR,
                     useExisting: forwardRef(() => LuzmoSlider),
@@ -369,5 +368,5 @@ export class LuzmoSlider {
         }], 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(LuzmoSlider, { className: "LuzmoSlider", filePath: "components/slider.ts", lineNumber: 27 }); })();

package/esm/components/split-view.d.ts

@@ -34,7 +34,7 @@ export declare class LuzmoSplitView implements OnChanges {
     disabled?: boolean;
     /** The tab index to apply to this control. See general documentation about the tabindex HTML property */
     tabIndex?: number;
-    readonly typeEvent: import("@angular/core").OutputEmitterRef<Event>;
+    readonly type: import("@angular/core").OutputEmitterRef<Event>;
     /** The splitter position changes during interaction. */
     readonly inputEvent: import("@angular/core").OutputEmitterRef<CustomEvent<unknown>>;
     /** A splitter position change is committed. */
@@ -53,7 +53,7 @@ export declare class LuzmoSplitView implements OnChanges {
     private bindEvents;
     focus(options?: FocusOptions): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoSplitView, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoSplitView, "luzmo-split-view", ["luzmoSplitView"], { "vertical": { "alias": "vertical"; "required": false; }; "resizable": { "alias": "resizable"; "required": false; }; "collapsible": { "alias": "collapsible"; "required": false; }; "label": { "alias": "label"; "required": false; }; "primaryMin": { "alias": "primaryMin"; "required": false; }; "primaryMax": { "alias": "primaryMax"; "required": false; }; "secondaryMin": { "alias": "secondaryMin"; "required": false; }; "secondaryMax": { "alias": "secondaryMax"; "required": false; }; "primarySize": { "alias": "primarySize"; "required": false; }; "splitterPos": { "alias": "splitterPos"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "typeEvent": "type"; "inputEvent": "input"; "changeEvent": "change"; "keydownEvent": "keydown"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoSplitView, "luzmo-split-view", ["luzmoSplitView"], { "vertical": { "alias": "vertical"; "required": false; }; "resizable": { "alias": "resizable"; "required": false; }; "collapsible": { "alias": "collapsible"; "required": false; }; "label": { "alias": "label"; "required": false; }; "primaryMin": { "alias": "primaryMin"; "required": false; }; "primaryMax": { "alias": "primaryMax"; "required": false; }; "secondaryMin": { "alias": "secondaryMin"; "required": false; }; "secondaryMax": { "alias": "secondaryMax"; "required": false; }; "primarySize": { "alias": "primarySize"; "required": false; }; "splitterPos": { "alias": "splitterPos"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "type": "type"; "inputEvent": "inputEvent"; "changeEvent": "changeEvent"; "keydownEvent": "keydownEvent"; }, never, ["*"], true, never>;
 }
 /** The underlying custom element type for LuzmoSplitView */
 export type LuzmoSplitViewElement = LuzmoSplitViewHostElement;

package/esm/components/split-view.js

@@ -41,13 +41,13 @@ export class LuzmoSplitView {
     disabled;
     /** The tab index to apply to this control. See general documentation about the tabindex HTML property */
     tabIndex;
-    typeEvent = output({ alias: 'type' });
+    type = output({ alias: 'type' });
     /** The splitter position changes during interaction. */
-    inputEvent = output({ alias: 'input' });
+    inputEvent = output();
     /** A splitter position change is committed. */
-    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(() => {
@@ -111,7 +111,7 @@ export class LuzmoSplitView {
     }
     bindEvents() {
         this.listenerCleanup.push(this.renderer.listen(this.host, 'type', (event) => {
-            this.typeEvent.emit(event);
+            this.type.emit(event);
         }));
         this.listenerCleanup.push(this.renderer.listen(this.host, 'input', (event) => {
             this.inputEvent.emit(event);
@@ -127,7 +127,7 @@ export class LuzmoSplitView {
         return this.host.focus(options);
     }
     static ɵfac = function LuzmoSplitView_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoSplitView)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoSplitView, selectors: [["luzmo-split-view"]], inputs: { vertical: "vertical", resizable: "resizable", collapsible: "collapsible", label: "label", primaryMin: "primaryMin", primaryMax: "primaryMax", secondaryMin: "secondaryMin", secondaryMax: "secondaryMax", primarySize: "primarySize", splitterPos: "splitterPos", disabled: "disabled", tabIndex: "tabIndex" }, outputs: { typeEvent: "type", inputEvent: "input", changeEvent: "change", keydownEvent: "keydown" }, exportAs: ["luzmoSplitView"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoSplitView_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoSplitView, selectors: [["luzmo-split-view"]], inputs: { vertical: "vertical", resizable: "resizable", collapsible: "collapsible", label: "label", primaryMin: "primaryMin", primaryMax: "primaryMax", secondaryMin: "secondaryMin", secondaryMax: "secondaryMax", primarySize: "primarySize", splitterPos: "splitterPos", disabled: "disabled", tabIndex: "tabIndex" }, outputs: { type: "type", inputEvent: "inputEvent", changeEvent: "changeEvent", keydownEvent: "keydownEvent" }, exportAs: ["luzmoSplitView"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoSplitView_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
         } }, encapsulation: 2 });
@@ -177,5 +177,5 @@ export class LuzmoSplitView {
         }], tabIndex: [{
             type: Input,
             args: [{ alias: 'tabIndex' }]
-        }], typeEvent: [{ type: i0.Output, args: ["type"] }], inputEvent: [{ type: i0.Output, args: ["input"] }], changeEvent: [{ type: i0.Output, args: ["change"] }], keydownEvent: [{ type: i0.Output, args: ["keydown"] }] }); })();
+        }], type: [{ type: i0.Output, args: ["type"] }], inputEvent: [{ type: i0.Output, args: ["inputEvent"] }], changeEvent: [{ type: i0.Output, args: ["changeEvent"] }], keydownEvent: [{ type: i0.Output, args: ["keydownEvent"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoSplitView, { className: "LuzmoSplitView", filePath: "components/split-view.ts", lineNumber: 17 }); })();

package/esm/components/swatch-group.d.ts

@@ -32,7 +32,7 @@ export declare class LuzmoSwatchGroup implements OnChanges {
     private bindEvents;
     focus(options?: FocusOptions): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoSwatchGroup, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoSwatchGroup, "luzmo-swatch-group", ["luzmoSwatchGroup"], { "border": { "alias": "border"; "required": false; }; "density": { "alias": "density"; "required": false; }; "rounding": { "alias": "rounding"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "selects": { "alias": "selects"; "required": false; }; "shape": { "alias": "shape"; "required": false; }; "swatches": { "alias": "swatches"; "required": false; }; "rovingTabindexController": { "alias": "rovingTabindexController"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "changeEvent": "change"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoSwatchGroup, "luzmo-swatch-group", ["luzmoSwatchGroup"], { "border": { "alias": "border"; "required": false; }; "density": { "alias": "density"; "required": false; }; "rounding": { "alias": "rounding"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "selects": { "alias": "selects"; "required": false; }; "shape": { "alias": "shape"; "required": false; }; "swatches": { "alias": "swatches"; "required": false; }; "rovingTabindexController": { "alias": "rovingTabindexController"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "changeEvent": "changeEvent"; }, never, ["*"], true, never>;
 }
 /** The underlying custom element type for LuzmoSwatchGroup */
 export type LuzmoSwatchGroupElement = LuzmoSwatchGroupHostElement;

package/esm/components/swatch-group.js

@@ -26,7 +26,7 @@ export class LuzmoSwatchGroup {
     swatches;
     rovingTabindexController;
     size;
-    changeEvent = output({ alias: 'change' });
+    changeEvent = output();
     constructor() {
         this.bindEvents();
         this.destroyRef.onDestroy(() => {
@@ -88,7 +88,7 @@ export class LuzmoSwatchGroup {
         return this.host.focus(options);
     }
     static ɵfac = function LuzmoSwatchGroup_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoSwatchGroup)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoSwatchGroup, selectors: [["luzmo-swatch-group"]], inputs: { border: "border", density: "density", rounding: "rounding", selected: "selected", selects: "selects", shape: "shape", swatches: "swatches", rovingTabindexController: "rovingTabindexController", size: "size" }, outputs: { changeEvent: "change" }, exportAs: ["luzmoSwatchGroup"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoSwatchGroup_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoSwatchGroup, selectors: [["luzmo-swatch-group"]], inputs: { border: "border", density: "density", rounding: "rounding", selected: "selected", selects: "selects", shape: "shape", swatches: "swatches", rovingTabindexController: "rovingTabindexController", size: "size" }, outputs: { changeEvent: "changeEvent" }, exportAs: ["luzmoSwatchGroup"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoSwatchGroup_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
         } }, encapsulation: 2 });
@@ -129,5 +129,5 @@ export class LuzmoSwatchGroup {
         }], size: [{
             type: Input,
             args: [{ alias: 'size' }]
-        }], changeEvent: [{ type: i0.Output, args: ["change"] }] }); })();
+        }], changeEvent: [{ type: i0.Output, args: ["changeEvent"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoSwatchGroup, { className: "LuzmoSwatchGroup", filePath: "components/swatch-group.ts", lineNumber: 17 }); })();

package/esm/components/swatch.d.ts

@@ -51,7 +51,7 @@ export declare class LuzmoSwatch implements OnChanges, ControlValueAccessor {
     toggle(force?: boolean): void;
     focus(options?: FocusOptions): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoSwatch, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoSwatch, "luzmo-swatch", ["luzmoSwatch"], { "border": { "alias": "border"; "required": false; }; "color": { "alias": "color"; "required": false; }; "label": { "alias": "label"; "required": false; }; "mixedValue": { "alias": "mixedValue"; "required": false; }; "nothing": { "alias": "nothing"; "required": false; }; "role": { "alias": "role"; "required": false; }; "rounding": { "alias": "rounding"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "shape": { "alias": "shape"; "required": false; }; "value": { "alias": "value"; "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<LuzmoSwatch, "luzmo-swatch", ["luzmoSwatch"], { "border": { "alias": "border"; "required": false; }; "color": { "alias": "color"; "required": false; }; "label": { "alias": "label"; "required": false; }; "mixedValue": { "alias": "mixedValue"; "required": false; }; "nothing": { "alias": "nothing"; "required": false; }; "role": { "alias": "role"; "required": false; }; "rounding": { "alias": "rounding"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "shape": { "alias": "shape"; "required": false; }; "value": { "alias": "value"; "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 LuzmoSwatch */
 export type LuzmoSwatchElement = LuzmoSwatchHostElement;

package/esm/components/swatch.js

@@ -32,9 +32,9 @@ export class LuzmoSwatch {
     disabled;
     /** The tab index to apply to this control. See general documentation about the tabindex HTML property */
     tabIndex;
-    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(() => {
@@ -104,7 +104,6 @@ export class LuzmoSwatch {
     }
     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;
@@ -116,13 +115,13 @@ export class LuzmoSwatch {
                     : (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, 'keydown', (event) => {
             this.keydownEvent.emit(event);
@@ -163,7 +162,7 @@ export class LuzmoSwatch {
         return this.host.focus(options);
     }
     static ɵfac = function LuzmoSwatch_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoSwatch)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoSwatch, selectors: [["luzmo-swatch"]], inputs: { border: "border", color: "color", label: "label", mixedValue: "mixedValue", nothing: "nothing", role: "role", rounding: "rounding", selected: "selected", readonly: "readonly", shape: "shape", value: "value", size: "size", disabled: "disabled", tabIndex: "tabIndex" }, outputs: { changeEvent: "change", keydownEvent: "keydown" }, exportAs: ["luzmoSwatch"], features: [i0.ɵɵProvidersFeature([
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoSwatch, selectors: [["luzmo-swatch"]], inputs: { border: "border", color: "color", label: "label", mixedValue: "mixedValue", nothing: "nothing", role: "role", rounding: "rounding", selected: "selected", readonly: "readonly", shape: "shape", value: "value", size: "size", disabled: "disabled", tabIndex: "tabIndex" }, outputs: { changeEvent: "changeEvent", keydownEvent: "keydownEvent" }, exportAs: ["luzmoSwatch"], features: [i0.ɵɵProvidersFeature([
                 {
                     provide: NG_VALUE_ACCESSOR,
                     useExisting: forwardRef(() => LuzmoSwatch),
@@ -232,5 +231,5 @@ export class LuzmoSwatch {
         }], 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(LuzmoSwatch, { className: "LuzmoSwatch", filePath: "components/swatch.ts", lineNumber: 23 }); })();

package/esm/components/switch.d.ts

@@ -50,7 +50,7 @@ export declare class LuzmoSwitch implements OnChanges, ControlValueAccessor {
     setDisabledState(isDisabled: boolean): void;
     focus(options?: FocusOptions): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoSwitch, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoSwitch, "luzmo-switch", ["luzmoSwitch"], { "emphasized": { "alias": "emphasized"; "required": false; }; "thumb": { "alias": "thumb"; "required": false; }; "size": { "alias": "size"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "name": { "alias": "name"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "changeEvent": "change"; "keydownEvent": "keydown"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoSwitch, "luzmo-switch", ["luzmoSwitch"], { "emphasized": { "alias": "emphasized"; "required": false; }; "thumb": { "alias": "thumb"; "required": false; }; "size": { "alias": "size"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "name": { "alias": "name"; "required": false; }; "readonly": { "alias": "readonly"; "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 LuzmoSwitch */
 export type LuzmoSwitchElement = LuzmoSwitchHostElement;

package/esm/components/switch.js

@@ -34,9 +34,9 @@ export class LuzmoSwitch {
     /** The tab index to apply to this control. See general documentation about the tabindex HTML property */
     tabIndex;
     /** Announces a change in the `checked` property of a Switch */
-    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(() => {
@@ -88,7 +88,6 @@ export class LuzmoSwitch {
     }
     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;
@@ -100,13 +99,13 @@ export class LuzmoSwitch {
                     : (detailRecord === undefined ? detail : undefined)
                         ?? eventTarget?.['checked']
                         ?? hostRecord['checked']);
-                if (Object.is(this.lastCvaValue, nextValue)) {
-                    return;
+                if (!Object.is(this.lastCvaValue, nextValue)) {
+                    this.lastCvaValue = nextValue;
+                    this.setHostProperty('checked', nextValue);
+                    this.onChange(nextValue);
                 }
-                this.lastCvaValue = nextValue;
-                this.setHostProperty('checked', nextValue);
-                this.onChange(nextValue);
             }
+            this.changeEvent.emit(event);
         }));
         this.listenerCleanup.push(this.renderer.listen(this.host, 'keydown', (event) => {
             this.keydownEvent.emit(event);
@@ -144,7 +143,7 @@ export class LuzmoSwitch {
         return this.host.focus(options);
     }
     static ɵfac = function LuzmoSwitch_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoSwitch)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoSwitch, selectors: [["luzmo-switch"]], inputs: { emphasized: "emphasized", thumb: "thumb", size: "size", checked: "checked", name: "name", readonly: "readonly", disabled: "disabled", tabIndex: "tabIndex" }, outputs: { changeEvent: "change", keydownEvent: "keydown" }, exportAs: ["luzmoSwitch"], features: [i0.ɵɵProvidersFeature([
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoSwitch, selectors: [["luzmo-switch"]], inputs: { emphasized: "emphasized", thumb: "thumb", size: "size", checked: "checked", name: "name", readonly: "readonly", disabled: "disabled", tabIndex: "tabIndex" }, outputs: { changeEvent: "changeEvent", keydownEvent: "keydownEvent" }, exportAs: ["luzmoSwitch"], features: [i0.ɵɵProvidersFeature([
                 {
                     provide: NG_VALUE_ACCESSOR,
                     useExisting: forwardRef(() => LuzmoSwitch),
@@ -195,5 +194,5 @@ export class LuzmoSwitch {
         }], 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(LuzmoSwitch, { className: "LuzmoSwitch", filePath: "components/switch.ts", lineNumber: 25 }); })();

package/esm/components/tabs.d.ts

@@ -44,7 +44,7 @@ export declare class LuzmoTabs implements OnChanges {
     private bindEvents;
     focus(options?: FocusOptions): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoTabs, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoTabs, "luzmo-tabs", ["luzmoTabs"], { "auto": { "alias": "auto"; "required": false; }; "compact": { "alias": "compact"; "required": false; }; "direction": { "alias": "direction"; "required": false; }; "emphasized": { "alias": "emphasized"; "required": false; }; "label": { "alias": "label"; "required": false; }; "enableTabsScroll": { "alias": "enableTabsScroll"; "required": false; }; "quiet": { "alias": "quiet"; "required": false; }; "selectionIndicatorStyle": { "alias": "selectionIndicatorStyle"; "required": false; }; "shouldAnimate": { "alias": "shouldAnimate"; "required": false; }; "selected": { "alias": "selected"; "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<LuzmoTabs, "luzmo-tabs", ["luzmoTabs"], { "auto": { "alias": "auto"; "required": false; }; "compact": { "alias": "compact"; "required": false; }; "direction": { "alias": "direction"; "required": false; }; "emphasized": { "alias": "emphasized"; "required": false; }; "label": { "alias": "label"; "required": false; }; "enableTabsScroll": { "alias": "enableTabsScroll"; "required": false; }; "quiet": { "alias": "quiet"; "required": false; }; "selectionIndicatorStyle": { "alias": "selectionIndicatorStyle"; "required": false; }; "shouldAnimate": { "alias": "shouldAnimate"; "required": false; }; "selected": { "alias": "selected"; "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 LuzmoTabs */
 export type LuzmoTabsElement = LuzmoTabsHostElement;

package/esm/components/tabs.js

@@ -38,9 +38,9 @@ export class LuzmoTabs {
     /** The tab index to apply to this control. See general documentation about the tabindex HTML property */
     tabIndex;
     /** The selected Tab child has changed. */
-    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(() => {
@@ -117,7 +117,7 @@ export class LuzmoTabs {
         return this.host.focus(options);
     }
     static ɵfac = function LuzmoTabs_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoTabs)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoTabs, selectors: [["luzmo-tabs"]], inputs: { auto: "auto", compact: "compact", direction: "direction", emphasized: "emphasized", label: "label", enableTabsScroll: "enableTabsScroll", quiet: "quiet", selectionIndicatorStyle: "selectionIndicatorStyle", shouldAnimate: "shouldAnimate", selected: "selected", size: "size", disabled: "disabled", tabIndex: "tabIndex" }, outputs: { changeEvent: "change", keydownEvent: "keydown" }, exportAs: ["luzmoTabs"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoTabs_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoTabs, selectors: [["luzmo-tabs"]], inputs: { auto: "auto", compact: "compact", direction: "direction", emphasized: "emphasized", label: "label", enableTabsScroll: "enableTabsScroll", quiet: "quiet", selectionIndicatorStyle: "selectionIndicatorStyle", shouldAnimate: "shouldAnimate", selected: "selected", size: "size", disabled: "disabled", tabIndex: "tabIndex" }, outputs: { changeEvent: "changeEvent", keydownEvent: "keydownEvent" }, exportAs: ["luzmoTabs"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoTabs_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
         } }, encapsulation: 2 });
@@ -170,5 +170,5 @@ export class LuzmoTabs {
         }], 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(LuzmoTabs, { className: "LuzmoTabs", filePath: "components/tabs.ts", lineNumber: 19 }); })();

package/esm/components/tag.d.ts

@@ -19,7 +19,7 @@ export declare class LuzmoTag implements OnChanges {
     disabled?: boolean;
     readonly?: boolean;
     size?: ('xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl');
-    readonly deleteEvent: import("@angular/core").OutputEmitterRef<Event>;
+    readonly delete: import("@angular/core").OutputEmitterRef<Event>;
     constructor();
     ngOnChanges(changes: SimpleChanges): void;
     /**
@@ -31,7 +31,7 @@ export declare class LuzmoTag implements OnChanges {
     private setHostProperty;
     private bindEvents;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoTag, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoTag, "luzmo-tag", ["luzmoTag"], { "variant": { "alias": "variant"; "required": false; }; "treatment": { "alias": "treatment"; "required": false; }; "deletable": { "alias": "deletable"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "deleteEvent": "delete"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoTag, "luzmo-tag", ["luzmoTag"], { "variant": { "alias": "variant"; "required": false; }; "treatment": { "alias": "treatment"; "required": false; }; "deletable": { "alias": "deletable"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "delete": "delete"; }, never, ["*"], true, never>;
 }
 /** The underlying custom element type for LuzmoTag */
 export type LuzmoTagElement = LuzmoTagHostElement;

package/esm/components/tag.js

@@ -27,7 +27,7 @@ export class LuzmoTag {
     disabled;
     readonly;
     size;
-    deleteEvent = output({ alias: 'delete' });
+    delete = output({ alias: 'delete' });
     constructor() {
         this.bindEvents();
         this.destroyRef.onDestroy(() => {
@@ -73,11 +73,11 @@ export class LuzmoTag {
     }
     bindEvents() {
         this.listenerCleanup.push(this.renderer.listen(this.host, 'delete', (event) => {
-            this.deleteEvent.emit(event);
+            this.delete.emit(event);
         }));
     }
     static ɵfac = function LuzmoTag_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoTag)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoTag, selectors: [["luzmo-tag"]], inputs: { variant: "variant", treatment: "treatment", deletable: "deletable", disabled: "disabled", readonly: "readonly", size: "size" }, outputs: { deleteEvent: "delete" }, exportAs: ["luzmoTag"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoTag_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoTag, selectors: [["luzmo-tag"]], inputs: { variant: "variant", treatment: "treatment", deletable: "deletable", disabled: "disabled", readonly: "readonly", size: "size" }, outputs: { delete: "delete" }, exportAs: ["luzmoTag"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoTag_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
         } }, encapsulation: 2 });
@@ -109,5 +109,5 @@ export class LuzmoTag {
         }], size: [{
             type: Input,
             args: [{ alias: 'size' }]
-        }], deleteEvent: [{ type: i0.Output, args: ["delete"] }] }); })();
+        }], delete: [{ type: i0.Output, args: ["delete"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoTag, { className: "LuzmoTag", filePath: "components/tag.ts", lineNumber: 20 }); })();

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

@@ -89,7 +89,7 @@ export declare class LuzmoTextField implements OnChanges, ControlValueAccessor {
     checkValidity(): boolean;
     focus(options?: FocusOptions): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoTextField, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoTextField, "luzmo-text-field", ["luzmoTextField"], { "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; }; }, { "changeEvent": "change"; "inputEvent": "input"; "keypressEvent": "keypress"; "keydownEvent": "keydown"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoTextField, "luzmo-text-field", ["luzmoTextField"], { "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; }; }, { "changeEvent": "changeEvent"; "inputEvent": "inputEvent"; "keypressEvent": "keypressEvent"; "keydownEvent": "keydownEvent"; }, never, ["*"], true, never>;
 }
 /** The underlying custom element type for LuzmoTextField */
 export type LuzmoTextFieldElement = LuzmoTextFieldHostElement;

package/esm/components/text-field.js

@@ -65,13 +65,13 @@ export class LuzmoTextField {
     /** The tab index to apply to this control. See general documentation about the tabindex HTML property */
     tabIndex;
     /** An alteration to the value of the element has been committed by the user. */
-    changeEvent = output({ alias: 'change' });
+    changeEvent = output();
     /** The value of the element has changed. */
-    inputEvent = output({ alias: 'input' });
+    inputEvent = 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(() => {
@@ -171,7 +171,6 @@ export class LuzmoTextField {
     }
     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;
@@ -183,13 +182,13 @@ export class LuzmoTextField {
                     : (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);
@@ -244,7 +243,7 @@ export class LuzmoTextField {
         return this.host.focus(options);
     }
     static ɵfac = function LuzmoTextField_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoTextField)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoTextField, selectors: [["luzmo-text-field"]], inputs: { 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: { changeEvent: "change", inputEvent: "input", keypressEvent: "keypress", keydownEvent: "keydown" }, exportAs: ["luzmoTextField"], features: [i0.ɵɵProvidersFeature([
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoTextField, selectors: [["luzmo-text-field"]], inputs: { 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: { changeEvent: "changeEvent", inputEvent: "inputEvent", keypressEvent: "keypressEvent", keydownEvent: "keydownEvent" }, exportAs: ["luzmoTextField"], features: [i0.ɵɵProvidersFeature([
                 {
                     provide: NG_VALUE_ACCESSOR,
                     useExisting: forwardRef(() => LuzmoTextField),
@@ -343,5 +342,5 @@ export class LuzmoTextField {
         }], tabIndex: [{
             type: Input,
             args: [{ alias: 'tabIndex' }]
-        }], changeEvent: [{ type: i0.Output, args: ["change"] }], inputEvent: [{ type: i0.Output, args: ["input"] }], keypressEvent: [{ type: i0.Output, args: ["keypress"] }], keydownEvent: [{ type: i0.Output, args: ["keydown"] }] }); })();
+        }], changeEvent: [{ type: i0.Output, args: ["changeEvent"] }], inputEvent: [{ type: i0.Output, args: ["inputEvent"] }], keypressEvent: [{ type: i0.Output, args: ["keypressEvent"] }], keydownEvent: [{ type: i0.Output, args: ["keydownEvent"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoTextField, { className: "LuzmoTextField", filePath: "components/text-field.ts", lineNumber: 26 }); })();

package/esm/components/toast.d.ts

@@ -24,7 +24,7 @@ export declare class LuzmoToast implements OnChanges {
     private bindEvents;
     close(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoToast, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoToast, "luzmo-toast", ["luzmoToast"], {}, { "closeEvent": "close"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoToast, "luzmo-toast", ["luzmoToast"], {}, { "closeEvent": "closeEvent"; }, never, ["*"], true, never>;
 }
 /** The underlying custom element type for LuzmoToast */
 export type LuzmoToastElement = LuzmoToastHostElement;

package/esm/components/toast.js

@@ -19,7 +19,7 @@ export class LuzmoToast {
         return this.host;
     }
     /** Announces that the Toast has been closed by the user or by its timeout. */
-    closeEvent = output({ alias: 'close' });
+    closeEvent = output();
     constructor() {
         this.bindEvents();
         this.destroyRef.onDestroy(() => {
@@ -50,7 +50,7 @@ export class LuzmoToast {
         return this.host.close();
     }
     static ɵfac = function LuzmoToast_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoToast)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoToast, selectors: [["luzmo-toast"]], outputs: { closeEvent: "close" }, exportAs: ["luzmoToast"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoToast_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoToast, selectors: [["luzmo-toast"]], outputs: { closeEvent: "closeEvent" }, exportAs: ["luzmoToast"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoToast_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
         } }, encapsulation: 2 });
@@ -64,5 +64,5 @@ export class LuzmoToast {
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 template: '<ng-content />'
             }]
-    }], () => [], { closeEvent: [{ type: i0.Output, args: ["close"] }] }); })();
+    }], () => [], { closeEvent: [{ type: i0.Output, args: ["closeEvent"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoToast, { className: "LuzmoToast", filePath: "components/toast.ts", lineNumber: 18 }); })();