@luzmo/ngx-lucero 1.0.1-alpha.78

package/esm/components/button-group.js

@@ -0,0 +1,71 @@
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, Renderer2 } from '@angular/core';
+import '@luzmo/lucero/button-group';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+/**
+ * Angular wrapper component for <luzmo-button-group>
+ *
+ * @slot (default) - the luzmo-button elements that make up the group
+ */
+export class LuzmoButtonGroup {
+    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;
+    }
+    vertical;
+    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 'vertical':
+                    this.setHostProperty('vertical', changes['vertical'].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 LuzmoButtonGroup_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoButtonGroup)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoButtonGroup, selectors: [["luzmo-button-group"]], inputs: { vertical: "vertical" }, exportAs: ["luzmoButtonGroup"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoButtonGroup_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0);
+        } }, encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoButtonGroup, [{
+        type: Component,
+        args: [{
+                selector: 'luzmo-button-group',
+                exportAs: 'luzmoButtonGroup',
+                standalone: true,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content />'
+            }]
+    }], () => [], { vertical: [{
+            type: Input,
+            args: [{ alias: 'vertical' }]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoButtonGroup, { className: "LuzmoButtonGroup", filePath: "components/button-group.ts", lineNumber: 17 }); })();

package/esm/components/button.d.ts

@@ -0,0 +1,40 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import '@luzmo/lucero/button';
+import type { LuzmoButton as LuzmoButtonHostElement } from '@luzmo/lucero/button';
+import * as i0 from "@angular/core";
+export declare class LuzmoButton 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(): LuzmoButtonHostElement;
+    pendingLabel?: string;
+    pending?: boolean;
+    variant?: ('primary' | 'secondary' | 'negative' | 'positive' | ('white' | 'black'));
+    staticColor?: 'black' | 'white';
+    treatment?: ('fill' | 'outline');
+    quiet?: boolean;
+    noWrap?: boolean;
+    pendingStateController?: unknown;
+    active?: boolean;
+    /** The default behavior of the button. Possible values are: `button` (default), `submit`, and `reset`. */
+    type?: 'button' | 'submit' | 'reset';
+    /** Announces that the `value` of the element has changed */
+    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;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoButton, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoButton, "luzmo-button", ["luzmoButton"], { "pendingLabel": { "alias": "pending-label"; "required": false; }; "pending": { "alias": "pending"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "staticColor": { "alias": "static-color"; "required": false; }; "treatment": { "alias": "treatment"; "required": false; }; "quiet": { "alias": "quiet"; "required": false; }; "noWrap": { "alias": "no-wrap"; "required": false; }; "pendingStateController": { "alias": "pending-state-controller"; "required": false; }; "active": { "alias": "active"; "required": false; }; "type": { "alias": "type"; "required": false; }; }, { "changeEvent": "change"; }, never, ["*"], true, never>;
+}
+/** The underlying custom element type for LuzmoButton */
+export type LuzmoButtonElement = LuzmoButtonHostElement;

package/esm/components/button.js

@@ -0,0 +1,140 @@
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, output, Renderer2 } from '@angular/core';
+import '@luzmo/lucero/button';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+/**
+ * Angular wrapper component for <luzmo-button>
+ *
+ * @slot (default) - text label of the Button
+ * @slot icon - The icon to use for Button
+ */
+export class LuzmoButton {
+    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;
+    }
+    pendingLabel;
+    pending;
+    variant;
+    staticColor;
+    treatment;
+    quiet;
+    noWrap;
+    pendingStateController;
+    active;
+    /** The default behavior of the button. Possible values are: `button` (default), `submit`, and `reset`. */
+    type;
+    /** Announces that the `value` of the element has changed */
+    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 'pendingLabel':
+                    this.setHostProperty('pendingLabel', changes['pendingLabel'].currentValue);
+                    break;
+                case 'pending':
+                    this.setHostProperty('pending', changes['pending'].currentValue);
+                    break;
+                case 'variant':
+                    this.setHostProperty('variant', changes['variant'].currentValue);
+                    break;
+                case 'staticColor':
+                    this.setHostProperty('staticColor', changes['staticColor'].currentValue);
+                    break;
+                case 'treatment':
+                    this.setHostProperty('treatment', changes['treatment'].currentValue);
+                    break;
+                case 'quiet':
+                    this.setHostProperty('quiet', changes['quiet'].currentValue);
+                    break;
+                case 'noWrap':
+                    this.setHostProperty('noWrap', changes['noWrap'].currentValue);
+                    break;
+                case 'pendingStateController':
+                    this.setHostProperty('pendingStateController', changes['pendingStateController'].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() {
+        this.listenerCleanup.push(this.renderer.listen(this.host, 'change', (event) => {
+            this.changeEvent.emit(event);
+        }));
+    }
+    static ɵfac = function LuzmoButton_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoButton)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoButton, selectors: [["luzmo-button"]], inputs: { pendingLabel: [0, "pending-label", "pendingLabel"], pending: "pending", variant: "variant", staticColor: [0, "static-color", "staticColor"], treatment: "treatment", quiet: "quiet", noWrap: [0, "no-wrap", "noWrap"], pendingStateController: [0, "pending-state-controller", "pendingStateController"], active: "active", type: "type" }, outputs: { changeEvent: "change" }, exportAs: ["luzmoButton"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoButton_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0);
+        } }, encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoButton, [{
+        type: Component,
+        args: [{
+                selector: 'luzmo-button',
+                exportAs: 'luzmoButton',
+                standalone: true,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content />'
+            }]
+    }], () => [], { pendingLabel: [{
+            type: Input,
+            args: [{ alias: 'pending-label' }]
+        }], pending: [{
+            type: Input,
+            args: [{ alias: 'pending' }]
+        }], variant: [{
+            type: Input,
+            args: [{ alias: 'variant' }]
+        }], staticColor: [{
+            type: Input,
+            args: [{ alias: 'static-color' }]
+        }], treatment: [{
+            type: Input,
+            args: [{ alias: 'treatment' }]
+        }], quiet: [{
+            type: Input,
+            args: [{ alias: 'quiet' }]
+        }], noWrap: [{
+            type: Input,
+            args: [{ alias: 'no-wrap' }]
+        }], pendingStateController: [{
+            type: Input,
+            args: [{ alias: 'pending-state-controller' }]
+        }], active: [{
+            type: Input,
+            args: [{ alias: 'active' }]
+        }], type: [{
+            type: Input,
+            args: [{ alias: 'type' }]
+        }], changeEvent: [{ type: i0.Output, args: ["change"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoButton, { className: "LuzmoButton", filePath: "components/button.ts", lineNumber: 18 }); })();

package/esm/components/calendar.d.ts

@@ -0,0 +1,64 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import '@luzmo/lucero/calendar';
+import type { LuzmoCalendar as LuzmoCalendarHostElement, CalendarLabels, CalendarSelectionMode } from '@luzmo/lucero/calendar';
+import type { CalendarDate as __extt_CalendarDate } from '@internationalized/date';
+import * as i0 from "@angular/core";
+export type { CalendarLabels, CalendarSelectionMode, CalendarViewMode, CalendarWeekday, DateCellProperties } from '@luzmo/lucero/calendar';
+export declare class LuzmoCalendar 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(): LuzmoCalendarHostElement;
+    /** The selected date in the calendar. If defined, this also indicates where the calendar opens. If not, the calendar opens at the current month. */
+    value?: string;
+    /** The minimum allowed date a user can select */
+    min?: string;
+    /** The maximum allowed date a user can select */
+    max?: string;
+    /** Indicates when the calendar should be disabled entirely */
+    disabled?: boolean;
+    /** The language used to format the dates and weekdays. */
+    language?: string;
+    /** Labels read by screen readers. The default values are in English and can be overridden to localize the content. */
+    labels?: CalendarLabels;
+    /** Selection mode: 'single' for a single date, 'range' for start/end date selection. */
+    selectionMode?: CalendarSelectionMode;
+    /** The start date of the range selection (ISO date string, e.g. '2024-01-15'). Only used when selectionMode is 'range'. */
+    startDate?: string;
+    /** The end date of the range selection (ISO date string, e.g. '2024-01-20'). Only used when selectionMode is 'range'. */
+    endDate?: string;
+    /** The date being hovered, used for range preview between start and end during range selection. Can be set externally to synchronize hover previews across multiple calendar instances. */
+    hoveredDate?: __extt_CalendarDate;
+    readonly monthChangeEvent: import("@angular/core").OutputEmitterRef<CustomEvent<unknown>>;
+    readonly changeEvent: import("@angular/core").OutputEmitterRef<CustomEvent<unknown>>;
+    readonly rangeSelectEvent: import("@angular/core").OutputEmitterRef<CustomEvent<unknown>>;
+    readonly hoverDateEvent: 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: string): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    /** Resets the component's value */
+    clear(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoCalendar, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoCalendar, "luzmo-calendar", ["luzmoCalendar"], { "value": { "alias": "value"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "language": { "alias": "language"; "required": false; }; "labels": { "alias": "labels"; "required": false; }; "selectionMode": { "alias": "selection-mode"; "required": false; }; "startDate": { "alias": "start-date"; "required": false; }; "endDate": { "alias": "end-date"; "required": false; }; "hoveredDate": { "alias": "hovered-date"; "required": false; }; }, { "monthChangeEvent": "month-change"; "changeEvent": "change"; "rangeSelectEvent": "range-select"; "hoverDateEvent": "hover-date"; }, never, ["*"], true, never>;
+}
+/** The underlying custom element type for LuzmoCalendar */
+export type LuzmoCalendarElement = LuzmoCalendarHostElement;

package/esm/components/calendar.js

@@ -0,0 +1,218 @@
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, forwardRef, inject, Input, output, Renderer2 } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import '@luzmo/lucero/calendar';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+/**
+ * Angular wrapper component for <luzmo-calendar>
+ */
+export class LuzmoCalendar {
+    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 selected date in the calendar. If defined, this also indicates where the calendar opens. If not, the calendar opens at the current month. */
+    value;
+    /** The minimum allowed date a user can select */
+    min;
+    /** The maximum allowed date a user can select */
+    max;
+    /** Indicates when the calendar should be disabled entirely */
+    disabled;
+    /** The language used to format the dates and weekdays. */
+    language;
+    /** Labels read by screen readers. The default values are in English and can be overridden to localize the content. */
+    labels;
+    /** Selection mode: 'single' for a single date, 'range' for start/end date selection. */
+    selectionMode;
+    /** The start date of the range selection (ISO date string, e.g. '2024-01-15'). Only used when selectionMode is 'range'. */
+    startDate;
+    /** The end date of the range selection (ISO date string, e.g. '2024-01-20'). Only used when selectionMode is 'range'. */
+    endDate;
+    /** The date being hovered, used for range preview between start and end during range selection. Can be set externally to synchronize hover previews across multiple calendar instances. */
+    hoveredDate;
+    monthChangeEvent = output({ alias: 'month-change' });
+    changeEvent = output({ alias: 'change' });
+    rangeSelectEvent = output({ alias: 'range-select' });
+    hoverDateEvent = output({ alias: 'hover-date' });
+    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 'value':
+                    this.setHostProperty('value', changes['value'].currentValue);
+                    break;
+                case 'min':
+                    this.setHostProperty('min', changes['min'].currentValue);
+                    break;
+                case 'max':
+                    this.setHostProperty('max', changes['max'].currentValue);
+                    break;
+                case 'disabled':
+                    this.setHostProperty('disabled', changes['disabled'].currentValue);
+                    break;
+                case 'language':
+                    this.setHostProperty('language', changes['language'].currentValue);
+                    break;
+                case 'labels':
+                    this.setHostProperty('labels', changes['labels'].currentValue);
+                    break;
+                case 'selectionMode':
+                    this.setHostProperty('selectionMode', changes['selectionMode'].currentValue);
+                    break;
+                case 'startDate':
+                    this.setHostProperty('startDate', changes['startDate'].currentValue);
+                    break;
+                case 'endDate':
+                    this.setHostProperty('endDate', changes['endDate'].currentValue);
+                    break;
+                case 'hoveredDate':
+                    this.setHostProperty('hoveredDate', changes['hoveredDate'].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, 'month-change', (event) => {
+            this.monthChangeEvent.emit(event);
+        }));
+        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?.['value']
+                    ?? hostRecord['value']);
+                if (Object.is(this.lastCvaValue, nextValue)) {
+                    return;
+                }
+                this.lastCvaValue = nextValue;
+                this.setHostProperty('value', nextValue);
+                this.onChange(nextValue);
+            }
+        }));
+        this.listenerCleanup.push(this.renderer.listen(this.host, 'range-select', (event) => {
+            this.rangeSelectEvent.emit(event);
+        }));
+        this.listenerCleanup.push(this.renderer.listen(this.host, 'hover-date', (event) => {
+            this.hoverDateEvent.emit(event);
+        }));
+        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('value', 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');
+        }
+    }
+    /** Resets the component's value */
+    clear() {
+        return this.host.clear();
+    }
+    static ɵfac = function LuzmoCalendar_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoCalendar)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoCalendar, selectors: [["luzmo-calendar"]], inputs: { value: "value", min: "min", max: "max", disabled: "disabled", language: "language", labels: "labels", selectionMode: [0, "selection-mode", "selectionMode"], startDate: [0, "start-date", "startDate"], endDate: [0, "end-date", "endDate"], hoveredDate: [0, "hovered-date", "hoveredDate"] }, outputs: { monthChangeEvent: "month-change", changeEvent: "change", rangeSelectEvent: "range-select", hoverDateEvent: "hover-date" }, exportAs: ["luzmoCalendar"], features: [i0.ɵɵProvidersFeature([
+                {
+                    provide: NG_VALUE_ACCESSOR,
+                    useExisting: forwardRef(() => LuzmoCalendar),
+                    multi: true
+                }
+            ]), i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoCalendar_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0);
+        } }, encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoCalendar, [{
+        type: Component,
+        args: [{
+                selector: 'luzmo-calendar',
+                exportAs: 'luzmoCalendar',
+                standalone: true,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content />',
+                providers: [
+                    {
+                        provide: NG_VALUE_ACCESSOR,
+                        useExisting: forwardRef(() => LuzmoCalendar),
+                        multi: true
+                    }
+                ]
+            }]
+    }], () => [], { value: [{
+            type: Input,
+            args: [{ alias: 'value' }]
+        }], min: [{
+            type: Input,
+            args: [{ alias: 'min' }]
+        }], max: [{
+            type: Input,
+            args: [{ alias: 'max' }]
+        }], disabled: [{
+            type: Input,
+            args: [{ alias: 'disabled' }]
+        }], language: [{
+            type: Input,
+            args: [{ alias: 'language' }]
+        }], labels: [{
+            type: Input,
+            args: [{ alias: 'labels' }]
+        }], selectionMode: [{
+            type: Input,
+            args: [{ alias: 'selection-mode' }]
+        }], startDate: [{
+            type: Input,
+            args: [{ alias: 'start-date' }]
+        }], endDate: [{
+            type: Input,
+            args: [{ alias: 'end-date' }]
+        }], hoveredDate: [{
+            type: Input,
+            args: [{ alias: 'hovered-date' }]
+        }], monthChangeEvent: [{ type: i0.Output, args: ["month-change"] }], changeEvent: [{ type: i0.Output, args: ["change"] }], rangeSelectEvent: [{ type: i0.Output, args: ["range-select"] }], hoverDateEvent: [{ type: i0.Output, args: ["hover-date"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoCalendar, { className: "LuzmoCalendar", filePath: "components/calendar.ts", lineNumber: 25 }); })();

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

@@ -0,0 +1,29 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import '@luzmo/lucero/chat-message-group';
+import type { LuzmoChatMessageGroup as LuzmoChatMessageGroupHostElement } from '@luzmo/lucero/chat-message-group';
+import * as i0 from "@angular/core";
+export declare class LuzmoChatMessageGroup 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(): LuzmoChatMessageGroupHostElement;
+    /** The vertical placement of the avatar relative to the message group. - `top`: Avatar appears next to the first message - `middle`: Avatar appears centered relative to the group - `bottom`: Avatar appears next to the last message (default) */
+    avatarPlacement?: unknown;
+    constructor();
+    ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * Forward a wrapper @Input to the underlying host element via Renderer2 so
+     * the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
+     * Unlike a "skip undefined" guard, this lets consumers reset values back to
+     * undefined / null by clearing their bindings.
+     */
+    private setHostProperty;
+    private bindEvents;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoChatMessageGroup, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoChatMessageGroup, "luzmo-chat-message-group", ["luzmoChatMessageGroup"], { "avatarPlacement": { "alias": "avatar-placement"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+/** The underlying custom element type for LuzmoChatMessageGroup */
+export type LuzmoChatMessageGroupElement = LuzmoChatMessageGroupHostElement;

package/esm/components/chat-message-group.js

@@ -0,0 +1,76 @@
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, Renderer2 } from '@angular/core';
+import '@luzmo/lucero/chat-message-group';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+/**
+ * A chat message group component for displaying consecutive messages from the same user.
+ *
+ * When multiple messages are grouped together, only the first or last message
+ * will display the name/date metadata and avatar, reducing visual clutter.
+ *
+ * @slot (default) - the luzmo-chat-message elements that make up the group
+ * @slot avatar - Optional avatar slot at the group level. If provided, this avatar will be used. If not provided, the first message's avatar will be reused.
+ */
+export class LuzmoChatMessageGroup {
+    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 vertical placement of the avatar relative to the message group. - `top`: Avatar appears next to the first message - `middle`: Avatar appears centered relative to the group - `bottom`: Avatar appears next to the last message (default) */
+    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 '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 LuzmoChatMessageGroup_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoChatMessageGroup)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoChatMessageGroup, selectors: [["luzmo-chat-message-group"]], inputs: { avatarPlacement: [0, "avatar-placement", "avatarPlacement"] }, exportAs: ["luzmoChatMessageGroup"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoChatMessageGroup_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0);
+        } }, encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoChatMessageGroup, [{
+        type: Component,
+        args: [{
+                selector: 'luzmo-chat-message-group',
+                exportAs: 'luzmoChatMessageGroup',
+                standalone: true,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content />'
+            }]
+    }], () => [], { avatarPlacement: [{
+            type: Input,
+            args: [{ alias: 'avatar-placement' }]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoChatMessageGroup, { className: "LuzmoChatMessageGroup", filePath: "components/chat-message-group.ts", lineNumber: 21 }); })();