@spartan-ng/cli 1.0.4 → 1.1.0-alpha.1

package/src/generators/ui/libs/date-picker/files/lib/hlm-date-picker-input.ts.template

@@ -1,29 +1,23 @@
-import { BooleanInput } from '@angular/cdk/coercion';
-import {
-	booleanAttribute,
-	ChangeDetectionStrategy,
-	Component,
-	computed,
-	effect,
-	ElementRef,
-	inject,
-	input,
-	linkedSignal,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideCalendar, lucideX } from '@ng-icons/lucide';
+import {
+	BrnDateInput,
+	type BrnDatePickerTriggerBase,
+	provideBrnDatePickerTrigger,
+} from '@spartan-ng/brain/date-picker';
 import { HlmInputGroup, HlmInputGroupImports } from '<%- importAlias %>/input-group';
-import { HlmDatePickerTriggerBase, provideHlmDatePickerTrigger } from './hlm-date-picker-trigger.token';
-import { injectHlmDatePicker, injectHlmDatePickerConfig } from './hlm-date-picker.token';
+import { injectHlmDatePickerConfig } from './hlm-date-picker.token';
 
 @Component({
 	selector: 'hlm-date-picker-input',
 	imports: [HlmInputGroupImports, NgIcon],
-	providers: [provideIcons({ lucideCalendar, lucideX }), provideHlmDatePickerTrigger(HlmDatePickerInput)],
+	providers: [provideIcons({ lucideCalendar, lucideX }), provideBrnDatePickerTrigger(HlmDatePickerInput)],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	hostDirectives: [HlmInputGroup],
 	template: `
 		<input
+			#input
 			hlmInputGroupInput
 			[value]="_inputValue()"
 			[id]="inputId()"
@@ -34,7 +28,8 @@ import { injectHlmDatePicker, injectHlmDatePickerConfig } from './hlm-date-picke
 			(keydown.arrowDown)="_open()"
 			(keydown.enter)="_handleEnter($event)"
 			(input)="_handleInputChange($event)"
-			(blur)="_commitDate()"
+			(focus)="_handleFocus()"
+			(blur)="_handleBlur()"
 		/>
 		<hlm-input-group-addon align="inline-end">
 			@if (_showClearButton()) {
@@ -61,127 +56,31 @@ import { injectHlmDatePicker, injectHlmDatePickerConfig } from './hlm-date-picke
 		</hlm-input-group-addon>
 	`,
 })
-export class HlmDatePickerInput<T> implements HlmDatePickerTriggerBase {
-	private static _nextId = 0;
-	private readonly _host = inject(ElementRef);
-	private readonly _datePicker = injectHlmDatePicker<T>();
+export class HlmDatePickerInput<T> extends BrnDateInput<T> implements BrnDatePickerTriggerBase {
 	private readonly _config = injectHlmDatePickerConfig<T>();
 
-	protected readonly _popover = this._datePicker.popover;
-	protected readonly _disabled = this._datePicker.disabledState;
-
-	public readonly inputId = input(`hlm-date-picker-input-${HlmDatePickerInput._nextId++}`);
-
-	public readonly placeholder = input('');
-
-	public readonly inputValue = input<string>('');
-
 	/**
-	 * Parses input text into a date value. Return `undefined` for invalid
+	 * 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`.
 	 */
-	public readonly parseDate = input<(value: string) => T | undefined>(this._config.parseDate);
-
-	public readonly forceInvalid = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
-
-	/** Show a clear button that resets the input and picker date. Hidden when empty. */
-	public readonly showClear = input<boolean, BooleanInput>(true, { transform: booleanAttribute });
-
-	/** Open the popover on input click. */
-	public readonly openOnClick = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
-
-	/** Accessible label for the clear button. */
-	public readonly clearAriaLabel = input<string>('Clear date');
-
-	/** Accessible label for the calendar trigger button. */
-	public readonly calendarAriaLabel = input<string>('Open calendar');
-
-	/** @internal Id used by the trigger contract for labeling. */
-	public readonly triggerId = this.inputId;
+	public readonly parseDate = input<(value: string) => T | null>(this._config.parseDate);
 
 	/**
-	 * Text shown in the input. Mirrors the picker's `formattedDate` and the
-	 * parent's `inputValue`, and accepts user writes via `_handleInputChange`.
-	 * Commits only happen on blur / Enter, so in-progress text isn't clobbered.
+	 * 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`.
 	 */
-	protected readonly _inputValue = linkedSignal<{ formatted: string | undefined; inputValue: string }, string>({
-		source: () => ({
-			formatted: this._datePicker.formattedDate(),
-			inputValue: this.inputValue(),
-		}),
-		computation: (source, previous) => {
-			// First render: prefer formatted, fall back to inputValue.
-			if (previous === undefined) {
-				return source.formatted ?? source.inputValue;
-			}
-
-			// Picker's formatted date changed - snap to canonical format.
-			if (source.formatted !== previous.source.formatted) {
-				if (source.formatted !== undefined) {
-					return source.formatted;
-				}
-				// Cleared externally vs. user has invalid text in flight: only
-				// mirror the clear when the displayed text was in sync.
-				return previous.value === previous.source.formatted ? '' : previous.value;
-			}
-
-			// Parent updated inputValue - reflect it.
-			if (source.inputValue !== previous.source.inputValue) {
-				return source.inputValue;
-			}
-
-			return previous.value;
-		},
-	});
-
-	constructor() {
-		effect(() => this._popover()?.setOrigin(this._host.nativeElement));
-	}
-
-	protected _handleInputChange(event: Event) {
-		const text = (event.target as HTMLInputElement).value;
-		this._inputValue.set(text);
-	}
-
-	protected readonly _showClearButton = computed(() => this.showClear() && this._inputValue().length > 0);
-
-	protected _clear() {
-		this._inputValue.set('');
-		this._datePicker.updateDate?.(undefined);
-		this._datePicker.touched?.();
-	}
-
-	protected _handleEnter(event: Event) {
-		event.preventDefault();
-		this._commitDate();
-		this._popover().close();
-	}
-
-	protected _commitDate() {
-		const value = this._inputValue();
-
-		if (!value) {
-			this._datePicker.updateDate?.(undefined);
-			this._datePicker.touched?.();
-			return;
-		}
-
-		// Invalid parse: clear the picker date, keep the text so the user can fix it.
-		const parsed = this.parseDate()(value);
-		this._datePicker.updateDate?.(parsed ?? undefined);
-		this._datePicker.touched?.();
-	}
+	public readonly formatInputDate = input<(date: T) => string>(this._config.formatInputDate);
 
-	protected _open() {
-		this._popover().open();
+	protected parseValue(value: string): T | null {
+		return this.parseDate()(value);
 	}
 
-	protected _handleClick() {
-		if (this.openOnClick()) {
-			this._open();
-		}
+	protected formatInputValue(value: T): string {
+		return this.formatInputDate()(value);
 	}
 }

package/src/generators/ui/libs/date-picker/files/lib/hlm-date-picker-multi.token.ts.template

@@ -14,6 +14,15 @@ export interface HlmDatePickerMultiConfig<T> {
 	 */
 	formatDates: (dates: T[]) => string;
 
+	/**
+	 * Defines how the dates should be displayed while the input is focused,
+	 * i.e. the format the user is expected to type in.
+	 *
+	 * @param dates
+	 * @returns formatted dates in the input/edit format
+	 */
+	formatInputDates: (dates: T[]) => string;
+
 	/**
 	 * Defines how the date should be transformed before saving to model/form.
 	 *
@@ -21,13 +30,61 @@ export interface HlmDatePickerMultiConfig<T> {
 	 * @returns transformed date
 	 */
 	transformDates: (dates: T[]) => T[];
+
+	/**
+	 * Parse a user-entered string into a date.
+	 *
+	 * @param value the raw string from the input
+	 * @returns the parsed date, or `null` when the value can't be parsed
+	 */
+	parseDate: (value: string) => T[] | null;
 }
 
 function getDefaultConfig<T>(): HlmDatePickerMultiConfig<T> {
 	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: Date[] = [];
+
+			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 as T[];
+		},
 	};
 }
 

package/src/generators/ui/libs/date-picker/files/lib/hlm-date-picker-multi.ts.template

@@ -14,6 +14,7 @@ import {
 	viewChild,
 } from '@angular/core';
 import { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { type BrnDatePickerBase, BrnDatePickerTriggerToken, provideBrnDatePicker } from '@spartan-ng/brain/date-picker';
 import { BrnFieldControl, provideBrnLabelable } from '@spartan-ng/brain/field';
 import type { ChangeFn, TouchFn } from '@spartan-ng/brain/forms';
 import type { BrnOverlayState } from '@spartan-ng/brain/overlay';
@@ -21,8 +22,6 @@ import { BrnPopover } from '@spartan-ng/brain/popover';
 import { HlmCalendarMulti } from '<%- importAlias %>/calendar';
 import { HlmPopoverImports } from '<%- importAlias %>/popover';
 import { injectHlmDatePickerMultiConfig } from './hlm-date-picker-multi.token';
-import { HlmDatePickerTriggerToken } from './hlm-date-picker-trigger.token';
-import { HlmDatePickerBase, provideHlmDatePicker } from './hlm-date-picker.token';
 
 export const HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR = {
 	provide: NG_VALUE_ACCESSOR,
@@ -35,7 +34,7 @@ export const HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR = {
 	imports: [HlmPopoverImports, HlmCalendarMulti],
 	providers: [
 		HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR,
-		provideHlmDatePicker(HlmDatePickerMulti),
+		provideBrnDatePicker(HlmDatePickerMulti),
 		provideBrnLabelable(HlmDatePickerMulti),
 	],
 	changeDetection: ChangeDetectionStrategy.OnPush,
@@ -63,12 +62,12 @@ export const HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR = {
 		</hlm-popover>
 	`,
 })
-export class HlmDatePickerMulti<T> implements HlmDatePickerBase<T>, ControlValueAccessor {
+export class HlmDatePickerMulti<T> implements BrnDatePickerBase<T[]>, ControlValueAccessor {
 	private readonly _config = injectHlmDatePickerMultiConfig<T>();
 
 	public readonly popover = viewChild.required(BrnPopover);
 
-	private readonly _trigger = contentChild(HlmDatePickerTriggerToken);
+	private readonly _trigger = contentChild(BrnDatePickerTriggerToken);
 
 	/** Show dropdowns to navigate between months or years. */
 	public readonly captionLayout = input<'dropdown' | 'label' | 'dropdown-months' | 'dropdown-years'>('label');
@@ -128,6 +127,9 @@ export class HlmDatePickerMulti<T> implements HlmDatePickerBase<T>, ControlValue
 
 	public readonly hasDate = computed(() => !!this._mutableDate()?.length);
 
+	/** @internal The current raw value, used by inputs to reformat on focus. */
+	public readonly value = computed(() => this._mutableDate() ?? null);
+
 	protected _onChange?: ChangeFn<T[]>;
 	protected _onTouched?: TouchFn;
 
@@ -151,6 +153,24 @@ export class HlmDatePickerMulti<T> implements HlmDatePickerBase<T>, ControlValue
 		}
 	}
 
+	/**
+	 * 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.
+	 */
+	public updateDate(value: T[] | null) {
+		if (this._disabled()) return;
+		const transformedDate = value ? this.transformDates()(value) : undefined;
+
+		this._mutableDate.set(transformedDate);
+		this._onChange?.(transformedDate ?? []);
+		this.dateChange.emit(transformedDate ?? []);
+	}
+
+	public touched(): void {
+		this._onTouched?.();
+	}
+
 	/** CONTROL VALUE ACCESSOR */
 	public writeValue(value: T[] | null): void {
 		this._mutableDate.set(value ? this.transformDates()(value) : undefined);

package/src/generators/ui/libs/date-picker/files/lib/hlm-date-picker-trigger.ts.template

@@ -2,18 +2,21 @@ import { BooleanInput } from '@angular/cdk/coercion';
 import { booleanAttribute, ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideChevronDown } from '@ng-icons/lucide';
+import {
+	type BrnDatePickerTriggerBase,
+	injectBrnDatePicker,
+	provideBrnDatePickerTrigger,
+} from '@spartan-ng/brain/date-picker';
 import { BrnFieldControl, BrnFieldControlDescribedBy } from '@spartan-ng/brain/field';
 import { ButtonVariants, HlmButtonImports } from '<%- importAlias %>/button';
 import { HlmPopoverTrigger } from '<%- importAlias %>/popover';
 import { hlm } from '<%- importAlias %>/utils';
 import { ClassValue } from 'clsx';
-import { HlmDatePickerTriggerBase, provideHlmDatePickerTrigger } from './hlm-date-picker-trigger.token';
-import { injectHlmDatePicker } from './hlm-date-picker.token';
 
 @Component({
 	selector: 'hlm-date-picker-trigger',
 	imports: [HlmButtonImports, HlmPopoverTrigger, NgIcon, BrnFieldControlDescribedBy],
-	providers: [provideIcons({ lucideChevronDown }), provideHlmDatePickerTrigger(HlmDatePickerTrigger)],
+	providers: [provideIcons({ lucideChevronDown }), provideBrnDatePickerTrigger(HlmDatePickerTrigger)],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: { 'data-slot': 'date-picker-trigger' },
 	template: `
@@ -48,11 +51,11 @@ import { injectHlmDatePicker } from './hlm-date-picker.token';
 		</button>
 	`,
 })
-export class HlmDatePickerTrigger implements HlmDatePickerTriggerBase {
+export class HlmDatePickerTrigger implements BrnDatePickerTriggerBase {
 	private static _nextId = 0;
 
 	private readonly _fieldControl = inject(BrnFieldControl, { optional: true });
-	private readonly _datePicker = injectHlmDatePicker();
+	private readonly _datePicker = injectBrnDatePicker();
 
 	private readonly _invalid = this._fieldControl?.invalid;
 	protected readonly _spartanInvalid = computed(() => this.forceInvalid() || this._fieldControl?.spartanInvalid());

package/src/generators/ui/libs/date-picker/files/lib/hlm-date-picker.token.ts.template

@@ -1,36 +1,4 @@
-import {
-	type ExistingProvider,
-	inject,
-	InjectionToken,
-	type Signal,
-	type Type,
-	type ValueProvider,
-} from '@angular/core';
-import type { BrnPopover } from '@spartan-ng/brain/popover';
-
-export interface HlmDatePickerBase<T> {
-	popover: Signal<BrnPopover>;
-	disabledState: Signal<boolean>;
-	formattedDate: Signal<string | undefined>;
-	hasDate: Signal<boolean>;
-	/** Commit a date to the picker (e.g. from a parsed input). Pass `undefined` to clear. Optional. */
-	updateDate?(value: T | undefined): void;
-	// used for ControlValueAccessor
-	touched?(): void;
-}
-
-export const HlmDatePickerToken = new InjectionToken<HlmDatePickerBase<unknown>>('HlmDatePickerToken');
-
-export function provideHlmDatePicker(instance: Type<HlmDatePickerBase<unknown>>): ExistingProvider {
-	return { provide: HlmDatePickerToken, useExisting: instance };
-}
-
-/**
- * Inject the date picker component.
- */
-export function injectHlmDatePicker<T>(): HlmDatePickerBase<T> {
-	return inject(HlmDatePickerToken) as HlmDatePickerBase<T>;
-}
+import { inject, InjectionToken, type ValueProvider } from '@angular/core';
 
 export interface HlmDatePickerConfig<T> {
 	/**
@@ -46,6 +14,15 @@ export interface HlmDatePickerConfig<T> {
 	 */
 	formatDate: (date: T) => string;
 
+	/**
+	 * Defines how the date should be displayed while the input is focused,
+	 * i.e. the format the user is expected to type in.
+	 *
+	 * @param date
+	 * @returns formatted date in the input/edit format
+	 */
+	formatInputDate: (date: T) => string;
+
 	/**
 	 * Defines how the date should be transformed before saving to model/form.
 	 *
@@ -58,18 +35,19 @@ export interface HlmDatePickerConfig<T> {
 	 * Parse a user-entered string into a date.
 	 *
 	 * @param value the raw string from the input
-	 * @returns the parsed date, or `undefined` when the value can't be parsed
+	 * @returns the parsed date, or `null` when the value can't be parsed
 	 */
-	parseDate: (value: string) => T | undefined;
+	parseDate: (value: string) => T | null;
 }
 
 function getDefaultConfig<T>(): HlmDatePickerConfig<T> {
 	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()) ? undefined : (date as T);
+			return isNaN(date.getTime()) ? null : (date as T);
 		},
 		autoCloseOnSelect: false,
 	};

package/src/generators/ui/libs/date-picker/files/lib/hlm-date-picker.ts.template

@@ -13,14 +13,14 @@ import {
 	viewChild,
 } from '@angular/core';
 import { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { type BrnDatePickerBase, BrnDatePickerTriggerToken, provideBrnDatePicker } from '@spartan-ng/brain/date-picker';
 import { BrnFieldControl, provideBrnLabelable } from '@spartan-ng/brain/field';
 import type { ChangeFn, TouchFn } from '@spartan-ng/brain/forms';
 import type { BrnOverlayState } from '@spartan-ng/brain/overlay';
 import { BrnPopover } from '@spartan-ng/brain/popover';
 import { HlmCalendar } from '<%- importAlias %>/calendar';
 import { HlmPopoverImports } from '<%- importAlias %>/popover';
-import { HlmDatePickerTriggerToken } from './hlm-date-picker-trigger.token';
-import { HlmDatePickerBase, injectHlmDatePickerConfig, provideHlmDatePicker } from './hlm-date-picker.token';
+import { injectHlmDatePickerConfig } from './hlm-date-picker.token';
 
 export const HLM_DATE_PICKER_VALUE_ACCESSOR = {
 	provide: NG_VALUE_ACCESSOR,
@@ -31,7 +31,7 @@ export const HLM_DATE_PICKER_VALUE_ACCESSOR = {
 @Component({
 	selector: 'hlm-date-picker',
 	imports: [HlmPopoverImports, HlmCalendar],
-	providers: [HLM_DATE_PICKER_VALUE_ACCESSOR, provideHlmDatePicker(HlmDatePicker), provideBrnLabelable(HlmDatePicker)],
+	providers: [HLM_DATE_PICKER_VALUE_ACCESSOR, provideBrnDatePicker(HlmDatePicker), provideBrnLabelable(HlmDatePicker)],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	hostDirectives: [BrnFieldControl],
 	host: { class: 'block' },
@@ -56,12 +56,12 @@ export const HLM_DATE_PICKER_VALUE_ACCESSOR = {
 		</hlm-popover>
 	`,
 })
-export class HlmDatePicker<T> implements HlmDatePickerBase<T>, ControlValueAccessor {
+export class HlmDatePicker<T> implements BrnDatePickerBase<T>, ControlValueAccessor {
 	private readonly _config = injectHlmDatePickerConfig<T>();
 
 	public readonly popover = viewChild.required(BrnPopover);
 
-	private readonly _trigger = contentChild(HlmDatePickerTriggerToken);
+	private readonly _trigger = contentChild(BrnDatePickerTriggerToken);
 
 	/** Show dropdowns to navigate between months or years. */
 	public readonly captionLayout = input<'dropdown' | 'label' | 'dropdown-months' | 'dropdown-years'>('label');
@@ -108,13 +108,16 @@ export class HlmDatePicker<T> implements HlmDatePickerBase<T>, ControlValueAcces
 		return date ? this.formatDate()(date) : undefined;
 	});
 
-	public readonly dateChange = output<T>();
+	public readonly dateChange = output<T | null>();
 
 	public readonly labelableId = computed(() => this._trigger()?.triggerId());
 
 	public readonly hasDate = computed(() => !!this._mutableDate());
 
-	protected _onChange?: ChangeFn<T>;
+	/** @internal The current raw value, used by inputs to reformat on focus. */
+	public readonly value = computed(() => this._mutableDate() ?? null);
+
+	protected _onChange?: ChangeFn<T | null>;
 	protected _onTouched?: TouchFn;
 
 	protected _onStateChange(state: BrnOverlayState) {
@@ -124,7 +127,7 @@ export class HlmDatePicker<T> implements HlmDatePickerBase<T>, ControlValueAcces
 
 	protected _handleChange(value: T | undefined) {
 		if (this._disabled()) return;
-		this.updateDate(value);
+		this.updateDate(value ?? null);
 
 		if (this.autoCloseOnSelect()) {
 			this._popoverState.set('closed');
@@ -137,13 +140,13 @@ export class HlmDatePicker<T> implements HlmDatePickerBase<T>, ControlValueAcces
 	 * close the popover - it's intended to be called from a text input that
 	 * is parsing user-entered values while typing.
 	 */
-	public updateDate(value: T | undefined) {
+	public updateDate(value: T | null) {
 		if (this._disabled()) return;
-		const transformedDate = value !== undefined ? this.transformDate()(value) : undefined;
+		const transformedDate = value != null ? this.transformDate()(value) : undefined;
 
 		this._mutableDate.set(transformedDate);
-		this._onChange?.(transformedDate as T);
-		this.dateChange.emit(transformedDate as T);
+		this._onChange?.(transformedDate ?? null);
+		this.dateChange.emit(transformedDate ?? null);
 	}
 
 	/** CONTROL VALUE ACCESSOR */
@@ -151,7 +154,7 @@ export class HlmDatePicker<T> implements HlmDatePickerBase<T>, ControlValueAcces
 		this._mutableDate.set(value ? this.transformDate()(value) : undefined);
 	}
 
-	public registerOnChange(fn: ChangeFn<T>): void {
+	public registerOnChange(fn: ChangeFn<T | null>): void {
 		this._onChange = fn;
 	}
 
@@ -177,7 +180,7 @@ export class HlmDatePicker<T> implements HlmDatePickerBase<T>, ControlValueAcces
 
 	public reset() {
 		this._mutableDate.set(undefined);
-		this._onChange?.(undefined as T);
-		this.dateChange.emit(undefined as T);
+		this._onChange?.(null);
+		this.dateChange.emit(null);
 	}
 }

package/src/generators/ui/libs/date-picker/files/lib/hlm-date-range-input.ts.template

@@ -0,0 +1,86 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideCalendar, lucideX } from '@ng-icons/lucide';
+import {
+	BrnDateInput,
+	type BrnDatePickerTriggerBase,
+	provideBrnDatePickerTrigger,
+} from '@spartan-ng/brain/date-picker';
+import { HlmInputGroup, HlmInputGroupImports } from '<%- importAlias %>/input-group';
+import { injectHlmDateRangePickerConfig } from './hlm-date-range-picker.token';
+
+@Component({
+	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>
+	`,
+})
+export class HlmDateRangeInput<T> extends BrnDateInput<[T, T]> implements BrnDatePickerTriggerBase {
+	private readonly _config = injectHlmDateRangePickerConfig<T>();
+
+	/**
+	 * 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`.
+	 */
+	public readonly parseDate = input<(value: string) => [T, T] | null>(this._config.parseDate);
+
+	/**
+	 * 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`.
+	 */
+	public readonly formatInputDates = input<(dates: [T | null, T | null]) => string>(this._config.formatInputDates);
+
+	protected override parseValue(value: string): [T, T] | null {
+		return this.parseDate()(value);
+	}
+
+	protected override formatInputValue(value: [T, T]): string {
+		return this.formatInputDates()(value);
+	}
+}