@egose/shadcn-theme-ng 0.6.0 → 0.6.2

package/date-picker/fesm2022/date-picker.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, input, booleanAttribute, computed, ChangeDetectionStrategy, Component, forwardRef, viewChild, contentChild, linkedSignal, signal, output, ElementRef, effect, Directive, numberAttribute, untracked, NgModule } from '@angular/core';
+import { InjectionToken, inject, signal, Injectable, linkedSignal, Directive, input, booleanAttribute, computed, ChangeDetectionStrategy, Component, forwardRef, viewChild, contentChild, output, ElementRef, effect, numberAttribute, untracked, NgModule } from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideX, lucideCalendar, lucideChevronDown } from '@ng-icons/lucide';
 import { BrnDateInput, provideBrnDatePickerTrigger, BrnDatePickerTriggerToken, provideBrnDatePicker, injectBrnDatePicker } from '@spartan-ng/brain/date-picker';
@@ -10,6 +10,8 @@ import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i1$1 from '@spartan-ng/brain/field';
 import { provideBrnLabelable, BrnFieldControl, BrnFieldControlDescribedBy } from '@spartan-ng/brain/field';
 import { BrnPopover } from '@spartan-ng/brain/popover';
+import { injectDateAdapter } from '@spartan-ng/brain/date-time';
+import { BrnCalendar, BrnCalendarMulti, BrnCalendarRange } from '@spartan-ng/brain/calendar';
 import * as i3 from '@egose/shadcn-theme-ng/calendar';
 import { HlmCalendar, HlmCalendarMulti, HlmCalendarRange, HlmCalendarImports } from '@egose/shadcn-theme-ng/calendar';
 import * as i2 from '@egose/shadcn-theme-ng/popover';
@@ -68,7 +70,100 @@ function injectHlmDatePickerMultiConfig() {
     return injectedConfig ? injectedConfig : getDefaultConfig$3();
 }
 
-class HlmDateMultiInput extends BrnDateInput {
+/** Internal synchronization for explicit writes, including writes of the same value. */
+class HlmDatePickerCommitState {
+    revision = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "revision" }] : /* istanbul ignore next */ []));
+    changed() {
+        this.revision.update((revision) => revision + 1);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDatePickerCommitState, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDatePickerCommitState });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDatePickerCommitState, decorators: [{
+            type: Injectable
+        }] });
+/** Match the calendar's inclusive whole-day bounds with the configured adapter. */
+function isSelectableDate(adapter, value, min, max) {
+    return (value != null &&
+        Number.isFinite(adapter.getTime(value)) &&
+        (min == null || !adapter.isBefore(value, adapter.startOfDay(min))) &&
+        (max == null || !adapter.isAfter(value, adapter.endOfDay(max))));
+}
+
+/** Internal input lifecycle shared by the single, range and multi pickers. */
+class HlmConstrainedDateInput extends BrnDateInput {
+    _commitState = inject(HlmDatePickerCommitState);
+    _inputValue = linkedSignal({ ...(ngDevMode ? { debugName: "_inputValue" } : /* istanbul ignore next */ {}), source: () => ({
+            revision: this._commitState.revision(),
+            formatted: this._datePicker.formattedDate(),
+            value: this._datePicker.value?.(),
+            inputValue: this.inputValue(),
+        }),
+        computation: (source, previous) => {
+            if (!previous)
+                return source.formatted ?? source.inputValue;
+            if (source.revision !== previous.source.revision ||
+                source.value !== previous.source.value ||
+                source.formatted !== previous.source.formatted)
+                return source.formatted ?? '';
+            if (source.inputValue !== previous.source.inputValue)
+                return source.inputValue;
+            return previous.value;
+        } });
+    /** Rejected text stays invalid until a successful commit, clear, or external value write. */
+    inputInvalid = linkedSignal(() => {
+        this._commitState.revision();
+        this._datePicker.value?.();
+        this.inputValue();
+        return false;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputInvalid" }] : /* istanbul ignore next */ []));
+    _commitDate() {
+        if (this._disabled() || this.readonly())
+            return;
+        const text = this._inputValue();
+        const parsed = text ? this.parseValue(text) : null;
+        const picker = this._datePicker;
+        const accepted = (!text || parsed != null) && picker.updateDate(parsed);
+        this.inputInvalid.set(!accepted);
+        this._datePicker.touched?.();
+    }
+    _handleBlur() {
+        if (this._disabled() || this.readonly())
+            return;
+        this._commitDate();
+        if (!this.inputInvalid())
+            this._inputValue.set(this._datePicker.formattedDate() ?? '');
+    }
+    _handleEnter(event) {
+        event.preventDefault();
+        if (this._disabled() || this.readonly())
+            return;
+        this._commitDate();
+        if (!this.inputInvalid()) {
+            this._popover().close();
+            this._handleFocus();
+        }
+    }
+    _handleFocus() {
+        if (!this.inputInvalid())
+            super._handleFocus();
+    }
+    _clear() {
+        if (this._disabled() || this.readonly())
+            return;
+        this._inputValue.set('');
+        this._commitDate();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmConstrainedDateInput, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmConstrainedDateInput, isStandalone: true, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmConstrainedDateInput, decorators: [{
+            type: Directive
+        }] });
+
+class HlmDateMultiInput extends HlmConstrainedDateInput {
     _config = injectHlmDatePickerMultiConfig();
     /** Native `name` attribute forwarded to the inner `<input>`. */
     name = input(undefined, /* @ts-ignore */
@@ -91,9 +186,9 @@ class HlmDateMultiInput extends BrnDateInput {
         classes(() => [this.userClass()]);
     }
     /**
-     * Parses input text into dates. Return `null` for invalid input - the
-     * picker's dates are cleared while the text is preserved so the user can
-     * fix it.
+     * Parses input text into dates. Return `null` for invalid input. Rejected
+     * text stays editable and aria-invalid; the committed value is preserved.
+     * Empty text explicitly clears on blur/Enter.
      *
      * Defaults to `parseDate` from `HlmDatePickerMultiConfig`.
      */
@@ -126,7 +221,8 @@ class HlmDateMultiInput extends BrnDateInput {
       [placeholder]="placeholder()"
       [readonly]="readonly()"
       [disabled]="_disabled()"
-      [forceInvalid]="forceInvalid()"
+      [attr.aria-invalid]="forceInvalid() || inputInvalid() ? 'true' : null"
+      [attr.data-matches-spartan-invalid]="forceInvalid() || inputInvalid() ? 'true' : null"
       [class]="$inputClass()"
       (click)="_handleClick()"
       (keydown.arrowDown)="_open()"
@@ -180,7 +276,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
       [placeholder]="placeholder()"
       [readonly]="readonly()"
       [disabled]="_disabled()"
-      [forceInvalid]="forceInvalid()"
+      [attr.aria-invalid]="forceInvalid() || inputInvalid() ? 'true' : null"
+      [attr.data-matches-spartan-invalid]="forceInvalid() || inputInvalid() ? 'true' : null"
       [class]="$inputClass()"
       (click)="_handleClick()"
       (keydown.arrowDown)="_open()"
@@ -244,6 +341,11 @@ const HLM_DATE_PICKER_VALUE_ACCESSOR = {
 };
 class HlmDatePicker {
     _config = injectHlmDatePickerConfig();
+    _dateAdapter = injectDateAdapter();
+    _commitState = inject(HlmDatePickerCommitState);
+    _calendar = viewChild((BrnCalendar), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_calendar" }] : /* istanbul ignore next */ []));
+    _restoringCalendar = false;
     popover = viewChild.required(BrnPopover, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "popover" }] : /* istanbul ignore next */ []));
     _trigger = contentChild(BrnDatePickerTriggerToken, /* @ts-ignore */
@@ -305,30 +407,46 @@ class HlmDatePicker {
             this._onTouched?.();
     }
     _handleChange(value) {
-        if (this.disabledState())
+        if (this._restoringCalendar)
             return;
-        this.updateDate(value ?? null);
+        if (!this.updateDate(value ?? null)) {
+            // Brain model signals have already changed before their output fires.
+            this._restoringCalendar = true;
+            try {
+                this._calendar()?.date.set(this._mutableDate());
+            }
+            finally {
+                this._restoringCalendar = false;
+            }
+            return;
+        }
         if (this.autoCloseOnSelect()) {
             this._popoverState.set('closed');
         }
     }
     /**
-     * Commit a date to the picker. Updates the internal model, notifies form
-     * controls, and emits `dateChange`. Unlike `_handleChange`, this does not
-     * close the popover - it's intended to be called from a text input that
-     * is parsing user-entered values while typing.
+     * Commit a user value (null clears). Returns false without changing/emitting
+     * the model when disabled or when the raw/transformed date is invalid or
+     * outside the adapter's inclusive whole-day min/max bounds.
      */
     updateDate(value) {
         if (this.disabledState())
-            return;
+            return false;
+        if (value != null && !isSelectableDate(this._dateAdapter, value, this.min(), this.max()))
+            return false;
         const transformedDate = value != null ? this.transformDate()(value) : undefined;
+        if (value != null && !isSelectableDate(this._dateAdapter, transformedDate, this.min(), this.max()))
+            return false;
         this._mutableDate.set(transformedDate);
+        this._commitState.changed();
         this._onChange?.(transformedDate ?? null);
         this.dateChange.emit(transformedDate ?? null);
+        return true;
     }
-    /** CONTROL VALUE ACCESSOR */
+    /** Programmatic CVA write: transforms without enforcing user constraints or emitting. Clears rejected text. */
     writeValue(value) {
-        this._mutableDate.set(value ? this.transformDate()(value) : undefined);
+        this._mutableDate.set(value != null ? this.transformDate()(value) : undefined);
+        this._commitState.changed();
     }
     registerOnChange(fn) {
         this._onChange = fn;
@@ -350,24 +468,35 @@ class HlmDatePicker {
     }
     reset() {
         this._mutableDate.set(undefined);
+        this._commitState.changed();
         this._onChange?.(null);
         this.dateChange.emit(null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.3", type: HlmDatePicker, isStandalone: true, selector: "hlm-date-picker", inputs: { captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, wrapperDisabled: { classPropertyName: "wrapperDisabled", publicName: "wrapperDisabled", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, defaultFocusedDate: { classPropertyName: "defaultFocusedDate", publicName: "defaultFocusedDate", isSignal: true, isRequired: false, transformFunction: null }, autoCloseOnSelect: { classPropertyName: "autoCloseOnSelect", publicName: "autoCloseOnSelect", isSignal: true, isRequired: false, transformFunction: null }, formatDate: { classPropertyName: "formatDate", publicName: "formatDate", isSignal: true, isRequired: false, transformFunction: null }, transformDate: { classPropertyName: "transformDate", publicName: "transformDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateChange: "dateChange" }, host: { classAttribute: "block w-full min-w-0 max-w-full" }, providers: [HLM_DATE_PICKER_VALUE_ACCESSOR, provideBrnDatePicker(HlmDatePicker), provideBrnLabelable(HlmDatePicker)], queries: [{ propertyName: "_trigger", first: true, predicate: BrnDatePickerTriggerToken, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "popover", first: true, predicate: BrnPopover, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1$1.BrnFieldControl }], ngImport: i0, template: "\n    <hlm-popover sideOffset=\"5\" [state]=\"_popoverState()\" (stateChanged)=\"_onStateChange($event)\">\n      <ng-content />\n\n      <hlm-popover-content class=\"w-fit p-0\" *hlmPopoverPortal=\"let ctx\">\n        <ng-content select=\"[hlmDatePickerHeader]\" />\n        <hlm-calendar\n          class=\"rounded-none border-0\"\n          [captionLayout]=\"captionLayout()\"\n          [date]=\"_mutableDate()\"\n          [defaultFocusedDate]=\"_mutableDate() ?? defaultFocusedDate()\"\n          [min]=\"min()\"\n          [max]=\"max()\"\n          [disabled]=\"disabledState()\"\n          (dateChange)=\"_handleChange($event)\"\n        />\n        <ng-content select=\"[hlmDatePickerFooter]\" />\n      </hlm-popover-content>\n    </hlm-popover>\n  ", isInline: true, dependencies: [{ kind: "directive", type: i2.HlmPopover, selector: "[hlmPopover],hlm-popover" }, { kind: "directive", type: i2.HlmPopoverContent, selector: "[hlmPopoverContent],hlm-popover-content" }, { kind: "directive", type: i2.HlmPopoverPortal, selector: "[hlmPopoverPortal]" }, { kind: "component", type: HlmCalendar, selector: "hlm-calendar", inputs: ["captionLayout"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.3", type: HlmDatePicker, isStandalone: true, selector: "hlm-date-picker", inputs: { captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, wrapperDisabled: { classPropertyName: "wrapperDisabled", publicName: "wrapperDisabled", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, defaultFocusedDate: { classPropertyName: "defaultFocusedDate", publicName: "defaultFocusedDate", isSignal: true, isRequired: false, transformFunction: null }, autoCloseOnSelect: { classPropertyName: "autoCloseOnSelect", publicName: "autoCloseOnSelect", isSignal: true, isRequired: false, transformFunction: null }, formatDate: { classPropertyName: "formatDate", publicName: "formatDate", isSignal: true, isRequired: false, transformFunction: null }, transformDate: { classPropertyName: "transformDate", publicName: "transformDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateChange: "dateChange" }, host: { classAttribute: "block w-full min-w-0 max-w-full" }, providers: [
+            HlmDatePickerCommitState,
+            HLM_DATE_PICKER_VALUE_ACCESSOR,
+            provideBrnDatePicker(HlmDatePicker),
+            provideBrnLabelable(HlmDatePicker),
+        ], queries: [{ propertyName: "_trigger", first: true, predicate: BrnDatePickerTriggerToken, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_calendar", first: true, predicate: (BrnCalendar), descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: BrnPopover, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1$1.BrnFieldControl }], ngImport: i0, template: "\n    <hlm-popover sideOffset=\"5\" [state]=\"_popoverState()\" (stateChanged)=\"_onStateChange($event)\">\n      <ng-content />\n\n      <hlm-popover-content class=\"w-fit p-0\" *hlmPopoverPortal=\"let ctx\">\n        <ng-content select=\"[hlmDatePickerHeader]\" />\n        <hlm-calendar\n          class=\"rounded-none border-0\"\n          [captionLayout]=\"captionLayout()\"\n          [date]=\"_mutableDate()\"\n          [defaultFocusedDate]=\"_mutableDate() ?? defaultFocusedDate()\"\n          [min]=\"min()\"\n          [max]=\"max()\"\n          [disabled]=\"disabledState()\"\n          (dateChange)=\"_handleChange($event)\"\n        />\n        <ng-content select=\"[hlmDatePickerFooter]\" />\n      </hlm-popover-content>\n    </hlm-popover>\n  ", isInline: true, dependencies: [{ kind: "directive", type: i2.HlmPopover, selector: "[hlmPopover],hlm-popover" }, { kind: "directive", type: i2.HlmPopoverContent, selector: "[hlmPopoverContent],hlm-popover-content" }, { kind: "directive", type: i2.HlmPopoverPortal, selector: "[hlmPopoverPortal]" }, { kind: "component", type: HlmCalendar, selector: "hlm-calendar", inputs: ["captionLayout"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDatePicker, decorators: [{
             type: Component,
             args: [{
                     selector: 'hlm-date-picker',
                     imports: [HlmPopoverImports, HlmCalendar],
-                    providers: [HLM_DATE_PICKER_VALUE_ACCESSOR, provideBrnDatePicker(HlmDatePicker), provideBrnLabelable(HlmDatePicker)],
+                    providers: [
+                        HlmDatePickerCommitState,
+                        HLM_DATE_PICKER_VALUE_ACCESSOR,
+                        provideBrnDatePicker(HlmDatePicker),
+                        provideBrnLabelable(HlmDatePicker),
+                    ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     hostDirectives: [BrnFieldControl],
                     host: { class: "block w-full min-w-0 max-w-full" },
                     template: "\n    <hlm-popover sideOffset=\"5\" [state]=\"_popoverState()\" (stateChanged)=\"_onStateChange($event)\">\n      <ng-content />\n\n      <hlm-popover-content class=\"w-fit p-0\" *hlmPopoverPortal=\"let ctx\">\n        <ng-content select=\"[hlmDatePickerHeader]\" />\n        <hlm-calendar\n          class=\"rounded-none border-0\"\n          [captionLayout]=\"captionLayout()\"\n          [date]=\"_mutableDate()\"\n          [defaultFocusedDate]=\"_mutableDate() ?? defaultFocusedDate()\"\n          [min]=\"min()\"\n          [max]=\"max()\"\n          [disabled]=\"disabledState()\"\n          (dateChange)=\"_handleChange($event)\"\n        />\n        <ng-content select=\"[hlmDatePickerFooter]\" />\n      </hlm-popover-content>\n    </hlm-popover>\n  ",
                 }]
-        }], propDecorators: { popover: [{ type: i0.ViewChild, args: [i0.forwardRef(() => BrnPopover), { isSignal: true }] }], _trigger: [{ type: i0.ContentChild, args: [i0.forwardRef(() => BrnDatePickerTriggerToken), { isSignal: true }] }], captionLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionLayout", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], wrapperDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrapperDisabled", required: false }] }], date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: false }] }], defaultFocusedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultFocusedDate", required: false }] }], autoCloseOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoCloseOnSelect", required: false }] }], formatDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatDate", required: false }] }], transformDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "transformDate", required: false }] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }] } });
+        }], propDecorators: { _calendar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => BrnCalendar), { isSignal: true }] }], popover: [{ type: i0.ViewChild, args: [i0.forwardRef(() => BrnPopover), { isSignal: true }] }], _trigger: [{ type: i0.ContentChild, args: [i0.forwardRef(() => BrnDatePickerTriggerToken), { isSignal: true }] }], captionLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionLayout", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], wrapperDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrapperDisabled", required: false }] }], date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: false }] }], defaultFocusedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultFocusedDate", required: false }] }], autoCloseOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoCloseOnSelect", required: false }] }], formatDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatDate", required: false }] }], transformDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "transformDate", required: false }] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }] } });
 
 class HlmDatePickerAnchor {
     _host = inject(ElementRef, { host: true });
@@ -389,7 +518,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
             args: [{ selector: '[hlmDatePickerAnchor]' }]
         }], ctorParameters: () => [], propDecorators: { hlmDatePickerAnchorForInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "hlmDatePickerAnchorFor", required: false }] }] } });
 
-class HlmDatePickerInput extends BrnDateInput {
+class HlmDatePickerInput extends HlmConstrainedDateInput {
     _config = injectHlmDatePickerConfig();
     ariaLabel = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
@@ -413,8 +542,8 @@ class HlmDatePickerInput extends BrnDateInput {
     }
     /**
      * Parses input text into a date value. Return `null` for invalid
-     * input - the picker's date is cleared while the text is preserved so
-     * the user can fix it.
+     * input. Rejected text stays editable and aria-invalid; the committed value
+     * is preserved. Empty text explicitly clears on blur/Enter.
      *
      * Defaults to `parseDate` from `HlmDatePickerConfig`.
      */
@@ -447,7 +576,8 @@ class HlmDatePickerInput extends BrnDateInput {
       [placeholder]="placeholder()"
       [readonly]="readonly()"
       [disabled]="_disabled()"
-      [forceInvalid]="forceInvalid()"
+      [attr.aria-invalid]="forceInvalid() || inputInvalid() ? 'true' : null"
+      [attr.data-matches-spartan-invalid]="forceInvalid() || inputInvalid() ? 'true' : null"
       [class]="$inputClass()"
       (click)="_handleClick()"
       (keydown.arrowDown)="_open()"
@@ -501,7 +631,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
       [placeholder]="placeholder()"
       [readonly]="readonly()"
       [disabled]="_disabled()"
-      [forceInvalid]="forceInvalid()"
+      [attr.aria-invalid]="forceInvalid() || inputInvalid() ? 'true' : null"
+      [attr.data-matches-spartan-invalid]="forceInvalid() || inputInvalid() ? 'true' : null"
       [class]="$inputClass()"
       (click)="_handleClick()"
       (keydown.arrowDown)="_open()"
@@ -544,6 +675,11 @@ const HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR = {
 };
 class HlmDatePickerMulti {
     _config = injectHlmDatePickerMultiConfig();
+    _dateAdapter = injectDateAdapter();
+    _commitState = inject(HlmDatePickerCommitState);
+    _calendar = viewChild((BrnCalendarMulti), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_calendar" }] : /* istanbul ignore next */ []));
+    _restoringCalendar = false;
     popover = viewChild.required(BrnPopover, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "popover" }] : /* istanbul ignore next */ []));
     _trigger = contentChild(BrnDatePickerTriggerToken, /* @ts-ignore */
@@ -557,7 +693,7 @@ class HlmDatePickerMulti {
     /** The maximum date that can be selected. */
     max = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "max" }] : /* istanbul ignore next */ []));
-    /** The minimum selectable dates.  */
+    /** Deselection floor; selection can grow from empty below this count. Explicit clear is allowed. */
     minSelection = input(undefined, { ...(ngDevMode ? { debugName: "minSelection" } : /* istanbul ignore next */ {}), transform: numberAttribute });
     /** The maximum selectable dates.  */
     maxSelection = input(undefined, { ...(ngDevMode ? { debugName: "maxSelection" } : /* istanbul ignore next */ {}), transform: numberAttribute });
@@ -605,37 +741,58 @@ class HlmDatePickerMulti {
             this._onTouched?.();
     }
     _handleChange(value) {
-        if (value === undefined)
+        if (this._restoringCalendar || value === undefined)
             return;
-        if (this._disabled())
+        if (!this.updateDate(value)) {
+            // Restore the calendar's already-mutated model without a second user commit.
+            this._restoringCalendar = true;
+            try {
+                this._calendar()?.date.set(this._mutableDate());
+            }
+            finally {
+                this._restoringCalendar = false;
+            }
             return;
-        const transformedDate = value !== undefined ? this.transformDates()(value) : value;
-        this._mutableDate.set(transformedDate);
-        this._onChange?.(transformedDate);
-        this.dateChange.emit(transformedDate);
+        }
         if (this.autoCloseOnMaxSelection() && this._mutableDate()?.length === this.maxSelection()) {
             this._popoverState.set('closed');
         }
     }
     /**
-     * Commit dates to the picker. Updates the internal model, notifies form
-     * controls, and emits `dateChange`. Intended to be called from a text input
-     * that parses user-entered values. Pass `null` to clear the selection.
+     * Commit user dates, validating raw and transformed dates/counts. Returns
+     * false without changing/emitting on rejection. Min selection prevents
+     * reductions below the floor, but permits growth from empty. Null explicitly
+     * clears (emits []), bypassing the selection floor and transform.
      */
     updateDate(value) {
         if (this._disabled())
-            return;
+            return false;
+        if (value && !this._isSelectionAllowed(value))
+            return false;
         const transformedDate = value ? this.transformDates()(value) : undefined;
+        if (value && (!transformedDate || !this._isSelectionAllowed(transformedDate)))
+            return false;
         this._mutableDate.set(transformedDate);
+        this._commitState.changed();
         this._onChange?.(transformedDate ?? []);
         this.dateChange.emit(transformedDate ?? []);
+        return true;
+    }
+    _isSelectionAllowed(dates) {
+        const min = this.minSelection();
+        const max = this.maxSelection();
+        const currentCount = this._mutableDate()?.length ?? 0;
+        return (!(max != null && dates.length > max) &&
+            !(min != null && dates.length < min && dates.length < currentCount) &&
+            dates.every((date) => isSelectableDate(this._dateAdapter, date, this.min(), this.max())));
     }
     touched() {
         this._onTouched?.();
     }
-    /** CONTROL VALUE ACCESSOR */
+    /** Programmatic CVA write: transforms without enforcing user constraints or emitting. Clears rejected text. */
     writeValue(value) {
         this._mutableDate.set(value ? this.transformDates()(value) : undefined);
+        this._commitState.changed();
     }
     registerOnChange(fn) {
         this._onChange = fn;
@@ -654,15 +811,17 @@ class HlmDatePickerMulti {
     }
     reset() {
         this._mutableDate.set(undefined);
+        this._commitState.changed();
         this._onChange?.([]);
         this.dateChange.emit([]);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDatePickerMulti, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.3", type: HlmDatePickerMulti, isStandalone: true, selector: "hlm-date-picker-multi", inputs: { captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, minSelection: { classPropertyName: "minSelection", publicName: "minSelection", isSignal: true, isRequired: false, transformFunction: null }, maxSelection: { classPropertyName: "maxSelection", publicName: "maxSelection", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, autoCloseOnMaxSelection: { classPropertyName: "autoCloseOnMaxSelection", publicName: "autoCloseOnMaxSelection", isSignal: true, isRequired: false, transformFunction: null }, formatDates: { classPropertyName: "formatDates", publicName: "formatDates", isSignal: true, isRequired: false, transformFunction: null }, transformDates: { classPropertyName: "transformDates", publicName: "transformDates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateChange: "dateChange" }, host: { classAttribute: "block" }, providers: [
+            HlmDatePickerCommitState,
             HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR,
             provideBrnDatePicker(HlmDatePickerMulti),
             provideBrnLabelable(HlmDatePickerMulti),
-        ], queries: [{ propertyName: "_trigger", first: true, predicate: BrnDatePickerTriggerToken, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "popover", first: true, predicate: BrnPopover, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1$1.BrnFieldControl }], ngImport: i0, template: "\n    <hlm-popover sideOffset=\"5\" [state]=\"_popoverState()\" (stateChanged)=\"_onStateChange($event)\">\n      <ng-content />\n\n      <hlm-popover-content class=\"w-fit p-0\" *hlmPopoverPortal=\"let ctx\">\n        <ng-content select=\"[hlmDatePickerHeader]\" />\n        <hlm-calendar-multi\n          class=\"rounded-none border-0\"\n          [date]=\"_mutableDate()\"\n          [captionLayout]=\"captionLayout()\"\n          [min]=\"min()\"\n          [max]=\"max()\"\n          [minSelection]=\"minSelection()\"\n          [maxSelection]=\"maxSelection()\"\n          [disabled]=\"_disabled()\"\n          (dateChange)=\"_handleChange($event)\"\n        />\n        <ng-content select=\"[hlmDatePickerFooter]\" />\n      </hlm-popover-content>\n    </hlm-popover>\n  ", isInline: true, dependencies: [{ kind: "directive", type: i2.HlmPopover, selector: "[hlmPopover],hlm-popover" }, { kind: "directive", type: i2.HlmPopoverContent, selector: "[hlmPopoverContent],hlm-popover-content" }, { kind: "directive", type: i2.HlmPopoverPortal, selector: "[hlmPopoverPortal]" }, { kind: "component", type: HlmCalendarMulti, selector: "hlm-calendar-multi", inputs: ["captionLayout"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "_trigger", first: true, predicate: BrnDatePickerTriggerToken, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_calendar", first: true, predicate: (BrnCalendarMulti), descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: BrnPopover, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1$1.BrnFieldControl }], ngImport: i0, template: "\n    <hlm-popover sideOffset=\"5\" [state]=\"_popoverState()\" (stateChanged)=\"_onStateChange($event)\">\n      <ng-content />\n\n      <hlm-popover-content class=\"w-fit p-0\" *hlmPopoverPortal=\"let ctx\">\n        <ng-content select=\"[hlmDatePickerHeader]\" />\n        <hlm-calendar-multi\n          class=\"rounded-none border-0\"\n          [date]=\"_mutableDate()\"\n          [captionLayout]=\"captionLayout()\"\n          [min]=\"min()\"\n          [max]=\"max()\"\n          [minSelection]=\"minSelection()\"\n          [maxSelection]=\"maxSelection()\"\n          [disabled]=\"_disabled()\"\n          (dateChange)=\"_handleChange($event)\"\n        />\n        <ng-content select=\"[hlmDatePickerFooter]\" />\n      </hlm-popover-content>\n    </hlm-popover>\n  ", isInline: true, dependencies: [{ kind: "directive", type: i2.HlmPopover, selector: "[hlmPopover],hlm-popover" }, { kind: "directive", type: i2.HlmPopoverContent, selector: "[hlmPopoverContent],hlm-popover-content" }, { kind: "directive", type: i2.HlmPopoverPortal, selector: "[hlmPopoverPortal]" }, { kind: "component", type: HlmCalendarMulti, selector: "hlm-calendar-multi", inputs: ["captionLayout"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDatePickerMulti, decorators: [{
             type: Component,
@@ -670,6 +829,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
                     selector: 'hlm-date-picker-multi',
                     imports: [HlmPopoverImports, HlmCalendarMulti],
                     providers: [
+                        HlmDatePickerCommitState,
                         HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR,
                         provideBrnDatePicker(HlmDatePickerMulti),
                         provideBrnLabelable(HlmDatePickerMulti),
@@ -679,7 +839,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
                     host: { class: 'block' },
                     template: "\n    <hlm-popover sideOffset=\"5\" [state]=\"_popoverState()\" (stateChanged)=\"_onStateChange($event)\">\n      <ng-content />\n\n      <hlm-popover-content class=\"w-fit p-0\" *hlmPopoverPortal=\"let ctx\">\n        <ng-content select=\"[hlmDatePickerHeader]\" />\n        <hlm-calendar-multi\n          class=\"rounded-none border-0\"\n          [date]=\"_mutableDate()\"\n          [captionLayout]=\"captionLayout()\"\n          [min]=\"min()\"\n          [max]=\"max()\"\n          [minSelection]=\"minSelection()\"\n          [maxSelection]=\"maxSelection()\"\n          [disabled]=\"_disabled()\"\n          (dateChange)=\"_handleChange($event)\"\n        />\n        <ng-content select=\"[hlmDatePickerFooter]\" />\n      </hlm-popover-content>\n    </hlm-popover>\n  ",
                 }]
-        }], propDecorators: { popover: [{ type: i0.ViewChild, args: [i0.forwardRef(() => BrnPopover), { isSignal: true }] }], _trigger: [{ type: i0.ContentChild, args: [i0.forwardRef(() => BrnDatePickerTriggerToken), { isSignal: true }] }], captionLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionLayout", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], minSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSelection", required: false }] }], maxSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelection", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: false }] }], autoCloseOnMaxSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoCloseOnMaxSelection", required: false }] }], formatDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatDates", required: false }] }], transformDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "transformDates", required: false }] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }] } });
+        }], propDecorators: { _calendar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => BrnCalendarMulti), { isSignal: true }] }], popover: [{ type: i0.ViewChild, args: [i0.forwardRef(() => BrnPopover), { isSignal: true }] }], _trigger: [{ type: i0.ContentChild, args: [i0.forwardRef(() => BrnDatePickerTriggerToken), { isSignal: true }] }], captionLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionLayout", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], minSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSelection", required: false }] }], maxSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelection", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: false }] }], autoCloseOnMaxSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoCloseOnMaxSelection", required: false }] }], formatDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatDates", required: false }] }], transformDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "transformDates", required: false }] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }] } });
 
 class HlmDatePickerTrigger {
     static _nextId = 0;
@@ -747,7 +907,7 @@ function getDefaultConfig$1() {
             if (isNaN(start.getTime()))
                 return null;
             const end = parts.length === 2 ? new Date(parts[1]) : start;
-            return [start, isNaN(end.getTime()) ? start : end];
+            return isNaN(end.getTime()) ? null : [start, end];
         },
     };
 }
@@ -760,7 +920,7 @@ function injectHlmDateRangePickerConfig() {
     return injectedConfig ? injectedConfig : getDefaultConfig$1();
 }
 
-class HlmDateRangeInput extends BrnDateInput {
+class HlmDateRangeInput extends HlmConstrainedDateInput {
     _config = injectHlmDateRangePickerConfig();
     /** Native `name` attribute forwarded to the inner `<input>`. */
     name = input(undefined, /* @ts-ignore */
@@ -784,8 +944,8 @@ class HlmDateRangeInput extends BrnDateInput {
     }
     /**
      * Parses input text into a date range. Return `null` for invalid
-     * input - the picker's range is cleared while the text is preserved so
-     * the user can fix it.
+     * input. Rejected text stays editable and aria-invalid; the committed value
+     * is preserved. Empty text explicitly clears on blur/Enter.
      *
      * Defaults to `parseDate` from `HlmDateRangePickerConfig`.
      */
@@ -818,7 +978,8 @@ class HlmDateRangeInput extends BrnDateInput {
       [placeholder]="placeholder()"
       [readonly]="readonly()"
       [disabled]="_disabled()"
-      [forceInvalid]="forceInvalid()"
+      [attr.aria-invalid]="forceInvalid() || inputInvalid() ? 'true' : null"
+      [attr.data-matches-spartan-invalid]="forceInvalid() || inputInvalid() ? 'true' : null"
       [class]="$inputClass()"
       (click)="_handleClick()"
       (keydown.arrowDown)="_open()"
@@ -872,7 +1033,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
       [placeholder]="placeholder()"
       [readonly]="readonly()"
       [disabled]="_disabled()"
-      [forceInvalid]="forceInvalid()"
+      [attr.aria-invalid]="forceInvalid() || inputInvalid() ? 'true' : null"
+      [attr.data-matches-spartan-invalid]="forceInvalid() || inputInvalid() ? 'true' : null"
       [class]="$inputClass()"
       (click)="_handleClick()"
       (keydown.arrowDown)="_open()"
@@ -915,6 +1077,11 @@ const HLM_DATE_RANGE_PICKER_VALUE_ACCESSOR = {
 };
 class HlmDateRangePicker {
     _config = injectHlmDateRangePickerConfig();
+    _dateAdapter = injectDateAdapter();
+    _commitState = inject(HlmDatePickerCommitState);
+    _calendar = viewChild((BrnCalendarRange), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_calendar" }] : /* istanbul ignore next */ []));
+    _restoringCalendar = false;
     popover = viewChild.required(BrnPopover, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "popover" }] : /* istanbul ignore next */ []));
     _trigger = contentChild(BrnDatePickerTriggerToken, /* @ts-ignore */
@@ -979,50 +1146,85 @@ class HlmDateRangePicker {
         }
     }
     _handleStartDayChange(value) {
+        if (this._restoringCalendar)
+            return;
+        if (this._disabled() || (value != null && !isSelectableDate(this._dateAdapter, value, this.min(), this.max()))) {
+            this._restoreCalendar();
+            return;
+        }
         this._start.set(value);
     }
     _handleEndDateChange(value) {
-        this._end.set(value);
-        if (this._disabled())
+        if (this._restoringCalendar)
+            return;
+        if (this._disabled()) {
+            this._restoreCalendar();
             return;
+        }
+        if (value == null) {
+            this._end.set(undefined);
+            return;
+        }
         const start = this._start();
-        if (start && value) {
-            const transformedDates = this.transformDates()([start, value]);
-            this._mutableDate.set(transformedDates);
-            this.dateChange.emit(transformedDates);
-            this._onChange?.(transformedDates);
+        if (start != null) {
+            if (!this.updateDate([start, value])) {
+                this._restoreCalendar();
+                return;
+            }
             if (this.autoCloseOnEndSelection()) {
                 this._popoverState.set('closed');
             }
         }
     }
+    _restoreCalendar() {
+        this._start.set(this._mutableDate()?.[0]);
+        this._end.set(this._mutableDate()?.[1]);
+        this._restoringCalendar = true;
+        try {
+            this._calendar()?.startDate.set(this._start());
+            this._calendar()?.endDate.set(this._end());
+        }
+        finally {
+            this._restoringCalendar = false;
+        }
+    }
     /**
-     * Commit a range to the picker. Updates the internal model, notifies form
-     * controls, and emits `dateChange`. Intended to be called from a text input
-     * that parses user-entered values. Pass `null` to clear the range.
+     * Commit a user range (null clears). Both raw/transformed endpoints must
+     * satisfy adapter whole-day bounds; the transformed range must be ordered.
+     * Returns false without changing/emitting the model on rejection or disabled.
      */
     updateDate(value) {
         if (this._disabled())
-            return;
+            return false;
         if (!value) {
             this._mutableDate.set(undefined);
             this._start.set(undefined);
             this._end.set(undefined);
+            this._commitState.changed();
             this._onChange?.(null);
             this.dateChange.emit(null);
-            return;
+            return true;
         }
+        if (!this._isRangeAllowed(value))
+            return false;
         const transformedDates = this.transformDates()(value);
+        if (!this._isRangeAllowed(transformedDates) || this._dateAdapter.isAfter(transformedDates[0], transformedDates[1]))
+            return false;
         this._mutableDate.set(transformedDates);
         this._start.set(transformedDates[0]);
         this._end.set(transformedDates[1]);
+        this._commitState.changed();
         this._onChange?.(transformedDates);
         this.dateChange.emit(transformedDates);
+        return true;
+    }
+    _isRangeAllowed(dates) {
+        return (dates?.length === 2 && dates.every((date) => isSelectableDate(this._dateAdapter, date, this.min(), this.max())));
     }
     touched() {
         this._onTouched?.();
     }
-    /** CONTROL VALUE ACCESSOR */
+    /** Programmatic CVA write: transforms without enforcing user constraints or emitting. Clears rejected text. */
     writeValue(value) {
         untracked(() => {
             if (!value) {
@@ -1031,6 +1233,7 @@ class HlmDateRangePicker {
             else {
                 this._mutableDate.set(this.transformDates()(value));
             }
+            this._commitState.changed();
         });
     }
     registerOnChange(fn) {
@@ -1052,6 +1255,7 @@ class HlmDateRangePicker {
         this._mutableDate.set(undefined);
         this._start.set(undefined);
         this._end.set(undefined);
+        this._commitState.changed();
         this._onChange?.(null);
         this.dateChange.emit(null);
     }
@@ -1064,10 +1268,11 @@ class HlmDateRangePicker {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDateRangePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.3", type: HlmDateRangePicker, isStandalone: true, selector: "hlm-date-range-picker", inputs: { captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, autoCloseOnEndSelection: { classPropertyName: "autoCloseOnEndSelection", publicName: "autoCloseOnEndSelection", isSignal: true, isRequired: false, transformFunction: null }, formatDates: { classPropertyName: "formatDates", publicName: "formatDates", isSignal: true, isRequired: false, transformFunction: null }, transformDates: { classPropertyName: "transformDates", publicName: "transformDates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateChange: "dateChange" }, host: { classAttribute: "block" }, providers: [
+            HlmDatePickerCommitState,
             HLM_DATE_RANGE_PICKER_VALUE_ACCESSOR,
             provideBrnDatePicker(HlmDateRangePicker),
             provideBrnLabelable(HlmDateRangePicker),
-        ], queries: [{ propertyName: "_trigger", first: true, predicate: BrnDatePickerTriggerToken, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "popover", first: true, predicate: BrnPopover, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1$1.BrnFieldControl }], ngImport: i0, template: "\n    <hlm-popover sideOffset=\"5\" [state]=\"_popoverState()\" (stateChanged)=\"_onStateChange($event)\">\n      <ng-content />\n\n      <hlm-popover-content class=\"w-fit p-0\" *hlmPopoverPortal=\"let ctx\">\n        <ng-content select=\"[hlmDatePickerHeader]\" />\n        <hlm-calendar-range\n          class=\"rounded-none border-0\"\n          [startDate]=\"_start()\"\n          [captionLayout]=\"captionLayout()\"\n          [endDate]=\"_end()\"\n          [min]=\"min()\"\n          [max]=\"max()\"\n          [disabled]=\"_disabled()\"\n          (startDateChange)=\"_handleStartDayChange($event)\"\n          (endDateChange)=\"_handleEndDateChange($event)\"\n        />\n        <ng-content select=\"[hlmDatePickerFooter]\" />\n      </hlm-popover-content>\n    </hlm-popover>\n  ", isInline: true, dependencies: [{ kind: "directive", type: i2.HlmPopover, selector: "[hlmPopover],hlm-popover" }, { kind: "directive", type: i2.HlmPopoverContent, selector: "[hlmPopoverContent],hlm-popover-content" }, { kind: "directive", type: i2.HlmPopoverPortal, selector: "[hlmPopoverPortal]" }, { kind: "component", type: HlmCalendarRange, selector: "hlm-calendar-range", inputs: ["captionLayout"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "_trigger", first: true, predicate: BrnDatePickerTriggerToken, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_calendar", first: true, predicate: (BrnCalendarRange), descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: BrnPopover, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1$1.BrnFieldControl }], ngImport: i0, template: "\n    <hlm-popover sideOffset=\"5\" [state]=\"_popoverState()\" (stateChanged)=\"_onStateChange($event)\">\n      <ng-content />\n\n      <hlm-popover-content class=\"w-fit p-0\" *hlmPopoverPortal=\"let ctx\">\n        <ng-content select=\"[hlmDatePickerHeader]\" />\n        <hlm-calendar-range\n          class=\"rounded-none border-0\"\n          [startDate]=\"_start()\"\n          [captionLayout]=\"captionLayout()\"\n          [endDate]=\"_end()\"\n          [min]=\"min()\"\n          [max]=\"max()\"\n          [disabled]=\"_disabled()\"\n          (startDateChange)=\"_handleStartDayChange($event)\"\n          (endDateChange)=\"_handleEndDateChange($event)\"\n        />\n        <ng-content select=\"[hlmDatePickerFooter]\" />\n      </hlm-popover-content>\n    </hlm-popover>\n  ", isInline: true, dependencies: [{ kind: "directive", type: i2.HlmPopover, selector: "[hlmPopover],hlm-popover" }, { kind: "directive", type: i2.HlmPopoverContent, selector: "[hlmPopoverContent],hlm-popover-content" }, { kind: "directive", type: i2.HlmPopoverPortal, selector: "[hlmPopoverPortal]" }, { kind: "component", type: HlmCalendarRange, selector: "hlm-calendar-range", inputs: ["captionLayout"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDateRangePicker, decorators: [{
             type: Component,
@@ -1075,6 +1280,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
                     selector: 'hlm-date-range-picker',
                     imports: [HlmPopoverImports, HlmCalendarRange],
                     providers: [
+                        HlmDatePickerCommitState,
                         HLM_DATE_RANGE_PICKER_VALUE_ACCESSOR,
                         provideBrnDatePicker(HlmDateRangePicker),
                         provideBrnLabelable(HlmDateRangePicker),
@@ -1084,7 +1290,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
                     host: { class: 'block' },
                     template: "\n    <hlm-popover sideOffset=\"5\" [state]=\"_popoverState()\" (stateChanged)=\"_onStateChange($event)\">\n      <ng-content />\n\n      <hlm-popover-content class=\"w-fit p-0\" *hlmPopoverPortal=\"let ctx\">\n        <ng-content select=\"[hlmDatePickerHeader]\" />\n        <hlm-calendar-range\n          class=\"rounded-none border-0\"\n          [startDate]=\"_start()\"\n          [captionLayout]=\"captionLayout()\"\n          [endDate]=\"_end()\"\n          [min]=\"min()\"\n          [max]=\"max()\"\n          [disabled]=\"_disabled()\"\n          (startDateChange)=\"_handleStartDayChange($event)\"\n          (endDateChange)=\"_handleEndDateChange($event)\"\n        />\n        <ng-content select=\"[hlmDatePickerFooter]\" />\n      </hlm-popover-content>\n    </hlm-popover>\n  ",
                 }]
-        }], propDecorators: { popover: [{ type: i0.ViewChild, args: [i0.forwardRef(() => BrnPopover), { isSignal: true }] }], _trigger: [{ type: i0.ContentChild, args: [i0.forwardRef(() => BrnDatePickerTriggerToken), { isSignal: true }] }], captionLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionLayout", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: false }] }], autoCloseOnEndSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoCloseOnEndSelection", required: false }] }], formatDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatDates", required: false }] }], transformDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "transformDates", required: false }] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }] } });
+        }], propDecorators: { _calendar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => BrnCalendarRange), { isSignal: true }] }], popover: [{ type: i0.ViewChild, args: [i0.forwardRef(() => BrnPopover), { isSignal: true }] }], _trigger: [{ type: i0.ContentChild, args: [i0.forwardRef(() => BrnDatePickerTriggerToken), { isSignal: true }] }], captionLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionLayout", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: false }] }], autoCloseOnEndSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoCloseOnEndSelection", required: false }] }], formatDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatDates", required: false }] }], transformDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "transformDates", required: false }] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }] } });
 
 const mmYYYY = (date) => {
     if (!(date instanceof Date))