@salesforce/ui-bundle-template-app-angular-template-b2x 11.60.0 → 11.62.1

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/shared/date-picker/hlm-date-picker-multi.token.ts

@@ -0,0 +1,109 @@
+import { inject, InjectionToken, type ValueProvider } from '@angular/core';
+
+export interface HlmDatePickerMultiConfig<T> {
+	/**
+	 * If true, the date picker will close when the max selection of dates is reached.
+	 */
+	autoCloseOnMaxSelection: boolean;
+
+	/**
+	 * Defines how the date should be displayed in the UI.
+	 *
+	 * @param dates
+	 * @returns formatted date
+	 */
+	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.
+	 *
+	 * @param dates
+	 * @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[];
+		},
+	};
+}
+
+const HlmDatePickerMultiConfigToken = new InjectionToken<HlmDatePickerMultiConfig<unknown>>(
+	'HlmDatePickerMultiConfig',
+);
+
+export function provideHlmDatePickerMultiConfig<T>(
+	config: Partial<HlmDatePickerMultiConfig<T>>,
+): ValueProvider {
+	return { provide: HlmDatePickerMultiConfigToken, useValue: { ...getDefaultConfig(), ...config } };
+}
+
+export function injectHlmDatePickerMultiConfig<T>(): HlmDatePickerMultiConfig<T> {
+	const injectedConfig = inject(HlmDatePickerMultiConfigToken, { optional: true });
+	return injectedConfig ? (injectedConfig as HlmDatePickerMultiConfig<T>) : getDefaultConfig();
+}

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/shared/date-picker/hlm-date-picker-multi.ts

@@ -0,0 +1,220 @@
+import type { BooleanInput, NumberInput } from '@angular/cdk/coercion';
+import {
+	booleanAttribute,
+	ChangeDetectionStrategy,
+	Component,
+	computed,
+	contentChild,
+	forwardRef,
+	input,
+	linkedSignal,
+	numberAttribute,
+	output,
+	signal,
+	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, type BrnPopoverAlign } from '@spartan-ng/brain/popover';
+import { HlmCalendarMulti } from '@spartan-ng/styles/calendar';
+import { HlmPopoverImports } from '@spartan-ng/styles/popover';
+import { injectHlmDatePickerMultiConfig } from './hlm-date-picker-multi.token';
+
+export const HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR = {
+	provide: NG_VALUE_ACCESSOR,
+	useExisting: forwardRef(() => HlmDatePickerMulti),
+	multi: true,
+};
+
+@Component({
+	selector: 'hlm-date-picker-multi',
+	imports: [HlmPopoverImports, HlmCalendarMulti],
+	providers: [
+		HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR,
+		provideBrnDatePicker(HlmDatePickerMulti),
+		provideBrnLabelable(HlmDatePickerMulti),
+	],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [BrnFieldControl],
+	host: { class: 'block' },
+	template: `
+		<hlm-popover
+			[align]="align()"
+			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-calendar-multi
+					class="rounded-none border-0"
+					[date]="_mutableDate()"
+					[captionLayout]="captionLayout()"
+					[min]="minDate()"
+					[max]="maxDate()"
+					[minSelection]="minSelection()"
+					[maxSelection]="maxSelection()"
+					[disabled]="_disabled()"
+					(dateChange)="_handleChange($event)"
+				/>
+				<ng-content select="[hlmDatePickerFooter]" />
+			</hlm-popover-content>
+		</hlm-popover>
+	`,
+})
+export class HlmDatePickerMulti<T> implements BrnDatePickerBase<T[]>, ControlValueAccessor {
+	private readonly _config = injectHlmDatePickerMultiConfig<T>();
+
+	public readonly popover = viewChild.required(BrnPopover);
+
+	private readonly _trigger = contentChild(BrnDatePickerTriggerToken);
+
+	public readonly align = input<BrnPopoverAlign>('center');
+
+	/** Show dropdowns to navigate between months or years. */
+	public readonly captionLayout = input<
+		'dropdown' | 'label' | 'dropdown-months' | 'dropdown-years'
+	>('label');
+
+	/** The minimum date that can be selected.*/
+	public readonly minDate = input<T>();
+
+	/** The maximum date that can be selected. */
+	public readonly maxDate = input<T>();
+
+	/** The minimum selectable dates.  */
+	public readonly minSelection = input<number, NumberInput>(undefined, {
+		transform: numberAttribute,
+	});
+
+	/** The maximum selectable dates.  */
+	public readonly maxSelection = input<number, NumberInput>(undefined, {
+		transform: numberAttribute,
+	});
+
+	/** Determine if the date picker is disabled. */
+	public readonly disabled = input<boolean, BooleanInput>(false, {
+		transform: booleanAttribute,
+	});
+
+	/** The selected value. */
+	public readonly date = input<T[]>();
+
+	protected readonly _mutableDate = linkedSignal(this.date);
+
+	/** If true, the date picker will close when the max selection of dates is reached. */
+	public readonly autoCloseOnMaxSelection = input<boolean, BooleanInput>(
+		this._config.autoCloseOnMaxSelection,
+		{
+			transform: booleanAttribute,
+		},
+	);
+
+	/** Defines how the date should be displayed in the UI.  */
+	public readonly formatDates = input<(date: T[]) => string>(this._config.formatDates);
+
+	/** Defines how the date should be transformed before saving to model/form. */
+	public readonly transformDates = input<(date: T[]) => T[]>(this._config.transformDates);
+
+	protected readonly _popoverState = signal<BrnOverlayState | null>(null);
+
+	protected readonly _disabled = linkedSignal(this.disabled);
+
+	/** @internal The disabled state as a readonly signal */
+	public readonly disabledState = this._disabled.asReadonly();
+
+	public readonly formattedDate = computed(() => {
+		const dates = this._mutableDate();
+		return dates ? this.formatDates()(dates) : undefined;
+	});
+
+	public readonly dateChange = output<T[]>();
+
+	public readonly labelableId = computed(() => this._trigger()?.triggerId());
+
+	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;
+
+	protected _onStateChange(state: BrnOverlayState) {
+		this._popoverState.set(state);
+		if (state === 'closed') this._onTouched?.();
+	}
+
+	protected _handleChange(value: T[] | undefined) {
+		if (value === undefined) return;
+
+		if (this._disabled()) return;
+		const transformedDate = value !== undefined ? this.transformDates()(value) : value;
+
+		this._mutableDate.set(transformedDate);
+		this._onChange?.(transformedDate);
+		this.dateChange.emit(transformedDate);
+
+		if (this.autoCloseOnMaxSelection() && this._mutableDate()?.length === this.maxSelection()) {
+			this._popoverState.set('closed');
+		}
+	}
+
+	/**
+	 * Commit dates to the picker. Updates the internal model, notifies form
+	 * controls, and emits `dateChange`. Intended to be called from a text input
+	 * that parses user-entered values. Pass `null` to clear the selection.
+	 */
+	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);
+	}
+
+	public registerOnChange(fn: ChangeFn<T[]>): void {
+		this._onChange = fn;
+	}
+
+	public registerOnTouched(fn: TouchFn): void {
+		this._onTouched = fn;
+	}
+
+	public setDisabledState(isDisabled: boolean): void {
+		this._disabled.set(isDisabled);
+	}
+
+	public open() {
+		this._popoverState.set('open');
+	}
+
+	public close() {
+		this._popoverState.set('closed');
+	}
+
+	public reset() {
+		this._mutableDate.set(undefined);
+		this._onChange?.([]);
+		this.dateChange.emit([]);
+	}
+}

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/shared/date-picker/hlm-date-picker-trigger.ts

@@ -0,0 +1,104 @@
+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 '@spartan-ng/styles/button';
+import { HlmPopoverTrigger } from '@spartan-ng/styles/popover';
+import { hlm } from '@spartan-ng/styles/utils';
+import { ClassValue } from 'clsx';
+
+@Component({
+	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>
+	`,
+})
+export class HlmDatePickerTrigger implements BrnDatePickerTriggerBase {
+	private static _nextId = 0;
+
+	private readonly _fieldControl = inject(BrnFieldControl, { optional: true });
+	private readonly _datePicker = injectBrnDatePicker();
+
+	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('data-placeholder:text-muted-foreground 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/dist/force-app/main/default/uiBundles/angularextapp/src/app/shared/date-picker/hlm-date-picker.token.ts

@@ -0,0 +1,69 @@
+import { inject, InjectionToken, type ValueProvider } from '@angular/core';
+
+export interface HlmDatePickerConfig<T> {
+	/**
+	 * If true, the date picker will close when a date is selected.
+	 */
+	autoCloseOnSelect: boolean;
+
+	/**
+	 * Defines how the date should be displayed in the UI.
+	 *
+	 * @param date
+	 * @returns formatted date
+	 */
+	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.
+	 *
+	 * @param date
+	 * @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 `null` when the value can't be parsed
+	 */
+	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()) ? null : (date as T);
+		},
+		autoCloseOnSelect: false,
+	};
+}
+
+const HlmDatePickerConfigToken = new InjectionToken<HlmDatePickerConfig<unknown>>(
+	'HlmDatePickerConfig',
+);
+
+export function provideHlmDatePickerConfig<T>(
+	config: Partial<HlmDatePickerConfig<T>>,
+): ValueProvider {
+	return { provide: HlmDatePickerConfigToken, useValue: { ...getDefaultConfig(), ...config } };
+}
+
+export function injectHlmDatePickerConfig<T>(): HlmDatePickerConfig<T> {
+	const injectedConfig = inject(HlmDatePickerConfigToken, { optional: true });
+	return injectedConfig ? (injectedConfig as HlmDatePickerConfig<T>) : getDefaultConfig();
+}

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/shared/date-picker/hlm-date-picker.ts

@@ -0,0 +1,203 @@
+import type { BooleanInput } from '@angular/cdk/coercion';
+import {
+	booleanAttribute,
+	ChangeDetectionStrategy,
+	Component,
+	computed,
+	contentChild,
+	forwardRef,
+	input,
+	linkedSignal,
+	output,
+	signal,
+	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, type BrnPopoverAlign } from '@spartan-ng/brain/popover';
+import { HlmCalendar } from '@spartan-ng/styles/calendar';
+import { HlmPopoverImports } from '@spartan-ng/styles/popover';
+import { injectHlmDatePickerConfig } from './hlm-date-picker.token';
+
+export const HLM_DATE_PICKER_VALUE_ACCESSOR = {
+	provide: NG_VALUE_ACCESSOR,
+	useExisting: forwardRef(() => HlmDatePicker),
+	multi: true,
+};
+
+@Component({
+	selector: 'hlm-date-picker',
+	imports: [HlmPopoverImports, HlmCalendar],
+	providers: [
+		HLM_DATE_PICKER_VALUE_ACCESSOR,
+		provideBrnDatePicker(HlmDatePicker),
+		provideBrnLabelable(HlmDatePicker),
+	],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [BrnFieldControl],
+	host: { class: 'block' },
+	template: `
+		<hlm-popover
+			[align]="align()"
+			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-calendar
+					class="rounded-none border-0"
+					[captionLayout]="captionLayout()"
+					[date]="_mutableDate()"
+					[defaultFocusedDate]="_mutableDate() ?? defaultFocusedDate()"
+					[min]="minDate()"
+					[max]="maxDate()"
+					[disabled]="_disabled()"
+					(dateChange)="_handleChange($event)"
+				/>
+				<ng-content select="[hlmDatePickerFooter]" />
+			</hlm-popover-content>
+		</hlm-popover>
+	`,
+})
+export class HlmDatePicker<T> implements BrnDatePickerBase<T>, ControlValueAccessor {
+	private readonly _config = injectHlmDatePickerConfig<T>();
+
+	public readonly popover = viewChild.required(BrnPopover);
+
+	private readonly _trigger = contentChild(BrnDatePickerTriggerToken);
+
+	public readonly align = input<BrnPopoverAlign>('center');
+
+	/** Show dropdowns to navigate between months or years. */
+	public readonly captionLayout = input<
+		'dropdown' | 'label' | 'dropdown-months' | 'dropdown-years'
+	>('label');
+
+	/** The minimum date that can be selected. */
+	public readonly minDate = input<T>();
+
+	/** The maximum date that can be selected. */
+	public readonly maxDate = input<T>();
+
+	/** Determine if the date picker is disabled. */
+	public readonly disabled = input<boolean, BooleanInput>(false, {
+		transform: booleanAttribute,
+	});
+
+	/** 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. */
+	public readonly autoCloseOnSelect = input<boolean, BooleanInput>(this._config.autoCloseOnSelect, {
+		transform: booleanAttribute,
+	});
+
+	/** Defines how the date should be displayed in the UI.  */
+	public readonly formatDate = input<(date: T) => string>(this._config.formatDate);
+
+	/** Defines how the date should be transformed before saving to model/form. */
+	public readonly transformDate = input<(date: T) => T>(this._config.transformDate);
+
+	protected readonly _popoverState = signal<BrnOverlayState | null>(null);
+
+	protected readonly _disabled = linkedSignal(this.disabled);
+
+	/** @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 | null>();
+
+	public readonly labelableId = computed(() => this._trigger()?.triggerId());
+
+	public readonly hasDate = computed(() => !!this._mutableDate());
+
+	/** @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) {
+		this._popoverState.set(state);
+		if (state === 'closed') this._onTouched?.();
+	}
+
+	protected _handleChange(value: T | undefined) {
+		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.
+	 */
+	public updateDate(value: T | null) {
+		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 */
+	public writeValue(value: T | null): void {
+		this._mutableDate.set(value ? this.transformDate()(value) : undefined);
+	}
+
+	public registerOnChange(fn: ChangeFn<T | null>): void {
+		this._onChange = fn;
+	}
+
+	public registerOnTouched(fn: TouchFn): void {
+		this._onTouched = fn;
+	}
+
+	public touched(): void {
+		this._onTouched?.();
+	}
+
+	public setDisabledState(isDisabled: boolean): void {
+		this._disabled.set(isDisabled);
+	}
+
+	public open() {
+		this._popoverState.set('open');
+	}
+
+	public close() {
+		this._popoverState.set('closed');
+	}
+
+	public reset() {
+		this._mutableDate.set(undefined);
+		this._onChange?.(null);
+		this.dateChange.emit(null);
+	}
+}