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

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/shared/spartan/calendar/src/lib/hlm-month-year-calendar.ts

@@ -0,0 +1,119 @@
+import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideChevronLeft, lucideChevronRight } from '@ng-icons/lucide';
+import {
+	BrnCalendarImports,
+	BrnMonthYearCalendar,
+	injectBrnCalendarI18n,
+} from '@spartan-ng/brain/calendar';
+import { injectDateAdapter } from '@spartan-ng/brain/date-time';
+import { buttonVariants, HlmButtonImports } from '@spartan-ng/styles/button';
+import { classes, hlm } from '@spartan-ng/styles/utils';
+
+@Component({
+	selector: 'hlm-month-year-calendar',
+	imports: [BrnCalendarImports, NgIcon, HlmButtonImports],
+	viewProviders: [provideIcons({ lucideChevronLeft, lucideChevronRight })],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [
+		{
+			directive: BrnMonthYearCalendar,
+			inputs: ['min', 'max', 'disabled', 'date', 'defaultFocusedDate', 'view'],
+			outputs: ['dateChange'],
+		},
+	],
+	host: { 'data-slot': 'month-year-calendar' },
+	template: `
+		<div class="flex flex-col gap-4">
+			<!-- Header -->
+			<div class="flex w-full items-center justify-between gap-1.5">
+				<button
+					brnMonthYearCalendarPreviousButton
+					hlmBtn
+					variant="ghost"
+					class="order-first size-(--cell-size) p-0 select-none aria-disabled:opacity-50"
+				>
+					<ng-icon name="lucideChevronLeft" class="rtl:rotate-180" />
+				</button>
+
+				<button
+					hlmBtn
+					variant="ghost"
+					class="h-(--cell-size) py-0 select-none aria-disabled:opacity-50"
+					brnMonthYearCalendarHeader
+				>
+					{{ _heading() }}
+				</button>
+
+				<button
+					brnMonthYearCalendarNextButton
+					hlmBtn
+					variant="ghost"
+					class="order-last size-(--cell-size) p-0 select-none aria-disabled:opacity-50"
+				>
+					<ng-icon name="lucideChevronRight" class="rtl:rotate-180" />
+				</button>
+			</div>
+
+			<!-- Grid -->
+			@switch (_picker.view()) {
+				@case ('year') {
+					<div brnMonthYearCalendarGrid class="grid grid-cols-4 gap-2">
+						@for (year of _picker.years(); track _dateAdapter.getYear(year)) {
+							<button brnMonthYearCalendarYearButton [date]="year" [class]="_btnClass">
+								{{ _i18n.config().formatYear(_dateAdapter.getYear(year)) }}
+							</button>
+						}
+					</div>
+				}
+				@case ('month') {
+					<div brnMonthYearCalendarGrid class="grid grid-cols-4 gap-2">
+						@for (month of _picker.months(); track _dateAdapter.getMonth(month)) {
+							<button brnMonthYearCalendarMonthButton [date]="month" [class]="_btnClass">
+								{{ _i18n.config().months()[_dateAdapter.getMonth(month)] }}
+							</button>
+						}
+					</div>
+				}
+			}
+		</div>
+	`,
+})
+export class HlmMonthYearCalendar<T> {
+	/** Access the calendar i18n */
+	protected readonly _i18n = injectBrnCalendarI18n();
+
+	/** Access the date adapter */
+	protected readonly _dateAdapter = injectDateAdapter<T>();
+
+	/** Access the picker directive */
+	protected readonly _picker = inject(BrnMonthYearCalendar<T>);
+
+	/** The heading for the current view. */
+	protected readonly _heading = computed(() => {
+		const config = this._i18n.config();
+
+		if (this._picker.view() === 'month') {
+			return config.formatYear(this._dateAdapter.getYear(this._picker.focusedDate()));
+		}
+
+		const { start, end } = this._picker.yearRange();
+		return `${config.formatYear(start)} – ${config.formatYear(end)}`;
+	});
+
+	protected readonly _btnClass = hlm(
+		buttonVariants({ variant: 'ghost' }),
+		'data-[today=true]:bg-muted',
+		'data-[selected=true]:bg-primary data-[selected=true]:text-primary-foreground data-[selected=true]:hover:bg-primary data-[selected=true]:hover:text-primary-foreground',
+		'data-[focused=true]:border-ring data-[focused=true]:ring-ring/50 data-[focused=true]:ring-[3px]',
+		'aria-disabled:pointer-events-none aria-disabled:opacity-50',
+		'h-(--cell-size)',
+	);
+
+	constructor() {
+		classes(
+			() =>
+				'p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] group/calendar bg-background block in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent',
+		);
+	}
+}

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/shared/spartan/card/src/index.ts

@@ -0,0 +1,28 @@
+import { HlmCard } from './lib/hlm-card';
+import { HlmCardAction } from './lib/hlm-card-action';
+import { HlmCardAvatar } from './lib/hlm-card-avatar';
+import { HlmCardContent } from './lib/hlm-card-content';
+import { HlmCardDescription } from './lib/hlm-card-description';
+import { HlmCardFooter } from './lib/hlm-card-footer';
+import { HlmCardHeader } from './lib/hlm-card-header';
+import { HlmCardTitle } from './lib/hlm-card-title';
+
+export * from './lib/hlm-card';
+export * from './lib/hlm-card-action';
+export * from './lib/hlm-card-avatar';
+export * from './lib/hlm-card-content';
+export * from './lib/hlm-card-description';
+export * from './lib/hlm-card-footer';
+export * from './lib/hlm-card-header';
+export * from './lib/hlm-card-title';
+
+export const HlmCardImports = [
+	HlmCard,
+	HlmCardAction,
+	HlmCardAvatar,
+	HlmCardContent,
+	HlmCardDescription,
+	HlmCardFooter,
+	HlmCardHeader,
+	HlmCardTitle,
+] as const;

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/shared/spartan/card/src/lib/hlm-card-action.ts

@@ -0,0 +1,12 @@
+import { Directive } from '@angular/core';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: '[hlmCardAction]',
+	host: { 'data-slot': 'card-action' },
+})
+export class HlmCardAction {
+	constructor() {
+		classes(() => 'col-end-[-1] row-span-2 row-start-1 self-start justify-self-end');
+	}
+}

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/shared/spartan/card/src/lib/hlm-card-avatar.ts

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: '[hlmCardAvatar]',
+	host: { 'data-slot': 'card-avatar' },
+})
+export class HlmCardAvatar {
+	constructor() {
+		classes(
+			() => 'col-start-1 row-span-2 row-start-1 self-center size-10 rounded-full object-cover',
+		);
+	}
+}

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/shared/spartan/card/src/lib/hlm-card-content.ts

@@ -0,0 +1,12 @@
+import { Directive } from '@angular/core';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: '[hlmCardContent]',
+	host: { 'data-slot': 'card-content' },
+})
+export class HlmCardContent {
+	constructor() {
+		classes(() => 'px-(--card-spacing)');
+	}
+}

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/shared/spartan/card/src/lib/hlm-card-description.ts

@@ -0,0 +1,12 @@
+import { Directive } from '@angular/core';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: '[hlmCardDescription]',
+	host: { 'data-slot': 'card-description' },
+})
+export class HlmCardDescription {
+	constructor() {
+		classes(() => 'text-muted-foreground text-sm');
+	}
+}

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/shared/spartan/card/src/lib/hlm-card-footer.ts

@@ -0,0 +1,12 @@
+import { Directive } from '@angular/core';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: '[hlmCardFooter],hlm-card-footer',
+	host: { 'data-slot': 'card-footer' },
+})
+export class HlmCardFooter {
+	constructor() {
+		classes(() => 'bg-muted/50 rounded-b-xl border-t p-(--card-spacing) flex items-center');
+	}
+}

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/shared/spartan/card/src/lib/hlm-card-header.ts

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: '[hlmCardHeader],hlm-card-header',
+	host: { 'data-slot': 'card-header' },
+})
+export class HlmCardHeader {
+	constructor() {
+		classes(
+			() =>
+				'gap-1 rounded-t-xl px-(--card-spacing) [.border-b]:pb-(--card-spacing) group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-avatar]:grid-cols-[auto_1fr] has-data-[slot=card-avatar]:has-data-[slot=card-action]:grid-cols-[auto_1fr_auto] has-data-[slot=card-avatar]:gap-x-3 has-data-[slot=card-description]:grid-rows-[auto_auto]',
+		);
+	}
+}

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/shared/spartan/card/src/lib/hlm-card-title.ts

@@ -0,0 +1,12 @@
+import { Directive } from '@angular/core';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: '[hlmCardTitle]',
+	host: { 'data-slot': 'card-title' },
+})
+export class HlmCardTitle {
+	constructor() {
+		classes(() => 'text-base leading-snug font-medium group-data-[size=sm]/card:text-sm');
+	}
+}

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/shared/spartan/card/src/lib/hlm-card.token.ts

@@ -0,0 +1,19 @@
+import { inject, InjectionToken, type ValueProvider } from '@angular/core';
+
+export type HlmCardConfig = {
+	size: 'sm' | 'default';
+};
+
+const defaultConfig: HlmCardConfig = {
+	size: 'default',
+};
+
+const HlmCardConfigToken = new InjectionToken<HlmCardConfig>('HlmCardConfig');
+
+export function provideHlmCardConfig(config: Partial<HlmCardConfig>): ValueProvider {
+	return { provide: HlmCardConfigToken, useValue: { ...defaultConfig, ...config } };
+}
+
+export function injectHlmCardConfig(): HlmCardConfig {
+	return inject(HlmCardConfigToken, { optional: true }) ?? defaultConfig;
+}

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/shared/spartan/card/src/lib/hlm-card.ts

@@ -0,0 +1,22 @@
+import { Directive, input } from '@angular/core';
+import { classes } from '@spartan-ng/styles/utils';
+import { HlmCardConfig, injectHlmCardConfig } from './hlm-card.token';
+
+@Directive({
+	selector: '[hlmCard],hlm-card',
+	host: {
+		'data-slot': 'card',
+		'[attr.data-size]': 'size()',
+	},
+})
+export class HlmCard {
+	private readonly _defaultConfig = injectHlmCardConfig();
+	public readonly size = input<HlmCardConfig['size']>(this._defaultConfig.size);
+
+	constructor() {
+		classes(
+			() =>
+				'ring-foreground/10 bg-card text-card-foreground gap-(--card-spacing) overflow-hidden rounded-xl py-(--card-spacing) text-sm ring-1 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col',
+		);
+	}
+}

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/shared/spartan/collapsible/src/index.ts

@@ -0,0 +1,13 @@
+import { HlmCollapsible } from './lib/hlm-collapsible';
+import { HlmCollapsibleContent } from './lib/hlm-collapsible-content';
+import { HlmCollapsibleTrigger } from './lib/hlm-collapsible-trigger';
+
+export * from './lib/hlm-collapsible';
+export * from './lib/hlm-collapsible-content';
+export * from './lib/hlm-collapsible-trigger';
+
+export const HlmCollapsibleImports = [
+	HlmCollapsible,
+	HlmCollapsibleContent,
+	HlmCollapsibleTrigger,
+] as const;

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/shared/spartan/collapsible/src/lib/hlm-collapsible-content.ts

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { BrnCollapsibleContent } from '@spartan-ng/brain/collapsible';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: '[hlmCollapsibleContent],hlm-collapsible-content',
+	hostDirectives: [{ directive: BrnCollapsibleContent, inputs: ['id'] }],
+	host: { 'data-slot': 'collapsible-content' },
+})
+export class HlmCollapsibleContent {
+	constructor() {
+		classes(() => 'data-[state=closed]:hidden');
+	}
+}

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/shared/spartan/collapsible/src/lib/hlm-collapsible-trigger.ts

@@ -0,0 +1,9 @@
+import { Directive } from '@angular/core';
+import { BrnCollapsibleTrigger } from '@spartan-ng/brain/collapsible';
+
+@Directive({
+	selector: 'button[hlmCollapsibleTrigger]',
+	hostDirectives: [{ directive: BrnCollapsibleTrigger, inputs: ['type'] }],
+	host: { 'data-slot': 'collapsible-trigger' },
+})
+export class HlmCollapsibleTrigger {}

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/shared/spartan/collapsible/src/lib/hlm-collapsible.ts

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { BrnCollapsible } from '@spartan-ng/brain/collapsible';
+
+@Directive({
+	selector: '[hlmCollapsible],hlm-collapsible',
+	hostDirectives: [
+		{
+			directive: BrnCollapsible,
+			inputs: ['expanded', 'disabled'],
+			outputs: ['expandedChange'],
+		},
+	],
+	host: { 'data-slot': 'collapsible' },
+})
+export class HlmCollapsible {}

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

@@ -0,0 +1,38 @@
+import { HlmDateMultiInput } from './lib/hlm-date-multi-input';
+import { HlmDatePicker } from './lib/hlm-date-picker';
+import { HlmDatePickerAnchor } from './lib/hlm-date-picker-anchor';
+import { HlmDatePickerInput } from './lib/hlm-date-picker-input';
+import { HlmDatePickerMulti } from './lib/hlm-date-picker-multi';
+import { HlmDatePickerTrigger } from './lib/hlm-date-picker-trigger';
+import { HlmDateRangeInput } from './lib/hlm-date-range-input';
+import { HlmDateRangePicker } from './lib/hlm-date-range-picker';
+import { HlmMonthYearInput } from './lib/hlm-month-year-input';
+import { HlmMonthYearPicker } from './lib/hlm-month-year-picker';
+
+export * from './lib/hlm-date-multi-input';
+export * from './lib/hlm-date-picker';
+export * from './lib/hlm-date-picker-anchor';
+export * from './lib/hlm-date-picker-input';
+export * from './lib/hlm-date-picker-multi';
+export * from './lib/hlm-date-picker-multi.token';
+export * from './lib/hlm-date-picker-trigger';
+export * from './lib/hlm-date-picker.token';
+export * from './lib/hlm-date-range-input';
+export * from './lib/hlm-date-range-picker';
+export * from './lib/hlm-date-range-picker.token';
+export * from './lib/hlm-month-year-input';
+export * from './lib/hlm-month-year-picker';
+export * from './lib/hlm-month-year-picker.token';
+
+export const HlmDatePickerImports = [
+	HlmDatePicker,
+	HlmDatePickerAnchor,
+	HlmDatePickerInput,
+	HlmDatePickerMulti,
+	HlmDateMultiInput,
+	HlmDateRangeInput,
+	HlmDateRangePicker,
+	HlmDatePickerTrigger,
+	HlmMonthYearPicker,
+	HlmMonthYearInput,
+] as const;

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

@@ -0,0 +1,104 @@
+import { ChangeDetectionStrategy, Component, computed, inject, 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 { BrnFieldControl } from '@spartan-ng/brain/field';
+import { HlmInputGroup, HlmInputGroupImports } from '@spartan-ng/styles/input-group';
+import { injectHlmDatePickerMultiConfig } from './hlm-date-picker-multi.token';
+
+@Component({
+	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()"
+			[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"
+			(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 HlmDateMultiInput<T> extends BrnDateInput<T[]> implements BrnDatePickerTriggerBase {
+	private readonly _config = injectHlmDatePickerMultiConfig<T>();
+	private readonly _fieldControl = inject(BrnFieldControl, { optional: true });
+
+	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));
+	/**
+	 * 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`.
+	 */
+	public readonly parseDate = input<(value: string) => T[] | null>(this._config.parseDate);
+
+	/**
+	 * 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`.
+	 */
+	public readonly formatInputDates = input<(dates: T[]) => string>(this._config.formatInputDates);
+
+	protected override parseValue(value: string): T[] | null {
+		return this.parseDate()(value);
+	}
+
+	protected override formatInputValue(value: T[]): string {
+		return this.formatInputDates()(value);
+	}
+}

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

@@ -0,0 +1,23 @@
+import { Directive, effect, ElementRef, inject, input, linkedSignal } from '@angular/core';
+import { BrnOverlay } from '@spartan-ng/brain/overlay';
+import { BrnPopover } from '@spartan-ng/brain/popover';
+
+@Directive({ selector: '[hlmDatePickerAnchor]' })
+export class HlmDatePickerAnchor {
+	private readonly _host = inject(ElementRef, { host: true });
+	private readonly _brnOverlay = inject(BrnOverlay, { optional: true });
+
+	public readonly hlmDatePickerAnchorForInput = input<BrnPopover | undefined>(undefined, {
+		alias: 'hlmDatePickerAnchorFor',
+	});
+
+	public readonly hlmDatePickerAnchorFor = linkedSignal(this.hlmDatePickerAnchorForInput);
+
+	constructor() {
+		effect(() => {
+			this.hlmDatePickerAnchorFor()?.setOrigin(this._host.nativeElement);
+		});
+
+		this._brnOverlay?.setOrigin(this._host.nativeElement);
+	}
+}

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

@@ -0,0 +1,118 @@
+import {
+	booleanAttribute,
+	ChangeDetectionStrategy,
+	Component,
+	computed,
+	inject,
+	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 { BrnFieldControl } from '@spartan-ng/brain/field';
+import type { BooleanInput } from '@angular/cdk/coercion';
+import { HlmInputGroup, HlmInputGroupImports } from '@spartan-ng/styles/input-group';
+import { injectHlmDatePickerConfig } from './hlm-date-picker.token';
+
+@Component({
+	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()"
+			[readonly]="readonly()"
+			[forceInvalid]="forceInvalid()"
+			[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"
+			(click)="_handleClick(); readonly() && _popover().open()"
+			(keydown.arrowDown)="_open()"
+			(keydown.enter)="_handleEnter($event); readonly() && _popover().open()"
+			(keydown.space)="readonly() && _popover().open()"
+			(input)="_handleInputChange($event)"
+			(focus)="_handleFocus()"
+			(blur)="_handleBlur()"
+		/>
+		<hlm-input-group-addon align="inline-end">
+			@if (_showClearButton() && !readonly()) {
+				<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 HlmDatePickerInput<T> extends BrnDateInput<T> implements BrnDatePickerTriggerBase {
+	private readonly _config = injectHlmDatePickerConfig<T>();
+	private readonly _fieldControl = inject(BrnFieldControl, { optional: true });
+
+	/** When true, typing is blocked but the calendar toggle still works. */
+	public readonly readonly = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
+
+	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));
+
+	/**
+	 * 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 | null>(this._config.parseDate);
+
+	/**
+	 * 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`.
+	 */
+	public readonly formatInputDate = input<(date: T) => string>(this._config.formatInputDate);
+
+	protected parseValue(value: string): T | null {
+		return this.parseDate()(value);
+	}
+
+	protected formatInputValue(value: T): string {
+		return this.formatInputDate()(value);
+	}
+}