@spartan-ng/cli 0.0.1-alpha.707 → 0.0.1-alpha.708

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

@@ -0,0 +1,87 @@
+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 { 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)],
+	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>
+	`,
+})
+export class HlmDatePickerTrigger implements HlmDatePickerTriggerBase {
+	private static _nextId = 0;
+
+	private readonly _fieldControl = inject(BrnFieldControl, { optional: true });
+	private readonly _datePicker = injectHlmDatePicker();
+
+	private readonly _invalid = this._fieldControl?.invalid;
+	protected readonly _spartanInvalid = computed(() => this.forceInvalid() || this._fieldControl?.spartanInvalid());
+	protected readonly _dirty = this._fieldControl?.dirty;
+	protected readonly _touched = this._fieldControl?.touched;
+
+	protected readonly _ariaInvalid = computed(() => (this._invalid?.() ? 'true' : null));
+
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() =>
+		hlm('spartan-date-picker-trigger w-64 justify-between', this.userClass()),
+	);
+
+	protected readonly _isPlaceholder = computed(() => !this._datePicker.hasDate());
+
+	/** The id of the button that opens the date picker. */
+	public readonly buttonId = input<string>(`hlm-date-picker-${++HlmDatePickerTrigger._nextId}`);
+
+	/** @internal The id of the button that opens the date picker, used for labeling. */
+	public readonly triggerId = this.buttonId;
+
+	/** Forces the invalid state visually, regardless of form control state. */
+	public readonly forceInvalid = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
+
+	public readonly variant = input<ButtonVariants['variant']>('outline');
+
+	public readonly showTrigger = input<boolean, BooleanInput>(true, { transform: booleanAttribute });
+
+	protected readonly _popover = this._datePicker.popover;
+	protected readonly _disabled = this._datePicker.disabledState;
+	protected readonly _formattedDate = this._datePicker.formattedDate;
+}

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

@@ -1,4 +1,36 @@
-import { inject, InjectionToken, type ValueProvider } from '@angular/core';
+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>;
+}
 
 export interface HlmDatePickerConfig<T> {
 	/**
@@ -21,12 +53,24 @@ export interface HlmDatePickerConfig<T> {
 	 * @returns transformed date
 	 */
 	transformDate: (date: T) => 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
+	 */
+	parseDate: (value: string) => T | undefined;
 }
 
 function getDefaultConfig<T>(): HlmDatePickerConfig<T> {
 	return {
 		formatDate: (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);
+		},
 		autoCloseOnSelect: false,
 	};
 }

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

@@ -4,25 +4,23 @@ import {
 	ChangeDetectionStrategy,
 	Component,
 	computed,
+	contentChild,
 	forwardRef,
-	inject,
 	input,
 	linkedSignal,
 	output,
 	signal,
+	viewChild,
 } from '@angular/core';
 import { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { NgIcon, provideIcons } from '@ng-icons/core';
-import { lucideChevronDown } from '@ng-icons/lucide';
 import type { BrnDialogState } from '@spartan-ng/brain/dialog';
-import { BrnFieldControl, BrnFieldControlDescribedBy, provideBrnLabelable } from '@spartan-ng/brain/field';
+import { BrnFieldControl, provideBrnLabelable } from '@spartan-ng/brain/field';
 import type { ChangeFn, TouchFn } from '@spartan-ng/brain/forms';
+import { BrnPopover } from '@spartan-ng/brain/popover';
 import { HlmCalendar } from '<%- importAlias %>/calendar';
-import { HlmIcon } from '<%- importAlias %>/icon';
 import { HlmPopoverImports } from '<%- importAlias %>/popover';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
-import { injectHlmDatePickerConfig } from './hlm-date-picker.token';
+import { HlmDatePickerTriggerToken } from './hlm-date-picker-trigger.token';
+import { HlmDatePickerBase, injectHlmDatePickerConfig, provideHlmDatePicker } from './hlm-date-picker.token';
 
 export const HLM_DATE_PICKER_VALUE_ACCESSOR = {
 	provide: NG_VALUE_ACCESSOR,
@@ -30,92 +28,46 @@ export const HLM_DATE_PICKER_VALUE_ACCESSOR = {
 	multi: true,
 };
 
-let nextId = 0;
-
 @Component({
 	selector: 'hlm-date-picker',
-	imports: [NgIcon, HlmIcon, BrnFieldControlDescribedBy, HlmPopoverImports, HlmCalendar],
-	providers: [HLM_DATE_PICKER_VALUE_ACCESSOR, provideIcons({ lucideChevronDown }), provideBrnLabelable(HlmDatePicker)],
+	imports: [HlmPopoverImports, HlmCalendar],
+	providers: [HLM_DATE_PICKER_VALUE_ACCESSOR, provideHlmDatePicker(HlmDatePicker), provideBrnLabelable(HlmDatePicker)],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	hostDirectives: [BrnFieldControl],
-	host: {
-		class: 'block',
-	},
+	host: { class: 'block' },
 	template: `
 		<hlm-popover
 			sideOffset="5"
+			autoFocus="first-heading"
 			[state]="_popoverState()"
 			(stateChanged)="_popoverState.set($event)"
 			(closed)="_onTouched?.()"
 		>
-			<button
-				[id]="buttonId()"
-				type="button"
-				[class]="_computedClass()"
-				[disabled]="_mutableDisabled()"
-				[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"
-				hlmPopoverTrigger
-				brnFieldControlDescribedBy
-			>
-				<span class="truncate">
-					@if (_formattedDate(); as formattedDate) {
-						{{ formattedDate }}
-					} @else {
-						<ng-content />
-					}
-				</span>
-
-				<ng-icon hlm size="sm" name="lucideChevronDown" />
-			</button>
+			<ng-content />
 
 			<hlm-popover-content class="w-fit p-0" *hlmPopoverPortal="let ctx">
+				<ng-content select="[hlmDatePickerHeader]" />
 				<hlm-calendar
-					calendarClass="border-0 rounded-none"
+					calendarClass="rounded-none border-0"
 					[captionLayout]="captionLayout()"
 					[date]="_mutableDate()"
+					[defaultFocusedDate]="_mutableDate() ?? defaultFocusedDate()"
 					[min]="min()"
 					[max]="max()"
-					[disabled]="_mutableDisabled()"
+					[disabled]="_disabled()"
 					(dateChange)="_handleChange($event)"
 				/>
+				<ng-content select="[hlmDatePickerFooter]" />
 			</hlm-popover-content>
 		</hlm-popover>
 	`,
 })
-export class HlmDatePicker<T> implements ControlValueAccessor {
+export class HlmDatePicker<T> implements HlmDatePickerBase<T>, ControlValueAccessor {
 	private readonly _config = injectHlmDatePickerConfig<T>();
-	private readonly _fieldControl = inject(BrnFieldControl, { optional: true });
-
-	private readonly _invalid = this._fieldControl?.invalid;
-	protected readonly _spartanInvalid = this._fieldControl?.spartanInvalid;
-	protected readonly _dirty = this._fieldControl?.dirty;
-	protected readonly _touched = this._fieldControl?.touched;
-
-	protected readonly _errorStateClass = computed(() =>
-		this._spartanInvalid?.()
-			? 'border-destructive focus-visible:border-destructive focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40'
-			: '',
-	);
-	protected readonly _ariaInvalid = computed(() => (this._invalid?.() ? 'true' : null));
-
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _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 rounded-md border px-3 py-2 text-left text-sm font-normal whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50',
-			'focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
-			'disabled:pointer-events-none disabled:opacity-50',
-			'[&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0',
-			this._errorStateClass(),
-			this.userClass(),
-		),
-	);
-
-	/** The id of the button that opens the date picker. */
-	public readonly buttonId = input<string>(`hlm-date-picker-${++nextId}`);
+
+	public readonly popover = viewChild.required(BrnPopover);
+
+	private readonly _trigger = contentChild(HlmDatePickerTriggerToken);
 
 	/** Show dropdowns to navigate between months or years. */
 	public readonly captionLayout = input<'dropdown' | 'label' | 'dropdown-months' | 'dropdown-years'>('label');
@@ -134,6 +86,9 @@ export class HlmDatePicker<T> implements ControlValueAccessor {
 	/** The selected value. */
 	public readonly date = input<T>();
 
+	/** The date the calendar focuses on first open when no date is selected. */
+	public readonly defaultFocusedDate = input<T>();
+
 	protected readonly _mutableDate = linkedSignal(this.date);
 
 	/** If true, the date picker will close when a date is selected. */
@@ -149,33 +104,49 @@ export class HlmDatePicker<T> implements ControlValueAccessor {
 
 	protected readonly _popoverState = signal<BrnDialogState | null>(null);
 
-	protected readonly _mutableDisabled = linkedSignal(this.disabled);
+	protected readonly _disabled = linkedSignal(this.disabled);
 
-	protected readonly _formattedDate = computed(() => {
+	/** @internal The disabled state as a readonly signal */
+	public readonly disabledState = this._disabled.asReadonly();
+
+	public readonly formattedDate = computed(() => {
 		const date = this._mutableDate();
 		return date ? this.formatDate()(date) : undefined;
 	});
 
 	public readonly dateChange = output<T>();
 
-	public readonly labelableId = this.buttonId;
+	public readonly labelableId = computed(() => this._trigger()?.triggerId());
+
+	public readonly hasDate = computed(() => !!this._mutableDate());
 
 	protected _onChange?: ChangeFn<T>;
 	protected _onTouched?: TouchFn;
 
-	protected _handleChange(value: T) {
-		if (this._mutableDisabled()) return;
-		const transformedDate = value !== undefined ? this.transformDate()(value) : value;
-
-		this._mutableDate.set(transformedDate);
-		this._onChange?.(transformedDate);
-		this.dateChange.emit(transformedDate);
+	protected _handleChange(value: T | undefined) {
+		if (this._disabled()) return;
+		this.updateDate(value);
 
 		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.
+	 */
+	public updateDate(value: T | undefined) {
+		if (this._disabled()) return;
+		const transformedDate = value !== undefined ? this.transformDate()(value) : undefined;
+
+		this._mutableDate.set(transformedDate);
+		this._onChange?.(transformedDate as T);
+		this.dateChange.emit(transformedDate as T);
+	}
+
 	/** CONTROL VALUE ACCESSOR */
 	public writeValue(value: T | null): void {
 		this._mutableDate.set(value ? this.transformDate()(value) : undefined);
@@ -189,8 +160,12 @@ export class HlmDatePicker<T> implements ControlValueAccessor {
 		this._onTouched = fn;
 	}
 
+	public touched(): void {
+		this._onTouched?.();
+	}
+
 	public setDisabledState(isDisabled: boolean): void {
-		this._mutableDisabled.set(isDisabled);
+		this._disabled.set(isDisabled);
 	}
 
 	public open() {
@@ -200,4 +175,10 @@ export class HlmDatePicker<T> implements ControlValueAccessor {
 	public close() {
 		this._popoverState.set('closed');
 	}
+
+	public reset() {
+		this._mutableDate.set(undefined);
+		this._onChange?.(undefined as T);
+		this.dateChange.emit(undefined as T);
+	}
 }

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

@@ -4,25 +4,24 @@ import {
 	ChangeDetectionStrategy,
 	Component,
 	computed,
+	contentChild,
 	forwardRef,
-	inject,
 	input,
 	linkedSignal,
 	output,
 	signal,
 	untracked,
+	viewChild,
 } from '@angular/core';
 import { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { provideIcons } from '@ng-icons/core';
-import { lucideChevronDown } from '@ng-icons/lucide';
 import type { BrnDialogState } from '@spartan-ng/brain/dialog';
-import { BrnFieldControl, BrnFieldControlDescribedBy, provideBrnLabelable } from '@spartan-ng/brain/field';
+import { BrnFieldControl, provideBrnLabelable } from '@spartan-ng/brain/field';
 import type { ChangeFn, TouchFn } from '@spartan-ng/brain/forms';
+import { BrnPopover } from '@spartan-ng/brain/popover';
 import { HlmCalendarRange } from '<%- importAlias %>/calendar';
-import { HlmIconImports } from '<%- importAlias %>/icon';
 import { HlmPopoverImports } from '<%- importAlias %>/popover';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { HlmDatePickerTriggerToken } from './hlm-date-picker-trigger.token';
+import { HlmDatePickerBase, provideHlmDatePicker } from './hlm-date-picker.token';
 import { injectHlmDateRangePickerConfig } from './hlm-date-range-picker.token';
 
 export const HLM_DATE_RANGE_PICKER_VALUE_ACCESSOR = {
@@ -31,21 +30,17 @@ export const HLM_DATE_RANGE_PICKER_VALUE_ACCESSOR = {
 	multi: true,
 };
 
-let nextId = 0;
-
 @Component({
 	selector: 'hlm-date-range-picker',
-	imports: [HlmIconImports, HlmPopoverImports, HlmCalendarRange, BrnFieldControlDescribedBy],
+	imports: [HlmPopoverImports, HlmCalendarRange],
 	providers: [
 		HLM_DATE_RANGE_PICKER_VALUE_ACCESSOR,
-		provideIcons({ lucideChevronDown }),
+		provideHlmDatePicker(HlmDateRangePicker),
 		provideBrnLabelable(HlmDateRangePicker),
 	],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	hostDirectives: [BrnFieldControl],
-	host: {
-		class: 'block',
-	},
+	host: { class: 'block' },
 	template: `
 		<hlm-popover
 			sideOffset="5"
@@ -53,31 +48,10 @@ let nextId = 0;
 			(stateChanged)="_popoverState.set($event)"
 			(closed)="_onClose(); _onTouched?.()"
 		>
-			<button
-				[id]="buttonId()"
-				type="button"
-				[class]="_computedClass()"
-				[disabled]="_mutableDisabled()"
-				[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"
-				hlmPopoverTrigger
-				brnFieldControlDescribedBy
-			>
-				<span class="truncate">
-					@if (_formattedDate(); as formattedDate) {
-						{{ formattedDate }}
-					} @else {
-						<ng-content />
-					}
-				</span>
-
-				<ng-icon hlm size="sm" name="lucideChevronDown" />
-			</button>
+			<ng-content />
 
 			<hlm-popover-content class="w-fit p-0" *hlmPopoverPortal="let ctx">
+				<ng-content select="[hlmDatePickerHeader]" />
 				<hlm-calendar-range
 					calendarClass="border-0 rounded-none"
 					[startDate]="_start()"
@@ -85,44 +59,21 @@ let nextId = 0;
 					[endDate]="_end()"
 					[min]="min()"
 					[max]="max()"
-					[disabled]="_mutableDisabled()"
+					[disabled]="_disabled()"
 					(startDateChange)="_handleStartDayChange($event)"
 					(endDateChange)="_handleEndDateChange($event)"
 				/>
+				<ng-content select="[hlmDatePickerFooter]" />
 			</hlm-popover-content>
 		</hlm-popover>
 	`,
 })
-export class HlmDateRangePicker<T> implements ControlValueAccessor {
+export class HlmDateRangePicker<T> implements HlmDatePickerBase<T>, ControlValueAccessor {
 	private readonly _config = injectHlmDateRangePickerConfig<T>();
-	private readonly _fieldControl = inject(BrnFieldControl, { optional: true });
-
-	protected readonly _spartanInvalid = this._fieldControl?.spartanInvalid;
-	protected readonly _touched = this._fieldControl?.touched;
-	protected readonly _dirty = this._fieldControl?.dirty;
-	protected readonly _invalid = this._fieldControl?.invalid;
-
-	protected readonly _errorStateClass = computed(() =>
-		this._spartanInvalid?.()
-			? 'border-destructive focus-visible:border-destructive focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40'
-			: '',
-	);
-	protected readonly _ariaInvalid = computed(() => (this._invalid?.() ? 'true' : null));
-
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _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 rounded-md border px-3 py-2 text-left text-sm font-normal whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50',
-			'focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
-			'disabled:pointer-events-none disabled:opacity-50',
-			'[&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0',
-			this._errorStateClass(),
-			this.userClass(),
-		),
-	);
-
-	/** The id of the button that opens the date picker. */
-	public readonly buttonId = input<string>(`hlm-date-picker-range-${++nextId}`);
+
+	public readonly popover = viewChild.required(BrnPopover);
+
+	private readonly _trigger = contentChild(HlmDatePickerTriggerToken);
 
 	/** Show dropdowns to navigate between months or years. */
 	public readonly captionLayout = input<'dropdown' | 'label' | 'dropdown-months' | 'dropdown-years'>('label');
@@ -159,9 +110,12 @@ export class HlmDateRangePicker<T> implements ControlValueAccessor {
 
 	protected readonly _popoverState = signal<BrnDialogState | null>(null);
 
-	protected readonly _mutableDisabled = linkedSignal(this.disabled);
+	protected readonly _disabled = linkedSignal(this.disabled);
+
+	/** @internal The disabled state as a readonly signal */
+	public readonly disabledState = this._disabled.asReadonly();
 
-	protected readonly _formattedDate = computed(() => {
+	public readonly formattedDate = computed(() => {
 		const start = this._start();
 		const end = this._end();
 		return start || end ? this.formatDates()([start, end]) : undefined;
@@ -169,18 +123,20 @@ export class HlmDateRangePicker<T> implements ControlValueAccessor {
 
 	public readonly dateChange = output<[T, T] | null>();
 
-	public readonly labelableId = this.buttonId;
+	public readonly labelableId = computed(() => this._trigger()?.triggerId());
+
+	public readonly hasDate = computed(() => !!this._start() || !!this._end());
 
 	protected _onChange?: ChangeFn<[T, T] | null>;
 	protected _onTouched?: TouchFn;
 
-	protected _handleStartDayChange(value: T) {
+	protected _handleStartDayChange(value: T | undefined) {
 		this._start.set(value);
 	}
 
-	protected _handleEndDateChange(value: T): void {
+	protected _handleEndDateChange(value: T | undefined): void {
 		this._end.set(value);
-		if (this._mutableDisabled()) return;
+		if (this._disabled()) return;
 
 		const start = this._start();
 		if (start && value) {
@@ -215,7 +171,7 @@ export class HlmDateRangePicker<T> implements ControlValueAccessor {
 	}
 
 	public setDisabledState(isDisabled: boolean): void {
-		this._mutableDisabled.set(isDisabled);
+		this._disabled.set(isDisabled);
 	}
 
 	public open() {
@@ -226,6 +182,14 @@ export class HlmDateRangePicker<T> implements ControlValueAccessor {
 		this._popoverState.set('closed');
 	}
 
+	public reset() {
+		this._mutableDate.set(undefined);
+		this._start.set(undefined);
+		this._end.set(undefined);
+		this._onChange?.(null);
+		this.dateChange.emit(null);
+	}
+
 	protected _onClose(): void {
 		const dates = this._mutableDate();
 		if (this._start() && !this._end() && dates) {

package/src/generators/ui/libs/date-picker/generator.js

@@ -1,9 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.generator = generator;
-const tslib_1 = require("tslib");
-const generator_1 = tslib_1.__importDefault(require("../../../base/generator"));
-async function generator(tree, options) {
-    return await (0, generator_1.default)(tree, { ...options, name: 'date-picker' });
+import hlmBaseGenerator from '../../../base/generator';
+export async function generator(tree, options) {
+    return await hlmBaseGenerator(tree, { ...options, name: 'date-picker' });
 }
 //# sourceMappingURL=generator.js.map

package/src/generators/ui/libs/date-picker/generator.js.map

@@ -1 +1 @@
-{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/date-picker/generator.ts"],"names":[],"mappings":";;AAIA,8BAEC;;AALD,gFAAuD;AAGhD,KAAK,UAAU,SAAS,CAAC,IAAU,EAAE,OAA+B;IAC1E,OAAO,MAAM,IAAA,mBAAgB,EAAC,IAAI,EAAE,EAAE,GAAG,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC,CAAC;AAC1E,CAAC"}
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/date-picker/generator.ts"],"names":[],"mappings":"AACA,OAAO,gBAAgB,MAAM,yBAAyB,CAAC;AAGvD,MAAM,CAAC,KAAK,UAAU,SAAS,CAAC,IAAU,EAAE,OAA+B;IAC1E,OAAO,MAAM,gBAAgB,CAAC,IAAI,EAAE,EAAE,GAAG,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC,CAAC;AAC1E,CAAC"}

package/src/generators/ui/libs/dialog/generator.js

@@ -1,9 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.generator = generator;
-const tslib_1 = require("tslib");
-const generator_1 = tslib_1.__importDefault(require("../../../base/generator"));
-async function generator(tree, options) {
-    return await (0, generator_1.default)(tree, { ...options, name: 'dialog' });
+import hlmBaseGenerator from '../../../base/generator';
+export async function generator(tree, options) {
+    return await hlmBaseGenerator(tree, { ...options, name: 'dialog' });
 }
 //# sourceMappingURL=generator.js.map

package/src/generators/ui/libs/dialog/generator.js.map

@@ -1 +1 @@
-{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/dialog/generator.ts"],"names":[],"mappings":";;AAIA,8BAEC;;AALD,gFAAuD;AAGhD,KAAK,UAAU,SAAS,CAAC,IAAU,EAAE,OAA+B;IAC1E,OAAO,MAAM,IAAA,mBAAgB,EAAC,IAAI,EAAE,EAAE,GAAG,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC;AACrE,CAAC"}
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/dialog/generator.ts"],"names":[],"mappings":"AACA,OAAO,gBAAgB,MAAM,yBAAyB,CAAC;AAGvD,MAAM,CAAC,KAAK,UAAU,SAAS,CAAC,IAAU,EAAE,OAA+B;IAC1E,OAAO,MAAM,gBAAgB,CAAC,IAAI,EAAE,EAAE,GAAG,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC;AACrE,CAAC"}

package/src/generators/ui/libs/dropdown-menu/generator.js

@@ -1,9 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.generator = generator;
-const tslib_1 = require("tslib");
-const generator_1 = tslib_1.__importDefault(require("../../../base/generator"));
-async function generator(tree, options) {
-    return await (0, generator_1.default)(tree, { ...options, name: 'dropdown-menu' });
+import hlmBaseGenerator from '../../../base/generator';
+export async function generator(tree, options) {
+    return await hlmBaseGenerator(tree, { ...options, name: 'dropdown-menu' });
 }
 //# sourceMappingURL=generator.js.map

package/src/generators/ui/libs/dropdown-menu/generator.js.map

@@ -1 +1 @@
-{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/dropdown-menu/generator.ts"],"names":[],"mappings":";;AAIA,8BAEC;;AALD,gFAAuD;AAGhD,KAAK,UAAU,SAAS,CAAC,IAAU,EAAE,OAA+B;IAC1E,OAAO,MAAM,IAAA,mBAAgB,EAAC,IAAI,EAAE,EAAE,GAAG,OAAO,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC,CAAC;AAC5E,CAAC"}
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/dropdown-menu/generator.ts"],"names":[],"mappings":"AACA,OAAO,gBAAgB,MAAM,yBAAyB,CAAC;AAGvD,MAAM,CAAC,KAAK,UAAU,SAAS,CAAC,IAAU,EAAE,OAA+B;IAC1E,OAAO,MAAM,gBAAgB,CAAC,IAAI,EAAE,EAAE,GAAG,OAAO,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC,CAAC;AAC5E,CAAC"}

package/src/generators/ui/libs/empty/generator.js

@@ -1,9 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.generator = generator;
-const tslib_1 = require("tslib");
-const generator_1 = tslib_1.__importDefault(require("../../../base/generator"));
-async function generator(tree, options) {
-    return await (0, generator_1.default)(tree, { ...options, name: 'empty' });
+import hlmBaseGenerator from '../../../base/generator';
+export async function generator(tree, options) {
+    return await hlmBaseGenerator(tree, { ...options, name: 'empty' });
 }
 //# sourceMappingURL=generator.js.map

package/src/generators/ui/libs/empty/generator.js.map

@@ -1 +1 @@
-{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/empty/generator.ts"],"names":[],"mappings":";;AAIA,8BAEC;;AALD,gFAAuD;AAGhD,KAAK,UAAU,SAAS,CAAC,IAAU,EAAE,OAA+B;IAC1E,OAAO,MAAM,IAAA,mBAAgB,EAAC,IAAI,EAAE,EAAE,GAAG,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC;AACpE,CAAC"}
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/empty/generator.ts"],"names":[],"mappings":"AACA,OAAO,gBAAgB,MAAM,yBAAyB,CAAC;AAGvD,MAAM,CAAC,KAAK,UAAU,SAAS,CAAC,IAAU,EAAE,OAA+B;IAC1E,OAAO,MAAM,gBAAgB,CAAC,IAAI,EAAE,EAAE,GAAG,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC;AACpE,CAAC"}