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

package/src/generators/ui/libs/card/files/lib/hlm-card-content.ts.template

@@ -3,9 +3,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmCardContent]',
-	host: {
-		'data-slot': 'card-content',
-	},
+	host: { 'data-slot': 'card-content' },
 })
 export class HlmCardContent {
 	constructor() {

package/src/generators/ui/libs/card/files/lib/hlm-card-description.ts.template

@@ -3,9 +3,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmCardDescription]',
-	host: {
-		'data-slot': 'card-description',
-	},
+	host: { 'data-slot': 'card-description' },
 })
 export class HlmCardDescription {
 	constructor() {

package/src/generators/ui/libs/card/files/lib/hlm-card-footer.ts.template

@@ -3,9 +3,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmCardFooter],hlm-card-footer',
-	host: {
-		'data-slot': 'card-footer',
-	},
+	host: { 'data-slot': 'card-footer' },
 })
 export class HlmCardFooter {
 	constructor() {

package/src/generators/ui/libs/card/files/lib/hlm-card-header.ts.template

@@ -3,15 +3,13 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmCardHeader],hlm-card-header',
-	host: {
-		'data-slot': 'card-header',
-	},
+	host: { 'data-slot': 'card-header' },
 })
 export class HlmCardHeader {
 	constructor() {
 		classes(
 			() =>
-				`spartan-card-header 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-description]:grid-rows-[auto_auto]`,
+				'spartan-card-header 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-description]:grid-rows-[auto_auto]',
 		);
 	}
 }

package/src/generators/ui/libs/card/files/lib/hlm-card-title.ts.template

@@ -3,9 +3,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmCardTitle]',
-	host: {
-		'data-slot': 'card-title',
-	},
+	host: { 'data-slot': 'card-title' },
 })
 export class HlmCardTitle {
 	constructor() {

package/src/generators/ui/libs/card/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: 'card' });
+import hlmBaseGenerator from '../../../base/generator';
+export async function generator(tree, options) {
+    return await hlmBaseGenerator(tree, { ...options, name: 'card' });
 }
 //# sourceMappingURL=generator.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/card/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,MAAM,EAAE,CAAC,CAAC;AACnE,CAAC"}
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/card/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,MAAM,EAAE,CAAC,CAAC;AACnE,CAAC"}

package/src/generators/ui/libs/carousel/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: 'carousel' });
+import hlmBaseGenerator from '../../../base/generator';
+export async function generator(tree, options) {
+    return await hlmBaseGenerator(tree, { ...options, name: 'carousel' });
 }
 //# sourceMappingURL=generator.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/carousel/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,UAAU,EAAE,CAAC,CAAC;AACvE,CAAC"}
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/carousel/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,UAAU,EAAE,CAAC,CAAC;AACvE,CAAC"}

package/src/generators/ui/libs/checkbox/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: 'checkbox' });
+import hlmBaseGenerator from '../../../base/generator';
+export async function generator(tree, options) {
+    return await hlmBaseGenerator(tree, { ...options, name: 'checkbox' });
 }
 //# sourceMappingURL=generator.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/checkbox/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,UAAU,EAAE,CAAC,CAAC;AACvE,CAAC"}
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/checkbox/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,UAAU,EAAE,CAAC,CAAC;AACvE,CAAC"}

package/src/generators/ui/libs/collapsible/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: 'collapsible' });
+import hlmBaseGenerator from '../../../base/generator';
+export async function generator(tree, options) {
+    return await hlmBaseGenerator(tree, { ...options, name: 'collapsible' });
 }
 //# sourceMappingURL=generator.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/collapsible/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/collapsible/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/combobox/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: 'combobox' });
+import hlmBaseGenerator from '../../../base/generator';
+export async function generator(tree, options) {
+    return await hlmBaseGenerator(tree, { ...options, name: 'combobox' });
 }
 //# sourceMappingURL=generator.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/combobox/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,UAAU,EAAE,CAAC,CAAC;AACvE,CAAC"}
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/combobox/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,UAAU,EAAE,CAAC,CAAC;AACvE,CAAC"}

package/src/generators/ui/libs/command/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: 'command' });
+import hlmBaseGenerator from '../../../base/generator';
+export async function generator(tree, options) {
+    return await hlmBaseGenerator(tree, { ...options, name: 'command' });
 }
 //# sourceMappingURL=generator.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/command/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,SAAS,EAAE,CAAC,CAAC;AACtE,CAAC"}
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/command/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,SAAS,EAAE,CAAC,CAAC;AACtE,CAAC"}

package/src/generators/ui/libs/context-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: 'context-menu' });
+import hlmBaseGenerator from '../../../base/generator';
+export async function generator(tree, options) {
+    return await hlmBaseGenerator(tree, { ...options, name: 'context-menu' });
 }
 //# sourceMappingURL=generator.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/context-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,cAAc,EAAE,CAAC,CAAC;AAC3E,CAAC"}
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/context-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,cAAc,EAAE,CAAC,CAAC;AAC3E,CAAC"}

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

@@ -1,13 +1,26 @@
 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 { HlmDateRangePicker } from './lib/hlm-date-range-picker';
 
-export * from './lib/hlm-date-picker-multi.token';
-export * from './lib/hlm-date-picker.token';
-
 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-trigger.token';
+export * from './lib/hlm-date-picker.token';
 export * from './lib/hlm-date-range-picker';
 export * from './lib/hlm-date-range-picker.token';
 
-export const HlmDatePickerImports = [HlmDatePicker, HlmDatePickerMulti, HlmDateRangePicker] as const;
+export const HlmDatePickerImports = [
+	HlmDatePicker,
+	HlmDatePickerAnchor,
+	HlmDatePickerInput,
+	HlmDatePickerMulti,
+	HlmDateRangePicker,
+	HlmDatePickerTrigger,
+] as const;

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

@@ -0,0 +1,28 @@
+import { Directive, effect, ElementRef, inject, input, untracked } from '@angular/core';
+import { BrnDialog } from '@spartan-ng/brain/dialog';
+import { BrnPopover } from '@spartan-ng/brain/popover';
+
+@Directive({ selector: '[hlmDatePickerAnchor]' })
+export class HlmDatePickerAnchor {
+	private readonly _host = inject(ElementRef, { host: true });
+	private readonly _brnDialog = inject(BrnDialog, { optional: true });
+
+	public readonly hlmDatePickerAnchorFor = input<BrnPopover | undefined>(undefined, {
+		alias: 'hlmDatePickerAnchorFor',
+	});
+
+	constructor() {
+		effect(() => {
+			const brnDialog = this.hlmDatePickerAnchorFor();
+			untracked(() => {
+				if (!brnDialog) return;
+				brnDialog.mutableAttachTo.set(this._host.nativeElement);
+				brnDialog.mutableCloseOnOutsidePointerEvents.set(true);
+			});
+		});
+
+		if (!this._brnDialog) return;
+		this._brnDialog.mutableAttachTo.set(this._host.nativeElement);
+		this._brnDialog.mutableCloseOnOutsidePointerEvents.set(true);
+	}
+}

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

@@ -0,0 +1,175 @@
+import { BooleanInput } from '@angular/cdk/coercion';
+import { booleanAttribute, ChangeDetectionStrategy, Component, computed, input, linkedSignal } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideCalendar, lucideX } from '@ng-icons/lucide';
+import { HlmButtonImports } from '<%- importAlias %>/button';
+import { HlmInputGroupImports } from '<%- importAlias %>/input-group';
+import { HlmDatePickerAnchor } from './hlm-date-picker-anchor';
+import { HlmDatePickerTriggerBase, provideHlmDatePickerTrigger } from './hlm-date-picker-trigger.token';
+import { injectHlmDatePicker, injectHlmDatePickerConfig } from './hlm-date-picker.token';
+
+@Component({
+	selector: 'hlm-date-picker-input',
+	imports: [HlmInputGroupImports, HlmButtonImports, HlmDatePickerAnchor, NgIcon],
+	providers: [provideIcons({ lucideCalendar, lucideX }), provideHlmDatePickerTrigger(HlmDatePickerInput)],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: `
+		<hlm-input-group hlmDatePickerAnchor [hlmDatePickerAnchorFor]="_popover()">
+			<input
+				hlmInputGroupInput
+				[value]="_inputValue()"
+				[id]="inputId()"
+				[placeholder]="placeholder()"
+				[disabled]="_disabled()"
+				[forceInvalid]="forceInvalid()"
+				(click)="_handleClick()"
+				(keydown.arrowDown)="_open()"
+				(keydown.enter)="_handleEnter($event)"
+				(input)="_handleInputChange($event)"
+				(blur)="_commitDate()"
+			/>
+			<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>
+		</hlm-input-group>
+	`,
+})
+export class HlmDatePickerInput<T> implements HlmDatePickerTriggerBase {
+	private static _nextId = 0;
+	private readonly _datePicker = injectHlmDatePicker<T>();
+	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
+	 * 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;
+
+	/**
+	 * 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.
+	 */
+	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;
+		},
+	});
+
+	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?.();
+	}
+
+	protected _open() {
+		this._popover().open();
+	}
+
+	protected _handleClick() {
+		if (this.openOnClick()) {
+			this._open();
+		}
+	}
+}

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

@@ -4,26 +4,25 @@ import {
 	ChangeDetectionStrategy,
 	Component,
 	computed,
+	contentChild,
 	forwardRef,
-	inject,
 	input,
 	linkedSignal,
 	numberAttribute,
 	output,
 	signal,
+	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 { HlmCalendarMulti } from '<%- importAlias %>/calendar';
-import { HlmIconImports } from '<%- importAlias %>/icon';
 import { HlmPopoverImports } from '<%- importAlias %>/popover';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
 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,
@@ -31,21 +30,17 @@ export const HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR = {
 	multi: true,
 };
 
-let nextId = 0;
-
 @Component({
 	selector: 'hlm-date-picker-multi',
-	imports: [HlmIconImports, HlmPopoverImports, HlmCalendarMulti, BrnFieldControlDescribedBy],
+	imports: [HlmPopoverImports, HlmCalendarMulti],
 	providers: [
 		HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR,
-		provideIcons({ lucideChevronDown }),
+		provideHlmDatePicker(HlmDatePickerMulti),
 		provideBrnLabelable(HlmDatePickerMulti),
 	],
 	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)="_onTouched?.()"
 		>
-			<button
-				[id]="buttonId()"
-				type="button"
-				[class]="_computedClass()"
-				[disabled]="_mutableDisabled()"
-				[attr.aria-invalid]="_ariaInvalid()"
-				[attr.data-invalid]="_ariaInvalid()"
-				[attr.data-dirty]="_dirty?.() ? 'true' : null"
-				[attr.data-touched]="_touched?.() ? '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-multi
 					calendarClass="border-0 rounded-none"
 					[date]="_mutableDate()"
@@ -86,43 +60,20 @@ let nextId = 0;
 					[max]="max()"
 					[minSelection]="minSelection()"
 					[maxSelection]="maxSelection()"
-					[disabled]="_mutableDisabled()"
+					[disabled]="_disabled()"
 					(dateChange)="_handleChange($event)"
 				/>
+				<ng-content select="[hlmDatePickerFooter]" />
 			</hlm-popover-content>
 		</hlm-popover>
 	`,
 })
-export class HlmDatePickerMulti<T> implements ControlValueAccessor {
+export class HlmDatePickerMulti<T> implements HlmDatePickerBase<T>, ControlValueAccessor {
 	private readonly _config = injectHlmDatePickerMultiConfig<T>();
-	private readonly _fieldControl = inject(BrnFieldControl, { optional: true });
-
-	protected readonly _spartanInvalid = this._fieldControl?.spartanInvalid;
-	protected readonly _dirty = this._fieldControl?.dirty;
-	protected readonly _touched = this._fieldControl?.touched;
-	private 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-multi-${++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');
@@ -166,16 +117,21 @@ export class HlmDatePickerMulti<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 dates = this._mutableDate();
 		return dates ? this.formatDates()(dates) : undefined;
 	});
 
 	public readonly dateChange = output<T[]>();
 
-	public readonly labelableId = this.buttonId;
+	public readonly labelableId = computed(() => this._trigger()?.triggerId());
+
+	public readonly hasDate = computed(() => !!this._mutableDate()?.length);
 
 	protected _onChange?: ChangeFn<T[]>;
 	protected _onTouched?: TouchFn;
@@ -183,7 +139,7 @@ export class HlmDatePickerMulti<T> implements ControlValueAccessor {
 	protected _handleChange(value: T[] | undefined) {
 		if (value === undefined) return;
 
-		if (this._mutableDisabled()) return;
+		if (this._disabled()) return;
 		const transformedDate = value !== undefined ? this.transformDates()(value) : value;
 
 		this._mutableDate.set(transformedDate);
@@ -209,7 +165,7 @@ export class HlmDatePickerMulti<T> implements ControlValueAccessor {
 	}
 
 	public setDisabledState(isDisabled: boolean): void {
-		this._mutableDisabled.set(isDisabled);
+		this._disabled.set(isDisabled);
 	}
 
 	public open() {
@@ -219,4 +175,10 @@ export class HlmDatePickerMulti<T> implements ControlValueAccessor {
 	public close() {
 		this._popoverState.set('closed');
 	}
+
+	public reset() {
+		this._mutableDate.set(undefined);
+		this._onChange?.([]);
+		this.dateChange.emit([]);
+	}
 }

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

@@ -0,0 +1,11 @@
+import { type ExistingProvider, InjectionToken, type Signal, type Type } from '@angular/core';
+
+export interface HlmDatePickerTriggerBase {
+	triggerId: Signal<string>;
+}
+
+export const HlmDatePickerTriggerToken = new InjectionToken<HlmDatePickerTriggerBase>('HlmDatePickerTriggerToken');
+
+export function provideHlmDatePickerTrigger(instance: Type<HlmDatePickerTriggerBase>): ExistingProvider {
+	return { provide: HlmDatePickerTriggerToken, useExisting: instance };
+}