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

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

@@ -5,9 +5,7 @@ import type { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-command',
-	template: `
-		<ng-content />
-	`,
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	hostDirectives: [
 		{
 			directive: BrnCommand,
@@ -18,7 +16,9 @@ import type { ClassValue } from 'clsx';
 	host: {
 		'[class]': '_computedClass()',
 	},
-	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: `
+		<ng-content />
+	`,
 })
 export class HlmCommand {
 	/** The user defined class */

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

@@ -36,6 +36,10 @@ let nextId = 0;
 	selector: 'hlm-date-picker-multi',
 	imports: [NgIcon, HlmIcon, BrnPopover, BrnPopoverTrigger, BrnPopoverContent, HlmPopoverContent, HlmCalendarMulti],
 	providers: [HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR, provideIcons({ lucideChevronDown })],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: {
+		class: 'block',
+	},
 	template: `
 		<brn-popover sideOffset="5" [state]="_popoverState()" (stateChanged)="_popoverState.set($event)">
 			<button
@@ -71,10 +75,6 @@ let nextId = 0;
 			</div>
 		</brn-popover>
 	`,
-	host: {
-		class: 'block',
-	},
-	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmDatePickerMulti<T> implements ControlValueAccessor {
 	private readonly _config = injectHlmDatePickerMultiConfig<T>();

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

@@ -35,6 +35,10 @@ let nextId = 0;
 	selector: 'hlm-date-picker',
 	imports: [NgIcon, HlmIcon, BrnPopover, BrnPopoverTrigger, BrnPopoverContent, HlmPopoverContent, HlmCalendar],
 	providers: [HLM_DATE_PICKER_VALUE_ACCESSOR, provideIcons({ lucideChevronDown })],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: {
+		class: 'block',
+	},
 	template: `
 		<brn-popover sideOffset="5" [state]="_popoverState()" (stateChanged)="_popoverState.set($event)">
 			<button
@@ -68,10 +72,6 @@ let nextId = 0;
 			</div>
 		</brn-popover>
 	`,
-	host: {
-		class: 'block',
-	},
-	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmDatePicker<T> implements ControlValueAccessor {
 	private readonly _config = injectHlmDatePickerConfig<T>();

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

@@ -36,6 +36,10 @@ let nextId = 0;
 	selector: 'hlm-date-range-picker',
 	imports: [NgIcon, HlmIcon, BrnPopover, BrnPopoverTrigger, BrnPopoverContent, HlmPopoverContent, HlmCalendarRange],
 	providers: [HLM_DATE_RANGE_PICKER_VALUE_ACCESSOR, provideIcons({ lucideChevronDown })],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: {
+		class: 'block',
+	},
 	template: `
 		<brn-popover
 			sideOffset="5"
@@ -76,10 +80,6 @@ let nextId = 0;
 			</div>
 		</brn-popover>
 	`,
-	host: {
-		class: 'block',
-	},
-	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmDateRangePicker<T> implements ControlValueAccessor {
 	private readonly _config = injectHlmDateRangePickerConfig<T>();

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

@@ -12,6 +12,7 @@ import { HlmDialogClose } from './hlm-dialog-close';
 	selector: 'hlm-dialog-content',
 	imports: [NgComponentOutlet, BrnDialogClose, HlmDialogClose, NgIcon, HlmIcon],
 	providers: [provideIcons({ lucideX })],
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
 		'[class]': '_computedClass()',
 		'[attr.data-state]': 'state()',
@@ -28,7 +29,6 @@ import { HlmDialogClose } from './hlm-dialog-close';
 			<ng-icon hlm size="sm" name="lucideX" />
 		</button>
 	`,
-	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmDialogContent {
 	private readonly _dialogRef = inject(BrnDialogRef);

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

@@ -5,10 +5,10 @@ import type { ClassValue } from 'clsx';
 
 @Directive({
 	selector: '[hlmDialogDescription]',
+	hostDirectives: [BrnDialogDescription],
 	host: {
 		'[class]': '_computedClass()',
 	},
-	hostDirectives: [BrnDialogDescription],
 })
 export class HlmDialogDescription {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -4,13 +4,13 @@ import type { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-dialog-footer',
-	template: `
-		<ng-content />
-	`,
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
 		'[class]': '_computedClass()',
 	},
-	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: `
+		<ng-content />
+	`,
 })
 export class HlmDialogFooter {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -4,13 +4,13 @@ import type { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-dialog-header',
-	template: `
-		<ng-content />
-	`,
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
 		'[class]': '_computedClass()',
 	},
-	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: `
+		<ng-content />
+	`,
 })
 export class HlmDialogHeader {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -4,6 +4,7 @@ import { HlmDialogOverlay } from './hlm-dialog-overlay';
 
 @Component({
 	selector: 'hlm-dialog',
+	exportAs: 'hlmDialog',
 	imports: [BrnDialogOverlay, HlmDialogOverlay],
 	providers: [
 		{
@@ -14,11 +15,10 @@ import { HlmDialogOverlay } from './hlm-dialog-overlay';
 			// add custom options here
 		}),
 	],
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	template: `
 		<brn-dialog-overlay hlm />
 		<ng-content />
 	`,
-	changeDetection: ChangeDetectionStrategy.OnPush,
-	exportAs: 'hlmDialog',
 })
 export class HlmDialog extends BrnDialog {}

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

@@ -4,6 +4,7 @@ import { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-field-error',
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	template: `
 		<div role="alert" data-slot="field-error" [class]="_computedClass()">
 			<ng-content>
@@ -21,7 +22,6 @@ import { ClassValue } from 'clsx';
 			</ng-content>
 		</div>
 	`,
-	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmFieldError {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -6,6 +6,7 @@ import { ClassValue } from 'clsx';
 @Component({
 	selector: 'hlm-field-separator',
 	imports: [HlmSeparator],
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
 		'data-slot': 'field-separator',
 		'[class]': '_computedClass()',
@@ -19,7 +20,6 @@ import { ClassValue } from 'clsx';
 			<ng-content />
 		</span>
 	`,
-	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmFieldSeparator {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -14,6 +14,10 @@ import { HlmError } from './hlm-error';
 
 @Component({
 	selector: 'hlm-form-field',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: {
+		'[class]': '_computedClass()',
+	},
 	template: `
 		<ng-content />
 
@@ -26,10 +30,6 @@ import { HlmError } from './hlm-error';
 			}
 		}
 	`,
-	host: {
-		'[class]': '_computedClass()',
-	},
-	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmFormField {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -15,13 +15,13 @@ import type { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-hover-card-content',
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
 		'[class]': '_computedClass()',
 	},
 	template: `
 		<ng-content />
 	`,
-	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmHoverCardContent {
 	private readonly _renderer = inject(Renderer2);

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

@@ -36,15 +36,15 @@ type InputVariants = VariantProps<typeof inputVariants>;
 
 @Directive({
 	selector: '[hlmInput]',
-	host: {
-		'[class]': '_computedClass()',
-	},
 	providers: [
 		{
 			provide: BrnFormFieldControl,
 			useExisting: forwardRef(() => HlmInput),
 		},
 	],
+	host: {
+		'[class]': '_computedClass()',
+	},
 })
 export class HlmInput implements BrnFormFieldControl, DoCheck {
 	private readonly _injector = inject(Injector);

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

@@ -2,11 +2,11 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
 	selector: 'hlm-input-otp-fake-caret',
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	template: `
 		<div class="pointer-events-none absolute inset-0 flex items-center justify-center">
 			<div class="animate-caret-blink bg-foreground h-4 w-px duration-1000"></div>
 		</div>
 	`,
-	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmInputOtpFakeCaret {}

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

@@ -9,15 +9,15 @@ import type { ClassValue } from 'clsx';
 	selector: 'hlm-input-otp-separator',
 	imports: [HlmIcon, NgIcon],
 	providers: [provideIcons({ lucideMinus })],
-	template: `
-		<ng-icon hlm name="lucideMinus" />
-	`,
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
 		role: 'separator',
 		'data-slot': 'input-otp-separator',
 		'[class]': '_computedClass()',
 	},
-	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: `
+		<ng-icon hlm name="lucideMinus" />
+	`,
 })
 export class HlmInputOtpSeparator {
 	public readonly userClass = input<ClassValue>('inline-flex', { alias: 'class' });

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

@@ -8,16 +8,16 @@ import { HlmInputOtpFakeCaret } from './hlm-input-otp-fake-caret';
 @Component({
 	selector: 'hlm-input-otp-slot',
 	imports: [BrnInputOtpSlot, HlmInputOtpFakeCaret],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: {
+		'data-slot': 'input-otp-slot',
+		'[class]': '_computedClass()',
+	},
 	template: `
 		<brn-input-otp-slot [index]="index()">
 			<hlm-input-otp-fake-caret />
 		</brn-input-otp-slot>
 	`,
-	host: {
-		'data-slot': 'input-otp-slot',
-		'[class]': '_computedClass()',
-	},
-	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmInputOtpSlot {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -5,10 +5,10 @@ import type { ClassValue } from 'clsx';
 
 @Directive({
 	selector: '[hlmMenuBarItem]',
+	hostDirectives: [BrnMenuItem],
 	host: {
 		'[class]': '_computedClass()',
 	},
-	hostDirectives: [BrnMenuItem],
 })
 export class HlmMenuBarItem {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -5,12 +5,12 @@ import type { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-menu-bar',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [BrnMenuBar],
 	host: {
 		'[class]': '_computedClass()',
 	},
-	hostDirectives: [BrnMenuBar],
 	template: '<ng-content/>',
-	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmMenuBar {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -3,13 +3,13 @@ import { BrnMenuGroup } from '@spartan-ng/brain/menu';
 
 @Component({
 	selector: 'hlm-menu-group',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [BrnMenuGroup],
 	host: {
 		class: 'block',
 	},
-	hostDirectives: [BrnMenuGroup],
 	template: `
 		<ng-content />
 	`,
-	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmMenuGroup {}

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

@@ -7,16 +7,16 @@ import type { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-menu-item-check',
-	providers: [provideIcons({ lucideCheck })],
 	imports: [NgIcon, HlmIcon],
+	providers: [provideIcons({ lucideCheck })],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: {
+		'[class]': '_computedClass()',
+	},
 	template: `
 		<!-- Using 1rem for size to mimick h-4 w-4 -->
 		<ng-icon hlm size="1rem" name="lucideCheck" />
 	`,
-	host: {
-		'[class]': '_computedClass()',
-	},
-	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmMenuItemCheck {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -5,9 +5,6 @@ import type { ClassValue } from 'clsx';
 
 @Directive({
 	selector: '[hlmMenuItemCheckbox]',
-	host: {
-		'[class]': '_computedClass()',
-	},
 	hostDirectives: [
 		{
 			directive: BrnMenuItemCheckbox,
@@ -15,6 +12,9 @@ import type { ClassValue } from 'clsx';
 			outputs: ['triggered: triggered'],
 		},
 	],
+	host: {
+		'[class]': '_computedClass()',
+	},
 })
 export class HlmMenuItemCheckbox {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -7,16 +7,16 @@ import type { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-menu-item-radio',
-	providers: [provideIcons({ lucideCircle })],
 	imports: [NgIcon, HlmIcon],
+	providers: [provideIcons({ lucideCircle })],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: {
+		'[class]': '_computedClass()',
+	},
 	template: `
 		<!-- Using 0.5rem for size to mimick h-2 w-2 -->
 		<ng-icon hlm size="0.5rem" class="*:*:fill-current" name="lucideCircle" />
 	`,
-	host: {
-		'[class]': '_computedClass()',
-	},
-	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmMenuItemRadioIndicator {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -5,9 +5,6 @@ import type { ClassValue } from 'clsx';
 
 @Directive({
 	selector: '[hlmMenuItemRadio]',
-	host: {
-		'[class]': '_computedClass()',
-	},
 	hostDirectives: [
 		{
 			directive: BrnMenuItemRadio,
@@ -15,6 +12,9 @@ import type { ClassValue } from 'clsx';
 			outputs: ['triggered: triggered'],
 		},
 	],
+	host: {
+		'[class]': '_computedClass()',
+	},
 })
 export class HlmMenuItemRadio {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -7,15 +7,15 @@ import type { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-menu-item-sub-indicator',
-	providers: [provideIcons({ lucideChevronRight })],
 	imports: [NgIcon, HlmIcon],
-	template: `
-		<ng-icon hlm size="sm" name="lucideChevronRight" class="text-popover-foreground" />
-	`,
+	providers: [provideIcons({ lucideChevronRight })],
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
 		'[class]': '_computedClass()',
 	},
-	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: `
+		<ng-icon hlm size="sm" name="lucideChevronRight" class="text-popover-foreground" />
+	`,
 })
 export class HlmMenuItemSubIndicator {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -6,11 +6,6 @@ import type { ClassValue } from 'clsx';
 
 @Directive({
 	selector: '[hlmMenuItem]',
-	host: {
-		'[class]': '_computedClass()',
-		'[attr.data-variant]': 'variant()',
-		'[attr.data-inset]': 'inset() ? "" : null',
-	},
 	hostDirectives: [
 		{
 			directive: BrnMenuItem,
@@ -18,6 +13,11 @@ import type { ClassValue } from 'clsx';
 			outputs: ['triggered: triggered'],
 		},
 	],
+	host: {
+		'[class]': '_computedClass()',
+		'[attr.data-variant]': 'variant()',
+		'[attr.data-inset]': 'inset() ? "" : null',
+	},
 })
 export class HlmMenuItem {
 	public readonly variant = input<'default' | 'destructive'>('default');

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

@@ -5,14 +5,14 @@ import type { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-menu-label',
-	template: `
-		<ng-content />
-	`,
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
 		'[class]': '_computedClass()',
 		'[attr.data-inset]': 'inset() ? "" : null',
 	},
-	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: `
+		<ng-content />
+	`,
 })
 export class HlmMenuLabel {
 	public readonly inset = input<boolean, BooleanInput>(false, {

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

@@ -4,11 +4,11 @@ import type { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-menu-separator',
-	template: '',
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
 		'[class]': '_computedClass()',
 	},
-	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: '',
 })
 export class HlmMenuSeparator {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -4,13 +4,13 @@ import type { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-menu-shortcut',
-	template: `
-		<ng-content />
-	`,
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
 		'[class]': '_computedClass()',
 	},
-	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: `
+		<ng-content />
+	`,
 })
 export class HlmMenuShortcut {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -22,14 +22,14 @@ type MenuVariants = VariantProps<typeof menuVariants>;
 
 @Component({
 	selector: 'hlm-menu',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [BrnMenu],
 	host: {
 		'[class]': '_computedClass()',
 	},
-	hostDirectives: [BrnMenu],
 	template: `
 		<ng-content />
 	`,
-	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmMenu {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -5,14 +5,14 @@ import type { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-sub-menu',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [BrnMenu],
 	host: {
 		'[class]': '_computedClass()',
 	},
-	hostDirectives: [BrnMenu],
 	template: `
 		<ng-content />
 	`,
-	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmSubMenu {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

package/src/generators/ui/libs/navigation-menu/files/hlm-navigation-menu-item.ts.template

@@ -5,10 +5,10 @@ import { ClassValue } from 'clsx';
 
 @Directive({
 	selector: 'li[hlmNavigationMenuItem]',
+	hostDirectives: [{ directive: BrnNavigationMenuItem, inputs: ['id'] }],
 	host: {
 		'[class]': '_computedClass()',
 	},
-	hostDirectives: [{ directive: BrnNavigationMenuItem, inputs: ['id'] }],
 })
 export class HlmNavigationMenuItem {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

package/src/generators/ui/libs/navigation-menu/files/hlm-navigation-menu-link.ts.template

@@ -5,10 +5,10 @@ import { ClassValue } from 'clsx';
 
 @Directive({
 	selector: 'a[hlmNavigationMenuLink]',
+	hostDirectives: [{ directive: BrnNavigationMenuLink, inputs: ['active'] }],
 	host: {
 		'[class]': '_computedClass()',
 	},
-	hostDirectives: [{ directive: BrnNavigationMenuLink, inputs: ['active'] }],
 })
 export class HlmNavigationMenuLink {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

package/src/generators/ui/libs/navigation-menu/files/hlm-navigation-menu-list.ts.template

@@ -5,14 +5,14 @@ import { ClassValue } from 'clsx';
 
 @Directive({
 	selector: 'ul[hlmNavigationMenuList]',
-	host: {
-		'[class]': '_computedClass()',
-	},
 	hostDirectives: [
 		{
 			directive: BrnNavigationMenuList,
 		},
 	],
+	host: {
+		'[class]': '_computedClass()',
+	},
 })
 export class HlmNavigationMenuList {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

package/src/generators/ui/libs/navigation-menu/files/hlm-navigation-menu-trigger.ts.template

@@ -5,10 +5,10 @@ import { ClassValue } from 'clsx';
 
 @Directive({
 	selector: 'button[hlmNavigationMenuTrigger]',
+	hostDirectives: [BrnNavigationMenuTrigger],
 	host: {
 		'[class]': '_computedClass()',
 	},
-	hostDirectives: [BrnNavigationMenuTrigger],
 })
 export class HlmNavigationMenuTrigger {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });