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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spartan-ng/cli",
-  "version": "0.0.1-alpha.557",
+  "version": "0.0.1-alpha.558",
   "type": "commonjs",
   "dependencies": {
     "@angular/core": ">=19.0.0",

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

@@ -6,10 +6,10 @@ import type { ClassValue } from 'clsx';
 @Component({
 	selector: 'hlm-accordion-content',
 	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [{ directive: BrnAccordionContent, inputs: ['style'] }],
 	host: {
 		'[class]': '_computedClass()',
 	},
-	hostDirectives: [{ directive: BrnAccordionContent, inputs: ['style'] }],
 	template: `
 		<div class="flex flex-col gap-4 pt-0 pb-4 text-balance">
 			<ng-content />

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

@@ -5,9 +5,6 @@ import type { ClassValue } from 'clsx';
 
 @Directive({
 	selector: '[hlmAccordionItem],brn-accordion-item[hlm],hlm-accordion-item',
-	host: {
-		'[class]': '_computedClass()',
-	},
 	hostDirectives: [
 		{
 			directive: BrnAccordionItem,
@@ -15,6 +12,9 @@ import type { ClassValue } from 'clsx';
 			outputs: ['openedChange'],
 		},
 	],
+	host: {
+		'[class]': '_computedClass()',
+	},
 })
 export class HlmAccordionItem {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -5,11 +5,11 @@ import type { ClassValue } from 'clsx';
 
 @Directive({
 	selector: '[hlmAccordionTrigger]',
+	hostDirectives: [BrnAccordionTrigger],
 	host: {
 		'[style.--tw-ring-offset-shadow]': '"0 0 #000"',
 		'[class]': '_computedClass()',
 	},
-	hostDirectives: [BrnAccordionTrigger],
 })
 export class HlmAccordionTrigger {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -5,10 +5,10 @@ import type { ClassValue } from 'clsx';
 
 @Directive({
 	selector: '[hlmAccordion], hlm-accordion',
+	hostDirectives: [{ directive: BrnAccordion, inputs: ['type', 'dir', 'orientation'] }],
 	host: {
 		'[class]': '_computedClass()',
 	},
-	hostDirectives: [{ directive: BrnAccordion, inputs: ['type', 'dir', 'orientation'] }],
 })
 export class HlmAccordion {
 	private readonly _brn = inject(BrnAccordion);

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

@@ -3,7 +3,7 @@ import { HlmButton, provideBrnButtonConfig } from '<%- importAlias %>/button';
 
 @Directive({
 	selector: 'button[hlmAlertDialogCancel]',
-	hostDirectives: [{ directive: HlmButton, inputs: ['variant', 'size'] }],
 	providers: [provideBrnButtonConfig({ variant: 'outline' })],
+	hostDirectives: [{ directive: HlmButton, inputs: ['variant', 'size'] }],
 })
 export class HlmAlertDialogCancelButton {}

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

@@ -5,6 +5,7 @@ import type { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-alert-dialog-content',
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
 		'[class]': '_computedClass()',
 		'[attr.data-state]': 'state()',
@@ -12,7 +13,6 @@ import type { ClassValue } from 'clsx';
 	template: `
 		<ng-content />
 	`,
-	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmAlertDialogContent {
 	private readonly _stateProvider = injectExposesStateProvider({ optional: true, host: true });

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

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

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

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

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

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

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

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

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

@@ -9,10 +9,8 @@ import { HlmAlertDialogOverlay } from './hlm-alert-dialog-overlay';
 
 @Component({
 	selector: 'hlm-alert-dialog',
-	template: `
-		<brn-alert-dialog-overlay hlm />
-		<ng-content />
-	`,
+	exportAs: 'hlmAlertDialog',
+	imports: [BrnAlertDialogOverlay, HlmAlertDialogOverlay],
 	providers: [
 		{
 			provide: BrnDialog,
@@ -23,7 +21,9 @@ import { HlmAlertDialogOverlay } from './hlm-alert-dialog-overlay';
 		}),
 	],
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	exportAs: 'hlmAlertDialog',
-	imports: [BrnAlertDialogOverlay, HlmAlertDialogOverlay],
+	template: `
+		<brn-alert-dialog-overlay hlm />
+		<ng-content />
+	`,
 })
 export class HlmAlertDialog extends BrnAlertDialog {}

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

@@ -4,7 +4,7 @@ import { hlm } from '<%- importAlias %>/utils';
 
 @Component({
 	selector: 'hlm-autocomplete-group',
-	template: '<ng-content />',
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	hostDirectives: [
 		{
 			directive: BrnAutocompleteGroup,
@@ -14,7 +14,7 @@ import { hlm } from '<%- importAlias %>/utils';
 	host: {
 		'[class]': '_computedClass()',
 	},
-	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: '<ng-content />',
 })
 export class HlmAutocompleteGroup {
 	/** The user defined class  */

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

@@ -4,9 +4,7 @@ import { hlm } from '<%- importAlias %>/utils';
 
 @Component({
 	selector: 'button[hlm-autocomplete-item]',
-	template: `
-		<ng-content />
-	`,
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	hostDirectives: [
 		{
 			directive: BrnAutocompleteItem,
@@ -17,7 +15,9 @@ import { hlm } from '<%- importAlias %>/utils';
 	host: {
 		'[class]': '_computedClass()',
 	},
-	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: `
+		<ng-content />
+	`,
 })
 export class HlmAutocompleteItem {
 	/** The user defined class  */

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

@@ -4,17 +4,17 @@ import { hlm } from '<%- importAlias %>/utils';
 
 @Component({
 	selector: 'hlm-autocomplete-list',
-	template: '<ng-content />',
-	host: {
-		'[class]': '_computedClass()',
-	},
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	hostDirectives: [
 		{
 			directive: BrnAutocompleteList,
 			inputs: ['id'],
 		},
 	],
-	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: {
+		'[class]': '_computedClass()',
+	},
+	template: '<ng-content />',
 })
 export class HlmAutocompleteList {
 	/** The user defined class  */

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

@@ -44,7 +44,6 @@ export const HLM_AUTOCOMPLETE_VALUE_ACCESSOR = {
 
 @Component({
 	selector: 'hlm-autocomplete',
-	changeDetection: ChangeDetectionStrategy.OnPush,
 	imports: [
 		NgTemplateOutlet,
 		BrnAutocomplete,
@@ -61,6 +60,7 @@ export const HLM_AUTOCOMPLETE_VALUE_ACCESSOR = {
 		BrnAutocompleteImports,
 	],
 	providers: [HLM_AUTOCOMPLETE_VALUE_ACCESSOR, provideIcons({ lucideSearch, lucideChevronDown, lucideCircleX })],
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
 		'[class]': '_computedClass()',
 	},

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

@@ -9,13 +9,13 @@ import type { ClassValue } from 'clsx';
 	selector: 'hlm-breadcrumb-ellipsis',
 	imports: [NgIcon, HlmIcon],
 	providers: [provideIcons({ lucideEllipsis })],
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	template: `
 		<span role="presentation" aria-hidden="true" [class]="_computedClass()">
 			<ng-icon hlm size="sm" name="lucideEllipsis" />
 			<span class="sr-only">{{ srOnlyText() }}</span>
 		</span>
 	`,
-	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmBreadcrumbEllipsis {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -9,6 +9,7 @@ import type { ClassValue } from 'clsx';
 	selector: '[hlmBreadcrumbSeparator]',
 	imports: [NgIcon],
 	providers: [provideIcons({ lucideChevronRight })],
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
 		role: 'presentation',
 		'aria-hidden': 'true',
@@ -19,7 +20,6 @@ import type { ClassValue } from 'clsx';
 			<ng-icon name="lucideChevronRight" />
 		</ng-content>
 	`,
-	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmBreadcrumbSeparator {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -5,8 +5,8 @@ import type { ClassValue } from 'clsx';
 
 @Directive({
 	selector: '[hlmButtonGroupSeparator],hlm-button-group-separator',
-	hostDirectives: [{ directive: BrnSeparator, inputs: ['orientation', 'decorative'] }],
 	providers: [provideBrnSeparatorConfig({ orientation: 'vertical' })],
+	hostDirectives: [{ directive: BrnSeparator, inputs: ['orientation', 'decorative'] }],
 	host: {
 		'data-slot': 'button-group-separator',
 		'[class]': '_computedClass()',

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

@@ -25,6 +25,7 @@ import type { ClassValue } from 'clsx';
 	selector: 'hlm-calendar-multi',
 	imports: [BrnCalendarImports, NgIcon, HlmIcon, NgTemplateOutlet, BrnSelectImports, HlmSelectImports],
 	viewProviders: [provideIcons({ lucideChevronLeft, lucideChevronRight })],
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	template: `
 		<div
 			brnCalendarMulti
@@ -138,7 +139,6 @@ import type { ClassValue } from 'clsx';
 			</div>
 		</div>
 	`,
-	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmCalendarMulti<T> {
 	public readonly calendarClass = input<ClassValue>('');

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

@@ -25,6 +25,7 @@ import type { ClassValue } from 'clsx';
 	selector: 'hlm-calendar-range',
 	imports: [BrnCalendarImports, NgIcon, HlmIcon, HlmSelectImports, BrnSelectImports, NgTemplateOutlet],
 	viewProviders: [provideIcons({ lucideChevronLeft, lucideChevronRight })],
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	template: `
 		<div
 			brnCalendarRange
@@ -137,7 +138,6 @@ import type { ClassValue } from 'clsx';
 			</div>
 		</div>
 	`,
-	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmCalendarRange<T> {
 	public readonly calendarClass = input<ClassValue>('');

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

@@ -25,6 +25,7 @@ import type { ClassValue } from 'clsx';
 	selector: 'hlm-calendar',
 	imports: [BrnCalendarImports, NgIcon, HlmIcon, BrnSelectImports, HlmSelectImports, NgTemplateOutlet],
 	viewProviders: [provideIcons({ lucideChevronLeft, lucideChevronRight })],
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	template: `
 		<div
 			brnCalendar
@@ -136,7 +137,6 @@ import type { ClassValue } from 'clsx';
 			</div>
 		</div>
 	`,
-	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmCalendar<T> {
 	public readonly calendarClass = input<ClassValue>('');

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

@@ -9,14 +9,14 @@ import { HlmCarousel } from './hlm-carousel';
 
 @Component({
 	selector: 'button[hlm-carousel-next], button[hlmCarouselNext]',
+	imports: [NgIcon, HlmIcon],
+	providers: [provideIcons({ lucideArrowRight }), provideBrnButtonConfig({ variant: 'outline', size: 'icon' })],
 	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [{ directive: HlmButton, inputs: ['variant', 'size'] }],
 	host: {
 		'[disabled]': 'isDisabled()',
 		'(click)': '_carousel.scrollNext()',
 	},
-	hostDirectives: [{ directive: HlmButton, inputs: ['variant', 'size'] }],
-	providers: [provideIcons({ lucideArrowRight }), provideBrnButtonConfig({ variant: 'outline', size: 'icon' })],
-	imports: [NgIcon, HlmIcon],
 	template: `
 		<ng-icon hlm size="sm" name="lucideArrowRight" />
 		<span class="sr-only">Next slide</span>

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

@@ -9,14 +9,14 @@ import { HlmCarousel } from './hlm-carousel';
 
 @Component({
 	selector: 'button[hlm-carousel-previous], button[hlmCarouselPrevious]',
+	imports: [NgIcon, HlmIcon],
+	providers: [provideIcons({ lucideArrowLeft }), provideBrnButtonConfig({ variant: 'outline', size: 'icon' })],
 	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [{ directive: HlmButton, inputs: ['variant', 'size'] }],
 	host: {
 		'[disabled]': 'isDisabled()',
 		'(click)': '_carousel.scrollPrev()',
 	},
-	hostDirectives: [{ directive: HlmButton, inputs: ['variant', 'size'] }],
-	providers: [provideIcons({ lucideArrowLeft }), provideBrnButtonConfig({ variant: 'outline', size: 'icon' })],
-	imports: [NgIcon, HlmIcon],
 	template: `
 		<ng-icon hlm size="sm" name="lucideArrowLeft" />
 		<span class="sr-only">Previous slide</span>

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

@@ -5,14 +5,14 @@ import { HlmCarousel } from './hlm-carousel';
 
 @Component({
 	selector: 'hlm-carousel-slide-display',
-	template: `
-		<span class="sr-only">{{ _labelContent() }}</span>
-		<div aria-hidden="true" [class]="slideClass()">{{ _currentSlide() }} / {{ _carousel.slideCount() }}</div>
-	`,
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
 		'[class]': '_computedClass()',
 	},
+	template: `
+		<span class="sr-only">{{ _labelContent() }}</span>
+		<div aria-hidden="true" [class]="slideClass()">{{ _currentSlide() }} / {{ _carousel.slideCount() }}</div>
+	`,
 })
 export class HlmCarouselSlideDisplay {
 	protected readonly _carousel = inject(HlmCarousel);

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

@@ -19,6 +19,7 @@ import {
 
 @Component({
 	selector: 'hlm-carousel',
+	imports: [EmblaCarouselDirective],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
 		'[class]': '_computedClass()',
@@ -26,7 +27,6 @@ import {
 		'aria-roledescription': 'carousel',
 		'(keydown)': 'onKeydown($event)',
 	},
-	imports: [EmblaCarouselDirective],
 	template: `
 		<div
 			emblaCarousel

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

@@ -28,6 +28,17 @@ export const HLM_CHECKBOX_VALUE_ACCESSOR = {
 @Component({
 	selector: 'hlm-checkbox',
 	imports: [BrnCheckbox, NgIcon, HlmIcon],
+	providers: [HLM_CHECKBOX_VALUE_ACCESSOR],
+	viewProviders: [provideIcons({ lucideCheck })],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: {
+		class: 'contents peer',
+		'[attr.id]': 'null',
+		'[attr.aria-label]': 'null',
+		'[attr.aria-labelledby]': 'null',
+		'[attr.aria-describedby]': 'null',
+		'[attr.data-disabled]': '_disabled() ? "" : null',
+	},
 	template: `
 		<brn-checkbox
 			[id]="id()"
@@ -50,17 +61,6 @@ export const HLM_CHECKBOX_VALUE_ACCESSOR = {
 			}
 		</brn-checkbox>
 	`,
-	host: {
-		class: 'contents peer',
-		'[attr.id]': 'null',
-		'[attr.aria-label]': 'null',
-		'[attr.aria-labelledby]': 'null',
-		'[attr.aria-describedby]': 'null',
-		'[attr.data-disabled]': '_disabled() ? "" : null',
-	},
-	providers: [HLM_CHECKBOX_VALUE_ACCESSOR],
-	viewProviders: [provideIcons({ lucideCheck })],
-	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmCheckbox implements ControlValueAccessor {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -7,8 +7,8 @@ import type { ClassValue } from 'clsx';
 
 @Directive({
 	selector: '[hlmCommandDialogCloseBtn]',
-	hostDirectives: [HlmButton, BrnDialogClose],
 	providers: [provideBrnButtonConfig({ variant: 'ghost' }), provideHlmIconConfig({ size: 'xs' })],
+	hostDirectives: [HlmButton, BrnDialogClose],
 	host: {
 		'[class]': '_computedClass()',
 	},

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

@@ -3,12 +3,12 @@ import { hlm } from '<%- importAlias %>/utils';
 
 @Component({
 	selector: 'hlm-command-group-label',
-	template: '<ng-content />',
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
 		role: 'presentation',
 		'[class]': '_computedClass()',
 	},
-	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: '<ng-content />',
 })
 export class HlmCommandGroupLabel {
 	/** The user defined class  */

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

@@ -4,7 +4,7 @@ import { hlm } from '<%- importAlias %>/utils';
 
 @Component({
 	selector: 'hlm-command-group',
-	template: '<ng-content />',
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	hostDirectives: [
 		{
 			directive: BrnCommandGroup,
@@ -14,7 +14,7 @@ import { hlm } from '<%- importAlias %>/utils';
 	host: {
 		'[class]': '_computedClass()',
 	},
-	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: '<ng-content />',
 })
 export class HlmCommandGroup {
 	/** The user defined class  */

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

@@ -5,10 +5,10 @@ import type { ClassValue } from 'clsx';
 
 @Directive({
 	selector: '[hlmCommandIcon]',
+	providers: [provideHlmIconConfig({ size: 'sm' })],
 	host: {
 		'[class]': '_computedClass()',
 	},
-	providers: [provideHlmIconConfig({ size: 'sm' })],
 })
 export class HlmCommandIcon {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -4,9 +4,7 @@ import { hlm } from '<%- importAlias %>/utils';
 
 @Component({
 	selector: 'button[hlm-command-item]',
-	template: `
-		<ng-content />
-	`,
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	hostDirectives: [
 		{
 			directive: BrnCommandItem,
@@ -17,7 +15,9 @@ import { hlm } from '<%- importAlias %>/utils';
 	host: {
 		'[class]': '_computedClass()',
 	},
-	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: `
+		<ng-content />
+	`,
 })
 export class HlmCommandItem {
 	/** The user defined class  */

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

@@ -4,17 +4,17 @@ import { hlm } from '<%- importAlias %>/utils';
 
 @Component({
 	selector: 'hlm-command-list',
-	template: '<ng-content />',
-	host: {
-		'[class]': '_computedClass()',
-	},
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	hostDirectives: [
 		{
 			directive: BrnCommandList,
 			inputs: ['id'],
 		},
 	],
-	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: {
+		'[class]': '_computedClass()',
+	},
+	template: '<ng-content />',
 })
 export class HlmCommandList {
 	/** The user defined class  */

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

@@ -5,12 +5,12 @@ import type { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'input[hlm-command-search-input]',
-	template: '',
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	hostDirectives: [{ directive: BrnCommandSearchInput, inputs: ['value'] }],
 	host: {
 		'[class]': '_computedClass()',
 	},
-	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: '',
 })
 export class HlmCommandSearchInput {
 	/** The user defined class  */

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

@@ -5,14 +5,14 @@ import type { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-command-search',
-	template: `
-		<ng-content />
-	`,
+	providers: [provideHlmIconConfig({ size: 'sm' })],
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
 		'[class]': '_computedClass()',
 	},
-	providers: [provideHlmIconConfig({ size: 'sm' })],
-	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: `
+		<ng-content />
+	`,
 })
 export class HlmCommandSearch {
 	/** The user defined class  */

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

@@ -3,12 +3,12 @@ import { hlm } from '<%- importAlias %>/utils';
 
 @Component({
 	selector: 'hlm-command-separator',
-	template: '',
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
 		role: 'separator',
 		'[class]': '_computedClass()',
 	},
-	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: '',
 })
 export class HlmCommandSeparator {
 	/** The user defined class  */

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

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