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

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

@@ -0,0 +1,32 @@
+import { BooleanInput } from '@angular/cdk/coercion';
+import { booleanAttribute, Directive, ElementRef, inject, input } from '@angular/core';
+import { BrnDialog } from '@spartan-ng/brain/dialog';
+
+@Directive({
+	selector: '[hlmAutocompleteTrigger]',
+	host: {
+		'(click)': 'open()',
+	},
+})
+export class HlmAutocompleteTrigger {
+	private readonly _host = inject(ElementRef, { host: true });
+
+	private readonly _brnDialog = inject(BrnDialog, { optional: true });
+
+	/** Whether the trigger is disabled. */
+	public readonly disabledTrigger = input<boolean, BooleanInput>(false, {
+		transform: booleanAttribute,
+	});
+
+	constructor() {
+		if (!this._brnDialog) return;
+
+		this._brnDialog.mutableAttachTo.set(this._host.nativeElement);
+	}
+
+	open() {
+		if (this.disabledTrigger()) return;
+
+		this._brnDialog?.open();
+	}
+}

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

@@ -0,0 +1,23 @@
+import { inject, InjectionToken, ValueProvider } from '@angular/core';
+
+export type TransformValueToString<T> = (value: T) => string;
+
+export interface HlmAutocompleteConfig<T> {
+	transformValueToSearch: TransformValueToString<T>;
+}
+
+function getDefaultConfig<T>(): HlmAutocompleteConfig<T> {
+	return {
+		transformValueToSearch: (value: T) => (typeof value === 'string' ? value : String(value)),
+	};
+}
+
+const HlmAutocompleteConfigToken = new InjectionToken<HlmAutocompleteConfig<unknown>>('HlmAutocompleteConfig');
+
+export function provideHlmAutocompleteConfig<T>(config: Partial<HlmAutocompleteConfig<T>>): ValueProvider {
+	return { provide: HlmAutocompleteConfigToken, useValue: { ...getDefaultConfig(), ...config } };
+}
+
+export function injectHlmAutocompleteConfig<T>(): HlmAutocompleteConfig<T> {
+	return inject(HlmAutocompleteConfigToken, { optional: true }) ?? getDefaultConfig();
+}

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

@@ -0,0 +1,286 @@
+import { BooleanInput } from '@angular/cdk/coercion';
+import { NgTemplateOutlet } from '@angular/common';
+import {
+	booleanAttribute,
+	ChangeDetectionStrategy,
+	Component,
+	computed,
+	ElementRef,
+	forwardRef,
+	inject,
+	input,
+	linkedSignal,
+	output,
+	TemplateRef,
+	viewChild,
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideChevronDown, lucideSearch } from '@ng-icons/lucide';
+import { BrnAutocomplete, BrnAutocompleteEmpty } from '@spartan-ng/brain/autocomplete';
+import { ChangeFn, TouchFn } from '@spartan-ng/brain/forms';
+import { BrnPopover, BrnPopoverContent } from '@spartan-ng/brain/popover';
+import { HlmIcon } from '<%- importAlias %>/icon';
+import { HlmPopoverContent } from '<%- importAlias %>/popover';
+import { hlm } from '<%- importAlias %>/utils';
+import type { ClassValue } from 'clsx';
+import { HlmAutocompleteEmpty } from './hlm-autocomplete-empty';
+import { HlmAutocompleteGroup } from './hlm-autocomplete-group';
+import { HlmAutocompleteItem } from './hlm-autocomplete-item';
+import { HlmAutocompleteList } from './hlm-autocomplete-list';
+import { HlmAutocompleteSearch } from './hlm-autocomplete-search';
+import { HlmAutocompleteSearchInput } from './hlm-autocomplete-search-input';
+import { HlmAutocompleteTrigger } from './hlm-autocomplete-trigger';
+import { injectHlmAutocompleteConfig } from './hlm-autocomplete.token';
+
+export const HLM_AUTOCOMPLETE_VALUE_ACCESSOR = {
+	provide: NG_VALUE_ACCESSOR,
+	useExisting: forwardRef(() => HlmAutocomplete),
+	multi: true,
+};
+
+@Component({
+	selector: 'hlm-autocomplete',
+	imports: [
+		NgTemplateOutlet,
+
+		BrnPopover,
+		BrnPopoverContent,
+		HlmPopoverContent,
+
+		BrnAutocomplete,
+		BrnAutocompleteEmpty,
+		HlmAutocompleteEmpty,
+		HlmAutocompleteGroup,
+		HlmAutocompleteItem,
+		HlmAutocompleteList,
+		HlmAutocompleteSearch,
+		HlmAutocompleteSearchInput,
+		HlmAutocompleteTrigger,
+
+		NgIcon,
+		HlmIcon,
+	],
+	providers: [HLM_AUTOCOMPLETE_VALUE_ACCESSOR, provideIcons({ lucideSearch, lucideChevronDown })],
+	template: `
+		<brn-popover
+			#popover
+			align="start"
+			autoFocus="first-heading"
+			sideOffset="5"
+			closeDelay="100"
+			[closeOnOutsidePointerEvents]="true"
+		>
+			<div brnAutocomplete>
+				<hlm-autocomplete-search hlmAutocompleteTrigger [disabledTrigger]="!_search()">
+					<ng-icon name="lucideSearch" hlm />
+					<input
+						#input
+						type="text"
+						autocomplete="off"
+						hlm-autocomplete-search-input
+						[id]="inputId()"
+						[placeholder]="searchPlaceholderText()"
+						[disabled]="_disabled()"
+						[value]="_search()"
+						(input)="_onSearchChanged($event)"
+						(keydown.arrowDown)="_openPopover()"
+					/>
+
+					<button
+						class="flex items-center justify-center outline-none disabled:cursor-not-allowed [&>_ng-icon]:opacity-50"
+						tabindex="-1"
+						type="button"
+						[attr.aria-label]="ariaLabelToggleButton()"
+						[disabled]="_disabled()"
+						(click)="_toggleOptions()"
+					>
+						<ng-icon name="lucideChevronDown" hlm />
+					</button>
+				</hlm-autocomplete-search>
+
+				<div
+					*brnPopoverContent="let ctx"
+					hlmPopoverContent
+					class="p-0"
+					[style.width.px]="_elementRef.nativeElement.offsetWidth"
+				>
+					<hlm-autocomplete-list
+						[class]="_computedAutocompleteListClass()"
+						[class.hidden]="filteredOptions().length === 0"
+					>
+						<hlm-autocomplete-group>
+							@for (option of filteredOptions(); track option) {
+								<button hlm-autocomplete-item [value]="option" (selected)="_optionSelected(option)">
+									@if (optionTemplate(); as optionTemplate) {
+										<ng-container *ngTemplateOutlet="optionTemplate; context: { $implicit: option }" />
+									} @else {
+										{{ option }}
+									}
+								</button>
+							}
+						</hlm-autocomplete-group>
+					</hlm-autocomplete-list>
+
+					<div *brnAutocompleteEmpty hlmAutocompleteEmpty [class]="_computedAutocompleteEmptyClass()">
+						@if (loading()) {
+							<ng-content select="[loading]">{{ loadingText() }}</ng-content>
+						} @else {
+							<ng-content select="[empty]">{{ emptyText() }}</ng-content>
+						}
+					</div>
+				</div>
+			</div>
+		</brn-popover>
+	`,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmAutocomplete<T> implements ControlValueAccessor {
+	private static _id = 0;
+	private readonly _config = injectHlmAutocompleteConfig<T>();
+
+	private readonly _brnPopover = viewChild.required(BrnPopover);
+	private readonly _inputRef = viewChild.required('input', { read: ElementRef });
+
+	protected readonly _elementRef = inject(ElementRef<HTMLElement>);
+
+	/** The user defined class  */
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() => hlm('block w-full', this.userClass()));
+
+	/** Custom class for the autocomplete list. */
+	public readonly autocompleteListClass = input<ClassValue>('');
+	protected readonly _computedAutocompleteListClass = computed(() => hlm('', this.autocompleteListClass()));
+
+	/** Custom class for the empty and loading state container. */
+	public readonly autocompleteEmptyClass = input<ClassValue>('');
+	protected readonly _computedAutocompleteEmptyClass = computed(() => hlm('', this.autocompleteEmptyClass()));
+
+	/** The list of filtered options to display in the autocomplete. */
+	public readonly filteredOptions = input<T[]>([]);
+
+	/** The selected value. */
+	public readonly value = input<T>();
+	protected readonly _value = linkedSignal(() => this.value());
+
+	/** The search query. */
+	public readonly search = input<string>();
+	protected readonly _search = linkedSignal(() => this.search() || '');
+
+	/** Function to transform an option value to a search string. Defaults to identity function for strings. */
+	public readonly transformValueToSearch = input<(value: T) => string>(this._config.transformValueToSearch);
+
+	/** Optional template for rendering each option. */
+	public readonly optionTemplate = input<TemplateRef<HlmAutocompleteOption<T>>>();
+
+	/** Whether the autocomplete is in a loading state. */
+	public readonly loading = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
+
+	/** Placeholder text for the input field. */
+	public readonly searchPlaceholderText = input('Select an option');
+
+	/** Text to display when loading options. */
+	public readonly loadingText = input('Loading options...');
+
+	/** Text to display when no options are found. */
+	public readonly emptyText = input('No options found');
+
+	/** Aria label for the toggle button. */
+	public readonly ariaLabelToggleButton = input<string>('Toggle options');
+
+	/** The id of the input field. */
+	public readonly inputId = input<string>(`hlm-autocomplete-input-${++HlmAutocomplete._id}`);
+
+	/** Whether the autocomplete is disabled. */
+	public readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
+	protected readonly _disabled = linkedSignal(() => this.disabled());
+
+	/** Emitted when the selected value changes. */
+	public readonly valueChange = output<T | null>();
+
+	/** Emitted when the search query changes. */
+	public readonly searchChange = output<string>();
+
+	protected _onChange?: ChangeFn<T | null>;
+	protected _onTouched?: TouchFn;
+
+	protected _setPopoverState(state: 'open' | 'closed') {
+		if (state === 'open') {
+			this._brnPopover().open();
+		} else {
+			this._brnPopover().close();
+		}
+	}
+
+	protected _openPopover() {
+		if (this._search() || this.filteredOptions().length > 0) {
+			// only open if there's a search term or options to show
+			this._brnPopover().open();
+		}
+	}
+
+	protected _toggleOptions() {
+		if (this._search() || this.filteredOptions().length > 0) {
+			// only toggle if there's a search term or options to show
+			const state = this._brnPopover().stateComputed();
+			this._setPopoverState(state === 'open' ? 'closed' : 'open');
+		}
+
+		this._inputRef().nativeElement.focus();
+	}
+
+	protected _onSearchChanged(event: Event) {
+		const input = event.target as HTMLInputElement;
+		this._search.set(input.value);
+		this.searchChange.emit(input.value);
+
+		this._clearOption();
+
+		if (this._brnPopover().stateComputed() !== 'open' && input.value.length > 0) {
+			this._setPopoverState('open');
+		}
+	}
+
+	protected _clearOption() {
+		this._value.set(undefined);
+		this._onChange?.(null);
+		this.valueChange.emit(null);
+	}
+
+	protected _optionSelected(option: T) {
+		this._value.set(option);
+		this._onChange?.(option);
+		this.valueChange.emit(option);
+
+		const searchValue = this.transformValueToSearch()(option);
+
+		this._search.set(searchValue);
+		this.searchChange.emit(searchValue);
+
+		this._setPopoverState('closed');
+	}
+
+	/** CONTROL VALUE ACCESSOR */
+	public writeValue(value: T | null): void {
+		this._value.set(value ? value : undefined);
+	}
+
+	public registerOnChange(fn: ChangeFn<T | null>): void {
+		this._onChange = fn;
+	}
+
+	public registerOnTouched(fn: TouchFn): void {
+		this._onTouched = fn;
+	}
+
+	public setDisabledState(isDisabled: boolean): void {
+		this._disabled.set(isDisabled);
+	}
+}
+
+interface HlmAutocompleteOption<T> {
+	$implicit: T;
+}

package/src/generators/ui/libs/ui-autocomplete-helm/generator.d.ts

@@ -0,0 +1,3 @@
+import { Tree } from '@nx/devkit';
+import type { HlmBaseGeneratorSchema } from '../../../base/schema';
+export declare function generator(tree: Tree, options: HlmBaseGeneratorSchema): Promise<import("@nx/devkit").GeneratorCallback>;

package/src/generators/ui/libs/ui-autocomplete-helm/generator.js

@@ -0,0 +1,14 @@
+"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,
+        primitiveName: 'autocomplete',
+        internalName: 'ui-autocomplete-helm',
+        publicName: 'ui-autocomplete-helm',
+    });
+}
+//# sourceMappingURL=generator.js.map

package/src/generators/ui/libs/ui-autocomplete-helm/generator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/ui-autocomplete-helm/generator.ts"],"names":[],"mappings":";;AAIA,8BAOC;;AAVD,gFAAuD;AAGhD,KAAK,UAAU,SAAS,CAAC,IAAU,EAAE,OAA+B;IAC1E,OAAO,MAAM,IAAA,mBAAgB,EAAC,IAAI,EAAE;QACnC,GAAG,OAAO;QACV,aAAa,EAAE,cAAc;QAC7B,YAAY,EAAE,sBAAsB;QACpC,UAAU,EAAE,sBAAsB;KAClC,CAAC,CAAC;AACJ,CAAC"}

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

@@ -1,6 +1,6 @@
 import { Directive, computed, inject } from '@angular/core';
 import { BrnAvatarFallback } from '@spartan-ng/brain/avatar';
-import { hlm } from '@spartan-ng/helm/utils';
+import { hlm } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmAvatarFallback]',

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

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

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

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

package/src/generators/ui/libs/ui-badge-helm/files/lib/hlm-badge.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-breadcrumb-helm/files/lib/hlm-breadcrumb-ellipsis.ts.template

@@ -1,8 +1,8 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideEllipsis } 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-breadcrumb-helm/files/lib/hlm-breadcrumb-item.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-breadcrumb-helm/files/lib/hlm-breadcrumb-link.ts.template

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

package/src/generators/ui/libs/ui-breadcrumb-helm/files/lib/hlm-breadcrumb-list.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-breadcrumb-helm/files/lib/hlm-breadcrumb-page.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-breadcrumb-helm/files/lib/hlm-breadcrumb-separator.ts.template

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

package/src/generators/ui/libs/ui-breadcrumb-helm/files/lib/hlm-breadcrumb.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-button-helm/files/lib/hlm-button.ts.template

@@ -1,6 +1,6 @@
 import { Directive, computed, input, signal } from '@angular/core';
 import { BrnButton } from '@spartan-ng/brain/button';
-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';
 import { injectBrnButtonConfig } from './hlm-button.token';

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

@@ -25,9 +25,9 @@ import {
 	Weekday,
 } from '@spartan-ng/brain/calendar';
 import { injectDateAdapter } from '@spartan-ng/brain/date-time';
-import { buttonVariants } from '@spartan-ng/helm/button';
-import { HlmIcon } from '@spartan-ng/helm/icon';
-import { hlm } from '@spartan-ng/helm/utils';
+import { buttonVariants } from '<%- importAlias %>/button';
+import { HlmIcon } from '<%- importAlias %>/icon';
+import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
 @Component({

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

@@ -25,9 +25,9 @@ import {
 	Weekday,
 } from '@spartan-ng/brain/calendar';
 import { injectDateAdapter } from '@spartan-ng/brain/date-time';
-import { buttonVariants } from '@spartan-ng/helm/button';
-import { HlmIcon } from '@spartan-ng/helm/icon';
-import { hlm } from '@spartan-ng/helm/utils';
+import { buttonVariants } from '<%- importAlias %>/button';
+import { HlmIcon } from '<%- importAlias %>/icon';
+import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
 @Component({

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

@@ -25,9 +25,9 @@ import {
 	Weekday,
 } from '@spartan-ng/brain/calendar';
 import { injectDateAdapter } from '@spartan-ng/brain/date-time';
-import { buttonVariants } from '@spartan-ng/helm/button';
-import { HlmIcon } from '@spartan-ng/helm/icon';
-import { hlm } from '@spartan-ng/helm/utils';
+import { buttonVariants } from '<%- importAlias %>/button';
+import { HlmIcon } from '<%- importAlias %>/icon';
+import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
 @Component({

package/src/generators/ui/libs/ui-card-helm/files/lib/hlm-card-action.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-card-helm/files/lib/hlm-card-content.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-card-helm/files/lib/hlm-card-description.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-card-helm/files/lib/hlm-card-footer.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-card-helm/files/lib/hlm-card-header.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-card-helm/files/lib/hlm-card-title.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-card-helm/files/lib/hlm-card.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-carousel-helm/files/lib/hlm-carousel-content.ts.template

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

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

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

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

@@ -10,9 +10,9 @@ import {
 } from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideArrowRight } from '@ng-icons/lucide';
-import { HlmButton, provideBrnButtonConfig } from '@spartan-ng/helm/button';
-import { HlmIcon } from '@spartan-ng/helm/icon';
-import { hlm } from '@spartan-ng/helm/utils';
+import { HlmButton, provideBrnButtonConfig } from '<%- importAlias %>/button';
+import { HlmIcon } from '<%- importAlias %>/icon';
+import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 import { HlmCarousel } from './hlm-carousel';
 

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

@@ -10,9 +10,9 @@ import {
 } from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideArrowLeft } from '@ng-icons/lucide';
-import { HlmButton, provideBrnButtonConfig } from '@spartan-ng/helm/button';
-import { HlmIcon } from '@spartan-ng/helm/icon';
-import { hlm } from '@spartan-ng/helm/utils';
+import { HlmButton, provideBrnButtonConfig } from '<%- importAlias %>/button';
+import { HlmIcon } from '<%- importAlias %>/icon';
+import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 import { HlmCarousel } from './hlm-carousel';
 

package/src/generators/ui/libs/ui-carousel-helm/files/lib/hlm-carousel-slide-display.ts.template

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

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

@@ -9,7 +9,7 @@ import {
 	signal,
 	viewChild,
 } from '@angular/core';
-import { hlm } from '@spartan-ng/helm/utils';
+import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 import {
 	EmblaCarouselDirective,

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

@@ -15,8 +15,8 @@ import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideCheck } from '@ng-icons/lucide';
 import { BrnCheckbox } from '@spartan-ng/brain/checkbox';
 import type { ChangeFn, TouchFn } from '@spartan-ng/brain/forms';
-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';
 
 export const HLM_CHECKBOX_VALUE_ACCESSOR = {