@luzmo/ngx-lucero 2.1.0 → 2.2.1

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

@@ -49,7 +49,7 @@ export declare class LuzmoInfieldButton implements OnChanges {
     private bindEvents;
     focus(options?: FocusOptions): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoInfieldButton, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoInfieldButton, "luzmo-infield-button", ["luzmoInfieldButton"], { "block": { "alias": "block"; "required": false; }; "inline": { "alias": "inline"; "required": false; }; "quiet": { "alias": "quiet"; "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<LuzmoInfieldButton, "luzmo-infield-button", ["luzmoInfieldButton"], { "block": { "alias": "block"; "required": false; }; "inline": { "alias": "inline"; "required": false; }; "quiet": { "alias": "quiet"; "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 LuzmoInfieldButton */
 export type LuzmoInfieldButtonElement = LuzmoInfieldButtonHostElement;

package/esm/components/infield-button.js

@@ -44,7 +44,7 @@ export class LuzmoInfieldButton {
     /** 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(() => {
@@ -121,7 +121,7 @@ export class LuzmoInfieldButton {
         return this.host.focus(options);
     }
     static ɵfac = function LuzmoInfieldButton_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoInfieldButton)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoInfieldButton, selectors: [["luzmo-infield-button"]], inputs: { block: "block", inline: "inline", quiet: "quiet", 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: ["luzmoInfieldButton"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoInfieldButton_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoInfieldButton, selectors: [["luzmo-infield-button"]], inputs: { block: "block", inline: "inline", quiet: "quiet", 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: ["luzmoInfieldButton"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoInfieldButton_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
         } }, encapsulation: 2 });
@@ -177,5 +177,5 @@ export class LuzmoInfieldButton {
         }], tabIndex: [{
             type: Input,
             args: [{ alias: 'tabIndex' }]
-        }], keydownEvent: [{ type: i0.Output, args: ["keydown"] }] }); })();
+        }], keydownEvent: [{ type: i0.Output, args: ["keydownEvent"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoInfieldButton, { className: "LuzmoInfieldButton", filePath: "components/infield-button.ts", lineNumber: 18 }); })();

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

@@ -51,7 +51,7 @@ export declare class LuzmoMenuGroup implements OnChanges, ControlValueAccessor {
     setDisabledState(isDisabled: boolean): void;
     focus({ preventScroll }: FocusOptions): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoMenuGroup, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoMenuGroup, "luzmo-menu-group", ["luzmoMenuGroup"], { "size": { "alias": "size"; "required": false; }; "label": { "alias": "label"; "required": false; }; "ignore": { "alias": "ignore"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "selects": { "alias": "selects"; "required": false; }; "value": { "alias": "value"; "required": false; }; "valueSeparator": { "alias": "valueSeparator"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "selectedItems": { "alias": "selectedItems"; "required": false; }; "menuSlot": { "alias": "menuSlot"; "required": false; }; "focusedItemIndex": { "alias": "focusedItemIndex"; "required": false; }; "focusInItemIndex": { "alias": "focusInItemIndex"; "required": false; }; "shouldSupportDragAndSelect": { "alias": "shouldSupportDragAndSelect"; "required": false; }; "isScrolling": { "alias": "isScrolling"; "required": false; }; "handleSubmenuClosed": { "alias": "handleSubmenuClosed"; "required": false; }; "handleSubmenuOpened": { "alias": "handleSubmenuOpened"; "required": false; }; }, { "changeEvent": "change"; "closeEvent": "close"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoMenuGroup, "luzmo-menu-group", ["luzmoMenuGroup"], { "size": { "alias": "size"; "required": false; }; "label": { "alias": "label"; "required": false; }; "ignore": { "alias": "ignore"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "selects": { "alias": "selects"; "required": false; }; "value": { "alias": "value"; "required": false; }; "valueSeparator": { "alias": "valueSeparator"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "selectedItems": { "alias": "selectedItems"; "required": false; }; "menuSlot": { "alias": "menuSlot"; "required": false; }; "focusedItemIndex": { "alias": "focusedItemIndex"; "required": false; }; "focusInItemIndex": { "alias": "focusInItemIndex"; "required": false; }; "shouldSupportDragAndSelect": { "alias": "shouldSupportDragAndSelect"; "required": false; }; "isScrolling": { "alias": "isScrolling"; "required": false; }; "handleSubmenuClosed": { "alias": "handleSubmenuClosed"; "required": false; }; "handleSubmenuOpened": { "alias": "handleSubmenuOpened"; "required": false; }; }, { "changeEvent": "changeEvent"; "closeEvent": "closeEvent"; }, never, ["*"], true, never>;
 }
 /** The underlying custom element type for LuzmoMenuGroup */
 export type LuzmoMenuGroupElement = LuzmoMenuGroupHostElement;

package/esm/components/menu-group.js

@@ -36,8 +36,8 @@ export class LuzmoMenuGroup {
     handleSubmenuClosed;
     handleSubmenuOpened;
     /** Announces that the `value` of the element has changed */
-    changeEvent = output({ alias: 'change' });
-    closeEvent = output({ alias: 'close' });
+    changeEvent = output();
+    closeEvent = output();
     constructor() {
         this.bindEvents();
         this.destroyRef.onDestroy(() => {
@@ -113,7 +113,6 @@ export class LuzmoMenuGroup {
     }
     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;
@@ -125,13 +124,13 @@ export class LuzmoMenuGroup {
                     : (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, 'close', (event) => {
             this.closeEvent.emit(event);
@@ -164,7 +163,7 @@ export class LuzmoMenuGroup {
         return this.host.focus({ preventScroll });
     }
     static ɵfac = function LuzmoMenuGroup_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoMenuGroup)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoMenuGroup, selectors: [["luzmo-menu-group"]], inputs: { size: "size", label: "label", ignore: "ignore", variant: "variant", selects: "selects", value: "value", valueSeparator: "valueSeparator", selected: "selected", selectedItems: "selectedItems", menuSlot: "menuSlot", focusedItemIndex: "focusedItemIndex", focusInItemIndex: "focusInItemIndex", shouldSupportDragAndSelect: "shouldSupportDragAndSelect", isScrolling: "isScrolling", handleSubmenuClosed: "handleSubmenuClosed", handleSubmenuOpened: "handleSubmenuOpened" }, outputs: { changeEvent: "change", closeEvent: "close" }, exportAs: ["luzmoMenuGroup"], features: [i0.ɵɵProvidersFeature([
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoMenuGroup, selectors: [["luzmo-menu-group"]], inputs: { size: "size", label: "label", ignore: "ignore", variant: "variant", selects: "selects", value: "value", valueSeparator: "valueSeparator", selected: "selected", selectedItems: "selectedItems", menuSlot: "menuSlot", focusedItemIndex: "focusedItemIndex", focusInItemIndex: "focusInItemIndex", shouldSupportDragAndSelect: "shouldSupportDragAndSelect", isScrolling: "isScrolling", handleSubmenuClosed: "handleSubmenuClosed", handleSubmenuOpened: "handleSubmenuOpened" }, outputs: { changeEvent: "changeEvent", closeEvent: "closeEvent" }, exportAs: ["luzmoMenuGroup"], features: [i0.ɵɵProvidersFeature([
                 {
                     provide: NG_VALUE_ACCESSOR,
                     useExisting: forwardRef(() => LuzmoMenuGroup),
@@ -239,5 +238,5 @@ export class LuzmoMenuGroup {
         }], handleSubmenuOpened: [{
             type: Input,
             args: [{ alias: 'handleSubmenuOpened' }]
-        }], changeEvent: [{ type: i0.Output, args: ["change"] }], closeEvent: [{ type: i0.Output, args: ["close"] }] }); })();
+        }], changeEvent: [{ type: i0.Output, args: ["changeEvent"] }], closeEvent: [{ type: i0.Output, args: ["closeEvent"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoMenuGroup, { className: "LuzmoMenuGroup", filePath: "components/menu-group.ts", lineNumber: 27 }); })();

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

@@ -43,7 +43,7 @@ export declare class LuzmoMenuItem implements OnChanges {
     /** The tab index to apply to this control. See general documentation about the tabindex HTML property */
     tabIndex?: number;
     /** announces the item has been added or updated so a parent menu can take ownership */
-    readonly luzmoMenuItemAddedOrUpdatedEvent: import("@angular/core").OutputEmitterRef<CustomEvent<unknown>>;
+    readonly luzmoMenuItemAddedOrUpdated: import("@angular/core").OutputEmitterRef<CustomEvent<unknown>>;
     /** Trick :focus-visible polyfill into thinking keyboard based focus */
     readonly keydownEvent: import("@angular/core").OutputEmitterRef<unknown>;
     constructor();
@@ -58,7 +58,7 @@ export declare class LuzmoMenuItem implements OnChanges {
     private bindEvents;
     focus(options?: FocusOptions): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoMenuItem, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoMenuItem, "luzmo-menu-item", ["luzmoMenuItem"], { "abortControllerSubmenu": { "alias": "abortControllerSubmenu"; "required": false; }; "active": { "alias": "active"; "required": false; }; "focused": { "alias": "focused"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "value": { "alias": "value"; "required": false; }; "hasSubmenu": { "alias": "hasSubmenu"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "tooltipPlacement": { "alias": "tooltipPlacement"; "required": false; }; "contentSlot": { "alias": "contentSlot"; "required": false; }; "iconSlot": { "alias": "iconSlot"; "required": false; }; "noWrap": { "alias": "noWrap"; "required": false; }; "overlayElement": { "alias": "overlayElement"; "required": false; }; "open": { "alias": "open"; "required": false; }; "menuData": { "alias": "menuData"; "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; }; "managePresenceObservedSlot": { "alias": "managePresenceObservedSlot"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "luzmoMenuItemAddedOrUpdatedEvent": "luzmo-menu-item-added-or-updated"; "keydownEvent": "keydown"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoMenuItem, "luzmo-menu-item", ["luzmoMenuItem"], { "abortControllerSubmenu": { "alias": "abortControllerSubmenu"; "required": false; }; "active": { "alias": "active"; "required": false; }; "focused": { "alias": "focused"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "value": { "alias": "value"; "required": false; }; "hasSubmenu": { "alias": "hasSubmenu"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "tooltipPlacement": { "alias": "tooltipPlacement"; "required": false; }; "contentSlot": { "alias": "contentSlot"; "required": false; }; "iconSlot": { "alias": "iconSlot"; "required": false; }; "noWrap": { "alias": "noWrap"; "required": false; }; "overlayElement": { "alias": "overlayElement"; "required": false; }; "open": { "alias": "open"; "required": false; }; "menuData": { "alias": "menuData"; "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; }; "managePresenceObservedSlot": { "alias": "managePresenceObservedSlot"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "luzmoMenuItemAddedOrUpdated": "luzmo-menu-item-added-or-updated"; "keydownEvent": "keydownEvent"; }, never, ["*"], true, never>;
 }
 /** The underlying custom element type for LuzmoMenuItem */
 export type LuzmoMenuItemElement = LuzmoMenuItemHostElement;

package/esm/components/menu-item.js

@@ -53,9 +53,9 @@ export class LuzmoMenuItem {
     /** The tab index to apply to this control. See general documentation about the tabindex HTML property */
     tabIndex;
     /** announces the item has been added or updated so a parent menu can take ownership */
-    luzmoMenuItemAddedOrUpdatedEvent = output({ alias: 'luzmo-menu-item-added-or-updated' });
+    luzmoMenuItemAddedOrUpdated = output({ alias: 'luzmo-menu-item-added-or-updated' });
     /** Trick :focus-visible polyfill into thinking keyboard based focus */
-    keydownEvent = output({ alias: 'keydown' });
+    keydownEvent = output();
     constructor() {
         this.bindEvents();
         this.destroyRef.onDestroy(() => {
@@ -152,7 +152,7 @@ export class LuzmoMenuItem {
     }
     bindEvents() {
         this.listenerCleanup.push(this.renderer.listen(this.host, 'luzmo-menu-item-added-or-updated', (event) => {
-            this.luzmoMenuItemAddedOrUpdatedEvent.emit(event);
+            this.luzmoMenuItemAddedOrUpdated.emit(event);
         }));
         this.listenerCleanup.push(this.renderer.listen(this.host, 'keydown', (event) => {
             this.keydownEvent.emit(event);
@@ -162,7 +162,7 @@ export class LuzmoMenuItem {
         return this.host.focus(options);
     }
     static ɵfac = function LuzmoMenuItem_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoMenuItem)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoMenuItem, selectors: [["luzmo-menu-item"]], inputs: { abortControllerSubmenu: "abortControllerSubmenu", active: "active", focused: "focused", selected: "selected", value: "value", hasSubmenu: "hasSubmenu", tooltip: "tooltip", tooltipPlacement: "tooltipPlacement", contentSlot: "contentSlot", iconSlot: "iconSlot", noWrap: "noWrap", overlayElement: "overlayElement", open: "open", menuData: "menuData", download: "download", label: "label", href: "href", target: "target", referrerpolicy: "referrerpolicy", rel: "rel", managePresenceObservedSlot: "managePresenceObservedSlot", disabled: "disabled", tabIndex: "tabIndex" }, outputs: { luzmoMenuItemAddedOrUpdatedEvent: "luzmo-menu-item-added-or-updated", keydownEvent: "keydown" }, exportAs: ["luzmoMenuItem"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoMenuItem_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoMenuItem, selectors: [["luzmo-menu-item"]], inputs: { abortControllerSubmenu: "abortControllerSubmenu", active: "active", focused: "focused", selected: "selected", value: "value", hasSubmenu: "hasSubmenu", tooltip: "tooltip", tooltipPlacement: "tooltipPlacement", contentSlot: "contentSlot", iconSlot: "iconSlot", noWrap: "noWrap", overlayElement: "overlayElement", open: "open", menuData: "menuData", download: "download", label: "label", href: "href", target: "target", referrerpolicy: "referrerpolicy", rel: "rel", managePresenceObservedSlot: "managePresenceObservedSlot", disabled: "disabled", tabIndex: "tabIndex" }, outputs: { luzmoMenuItemAddedOrUpdated: "luzmo-menu-item-added-or-updated", keydownEvent: "keydownEvent" }, exportAs: ["luzmoMenuItem"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoMenuItem_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
         } }, encapsulation: 2 });
@@ -245,5 +245,5 @@ export class LuzmoMenuItem {
         }], tabIndex: [{
             type: Input,
             args: [{ alias: 'tabIndex' }]
-        }], luzmoMenuItemAddedOrUpdatedEvent: [{ type: i0.Output, args: ["luzmo-menu-item-added-or-updated"] }], keydownEvent: [{ type: i0.Output, args: ["keydown"] }] }); })();
+        }], luzmoMenuItemAddedOrUpdated: [{ type: i0.Output, args: ["luzmo-menu-item-added-or-updated"] }], keydownEvent: [{ type: i0.Output, args: ["keydownEvent"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoMenuItem, { className: "LuzmoMenuItem", filePath: "components/menu-item.ts", lineNumber: 22 }); })();

package/esm/components/menu.d.ts

@@ -51,7 +51,7 @@ export declare class LuzmoMenu implements OnChanges, ControlValueAccessor {
     setDisabledState(isDisabled: boolean): void;
     focus({ preventScroll }: FocusOptions): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoMenu, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoMenu, "luzmo-menu", ["luzmoMenu"], { "label": { "alias": "label"; "required": false; }; "ignore": { "alias": "ignore"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "selects": { "alias": "selects"; "required": false; }; "value": { "alias": "value"; "required": false; }; "valueSeparator": { "alias": "valueSeparator"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "selectedItems": { "alias": "selectedItems"; "required": false; }; "menuSlot": { "alias": "menuSlot"; "required": false; }; "focusedItemIndex": { "alias": "focusedItemIndex"; "required": false; }; "focusInItemIndex": { "alias": "focusInItemIndex"; "required": false; }; "shouldSupportDragAndSelect": { "alias": "shouldSupportDragAndSelect"; "required": false; }; "isScrolling": { "alias": "isScrolling"; "required": false; }; "handleSubmenuClosed": { "alias": "handleSubmenuClosed"; "required": false; }; "handleSubmenuOpened": { "alias": "handleSubmenuOpened"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "changeEvent": "change"; "closeEvent": "close"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoMenu, "luzmo-menu", ["luzmoMenu"], { "label": { "alias": "label"; "required": false; }; "ignore": { "alias": "ignore"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "selects": { "alias": "selects"; "required": false; }; "value": { "alias": "value"; "required": false; }; "valueSeparator": { "alias": "valueSeparator"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "selectedItems": { "alias": "selectedItems"; "required": false; }; "menuSlot": { "alias": "menuSlot"; "required": false; }; "focusedItemIndex": { "alias": "focusedItemIndex"; "required": false; }; "focusInItemIndex": { "alias": "focusInItemIndex"; "required": false; }; "shouldSupportDragAndSelect": { "alias": "shouldSupportDragAndSelect"; "required": false; }; "isScrolling": { "alias": "isScrolling"; "required": false; }; "handleSubmenuClosed": { "alias": "handleSubmenuClosed"; "required": false; }; "handleSubmenuOpened": { "alias": "handleSubmenuOpened"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "changeEvent": "changeEvent"; "closeEvent": "closeEvent"; }, never, ["*"], true, never>;
 }
 /** The underlying custom element type for LuzmoMenu */
 export type LuzmoMenuElement = LuzmoMenuHostElement;

package/esm/components/menu.js

@@ -35,8 +35,8 @@ export class LuzmoMenu {
     handleSubmenuOpened;
     size;
     /** Announces that the `value` of the element has changed */
-    changeEvent = output({ alias: 'change' });
-    closeEvent = output({ alias: 'close' });
+    changeEvent = output();
+    closeEvent = output();
     constructor() {
         this.bindEvents();
         this.destroyRef.onDestroy(() => {
@@ -112,7 +112,6 @@ export class LuzmoMenu {
     }
     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;
@@ -124,13 +123,13 @@ export class LuzmoMenu {
                     : (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, 'close', (event) => {
             this.closeEvent.emit(event);
@@ -163,7 +162,7 @@ export class LuzmoMenu {
         return this.host.focus({ preventScroll });
     }
     static ɵfac = function LuzmoMenu_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoMenu)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoMenu, selectors: [["luzmo-menu"]], inputs: { label: "label", ignore: "ignore", variant: "variant", selects: "selects", value: "value", valueSeparator: "valueSeparator", selected: "selected", selectedItems: "selectedItems", menuSlot: "menuSlot", focusedItemIndex: "focusedItemIndex", focusInItemIndex: "focusInItemIndex", shouldSupportDragAndSelect: "shouldSupportDragAndSelect", isScrolling: "isScrolling", handleSubmenuClosed: "handleSubmenuClosed", handleSubmenuOpened: "handleSubmenuOpened", size: "size" }, outputs: { changeEvent: "change", closeEvent: "close" }, exportAs: ["luzmoMenu"], features: [i0.ɵɵProvidersFeature([
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoMenu, selectors: [["luzmo-menu"]], inputs: { label: "label", ignore: "ignore", variant: "variant", selects: "selects", value: "value", valueSeparator: "valueSeparator", selected: "selected", selectedItems: "selectedItems", menuSlot: "menuSlot", focusedItemIndex: "focusedItemIndex", focusInItemIndex: "focusInItemIndex", shouldSupportDragAndSelect: "shouldSupportDragAndSelect", isScrolling: "isScrolling", handleSubmenuClosed: "handleSubmenuClosed", handleSubmenuOpened: "handleSubmenuOpened", size: "size" }, outputs: { changeEvent: "changeEvent", closeEvent: "closeEvent" }, exportAs: ["luzmoMenu"], features: [i0.ɵɵProvidersFeature([
                 {
                     provide: NG_VALUE_ACCESSOR,
                     useExisting: forwardRef(() => LuzmoMenu),
@@ -238,5 +237,5 @@ export class LuzmoMenu {
         }], size: [{
             type: Input,
             args: [{ alias: 'size' }]
-        }], changeEvent: [{ type: i0.Output, args: ["change"] }], closeEvent: [{ type: i0.Output, args: ["close"] }] }); })();
+        }], changeEvent: [{ type: i0.Output, args: ["changeEvent"] }], closeEvent: [{ type: i0.Output, args: ["closeEvent"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoMenu, { className: "LuzmoMenu", filePath: "components/menu.ts", lineNumber: 26 }); })();

package/esm/components/multi-language-field.d.ts

@@ -53,7 +53,7 @@ export declare class LuzmoMultiLanguageField implements OnChanges, ControlValueA
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoMultiLanguageField, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoMultiLanguageField, "luzmo-multi-language-field", ["luzmoMultiLanguageField"], { "label": { "alias": "label"; "required": false; }; "allowedKeys": { "alias": "allowedKeys"; "required": false; }; "name": { "alias": "name"; "required": false; }; "i18nPlaceholder": { "alias": "i18nPlaceholder"; "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; }; "rows": { "alias": "rows"; "required": false; }; "quiet": { "alias": "quiet"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "required": { "alias": "required"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "language": { "alias": "language"; "required": false; }; "defaultLanguage": { "alias": "defaultLanguage"; "required": false; }; "value": { "alias": "value"; "required": false; }; "helpTextManager": { "alias": "helpTextManager"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "changeEvent": "change"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoMultiLanguageField, "luzmo-multi-language-field", ["luzmoMultiLanguageField"], { "label": { "alias": "label"; "required": false; }; "allowedKeys": { "alias": "allowedKeys"; "required": false; }; "name": { "alias": "name"; "required": false; }; "i18nPlaceholder": { "alias": "i18nPlaceholder"; "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; }; "rows": { "alias": "rows"; "required": false; }; "quiet": { "alias": "quiet"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "required": { "alias": "required"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "language": { "alias": "language"; "required": false; }; "defaultLanguage": { "alias": "defaultLanguage"; "required": false; }; "value": { "alias": "value"; "required": false; }; "helpTextManager": { "alias": "helpTextManager"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "changeEvent": "changeEvent"; }, never, ["*"], true, never>;
 }
 /** The underlying custom element type for LuzmoMultiLanguageField */
 export type LuzmoMultiLanguageFieldElement = LuzmoMultiLangFieldHostElement;

package/esm/components/multi-language-field.js

@@ -38,7 +38,7 @@ export class LuzmoMultiLanguageField {
     helpTextManager;
     size;
     /** An change of the i18n value happened by the user */
-    changeEvent = output({ alias: 'change' });
+    changeEvent = output();
     constructor() {
         this.bindEvents();
         this.destroyRef.onDestroy(() => {
@@ -129,7 +129,6 @@ export class LuzmoMultiLanguageField {
     }
     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;
@@ -141,13 +140,13 @@ export class LuzmoMultiLanguageField {
                     : (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, 'blur', () => {
             this.onTouched();
@@ -179,7 +178,7 @@ export class LuzmoMultiLanguageField {
         }
     }
     static ɵfac = function LuzmoMultiLanguageField_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoMultiLanguageField)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoMultiLanguageField, selectors: [["luzmo-multi-language-field"]], inputs: { label: "label", allowedKeys: "allowedKeys", name: "name", i18nPlaceholder: "i18nPlaceholder", type: "type", pattern: "pattern", grows: "grows", maxlength: "maxlength", minlength: "minlength", multiline: "multiline", rows: "rows", quiet: "quiet", disabled: "disabled", required: "required", readonly: "readonly", autocomplete: "autocomplete", language: "language", defaultLanguage: "defaultLanguage", value: "value", helpTextManager: "helpTextManager", size: "size" }, outputs: { changeEvent: "change" }, exportAs: ["luzmoMultiLanguageField"], features: [i0.ɵɵProvidersFeature([
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoMultiLanguageField, selectors: [["luzmo-multi-language-field"]], inputs: { label: "label", allowedKeys: "allowedKeys", name: "name", i18nPlaceholder: "i18nPlaceholder", type: "type", pattern: "pattern", grows: "grows", maxlength: "maxlength", minlength: "minlength", multiline: "multiline", rows: "rows", quiet: "quiet", disabled: "disabled", required: "required", readonly: "readonly", autocomplete: "autocomplete", language: "language", defaultLanguage: "defaultLanguage", value: "value", helpTextManager: "helpTextManager", size: "size" }, outputs: { changeEvent: "changeEvent" }, exportAs: ["luzmoMultiLanguageField"], features: [i0.ɵɵProvidersFeature([
                 {
                     provide: NG_VALUE_ACCESSOR,
                     useExisting: forwardRef(() => LuzmoMultiLanguageField),
@@ -269,5 +268,5 @@ export class LuzmoMultiLanguageField {
         }], size: [{
             type: Input,
             args: [{ alias: 'size' }]
-        }], changeEvent: [{ type: i0.Output, args: ["change"] }] }); })();
+        }], changeEvent: [{ type: i0.Output, args: ["changeEvent"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoMultiLanguageField, { className: "LuzmoMultiLanguageField", filePath: "components/multi-language-field.ts", lineNumber: 23 }); })();

package/esm/components/notice.d.ts

@@ -29,7 +29,7 @@ export declare class LuzmoNotice implements OnChanges {
     labels?: NoticeLabels;
     size?: ('xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl');
     /** Cancelable request to close the notice. Detail contains the `manual`, `automatic`, or `programmatic` reason. */
-    readonly luzmoNoticeCloseEvent: import("@angular/core").OutputEmitterRef<CustomEvent<NoticeCloseDetail>>;
+    readonly luzmoNoticeClose: import("@angular/core").OutputEmitterRef<CustomEvent<NoticeCloseDetail>>;
     constructor();
     ngOnChanges(changes: SimpleChanges): void;
     /**
@@ -43,7 +43,7 @@ export declare class LuzmoNotice implements OnChanges {
     /** Requests closure and emits the cancelable `luzmo-notice-close` event. */
     close(reason?: 'manual' | 'automatic' | 'programmatic'): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoNotice, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoNotice, "luzmo-notice", ["luzmoNotice"], { "open": { "alias": "open"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "hideIcon": { "alias": "hideIcon"; "required": false; }; "closeable": { "alias": "closeable"; "required": false; }; "heading": { "alias": "heading"; "required": false; }; "description": { "alias": "description"; "required": false; }; "duration": { "alias": "duration"; "required": false; }; "labels": { "alias": "labels"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "luzmoNoticeCloseEvent": "luzmo-notice-close"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoNotice, "luzmo-notice", ["luzmoNotice"], { "open": { "alias": "open"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "hideIcon": { "alias": "hideIcon"; "required": false; }; "closeable": { "alias": "closeable"; "required": false; }; "heading": { "alias": "heading"; "required": false; }; "description": { "alias": "description"; "required": false; }; "duration": { "alias": "duration"; "required": false; }; "labels": { "alias": "labels"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "luzmoNoticeClose": "luzmo-notice-close"; }, never, ["*"], true, never>;
 }
 /** The underlying custom element type for LuzmoNotice */
 export type LuzmoNoticeElement = LuzmoNoticeHostElement;

package/esm/components/notice.js

@@ -37,7 +37,7 @@ export class LuzmoNotice {
     labels;
     size;
     /** Cancelable request to close the notice. Detail contains the `manual`, `automatic`, or `programmatic` reason. */
-    luzmoNoticeCloseEvent = output({ alias: 'luzmo-notice-close' });
+    luzmoNoticeClose = output({ alias: 'luzmo-notice-close' });
     constructor() {
         this.bindEvents();
         this.destroyRef.onDestroy(() => {
@@ -92,7 +92,7 @@ export class LuzmoNotice {
     }
     bindEvents() {
         this.listenerCleanup.push(this.renderer.listen(this.host, 'luzmo-notice-close', (event) => {
-            this.luzmoNoticeCloseEvent.emit(event);
+            this.luzmoNoticeClose.emit(event);
         }));
     }
     /** Requests closure and emits the cancelable `luzmo-notice-close` event. */
@@ -100,7 +100,7 @@ export class LuzmoNotice {
         return this.host.close(reason);
     }
     static ɵfac = function LuzmoNotice_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoNotice)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoNotice, selectors: [["luzmo-notice"]], inputs: { open: "open", variant: "variant", hideIcon: "hideIcon", closeable: "closeable", heading: "heading", description: "description", duration: "duration", labels: "labels", size: "size" }, outputs: { luzmoNoticeCloseEvent: "luzmo-notice-close" }, exportAs: ["luzmoNotice"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoNotice_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoNotice, selectors: [["luzmo-notice"]], inputs: { open: "open", variant: "variant", hideIcon: "hideIcon", closeable: "closeable", heading: "heading", description: "description", duration: "duration", labels: "labels", size: "size" }, outputs: { luzmoNoticeClose: "luzmo-notice-close" }, exportAs: ["luzmoNotice"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoNotice_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
         } }, encapsulation: 2 });
@@ -141,5 +141,5 @@ export class LuzmoNotice {
         }], size: [{
             type: Input,
             args: [{ alias: 'size' }]
-        }], luzmoNoticeCloseEvent: [{ type: i0.Output, args: ["luzmo-notice-close"] }] }); })();
+        }], luzmoNoticeClose: [{ type: i0.Output, args: ["luzmo-notice-close"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoNotice, { className: "LuzmoNotice", filePath: "components/notice.ts", lineNumber: 20 }); })();

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

@@ -105,7 +105,7 @@ export declare class LuzmoNumberField implements OnChanges, ControlValueAccessor
     checkValidity(): boolean;
     focus(options?: FocusOptions): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoNumberField, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoNumberField, "luzmo-number-field", ["luzmoNumberField"], { "formatOptions": { "alias": "formatOptions"; "required": false; }; "hideStepper": { "alias": "hideStepper"; "required": false; }; "grows": { "alias": "grows"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; "keyboardFocused": { "alias": "keyboardFocused"; "required": false; }; "max": { "alias": "max"; "required": false; }; "min": { "alias": "min"; "required": false; }; "step": { "alias": "step"; "required": false; }; "stepModifier": { "alias": "stepModifier"; "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; }; "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<LuzmoNumberField, "luzmo-number-field", ["luzmoNumberField"], { "formatOptions": { "alias": "formatOptions"; "required": false; }; "hideStepper": { "alias": "hideStepper"; "required": false; }; "grows": { "alias": "grows"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; "keyboardFocused": { "alias": "keyboardFocused"; "required": false; }; "max": { "alias": "max"; "required": false; }; "min": { "alias": "min"; "required": false; }; "step": { "alias": "step"; "required": false; }; "stepModifier": { "alias": "stepModifier"; "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; }; "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 LuzmoNumberField */
 export type LuzmoNumberFieldElement = LuzmoNumberFieldHostElement;

package/esm/components/number-field.js

@@ -81,13 +81,13 @@ export class LuzmoNumberField {
     /** 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(() => {
@@ -211,7 +211,6 @@ export class LuzmoNumberField {
     }
     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;
@@ -223,13 +222,13 @@ export class LuzmoNumberField {
                     : (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);
@@ -284,7 +283,7 @@ export class LuzmoNumberField {
         return this.host.focus(options);
     }
     static ɵfac = function LuzmoNumberField_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoNumberField)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoNumberField, selectors: [["luzmo-number-field"]], inputs: { formatOptions: "formatOptions", hideStepper: "hideStepper", grows: "grows", indeterminate: "indeterminate", keyboardFocused: "keyboardFocused", max: "max", min: "min", step: "step", stepModifier: "stepModifier", value: "value", helpTextManager: "helpTextManager", size: "size", allowedKeys: "allowedKeys", invalid: "invalid", label: "label", name: "name", placeholder: "placeholder", type: "type", pattern: "pattern", 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: ["luzmoNumberField"], features: [i0.ɵɵProvidersFeature([
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoNumberField, selectors: [["luzmo-number-field"]], inputs: { formatOptions: "formatOptions", hideStepper: "hideStepper", grows: "grows", indeterminate: "indeterminate", keyboardFocused: "keyboardFocused", max: "max", min: "min", step: "step", stepModifier: "stepModifier", value: "value", helpTextManager: "helpTextManager", size: "size", allowedKeys: "allowedKeys", invalid: "invalid", label: "label", name: "name", placeholder: "placeholder", type: "type", pattern: "pattern", 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: ["luzmoNumberField"], features: [i0.ɵɵProvidersFeature([
                 {
                     provide: NG_VALUE_ACCESSOR,
                     useExisting: forwardRef(() => LuzmoNumberField),
@@ -407,5 +406,5 @@ export class LuzmoNumberField {
         }], 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(LuzmoNumberField, { className: "LuzmoNumberField", filePath: "components/number-field.ts", lineNumber: 26 }); })();

package/esm/components/option.d.ts

@@ -60,7 +60,7 @@ export declare class LuzmoOption implements OnChanges {
     private bindEvents;
     focus(options?: FocusOptions): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoOption, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoOption, "luzmo-option", ["luzmoOption"], { "active": { "alias": "active"; "required": false; }; "focused": { "alias": "focused"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "emphasized": { "alias": "emphasized"; "required": false; }; "expandable": { "alias": "expandable"; "required": false; }; "expanded": { "alias": "expanded"; "required": false; }; "childOption": { "alias": "childOption"; "required": false; }; "hasSelectedChild": { "alias": "hasSelectedChild"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "value": { "alias": "value"; "required": false; }; "contentSlot": { "alias": "contentSlot"; "required": false; }; "iconSlot": { "alias": "iconSlot"; "required": false; }; "noWrap": { "alias": "noWrap"; "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; }; "managePresenceObservedSlot": { "alias": "managePresenceObservedSlot"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "keydownEvent": "keydown"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoOption, "luzmo-option", ["luzmoOption"], { "active": { "alias": "active"; "required": false; }; "focused": { "alias": "focused"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "emphasized": { "alias": "emphasized"; "required": false; }; "expandable": { "alias": "expandable"; "required": false; }; "expanded": { "alias": "expanded"; "required": false; }; "childOption": { "alias": "childOption"; "required": false; }; "hasSelectedChild": { "alias": "hasSelectedChild"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "value": { "alias": "value"; "required": false; }; "contentSlot": { "alias": "contentSlot"; "required": false; }; "iconSlot": { "alias": "iconSlot"; "required": false; }; "noWrap": { "alias": "noWrap"; "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; }; "managePresenceObservedSlot": { "alias": "managePresenceObservedSlot"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "keydownEvent": "keydownEvent"; }, never, ["*"], true, never>;
 }
 /** The underlying custom element type for LuzmoOption */
 export type LuzmoOptionElement = LuzmoOptionHostElement;

package/esm/components/option.js

@@ -56,7 +56,7 @@ export class LuzmoOption {
     /** 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(() => {
@@ -157,7 +157,7 @@ export class LuzmoOption {
         return this.host.focus(options);
     }
     static ɵfac = function LuzmoOption_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoOption)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoOption, selectors: [["luzmo-option"]], inputs: { active: "active", focused: "focused", selected: "selected", emphasized: "emphasized", expandable: "expandable", expanded: "expanded", childOption: "childOption", hasSelectedChild: "hasSelectedChild", variant: "variant", value: "value", contentSlot: "contentSlot", iconSlot: "iconSlot", noWrap: "noWrap", download: "download", label: "label", href: "href", target: "target", referrerpolicy: "referrerpolicy", rel: "rel", managePresenceObservedSlot: "managePresenceObservedSlot", disabled: "disabled", tabIndex: "tabIndex" }, outputs: { keydownEvent: "keydown" }, exportAs: ["luzmoOption"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoOption_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoOption, selectors: [["luzmo-option"]], inputs: { active: "active", focused: "focused", selected: "selected", emphasized: "emphasized", expandable: "expandable", expanded: "expanded", childOption: "childOption", hasSelectedChild: "hasSelectedChild", variant: "variant", value: "value", contentSlot: "contentSlot", iconSlot: "iconSlot", noWrap: "noWrap", download: "download", label: "label", href: "href", target: "target", referrerpolicy: "referrerpolicy", rel: "rel", managePresenceObservedSlot: "managePresenceObservedSlot", disabled: "disabled", tabIndex: "tabIndex" }, outputs: { keydownEvent: "keydownEvent" }, exportAs: ["luzmoOption"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoOption_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
         } }, encapsulation: 2 });
@@ -237,5 +237,5 @@ export class LuzmoOption {
         }], tabIndex: [{
             type: Input,
             args: [{ alias: 'tabIndex' }]
-        }], keydownEvent: [{ type: i0.Output, args: ["keydown"] }] }); })();
+        }], keydownEvent: [{ type: i0.Output, args: ["keydownEvent"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoOption, { className: "LuzmoOption", filePath: "components/option.ts", lineNumber: 21 }); })();

package/esm/components/options.d.ts

@@ -17,7 +17,7 @@ export declare class LuzmoOptions implements OnChanges, ControlValueAccessor {
     selects?: 'single' | 'multiple';
     emphasized?: boolean;
     pending?: boolean;
-    /** options - The options to be listed in the options menu OptionValue is an object with the following properties: - label: string - value: string | number | null - disabled: boolean - divider: boolean - icon: IconDefinition - imgSrc: string - shortcut: string (leaf options only) */
+    /** options - The options to be listed in the options menu OptionValue is an object with the following properties: - label: string - value: string | number | null - disabled: boolean - divider: boolean - header: boolean - icon: IconDefinition - imgSrc: string - shortcut: string (leaf options only) */
     options?: OptionValue[];
     noWrap?: boolean;
     /** value - The value of the selected options */
@@ -26,13 +26,13 @@ export declare class LuzmoOptions implements OnChanges, ControlValueAccessor {
     optionIconRenderer?: OptionIconRenderer;
     size?: ('xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl');
     /** Announces that the user has scrolled within the options menu. Only fires when the options menu is virtualized. */
-    readonly luzmoScrolledEvent: import("@angular/core").OutputEmitterRef<CustomEvent<unknown>>;
+    readonly luzmoScrolled: import("@angular/core").OutputEmitterRef<CustomEvent<unknown>>;
     /** Announces that the `value` of the element has changed */
     readonly changeEvent: import("@angular/core").OutputEmitterRef<CustomEvent<unknown>>;
     /** Announces that the `arrowUp` key has been pressed and the top of the options menu has been exceeded */
-    readonly luzmoExceededTopEvent: import("@angular/core").OutputEmitterRef<CustomEvent<unknown>>;
+    readonly luzmoExceededTop: import("@angular/core").OutputEmitterRef<CustomEvent<unknown>>;
     /** Announces that the `arrowDown` key has been pressed and the bottom of the options menu has been exceeded */
-    readonly luzmoExceededBottomEvent: import("@angular/core").OutputEmitterRef<CustomEvent<unknown>>;
+    readonly luzmoExceededBottom: import("@angular/core").OutputEmitterRef<CustomEvent<unknown>>;
     constructor();
     ngOnChanges(changes: SimpleChanges): void;
     /**
@@ -54,7 +54,7 @@ export declare class LuzmoOptions implements OnChanges, ControlValueAccessor {
     focus({ preventScroll }: FocusOptions): void;
     scrollToTop(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoOptions, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoOptions, "luzmo-options", ["luzmoOptions"], { "label": { "alias": "label"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "selects": { "alias": "selects"; "required": false; }; "emphasized": { "alias": "emphasized"; "required": false; }; "pending": { "alias": "pending"; "required": false; }; "options": { "alias": "options"; "required": false; }; "noWrap": { "alias": "noWrap"; "required": false; }; "value": { "alias": "value"; "required": false; }; "optionIconRenderer": { "alias": "optionIconRenderer"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "luzmoScrolledEvent": "luzmo-scrolled"; "changeEvent": "change"; "luzmoExceededTopEvent": "luzmo-exceeded-top"; "luzmoExceededBottomEvent": "luzmo-exceeded-bottom"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoOptions, "luzmo-options", ["luzmoOptions"], { "label": { "alias": "label"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "selects": { "alias": "selects"; "required": false; }; "emphasized": { "alias": "emphasized"; "required": false; }; "pending": { "alias": "pending"; "required": false; }; "options": { "alias": "options"; "required": false; }; "noWrap": { "alias": "noWrap"; "required": false; }; "value": { "alias": "value"; "required": false; }; "optionIconRenderer": { "alias": "optionIconRenderer"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "luzmoScrolled": "luzmo-scrolled"; "changeEvent": "changeEvent"; "luzmoExceededTop": "luzmo-exceeded-top"; "luzmoExceededBottom": "luzmo-exceeded-bottom"; }, never, ["*"], true, never>;
 }
 /** The underlying custom element type for LuzmoOptions */
 export type LuzmoOptionsElement = LuzmoOptionsHostElement;