@spartan-ng/cli 0.0.1-alpha.508 → 0.0.1-alpha.510

package/src/generators/ui/libs/ui-command-helm/files/lib/hlm-command-dialog-close-button.ts.template

@@ -1,8 +1,8 @@
 import { Directive, computed, input } from '@angular/core';
 import { BrnDialogClose } from '@spartan-ng/brain/dialog';
-import { HlmButton, provideBrnButtonConfig } from '@spartan-ng/helm/button';
-import { provideHlmIconConfig } from '@spartan-ng/helm/icon';
-import { hlm } from '@spartan-ng/helm/utils';
+import { HlmButton, provideBrnButtonConfig } from '<%- importAlias %>/button';
+import { provideHlmIconConfig } from '<%- importAlias %>/icon';
+import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
 @Directive({

package/src/generators/ui/libs/ui-command-helm/files/lib/hlm-command-dialog.ts.template

@@ -1,7 +1,7 @@
 import { Directive, ElementRef, Renderer2, computed, contentChild, effect, inject, input, signal } from '@angular/core';
 import { BrnCommandSearchInputToken } from '@spartan-ng/brain/command';
 import { injectExposesStateProvider } from '@spartan-ng/brain/core';
-import { hlm } from '@spartan-ng/helm/utils';
+import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
 @Directive({

package/src/generators/ui/libs/ui-command-helm/files/lib/hlm-command-empty.ts.template

@@ -1,5 +1,5 @@
 import { Directive, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/helm/utils';
+import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
 @Directive({

package/src/generators/ui/libs/ui-command-helm/files/lib/hlm-command-group-label.ts.template

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/helm/utils';
+import { hlm } from '<%- importAlias %>/utils';
 
 @Component({
 	selector: 'hlm-command-group-label',
@@ -11,10 +11,10 @@ import { hlm } from '@spartan-ng/helm/utils';
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmCommandGroupLabel {
-	/*** The user defined class  */
+	/** The user defined class  */
 	public readonly userClass = input<string>('', { alias: 'class' });
 
-	/*** The styles to apply  */
+	/** The styles to apply  */
 	protected readonly _computedClass = computed(() =>
 		hlm('text-muted-foreground px-2 py-1.5 text-xs font-medium', this.userClass()),
 	);

package/src/generators/ui/libs/ui-command-helm/files/lib/hlm-command-group.ts.template

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { BrnCommandGroup } from '@spartan-ng/brain/command';
-import { hlm } from '@spartan-ng/helm/utils';
+import { hlm } from '<%- importAlias %>/utils';
 
 @Component({
 	selector: 'hlm-command-group',
@@ -17,10 +17,10 @@ import { hlm } from '@spartan-ng/helm/utils';
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmCommandGroup {
-	/*** The user defined class  */
+	/** The user defined class  */
 	public readonly userClass = input<string>('', { alias: 'class' });
 
-	/*** The styles to apply  */
+	/** The styles to apply  */
 	protected readonly _computedClass = computed(() =>
 		hlm('text-foreground block overflow-hidden p-1 data-[hidden]:hidden', this.userClass()),
 	);

package/src/generators/ui/libs/ui-command-helm/files/lib/hlm-command-icon.ts.template

@@ -1,6 +1,6 @@
 import { computed, Directive, input } from '@angular/core';
-import { provideHlmIconConfig } from '@spartan-ng/helm/icon';
-import { hlm } from '@spartan-ng/helm/utils';
+import { provideHlmIconConfig } from '<%- importAlias %>/icon';
+import { hlm } from '<%- importAlias %>/utils';
 import { ClassValue } from 'clsx';
 
 @Directive({

package/src/generators/ui/libs/ui-command-helm/files/lib/hlm-command-item.ts.template

@@ -1,7 +1,6 @@
-import { BooleanInput } from '@angular/cdk/coercion';
-import { booleanAttribute, ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { BrnCommandItem } from '@spartan-ng/brain/command';
-import { hlm } from '@spartan-ng/helm/utils';
+import { hlm } from '<%- importAlias %>/utils';
 
 @Component({
 	selector: 'button[hlm-command-item]',
@@ -21,21 +20,10 @@ import { hlm } from '@spartan-ng/helm/utils';
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmCommandItem {
-	/** The value this item represents. */
-	public readonly value = input<string>();
-
-	/** Whether the item is disabled. */
-	public readonly disabled = input<boolean, BooleanInput>(false, {
-		transform: booleanAttribute,
-	});
-
-	/** Emits when the item is selected. */
-	public readonly selected = output<void>();
-
-	/*** The user defined class  */
+	/** The user defined class  */
 	public readonly userClass = input<string>('', { alias: 'class' });
 
-	/*** The styles to apply  */
+	/** The styles to apply  */
 	protected readonly _computedClass = computed(() =>
 		hlm(
 			'data-[selected]:bg-accent data-[selected=true]:text-accent-foreground [&>ng-icon]:text-muted-foreground outline-hidden relative flex w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled]:pointer-events-none data-[hidden]:hidden data-[disabled]:opacity-50 [&>ng-icon]:pointer-events-none [&>ng-icon]:shrink-0 [&>ng-icon]:text-base',

package/src/generators/ui/libs/ui-command-helm/files/lib/hlm-command-list.ts.template

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { BrnCommandList } from '@spartan-ng/brain/command';
-import { hlm } from '@spartan-ng/helm/utils';
+import { hlm } from '<%- importAlias %>/utils';
 
 @Component({
 	selector: 'hlm-command-list',

package/src/generators/ui/libs/ui-command-helm/files/lib/hlm-command-search-input.ts.template

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { BrnCommandSearchInput } from '@spartan-ng/brain/command';
-import { hlm } from '@spartan-ng/helm/utils';
+import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
 @Component({
@@ -13,10 +13,10 @@ import type { ClassValue } from 'clsx';
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmCommandSearchInput {
-	/*** The user defined class  */
+	/** The user defined class  */
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 
-	/*** The styles to apply  */
+	/** The styles to apply  */
 	protected readonly _computedClass = computed(() =>
 		hlm(
 			'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',

package/src/generators/ui/libs/ui-command-helm/files/lib/hlm-command-search.ts.template

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
-import { provideHlmIconConfig } from '@spartan-ng/helm/icon';
-import { hlm } from '@spartan-ng/helm/utils';
+import { provideHlmIconConfig } from '<%- importAlias %>/icon';
+import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
 @Component({
@@ -15,10 +15,10 @@ import type { ClassValue } from 'clsx';
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmCommandSearch {
-	/*** The user defined class  */
+	/** The user defined class  */
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 
-	/*** The styles to apply  */
+	/** The styles to apply  */
 	protected readonly _computedClass = computed(() =>
 		hlm('flex h-9 items-center gap-2 border-b px-3 [&>_ng-icon]:flex-none [&>_ng-icon]:opacity-50', this.userClass()),
 	);

package/src/generators/ui/libs/ui-command-helm/files/lib/hlm-command-separator.ts.template

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/helm/utils';
+import { hlm } from '<%- importAlias %>/utils';
 
 @Component({
 	selector: 'hlm-command-separator',
@@ -11,9 +11,9 @@ import { hlm } from '@spartan-ng/helm/utils';
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmCommandSeparator {
-	/*** The user defined class  */
+	/** The user defined class  */
 	public readonly userClass = input<string>('', { alias: 'class' });
 
-	/*** The styles to apply  */
+	/** The styles to apply  */
 	protected readonly _computedClass = computed(() => hlm('bg-border -mx-1 block h-px', this.userClass()));
 }

package/src/generators/ui/libs/ui-command-helm/files/lib/hlm-command-shortcut.ts.template

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/helm/utils';
+import { hlm } from '<%- importAlias %>/utils';
 import { ClassValue } from 'clsx';
 
 @Component({

package/src/generators/ui/libs/ui-command-helm/files/lib/hlm-command.ts.template

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { BrnCommand } from '@spartan-ng/brain/command';
-import { hlm } from '@spartan-ng/helm/utils';
+import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
 @Component({
@@ -21,10 +21,10 @@ import type { ClassValue } from 'clsx';
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmCommand {
-	/*** The user defined class */
+	/** The user defined class */
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 
-	/*** The styles to apply  */
+	/** The styles to apply  */
 	protected readonly _computedClass = computed(() =>
 		hlm('bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md', this.userClass()),
 	);

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

@@ -3,6 +3,7 @@ import { HlmDatePicker } from './lib/hlm-date-picker';
 import { HlmDatePickerMulti } from './lib/hlm-date-picker-multi';
 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';

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

@@ -33,7 +33,7 @@ function getDefaultConfig<T>(): HlmDatePickerMultiConfig<T> {
 
 const HlmDatePickerMultiConfigToken = new InjectionToken<HlmDatePickerMultiConfig<unknown>>('HlmDatePickerMultiConfig');
 
-export function provideHlmDatePickerConfig<T>(config: Partial<HlmDatePickerMultiConfig<T>>): ValueProvider {
+export function provideHlmDatePickerMultiConfig<T>(config: Partial<HlmDatePickerMultiConfig<T>>): ValueProvider {
 	return { provide: HlmDatePickerMultiConfigToken, useValue: { ...getDefaultConfig(), ...config } };
 }
 

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

@@ -13,14 +13,14 @@ import {
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { NgIcon, provideIcons } from '@ng-icons/core';
-import { lucideCalendar } from '@ng-icons/lucide';
+import { lucideChevronDown } from '@ng-icons/lucide';
 import { BrnDialogState } from '@spartan-ng/brain/dialog';
 import { type ChangeFn, type TouchFn } from '@spartan-ng/brain/forms';
 import { BrnPopover, BrnPopoverContent, BrnPopoverTrigger } from '@spartan-ng/brain/popover';
-import { HlmCalendarMulti } from '@spartan-ng/helm/calendar';
-import { HlmIcon } from '@spartan-ng/helm/icon';
-import { HlmPopoverContent } from '@spartan-ng/helm/popover';
-import { hlm } from '@spartan-ng/helm/utils';
+import { HlmCalendarMulti } from '<%- importAlias %>/calendar';
+import { HlmIcon } from '<%- importAlias %>/icon';
+import { HlmPopoverContent } from '<%- importAlias %>/popover';
+import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 import { injectHlmDatePickerMultiConfig } from './hlm-date-picker-multi.token';
 
@@ -30,15 +30,21 @@ export const HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR = {
 	multi: true,
 };
 
+let nextId = 0;
+
 @Component({
 	selector: 'hlm-date-picker-multi',
 	imports: [NgIcon, HlmIcon, BrnPopover, BrnPopoverTrigger, BrnPopoverContent, HlmPopoverContent, HlmCalendarMulti],
-	providers: [HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR, provideIcons({ lucideCalendar })],
+	providers: [HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR, provideIcons({ lucideChevronDown })],
 	template: `
 		<brn-popover sideOffset="5" [state]="_popoverState()" (stateChanged)="_popoverState.set($event)">
-			<button type="button" [class]="_computedClass()" [disabled]="_mutableDisabled()" brnPopoverTrigger>
-				<ng-icon hlm size="sm" name="lucideCalendar" />
-
+			<button
+				[id]="buttonId()"
+				type="button"
+				[class]="_computedClass()"
+				[disabled]="_mutableDisabled()"
+				brnPopoverTrigger
+			>
 				<span class="truncate">
 					@if (_formattedDate(); as formattedDate) {
 						{{ formattedDate }}
@@ -46,6 +52,8 @@ export const HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR = {
 						<ng-content />
 					}
 				</span>
+
+				<ng-icon hlm size="sm" name="lucideChevronDown" />
 			</button>
 
 			<div hlmPopoverContent class="w-auto p-0" *brnPopoverContent="let ctx">
@@ -73,15 +81,17 @@ export class HlmDatePickerMulti<T> implements ControlValueAccessor {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'ring-offset-background border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex h-10 w-[280px] items-center justify-start gap-2 whitespace-nowrap rounded-md border px-4 py-2 text-left text-sm font-normal transition-all',
+			'ring-offset-background border-input bg-background hover:bg-accent dark:bg-input/30 dark:hover:bg-input/50 hover:text-accent-foreground inline-flex h-9 w-[280px] cursor-default items-center justify-between gap-2 whitespace-nowrap rounded-md border px-3 py-2 text-left text-sm font-normal transition-all disabled:pointer-events-none disabled:opacity-50',
 			'focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
 			'disabled:pointer-events-none disabled:opacity-50',
 			'[&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0',
-			!this._mutableDate() ? 'text-muted-foreground' : '',
 			this.userClass(),
 		),
 	);
 
+	/** The id of the button that opens the date picker. */
+	public readonly buttonId = input<string>(`hlm-date-picker-multi-${nextId++}`);
+
 	/** The minimum date that can be selected.*/
 	public readonly min = input<T>();
 

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

@@ -16,10 +16,10 @@ import { lucideChevronDown } from '@ng-icons/lucide';
 import { BrnDialogState } from '@spartan-ng/brain/dialog';
 import { type ChangeFn, type TouchFn } from '@spartan-ng/brain/forms';
 import { BrnPopover, BrnPopoverContent, BrnPopoverTrigger } from '@spartan-ng/brain/popover';
-import { HlmCalendar } from '@spartan-ng/helm/calendar';
-import { HlmIcon } from '@spartan-ng/helm/icon';
-import { HlmPopoverContent } from '@spartan-ng/helm/popover';
-import { hlm } from '@spartan-ng/helm/utils';
+import { HlmCalendar } from '<%- importAlias %>/calendar';
+import { HlmIcon } from '<%- importAlias %>/icon';
+import { HlmPopoverContent } from '<%- importAlias %>/popover';
+import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 import { injectHlmDatePickerConfig } from './hlm-date-picker.token';
 
@@ -29,13 +29,21 @@ export const HLM_DATE_PICKER_VALUE_ACCESSOR = {
 	multi: true,
 };
 
+let nextId = 0;
+
 @Component({
 	selector: 'hlm-date-picker',
 	imports: [NgIcon, HlmIcon, BrnPopover, BrnPopoverTrigger, BrnPopoverContent, HlmPopoverContent, HlmCalendar],
 	providers: [HLM_DATE_PICKER_VALUE_ACCESSOR, provideIcons({ lucideChevronDown })],
 	template: `
 		<brn-popover sideOffset="5" [state]="_popoverState()" (stateChanged)="_popoverState.set($event)">
-			<button type="button" [class]="_computedClass()" [disabled]="_mutableDisabled()" brnPopoverTrigger>
+			<button
+				[id]="buttonId()"
+				type="button"
+				[class]="_computedClass()"
+				[disabled]="_mutableDisabled()"
+				brnPopoverTrigger
+			>
 				<span class="truncate">
 					@if (_formattedDate(); as formattedDate) {
 						{{ formattedDate }}
@@ -70,15 +78,17 @@ export class HlmDatePicker<T> implements ControlValueAccessor {
 	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 hover:text-accent-foreground inline-flex h-9 w-[280px] cursor-default items-center justify-start justify-between gap-2 whitespace-nowrap rounded-md border px-3 py-2 text-left text-sm font-normal transition-all disabled:pointer-events-none disabled:opacity-50',
+			'ring-offset-background border-input bg-background hover:bg-accent dark:bg-input/30 dark:hover:bg-input/50 hover:text-accent-foreground inline-flex h-9 w-[280px] cursor-default items-center justify-between gap-2 whitespace-nowrap rounded-md border px-3 py-2 text-left text-sm font-normal transition-all disabled:pointer-events-none disabled:opacity-50',
 			'focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
 			'disabled:pointer-events-none disabled:opacity-50',
 			'[&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0',
-			!this._mutableDate() ? 'text-muted-foreground' : '',
 			this.userClass(),
 		),
 	);
 
+	/** The id of the button that opens the date picker. */
+	public readonly buttonId = input<string>(`hlm-date-picker-${nextId++}`);
+
 	/** The minimum date that can be selected.*/
 	public readonly min = input<T>();
 

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

@@ -13,14 +13,14 @@ import {
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { NgIcon, provideIcons } from '@ng-icons/core';
-import { lucideCalendar } from '@ng-icons/lucide';
+import { lucideChevronDown } from '@ng-icons/lucide';
 import { BrnDialogState } from '@spartan-ng/brain/dialog';
 import { type ChangeFn, type TouchFn } from '@spartan-ng/brain/forms';
 import { BrnPopover, BrnPopoverContent, BrnPopoverTrigger } from '@spartan-ng/brain/popover';
-import { HlmCalendarRange } from '@spartan-ng/helm/calendar';
-import { HlmIcon } from '@spartan-ng/helm/icon';
-import { HlmPopoverContent } from '@spartan-ng/helm/popover';
-import { hlm } from '@spartan-ng/helm/utils';
+import { HlmCalendarRange } from '<%- importAlias %>/calendar';
+import { HlmIcon } from '<%- importAlias %>/icon';
+import { HlmPopoverContent } from '<%- importAlias %>/popover';
+import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 import { injectHlmDateRangePickerConfig } from './hlm-date-range-picker.token';
 
@@ -30,10 +30,12 @@ export const HLM_DATE_RANGE_PICKER_VALUE_ACCESSOR = {
 	multi: true,
 };
 
+let nextId = 0;
+
 @Component({
 	selector: 'hlm-date-range-picker',
 	imports: [NgIcon, HlmIcon, BrnPopover, BrnPopoverTrigger, BrnPopoverContent, HlmPopoverContent, HlmCalendarRange],
-	providers: [HLM_DATE_RANGE_PICKER_VALUE_ACCESSOR, provideIcons({ lucideCalendar })],
+	providers: [HLM_DATE_RANGE_PICKER_VALUE_ACCESSOR, provideIcons({ lucideChevronDown })],
 	template: `
 		<brn-popover
 			sideOffset="5"
@@ -41,9 +43,13 @@ export const HLM_DATE_RANGE_PICKER_VALUE_ACCESSOR = {
 			(stateChanged)="_popoverState.set($event)"
 			(closed)="_onClose()"
 		>
-			<button type="button" [class]="_computedClass()" [disabled]="_mutableDisabled()" brnPopoverTrigger>
-				<ng-icon hlm size="sm" name="lucideCalendar" />
-
+			<button
+				[id]="buttonId()"
+				type="button"
+				[class]="_computedClass()"
+				[disabled]="_mutableDisabled()"
+				brnPopoverTrigger
+			>
 				<span class="truncate">
 					@if (_formattedDate(); as formattedDate) {
 						{{ formattedDate }}
@@ -51,6 +57,8 @@ export const HLM_DATE_RANGE_PICKER_VALUE_ACCESSOR = {
 						<ng-content />
 					}
 				</span>
+
+				<ng-icon hlm size="sm" name="lucideChevronDown" />
 			</button>
 
 			<div hlmPopoverContent class="w-auto p-0" *brnPopoverContent="let ctx">
@@ -78,15 +86,17 @@ export class HlmDateRangePicker<T> implements ControlValueAccessor {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'ring-offset-background border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex h-10 w-[280px] items-center justify-start gap-2 whitespace-nowrap rounded-md border px-4 py-2 text-left text-sm font-normal transition-all',
+			'ring-offset-background border-input bg-background hover:bg-accent dark:bg-input/30 dark:hover:bg-input/50 hover:text-accent-foreground inline-flex h-9 w-[280px] cursor-default items-center justify-between gap-2 whitespace-nowrap rounded-md border px-3 py-2 text-left text-sm font-normal transition-all disabled:pointer-events-none disabled:opacity-50',
 			'focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
 			'disabled:pointer-events-none disabled:opacity-50',
 			'[&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0',
-			!this._mutableDate() ? 'text-muted-foreground' : '',
 			this.userClass(),
 		),
 	);
 
+	/** The id of the button that opens the date picker. */
+	public readonly buttonId = input<string>(`hlm-date-picker-range-${nextId++}`);
+
 	/** The minimum date that can be selected.*/
 	public readonly min = input<T>();
 

package/src/generators/ui/libs/ui-dialog-helm/files/lib/hlm-dialog-close.ts.template

@@ -1,5 +1,5 @@
 import { Directive, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/helm/utils';
+import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
 @Directive({

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

@@ -3,8 +3,8 @@ import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, inject
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideX } from '@ng-icons/lucide';
 import { BrnDialogClose, BrnDialogRef, injectBrnDialogContext } from '@spartan-ng/brain/dialog';
-import { HlmIcon } from '@spartan-ng/helm/icon';
-import { hlm } from '@spartan-ng/helm/utils';
+import { HlmIcon } from '<%- importAlias %>/icon';
+import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 import { HlmDialogClose } from './hlm-dialog-close';
 

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

@@ -1,6 +1,6 @@
 import { Directive, computed, input } from '@angular/core';
 import { BrnDialogDescription } from '@spartan-ng/brain/dialog';
-import { hlm } from '@spartan-ng/helm/utils';
+import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
 @Directive({

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

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/helm/utils';
+import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
 @Component({

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

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/helm/utils';
+import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
 @Component({

package/src/generators/ui/libs/ui-dialog-helm/files/lib/hlm-dialog-overlay.ts.template

@@ -1,6 +1,6 @@
 import { Directive, computed, effect, input, untracked } from '@angular/core';
 import { injectCustomClassSettable } from '@spartan-ng/brain/core';
-import { hlm } from '@spartan-ng/helm/utils';
+import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
 export const hlmDialogOverlayClass =

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

@@ -1,6 +1,6 @@
 import { Directive, computed, input } from '@angular/core';
 import { BrnDialogTitle } from '@spartan-ng/brain/dialog';
-import { hlm } from '@spartan-ng/helm/utils';
+import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
 @Directive({

package/src/generators/ui/libs/ui-form-field-helm/files/lib/hlm-error.ts.template

@@ -1,5 +1,5 @@
 import { computed, Directive, input } from '@angular/core';
-import { hlm } from '@spartan-ng/helm/utils';
+import { hlm } from '<%- importAlias %>/utils';
 import { ClassValue } from 'clsx';
 
 @Directive({

package/src/generators/ui/libs/ui-form-field-helm/files/lib/hlm-form-field.ts.template

@@ -8,7 +8,7 @@ import {
 	input,
 } from '@angular/core';
 import { BrnFormFieldControl } from '@spartan-ng/brain/form-field';
-import { hlm } from '@spartan-ng/helm/utils';
+import { hlm } from '<%- importAlias %>/utils';
 import { ClassValue } from 'clsx';
 import { HlmError } from './hlm-error';
 

package/src/generators/ui/libs/ui-form-field-helm/files/lib/hlm-hint.ts.template

@@ -1,5 +1,5 @@
 import { computed, Directive, input } from '@angular/core';
-import { hlm } from '@spartan-ng/helm/utils';
+import { hlm } from '<%- importAlias %>/utils';
 import { ClassValue } from 'clsx';
 
 @Directive({

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

@@ -10,7 +10,7 @@ import {
 	signal,
 } from '@angular/core';
 import { injectExposedSideProvider, injectExposesStateProvider } from '@spartan-ng/brain/core';
-import { hlm } from '@spartan-ng/helm/utils';
+import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
 @Component({

package/src/generators/ui/libs/ui-input-helm/files/lib/hlm-input-error.ts.template

@@ -1,5 +1,5 @@
 import { Directive, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/helm/utils';
+import { hlm } from '<%- importAlias %>/utils';
 import { type VariantProps, cva } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
 

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

@@ -13,7 +13,7 @@ import {
 import { FormGroupDirective, NgControl, NgForm } from '@angular/forms';
 import { BrnFormFieldControl } from '@spartan-ng/brain/form-field';
 import { ErrorStateMatcher, ErrorStateTracker } from '@spartan-ng/brain/forms';
-import { hlm } from '@spartan-ng/helm/utils';
+import { hlm } from '<%- importAlias %>/utils';
 import { cva, VariantProps } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
 

package/src/generators/ui/libs/ui-input-otp-helm/files/lib/hlm-input-otp-group.ts.template

@@ -1,5 +1,5 @@
 import { computed, Directive, input } from '@angular/core';
-import { hlm } from '@spartan-ng/helm/utils';
+import { hlm } from '<%- importAlias %>/utils';
 import { type ClassValue } from 'clsx';
 
 @Directive({

package/src/generators/ui/libs/ui-input-otp-helm/files/lib/hlm-input-otp-separator.ts.template

@@ -1,8 +1,8 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideMinus } from '@ng-icons/lucide';
-import { HlmIcon } from '@spartan-ng/helm/icon';
-import { hlm } from '@spartan-ng/helm/utils';
+import { HlmIcon } from '<%- importAlias %>/icon';
+import { hlm } from '<%- importAlias %>/utils';
 import { type ClassValue } from 'clsx';
 
 @Component({

package/src/generators/ui/libs/ui-input-otp-helm/files/lib/hlm-input-otp-slot.ts.template

@@ -1,7 +1,7 @@
 import { NumberInput } from '@angular/cdk/coercion';
 import { ChangeDetectionStrategy, Component, computed, input, numberAttribute } from '@angular/core';
 import { BrnInputOtpSlot } from '@spartan-ng/brain/input-otp';
-import { hlm } from '@spartan-ng/helm/utils';
+import { hlm } from '<%- importAlias %>/utils';
 import { type ClassValue } from 'clsx';
 import { HlmInputOtpFakeCaret } from './hlm-input-otp-fake-caret';
 

package/src/generators/ui/libs/ui-input-otp-helm/files/lib/hlm-input-otp.ts.template

@@ -1,5 +1,5 @@
 import { computed, Directive, input } from '@angular/core';
-import { hlm } from '@spartan-ng/helm/utils';
+import { hlm } from '<%- importAlias %>/utils';
 import { type ClassValue } from 'clsx';
 
 @Directive({

package/src/generators/ui/libs/ui-label-helm/files/lib/hlm-label.ts.template

@@ -1,6 +1,6 @@
 import { Directive, computed, input } from '@angular/core';
 import { BrnLabel } from '@spartan-ng/brain/label';
-import { hlm } from '@spartan-ng/helm/utils';
+import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
 @Directive({