@spartan-ng/cli 0.0.1-alpha.557 → 0.0.1-alpha.558

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

@@ -12,6 +12,7 @@ import type { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-slider, brn-slider [hlm]',
+	imports: [BrnSliderThumb, BrnSliderTrack, BrnSliderRange, BrnSliderTick],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	hostDirectives: [
 		{
@@ -20,6 +21,9 @@ import type { ClassValue } from 'clsx';
 			outputs: ['valueChange'],
 		},
 	],
+	host: {
+		'[class]': '_computedClass()',
+	},
 	template: `
 		<div brnSliderTrack class="bg-muted relative h-1.5 w-full grow overflow-hidden rounded-full">
 			<div class="bg-primary absolute h-full" brnSliderRange></div>
@@ -42,10 +46,6 @@ import type { ClassValue } from 'clsx';
 			brnSliderThumb
 		></span>
 	`,
-	host: {
-		'[class]': '_computedClass()',
-	},
-	imports: [BrnSliderThumb, BrnSliderTrack, BrnSliderRange, BrnSliderTick],
 })
 export class HlmSlider {
 	protected readonly _slider = injectBrnSlider();

package/src/generators/ui/libs/sonner/files/lib/hlm-toaster.ts.template

@@ -6,6 +6,7 @@ import { NgxSonnerToaster, type ToasterProps } from 'ngx-sonner';
 @Component({
 	selector: 'hlm-toaster',
 	imports: [NgxSonnerToaster],
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	template: `
 		<ngx-sonner-toaster
 			[class]="_computedClass()"
@@ -24,7 +25,6 @@ import { NgxSonnerToaster, type ToasterProps } from 'ngx-sonner';
 			[style]="userStyle()"
 		/>
 	`,
-	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmToaster {
 	public readonly invert = input<ToasterProps['invert'], boolean | string>(false, {

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

@@ -8,6 +8,7 @@ import type { ClassValue } from 'clsx';
 	selector: 'hlm-spinner',
 	imports: [NgIcon],
 	providers: [provideIcons({ lucideLoader })],
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
 		role: 'status',
 		'[attr.aria-label]': 'ariaLabel()',
@@ -16,7 +17,6 @@ import type { ClassValue } from 'clsx';
 	template: `
 		<ng-icon [name]="icon()" [class]="_computedClass()" />
 	`,
-	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmSpinner {
 	/**

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

@@ -26,6 +26,8 @@ export const HLM_SWITCH_VALUE_ACCESSOR = {
 @Component({
 	selector: 'hlm-switch',
 	imports: [BrnSwitchThumb, BrnSwitch, HlmSwitchThumb],
+	providers: [HLM_SWITCH_VALUE_ACCESSOR],
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
 		class: 'contents',
 		'[attr.id]': 'null',
@@ -48,8 +50,6 @@ export const HLM_SWITCH_VALUE_ACCESSOR = {
 			<brn-switch-thumb hlm />
 		</brn-switch>
 	`,
-	providers: [HLM_SWITCH_VALUE_ACCESSOR],
-	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmSwitch implements ControlValueAccessor {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -203,7 +203,6 @@ export class HlmTh {
  */
 @Directive({
 	selector: 'td[hlmTd]',
-	standalone: true,
 	host: {
 		'[class]': '_computedClass()',
 		'data-slot': 'table-cell',

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

@@ -22,12 +22,12 @@ type ListVariants = VariantProps<typeof listVariants>;
 
 @Component({
 	selector: 'hlm-tabs-list',
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	hostDirectives: [BrnTabsList],
-	template: '<ng-content/>',
 	host: {
 		'[class]': '_computedClass()',
 	},
-	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: '<ng-content/>',
 })
 export class HlmTabsList {
 	public readonly orientation = input<ListVariants['orientation']>('horizontal');

package/src/generators/ui/libs/tabs/files/lib/hlm-tabs-paginated-list.ts.template

@@ -23,6 +23,10 @@ import { listVariants } from './hlm-tabs-list';
 	selector: 'hlm-paginated-tabs-list',
 	imports: [CdkObserveContent, NgIcon, HlmIcon],
 	providers: [provideIcons({ lucideChevronRight, lucideChevronLeft })],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: {
+		'[class]': '_computedClass()',
+	},
 	template: `
 		<button
 			#previousPaginator
@@ -66,10 +70,6 @@ import { listVariants } from './hlm-tabs-list';
 			<ng-icon hlm size="base" name="lucideChevronRight" />
 		</button>
 	`,
-	host: {
-		'[class]': '_computedClass()',
-	},
-	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmTabsPaginatedList extends BrnTabsPaginatedList {
 	public readonly items = contentChildren(BrnTabsTrigger, { descendants: false });

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

@@ -5,6 +5,7 @@ import type { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-tabs',
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	hostDirectives: [
 		{
 			directive: BrnTabs,
@@ -12,11 +13,10 @@ import type { ClassValue } from 'clsx';
 			outputs: ['tabActivated'],
 		},
 	],
-	template: '<ng-content/>',
-	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
 		'[class]': '_computedClass()',
 	},
+	template: '<ng-content/>',
 })
 export class HlmTabs {
 	public readonly tab = input.required<string>();

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

@@ -36,16 +36,16 @@ type TextareaVariants = VariantProps<typeof textareaVariants>;
 
 @Directive({
 	selector: '[hlmTextarea]',
-	host: {
-		'data-slot': 'textarea',
-		'[class]': '_computedClass()',
-	},
 	providers: [
 		{
 			provide: BrnFormFieldControl,
 			useExisting: forwardRef(() => HlmTextarea),
 		},
 	],
+	host: {
+		'data-slot': 'textarea',
+		'[class]': '_computedClass()',
+	},
 })
 export class HlmTextarea implements BrnFormFieldControl, DoCheck {
 	private readonly _injector = inject(Injector);

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

@@ -8,6 +8,7 @@ import { provideHlmToggleGroup } from './hlm-toggle-group.token';
 
 @Directive({
 	selector: '[hlmToggleGroup],hlm-toggle-group',
+	providers: [provideHlmToggleGroup(HlmToggleGroup)],
 	hostDirectives: [
 		{
 			directive: BrnToggleGroup,
@@ -23,7 +24,6 @@ import { provideHlmToggleGroup } from './hlm-toggle-group.token';
 		'[attr.data-spacing]': 'spacing()',
 		'[style.--gap]': 'spacing()',
 	},
-	providers: [provideHlmToggleGroup(HlmToggleGroup)],
 })
 export class HlmToggleGroup {
 	public readonly variant = input<ToggleVariants['variant']>('default');

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

@@ -4,10 +4,10 @@ import { BrnTooltip } from '@spartan-ng/brain/tooltip';
 @Component({
 	selector: 'hlm-tooltip',
 	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [BrnTooltip],
 	host: {
 		'[style]': '{display: "contents"}',
 	},
-	hostDirectives: [BrnTooltip],
 	template: `
 		<ng-content />
 	`,

package/src/generators/ui/supported-ui-libraries.json

@@ -3,7 +3,7 @@
 		"name": "accordion",
 		"peerDependencies": {
 			"@angular/core": "^19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.557",
+			"@spartan-ng/brain": "0.0.1-alpha.558",
 			"clsx": "^2.1.1",
 			"@ng-icons/core": "^31.4.0",
 			"@ng-icons/lucide": "^31.4.0"
@@ -21,7 +21,7 @@
 		"name": "alert-dialog",
 		"peerDependencies": {
 			"@angular/core": "^19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.557",
+			"@spartan-ng/brain": "0.0.1-alpha.558",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -38,7 +38,7 @@
 		"peerDependencies": {
 			"@angular/core": "^19.0.0",
 			"clsx": "^2.1.1",
-			"@spartan-ng/brain": "0.0.1-alpha.557",
+			"@spartan-ng/brain": "0.0.1-alpha.558",
 			"@angular/cdk": "^19.0.0",
 			"@angular/common": "^19.0.0",
 			"@angular/forms": "^19.0.0",
@@ -50,7 +50,7 @@
 		"name": "avatar",
 		"peerDependencies": {
 			"@angular/core": "^19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.557",
+			"@spartan-ng/brain": "0.0.1-alpha.558",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -76,7 +76,7 @@
 		"name": "button",
 		"peerDependencies": {
 			"@angular/core": "^19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.557",
+			"@spartan-ng/brain": "0.0.1-alpha.558",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
 		}
@@ -85,7 +85,7 @@
 		"name": "button-group",
 		"peerDependencies": {
 			"@angular/core": "^19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.557",
+			"@spartan-ng/brain": "0.0.1-alpha.558",
 			"clsx": "^2.1.1",
 			"class-variance-authority": "^0.7.0"
 		}
@@ -98,7 +98,7 @@
 			"@angular/core": "^19.0.0",
 			"@ng-icons/core": "^31.4.0",
 			"@ng-icons/lucide": "^31.4.0",
-			"@spartan-ng/brain": "0.0.1-alpha.557",
+			"@spartan-ng/brain": "0.0.1-alpha.558",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -128,7 +128,7 @@
 			"@angular/cdk": "^19.0.0",
 			"@ng-icons/core": "^31.4.0",
 			"@ng-icons/lucide": "^31.4.0",
-			"@spartan-ng/brain": "0.0.1-alpha.557",
+			"@spartan-ng/brain": "0.0.1-alpha.558",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -136,7 +136,7 @@
 		"name": "collapsible",
 		"peerDependencies": {
 			"@angular/core": "^19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.557",
+			"@spartan-ng/brain": "0.0.1-alpha.558",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -144,7 +144,7 @@
 		"name": "command",
 		"peerDependencies": {
 			"@angular/core": "^19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.557",
+			"@spartan-ng/brain": "0.0.1-alpha.558",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -156,7 +156,7 @@
 			"@angular/forms": "^19.0.0",
 			"@ng-icons/core": "^31.4.0",
 			"@ng-icons/lucide": "^31.4.0",
-			"@spartan-ng/brain": "0.0.1-alpha.557",
+			"@spartan-ng/brain": "0.0.1-alpha.558",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -168,7 +168,7 @@
 			"@angular/common": "^19.0.0",
 			"@ng-icons/core": "^31.4.0",
 			"@ng-icons/lucide": "^31.4.0",
-			"@spartan-ng/brain": "0.0.1-alpha.557",
+			"@spartan-ng/brain": "0.0.1-alpha.558",
 			"@angular/cdk": "^19.0.0"
 		}
 	},
@@ -193,7 +193,7 @@
 		"peerDependencies": {
 			"@angular/core": "^19.0.0",
 			"@angular/forms": "^19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.557",
+			"@spartan-ng/brain": "0.0.1-alpha.558",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -201,7 +201,7 @@
 		"name": "hover-card",
 		"peerDependencies": {
 			"@angular/core": "^19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.557",
+			"@spartan-ng/brain": "0.0.1-alpha.558",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -218,7 +218,7 @@
 		"peerDependencies": {
 			"@angular/core": "^19.0.0",
 			"@angular/forms": "^19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.557",
+			"@spartan-ng/brain": "0.0.1-alpha.558",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
 		}
@@ -239,7 +239,7 @@
 			"@ng-icons/core": "^31.4.0",
 			"@ng-icons/lucide": "^31.4.0",
 			"@angular/cdk": "^19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.557"
+			"@spartan-ng/brain": "0.0.1-alpha.558"
 		}
 	},
 	"item": {
@@ -248,7 +248,7 @@
 			"@angular/core": "^19.0.0",
 			"clsx": "^2.1.1",
 			"class-variance-authority": "^0.7.0",
-			"@spartan-ng/brain": "0.0.1-alpha.557"
+			"@spartan-ng/brain": "0.0.1-alpha.558"
 		}
 	},
 	"kbd": {
@@ -262,7 +262,7 @@
 		"name": "label",
 		"peerDependencies": {
 			"@angular/core": "^19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.557",
+			"@spartan-ng/brain": "0.0.1-alpha.558",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -270,7 +270,7 @@
 		"name": "menu",
 		"peerDependencies": {
 			"@angular/core": "^19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.557",
+			"@spartan-ng/brain": "0.0.1-alpha.558",
 			"clsx": "^2.1.1",
 			"@ng-icons/core": "^31.4.0",
 			"@ng-icons/lucide": "^31.4.0",
@@ -283,7 +283,7 @@
 		"peerDependencies": {
 			"@angular/core": "^19.0.0",
 			"clsx": "^2.1.1",
-			"@spartan-ng/brain": "0.0.1-alpha.557"
+			"@spartan-ng/brain": "0.0.1-alpha.558"
 		}
 	},
 	"pagination": {
@@ -292,7 +292,7 @@
 			"@angular/cdk": "^19.0.0",
 			"@angular/core": "^19.0.0",
 			"@angular/forms": "^19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.557",
+			"@spartan-ng/brain": "0.0.1-alpha.558",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1",
 			"@ng-icons/core": "^31.4.0",
@@ -305,14 +305,14 @@
 		"peerDependencies": {
 			"@angular/core": "^19.0.0",
 			"clsx": "^2.1.1",
-			"@spartan-ng/brain": "0.0.1-alpha.557"
+			"@spartan-ng/brain": "0.0.1-alpha.558"
 		}
 	},
 	"progress": {
 		"name": "progress",
 		"peerDependencies": {
 			"@angular/core": "^19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.557",
+			"@spartan-ng/brain": "0.0.1-alpha.558",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -320,7 +320,7 @@
 		"name": "radio-group",
 		"peerDependencies": {
 			"@angular/core": "^19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.557",
+			"@spartan-ng/brain": "0.0.1-alpha.558",
 			"clsx": "^2.1.1",
 			"@angular/common": "^19.0.0"
 		}
@@ -329,7 +329,7 @@
 		"name": "resizable",
 		"peerDependencies": {
 			"@angular/core": "^19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.557",
+			"@spartan-ng/brain": "0.0.1-alpha.558",
 			"clsx": "^2.1.1",
 			"@ng-icons/core": "^31.4.0",
 			"@ng-icons/lucide": "^31.4.0"
@@ -347,7 +347,7 @@
 		"peerDependencies": {
 			"@angular/cdk": "^19.0.0",
 			"@angular/core": "^19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.557",
+			"@spartan-ng/brain": "0.0.1-alpha.558",
 			"clsx": "^2.1.1",
 			"@ng-icons/core": "^31.4.0",
 			"@ng-icons/lucide": "^31.4.0",
@@ -358,7 +358,7 @@
 		"name": "separator",
 		"peerDependencies": {
 			"@angular/core": "^19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.557",
+			"@spartan-ng/brain": "0.0.1-alpha.558",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -369,7 +369,7 @@
 			"clsx": "^2.1.1",
 			"@ng-icons/core": "^31.4.0",
 			"@ng-icons/lucide": "^31.4.0",
-			"@spartan-ng/brain": "0.0.1-alpha.557",
+			"@spartan-ng/brain": "0.0.1-alpha.558",
 			"class-variance-authority": "^0.7.0"
 		}
 	},
@@ -378,7 +378,8 @@
 		"peerDependencies": {
 			"@angular/core": "^19.0.0",
 			"clsx": "^2.1.1",
-			"@spartan-ng/brain": "0.0.1-alpha.557",
+			"@angular/cdk": "^19.0.0",
+			"@spartan-ng/brain": "0.0.1-alpha.558",
 			"class-variance-authority": "^0.7.0",
 			"@ng-icons/core": "^31.4.0",
 			"@ng-icons/lucide": "^31.4.0",
@@ -396,7 +397,7 @@
 		"name": "slider",
 		"peerDependencies": {
 			"@angular/core": "^19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.557",
+			"@spartan-ng/brain": "0.0.1-alpha.558",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -424,7 +425,7 @@
 			"clsx": "^2.1.1",
 			"@angular/cdk": "^19.0.0",
 			"@angular/forms": "^19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.557"
+			"@spartan-ng/brain": "0.0.1-alpha.558"
 		}
 	},
 	"table": {
@@ -438,7 +439,7 @@
 		"name": "tabs",
 		"peerDependencies": {
 			"@angular/core": "^19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.557",
+			"@spartan-ng/brain": "0.0.1-alpha.558",
 			"clsx": "^2.1.1",
 			"class-variance-authority": "^0.7.0",
 			"@angular/cdk": "^19.0.0",
@@ -452,7 +453,7 @@
 		"peerDependencies": {
 			"@angular/core": "^19.0.0",
 			"@angular/forms": "^19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.557",
+			"@spartan-ng/brain": "0.0.1-alpha.558",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
 		}
@@ -461,7 +462,7 @@
 		"name": "toggle",
 		"peerDependencies": {
 			"@angular/core": "^19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.557",
+			"@spartan-ng/brain": "0.0.1-alpha.558",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
 		}
@@ -470,7 +471,7 @@
 		"name": "toggle-group",
 		"peerDependencies": {
 			"@angular/core": "^19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.557",
+			"@spartan-ng/brain": "0.0.1-alpha.558",
 			"clsx": "^2.1.1",
 			"@angular/cdk": "^19.0.0"
 		}
@@ -479,7 +480,7 @@
 		"name": "tooltip",
 		"peerDependencies": {
 			"@angular/core": "^19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.557"
+			"@spartan-ng/brain": "0.0.1-alpha.558"
 		}
 	},
 	"typography": {