@egose/shadcn-theme-ng 0.0.26 → 0.0.28

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

@@ -1,19 +1,200 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, forwardRef, input, computed, booleanAttribute, linkedSignal, signal, output, ChangeDetectionStrategy, Component, numberAttribute, untracked, NgModule } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { InjectionToken, inject, input, ChangeDetectionStrategy, Component, forwardRef, viewChild, contentChild, booleanAttribute, linkedSignal, signal, computed, output, ElementRef, effect, Directive, numberAttribute, untracked, NgModule } from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
-import { lucideChevronDown } from '@ng-icons/lucide';
-import { BrnPopover, BrnPopoverTrigger, BrnPopoverContent } from '@spartan-ng/brain/popover';
-import { BrnFormFieldControl } from '@spartan-ng/brain/form-field';
-import { HlmCalendar, HlmCalendarMulti, HlmCalendarRange } from '@egose/shadcn-theme-ng/calendar';
-import { HlmIcon } from '@egose/shadcn-theme-ng/icon';
-import { HlmPopoverContent } from '@egose/shadcn-theme-ng/popover';
+import { lucideX, lucideCalendar, lucideChevronDown } from '@ng-icons/lucide';
+import { BrnDateInput, provideBrnDatePickerTrigger, BrnDatePickerTriggerToken, provideBrnDatePicker, injectBrnDatePicker } from '@spartan-ng/brain/date-picker';
+import * as i1 from '@egose/shadcn-theme-ng/input-group';
+import { HlmInputGroup, HlmInputGroupImports } from '@egose/shadcn-theme-ng/input-group';
+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 * 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';
+import { HlmPopoverImports, HlmPopoverTrigger } from '@egose/shadcn-theme-ng/popover';
+import { BrnOverlay } from '@spartan-ng/brain/overlay';
+import * as i1$2 from '@egose/shadcn-theme-ng/button';
+import { HlmButtonImports } from '@egose/shadcn-theme-ng/button';
 import { hlm } from '@egose/shadcn-theme-ng/utils';
 
+function getDefaultConfig$3() {
+    return {
+        formatDates: (dates) => dates.map((date) => (date instanceof Date ? date.toDateString() : `${date}`)).join(', '),
+        formatInputDates: (dates) => dates
+            .map((date) => {
+            if (!(date instanceof Date))
+                return `${date}`;
+            const day = String(date.getDate()).padStart(2, '0');
+            const month = String(date.getMonth() + 1).padStart(2, '0');
+            const year = date.getFullYear();
+            return `${day}/${month}/${year}`;
+        })
+            .join(', '),
+        transformDates: (dates) => dates,
+        autoCloseOnMaxSelection: false,
+        parseDate: (value) => {
+            if (typeof value !== 'string')
+                return null;
+            const parts = value.split(',').map((v) => v.trim());
+            const result = [];
+            for (const part of parts) {
+                const match = part.match(/^(\d{2})\/(\d{2})\/(\d{4})$/);
+                if (!match)
+                    return null;
+                const day = Number(match[1]);
+                const month = Number(match[2]);
+                const year = Number(match[3]);
+                if (month < 1 || month > 12)
+                    return null;
+                if (day < 1 || day > 31)
+                    return null;
+                const date = new Date(year, month - 1, day);
+                if (date.getFullYear() !== year || date.getMonth() !== month - 1 || date.getDate() !== day) {
+                    return null;
+                }
+                result.push(date);
+            }
+            return result;
+        },
+    };
+}
+const HlmDatePickerMultiConfigToken = new InjectionToken('HlmDatePickerMultiConfig');
+function provideHlmDatePickerMultiConfig(config) {
+    return { provide: HlmDatePickerMultiConfigToken, useValue: { ...getDefaultConfig$3(), ...config } };
+}
+function injectHlmDatePickerMultiConfig() {
+    const injectedConfig = inject(HlmDatePickerMultiConfigToken, { optional: true });
+    return injectedConfig ? injectedConfig : getDefaultConfig$3();
+}
+
+class HlmDateMultiInput extends BrnDateInput {
+    _config = injectHlmDatePickerMultiConfig();
+    /**
+     * 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.
+     *
+     * Defaults to `parseDate` from `HlmDatePickerMultiConfig`.
+     */
+    parseDate = input(this._config.parseDate, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "parseDate" }] : /* istanbul ignore next */ []));
+    /**
+     * Formats the current dates into the input/edit format shown while the
+     * input is focused. On blur the picker's display format is restored.
+     *
+     * Defaults to `formatInputDates` from `HlmDatePickerMultiConfig`.
+     */
+    formatInputDates = input(this._config.formatInputDates, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formatInputDates" }] : /* istanbul ignore next */ []));
+    parseValue(value) {
+        return this.parseDate()(value);
+    }
+    formatInputValue(value) {
+        return this.formatInputDates()(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDateMultiInput, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: HlmDateMultiInput, isStandalone: true, selector: "hlm-date-multi-input", inputs: { parseDate: { classPropertyName: "parseDate", publicName: "parseDate", isSignal: true, isRequired: false, transformFunction: null }, formatInputDates: { classPropertyName: "formatInputDates", publicName: "formatInputDates", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideIcons({ lucideCalendar, lucideX }), provideBrnDatePickerTrigger(HlmDateMultiInput)], usesInheritance: true, hostDirectives: [{ directive: i1.HlmInputGroup }], ngImport: i0, template: `
+    <input
+      #input
+      hlmInputGroupInput
+      [value]="_inputValue()"
+      [id]="inputId()"
+      [placeholder]="placeholder()"
+      [disabled]="_disabled()"
+      [forceInvalid]="forceInvalid()"
+      (click)="_handleClick()"
+      (keydown.arrowDown)="_open()"
+      (keydown.enter)="_handleEnter($event)"
+      (input)="_handleInputChange($event)"
+      (focus)="_handleFocus()"
+      (blur)="_handleBlur()"
+    />
+    <hlm-input-group-addon align="inline-end">
+      @if (_showClearButton()) {
+        <button
+          hlmInputGroupButton
+          size="icon-xs"
+          variant="ghost"
+          [attr.aria-label]="clearAriaLabel()"
+          (click)="_clear()"
+          [disabled]="_disabled()"
+        >
+          <ng-icon name="lucideX" />
+        </button>
+      }
+      <button
+        hlmInputGroupButton
+        size="icon-xs"
+        [attr.aria-label]="calendarAriaLabel()"
+        (click)="_popover().open()"
+        [disabled]="_disabled()"
+      >
+        <ng-icon name="lucideCalendar" />
+      </button>
+    </hlm-input-group-addon>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }, { kind: "directive", type: i1.HlmInputGroupButton, selector: "button[hlmInputGroupButton]", inputs: ["size", "type"] }, { kind: "directive", type: i1.HlmInputGroupInput, selector: "input[hlmInputGroupInput]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDateMultiInput, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hlm-date-multi-input',
+                    imports: [HlmInputGroupImports, NgIcon],
+                    providers: [provideIcons({ lucideCalendar, lucideX }), provideBrnDatePickerTrigger(HlmDateMultiInput)],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    hostDirectives: [HlmInputGroup],
+                    template: `
+    <input
+      #input
+      hlmInputGroupInput
+      [value]="_inputValue()"
+      [id]="inputId()"
+      [placeholder]="placeholder()"
+      [disabled]="_disabled()"
+      [forceInvalid]="forceInvalid()"
+      (click)="_handleClick()"
+      (keydown.arrowDown)="_open()"
+      (keydown.enter)="_handleEnter($event)"
+      (input)="_handleInputChange($event)"
+      (focus)="_handleFocus()"
+      (blur)="_handleBlur()"
+    />
+    <hlm-input-group-addon align="inline-end">
+      @if (_showClearButton()) {
+        <button
+          hlmInputGroupButton
+          size="icon-xs"
+          variant="ghost"
+          [attr.aria-label]="clearAriaLabel()"
+          (click)="_clear()"
+          [disabled]="_disabled()"
+        >
+          <ng-icon name="lucideX" />
+        </button>
+      }
+      <button
+        hlmInputGroupButton
+        size="icon-xs"
+        [attr.aria-label]="calendarAriaLabel()"
+        (click)="_popover().open()"
+        [disabled]="_disabled()"
+      >
+        <ng-icon name="lucideCalendar" />
+      </button>
+    </hlm-input-group-addon>
+  `,
+                }]
+        }], propDecorators: { parseDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "parseDate", required: false }] }], formatInputDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatInputDates", required: false }] }] } });
+
 function getDefaultConfig$2() {
     return {
         formatDate: (date) => (date instanceof Date ? date.toDateString() : `${date}`),
+        formatInputDate: (date) => (date instanceof Date ? date.toDateString() : `${date}`),
         transformDate: (date) => date,
+        parseDate: (value) => {
+            const date = new Date(value);
+            return isNaN(date.getTime()) ? null : date;
+        },
         autoCloseOnSelect: false,
     };
 }
@@ -31,52 +212,87 @@ const HLM_DATE_PICKER_VALUE_ACCESSOR = {
     useExisting: forwardRef(() => HlmDatePicker),
     multi: true,
 };
-let nextId$2 = 0;
-class HlmDatePicker extends BrnFormFieldControl {
+class HlmDatePicker {
     _config = injectHlmDatePickerConfig();
-    userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    _computedClass = computed(() => hlm('ring-offset-background border-input bg-background hover:bg-input/50 dark:bg-input/10 dark:hover:bg-input/50 inline-flex h-9 w-full cursor-default items-center justify-between gap-2 whitespace-nowrap rounded-md border px-3 py-2 text-left text-sm font-normal transition-all disabled:pointer-events-none disabled:opacity-50', 'focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2', 'disabled:pointer-events-none disabled:opacity-50', '[&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
-    /** The id of the button that opens the date picker. */
-    buttonId = input(`hlm-date-picker-${nextId$2++}`, ...(ngDevMode ? [{ debugName: "buttonId" }] : []));
+    popover = viewChild.required(BrnPopover, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "popover" }] : /* istanbul ignore next */ []));
+    _trigger = contentChild(BrnDatePickerTriggerToken, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_trigger" }] : /* istanbul ignore next */ []));
+    /** Show dropdowns to navigate between months or years. */
+    captionLayout = input('label', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "captionLayout" }] : /* istanbul ignore next */ []));
     /** The minimum date that can be selected.*/
-    min = input(...(ngDevMode ? [undefined, { debugName: "min" }] : []));
+    min = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "min" }] : /* istanbul ignore next */ []));
     /** The maximum date that can be selected. */
-    max = input(...(ngDevMode ? [undefined, { debugName: "max" }] : []));
+    max = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "max" }] : /* istanbul ignore next */ []));
     /** Determine if the date picker is disabled. */
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{
-            transform: booleanAttribute,
-        }]));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** The selected value. */
-    date = input(...(ngDevMode ? [undefined, { debugName: "date" }] : []));
-    _mutableDate = linkedSignal(this.date, ...(ngDevMode ? [{ debugName: "_mutableDate" }] : []));
+    date = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "date" }] : /* istanbul ignore next */ []));
+    /** The date the calendar focuses on first open when no date is selected. */
+    defaultFocusedDate = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "defaultFocusedDate" }] : /* istanbul ignore next */ []));
+    _mutableDate = linkedSignal(this.date, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_mutableDate" }] : /* istanbul ignore next */ []));
     /** If true, the date picker will close when a date is selected. */
-    autoCloseOnSelect = input(this._config.autoCloseOnSelect, ...(ngDevMode ? [{ debugName: "autoCloseOnSelect", transform: booleanAttribute }] : [{
-            transform: booleanAttribute,
-        }]));
+    autoCloseOnSelect = input(this._config.autoCloseOnSelect, { ...(ngDevMode ? { debugName: "autoCloseOnSelect" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Defines how the date should be displayed in the UI.  */
-    formatDate = input(this._config.formatDate, ...(ngDevMode ? [{ debugName: "formatDate" }] : []));
+    formatDate = input(this._config.formatDate, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formatDate" }] : /* istanbul ignore next */ []));
     /** Defines how the date should be transformed before saving to model/form. */
-    transformDate = input(this._config.transformDate, ...(ngDevMode ? [{ debugName: "transformDate" }] : []));
-    _popoverState = signal(null, ...(ngDevMode ? [{ debugName: "_popoverState" }] : []));
-    _mutableDisabled = linkedSignal(this.disabled, ...(ngDevMode ? [{ debugName: "_mutableDisabled" }] : []));
-    _formattedDate = computed(() => {
+    transformDate = input(this._config.transformDate, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "transformDate" }] : /* istanbul ignore next */ []));
+    _popoverState = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_popoverState" }] : /* istanbul ignore next */ []));
+    _disabled = linkedSignal(this.disabled, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+    /** @internal The disabled state as a readonly signal */
+    disabledState = this._disabled.asReadonly();
+    formattedDate = computed(() => {
         const date = this._mutableDate();
         return date ? this.formatDate()(date) : undefined;
-    }, ...(ngDevMode ? [{ debugName: "_formattedDate" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formattedDate" }] : /* istanbul ignore next */ []));
     dateChange = output();
+    labelableId = computed(() => this._trigger()?.triggerId(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelableId" }] : /* istanbul ignore next */ []));
+    hasDate = computed(() => !!this._mutableDate(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasDate" }] : /* istanbul ignore next */ []));
+    /** @internal The current raw value, used by inputs to reformat on focus. */
+    value = computed(() => this._mutableDate() ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     _onChange;
     _onTouched;
+    _onStateChange(state) {
+        this._popoverState.set(state);
+        if (state === 'closed')
+            this._onTouched?.();
+    }
     _handleChange(value) {
-        if (this._mutableDisabled())
+        if (this._disabled())
             return;
-        const transformedDate = this.transformDate()(value);
-        this._mutableDate.set(transformedDate);
-        this._onChange?.(transformedDate);
-        this.dateChange.emit(transformedDate);
+        this.updateDate(value ?? null);
         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.
+     */
+    updateDate(value) {
+        if (this._disabled())
+            return;
+        const transformedDate = value != null ? this.transformDate()(value) : undefined;
+        this._mutableDate.set(transformedDate);
+        this._onChange?.(transformedDate ?? null);
+        this.dateChange.emit(transformedDate ?? null);
+    }
     /** CONTROL VALUE ACCESSOR */
     writeValue(value) {
         this._mutableDate.set(value ? this.transformDate()(value) : undefined);
@@ -87,8 +303,11 @@ class HlmDatePicker extends BrnFormFieldControl {
     registerOnTouched(fn) {
         this._onTouched = fn;
     }
+    touched() {
+        this._onTouched?.();
+    }
     setDisabledState(isDisabled) {
-        this._mutableDisabled.set(isDisabled);
+        this._disabled.set(isDisabled);
     }
     open() {
         this._popoverState.set('open');
@@ -96,169 +315,274 @@ class HlmDatePicker extends BrnFormFieldControl {
     close() {
         this._popoverState.set('closed');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmDatePicker, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: HlmDatePicker, isStandalone: true, selector: "hlm-date-picker", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, buttonId: { classPropertyName: "buttonId", publicName: "buttonId", 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 }, 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" }, providers: [
-            HLM_DATE_PICKER_VALUE_ACCESSOR,
-            provideIcons({ lucideChevronDown }),
-            {
-                provide: BrnFormFieldControl,
-                useExisting: forwardRef(() => HlmDatePicker),
-            },
-        ], usesInheritance: true, ngImport: i0, template: `
-    <brn-popover sideOffset="5" [state]="_popoverState()" (stateChanged)="_popoverState.set($event)">
-      <button
-        [id]="buttonId()"
-        type="button"
-        [class]="_computedClass()"
-        [disabled]="_mutableDisabled()"
-        brnPopoverTrigger
-      >
-        <span class="truncate">
-          @if (_formattedDate(); as formattedDate) {
-            {{ formattedDate }}
-          } @else {
-            <ng-content />
-          }
-        </span>
-
-        <ng-icon hlm size="sm" name="lucideChevronDown" />
-      </button>
+    reset() {
+        this._mutableDate.set(undefined);
+        this._onChange?.(null);
+        this.dateChange.emit(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.7", 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 }, 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" }, 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: `
+    <hlm-popover sideOffset="5" [state]="_popoverState()" (stateChanged)="_onStateChange($event)">
+      <ng-content />
 
-      <div hlmPopoverContent class="w-auto p-0" *brnPopoverContent="let ctx">
+      <hlm-popover-content class="w-fit p-0" *hlmPopoverPortal="let ctx">
+        <ng-content select="[hlmDatePickerHeader]" />
         <hlm-calendar
-          calendarClass="border-0 rounded-none"
+          class="rounded-none border-0"
+          [captionLayout]="captionLayout()"
           [date]="_mutableDate()"
+          [defaultFocusedDate]="_mutableDate() ?? defaultFocusedDate()"
           [min]="min()"
           [max]="max()"
-          [disabled]="_mutableDisabled()"
+          [disabled]="_disabled()"
           (dateChange)="_handleChange($event)"
         />
-      </div>
-    </brn-popover>
-  `, isInline: true, dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: HlmIcon, selector: "ng-icon[hlm]", inputs: ["size"] }, { kind: "component", type: BrnPopover, selector: "brn-popover", inputs: ["align", "sideOffset"], exportAs: ["brnPopover"] }, { kind: "directive", type: BrnPopoverTrigger, selector: "button[brnPopoverTrigger],button[brnPopoverTriggerFor]", inputs: ["brnPopoverTriggerFor"] }, { kind: "directive", type: BrnPopoverContent, selector: "[brnPopoverContent]" }, { kind: "directive", type: HlmPopoverContent, selector: "[hlmPopoverContent],[brnPopoverContent][hlm]", inputs: ["class"] }, { kind: "component", type: HlmCalendar, selector: "hlm-calendar", inputs: ["calendarClass", "min", "max", "disabled", "date", "dateDisabled", "weekStartsOn", "defaultFocusedDate"], outputs: ["dateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        <ng-content select="[hlmDatePickerFooter]" />
+      </hlm-popover-content>
+    </hlm-popover>
+  `, 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: "20.3.1", ngImport: i0, type: HlmDatePicker, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDatePicker, decorators: [{
             type: Component,
             args: [{
                     selector: 'hlm-date-picker',
-                    imports: [NgIcon, HlmIcon, BrnPopover, BrnPopoverTrigger, BrnPopoverContent, HlmPopoverContent, HlmCalendar],
-                    providers: [
-                        HLM_DATE_PICKER_VALUE_ACCESSOR,
-                        provideIcons({ lucideChevronDown }),
-                        {
-                            provide: BrnFormFieldControl,
-                            useExisting: forwardRef(() => HlmDatePicker),
-                        },
-                    ],
+                    imports: [HlmPopoverImports, HlmCalendar],
+                    providers: [HLM_DATE_PICKER_VALUE_ACCESSOR, provideBrnDatePicker(HlmDatePicker), provideBrnLabelable(HlmDatePicker)],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    hostDirectives: [BrnFieldControl],
+                    host: { class: 'block' },
                     template: `
-    <brn-popover sideOffset="5" [state]="_popoverState()" (stateChanged)="_popoverState.set($event)">
-      <button
-        [id]="buttonId()"
-        type="button"
-        [class]="_computedClass()"
-        [disabled]="_mutableDisabled()"
-        brnPopoverTrigger
-      >
-        <span class="truncate">
-          @if (_formattedDate(); as formattedDate) {
-            {{ formattedDate }}
-          } @else {
-            <ng-content />
-          }
-        </span>
-
-        <ng-icon hlm size="sm" name="lucideChevronDown" />
-      </button>
+    <hlm-popover sideOffset="5" [state]="_popoverState()" (stateChanged)="_onStateChange($event)">
+      <ng-content />
 
-      <div hlmPopoverContent class="w-auto p-0" *brnPopoverContent="let ctx">
+      <hlm-popover-content class="w-fit p-0" *hlmPopoverPortal="let ctx">
+        <ng-content select="[hlmDatePickerHeader]" />
         <hlm-calendar
-          calendarClass="border-0 rounded-none"
+          class="rounded-none border-0"
+          [captionLayout]="captionLayout()"
           [date]="_mutableDate()"
+          [defaultFocusedDate]="_mutableDate() ?? defaultFocusedDate()"
           [min]="min()"
           [max]="max()"
-          [disabled]="_mutableDisabled()"
+          [disabled]="_disabled()"
           (dateChange)="_handleChange($event)"
         />
-      </div>
-    </brn-popover>
+        <ng-content select="[hlmDatePickerFooter]" />
+      </hlm-popover-content>
+    </hlm-popover>
   `,
-                    host: {
-                        class: 'block',
-                    },
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }] });
+        }], 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 }] }], 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"] }] } });
 
-function getDefaultConfig$1() {
-    return {
-        formatDates: (dates) => dates.map((date) => (date instanceof Date ? date.toDateString() : `${date}`)).join(', '),
-        transformDates: (dates) => dates,
-        autoCloseOnMaxSelection: false,
-    };
-}
-const HlmDatePickerMultiConfigToken = new InjectionToken('HlmDatePickerMultiConfig');
-function provideHlmDatePickerMultiConfig(config) {
-    return { provide: HlmDatePickerMultiConfigToken, useValue: { ...getDefaultConfig$1(), ...config } };
+class HlmDatePickerAnchor {
+    _host = inject(ElementRef, { host: true });
+    _brnOverlay = inject(BrnOverlay, { optional: true });
+    hlmDatePickerAnchorForInput = input(undefined, { ...(ngDevMode ? { debugName: "hlmDatePickerAnchorForInput" } : /* istanbul ignore next */ {}), alias: 'hlmDatePickerAnchorFor' });
+    hlmDatePickerAnchorFor = linkedSignal(this.hlmDatePickerAnchorForInput, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hlmDatePickerAnchorFor" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            this.hlmDatePickerAnchorFor()?.setOrigin(this._host.nativeElement);
+        });
+        this._brnOverlay?.setOrigin(this._host.nativeElement);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDatePickerAnchor, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: HlmDatePickerAnchor, isStandalone: true, selector: "[hlmDatePickerAnchor]", inputs: { hlmDatePickerAnchorForInput: { classPropertyName: "hlmDatePickerAnchorForInput", publicName: "hlmDatePickerAnchorFor", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
-function injectHlmDatePickerMultiConfig() {
-    const injectedConfig = inject(HlmDatePickerMultiConfigToken, { optional: true });
-    return injectedConfig ? injectedConfig : getDefaultConfig$1();
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDatePickerAnchor, decorators: [{
+            type: Directive,
+            args: [{ selector: '[hlmDatePickerAnchor]' }]
+        }], ctorParameters: () => [], propDecorators: { hlmDatePickerAnchorForInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "hlmDatePickerAnchorFor", required: false }] }] } });
+
+class HlmDatePickerInput extends BrnDateInput {
+    _config = injectHlmDatePickerConfig();
+    /**
+     * 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.
+     *
+     * Defaults to `parseDate` from `HlmDatePickerConfig`.
+     */
+    parseDate = input(this._config.parseDate, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "parseDate" }] : /* istanbul ignore next */ []));
+    /**
+     * Formats the current date into the input/edit format shown while the
+     * input is focused. On blur the picker's display format is restored.
+     *
+     * Defaults to `formatInputDate` from `HlmDatePickerConfig`.
+     */
+    formatInputDate = input(this._config.formatInputDate, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formatInputDate" }] : /* istanbul ignore next */ []));
+    parseValue(value) {
+        return this.parseDate()(value);
+    }
+    formatInputValue(value) {
+        return this.formatInputDate()(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDatePickerInput, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: HlmDatePickerInput, isStandalone: true, selector: "hlm-date-picker-input", inputs: { parseDate: { classPropertyName: "parseDate", publicName: "parseDate", isSignal: true, isRequired: false, transformFunction: null }, formatInputDate: { classPropertyName: "formatInputDate", publicName: "formatInputDate", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideIcons({ lucideCalendar, lucideX }), provideBrnDatePickerTrigger(HlmDatePickerInput)], usesInheritance: true, hostDirectives: [{ directive: i1.HlmInputGroup }], ngImport: i0, template: `
+    <input
+      #input
+      hlmInputGroupInput
+      [value]="_inputValue()"
+      [id]="inputId()"
+      [placeholder]="placeholder()"
+      [disabled]="_disabled()"
+      [forceInvalid]="forceInvalid()"
+      (click)="_handleClick()"
+      (keydown.arrowDown)="_open()"
+      (keydown.enter)="_handleEnter($event)"
+      (input)="_handleInputChange($event)"
+      (focus)="_handleFocus()"
+      (blur)="_handleBlur()"
+    />
+    <hlm-input-group-addon align="inline-end">
+      @if (_showClearButton()) {
+        <button
+          hlmInputGroupButton
+          size="icon-xs"
+          variant="ghost"
+          [attr.aria-label]="clearAriaLabel()"
+          (click)="_clear()"
+          [disabled]="_disabled()"
+        >
+          <ng-icon name="lucideX" />
+        </button>
+      }
+      <button
+        hlmInputGroupButton
+        size="icon-xs"
+        [attr.aria-label]="calendarAriaLabel()"
+        (click)="_popover().open()"
+        [disabled]="_disabled()"
+      >
+        <ng-icon name="lucideCalendar" />
+      </button>
+    </hlm-input-group-addon>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }, { kind: "directive", type: i1.HlmInputGroupButton, selector: "button[hlmInputGroupButton]", inputs: ["size", "type"] }, { kind: "directive", type: i1.HlmInputGroupInput, selector: "input[hlmInputGroupInput]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDatePickerInput, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hlm-date-picker-input',
+                    imports: [HlmInputGroupImports, NgIcon],
+                    providers: [provideIcons({ lucideCalendar, lucideX }), provideBrnDatePickerTrigger(HlmDatePickerInput)],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    hostDirectives: [HlmInputGroup],
+                    template: `
+    <input
+      #input
+      hlmInputGroupInput
+      [value]="_inputValue()"
+      [id]="inputId()"
+      [placeholder]="placeholder()"
+      [disabled]="_disabled()"
+      [forceInvalid]="forceInvalid()"
+      (click)="_handleClick()"
+      (keydown.arrowDown)="_open()"
+      (keydown.enter)="_handleEnter($event)"
+      (input)="_handleInputChange($event)"
+      (focus)="_handleFocus()"
+      (blur)="_handleBlur()"
+    />
+    <hlm-input-group-addon align="inline-end">
+      @if (_showClearButton()) {
+        <button
+          hlmInputGroupButton
+          size="icon-xs"
+          variant="ghost"
+          [attr.aria-label]="clearAriaLabel()"
+          (click)="_clear()"
+          [disabled]="_disabled()"
+        >
+          <ng-icon name="lucideX" />
+        </button>
+      }
+      <button
+        hlmInputGroupButton
+        size="icon-xs"
+        [attr.aria-label]="calendarAriaLabel()"
+        (click)="_popover().open()"
+        [disabled]="_disabled()"
+      >
+        <ng-icon name="lucideCalendar" />
+      </button>
+    </hlm-input-group-addon>
+  `,
+                }]
+        }], propDecorators: { parseDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "parseDate", required: false }] }], formatInputDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatInputDate", required: false }] }] } });
 
 const HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => HlmDatePickerMulti),
     multi: true,
 };
-let nextId$1 = 0;
 class HlmDatePickerMulti {
     _config = injectHlmDatePickerMultiConfig();
-    userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    _computedClass = computed(() => hlm('ring-offset-background border-input bg-background hover:bg-accent dark:bg-input/30 dark:hover:bg-input/50 inline-flex h-9 w-[280px] cursor-default items-center justify-between gap-2 whitespace-nowrap rounded-md border px-3 py-2 text-left text-sm font-normal transition-all disabled:pointer-events-none disabled:opacity-50', 'focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2', 'disabled:pointer-events-none disabled:opacity-50', '[&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
-    /** The id of the button that opens the date picker. */
-    buttonId = input(`hlm-date-picker-multi-${nextId$1++}`, ...(ngDevMode ? [{ debugName: "buttonId" }] : []));
+    popover = viewChild.required(BrnPopover, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "popover" }] : /* istanbul ignore next */ []));
+    _trigger = contentChild(BrnDatePickerTriggerToken, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_trigger" }] : /* istanbul ignore next */ []));
+    /** Show dropdowns to navigate between months or years. */
+    captionLayout = input('label', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "captionLayout" }] : /* istanbul ignore next */ []));
     /** The minimum date that can be selected.*/
-    min = input(...(ngDevMode ? [undefined, { debugName: "min" }] : []));
+    min = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "min" }] : /* istanbul ignore next */ []));
     /** The maximum date that can be selected. */
-    max = input(...(ngDevMode ? [undefined, { debugName: "max" }] : []));
+    max = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "max" }] : /* istanbul ignore next */ []));
     /** The minimum selectable dates.  */
-    minSelection = input(undefined, ...(ngDevMode ? [{ debugName: "minSelection", transform: numberAttribute }] : [{
-            transform: numberAttribute,
-        }]));
+    minSelection = input(undefined, { ...(ngDevMode ? { debugName: "minSelection" } : /* istanbul ignore next */ {}), transform: numberAttribute });
     /** The maximum selectable dates.  */
-    maxSelection = input(undefined, ...(ngDevMode ? [{ debugName: "maxSelection", transform: numberAttribute }] : [{
-            transform: numberAttribute,
-        }]));
+    maxSelection = input(undefined, { ...(ngDevMode ? { debugName: "maxSelection" } : /* istanbul ignore next */ {}), transform: numberAttribute });
     /** Determine if the date picker is disabled. */
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{
-            transform: booleanAttribute,
-        }]));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** The selected value. */
-    date = input(...(ngDevMode ? [undefined, { debugName: "date" }] : []));
-    _mutableDate = linkedSignal(this.date, ...(ngDevMode ? [{ debugName: "_mutableDate" }] : []));
+    date = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "date" }] : /* istanbul ignore next */ []));
+    _mutableDate = linkedSignal(this.date, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_mutableDate" }] : /* istanbul ignore next */ []));
     /** If true, the date picker will close when the max selection of dates is reached. */
-    autoCloseOnMaxSelection = input(this._config.autoCloseOnMaxSelection, ...(ngDevMode ? [{ debugName: "autoCloseOnMaxSelection", transform: booleanAttribute }] : [{
-            transform: booleanAttribute,
-        }]));
+    autoCloseOnMaxSelection = input(this._config.autoCloseOnMaxSelection, { ...(ngDevMode ? { debugName: "autoCloseOnMaxSelection" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Defines how the date should be displayed in the UI.  */
-    formatDates = input(this._config.formatDates, ...(ngDevMode ? [{ debugName: "formatDates" }] : []));
+    formatDates = input(this._config.formatDates, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formatDates" }] : /* istanbul ignore next */ []));
     /** Defines how the date should be transformed before saving to model/form. */
-    transformDates = input(this._config.transformDates, ...(ngDevMode ? [{ debugName: "transformDates" }] : []));
-    _popoverState = signal(null, ...(ngDevMode ? [{ debugName: "_popoverState" }] : []));
-    _mutableDisabled = linkedSignal(this.disabled, ...(ngDevMode ? [{ debugName: "_mutableDisabled" }] : []));
-    _formattedDate = computed(() => {
+    transformDates = input(this._config.transformDates, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "transformDates" }] : /* istanbul ignore next */ []));
+    _popoverState = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_popoverState" }] : /* istanbul ignore next */ []));
+    _disabled = linkedSignal(this.disabled, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+    /** @internal The disabled state as a readonly signal */
+    disabledState = this._disabled.asReadonly();
+    formattedDate = computed(() => {
         const dates = this._mutableDate();
         return dates ? this.formatDates()(dates) : undefined;
-    }, ...(ngDevMode ? [{ debugName: "_formattedDate" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formattedDate" }] : /* istanbul ignore next */ []));
     dateChange = output();
+    labelableId = computed(() => this._trigger()?.triggerId(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelableId" }] : /* istanbul ignore next */ []));
+    hasDate = computed(() => !!this._mutableDate()?.length, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasDate" }] : /* istanbul ignore next */ []));
+    /** @internal The current raw value, used by inputs to reformat on focus. */
+    value = computed(() => this._mutableDate() ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     _onChange;
     _onTouched;
+    _onStateChange(state) {
+        this._popoverState.set(state);
+        if (state === 'closed')
+            this._onTouched?.();
+    }
     _handleChange(value) {
         if (value === undefined)
             return;
-        if (this._mutableDisabled())
+        if (this._disabled())
             return;
-        const transformedDate = this.transformDates()(value);
+        const transformedDate = value !== undefined ? this.transformDates()(value) : value;
         this._mutableDate.set(transformedDate);
         this._onChange?.(transformedDate);
         this.dateChange.emit(transformedDate);
@@ -266,6 +590,22 @@ class HlmDatePickerMulti {
             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.
+     */
+    updateDate(value) {
+        if (this._disabled())
+            return;
+        const transformedDate = value ? this.transformDates()(value) : undefined;
+        this._mutableDate.set(transformedDate);
+        this._onChange?.(transformedDate ?? []);
+        this.dateChange.emit(transformedDate ?? []);
+    }
+    touched() {
+        this._onTouched?.();
+    }
     /** CONTROL VALUE ACCESSOR */
     writeValue(value) {
         this._mutableDate.set(value ? this.transformDates()(value) : undefined);
@@ -277,7 +617,7 @@ class HlmDatePickerMulti {
         this._onTouched = fn;
     }
     setDisabledState(isDisabled) {
-        this._mutableDisabled.set(isDisabled);
+        this._disabled.set(isDisabled);
     }
     open() {
         this._popoverState.set('open');
@@ -285,157 +625,406 @@ class HlmDatePickerMulti {
     close() {
         this._popoverState.set('closed');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmDatePickerMulti, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: HlmDatePickerMulti, isStandalone: true, selector: "hlm-date-picker-multi", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, buttonId: { classPropertyName: "buttonId", publicName: "buttonId", 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: [HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR, provideIcons({ lucideChevronDown })], ngImport: i0, template: `
-    <brn-popover sideOffset="5" [state]="_popoverState()" (stateChanged)="_popoverState.set($event)">
-      <button
-        [id]="buttonId()"
-        type="button"
-        [class]="_computedClass()"
-        [disabled]="_mutableDisabled()"
-        brnPopoverTrigger
-      >
-        <span class="truncate">
-          @if (_formattedDate(); as formattedDate) {
-            {{ formattedDate }}
-          } @else {
-            <ng-content />
-          }
-        </span>
-
-        <ng-icon hlm size="sm" name="lucideChevronDown" />
-      </button>
+    reset() {
+        this._mutableDate.set(undefined);
+        this._onChange?.([]);
+        this.dateChange.emit([]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDatePickerMulti, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.7", 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: [
+            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: `
+    <hlm-popover sideOffset="5" [state]="_popoverState()" (stateChanged)="_onStateChange($event)">
+      <ng-content />
 
-      <div hlmPopoverContent class="w-auto p-0" *brnPopoverContent="let ctx">
+      <hlm-popover-content class="w-fit p-0" *hlmPopoverPortal="let ctx">
+        <ng-content select="[hlmDatePickerHeader]" />
         <hlm-calendar-multi
-          calendarClass="border-0 rounded-none"
+          class="rounded-none border-0"
           [date]="_mutableDate()"
+          [captionLayout]="captionLayout()"
           [min]="min()"
           [max]="max()"
           [minSelection]="minSelection()"
           [maxSelection]="maxSelection()"
-          [disabled]="_mutableDisabled()"
+          [disabled]="_disabled()"
           (dateChange)="_handleChange($event)"
         />
-      </div>
-    </brn-popover>
-  `, isInline: true, dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: HlmIcon, selector: "ng-icon[hlm]", inputs: ["size"] }, { kind: "component", type: BrnPopover, selector: "brn-popover", inputs: ["align", "sideOffset"], exportAs: ["brnPopover"] }, { kind: "directive", type: BrnPopoverTrigger, selector: "button[brnPopoverTrigger],button[brnPopoverTriggerFor]", inputs: ["brnPopoverTriggerFor"] }, { kind: "directive", type: BrnPopoverContent, selector: "[brnPopoverContent]" }, { kind: "directive", type: HlmPopoverContent, selector: "[hlmPopoverContent],[brnPopoverContent][hlm]", inputs: ["class"] }, { kind: "component", type: HlmCalendarMulti, selector: "hlm-calendar-multi", inputs: ["calendarClass", "min", "max", "minSelection", "maxSelection", "disabled", "date", "dateDisabled", "weekStartsOn", "defaultFocusedDate"], outputs: ["dateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        <ng-content select="[hlmDatePickerFooter]" />
+      </hlm-popover-content>
+    </hlm-popover>
+  `, 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: "20.3.1", ngImport: i0, type: HlmDatePickerMulti, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDatePickerMulti, decorators: [{
             type: Component,
             args: [{
                     selector: 'hlm-date-picker-multi',
-                    imports: [NgIcon, HlmIcon, BrnPopover, BrnPopoverTrigger, BrnPopoverContent, HlmPopoverContent, HlmCalendarMulti],
-                    providers: [HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR, provideIcons({ lucideChevronDown })],
+                    imports: [HlmPopoverImports, HlmCalendarMulti],
+                    providers: [
+                        HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR,
+                        provideBrnDatePicker(HlmDatePickerMulti),
+                        provideBrnLabelable(HlmDatePickerMulti),
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    hostDirectives: [BrnFieldControl],
+                    host: { class: 'block' },
                     template: `
-    <brn-popover sideOffset="5" [state]="_popoverState()" (stateChanged)="_popoverState.set($event)">
-      <button
-        [id]="buttonId()"
-        type="button"
-        [class]="_computedClass()"
-        [disabled]="_mutableDisabled()"
-        brnPopoverTrigger
-      >
-        <span class="truncate">
-          @if (_formattedDate(); as formattedDate) {
-            {{ formattedDate }}
-          } @else {
-            <ng-content />
-          }
-        </span>
+    <hlm-popover sideOffset="5" [state]="_popoverState()" (stateChanged)="_onStateChange($event)">
+      <ng-content />
 
-        <ng-icon hlm size="sm" name="lucideChevronDown" />
-      </button>
-
-      <div hlmPopoverContent class="w-auto p-0" *brnPopoverContent="let ctx">
+      <hlm-popover-content class="w-fit p-0" *hlmPopoverPortal="let ctx">
+        <ng-content select="[hlmDatePickerHeader]" />
         <hlm-calendar-multi
-          calendarClass="border-0 rounded-none"
+          class="rounded-none border-0"
           [date]="_mutableDate()"
+          [captionLayout]="captionLayout()"
           [min]="min()"
           [max]="max()"
           [minSelection]="minSelection()"
           [maxSelection]="maxSelection()"
-          [disabled]="_mutableDisabled()"
+          [disabled]="_disabled()"
           (dateChange)="_handleChange($event)"
         />
-      </div>
-    </brn-popover>
+        <ng-content select="[hlmDatePickerFooter]" />
+      </hlm-popover-content>
+    </hlm-popover>
   `,
-                    host: {
-                        class: 'block',
-                    },
+                }]
+        }], 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"] }] } });
+
+class HlmDatePickerTrigger {
+    static _nextId = 0;
+    _fieldControl = inject(BrnFieldControl, { optional: true });
+    _datePicker = injectBrnDatePicker();
+    _invalid = this._fieldControl?.invalid;
+    _spartanInvalid = computed(() => this.forceInvalid() || this._fieldControl?.spartanInvalid(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_spartanInvalid" }] : /* istanbul ignore next */ []));
+    _dirty = this._fieldControl?.dirty;
+    _touched = this._fieldControl?.touched;
+    _ariaInvalid = computed(() => (this._invalid?.() ? 'true' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_ariaInvalid" }] : /* istanbul ignore next */ []));
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    _computedClass = computed(() => hlm('data-placeholder:text-muted-foreground justify-between', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_computedClass" }] : /* istanbul ignore next */ []));
+    _isPlaceholder = computed(() => !this._datePicker.hasDate(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isPlaceholder" }] : /* istanbul ignore next */ []));
+    /** The id of the button that opens the date picker. */
+    buttonId = input(`hlm-date-picker-${++HlmDatePickerTrigger._nextId}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "buttonId" }] : /* istanbul ignore next */ []));
+    /** @internal The id of the button that opens the date picker, used for labeling. */
+    triggerId = this.buttonId;
+    /** Forces the invalid state visually, regardless of form control state. */
+    forceInvalid = input(false, { ...(ngDevMode ? { debugName: "forceInvalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    variant = input('outline', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    showTrigger = input(true, { ...(ngDevMode ? { debugName: "showTrigger" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    _popover = this._datePicker.popover;
+    _disabled = this._datePicker.disabledState;
+    _formattedDate = this._datePicker.formattedDate;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDatePickerTrigger, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: HlmDatePickerTrigger, isStandalone: true, selector: "hlm-date-picker-trigger", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, buttonId: { classPropertyName: "buttonId", publicName: "buttonId", isSignal: true, isRequired: false, transformFunction: null }, forceInvalid: { classPropertyName: "forceInvalid", publicName: "forceInvalid", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showTrigger: { classPropertyName: "showTrigger", publicName: "showTrigger", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "date-picker-trigger" } }, providers: [provideIcons({ lucideChevronDown }), provideBrnDatePickerTrigger(HlmDatePickerTrigger)], ngImport: i0, template: `
+    <button
+      [id]="buttonId()"
+      type="button"
+      [class]="_computedClass()"
+      [disabled]="_disabled()"
+      [attr.aria-invalid]="_ariaInvalid()"
+      [attr.data-invalid]="_ariaInvalid()"
+      [attr.data-touched]="_touched?.() ? 'true' : null"
+      [attr.data-dirty]="_dirty?.() ? 'true' : null"
+      [attr.data-matches-spartan-invalid]="_spartanInvalid() ? 'true' : null"
+      hlmBtn
+      [variant]="variant()"
+      hlmPopoverTrigger
+      [hlmPopoverTriggerFor]="_popover()"
+      brnFieldControlDescribedBy
+      [attr.data-placeholder]="_isPlaceholder() ? '' : null"
+    >
+      <span class="truncate">
+        @if (_formattedDate(); as formattedDate) {
+          {{ formattedDate }}
+        } @else {
+          <ng-content />
+        }
+      </span>
+
+      @if (showTrigger()) {
+        <ng-icon name="lucideChevronDown" />
+      }
+    </button>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1$2.HlmBtn, selector: "button[hlmBtn], a[hlmBtn]", inputs: ["variant", "size", "class", "type"], exportAs: ["hlmBtn"] }, { kind: "directive", type: HlmPopoverTrigger, selector: "button[hlmPopoverTrigger],button[hlmPopoverTriggerFor]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: BrnFieldControlDescribedBy, selector: "[brnFieldControlDescribedBy]", inputs: ["aria-describedby"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDatePickerTrigger, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hlm-date-picker-trigger',
+                    imports: [HlmButtonImports, HlmPopoverTrigger, NgIcon, BrnFieldControlDescribedBy],
+                    providers: [provideIcons({ lucideChevronDown }), provideBrnDatePickerTrigger(HlmDatePickerTrigger)],
                     changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { 'data-slot': 'date-picker-trigger' },
+                    template: `
+    <button
+      [id]="buttonId()"
+      type="button"
+      [class]="_computedClass()"
+      [disabled]="_disabled()"
+      [attr.aria-invalid]="_ariaInvalid()"
+      [attr.data-invalid]="_ariaInvalid()"
+      [attr.data-touched]="_touched?.() ? 'true' : null"
+      [attr.data-dirty]="_dirty?.() ? 'true' : null"
+      [attr.data-matches-spartan-invalid]="_spartanInvalid() ? 'true' : null"
+      hlmBtn
+      [variant]="variant()"
+      hlmPopoverTrigger
+      [hlmPopoverTriggerFor]="_popover()"
+      brnFieldControlDescribedBy
+      [attr.data-placeholder]="_isPlaceholder() ? '' : null"
+    >
+      <span class="truncate">
+        @if (_formattedDate(); as formattedDate) {
+          {{ formattedDate }}
+        } @else {
+          <ng-content />
+        }
+      </span>
+
+      @if (showTrigger()) {
+        <ng-icon name="lucideChevronDown" />
+      }
+    </button>
+  `,
                 }]
-        }] });
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], buttonId: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonId", required: false }] }], forceInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceInvalid", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], showTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTrigger", required: false }] }] } });
 
-function getDefaultConfig() {
+function getDefaultConfig$1() {
     return {
         formatDates: (dates) => dates
             .filter(Boolean)
             .map((date) => (date instanceof Date ? date.toDateString() : `${date}`))
             .join(' - '),
+        formatInputDates: (dates) => dates
+            .filter(Boolean)
+            .map((date) => (date instanceof Date ? date.toDateString() : `${date}`))
+            .join(' - '),
         transformDates: (dates) => dates,
         autoCloseOnEndSelection: false,
+        parseDate: (value) => {
+            if (typeof value !== 'string')
+                return null;
+            const parts = value.split(' - ').map((part) => part.trim());
+            if (parts.length === 0 || parts.length > 2)
+                return null;
+            const start = new Date(parts[0]);
+            if (isNaN(start.getTime()))
+                return null;
+            const end = parts.length === 2 ? new Date(parts[1]) : start;
+            return [start, isNaN(end.getTime()) ? start : end];
+        },
     };
 }
 const HlmDateRangePickerConfigToken = new InjectionToken('HlmDateRangePickerConfig');
 function provideHlmDateRangePickerConfig(config) {
-    return { provide: HlmDateRangePickerConfigToken, useValue: { ...getDefaultConfig(), ...config } };
+    return { provide: HlmDateRangePickerConfigToken, useValue: { ...getDefaultConfig$1(), ...config } };
 }
 function injectHlmDateRangePickerConfig() {
     const injectedConfig = inject(HlmDateRangePickerConfigToken, { optional: true });
-    return injectedConfig ? injectedConfig : getDefaultConfig();
+    return injectedConfig ? injectedConfig : getDefaultConfig$1();
 }
 
+class HlmDateRangeInput extends BrnDateInput {
+    _config = injectHlmDateRangePickerConfig();
+    /**
+     * 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.
+     *
+     * Defaults to `parseDate` from `HlmDateRangePickerConfig`.
+     */
+    parseDate = input(this._config.parseDate, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "parseDate" }] : /* istanbul ignore next */ []));
+    /**
+     * Formats the current range into the input/edit format shown while the
+     * input is focused. On blur the picker's display format is restored.
+     *
+     * Defaults to `formatInputDates` from `HlmDateRangePickerConfig`.
+     */
+    formatInputDates = input(this._config.formatInputDates, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formatInputDates" }] : /* istanbul ignore next */ []));
+    parseValue(value) {
+        return this.parseDate()(value);
+    }
+    formatInputValue(value) {
+        return this.formatInputDates()(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDateRangeInput, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: HlmDateRangeInput, isStandalone: true, selector: "hlm-date-range-input", inputs: { parseDate: { classPropertyName: "parseDate", publicName: "parseDate", isSignal: true, isRequired: false, transformFunction: null }, formatInputDates: { classPropertyName: "formatInputDates", publicName: "formatInputDates", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideIcons({ lucideCalendar, lucideX }), provideBrnDatePickerTrigger(HlmDateRangeInput)], usesInheritance: true, hostDirectives: [{ directive: i1.HlmInputGroup }], ngImport: i0, template: `
+    <input
+      #input
+      hlmInputGroupInput
+      [value]="_inputValue()"
+      [id]="inputId()"
+      [placeholder]="placeholder()"
+      [disabled]="_disabled()"
+      [forceInvalid]="forceInvalid()"
+      (click)="_handleClick()"
+      (keydown.arrowDown)="_open()"
+      (keydown.enter)="_handleEnter($event)"
+      (input)="_handleInputChange($event)"
+      (focus)="_handleFocus()"
+      (blur)="_handleBlur()"
+    />
+    <hlm-input-group-addon align="inline-end">
+      @if (_showClearButton()) {
+        <button
+          hlmInputGroupButton
+          size="icon-xs"
+          variant="ghost"
+          [attr.aria-label]="clearAriaLabel()"
+          (click)="_clear()"
+          [disabled]="_disabled()"
+        >
+          <ng-icon name="lucideX" />
+        </button>
+      }
+      <button
+        hlmInputGroupButton
+        size="icon-xs"
+        [attr.aria-label]="calendarAriaLabel()"
+        (click)="_popover().open()"
+        [disabled]="_disabled()"
+      >
+        <ng-icon name="lucideCalendar" />
+      </button>
+    </hlm-input-group-addon>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }, { kind: "directive", type: i1.HlmInputGroupButton, selector: "button[hlmInputGroupButton]", inputs: ["size", "type"] }, { kind: "directive", type: i1.HlmInputGroupInput, selector: "input[hlmInputGroupInput]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDateRangeInput, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hlm-date-range-input',
+                    imports: [HlmInputGroupImports, NgIcon],
+                    providers: [provideIcons({ lucideCalendar, lucideX }), provideBrnDatePickerTrigger(HlmDateRangeInput)],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    hostDirectives: [HlmInputGroup],
+                    template: `
+    <input
+      #input
+      hlmInputGroupInput
+      [value]="_inputValue()"
+      [id]="inputId()"
+      [placeholder]="placeholder()"
+      [disabled]="_disabled()"
+      [forceInvalid]="forceInvalid()"
+      (click)="_handleClick()"
+      (keydown.arrowDown)="_open()"
+      (keydown.enter)="_handleEnter($event)"
+      (input)="_handleInputChange($event)"
+      (focus)="_handleFocus()"
+      (blur)="_handleBlur()"
+    />
+    <hlm-input-group-addon align="inline-end">
+      @if (_showClearButton()) {
+        <button
+          hlmInputGroupButton
+          size="icon-xs"
+          variant="ghost"
+          [attr.aria-label]="clearAriaLabel()"
+          (click)="_clear()"
+          [disabled]="_disabled()"
+        >
+          <ng-icon name="lucideX" />
+        </button>
+      }
+      <button
+        hlmInputGroupButton
+        size="icon-xs"
+        [attr.aria-label]="calendarAriaLabel()"
+        (click)="_popover().open()"
+        [disabled]="_disabled()"
+      >
+        <ng-icon name="lucideCalendar" />
+      </button>
+    </hlm-input-group-addon>
+  `,
+                }]
+        }], propDecorators: { parseDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "parseDate", required: false }] }], formatInputDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatInputDates", required: false }] }] } });
+
 const HLM_DATE_RANGE_PICKER_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => HlmDateRangePicker),
     multi: true,
 };
-let nextId = 0;
 class HlmDateRangePicker {
     _config = injectHlmDateRangePickerConfig();
-    userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    _computedClass = computed(() => hlm('ring-offset-background border-input bg-background hover:bg-accent dark:bg-input/30 dark:hover:bg-input/50 inline-flex h-9 w-[280px] cursor-default items-center justify-between gap-2 whitespace-nowrap rounded-md border px-3 py-2 text-left text-sm font-normal transition-all disabled:pointer-events-none disabled:opacity-50', 'focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2', 'disabled:pointer-events-none disabled:opacity-50', '[&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
-    /** The id of the button that opens the date picker. */
-    buttonId = input(`hlm-date-picker-range-${nextId++}`, ...(ngDevMode ? [{ debugName: "buttonId" }] : []));
+    popover = viewChild.required(BrnPopover, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "popover" }] : /* istanbul ignore next */ []));
+    _trigger = contentChild(BrnDatePickerTriggerToken, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_trigger" }] : /* istanbul ignore next */ []));
+    /** Show dropdowns to navigate between months or years. */
+    captionLayout = input('label', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "captionLayout" }] : /* istanbul ignore next */ []));
     /** The minimum date that can be selected.*/
-    min = input(...(ngDevMode ? [undefined, { debugName: "min" }] : []));
+    min = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "min" }] : /* istanbul ignore next */ []));
     /** The maximum date that can be selected. */
-    max = input(...(ngDevMode ? [undefined, { debugName: "max" }] : []));
+    max = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "max" }] : /* istanbul ignore next */ []));
     /** Determine if the date picker is disabled. */
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{
-            transform: booleanAttribute,
-        }]));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** The selected value. */
-    date = input(...(ngDevMode ? [undefined, { debugName: "date" }] : []));
-    _mutableDate = linkedSignal(this.date, ...(ngDevMode ? [{ debugName: "_mutableDate" }] : []));
-    _start = linkedSignal(() => this._mutableDate()?.[0], ...(ngDevMode ? [{ debugName: "_start" }] : []));
-    _end = linkedSignal(() => this._mutableDate()?.[1], ...(ngDevMode ? [{ debugName: "_end" }] : []));
+    date = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "date" }] : /* istanbul ignore next */ []));
+    _mutableDate = linkedSignal(this.date, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_mutableDate" }] : /* istanbul ignore next */ []));
+    _start = linkedSignal(() => this._mutableDate()?.[0], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_start" }] : /* istanbul ignore next */ []));
+    _end = linkedSignal(() => this._mutableDate()?.[1], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_end" }] : /* istanbul ignore next */ []));
     /** If true, the date picker will close when the end date is selected */
-    autoCloseOnEndSelection = input(this._config.autoCloseOnEndSelection, ...(ngDevMode ? [{ debugName: "autoCloseOnEndSelection", transform: booleanAttribute }] : [{
-            transform: booleanAttribute,
-        }]));
+    autoCloseOnEndSelection = input(this._config.autoCloseOnEndSelection, { ...(ngDevMode ? { debugName: "autoCloseOnEndSelection" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Defines how the date should be displayed in the UI.  */
-    formatDates = input(this._config.formatDates, ...(ngDevMode ? [{ debugName: "formatDates" }] : []));
+    formatDates = input(this._config.formatDates, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formatDates" }] : /* istanbul ignore next */ []));
     /** Defines how the date should be transformed before saving to model/form. */
-    transformDates = input(this._config.transformDates, ...(ngDevMode ? [{ debugName: "transformDates" }] : []));
-    _popoverState = signal(null, ...(ngDevMode ? [{ debugName: "_popoverState" }] : []));
-    _mutableDisabled = linkedSignal(this.disabled, ...(ngDevMode ? [{ debugName: "_mutableDisabled" }] : []));
-    _formattedDate = computed(() => {
+    transformDates = input(this._config.transformDates, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "transformDates" }] : /* istanbul ignore next */ []));
+    _popoverState = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_popoverState" }] : /* istanbul ignore next */ []));
+    _disabled = linkedSignal(this.disabled, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+    /** @internal The disabled state as a readonly signal */
+    disabledState = this._disabled.asReadonly();
+    formattedDate = computed(() => {
         const start = this._start();
         const end = this._end();
-        return start || end ? this.formatDates()([start, end]) : undefined;
-    }, ...(ngDevMode ? [{ debugName: "_formattedDate" }] : []));
+        return start || end ? this.formatDates()([start ?? null, end ?? null]) : undefined;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formattedDate" }] : /* istanbul ignore next */ []));
     dateChange = output();
+    labelableId = computed(() => this._trigger()?.triggerId(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelableId" }] : /* istanbul ignore next */ []));
+    hasDate = computed(() => !!this._start() || !!this._end(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasDate" }] : /* istanbul ignore next */ []));
+    /** @internal The current raw value, used by inputs to reformat on focus. */
+    value = computed(() => this._mutableDate() ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     _onChange;
     _onTouched;
+    _onStateChange(state) {
+        this._popoverState.set(state);
+        if (state === 'closed') {
+            this._onClose();
+            this._onTouched?.();
+        }
+    }
     _handleStartDayChange(value) {
         this._start.set(value);
     }
     _handleEndDateChange(value) {
         this._end.set(value);
-        if (this._mutableDisabled())
+        if (this._disabled())
             return;
         const start = this._start();
         if (start && value) {
@@ -448,6 +1037,32 @@ class HlmDateRangePicker {
             }
         }
     }
+    /**
+     * 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.
+     */
+    updateDate(value) {
+        if (this._disabled())
+            return;
+        if (!value) {
+            this._mutableDate.set(undefined);
+            this._start.set(undefined);
+            this._end.set(undefined);
+            this._onChange?.(null);
+            this.dateChange.emit(null);
+            return;
+        }
+        const transformedDates = this.transformDates()(value);
+        this._mutableDate.set(transformedDates);
+        this._start.set(transformedDates[0]);
+        this._end.set(transformedDates[1]);
+        this._onChange?.(transformedDates);
+        this.dateChange.emit(transformedDates);
+    }
+    touched() {
+        this._onTouched?.();
+    }
     /** CONTROL VALUE ACCESSOR */
     writeValue(value) {
         untracked(() => {
@@ -466,7 +1081,7 @@ class HlmDateRangePicker {
         this._onTouched = fn;
     }
     setDisabledState(isDisabled) {
-        this._mutableDisabled.set(isDisabled);
+        this._disabled.set(isDisabled);
     }
     open() {
         this._popoverState.set('open');
@@ -474,6 +1089,13 @@ class HlmDateRangePicker {
     close() {
         this._popoverState.set('closed');
     }
+    reset() {
+        this._mutableDate.set(undefined);
+        this._start.set(undefined);
+        this._end.set(undefined);
+        this._onChange?.(null);
+        this.dateChange.emit(null);
+    }
     _onClose() {
         const dates = this._mutableDate();
         if (this._start() && !this._end() && dates) {
@@ -481,109 +1103,442 @@ class HlmDateRangePicker {
             this._end.set(dates[1]);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmDateRangePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: HlmDateRangePicker, isStandalone: true, selector: "hlm-date-range-picker", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, buttonId: { classPropertyName: "buttonId", publicName: "buttonId", 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: [HLM_DATE_RANGE_PICKER_VALUE_ACCESSOR, provideIcons({ lucideChevronDown })], ngImport: i0, template: `
-    <brn-popover
-      sideOffset="5"
-      [state]="_popoverState()"
-      (stateChanged)="_popoverState.set($event)"
-      (closed)="_onClose()"
-    >
-      <button
-        [id]="buttonId()"
-        type="button"
-        [class]="_computedClass()"
-        [disabled]="_mutableDisabled()"
-        brnPopoverTrigger
-      >
-        <span class="truncate">
-          @if (_formattedDate(); as formattedDate) {
-            {{ formattedDate }}
-          } @else {
-            <ng-content />
-          }
-        </span>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDateRangePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.7", 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: [
+            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: `
+    <hlm-popover sideOffset="5" [state]="_popoverState()" (stateChanged)="_onStateChange($event)">
+      <ng-content />
 
-        <ng-icon hlm size="sm" name="lucideChevronDown" />
-      </button>
-
-      <div hlmPopoverContent class="w-auto p-0" *brnPopoverContent="let ctx">
+      <hlm-popover-content class="w-fit p-0" *hlmPopoverPortal="let ctx">
+        <ng-content select="[hlmDatePickerHeader]" />
         <hlm-calendar-range
-          calendarClass="border-0 rounded-none"
+          class="rounded-none border-0"
           [startDate]="_start()"
+          [captionLayout]="captionLayout()"
           [endDate]="_end()"
           [min]="min()"
           [max]="max()"
-          [disabled]="_mutableDisabled()"
+          [disabled]="_disabled()"
           (startDateChange)="_handleStartDayChange($event)"
           (endDateChange)="_handleEndDateChange($event)"
         />
-      </div>
-    </brn-popover>
-  `, isInline: true, dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: HlmIcon, selector: "ng-icon[hlm]", inputs: ["size"] }, { kind: "component", type: BrnPopover, selector: "brn-popover", inputs: ["align", "sideOffset"], exportAs: ["brnPopover"] }, { kind: "directive", type: BrnPopoverTrigger, selector: "button[brnPopoverTrigger],button[brnPopoverTriggerFor]", inputs: ["brnPopoverTriggerFor"] }, { kind: "directive", type: BrnPopoverContent, selector: "[brnPopoverContent]" }, { kind: "directive", type: HlmPopoverContent, selector: "[hlmPopoverContent],[brnPopoverContent][hlm]", inputs: ["class"] }, { kind: "component", type: HlmCalendarRange, selector: "hlm-calendar-range", inputs: ["calendarClass", "min", "max", "disabled", "startDate", "endDate", "dateDisabled", "weekStartsOn", "defaultFocusedDate"], outputs: ["startDateChange", "endDateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        <ng-content select="[hlmDatePickerFooter]" />
+      </hlm-popover-content>
+    </hlm-popover>
+  `, 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: "20.3.1", ngImport: i0, type: HlmDateRangePicker, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDateRangePicker, decorators: [{
             type: Component,
             args: [{
                     selector: 'hlm-date-range-picker',
-                    imports: [NgIcon, HlmIcon, BrnPopover, BrnPopoverTrigger, BrnPopoverContent, HlmPopoverContent, HlmCalendarRange],
-                    providers: [HLM_DATE_RANGE_PICKER_VALUE_ACCESSOR, provideIcons({ lucideChevronDown })],
+                    imports: [HlmPopoverImports, HlmCalendarRange],
+                    providers: [
+                        HLM_DATE_RANGE_PICKER_VALUE_ACCESSOR,
+                        provideBrnDatePicker(HlmDateRangePicker),
+                        provideBrnLabelable(HlmDateRangePicker),
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    hostDirectives: [BrnFieldControl],
+                    host: { class: 'block' },
                     template: `
-    <brn-popover
-      sideOffset="5"
-      [state]="_popoverState()"
-      (stateChanged)="_popoverState.set($event)"
-      (closed)="_onClose()"
-    >
-      <button
-        [id]="buttonId()"
-        type="button"
-        [class]="_computedClass()"
-        [disabled]="_mutableDisabled()"
-        brnPopoverTrigger
-      >
-        <span class="truncate">
-          @if (_formattedDate(); as formattedDate) {
-            {{ formattedDate }}
-          } @else {
-            <ng-content />
-          }
-        </span>
+    <hlm-popover sideOffset="5" [state]="_popoverState()" (stateChanged)="_onStateChange($event)">
+      <ng-content />
 
-        <ng-icon hlm size="sm" name="lucideChevronDown" />
-      </button>
-
-      <div hlmPopoverContent class="w-auto p-0" *brnPopoverContent="let ctx">
+      <hlm-popover-content class="w-fit p-0" *hlmPopoverPortal="let ctx">
+        <ng-content select="[hlmDatePickerHeader]" />
         <hlm-calendar-range
-          calendarClass="border-0 rounded-none"
+          class="rounded-none border-0"
           [startDate]="_start()"
+          [captionLayout]="captionLayout()"
           [endDate]="_end()"
           [min]="min()"
           [max]="max()"
-          [disabled]="_mutableDisabled()"
+          [disabled]="_disabled()"
           (startDateChange)="_handleStartDayChange($event)"
           (endDateChange)="_handleEndDateChange($event)"
         />
-      </div>
-    </brn-popover>
+        <ng-content select="[hlmDatePickerFooter]" />
+      </hlm-popover-content>
+    </hlm-popover>
   `,
-                    host: {
-                        class: 'block',
-                    },
+                }]
+        }], 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"] }] } });
+
+const mmYYYY = (date) => {
+    if (!(date instanceof Date))
+        return `${date}`;
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const year = date.getFullYear();
+    return `${month}/${year}`;
+};
+function getDefaultConfig() {
+    return {
+        formatDate: mmYYYY,
+        formatInputDate: mmYYYY,
+        transformDate: (date) => date,
+        parseDate: (value) => {
+            if (typeof value !== 'string')
+                return null;
+            const match = value.match(/^(\d{2})\/(\d{4})$/);
+            if (!match)
+                return null;
+            const month = Number(match[1]);
+            const year = Number(match[2]);
+            if (month < 1 || month > 12)
+                return null;
+            const date = new Date(year, month - 1, 1);
+            return date;
+        },
+        autoCloseOnSelect: false,
+    };
+}
+const HlmMonthYearPickerConfigToken = new InjectionToken('HlmMonthYearPickerConfig');
+function provideHlmMonthYearPickerConfig(config) {
+    return { provide: HlmMonthYearPickerConfigToken, useValue: { ...getDefaultConfig(), ...config } };
+}
+function injectHlmMonthYearPickerConfig() {
+    const injectedConfig = inject(HlmMonthYearPickerConfigToken, { optional: true });
+    return injectedConfig ? injectedConfig : getDefaultConfig();
+}
+
+class HlmMonthYearInput extends BrnDateInput {
+    _config = injectHlmMonthYearPickerConfig();
+    /**
+     * 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.
+     *
+     * Defaults to `parseDate` from `HlmMonthYearPickerConfig`.
+     */
+    parseDate = input(this._config.parseDate, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "parseDate" }] : /* istanbul ignore next */ []));
+    /**
+     * Formats the current date into the input/edit format shown while the
+     * input is focused. On blur the picker's display format is restored.
+     *
+     * Defaults to `formatInputDate` from `HlmMonthYearPickerConfig`.
+     */
+    formatInputDate = input(this._config.formatInputDate, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formatInputDate" }] : /* istanbul ignore next */ []));
+    parseValue(value) {
+        return this.parseDate()(value);
+    }
+    formatInputValue(value) {
+        return this.formatInputDate()(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmMonthYearInput, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: HlmMonthYearInput, isStandalone: true, selector: "hlm-month-year-input", inputs: { parseDate: { classPropertyName: "parseDate", publicName: "parseDate", isSignal: true, isRequired: false, transformFunction: null }, formatInputDate: { classPropertyName: "formatInputDate", publicName: "formatInputDate", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideIcons({ lucideCalendar, lucideX }), provideBrnDatePickerTrigger(HlmMonthYearInput)], usesInheritance: true, hostDirectives: [{ directive: i1.HlmInputGroup }], ngImport: i0, template: `
+    <input
+      #input
+      hlmInputGroupInput
+      [value]="_inputValue()"
+      [id]="inputId()"
+      [placeholder]="placeholder()"
+      [disabled]="_disabled()"
+      [forceInvalid]="forceInvalid()"
+      (click)="_handleClick()"
+      (keydown.arrowDown)="_open()"
+      (keydown.enter)="_handleEnter($event)"
+      (input)="_handleInputChange($event)"
+      (focus)="_handleFocus()"
+      (blur)="_handleBlur()"
+    />
+    <hlm-input-group-addon align="inline-end">
+      @if (_showClearButton()) {
+        <button
+          hlmInputGroupButton
+          size="icon-xs"
+          variant="ghost"
+          [attr.aria-label]="clearAriaLabel()"
+          (click)="_clear()"
+          [disabled]="_disabled()"
+        >
+          <ng-icon name="lucideX" />
+        </button>
+      }
+      <button
+        hlmInputGroupButton
+        size="icon-xs"
+        [attr.aria-label]="calendarAriaLabel()"
+        (click)="_popover().open()"
+        [disabled]="_disabled()"
+      >
+        <ng-icon name="lucideCalendar" />
+      </button>
+    </hlm-input-group-addon>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }, { kind: "directive", type: i1.HlmInputGroupButton, selector: "button[hlmInputGroupButton]", inputs: ["size", "type"] }, { kind: "directive", type: i1.HlmInputGroupInput, selector: "input[hlmInputGroupInput]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmMonthYearInput, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hlm-month-year-input',
+                    imports: [HlmInputGroupImports, NgIcon],
+                    providers: [provideIcons({ lucideCalendar, lucideX }), provideBrnDatePickerTrigger(HlmMonthYearInput)],
                     changeDetection: ChangeDetectionStrategy.OnPush,
+                    hostDirectives: [HlmInputGroup],
+                    template: `
+    <input
+      #input
+      hlmInputGroupInput
+      [value]="_inputValue()"
+      [id]="inputId()"
+      [placeholder]="placeholder()"
+      [disabled]="_disabled()"
+      [forceInvalid]="forceInvalid()"
+      (click)="_handleClick()"
+      (keydown.arrowDown)="_open()"
+      (keydown.enter)="_handleEnter($event)"
+      (input)="_handleInputChange($event)"
+      (focus)="_handleFocus()"
+      (blur)="_handleBlur()"
+    />
+    <hlm-input-group-addon align="inline-end">
+      @if (_showClearButton()) {
+        <button
+          hlmInputGroupButton
+          size="icon-xs"
+          variant="ghost"
+          [attr.aria-label]="clearAriaLabel()"
+          (click)="_clear()"
+          [disabled]="_disabled()"
+        >
+          <ng-icon name="lucideX" />
+        </button>
+      }
+      <button
+        hlmInputGroupButton
+        size="icon-xs"
+        [attr.aria-label]="calendarAriaLabel()"
+        (click)="_popover().open()"
+        [disabled]="_disabled()"
+      >
+        <ng-icon name="lucideCalendar" />
+      </button>
+    </hlm-input-group-addon>
+  `,
                 }]
-        }] });
+        }], propDecorators: { parseDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "parseDate", required: false }] }], formatInputDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatInputDate", required: false }] }] } });
+
+const HLM_MONTH_YEAR_PICKER_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => HlmMonthYearPicker),
+    multi: true,
+};
+class HlmMonthYearPicker {
+    _config = injectHlmMonthYearPickerConfig();
+    popover = viewChild.required(BrnPopover, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "popover" }] : /* istanbul ignore next */ []));
+    _trigger = contentChild(BrnDatePickerTriggerToken, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_trigger" }] : /* istanbul ignore next */ []));
+    /** The minimum date that can be selected.*/
+    min = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "min" }] : /* istanbul ignore next */ []));
+    /** The maximum date that can be selected. */
+    max = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "max" }] : /* istanbul ignore next */ []));
+    /** Determine if the date picker is disabled. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** The selected value. */
+    date = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "date" }] : /* istanbul ignore next */ []));
+    /** The date the calendar focuses on first open when no date is selected. */
+    defaultFocusedDate = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "defaultFocusedDate" }] : /* istanbul ignore next */ []));
+    _mutableDate = linkedSignal(this.date, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_mutableDate" }] : /* istanbul ignore next */ []));
+    /** If true, the date picker will close when a date is selected. */
+    autoCloseOnSelect = input(this._config.autoCloseOnSelect, { ...(ngDevMode ? { debugName: "autoCloseOnSelect" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Defines how the date should be displayed in the UI.  */
+    formatDate = input(this._config.formatDate, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formatDate" }] : /* istanbul ignore next */ []));
+    /** Defines how the date should be transformed before saving to model/form. */
+    transformDate = input(this._config.transformDate, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "transformDate" }] : /* istanbul ignore next */ []));
+    _popoverState = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_popoverState" }] : /* istanbul ignore next */ []));
+    _disabled = linkedSignal(this.disabled, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+    /** @internal The disabled state as a readonly signal */
+    disabledState = this._disabled.asReadonly();
+    formattedDate = computed(() => {
+        const date = this._mutableDate();
+        return date ? this.formatDate()(date) : undefined;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formattedDate" }] : /* istanbul ignore next */ []));
+    dateChange = output();
+    labelableId = computed(() => this._trigger()?.triggerId(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelableId" }] : /* istanbul ignore next */ []));
+    hasDate = computed(() => !!this._mutableDate(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasDate" }] : /* istanbul ignore next */ []));
+    /** @internal The current raw value, used by inputs to reformat on focus. */
+    value = computed(() => this._mutableDate() ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    _onChange;
+    _onTouched;
+    _onStateChange(state) {
+        this._popoverState.set(state);
+        if (state === 'closed')
+            this._onTouched?.();
+    }
+    _handleChange(value) {
+        if (this._disabled())
+            return;
+        this.updateDate(value ?? null);
+        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.
+     */
+    updateDate(value) {
+        if (this._disabled())
+            return;
+        const transformedDate = value != null ? this.transformDate()(value) : undefined;
+        this._mutableDate.set(transformedDate);
+        this._onChange?.(transformedDate ?? null);
+        this.dateChange.emit(transformedDate ?? null);
+    }
+    /** CONTROL VALUE ACCESSOR */
+    writeValue(value) {
+        this._mutableDate.set(value ? this.transformDate()(value) : undefined);
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    touched() {
+        this._onTouched?.();
+    }
+    setDisabledState(isDisabled) {
+        this._disabled.set(isDisabled);
+    }
+    open() {
+        this._popoverState.set('open');
+    }
+    close() {
+        this._popoverState.set('closed');
+    }
+    reset() {
+        this._mutableDate.set(undefined);
+        this._onChange?.(null);
+        this.dateChange.emit(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmMonthYearPicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.7", type: HlmMonthYearPicker, isStandalone: true, selector: "hlm-month-year-picker", inputs: { 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 }, 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" }, providers: [
+            HLM_MONTH_YEAR_PICKER_VALUE_ACCESSOR,
+            provideBrnDatePicker(HlmMonthYearPicker),
+            provideBrnLabelable(HlmMonthYearPicker),
+        ], 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: `
+    <hlm-popover sideOffset="5" [state]="_popoverState()" (stateChanged)="_onStateChange($event)">
+      <ng-content />
+
+      <hlm-popover-content class="w-fit p-0" *hlmPopoverPortal="let ctx">
+        <ng-content select="[hlmDatePickerHeader]" />
+        <hlm-month-year-calendar
+          class="rounded-none border-0"
+          [date]="_mutableDate()"
+          [defaultFocusedDate]="_mutableDate() ?? defaultFocusedDate()"
+          [min]="min()"
+          [max]="max()"
+          [disabled]="_disabled()"
+          (dateChange)="_handleChange($event)"
+        />
+        <ng-content select="[hlmDatePickerFooter]" />
+      </hlm-popover-content>
+    </hlm-popover>
+  `, 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: i3.HlmMonthYearCalendar, selector: "hlm-month-year-calendar" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmMonthYearPicker, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hlm-month-year-picker',
+                    imports: [HlmPopoverImports, HlmCalendarImports],
+                    providers: [
+                        HLM_MONTH_YEAR_PICKER_VALUE_ACCESSOR,
+                        provideBrnDatePicker(HlmMonthYearPicker),
+                        provideBrnLabelable(HlmMonthYearPicker),
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    hostDirectives: [BrnFieldControl],
+                    host: { class: 'block' },
+                    template: `
+    <hlm-popover sideOffset="5" [state]="_popoverState()" (stateChanged)="_onStateChange($event)">
+      <ng-content />
+
+      <hlm-popover-content class="w-fit p-0" *hlmPopoverPortal="let ctx">
+        <ng-content select="[hlmDatePickerHeader]" />
+        <hlm-month-year-calendar
+          class="rounded-none border-0"
+          [date]="_mutableDate()"
+          [defaultFocusedDate]="_mutableDate() ?? defaultFocusedDate()"
+          [min]="min()"
+          [max]="max()"
+          [disabled]="_disabled()"
+          (dateChange)="_handleChange($event)"
+        />
+        <ng-content select="[hlmDatePickerFooter]" />
+      </hlm-popover-content>
+    </hlm-popover>
+  `,
+                }]
+        }], propDecorators: { popover: [{ type: i0.ViewChild, args: [i0.forwardRef(() => BrnPopover), { isSignal: true }] }], _trigger: [{ type: i0.ContentChild, args: [i0.forwardRef(() => BrnDatePickerTriggerToken), { isSignal: true }] }], 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 }] }], 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"] }] } });
 
 /*
  * Public API Surface of date-picker
  */
-const HlmDatePickerImports = [HlmDatePicker, HlmDatePickerMulti, HlmDateRangePicker];
+const HlmDatePickerImports = [
+    HlmDatePicker,
+    HlmDatePickerAnchor,
+    HlmDatePickerInput,
+    HlmDatePickerMulti,
+    HlmDateMultiInput,
+    HlmDateRangeInput,
+    HlmDateRangePicker,
+    HlmDatePickerTrigger,
+    HlmMonthYearPicker,
+    HlmMonthYearInput,
+];
 class HlmDatePickerModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmDatePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.1", ngImport: i0, type: HlmDatePickerModule, imports: [HlmDatePicker, HlmDatePickerMulti, HlmDateRangePicker], exports: [HlmDatePicker, HlmDatePickerMulti, HlmDateRangePicker] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmDatePickerModule, imports: [HlmDatePickerImports] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDatePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: HlmDatePickerModule, imports: [HlmDatePicker,
+            HlmDatePickerAnchor,
+            HlmDatePickerInput,
+            HlmDatePickerMulti,
+            HlmDateMultiInput,
+            HlmDateRangeInput,
+            HlmDateRangePicker,
+            HlmDatePickerTrigger,
+            HlmMonthYearPicker,
+            HlmMonthYearInput], exports: [HlmDatePicker,
+            HlmDatePickerAnchor,
+            HlmDatePickerInput,
+            HlmDatePickerMulti,
+            HlmDateMultiInput,
+            HlmDateRangeInput,
+            HlmDateRangePicker,
+            HlmDatePickerTrigger,
+            HlmMonthYearPicker,
+            HlmMonthYearInput] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDatePickerModule, imports: [HlmDatePicker,
+            HlmDatePickerInput,
+            HlmDatePickerMulti,
+            HlmDateMultiInput,
+            HlmDateRangeInput,
+            HlmDateRangePicker,
+            HlmDatePickerTrigger,
+            HlmMonthYearPicker,
+            HlmMonthYearInput] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmDatePickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDatePickerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...HlmDatePickerImports],
@@ -595,5 +1550,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR, HLM_DATE_PICKER_VALUE_ACCESSOR, HLM_DATE_RANGE_PICKER_VALUE_ACCESSOR, HlmDatePicker, HlmDatePickerImports, HlmDatePickerModule, HlmDatePickerMulti, HlmDateRangePicker, injectHlmDatePickerConfig, injectHlmDatePickerMultiConfig, injectHlmDateRangePickerConfig, provideHlmDatePickerConfig, provideHlmDatePickerMultiConfig, provideHlmDateRangePickerConfig };
+export { HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR, HLM_DATE_PICKER_VALUE_ACCESSOR, HLM_DATE_RANGE_PICKER_VALUE_ACCESSOR, HLM_MONTH_YEAR_PICKER_VALUE_ACCESSOR, HlmDateMultiInput, HlmDatePicker, HlmDatePickerAnchor, HlmDatePickerImports, HlmDatePickerInput, HlmDatePickerModule, HlmDatePickerMulti, HlmDatePickerTrigger, HlmDateRangeInput, HlmDateRangePicker, HlmMonthYearInput, HlmMonthYearPicker, injectHlmDatePickerConfig, injectHlmDatePickerMultiConfig, injectHlmDateRangePickerConfig, injectHlmMonthYearPickerConfig, provideHlmDatePickerConfig, provideHlmDatePickerMultiConfig, provideHlmDateRangePickerConfig, provideHlmMonthYearPickerConfig };
 //# sourceMappingURL=date-picker.mjs.map