@spartan-ng/cli 0.0.1-alpha.379 → 0.0.1-alpha.382

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

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, inject, input } from '@angular/core';
-import { hlm } from '@spartan-ng/ui-core';
+import { hlm } from '@spartan-ng/brain/core';
 import type { ClassValue } from 'clsx';
 import { HlmCarouselComponent } from './hlm-carousel.component';
 

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

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, inject, input } from '@angular/core';
-import { hlm } from '@spartan-ng/ui-core';
+import { hlm } from '@spartan-ng/brain/core';
 import type { ClassValue } from 'clsx';
 import { HlmCarouselComponent } from './hlm-carousel.component';
 

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

@@ -8,10 +8,11 @@ import {
 	input,
 	untracked,
 } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideArrowRight } from '@ng-icons/lucide';
+import { hlm } from '@spartan-ng/brain/core';
 import { HlmButtonDirective, provideBrnButtonConfig } from '@spartan-ng/ui-button-helm';
-import { hlm } from '@spartan-ng/ui-core';
-import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm';
+import { HlmIconDirective } from '@spartan-ng/ui-icon-helm';
 import type { ClassValue } from 'clsx';
 import { HlmCarouselComponent } from './hlm-carousel.component';
 
@@ -27,9 +28,9 @@ import { HlmCarouselComponent } from './hlm-carousel.component';
 	},
 	hostDirectives: [{ directive: HlmButtonDirective, inputs: ['variant', 'size'] }],
 	providers: [provideIcons({ lucideArrowRight }), provideBrnButtonConfig({ variant: 'outline', size: 'icon' })],
-	imports: [HlmIconComponent],
+	imports: [NgIcon, HlmIconDirective],
 	template: `
-		<hlm-icon size="sm" name="lucideArrowRight" />
+		<ng-icon hlm size="sm" name="lucideArrowRight" />
 		<span class="sr-only">Next slide</span>
 	`,
 })

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

@@ -8,10 +8,11 @@ import {
 	input,
 	untracked,
 } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideArrowLeft } from '@ng-icons/lucide';
+import { hlm } from '@spartan-ng/brain/core';
 import { HlmButtonDirective, provideBrnButtonConfig } from '@spartan-ng/ui-button-helm';
-import { hlm } from '@spartan-ng/ui-core';
-import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm';
+import { HlmIconDirective } from '@spartan-ng/ui-icon-helm';
 import type { ClassValue } from 'clsx';
 import { HlmCarouselComponent } from './hlm-carousel.component';
 
@@ -27,9 +28,9 @@ import { HlmCarouselComponent } from './hlm-carousel.component';
 	},
 	hostDirectives: [{ directive: HlmButtonDirective, inputs: ['variant', 'size'] }],
 	providers: [provideIcons({ lucideArrowLeft }), provideBrnButtonConfig({ variant: 'outline', size: 'icon' })],
-	imports: [HlmIconComponent],
+	imports: [NgIcon, HlmIconDirective],
 	template: `
-		<hlm-icon size="sm" name="lucideArrowLeft" />
+		<ng-icon hlm size="sm" name="lucideArrowLeft" />
 		<span class="sr-only">Previous slide</span>
 	`,
 })

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

@@ -10,7 +10,7 @@ import {
 	input,
 	signal,
 } from '@angular/core';
-import { hlm } from '@spartan-ng/ui-core';
+import { hlm } from '@spartan-ng/brain/core';
 import type { ClassValue } from 'clsx';
 import {
 	EmblaCarouselDirective,

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

@@ -1,20 +1,21 @@
 import { Component, computed, inject, input } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideCheck } from '@ng-icons/lucide';
 import { BrnCheckboxComponent } from '@spartan-ng/brain/checkbox';
-import { hlm } from '@spartan-ng/ui-core';
-import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm';
+import { hlm } from '@spartan-ng/brain/core';
+import { HlmIconDirective } from '@spartan-ng/ui-icon-helm';
 import type { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-checkbox-checkicon',
 	standalone: true,
-	imports: [HlmIconComponent],
+	imports: [NgIcon, HlmIconDirective],
 	providers: [provideIcons({ lucideCheck })],
 	host: {
 		'[class]': '_computedClass()',
 	},
 	template: `
-		<hlm-icon size="sm" [name]="iconName()" />
+		<ng-icon hlm size="sm" [name]="iconName()" />
 	`,
 })
 export class HlmCheckboxCheckIconComponent {

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

@@ -1,7 +1,7 @@
 import { Component, booleanAttribute, computed, forwardRef, input, model, output, signal } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { BrnCheckboxComponent } from '@spartan-ng/brain/checkbox';
-import { hlm } from '@spartan-ng/ui-core';
+import { hlm } from '@spartan-ng/brain/core';
 import type { ClassValue } from 'clsx';
 import { HlmCheckboxCheckIconComponent } from './hlm-checkbox-checkicon.component';
 

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

@@ -1,6 +1,6 @@
 import { Directive, computed, input } from '@angular/core';
+import { hlm } from '@spartan-ng/brain/core';
 import { HlmButtonDirective, provideBrnButtonConfig } from '@spartan-ng/ui-button-helm';
-import { hlm } from '@spartan-ng/ui-core';
 import type { ClassValue } from 'clsx';
 
 @Directive({

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

@@ -1,5 +1,5 @@
 import { Directive, ElementRef, Renderer2, computed, effect, inject, input, signal } from '@angular/core';
-import { hlm, injectExposesStateProvider } from '@spartan-ng/ui-core';
+import { hlm, injectExposesStateProvider } from '@spartan-ng/brain/core';
 import type { ClassValue } from 'clsx';
 import { HlmCommandDirective } from './hlm-command.directive';
 

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

@@ -1,5 +1,5 @@
 import { Directive, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/ui-core';
+import { hlm } from '@spartan-ng/brain/core';
 import type { ClassValue } from 'clsx';
 
 @Directive({

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

@@ -1,5 +1,5 @@
 import { Directive, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/ui-core';
+import { hlm } from '@spartan-ng/brain/core';
 import type { ClassValue } from 'clsx';
 
 @Directive({

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

@@ -1,5 +1,5 @@
 import { Component, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/ui-core';
+import { hlm } from '@spartan-ng/brain/core';
 import type { ClassValue } from 'clsx';
 
 @Component({
@@ -13,6 +13,6 @@ import type { ClassValue } from 'clsx';
 export class HlmCommandInputWrapperComponent {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _computedClass = computed(() =>
-		hlm('flex space-x-2 items-center border-b border-border px-3 [&_hlm-icon]:h-5 [&_hlm-icon]:w-5', this.userClass()),
+		hlm('flex space-x-2 items-center border-b border-border px-3 [&_ng-icon]:h-5 [&_ng-icon]:w-5', this.userClass()),
 	);
 }

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

@@ -1,5 +1,5 @@
 import { Directive, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/ui-core';
+import { hlm } from '@spartan-ng/brain/core';
 import type { ClassValue } from 'clsx';
 
 @Directive({

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

@@ -1,17 +1,17 @@
 import { Directive, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/ui-core';
+import { hlm } from '@spartan-ng/brain/core';
 import { provideHlmIconConfig } from '@spartan-ng/ui-icon-helm';
 import type { ClassValue } from 'clsx';
 
 @Directive({
 	selector: '[hlmCmdIcon]',
 	standalone: true,
-	providers: [provideHlmIconConfig({ size: 'none' })],
+	providers: [provideHlmIconConfig({ size: 'sm' })],
 	host: {
 		'[class]': '_computedClass()',
 	},
 })
 export class HlmCommandItemIconDirective {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm('mr-2 h-4 w-4', this.userClass()));
+	protected _computedClass = computed(() => hlm('mr-2', this.userClass()));
 }

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

@@ -1,5 +1,5 @@
 import { Directive, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/ui-core';
+import { hlm } from '@spartan-ng/brain/core';
 import type { ClassValue } from 'clsx';
 
 @Directive({

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

@@ -1,5 +1,5 @@
 import { Directive, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/ui-core';
+import { hlm } from '@spartan-ng/brain/core';
 import type { ClassValue } from 'clsx';
 
 @Directive({

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

@@ -1,5 +1,5 @@
 import { Component, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/ui-core';
+import { hlm } from '@spartan-ng/brain/core';
 import type { ClassValue } from 'clsx';
 
 @Component({

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

@@ -1,5 +1,5 @@
 import { Directive, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/ui-core';
+import { hlm } from '@spartan-ng/brain/core';
 import type { ClassValue } from 'clsx';
 
 @Directive({

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

@@ -1,5 +1,5 @@
 import { Directive, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/ui-core';
+import { hlm } from '@spartan-ng/brain/core';
 import type { ClassValue } from 'clsx';
 
 @Directive({

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

@@ -1,16 +1,17 @@
 import { NgComponentOutlet } from '@angular/common';
 import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, inject, input } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideX } from '@ng-icons/lucide';
+import { hlm } from '@spartan-ng/brain/core';
 import { BrnDialogCloseDirective, BrnDialogRef, injectBrnDialogContext } from '@spartan-ng/brain/dialog';
-import { hlm } from '@spartan-ng/ui-core';
-import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm';
+import { HlmIconDirective } from '@spartan-ng/ui-icon-helm';
 import type { ClassValue } from 'clsx';
 import { HlmDialogCloseDirective } from './hlm-dialog-close.directive';
 
 @Component({
 	selector: 'hlm-dialog-content',
 	standalone: true,
-	imports: [NgComponentOutlet, BrnDialogCloseDirective, HlmDialogCloseDirective, HlmIconComponent],
+	imports: [NgComponentOutlet, BrnDialogCloseDirective, HlmDialogCloseDirective, NgIcon, HlmIconDirective],
 	providers: [provideIcons({ lucideX })],
 	host: {
 		'[class]': '_computedClass()',
@@ -25,7 +26,7 @@ import { HlmDialogCloseDirective } from './hlm-dialog-close.directive';
 
 		<button brnDialogClose hlm>
 			<span class="sr-only">Close</span>
-			<hlm-icon class="flex h-4 w-4" size="none" name="lucideX" />
+			<ng-icon hlm size="sm" name="lucideX" />
 		</button>
 	`,
 	changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -1,6 +1,6 @@
 import { Directive, computed, input } from '@angular/core';
+import { hlm } from '@spartan-ng/brain/core';
 import { BrnDialogDescriptionDirective } from '@spartan-ng/brain/dialog';
-import { hlm } from '@spartan-ng/ui-core';
 import type { ClassValue } from 'clsx';
 
 @Directive({

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

@@ -1,5 +1,5 @@
 import { Component, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/ui-core';
+import { hlm } from '@spartan-ng/brain/core';
 import type { ClassValue } from 'clsx';
 
 @Component({

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

@@ -1,5 +1,5 @@
 import { Component, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/ui-core';
+import { hlm } from '@spartan-ng/brain/core';
 import type { ClassValue } from 'clsx';
 
 @Component({

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

@@ -1,5 +1,5 @@
 import { Directive, computed, effect, input } from '@angular/core';
-import { hlm, injectCustomClassSettable } from '@spartan-ng/ui-core';
+import { hlm, injectCustomClassSettable } from '@spartan-ng/brain/core';
 import type { ClassValue } from 'clsx';
 
 export const hlmDialogOverlayClass =

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

@@ -1,6 +1,6 @@
 import { Directive, computed, input } from '@angular/core';
+import { hlm } from '@spartan-ng/brain/core';
 import { BrnDialogTitleDirective } from '@spartan-ng/brain/dialog';
-import { hlm } from '@spartan-ng/ui-core';
 import type { ClassValue } from 'clsx';
 
 @Directive({

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

@@ -1,5 +1,5 @@
 import { Component, ElementRef, Renderer2, computed, effect, inject, input, signal } from '@angular/core';
-import { hlm, injectExposedSideProvider, injectExposesStateProvider } from '@spartan-ng/ui-core';
+import { hlm, injectExposedSideProvider, injectExposesStateProvider } from '@spartan-ng/brain/core';
 import type { ClassValue } from 'clsx';
 
 @Component({

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

@@ -1,14 +1,11 @@
 import { NgModule } from '@angular/core';
-import { provideIcons as provideIconsImport } from '@ng-icons/core';
-import { HlmIconComponent } from './lib/hlm-icon.component';
+import { HlmIconDirective } from './lib/hlm-icon.directive';
 
-export * from './lib/hlm-icon.component';
+export * from './lib/hlm-icon.directive';
 export * from './lib/hlm-icon.token';
 
-export const provideIcons = provideIconsImport;
-
 @NgModule({
-	imports: [HlmIconComponent],
-	exports: [HlmIconComponent],
+	imports: [HlmIconDirective],
+	exports: [HlmIconDirective],
 })
 export class HlmIconModule {}

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

@@ -0,0 +1,66 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideCheck } from '@ng-icons/lucide';
+import { type RenderResult, render } from '@testing-library/angular';
+import { HlmIconDirective } from './hlm-icon.directive';
+
+@Component({
+	selector: 'hlm-mock',
+	standalone: true,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [HlmIconDirective, NgIcon],
+	providers: [provideIcons({ lucideCheck })],
+	template: `
+		<ng-icon hlm class="test" name="lucideCheck" [size]="size" color="red" strokeWidth="2" />
+	`,
+})
+class HlmMockComponent {
+	@Input() public size = 'base';
+}
+
+describe('HlmIconDirective', () => {
+	let r: RenderResult<HlmMockComponent>;
+	let icon: HTMLElement;
+
+	beforeEach(async () => {
+		r = await render(HlmMockComponent);
+		icon = r.container.querySelector('ng-icon')!;
+	});
+
+	it('should add the xs size', async () => {
+		await r.rerender({ componentInputs: { size: 'xs' } });
+		r.fixture.detectChanges();
+		expect(icon.getAttribute('style')).toContain('--ng-icon__size: 12px');
+	});
+
+	it('should add the sm size', async () => {
+		await r.rerender({ componentInputs: { size: 'sm' } });
+		r.fixture.detectChanges();
+		expect(icon.getAttribute('style')).toContain('--ng-icon__size: 16px');
+	});
+
+	it('should add the base size', () => {
+		expect(icon.getAttribute('style')).toContain('--ng-icon__size: 24px');
+	});
+
+	it('should add the lg size', async () => {
+		await r.rerender({ componentInputs: { size: 'lg' } });
+		r.fixture.detectChanges();
+		expect(icon.getAttribute('style')).toContain('--ng-icon__size: 32px');
+	});
+
+	it('should add the xl size', async () => {
+		await r.rerender({ componentInputs: { size: 'xl' } });
+		r.fixture.detectChanges();
+		expect(icon.getAttribute('style')).toContain('--ng-icon__size: 48px');
+	});
+
+	it('should forward the size property if the size is not a pre-defined size', async () => {
+		await r.rerender({ componentInputs: { size: '2rem' } });
+		r.fixture.detectChanges();
+		const debugEl = r.fixture.debugElement.query(By.directive(NgIcon));
+		expect(debugEl.componentInstance.size()).toBe('2rem');
+		expect(icon.getAttribute('style')).toContain('--ng-icon__size: 2rem');
+	});
+});

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

@@ -0,0 +1,41 @@
+import { Directive, computed, input } from '@angular/core';
+import { injectHlmIconConfig } from './hlm-icon.token';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const DEFINED_SIZES = ['xs', 'sm', 'base', 'lg', 'xl', 'none'] as const;
+
+type DefinedSizes = (typeof DEFINED_SIZES)[number];
+
+export type IconSize = DefinedSizes | (Record<never, never> & string);
+
+@Directive({
+	selector: 'ng-icon[hlm]',
+	standalone: true,
+	host: {
+		'[style.--ng-icon__size]': '_computedSize()',
+	},
+})
+export class HlmIconDirective {
+	private readonly _config = injectHlmIconConfig();
+	public readonly size = input<IconSize>(this._config.size);
+
+	protected readonly _computedSize = computed(() => {
+		const size = this.size();
+
+		switch (size) {
+			case 'xs':
+				return '12px';
+			case 'sm':
+				return '16px';
+			case 'base':
+				return '24px';
+			case 'lg':
+				return '32px';
+			case 'xl':
+				return '48px';
+			default: {
+				return size;
+			}
+		}
+	});
+}

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

@@ -1,14 +1,11 @@
 import { InjectionToken, ValueProvider, inject } from '@angular/core';
-import { type IconType } from '@ng-icons/core';
-import type { IconSize } from './hlm-icon.component';
+import type { IconSize } from './hlm-icon.directive';
 
 export interface HlmIconConfig {
-	name: IconType;
 	size: IconSize;
 }
 
 const defaultConfig: HlmIconConfig = {
-	name: '',
 	size: 'base',
 };
 

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

@@ -1,5 +1,5 @@
 import { Directive, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/ui-core';
+import { hlm } from '@spartan-ng/brain/core';
 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.directive.ts.template

@@ -1,8 +1,8 @@
 import { Directive, type DoCheck, Injector, computed, effect, inject, input, signal } from '@angular/core';
 import { FormGroupDirective, NgControl, NgForm } from '@angular/forms';
+import { hlm } from '@spartan-ng/brain/core';
 import { BrnFormFieldControl } from '@spartan-ng/brain/form-field';
 import { ErrorStateMatcher, ErrorStateTracker } from '@spartan-ng/brain/forms';
-import { hlm } from '@spartan-ng/ui-core';
 
 import { type VariantProps, cva } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';

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

@@ -1,6 +1,6 @@
 import { Directive, computed, inject, input, signal } from '@angular/core';
+import { hlm } from '@spartan-ng/brain/core';
 import { BrnLabelDirective } from '@spartan-ng/brain/label';
-import { hlm } from '@spartan-ng/ui-core';
 import { type VariantProps, cva } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
 

package/src/generators/ui/libs/ui-menu-helm/files/lib/hlm-menu-bar-item.directive.ts.template

@@ -1,6 +1,6 @@
 import { Directive, computed, input } from '@angular/core';
+import { hlm } from '@spartan-ng/brain/core';
 import { BrnMenuItemDirective } from '@spartan-ng/brain/menu';
-import { hlm } from '@spartan-ng/ui-core';
 import type { ClassValue } from 'clsx';
 
 @Directive({

package/src/generators/ui/libs/ui-menu-helm/files/lib/hlm-menu-bar.component.ts.template

@@ -1,6 +1,6 @@
 import { Component, computed, input } from '@angular/core';
+import { hlm } from '@spartan-ng/brain/core';
 import { BrnMenuBarDirective } from '@spartan-ng/brain/menu';
-import { hlm } from '@spartan-ng/ui-core';
 import type { ClassValue } from 'clsx';
 
 @Component({

package/src/generators/ui/libs/ui-menu-helm/files/lib/hlm-menu-item-check.component.ts.template

@@ -1,17 +1,18 @@
 import { Component, computed, input } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideCheck } from '@ng-icons/lucide';
-import { hlm } from '@spartan-ng/ui-core';
-import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm';
+import { hlm } from '@spartan-ng/brain/core';
+import { HlmIconDirective } from '@spartan-ng/ui-icon-helm';
 import type { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-menu-item-check',
 	standalone: true,
 	providers: [provideIcons({ lucideCheck })],
-	imports: [HlmIconComponent],
+	imports: [NgIcon, HlmIconDirective],
 	template: `
 		<!-- Using 1rem for size to mimick h-4 w-4 -->
-		<hlm-icon size="1rem" name="lucideCheck" />
+		<ng-icon hlm size="1rem" name="lucideCheck" />
 	`,
 	host: {
 		'[class]': '_computedClass()',

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

@@ -1,6 +1,6 @@
 import { Directive, computed, input } from '@angular/core';
+import { hlm } from '@spartan-ng/brain/core';
 import { BrnMenuItemCheckboxDirective } from '@spartan-ng/brain/menu';
-import { hlm } from '@spartan-ng/ui-core';
 import type { ClassValue } from 'clsx';
 
 @Directive({

package/src/generators/ui/libs/ui-menu-helm/files/lib/hlm-menu-item-icon.directive.ts.template

@@ -1,17 +1,17 @@
 import { Directive, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/ui-core';
+import { hlm } from '@spartan-ng/brain/core';
 import { provideHlmIconConfig } from '@spartan-ng/ui-icon-helm';
 import type { ClassValue } from 'clsx';
 
 @Directive({
 	selector: '[hlmMenuIcon]',
 	standalone: true,
-	providers: [provideHlmIconConfig({ size: 'none' })],
+	providers: [provideHlmIconConfig({ size: 'sm' })],
 	host: {
 		'[class]': '_computedClass()',
 	},
 })
 export class HlmMenuItemIconDirective {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm('mr-2 h-4 w-4', this.userClass()));
+	protected _computedClass = computed(() => hlm('mr-2', this.userClass()));
 }

package/src/generators/ui/libs/ui-menu-helm/files/lib/hlm-menu-item-radio.component.ts.template

@@ -1,17 +1,18 @@
 import { Component, computed, input } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideCircle } from '@ng-icons/lucide';
-import { hlm } from '@spartan-ng/ui-core';
-import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm';
+import { hlm } from '@spartan-ng/brain/core';
+import { HlmIconDirective } from '@spartan-ng/ui-icon-helm';
 import type { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-menu-item-radio',
 	standalone: true,
 	providers: [provideIcons({ lucideCircle })],
-	imports: [HlmIconComponent],
+	imports: [NgIcon, HlmIconDirective],
 	template: `
 		<!-- Using 0.5rem for size to mimick h-2 w-2 -->
-		<hlm-icon size="0.5rem" class="*:*:fill-current" name="lucideCircle" />
+		<ng-icon hlm size="0.5rem" class="*:*:fill-current" name="lucideCircle" />
 	`,
 	host: {
 		'[class]': '_computedClass()',

package/src/generators/ui/libs/ui-menu-helm/files/lib/hlm-menu-item-radio.directive.ts.template

@@ -1,6 +1,6 @@
 import { Directive, computed, input } from '@angular/core';
+import { hlm } from '@spartan-ng/brain/core';
 import { BrnMenuItemRadioDirective } from '@spartan-ng/brain/menu';
-import { hlm } from '@spartan-ng/ui-core';
 import type { ClassValue } from 'clsx';
 
 @Directive({

package/src/generators/ui/libs/ui-menu-helm/files/lib/hlm-menu-item-sub-indicator.component.ts.template

@@ -1,16 +1,17 @@
 import { Component, computed, input } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideChevronRight } from '@ng-icons/lucide';
-import { hlm } from '@spartan-ng/ui-core';
-import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm';
+import { hlm } from '@spartan-ng/brain/core';
+import { HlmIconDirective } from '@spartan-ng/ui-icon-helm';
 import type { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-menu-item-sub-indicator',
 	standalone: true,
 	providers: [provideIcons({ lucideChevronRight })],
-	imports: [HlmIconComponent],
+	imports: [NgIcon, HlmIconDirective],
 	template: `
-		<hlm-icon size="none" class="h-full w-full" name="lucideChevronRight" />
+		<ng-icon hlm size="none" class="h-full w-full" name="lucideChevronRight" />
 	`,
 	host: {
 		'[class]': '_computedClass()',

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

@@ -1,6 +1,6 @@
 import { Directive, Input, booleanAttribute, computed, input, signal } from '@angular/core';
+import { hlm } from '@spartan-ng/brain/core';
 import { BrnMenuItemDirective } from '@spartan-ng/brain/menu';
-import { hlm } from '@spartan-ng/ui-core';
 import { type VariantProps, cva } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';