@spartan-ng/cli 0.0.1-alpha.457 → 0.0.1-alpha.458

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spartan-ng/cli",
-  "version": "0.0.1-alpha.457",
+  "version": "0.0.1-alpha.458",
   "type": "commonjs",
   "dependencies": {
     "@nx/angular": ">=20.0.0",

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

@@ -1,19 +1,19 @@
 import { NgModule } from '@angular/core';
-import { HlmBreadcrumbEllipsisComponent } from './lib/breadcrumb-ellipsis.component';
-import { HlmBreadcrumbItemDirective } from './lib/breadcrumb-item.directive';
-import { HlmBreadcrumbLinkDirective } from './lib/breadcrumb-link.directive';
-import { HlmBreadcrumbListDirective } from './lib/breadcrumb-list.directive';
-import { HlmBreadcrumbPageDirective } from './lib/breadcrumb-page.directive';
-import { HlmBreadcrumbSeparatorComponent } from './lib/breadcrumb-separator.component';
-import { HlmBreadcrumbDirective } from './lib/breadcrumb.directive';
+import { HlmBreadcrumbEllipsisComponent } from './lib/hlm-breadcrumb-ellipsis.component';
+import { HlmBreadcrumbItemDirective } from './lib/hlm-breadcrumb-item.directive';
+import { HlmBreadcrumbLinkDirective } from './lib/hlm-breadcrumb-link.directive';
+import { HlmBreadcrumbListDirective } from './lib/hlm-breadcrumb-list.directive';
+import { HlmBreadcrumbPageDirective } from './lib/hlm-breadcrumb-page.directive';
+import { HlmBreadcrumbSeparatorComponent } from './lib/hlm-breadcrumb-separator.component';
+import { HlmBreadcrumbDirective } from './lib/hlm-breadcrumb.directive';
 
-export * from './lib/breadcrumb-ellipsis.component';
-export * from './lib/breadcrumb-item.directive';
-export * from './lib/breadcrumb-link.directive';
-export * from './lib/breadcrumb-list.directive';
-export * from './lib/breadcrumb-page.directive';
-export * from './lib/breadcrumb-separator.component';
-export * from './lib/breadcrumb.directive';
+export * from './lib/hlm-breadcrumb-ellipsis.component';
+export * from './lib/hlm-breadcrumb-item.directive';
+export * from './lib/hlm-breadcrumb-link.directive';
+export * from './lib/hlm-breadcrumb-list.directive';
+export * from './lib/hlm-breadcrumb-page.directive';
+export * from './lib/hlm-breadcrumb-separator.component';
+export * from './lib/hlm-breadcrumb.directive';
 
 export const HlmBreadCrumbImports = [
 	HlmBreadcrumbDirective,

package/src/generators/ui/libs/ui-breadcrumb-helm/files/lib/{breadcrumb-ellipsis.component.ts.template → hlm-breadcrumb-ellipsis.component.ts.template}

@@ -1,4 +1,4 @@
-import { Component, computed, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideEllipsis } from '@ng-icons/lucide';
 import { hlm } from '@spartan-ng/brain/core';
@@ -15,6 +15,7 @@ import type { ClassValue } from 'clsx';
 			<span class="sr-only">More</span>
 		</span>
 	`,
+	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmBreadcrumbEllipsisComponent {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

package/src/generators/ui/libs/ui-breadcrumb-helm/files/lib/{breadcrumb-separator.component.ts.template → hlm-breadcrumb-separator.component.ts.template}

@@ -1,4 +1,4 @@
-import { Component, computed, input } from '@angular/core';
+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/brain/core';
@@ -19,6 +19,7 @@ import type { ClassValue } from 'clsx';
 			<ng-icon name="lucideChevronRight" />
 		</ng-content>
 	`,
+	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmBreadcrumbSeparatorComponent {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -1,5 +1,14 @@
 import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
-import { Component, booleanAttribute, computed, input, model, numberAttribute, viewChild } from '@angular/core';
+import {
+	ChangeDetectionStrategy,
+	Component,
+	booleanAttribute,
+	computed,
+	input,
+	model,
+	numberAttribute,
+	viewChild,
+} from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideChevronLeft, lucideChevronRight } from '@ng-icons/lucide';
 import {
@@ -109,6 +118,7 @@ import type { ClassValue } from 'clsx';
 			</div>
 		</div>
 	`,
+	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmCalendarMultiComponent<T> {
 	public readonly calendarClass = input<ClassValue>('');

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

@@ -1,5 +1,14 @@
 import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
-import { Component, booleanAttribute, computed, input, model, numberAttribute, viewChild } from '@angular/core';
+import {
+	ChangeDetectionStrategy,
+	Component,
+	booleanAttribute,
+	computed,
+	input,
+	model,
+	numberAttribute,
+	viewChild,
+} from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideChevronLeft, lucideChevronRight } from '@ng-icons/lucide';
 import {
@@ -107,6 +116,7 @@ import type { ClassValue } from 'clsx';
 			</div>
 		</div>
 	`,
+	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmCalendarComponent<T> {
 	public readonly calendarClass = input<ClassValue>('');

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

@@ -1,4 +1,14 @@
-import { Component, booleanAttribute, computed, forwardRef, input, model, output, signal } from '@angular/core';
+import {
+	ChangeDetectionStrategy,
+	Component,
+	booleanAttribute,
+	computed,
+	forwardRef,
+	input,
+	model,
+	output,
+	signal,
+} from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideCheck } from '@ng-icons/lucide';
@@ -43,6 +53,7 @@ export const HLM_CHECKBOX_VALUE_ACCESSOR = {
 	},
 	providers: [HLM_CHECKBOX_VALUE_ACCESSOR],
 	viewProviders: [provideIcons({ lucideCheck })],
+	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmCheckboxComponent implements ControlValueAccessor {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -1,4 +1,4 @@
-import { Component, computed, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/brain/core';
 
 @Component({
@@ -9,6 +9,7 @@ import { hlm } from '@spartan-ng/brain/core';
 		role: 'presentation',
 		'[class]': '_computedClass()',
 	},
+	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmCommandGroupLabelComponent {
 	/*** The user defined class  */

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

@@ -1,4 +1,4 @@
-import { Component, computed, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { BrnCommandGroupDirective } from '@spartan-ng/brain/command';
 import { hlm } from '@spartan-ng/brain/core';
 
@@ -15,6 +15,7 @@ import { hlm } from '@spartan-ng/brain/core';
 	host: {
 		'[class]': '_computedClass()',
 	},
+	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmCommandGroupComponent {
 	/*** The user defined class  */

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

@@ -1,5 +1,5 @@
 import { BooleanInput } from '@angular/cdk/coercion';
-import { booleanAttribute, Component, computed, input, output } from '@angular/core';
+import { booleanAttribute, ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';
 import { BrnCommandItemDirective } from '@spartan-ng/brain/command';
 import { hlm } from '@spartan-ng/brain/core';
 
@@ -19,6 +19,7 @@ import { hlm } from '@spartan-ng/brain/core';
 	host: {
 		'[class]': '_computedClass()',
 	},
+	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmCommandItemComponent {
 	/** The value this item represents. */

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

@@ -1,4 +1,4 @@
-import { Component, computed, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { BrnCommandListDirective } from '@spartan-ng/brain/command';
 import { hlm } from '@spartan-ng/brain/core';
 
@@ -15,6 +15,7 @@ import { hlm } from '@spartan-ng/brain/core';
 			inputs: ['id'],
 		},
 	],
+	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmCommandListComponent {
 	/** The user defined class  */

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

@@ -1,4 +1,4 @@
-import { Component, computed, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { BrnCommandSearchInputDirective } from '@spartan-ng/brain/command';
 import { hlm } from '@spartan-ng/brain/core';
 
@@ -10,6 +10,7 @@ import { hlm } from '@spartan-ng/brain/core';
 	host: {
 		'[class]': '_computedClass()',
 	},
+	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmCommandSearchInputComponent {
 	/*** The user defined class  */

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

@@ -1,4 +1,4 @@
-import { Component, computed, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/brain/core';
 import { provideHlmIconConfig } from '@spartan-ng/ui-icon-helm';
 
@@ -12,6 +12,7 @@ import { provideHlmIconConfig } from '@spartan-ng/ui-icon-helm';
 		'[class]': '_computedClass()',
 	},
 	providers: [provideHlmIconConfig({ size: 'sm' })],
+	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmCommandSearchComponent {
 	/*** The user defined class  */

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

@@ -1,4 +1,4 @@
-import { Component, computed, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/brain/core';
 
 @Component({
@@ -9,6 +9,7 @@ import { hlm } from '@spartan-ng/brain/core';
 		role: 'separator',
 		'[class]': '_computedClass()',
 	},
+	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmCommandSeparatorComponent {
 	/*** The user defined class  */

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

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
 	standalone: true,
@@ -7,5 +7,6 @@ import { Component } from '@angular/core';
 	host: {
 		class: 'font-light ml-auto opacity-60 text-xs tracking-widest',
 	},
+	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmCommandShortcutComponent {}

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

@@ -1,4 +1,4 @@
-import { Component, computed, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { BrnCommandDirective } from '@spartan-ng/brain/command';
 import { hlm } from '@spartan-ng/brain/core';
 
@@ -18,6 +18,7 @@ import { hlm } from '@spartan-ng/brain/core';
 	host: {
 		'[class]': '_computedClass()',
 	},
+	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmCommandComponent {
 	/*** The user defined class */

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

@@ -1,6 +1,7 @@
 import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
 import {
 	booleanAttribute,
+	ChangeDetectionStrategy,
 	Component,
 	computed,
 	forwardRef,
@@ -72,6 +73,7 @@ export const HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR = {
 	host: {
 		class: 'block',
 	},
+	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmDatePickerMultiComponent<T> {
 	private readonly _config = injectHlmDatePickerMultiConfig<T>();

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

@@ -1,5 +1,15 @@
 import { BooleanInput } from '@angular/cdk/coercion';
-import { booleanAttribute, Component, computed, forwardRef, input, model, output, signal } from '@angular/core';
+import {
+	booleanAttribute,
+	ChangeDetectionStrategy,
+	Component,
+	computed,
+	forwardRef,
+	input,
+	model,
+	output,
+	signal,
+} from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideCalendar } from '@ng-icons/lucide';
@@ -60,6 +70,7 @@ export const HLM_DATE_PICKER_VALUE_ACCESSOR = {
 	host: {
 		class: 'block',
 	},
+	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmDatePickerComponent<T> {
 	private readonly _config = injectHlmDatePickerConfig<T>();

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

@@ -1,4 +1,4 @@
-import { Component, computed, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/brain/core';
 import type { ClassValue } from 'clsx';
 
@@ -11,6 +11,7 @@ import type { ClassValue } from 'clsx';
 	host: {
 		'[class]': '_computedClass()',
 	},
+	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmDialogFooterComponent {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -1,4 +1,4 @@
-import { Component, computed, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/brain/core';
 import type { ClassValue } from 'clsx';
 
@@ -11,6 +11,7 @@ import type { ClassValue } from 'clsx';
 	host: {
 		'[class]': '_computedClass()',
 	},
+	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmDialogHeaderComponent {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -1,4 +1,4 @@
-import { Component, computed, contentChild, contentChildren, effect } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, contentChild, contentChildren, effect } from '@angular/core';
 import { BrnFormFieldControl } from '@spartan-ng/brain/form-field';
 import { HlmErrorDirective } from './hlm-error.directive';
 
@@ -20,6 +20,7 @@ import { HlmErrorDirective } from './hlm-error.directive';
 	host: {
 		class: 'space-y-2 block',
 	},
+	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmFormFieldComponent {
 	public readonly control = contentChild(BrnFormFieldControl);

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

@@ -1,4 +1,14 @@
-import { Component, ElementRef, Renderer2, computed, effect, inject, input, signal } from '@angular/core';
+import {
+	ChangeDetectionStrategy,
+	Component,
+	ElementRef,
+	Renderer2,
+	computed,
+	effect,
+	inject,
+	input,
+	signal,
+} from '@angular/core';
 import { hlm, injectExposedSideProvider, injectExposesStateProvider } from '@spartan-ng/brain/core';
 import type { ClassValue } from 'clsx';
 
@@ -11,6 +21,7 @@ import type { ClassValue } from 'clsx';
 	template: `
 		<ng-content />
 	`,
+	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmHoverCardContentComponent {
 	private readonly _renderer = inject(Renderer2);

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

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
 	selector: 'hlm-input-otp-fake-caret',
@@ -8,5 +8,6 @@ import { Component } from '@angular/core';
 			<div class="animate-caret-blink bg-foreground h-4 w-px duration-1000"></div>
 		</div>
 	`,
+	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmInputOtpFakeCaretComponent {}

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

@@ -1,4 +1,4 @@
-import { Component, computed, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideDot } from '@ng-icons/lucide';
 import { hlm } from '@spartan-ng/brain/core';
@@ -16,6 +16,7 @@ import { type ClassValue } from 'clsx';
 		role: 'separator',
 		'[class]': '_computedClass()',
 	},
+	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmInputOtpSeparatorComponent {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -1,5 +1,5 @@
 import { NumberInput } from '@angular/cdk/coercion';
-import { Component, computed, input, numberAttribute } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input, numberAttribute } from '@angular/core';
 import { hlm } from '@spartan-ng/brain/core';
 import { BrnInputOtpSlotComponent } from '@spartan-ng/brain/input-otp';
 import { type ClassValue } from 'clsx';
@@ -16,6 +16,7 @@ import { HlmInputOtpFakeCaretComponent } from './hlm-input-otp-fake-caret.compon
 	host: {
 		'[class]': '_computedClass()',
 	},
+	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmInputOtpSlotComponent {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -1,4 +1,4 @@
-import { Component, computed, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/brain/core';
 import { BrnMenuBarDirective } from '@spartan-ng/brain/menu';
 import type { ClassValue } from 'clsx';
@@ -11,6 +11,7 @@ import type { ClassValue } from 'clsx';
 	},
 	hostDirectives: [BrnMenuBarDirective],
 	template: '<ng-content/>',
+	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmMenuBarComponent {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { BrnMenuGroupDirective } from '@spartan-ng/brain/menu';
 
 @Component({
@@ -11,5 +11,6 @@ import { BrnMenuGroupDirective } from '@spartan-ng/brain/menu';
 	template: `
 		<ng-content />
 	`,
+	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmMenuGroupComponent {}

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

@@ -1,4 +1,4 @@
-import { Component, computed, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideCheck } from '@ng-icons/lucide';
 import { hlm } from '@spartan-ng/brain/core';
@@ -16,6 +16,7 @@ import type { ClassValue } from 'clsx';
 	host: {
 		'[class]': '_computedClass()',
 	},
+	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmMenuItemCheckComponent {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -1,4 +1,4 @@
-import { Component, computed, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideCircle } from '@ng-icons/lucide';
 import { hlm } from '@spartan-ng/brain/core';
@@ -16,6 +16,7 @@ import type { ClassValue } from 'clsx';
 	host: {
 		'[class]': '_computedClass()',
 	},
+	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmMenuItemRadioComponent {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -1,4 +1,4 @@
-import { Component, computed, input } from '@angular/core';
+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/brain/core';
@@ -15,6 +15,7 @@ import type { ClassValue } from 'clsx';
 	host: {
 		'[class]': '_computedClass()',
 	},
+	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmMenuItemSubIndicatorComponent {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -1,4 +1,4 @@
-import { Component, Input, booleanAttribute, computed, input, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, booleanAttribute, computed, input, signal } from '@angular/core';
 import { hlm } from '@spartan-ng/brain/core';
 import type { ClassValue } from 'clsx';
 
@@ -11,6 +11,7 @@ import type { ClassValue } from 'clsx';
 	host: {
 		'[class]': '_computedClass()',
 	},
+	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmMenuLabelComponent {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -1,4 +1,4 @@
-import { Component, computed, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/brain/core';
 import type { ClassValue } from 'clsx';
 
@@ -9,6 +9,7 @@ import type { ClassValue } from 'clsx';
 	host: {
 		'[class]': '_computedClass()',
 	},
+	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmMenuSeparatorComponent {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -1,4 +1,4 @@
-import { Component, computed, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/brain/core';
 import type { ClassValue } from 'clsx';
 
@@ -11,6 +11,7 @@ import type { ClassValue } from 'clsx';
 	host: {
 		'[class]': '_computedClass()',
 	},
+	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmMenuShortcutComponent {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -1,4 +1,4 @@
-import { Component, Input, computed, input, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, computed, input, signal } from '@angular/core';
 import { hlm } from '@spartan-ng/brain/core';
 import { BrnMenuDirective } from '@spartan-ng/brain/menu';
 import { type VariantProps, cva } from 'class-variance-authority';
@@ -30,6 +30,7 @@ type MenuVariants = VariantProps<typeof menuVariants>;
 	template: `
 		<ng-content />
 	`,
+	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmMenuComponent {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -1,4 +1,4 @@
-import { Component, computed, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/brain/core';
 import { BrnMenuDirective } from '@spartan-ng/brain/menu';
 import type { ClassValue } from 'clsx';
@@ -13,6 +13,7 @@ import type { ClassValue } from 'clsx';
 	template: `
 		<ng-content />
 	`,
+	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmSubMenuComponent {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -1,4 +1,4 @@
-import { Component, computed, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideEllipsis } from '@ng-icons/lucide';
 import { hlm } from '@spartan-ng/brain/core';
@@ -15,6 +15,7 @@ import { ClassValue } from 'clsx';
 			<span class="sr-only">More pages</span>
 		</span>
 	`,
+	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmPaginationEllipsisComponent {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -1,5 +1,5 @@
 import { BooleanInput } from '@angular/cdk/coercion';
-import { booleanAttribute, Component, computed, input } from '@angular/core';
+import { booleanAttribute, ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideChevronRight } from '@ng-icons/lucide';
@@ -27,6 +27,7 @@ import { HlmPaginationLinkDirective } from './hlm-pagination-link.directive';
 			<ng-icon hlm size="sm" name="lucideChevronRight" />
 		</a>
 	`,
+	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmPaginationNextComponent {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -1,5 +1,5 @@
 import { BooleanInput } from '@angular/cdk/coercion';
-import { booleanAttribute, Component, computed, input } from '@angular/core';
+import { booleanAttribute, ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideChevronLeft } from '@ng-icons/lucide';
@@ -27,6 +27,7 @@ import { HlmPaginationLinkDirective } from './hlm-pagination-link.directive';
 			<span [class.sr-only]="iconOnly()">{{ text() }}</span>
 		</a>
 	`,
+	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmPaginationPreviousComponent {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });