@luzmo/ngx-lucero 1.0.1-alpha.78

package/esm/components/chat-message.d.ts

@@ -0,0 +1,50 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import '@luzmo/lucero/chat-message';
+import type { LuzmoChatMessage as LuzmoChatMessageHostElement, ChatMessageActions, ChatMessageAvatarPlacement, ChatMessageMeta, ChatMessagePosition, ChatMessageTreatment, ChatMessageVariant } from '@luzmo/lucero/chat-message';
+import * as i0 from "@angular/core";
+export type { ChatMessageActions, ChatMessageAvatarPlacement, ChatMessageMeta, ChatMessagePosition, ChatMessageTreatment, ChatMessageVariant } from '@luzmo/lucero/chat-message';
+export declare class LuzmoChatMessage implements OnChanges {
+    private readonly elementRef;
+    private readonly renderer;
+    private readonly destroyRef;
+    private readonly host;
+    private readonly listenerCleanup;
+    /** The underlying custom element instance. Use to call imperative methods. */
+    get nativeElement(): LuzmoChatMessageHostElement;
+    /** The horizontal position of the message. */
+    position?: ChatMessagePosition;
+    /** The semantic variant of the message. - `default`: Standard neutral message - `primary`: Primary color theme - `secondary`: Secondary color theme */
+    variant?: ChatMessageVariant;
+    /** The visual treatment of the message. - `fill`: Full background color (default) - `outline`: Border only with transparent background */
+    treatment?: ChatMessageTreatment;
+    /** Whether the message should have reduced visual emphasis. When quiet is true, removes border, background, and uses normal font color. */
+    quiet?: boolean;
+    /** The name of the user who sent the message. */
+    name?: string;
+    /** The datetime when the message was sent (ISO 8601 string). */
+    datetime?: string;
+    /** Intl.DateTimeFormatOptions object for formatting the datetime. */
+    datetimeFormatOptions?: unknown;
+    /** The language to use for formatting the datetime. */
+    datetimeLanguage?: string;
+    /** Controls whether name and datetime render inside the message header or outside. */
+    meta?: ChatMessageMeta;
+    /** Controls whether the actions slot renders inside or outside the message. */
+    actionsPosition?: ChatMessageActions;
+    /** The vertical placement of the avatar relative to the message. */
+    avatarPlacement?: ChatMessageAvatarPlacement;
+    constructor();
+    ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * Forward a wrapper @Input to the underlying host element via Renderer2 so
+     * the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
+     * Unlike a "skip undefined" guard, this lets consumers reset values back to
+     * undefined / null by clearing their bindings.
+     */
+    private setHostProperty;
+    private bindEvents;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoChatMessage, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoChatMessage, "luzmo-chat-message", ["luzmoChatMessage"], { "position": { "alias": "position"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "treatment": { "alias": "treatment"; "required": false; }; "quiet": { "alias": "quiet"; "required": false; }; "name": { "alias": "name"; "required": false; }; "datetime": { "alias": "datetime"; "required": false; }; "datetimeFormatOptions": { "alias": "datetime-format-options"; "required": false; }; "datetimeLanguage": { "alias": "datetime-language"; "required": false; }; "meta": { "alias": "meta"; "required": false; }; "actionsPosition": { "alias": "actions"; "required": false; }; "avatarPlacement": { "alias": "avatar-placement"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+/** The underlying custom element type for LuzmoChatMessage */
+export type LuzmoChatMessageElement = LuzmoChatMessageHostElement;

package/esm/components/chat-message.js

@@ -0,0 +1,156 @@
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, Renderer2 } from '@angular/core';
+import '@luzmo/lucero/chat-message';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+/**
+ * A chat message component for displaying conversation messages.
+ *
+ * @slot (default) - Default slot for message content
+ * @slot message - Alternative slot for message content (may include custom elements)
+ * @slot avatar - Slot for avatar element (use luzmo-avatar)
+ * @slot actions - Slot for message actions
+ * @slot extra-actions - Slot for extra actions that appear on hover/click/longclick (absolute positioned)
+ */
+export class LuzmoChatMessage {
+    elementRef = inject(ElementRef);
+    renderer = inject(Renderer2);
+    destroyRef = inject(DestroyRef);
+    host = this.elementRef.nativeElement;
+    listenerCleanup = [];
+    /** The underlying custom element instance. Use to call imperative methods. */
+    get nativeElement() {
+        return this.host;
+    }
+    /** The horizontal position of the message. */
+    position;
+    /** The semantic variant of the message. - `default`: Standard neutral message - `primary`: Primary color theme - `secondary`: Secondary color theme */
+    variant;
+    /** The visual treatment of the message. - `fill`: Full background color (default) - `outline`: Border only with transparent background */
+    treatment;
+    /** Whether the message should have reduced visual emphasis. When quiet is true, removes border, background, and uses normal font color. */
+    quiet;
+    /** The name of the user who sent the message. */
+    name;
+    /** The datetime when the message was sent (ISO 8601 string). */
+    datetime;
+    /** Intl.DateTimeFormatOptions object for formatting the datetime. */
+    datetimeFormatOptions;
+    /** The language to use for formatting the datetime. */
+    datetimeLanguage;
+    /** Controls whether name and datetime render inside the message header or outside. */
+    meta;
+    /** Controls whether the actions slot renders inside or outside the message. */
+    actionsPosition;
+    /** The vertical placement of the avatar relative to the message. */
+    avatarPlacement;
+    constructor() {
+        this.bindEvents();
+        this.destroyRef.onDestroy(() => {
+            for (const cleanup of this.listenerCleanup) {
+                cleanup();
+            }
+        });
+    }
+    ngOnChanges(changes) {
+        for (const key of Object.keys(changes)) {
+            switch (key) {
+                case 'position':
+                    this.setHostProperty('position', changes['position'].currentValue);
+                    break;
+                case 'variant':
+                    this.setHostProperty('variant', changes['variant'].currentValue);
+                    break;
+                case 'treatment':
+                    this.setHostProperty('treatment', changes['treatment'].currentValue);
+                    break;
+                case 'quiet':
+                    this.setHostProperty('quiet', changes['quiet'].currentValue);
+                    break;
+                case 'name':
+                    this.setHostProperty('name', changes['name'].currentValue);
+                    break;
+                case 'datetime':
+                    this.setHostProperty('datetime', changes['datetime'].currentValue);
+                    break;
+                case 'datetimeFormatOptions':
+                    this.setHostProperty('datetimeFormatOptions', changes['datetimeFormatOptions'].currentValue);
+                    break;
+                case 'datetimeLanguage':
+                    this.setHostProperty('datetimeLanguage', changes['datetimeLanguage'].currentValue);
+                    break;
+                case 'meta':
+                    this.setHostProperty('meta', changes['meta'].currentValue);
+                    break;
+                case 'actionsPosition':
+                    this.setHostProperty('actionsPosition', changes['actionsPosition'].currentValue);
+                    break;
+                case 'avatarPlacement':
+                    this.setHostProperty('avatarPlacement', changes['avatarPlacement'].currentValue);
+                    break;
+                default:
+                    break;
+            }
+        }
+    }
+    /**
+     * Forward a wrapper @Input to the underlying host element via Renderer2 so
+     * the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
+     * Unlike a "skip undefined" guard, this lets consumers reset values back to
+     * undefined / null by clearing their bindings.
+     */
+    setHostProperty(key, value) {
+        this.renderer.setProperty(this.host, key, value);
+    }
+    bindEvents() {
+        // No custom events for this wrapper.
+    }
+    static ɵfac = function LuzmoChatMessage_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoChatMessage)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoChatMessage, selectors: [["luzmo-chat-message"]], inputs: { position: "position", variant: "variant", treatment: "treatment", quiet: "quiet", name: "name", datetime: "datetime", datetimeFormatOptions: [0, "datetime-format-options", "datetimeFormatOptions"], datetimeLanguage: [0, "datetime-language", "datetimeLanguage"], meta: "meta", actionsPosition: [0, "actions", "actionsPosition"], avatarPlacement: [0, "avatar-placement", "avatarPlacement"] }, exportAs: ["luzmoChatMessage"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoChatMessage_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0);
+        } }, encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoChatMessage, [{
+        type: Component,
+        args: [{
+                selector: 'luzmo-chat-message',
+                exportAs: 'luzmoChatMessage',
+                standalone: true,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content />'
+            }]
+    }], () => [], { position: [{
+            type: Input,
+            args: [{ alias: 'position' }]
+        }], variant: [{
+            type: Input,
+            args: [{ alias: 'variant' }]
+        }], treatment: [{
+            type: Input,
+            args: [{ alias: 'treatment' }]
+        }], quiet: [{
+            type: Input,
+            args: [{ alias: 'quiet' }]
+        }], name: [{
+            type: Input,
+            args: [{ alias: 'name' }]
+        }], datetime: [{
+            type: Input,
+            args: [{ alias: 'datetime' }]
+        }], datetimeFormatOptions: [{
+            type: Input,
+            args: [{ alias: 'datetime-format-options' }]
+        }], datetimeLanguage: [{
+            type: Input,
+            args: [{ alias: 'datetime-language' }]
+        }], meta: [{
+            type: Input,
+            args: [{ alias: 'meta' }]
+        }], actionsPosition: [{
+            type: Input,
+            args: [{ alias: 'actions' }]
+        }], avatarPlacement: [{
+            type: Input,
+            args: [{ alias: 'avatar-placement' }]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoChatMessage, { className: "LuzmoChatMessage", filePath: "components/chat-message.ts", lineNumber: 22 }); })();

package/esm/components/checkbox.d.ts

@@ -0,0 +1,55 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import '@luzmo/lucero/checkbox';
+import type { LuzmoCheckbox as LuzmoCheckboxHostElement } from '@luzmo/lucero/checkbox';
+import * as i0 from "@angular/core";
+export declare class LuzmoCheckbox implements OnChanges, ControlValueAccessor {
+    private readonly elementRef;
+    private readonly renderer;
+    private readonly destroyRef;
+    private readonly host;
+    private readonly listenerCleanup;
+    /** The underlying custom element instance. Use to call imperative methods. */
+    get nativeElement(): LuzmoCheckboxHostElement;
+    /** Disable this control. It will not receive focus or events */
+    disabled?: boolean;
+    /** Set the checkbox to an indeterminate state */
+    indeterminate?: boolean;
+    /** When this control is rendered, focus it automatically */
+    autofocus?: boolean;
+    /** Set the checkbox to an invalid state */
+    invalid?: boolean;
+    /** Make the checkbox emphasized */
+    emphasized?: boolean;
+    tabIndex?: number;
+    /** The `checked` attribute reflects the state of the element */
+    checked?: boolean;
+    /** The name attribute of the element */
+    name?: string;
+    /** Whether the element is read-only */
+    readonly?: boolean;
+    /** Announces a change in the `checked` property of a Checkbox */
+    readonly changeEvent: import("@angular/core").OutputEmitterRef<CustomEvent<unknown>>;
+    constructor();
+    ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * Forward a wrapper @Input to the underlying host element via Renderer2 so
+     * the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
+     * Unlike a "skip undefined" guard, this lets consumers reset values back to
+     * undefined / null by clearing their bindings.
+     */
+    private setHostProperty;
+    private bindEvents;
+    private onChange;
+    private onTouched;
+    private isWritingValue;
+    private lastCvaValue;
+    writeValue(value: boolean): void;
+    registerOnChange(fn: (value: boolean) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoCheckbox, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoCheckbox, "luzmo-checkbox", ["luzmoCheckbox"], { "disabled": { "alias": "disabled"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "emphasized": { "alias": "emphasized"; "required": false; }; "tabIndex": { "alias": "tab-index"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "name": { "alias": "name"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; }, { "changeEvent": "change"; }, never, ["*"], true, never>;
+}
+/** The underlying custom element type for LuzmoCheckbox */
+export type LuzmoCheckboxElement = LuzmoCheckboxHostElement;

package/esm/components/checkbox.js

@@ -0,0 +1,196 @@
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, forwardRef, inject, Input, output, Renderer2 } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import '@luzmo/lucero/checkbox';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+/**
+ * Angular wrapper component for <luzmo-checkbox>
+ *
+ * @slot (default) - content to display as the label for the Checkbox
+ */
+export class LuzmoCheckbox {
+    elementRef = inject(ElementRef);
+    renderer = inject(Renderer2);
+    destroyRef = inject(DestroyRef);
+    host = this.elementRef.nativeElement;
+    listenerCleanup = [];
+    /** The underlying custom element instance. Use to call imperative methods. */
+    get nativeElement() {
+        return this.host;
+    }
+    /** Disable this control. It will not receive focus or events */
+    disabled;
+    /** Set the checkbox to an indeterminate state */
+    indeterminate;
+    /** When this control is rendered, focus it automatically */
+    autofocus;
+    /** Set the checkbox to an invalid state */
+    invalid;
+    /** Make the checkbox emphasized */
+    emphasized;
+    tabIndex;
+    /** The `checked` attribute reflects the state of the element */
+    checked;
+    /** The name attribute of the element */
+    name;
+    /** Whether the element is read-only */
+    readonly;
+    /** Announces a change in the `checked` property of a Checkbox */
+    changeEvent = output({ alias: 'change' });
+    constructor() {
+        this.bindEvents();
+        this.destroyRef.onDestroy(() => {
+            for (const cleanup of this.listenerCleanup) {
+                cleanup();
+            }
+        });
+    }
+    ngOnChanges(changes) {
+        for (const key of Object.keys(changes)) {
+            switch (key) {
+                case 'disabled':
+                    this.setHostProperty('disabled', changes['disabled'].currentValue);
+                    break;
+                case 'indeterminate':
+                    this.setHostProperty('indeterminate', changes['indeterminate'].currentValue);
+                    break;
+                case 'autofocus':
+                    this.setHostProperty('autofocus', changes['autofocus'].currentValue);
+                    break;
+                case 'invalid':
+                    this.setHostProperty('invalid', changes['invalid'].currentValue);
+                    break;
+                case 'emphasized':
+                    this.setHostProperty('emphasized', changes['emphasized'].currentValue);
+                    break;
+                case 'tabIndex':
+                    this.setHostProperty('tabIndex', changes['tabIndex'].currentValue);
+                    break;
+                case 'checked':
+                    this.setHostProperty('checked', changes['checked'].currentValue);
+                    break;
+                case 'name':
+                    this.setHostProperty('name', changes['name'].currentValue);
+                    break;
+                case 'readonly':
+                    this.setHostProperty('readonly', changes['readonly'].currentValue);
+                    break;
+                default:
+                    break;
+            }
+        }
+    }
+    /**
+     * Forward a wrapper @Input to the underlying host element via Renderer2 so
+     * the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
+     * Unlike a "skip undefined" guard, this lets consumers reset values back to
+     * undefined / null by clearing their bindings.
+     */
+    setHostProperty(key, value) {
+        this.renderer.setProperty(this.host, key, value);
+    }
+    bindEvents() {
+        this.listenerCleanup.push(this.renderer.listen(this.host, 'change', (event) => {
+            this.changeEvent.emit(event);
+            if (!this.isWritingValue) {
+                const eventWithDetail = event;
+                const eventTarget = event.target;
+                const detail = 'detail' in eventWithDetail ? eventWithDetail.detail : undefined;
+                const hostRecord = this.host;
+                const nextValue = (detail
+                    ?? eventTarget?.['checked']
+                    ?? hostRecord['checked']);
+                if (Object.is(this.lastCvaValue, nextValue)) {
+                    return;
+                }
+                this.lastCvaValue = nextValue;
+                this.setHostProperty('checked', nextValue);
+                this.onChange(nextValue);
+            }
+        }));
+        this.listenerCleanup.push(this.renderer.listen(this.host, 'blur', () => {
+            this.onTouched();
+        }));
+    }
+    onChange = () => { };
+    onTouched = () => { };
+    isWritingValue = false;
+    lastCvaValue;
+    writeValue(value) {
+        this.isWritingValue = true;
+        this.lastCvaValue = value;
+        this.setHostProperty('checked', value);
+        this.isWritingValue = false;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.setHostProperty('disabled', isDisabled);
+        if (isDisabled) {
+            this.renderer.setAttribute(this.host, 'disabled', '');
+        }
+        else {
+            this.renderer.removeAttribute(this.host, 'disabled');
+        }
+    }
+    static ɵfac = function LuzmoCheckbox_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoCheckbox)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoCheckbox, selectors: [["luzmo-checkbox"]], inputs: { disabled: "disabled", indeterminate: "indeterminate", autofocus: "autofocus", invalid: "invalid", emphasized: "emphasized", tabIndex: [0, "tab-index", "tabIndex"], checked: "checked", name: "name", readonly: "readonly" }, outputs: { changeEvent: "change" }, exportAs: ["luzmoCheckbox"], features: [i0.ɵɵProvidersFeature([
+                {
+                    provide: NG_VALUE_ACCESSOR,
+                    useExisting: forwardRef(() => LuzmoCheckbox),
+                    multi: true
+                }
+            ]), i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoCheckbox_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0);
+        } }, encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoCheckbox, [{
+        type: Component,
+        args: [{
+                selector: 'luzmo-checkbox',
+                exportAs: 'luzmoCheckbox',
+                standalone: true,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content />',
+                providers: [
+                    {
+                        provide: NG_VALUE_ACCESSOR,
+                        useExisting: forwardRef(() => LuzmoCheckbox),
+                        multi: true
+                    }
+                ]
+            }]
+    }], () => [], { disabled: [{
+            type: Input,
+            args: [{ alias: 'disabled' }]
+        }], indeterminate: [{
+            type: Input,
+            args: [{ alias: 'indeterminate' }]
+        }], autofocus: [{
+            type: Input,
+            args: [{ alias: 'autofocus' }]
+        }], invalid: [{
+            type: Input,
+            args: [{ alias: 'invalid' }]
+        }], emphasized: [{
+            type: Input,
+            args: [{ alias: 'emphasized' }]
+        }], tabIndex: [{
+            type: Input,
+            args: [{ alias: 'tab-index' }]
+        }], checked: [{
+            type: Input,
+            args: [{ alias: 'checked' }]
+        }], name: [{
+            type: Input,
+            args: [{ alias: 'name' }]
+        }], readonly: [{
+            type: Input,
+            args: [{ alias: 'readonly' }]
+        }], changeEvent: [{ type: i0.Output, args: ["change"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoCheckbox, { className: "LuzmoCheckbox", filePath: "components/checkbox.ts", lineNumber: 25 }); })();

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

@@ -0,0 +1,32 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import '@luzmo/lucero/button';
+import type { LuzmoClearButton as LuzmoClearButtonHostElement } from '@luzmo/lucero/button';
+import * as i0 from "@angular/core";
+export declare class LuzmoClearButton implements OnChanges {
+    private readonly elementRef;
+    private readonly renderer;
+    private readonly destroyRef;
+    private readonly host;
+    private readonly listenerCleanup;
+    /** The underlying custom element instance. Use to call imperative methods. */
+    get nativeElement(): LuzmoClearButtonHostElement;
+    /** The visual variant to apply to this button. */
+    variant?: 'overBackground' | '';
+    active?: boolean;
+    /** The default behavior of the button. Possible values are: `button` (default), `submit`, and `reset`. */
+    type?: 'button' | 'submit' | 'reset';
+    constructor();
+    ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * Forward a wrapper @Input to the underlying host element via Renderer2 so
+     * the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
+     * Unlike a "skip undefined" guard, this lets consumers reset values back to
+     * undefined / null by clearing their bindings.
+     */
+    private setHostProperty;
+    private bindEvents;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoClearButton, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoClearButton, "luzmo-clear-button", ["luzmoClearButton"], { "variant": { "alias": "variant"; "required": false; }; "active": { "alias": "active"; "required": false; }; "type": { "alias": "type"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+/** The underlying custom element type for LuzmoClearButton */
+export type LuzmoClearButtonElement = LuzmoClearButtonHostElement;

package/esm/components/clear-button.js

@@ -0,0 +1,88 @@
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, Renderer2 } from '@angular/core';
+import '@luzmo/lucero/button';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+/**
+ * Angular wrapper component for <luzmo-clear-button>
+ *
+ * @slot (default) - text label of the Clear Button
+ * @slot icon - The icon to use for Clear Button
+ */
+export class LuzmoClearButton {
+    elementRef = inject(ElementRef);
+    renderer = inject(Renderer2);
+    destroyRef = inject(DestroyRef);
+    host = this.elementRef.nativeElement;
+    listenerCleanup = [];
+    /** The underlying custom element instance. Use to call imperative methods. */
+    get nativeElement() {
+        return this.host;
+    }
+    /** The visual variant to apply to this button. */
+    variant;
+    active;
+    /** The default behavior of the button. Possible values are: `button` (default), `submit`, and `reset`. */
+    type;
+    constructor() {
+        this.bindEvents();
+        this.destroyRef.onDestroy(() => {
+            for (const cleanup of this.listenerCleanup) {
+                cleanup();
+            }
+        });
+    }
+    ngOnChanges(changes) {
+        for (const key of Object.keys(changes)) {
+            switch (key) {
+                case 'variant':
+                    this.setHostProperty('variant', changes['variant'].currentValue);
+                    break;
+                case 'active':
+                    this.setHostProperty('active', changes['active'].currentValue);
+                    break;
+                case 'type':
+                    this.setHostProperty('type', changes['type'].currentValue);
+                    break;
+                default:
+                    break;
+            }
+        }
+    }
+    /**
+     * Forward a wrapper @Input to the underlying host element via Renderer2 so
+     * the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
+     * Unlike a "skip undefined" guard, this lets consumers reset values back to
+     * undefined / null by clearing their bindings.
+     */
+    setHostProperty(key, value) {
+        this.renderer.setProperty(this.host, key, value);
+    }
+    bindEvents() {
+        // No custom events for this wrapper.
+    }
+    static ɵfac = function LuzmoClearButton_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoClearButton)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoClearButton, selectors: [["luzmo-clear-button"]], inputs: { variant: "variant", active: "active", type: "type" }, exportAs: ["luzmoClearButton"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoClearButton_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0);
+        } }, encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoClearButton, [{
+        type: Component,
+        args: [{
+                selector: 'luzmo-clear-button',
+                exportAs: 'luzmoClearButton',
+                standalone: true,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content />'
+            }]
+    }], () => [], { variant: [{
+            type: Input,
+            args: [{ alias: 'variant' }]
+        }], active: [{
+            type: Input,
+            args: [{ alias: 'active' }]
+        }], type: [{
+            type: Input,
+            args: [{ alias: 'type' }]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoClearButton, { className: "LuzmoClearButton", filePath: "components/clear-button.ts", lineNumber: 18 }); })();

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

@@ -0,0 +1,33 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import '@luzmo/lucero/button';
+import type { LuzmoCloseButton as LuzmoCloseButtonHostElement } from '@luzmo/lucero/button';
+import * as i0 from "@angular/core";
+export declare class LuzmoCloseButton implements OnChanges {
+    private readonly elementRef;
+    private readonly renderer;
+    private readonly destroyRef;
+    private readonly host;
+    private readonly listenerCleanup;
+    /** The underlying custom element instance. Use to call imperative methods. */
+    get nativeElement(): LuzmoCloseButtonHostElement;
+    /** The visual variant to apply to this button. */
+    variant?: ('white' | 'black') | '';
+    staticColor?: 'black' | 'white';
+    active?: boolean;
+    /** The default behavior of the button. Possible values are: `button` (default), `submit`, and `reset`. */
+    type?: 'button' | 'submit' | 'reset';
+    constructor();
+    ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * Forward a wrapper @Input to the underlying host element via Renderer2 so
+     * the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
+     * Unlike a "skip undefined" guard, this lets consumers reset values back to
+     * undefined / null by clearing their bindings.
+     */
+    private setHostProperty;
+    private bindEvents;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoCloseButton, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoCloseButton, "luzmo-close-button", ["luzmoCloseButton"], { "variant": { "alias": "variant"; "required": false; }; "staticColor": { "alias": "static-color"; "required": false; }; "active": { "alias": "active"; "required": false; }; "type": { "alias": "type"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+/** The underlying custom element type for LuzmoCloseButton */
+export type LuzmoCloseButtonElement = LuzmoCloseButtonHostElement;