@luzmo/ngx-lucero 1.0.1-alpha.78

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

@@ -0,0 +1,53 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import '@luzmo/lucero/color-slider';
+import type { LuzmoColorSlider as LuzmoColorSliderHostElement } from '@luzmo/lucero/color-slider';
+import * as i0 from "@angular/core";
+export declare class LuzmoColorSlider 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(): LuzmoColorSliderHostElement;
+    dir?: 'ltr' | 'rtl';
+    mode?: 'hue' | 'opacity';
+    disabled?: boolean;
+    focused?: boolean;
+    label?: string;
+    vertical?: boolean;
+    value?: number;
+    sliderHandlePosition?: number;
+    color?: unknown;
+    step?: number;
+    isLTR?: boolean;
+    input?: unknown;
+    /** The value of the Color Slider has changed. */
+    readonly inputEvent: import("@angular/core").OutputEmitterRef<Event>;
+    /** An alteration to the value of the Color Slider has been committed by the user. */
+    readonly changeEvent: import("@angular/core").OutputEmitterRef<Event>;
+    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: number): void;
+    registerOnChange(fn: (value: number) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    focus(focusOptions: FocusOptions): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoColorSlider, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoColorSlider, "luzmo-color-slider", ["luzmoColorSlider"], { "dir": { "alias": "dir"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "focused": { "alias": "focused"; "required": false; }; "label": { "alias": "label"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; "value": { "alias": "value"; "required": false; }; "sliderHandlePosition": { "alias": "slider-handle-position"; "required": false; }; "color": { "alias": "color"; "required": false; }; "step": { "alias": "step"; "required": false; }; "isLTR": { "alias": "is-ltr"; "required": false; }; "input": { "alias": "input"; "required": false; }; }, { "inputEvent": "input"; "changeEvent": "change"; }, never, ["*"], true, never>;
+}
+/** The underlying custom element type for LuzmoColorSlider */
+export type LuzmoColorSliderElement = LuzmoColorSliderHostElement;

package/esm/components/color-slider.js

@@ -0,0 +1,215 @@
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, forwardRef, inject, Input, output, Renderer2 } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import '@luzmo/lucero/color-slider';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+/**
+ * Angular wrapper component for <luzmo-color-slider>
+ */
+export class LuzmoColorSlider {
+    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;
+    }
+    dir;
+    mode;
+    disabled;
+    focused;
+    label;
+    vertical;
+    value;
+    sliderHandlePosition;
+    color;
+    step;
+    isLTR;
+    input;
+    /** The value of the Color Slider has changed. */
+    inputEvent = output({ alias: 'input' });
+    /** An alteration to the value of the Color Slider has been committed by the user. */
+    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 'dir':
+                    this.setHostProperty('dir', changes['dir'].currentValue);
+                    break;
+                case 'mode':
+                    this.setHostProperty('mode', changes['mode'].currentValue);
+                    break;
+                case 'disabled':
+                    this.setHostProperty('disabled', changes['disabled'].currentValue);
+                    break;
+                case 'focused':
+                    this.setHostProperty('focused', changes['focused'].currentValue);
+                    break;
+                case 'label':
+                    this.setHostProperty('label', changes['label'].currentValue);
+                    break;
+                case 'vertical':
+                    this.setHostProperty('vertical', changes['vertical'].currentValue);
+                    break;
+                case 'value':
+                    this.setHostProperty('value', changes['value'].currentValue);
+                    break;
+                case 'sliderHandlePosition':
+                    this.setHostProperty('sliderHandlePosition', changes['sliderHandlePosition'].currentValue);
+                    break;
+                case 'color':
+                    this.setHostProperty('color', changes['color'].currentValue);
+                    break;
+                case 'step':
+                    this.setHostProperty('step', changes['step'].currentValue);
+                    break;
+                case 'isLTR':
+                    this.setHostProperty('isLTR', changes['isLTR'].currentValue);
+                    break;
+                case 'input':
+                    this.setHostProperty('input', changes['input'].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, 'input', (event) => {
+            this.inputEvent.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, 'change', (event) => {
+            this.changeEvent.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');
+        }
+    }
+    focus(focusOptions) {
+        return this.host.focus(focusOptions);
+    }
+    static ɵfac = function LuzmoColorSlider_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoColorSlider)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoColorSlider, selectors: [["luzmo-color-slider"]], inputs: { dir: "dir", mode: "mode", disabled: "disabled", focused: "focused", label: "label", vertical: "vertical", value: "value", sliderHandlePosition: [0, "slider-handle-position", "sliderHandlePosition"], color: "color", step: "step", isLTR: [0, "is-ltr", "isLTR"], input: "input" }, outputs: { inputEvent: "input", changeEvent: "change" }, exportAs: ["luzmoColorSlider"], features: [i0.ɵɵProvidersFeature([
+                {
+                    provide: NG_VALUE_ACCESSOR,
+                    useExisting: forwardRef(() => LuzmoColorSlider),
+                    multi: true
+                }
+            ]), i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoColorSlider_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0);
+        } }, encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoColorSlider, [{
+        type: Component,
+        args: [{
+                selector: 'luzmo-color-slider',
+                exportAs: 'luzmoColorSlider',
+                standalone: true,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content />',
+                providers: [
+                    {
+                        provide: NG_VALUE_ACCESSOR,
+                        useExisting: forwardRef(() => LuzmoColorSlider),
+                        multi: true
+                    }
+                ]
+            }]
+    }], () => [], { dir: [{
+            type: Input,
+            args: [{ alias: 'dir' }]
+        }], mode: [{
+            type: Input,
+            args: [{ alias: 'mode' }]
+        }], disabled: [{
+            type: Input,
+            args: [{ alias: 'disabled' }]
+        }], focused: [{
+            type: Input,
+            args: [{ alias: 'focused' }]
+        }], label: [{
+            type: Input,
+            args: [{ alias: 'label' }]
+        }], vertical: [{
+            type: Input,
+            args: [{ alias: 'vertical' }]
+        }], value: [{
+            type: Input,
+            args: [{ alias: 'value' }]
+        }], sliderHandlePosition: [{
+            type: Input,
+            args: [{ alias: 'slider-handle-position' }]
+        }], color: [{
+            type: Input,
+            args: [{ alias: 'color' }]
+        }], step: [{
+            type: Input,
+            args: [{ alias: 'step' }]
+        }], isLTR: [{
+            type: Input,
+            args: [{ alias: 'is-ltr' }]
+        }], input: [{
+            type: Input,
+            args: [{ alias: 'input' }]
+        }], inputEvent: [{ type: i0.Output, args: ["input"] }], changeEvent: [{ type: i0.Output, args: ["change"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoColorSlider, { className: "LuzmoColorSlider", filePath: "components/color-slider.ts", lineNumber: 23 }); })();

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

@@ -0,0 +1,69 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import '@luzmo/lucero/date-range-picker';
+import type { LuzmoDateRangePicker as LuzmoDateRangePickerHostElement, DateRangePickerLabels, DefinedRange } from '@luzmo/lucero/date-range-picker';
+import * as i0 from "@angular/core";
+export type { DateRangePickerLabels, DateRangeValue, DefinedRange } from '@luzmo/lucero/date-range-picker';
+export declare class LuzmoDateRangePicker 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(): LuzmoDateRangePickerHostElement;
+    /** The start date of the range (ISO date string, e.g. '2024-01-15') */
+    startDate?: string;
+    /** The end date of the range (ISO date string, e.g. '2024-01-20') */
+    endDate?: string;
+    /** The minimum valid date a user can select */
+    min?: string;
+    /** The maximum valid date a user can select */
+    max?: string;
+    /** The date format to use for display. Can be 'mmdd', 'ddmm', or undefined (uses locale default). */
+    dateFormat?: 'mmdd' | 'ddmm';
+    /** The separator to use between date segments (month, day, and year). */
+    dateSeparator?: string;
+    /** The granularity used to display the segments. 'day' shows only date, while 'hour', 'minute', 'second', or 'millisecond' add time segments. */
+    precision?: unknown;
+    /** Number of side-by-side calendars in the popover (1 or 2) */
+    calendars?: 1 | 2;
+    /** Whether to show the predefined date ranges panel in the popover. */
+    showDefinedRanges?: boolean;
+    /** Predefined date ranges displayed as quick-select options. Defaults use English labels. For other locales, provide your own `DefinedRange[]` with translated labels. */
+    definedRanges?: DefinedRange[];
+    /** Whether the `value` held by the form control is invalid. */
+    invalid?: boolean;
+    /** Whether a user can interact with the value of the form control */
+    readonly?: boolean;
+    /** Whether to display the form control with no visible background */
+    quiet?: boolean;
+    /** Popover placement */
+    placement?: unknown;
+    /** The IANA time zone identifier to use for interpreting dates (e.g. 'America/New_York'). If not specified, the user's local time zone is used. */
+    timeZone?: string;
+    /** BCP 47 locale string */
+    language?: string;
+    /** Labels read by screen readers. */
+    labels?: DateRangePickerLabels;
+    focused?: boolean;
+    helpTextManager?: unknown;
+    /** Announces when a new date range is committed by the user */
+    readonly changeEvent: import("@angular/core").OutputEmitterRef<CustomEvent<unknown>>;
+    /** Announces when the user's input changes the component's segments */
+    readonly inputEvent: 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;
+    clear(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoDateRangePicker, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoDateRangePicker, "luzmo-date-range-picker", ["luzmoDateRangePicker"], { "startDate": { "alias": "start-date"; "required": false; }; "endDate": { "alias": "end-date"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "dateFormat": { "alias": "date-format"; "required": false; }; "dateSeparator": { "alias": "date-separator"; "required": false; }; "precision": { "alias": "precision"; "required": false; }; "calendars": { "alias": "calendars"; "required": false; }; "showDefinedRanges": { "alias": "show-defined-ranges"; "required": false; }; "definedRanges": { "alias": "defined-ranges"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "quiet": { "alias": "quiet"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "timeZone": { "alias": "time-zone"; "required": false; }; "language": { "alias": "language"; "required": false; }; "labels": { "alias": "labels"; "required": false; }; "focused": { "alias": "focused"; "required": false; }; "helpTextManager": { "alias": "help-text-manager"; "required": false; }; }, { "changeEvent": "change"; "inputEvent": "input"; }, never, ["*"], true, never>;
+}
+/** The underlying custom element type for LuzmoDateRangePicker */
+export type LuzmoDateRangePickerElement = LuzmoDateRangePickerHostElement;

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

@@ -0,0 +1,228 @@
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, output, Renderer2 } from '@angular/core';
+import '@luzmo/lucero/date-range-picker';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+/**
+ * Angular wrapper component for <luzmo-date-range-picker>
+ *
+ * @slot calendar-icon - The icon used in the calendar button
+ * @slot help-text - Default or non-negative help text to associate to your form element
+ * @slot negative-help-text - Negative help text to associate to your form element when `invalid`
+ */
+export class LuzmoDateRangePicker {
+    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 start date of the range (ISO date string, e.g. '2024-01-15') */
+    startDate;
+    /** The end date of the range (ISO date string, e.g. '2024-01-20') */
+    endDate;
+    /** The minimum valid date a user can select */
+    min;
+    /** The maximum valid date a user can select */
+    max;
+    /** The date format to use for display. Can be 'mmdd', 'ddmm', or undefined (uses locale default). */
+    dateFormat;
+    /** The separator to use between date segments (month, day, and year). */
+    dateSeparator;
+    /** The granularity used to display the segments. 'day' shows only date, while 'hour', 'minute', 'second', or 'millisecond' add time segments. */
+    precision;
+    /** Number of side-by-side calendars in the popover (1 or 2) */
+    calendars;
+    /** Whether to show the predefined date ranges panel in the popover. */
+    showDefinedRanges;
+    /** Predefined date ranges displayed as quick-select options. Defaults use English labels. For other locales, provide your own `DefinedRange[]` with translated labels. */
+    definedRanges;
+    /** Whether the `value` held by the form control is invalid. */
+    invalid;
+    /** Whether a user can interact with the value of the form control */
+    readonly;
+    /** Whether to display the form control with no visible background */
+    quiet;
+    /** Popover placement */
+    placement;
+    /** The IANA time zone identifier to use for interpreting dates (e.g. 'America/New_York'). If not specified, the user's local time zone is used. */
+    timeZone;
+    /** BCP 47 locale string */
+    language;
+    /** Labels read by screen readers. */
+    labels;
+    focused;
+    helpTextManager;
+    /** Announces when a new date range is committed by the user */
+    changeEvent = output({ alias: 'change' });
+    /** Announces when the user's input changes the component's segments */
+    inputEvent = output({ alias: 'input' });
+    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 'startDate':
+                    this.setHostProperty('startDate', changes['startDate'].currentValue);
+                    break;
+                case 'endDate':
+                    this.setHostProperty('endDate', changes['endDate'].currentValue);
+                    break;
+                case 'min':
+                    this.setHostProperty('min', changes['min'].currentValue);
+                    break;
+                case 'max':
+                    this.setHostProperty('max', changes['max'].currentValue);
+                    break;
+                case 'dateFormat':
+                    this.setHostProperty('dateFormat', changes['dateFormat'].currentValue);
+                    break;
+                case 'dateSeparator':
+                    this.setHostProperty('dateSeparator', changes['dateSeparator'].currentValue);
+                    break;
+                case 'precision':
+                    this.setHostProperty('precision', changes['precision'].currentValue);
+                    break;
+                case 'calendars':
+                    this.setHostProperty('calendars', changes['calendars'].currentValue);
+                    break;
+                case 'showDefinedRanges':
+                    this.setHostProperty('showDefinedRanges', changes['showDefinedRanges'].currentValue);
+                    break;
+                case 'definedRanges':
+                    this.setHostProperty('definedRanges', changes['definedRanges'].currentValue);
+                    break;
+                case 'invalid':
+                    this.setHostProperty('invalid', changes['invalid'].currentValue);
+                    break;
+                case 'readonly':
+                    this.setHostProperty('readonly', changes['readonly'].currentValue);
+                    break;
+                case 'quiet':
+                    this.setHostProperty('quiet', changes['quiet'].currentValue);
+                    break;
+                case 'placement':
+                    this.setHostProperty('placement', changes['placement'].currentValue);
+                    break;
+                case 'timeZone':
+                    this.setHostProperty('timeZone', changes['timeZone'].currentValue);
+                    break;
+                case 'language':
+                    this.setHostProperty('language', changes['language'].currentValue);
+                    break;
+                case 'labels':
+                    this.setHostProperty('labels', changes['labels'].currentValue);
+                    break;
+                case 'focused':
+                    this.setHostProperty('focused', changes['focused'].currentValue);
+                    break;
+                case 'helpTextManager':
+                    this.setHostProperty('helpTextManager', changes['helpTextManager'].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);
+        }));
+        this.listenerCleanup.push(this.renderer.listen(this.host, 'input', (event) => {
+            this.inputEvent.emit(event);
+        }));
+    }
+    clear() {
+        return this.host.clear();
+    }
+    static ɵfac = function LuzmoDateRangePicker_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoDateRangePicker)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoDateRangePicker, selectors: [["luzmo-date-range-picker"]], inputs: { startDate: [0, "start-date", "startDate"], endDate: [0, "end-date", "endDate"], min: "min", max: "max", dateFormat: [0, "date-format", "dateFormat"], dateSeparator: [0, "date-separator", "dateSeparator"], precision: "precision", calendars: "calendars", showDefinedRanges: [0, "show-defined-ranges", "showDefinedRanges"], definedRanges: [0, "defined-ranges", "definedRanges"], invalid: "invalid", readonly: "readonly", quiet: "quiet", placement: "placement", timeZone: [0, "time-zone", "timeZone"], language: "language", labels: "labels", focused: "focused", helpTextManager: [0, "help-text-manager", "helpTextManager"] }, outputs: { changeEvent: "change", inputEvent: "input" }, exportAs: ["luzmoDateRangePicker"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoDateRangePicker_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0);
+        } }, encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoDateRangePicker, [{
+        type: Component,
+        args: [{
+                selector: 'luzmo-date-range-picker',
+                exportAs: 'luzmoDateRangePicker',
+                standalone: true,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content />'
+            }]
+    }], () => [], { startDate: [{
+            type: Input,
+            args: [{ alias: 'start-date' }]
+        }], endDate: [{
+            type: Input,
+            args: [{ alias: 'end-date' }]
+        }], min: [{
+            type: Input,
+            args: [{ alias: 'min' }]
+        }], max: [{
+            type: Input,
+            args: [{ alias: 'max' }]
+        }], dateFormat: [{
+            type: Input,
+            args: [{ alias: 'date-format' }]
+        }], dateSeparator: [{
+            type: Input,
+            args: [{ alias: 'date-separator' }]
+        }], precision: [{
+            type: Input,
+            args: [{ alias: 'precision' }]
+        }], calendars: [{
+            type: Input,
+            args: [{ alias: 'calendars' }]
+        }], showDefinedRanges: [{
+            type: Input,
+            args: [{ alias: 'show-defined-ranges' }]
+        }], definedRanges: [{
+            type: Input,
+            args: [{ alias: 'defined-ranges' }]
+        }], invalid: [{
+            type: Input,
+            args: [{ alias: 'invalid' }]
+        }], readonly: [{
+            type: Input,
+            args: [{ alias: 'readonly' }]
+        }], quiet: [{
+            type: Input,
+            args: [{ alias: 'quiet' }]
+        }], placement: [{
+            type: Input,
+            args: [{ alias: 'placement' }]
+        }], timeZone: [{
+            type: Input,
+            args: [{ alias: 'time-zone' }]
+        }], language: [{
+            type: Input,
+            args: [{ alias: 'language' }]
+        }], labels: [{
+            type: Input,
+            args: [{ alias: 'labels' }]
+        }], focused: [{
+            type: Input,
+            args: [{ alias: 'focused' }]
+        }], helpTextManager: [{
+            type: Input,
+            args: [{ alias: 'help-text-manager' }]
+        }], changeEvent: [{ type: i0.Output, args: ["change"] }], inputEvent: [{ type: i0.Output, args: ["input"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoDateRangePicker, { className: "LuzmoDateRangePicker", filePath: "components/date-range-picker.ts", lineNumber: 20 }); })();

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

@@ -0,0 +1,71 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import '@luzmo/lucero/date-time-picker';
+import type { LuzmoDateTimePicker as LuzmoDateTimePickerHostElement, DateTimePickerLabels, Precision } from '@luzmo/lucero/date-time-picker';
+import * as i0 from "@angular/core";
+export type { DateTimePickerLabels, Precision } from '@luzmo/lucero/date-time-picker';
+export declare class LuzmoDateTimePicker 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(): LuzmoDateTimePickerHostElement;
+    /** The selected date of the component. If defined, this also indicates where the calendar opens. If not, the calendar opens at the current month, and placeholder values are shown. */
+    value?: string;
+    /** The minimum valid date a user can select */
+    min?: string;
+    /** The maximum valid date a user can select */
+    max?: string;
+    /** The date format to use for display. Can be 'mmdd', 'ddmm', or undefined (uses locale default). */
+    dateFormat?: 'mmdd' | 'ddmm';
+    /** The separator to use between date segments (month, day, and year). If not specified, the default separator from the locale will be used. */
+    dateSeparator?: string;
+    /** The granularity used to display the segments of the component's value */
+    precision?: Precision;
+    /** Whether the `value` held by the form control is invalid. */
+    invalid?: boolean;
+    /** Whether a user can interact with the value of the form control */
+    readonly?: boolean;
+    /** Whether to display the form control with no visible background */
+    quiet?: boolean;
+    /** Whether to display the form control with no visible background */
+    placement?: unknown;
+    /** The IANA time zone identifier (eg. America/Los_Angeles) to use for parsing the date & setting it */
+    timeZone?: string;
+    /** Whether to display the form control with no visible background */
+    language?: string;
+    /** Labels read by screen readers. The default values are in English and can be overridden to localize the content. */
+    labels?: DateTimePickerLabels;
+    focused?: boolean;
+    helpTextManager?: unknown;
+    /** Announces when a new date/time is committed by the user */
+    readonly changeEvent: import("@angular/core").OutputEmitterRef<CustomEvent<unknown>>;
+    /** Announces when the user's input changes the component's segments */
+    readonly inputEvent: 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 and segments */
+    clear(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoDateTimePicker, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoDateTimePicker, "luzmo-date-time-picker", ["luzmoDateTimePicker"], { "value": { "alias": "value"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "dateFormat": { "alias": "date-format"; "required": false; }; "dateSeparator": { "alias": "date-separator"; "required": false; }; "precision": { "alias": "precision"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "quiet": { "alias": "quiet"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "timeZone": { "alias": "time-zone"; "required": false; }; "language": { "alias": "language"; "required": false; }; "labels": { "alias": "labels"; "required": false; }; "focused": { "alias": "focused"; "required": false; }; "helpTextManager": { "alias": "help-text-manager"; "required": false; }; }, { "changeEvent": "change"; "inputEvent": "input"; }, never, ["*"], true, never>;
+}
+/** The underlying custom element type for LuzmoDateTimePicker */
+export type LuzmoDateTimePickerElement = LuzmoDateTimePickerHostElement;