@spartan-ng/cli 0.0.1-alpha.336 → 0.0.1-alpha.337

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spartan-ng/cli",
-  "version": "0.0.1-alpha.336",
+  "version": "0.0.1-alpha.337",
   "type": "commonjs",
   "dependencies": {
     "@nx/js": "^17.1.0",

package/src/generators/base/versions.d.ts

@@ -1,4 +1,4 @@
-export declare const FALLBACK_ANGULAR_VERSION = "^17.0.0";
+export declare const FALLBACK_ANGULAR_VERSION = "^17.1.0";
 export declare const NG_ICONS_VERSION = "^25.1.0";
 export declare const SPARTAN_ACCORDION_BRAIN_VERSION = "0.0.1-alpha.335";
 export declare const SPARTAN_ALERT_DIALOG_BRAIN_VERSION = "0.0.1-alpha.335";

package/src/generators/base/versions.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TAILWIND_ANIMATE_VERSION = exports.TAILWINDCSS_VERSION = exports.TAILWIND_MERGE_VERSION = exports.SPARTAN_TOGGLE_VERSION = exports.SPARTAN_TABLE_VERSION = exports.SPARTAN_TABS_VERSION = exports.SPARTAN_SWITCH_VERSION = exports.SPARTAN_SHEET_BRAIN_VERSION = exports.SPARTAN_SEPARATOR_BRAIN_VERSION = exports.SPARTAN_RADIO_GROUP_BRAIN_VERSION = exports.SPARTAN_PROGRESS_BRAIN_VERSION = exports.SPARTAN_POPOVER_BRAIN_VERSION = exports.SPARTAN_MENU_BRAIN_VERSION = exports.SPARTAN_LABEL_BRAIN_VERSION = exports.SPARTAN_HOVERCARD_BRAIN_VERSION = exports.SPARTAN_DIALOG_BRAIN_VERSION = exports.SPARTAN_CORE_VERSION = exports.SPARTAN_COLLAPSIBLE_BRAIN_VERSION = exports.SPARTAN_COMMAND_BRAIN_VERSION = exports.SPARTAN_AVATAR_BRAIN_VERSION = exports.SPARTAN_ALERT_DIALOG_BRAIN_VERSION = exports.SPARTAN_ACCORDION_BRAIN_VERSION = exports.NG_ICONS_VERSION = exports.FALLBACK_ANGULAR_VERSION = void 0;
 // angular dependency
-exports.FALLBACK_ANGULAR_VERSION = '^17.0.0';
+exports.FALLBACK_ANGULAR_VERSION = '^17.1.0';
 // ng-icon dependency
 exports.NG_ICONS_VERSION = '^25.1.0';
 // spartan dependencies

package/src/generators/ui/generator.js

@@ -33,8 +33,8 @@ function createPrimitiveLibraries(response, availablePrimitiveNames, availablePr
         const primitivesToCreate = allPrimitivesSelected ? availablePrimitiveNames : response.primitives;
         const tasks = [];
         if (!response.primitives.includes('all')) {
-            yield addIconForDependentPrimitive(primitivesToCreate, ['alert', 'command', 'menu', 'checkbox']);
-            yield addButtonForDependentPrimitive(primitivesToCreate, ['alertdialog', 'command']);
+            yield addIconForDependentPrimitive(primitivesToCreate, ['alert', 'command', 'menu', 'checkbox', 'pagination']);
+            yield addButtonForDependentPrimitive(primitivesToCreate, ['alertdialog', 'command', 'pagination']);
         }
         yield replaceContextAndMenuBar(primitivesToCreate, allPrimitivesSelected);
         if (primitivesToCreate.includes('collapsible')) {

package/src/generators/ui/generator.js.map

@@ -1 +1 @@
-{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../libs/cli/src/generators/ui/generator.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../libs/cli/src/generators/ui/generator.ts"],"names":[],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import { computed, Directive, inject, Input, signal } from '@angular/core';
+import { computed, Directive, inject, input } from '@angular/core';
 import { BrnAccordionContentComponent } from '@spartan-ng/ui-accordion-brain';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
@@ -13,17 +13,12 @@ import { ClassValue } from 'clsx';
 export class HlmAccordionContentDirective {
 	private readonly _brn = inject(BrnAccordionContentComponent, { optional: true });
 
-	private readonly _userCls = signal<ClassValue>('');
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() => {
 		const gridRows = this._brn?.state() === 'open' ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]';
-		return hlm('text-sm transition-all grid', gridRows, this._userCls());
+		return hlm('text-sm transition-all grid', gridRows, this._userClass());
 	});
 
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
 	constructor() {
 		this._brn?.setClassToCustomElement('pt-1 pb-4');
 	}

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

@@ -1,5 +1,5 @@
-import { computed, Directive, inject, Input, signal } from '@angular/core';
-import { radixChevronDown } from '@ng-icons/radix-icons';
+import { computed, Directive, inject, input } from '@angular/core';
+import { lucideChevronDown } from '@ng-icons/lucide';
 import { hlm } from '@spartan-ng/ui-core';
 import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm';
 import { ClassValue } from 'clsx';
@@ -7,7 +7,7 @@ import { ClassValue } from 'clsx';
 @Directive({
 	selector: 'hlm-icon[hlmAccordionIcon], hlm-icon[hlmAccIcon]',
 	standalone: true,
-	providers: [provideIcons({ radixChevronDown })],
+	providers: [provideIcons({ lucideChevronDown })],
 	host: {
 		'[class]': '_computedClass()',
 	},
@@ -15,17 +15,12 @@ import { ClassValue } from 'clsx';
 export class HlmAccordionIconDirective {
 	private readonly _hlmIcon = inject(HlmIconComponent);
 
-	private readonly _userCls = signal<ClassValue>('');
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
 	protected _computedClass = computed(() =>
-		hlm('inline-block h-4 w-4 transition-transform duration-200', this._userCls()),
+		hlm('inline-block h-4 w-4 transition-transform duration-200', this._userClass()),
 	);
 
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
 	constructor() {
-		this._hlmIcon.name = 'radixChevronDown';
+		this._hlmIcon.name = 'lucideChevronDown';
 	}
 }

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

@@ -1,4 +1,4 @@
-import { computed, Directive, Input, signal } from '@angular/core';
+import { computed, Directive, input } from '@angular/core';
 import { BrnAccordionItemDirective } from '@spartan-ng/ui-accordion-brain';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
@@ -9,16 +9,16 @@ import { ClassValue } from 'clsx';
 	host: {
 		'[class]': '_computedClass()',
 	},
-	hostDirectives: [BrnAccordionItemDirective],
+	hostDirectives: [
+		{
+			directive: BrnAccordionItemDirective,
+			inputs: ['isOpened'],
+		},
+	],
 })
 export class HlmAccordionItemDirective {
-	private readonly _userCls = signal<ClassValue>('');
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
-		hlm('flex flex-1 flex-col border-b border-border', this._userCls()),
+		hlm('flex flex-1 flex-col border-b border-border', this._userClass()),
 	);
-
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
 }

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

@@ -1,4 +1,4 @@
-import { computed, Directive, Input, signal } from '@angular/core';
+import { computed, Directive, input } from '@angular/core';
 import { BrnAccordionTriggerDirective } from '@spartan-ng/ui-accordion-brain';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
@@ -13,16 +13,11 @@ import { ClassValue } from 'clsx';
 	hostDirectives: [BrnAccordionTriggerDirective],
 })
 export class HlmAccordionTriggerDirective {
-	private readonly _userCls = signal<ClassValue>('');
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
 	protected _computedClass = computed(() =>
 		hlm(
 			'w-full focus-visible:outline-none text-sm focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2 flex flex-1 items-center justify-between py-4 px-0.5 font-medium underline-offset-4 hover:underline [&[data-state=open]>[hlmAccordionIcon]]:rotate-180 [&[data-state=open]>[hlmAccIcon]]:rotate-180',
-			this._userCls(),
+			this._userClass(),
 		),
 	);
-
-	@Input()
-	set class(inputs: ClassValue) {
-		this._userCls.set(inputs);
-	}
 }

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

@@ -1,4 +1,4 @@
-import { computed, Directive, inject, Input, signal } from '@angular/core';
+import { computed, Directive, inject, input } from '@angular/core';
 import { BrnAccordionDirective } from '@spartan-ng/ui-accordion-brain';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
@@ -9,18 +9,13 @@ import { ClassValue } from 'clsx';
 	host: {
 		'[class]': '_computedClass()',
 	},
-	hostDirectives: [BrnAccordionDirective],
+	hostDirectives: [{ directive: BrnAccordionDirective, inputs: ['type', 'dir', 'orientation'] }],
 })
 export class HlmAccordionDirective {
 	private readonly _brn = inject(BrnAccordionDirective);
 
-	private readonly _userCls = signal<ClassValue>('');
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
-		hlm('flex', this._brn.orientation === 'horizontal' ? 'flex-row' : 'flex-col', this._userCls()),
+		hlm('flex', this._brn.orientation === 'horizontal' ? 'flex-row' : 'flex-col', this._userClass()),
 	);
-
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
 }

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

@@ -1,4 +1,4 @@
-import { computed, Directive, inject, Input, signal } from '@angular/core';
+import { computed, Directive, inject, input } from '@angular/core';
 import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
@@ -14,13 +14,8 @@ import { ClassValue } from 'clsx';
 export class HlmAlertDialogCancelButtonDirective {
 	private readonly _hlmBtn = inject(HlmButtonDirective, { host: true });
 
-	private readonly _userCls = signal<ClassValue>('');
-	protected readonly _computedClass = computed(() => hlm('mt-2 sm:mt-0', this._userCls()));
-
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() => hlm('mt-2 sm:mt-0', this._userClass()));
 
 	constructor() {
 		this._hlmBtn.variant = 'outline';

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

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, computed, Input, signal, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input, signal, ViewEncapsulation } from '@angular/core';
 import { hlm, injectExposesStateProvider } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
@@ -19,16 +19,11 @@ export class HlmAlertDialogContentComponent {
 	private readonly _stateProvider = injectExposesStateProvider({ optional: true, host: true });
 	public readonly state = this._stateProvider?.state ?? signal('closed');
 
-	private readonly _userCls = signal<ClassValue>('');
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
 			'relative grid w-full max-w-lg gap-4 border-border border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-top-[2%]  data-[state=open]:slide-in-from-top-[2%] sm:rounded-lg md:w-full',
-			this._userCls(),
+			this._userClass(),
 		),
 	);
-
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
 }

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

@@ -1,4 +1,4 @@
-import { computed, Directive, Input, signal } from '@angular/core';
+import { computed, Directive, input } from '@angular/core';
 import { BrnAlertDialogDescriptionDirective } from '@spartan-ng/ui-alertdialog-brain';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
@@ -12,11 +12,6 @@ import { ClassValue } from 'clsx';
 	hostDirectives: [BrnAlertDialogDescriptionDirective],
 })
 export class HlmAlertDialogDescriptionDirective {
-	private readonly _userCls = signal<ClassValue>('');
-	protected readonly _computedClass = computed(() => hlm('text-sm text-muted-foreground', this._userCls()));
-
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() => hlm('text-sm text-muted-foreground', this._userClass()));
 }

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

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, computed, Input, signal, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
@@ -15,12 +15,8 @@ import { ClassValue } from 'clsx';
 	encapsulation: ViewEncapsulation.None,
 })
 export class HlmAlertDialogFooterComponent {
-	private readonly _userCls = signal<ClassValue>('');
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
-		hlm('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', this._userCls()),
+		hlm('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', this._userClass()),
 	);
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
 }

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

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, computed, Input, signal, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
@@ -15,12 +15,8 @@ import { ClassValue } from 'clsx';
 	encapsulation: ViewEncapsulation.None,
 })
 export class HlmAlertDialogHeaderComponent {
-	private readonly _userCls = signal<ClassValue>('');
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
-		hlm('flex flex-col space-y-2 text-center sm:text-left', this._userCls()),
+		hlm('flex flex-col space-y-2 text-center sm:text-left', this._userClass()),
 	);
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
 }

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

@@ -1,4 +1,4 @@
-import { computed, Directive, effect, Input, signal } from '@angular/core';
+import { computed, Directive, effect, input } from '@angular/core';
 import { hlm, injectCustomClassSettable } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
@@ -9,17 +9,13 @@ import { ClassValue } from 'clsx';
 export class HlmAlertDialogOverlayDirective {
 	private readonly _classSettable = injectCustomClassSettable({ optional: true, host: true });
 
-	private readonly _userCls = signal<ClassValue>('');
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
 			'bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-			this._userCls(),
+			this._userClass(),
 		),
 	);
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
 
 	constructor() {
 		effect(() => this._classSettable?.setClassToCustomElement(this._computedClass()));

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

@@ -1,4 +1,4 @@
-import { computed, Directive, Input, signal } from '@angular/core';
+import { computed, Directive, input } from '@angular/core';
 import { BrnAlertDialogTitleDirective } from '@spartan-ng/ui-alertdialog-brain';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
@@ -12,10 +12,6 @@ import { ClassValue } from 'clsx';
 	hostDirectives: [BrnAlertDialogTitleDirective],
 })
 export class HlmAlertDialogTitleDirective {
-	private readonly _userCls = signal<ClassValue>('');
-	protected readonly _computedClass = computed(() => hlm('text-lg font-semibold', this._userCls()));
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() => hlm('text-lg font-semibold', this._userClass()));
 }

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

@@ -1,4 +1,4 @@
-import { computed, Directive, Input, signal } from '@angular/core';
+import { computed, Directive, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { cva, VariantProps } from 'class-variance-authority';
 import { ClassValue } from 'clsx';
@@ -16,14 +16,6 @@ export type AlertDescriptionVariants = VariantProps<typeof alertDescriptionVaria
 	},
 })
 export class HlmAlertDescriptionDirective {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(alertDescriptionVariants(), this._userCls());
-	}
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm(alertDescriptionVariants(), this._userClass()));
 }

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

@@ -1,4 +1,4 @@
-import { computed, Directive, Input, signal } from '@angular/core';
+import { computed, Directive, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { cva, VariantProps } from 'class-variance-authority';
 import { ClassValue } from 'clsx';
@@ -16,14 +16,6 @@ export type AlertTitleVariants = VariantProps<typeof alertTitleVariants>;
 	},
 })
 export class HlmAlertTitleDirective {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(alertTitleVariants(), this._userCls());
-	}
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm(alertTitleVariants(), this._userClass()));
 }

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

@@ -1,4 +1,4 @@
-import { computed, Directive, Input, signal } from '@angular/core';
+import { computed, Directive, Input, input, signal } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { cva, VariantProps } from 'class-variance-authority';
 import { ClassValue } from 'clsx';
@@ -29,20 +29,12 @@ export type AlertVariants = VariantProps<typeof alertVariants>;
 	},
 })
 export class HlmAlertDirective {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm(alertVariants({ variant: this._variant() }), this._userClass()));
 
 	private readonly _variant = signal<AlertVariants['variant']>('default');
 	@Input()
 	set variant(variant: AlertVariants['variant']) {
 		this._variant.set(variant);
 	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(alertVariants({ variant: this._variant() }), this._userCls());
-	}
 }

package/src/generators/ui/libs/ui-aspect-ratio-helm/files/lib/helm-aspect-ratio.directive.ts.template

@@ -1,5 +1,5 @@
 import { coerceNumberProperty, NumberInput } from '@angular/cdk/coercion';
-import { AfterViewInit, computed, Directive, ElementRef, inject, Input, signal } from '@angular/core';
+import { AfterViewInit, computed, Directive, ElementRef, inject, input, Input, signal } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
@@ -27,8 +27,8 @@ export class HlmAspectRatioDirective implements AfterViewInit {
 		return `${100 / this._ratio()}%`;
 	});
 
-	private readonly _userCls = signal<ClassValue>('');
-	protected readonly _computedClass = computed(() => hlm(`relative w-full`, this._userCls()));
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() => hlm(`relative w-full`, this._userClass()));
 
 	@Input()
 	set hlmAspectRatio(value: NumberInput) {
@@ -36,11 +36,6 @@ export class HlmAspectRatioDirective implements AfterViewInit {
 		this._ratio.set(coerced <= 0 ? 1 : coerced);
 	}
 
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
 	ngAfterViewInit() {
 		// support delayed addition of image to dom
 		const child = this._el.firstElementChild;

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

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { BrnAvatarFallbackDirective, BrnAvatarImageDirective } from '@spartan-ng/ui-avatar-brain';
 import { HlmAvatarComponent } from './hlm-avatar.component';
@@ -7,13 +7,15 @@ import { HlmAvatarComponent } from './hlm-avatar.component';
 	selector: 'hlm-mock',
 	imports: [BrnAvatarImageDirective, BrnAvatarFallbackDirective, HlmAvatarComponent],
 	template: `
-		<hlm-avatar id="fallbackOnly">
+		<hlm-avatar [class]="class" id="fallbackOnly">
 			<span brnAvatarFallback>fallback</span>
 		</hlm-avatar>
 	`,
 	standalone: true,
 })
-class MockComponent {}
+class MockComponent {
+	@Input() class: string = '';
+}
 
 describe('HlmAvatarComponent', () => {
 	let component: HlmAvatarComponent;
@@ -34,9 +36,11 @@ describe('HlmAvatarComponent', () => {
 	});
 
 	it('should add any user defined classes', () => {
-		component.class = 'test-class';
-		fixture.detectChanges();
-		expect(fixture.nativeElement.className).toContain('test-class');
+		const mockFixture = TestBed.createComponent(MockComponent);
+		mockFixture.componentRef.setInput('class', 'test-class');
+		mockFixture.detectChanges();
+		const avatar = mockFixture.nativeElement.querySelector('hlm-avatar');
+		expect(avatar.className).toContain('test-class');
 	});
 
 	it('should change the size when the variant is changed', () => {

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

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, computed, Input, signal, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input, Input, signal, ViewEncapsulation } from '@angular/core';
 import { BrnAvatarComponent } from '@spartan-ng/ui-avatar-brain';
 import { hlm } from '@spartan-ng/ui-core';
 import { cva, VariantProps } from 'class-variance-authority';
@@ -36,20 +36,14 @@ type AvatarVariants = VariantProps<typeof avatarVariants>;
 	`,
 })
 export class HlmAvatarComponent extends BrnAvatarComponent {
-	private readonly _userCls = signal<ClassValue>('');
-
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() =>
+		hlm(avatarVariants({ variant: this._variant() }), this._userClass()),
+	);
 
 	private readonly _variant = signal<AvatarVariants['variant']>('medium');
 	@Input()
 	set variant(variant: AvatarVariants['variant']) {
 		this._variant.set(variant);
 	}
-
-	protected readonly _computedClass = computed(() =>
-		hlm(avatarVariants({ variant: this._variant() }), this._userCls()),
-	);
 }

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

@@ -1,4 +1,4 @@
-import { computed, Directive, inject, Input, signal } from '@angular/core';
+import { computed, Directive, inject, input } from '@angular/core';
 import { BrnAvatarImageDirective } from '@spartan-ng/ui-avatar-brain';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
@@ -15,14 +15,6 @@ import { ClassValue } from 'clsx';
 export class HlmAvatarImageDirective {
 	canShow = inject(BrnAvatarImageDirective).canShow;
 
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm('aspect-square object-cover h-full w-full', this._userCls());
-	}
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm('aspect-square object-cover h-full w-full', this._userClass()));
 }

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

@@ -1,4 +1,4 @@
-import { booleanAttribute, computed, Directive, Input, signal } from '@angular/core';
+import { booleanAttribute, computed, Directive, Input, input, signal } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { cva, VariantProps } from 'class-variance-authority';
 import { ClassValue } from 'clsx';
@@ -53,11 +53,10 @@ type badgeVariants = VariantProps<typeof badgeVariants>;
 	},
 })
 export class HlmBadgeDirective {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() =>
+		hlm(badgeVariants({ variant: this._variant(), size: this._size(), static: this._static() }), this._userClass()),
+	);
 
 	private readonly _variant = signal<badgeVariants['variant']>('default');
 	@Input()
@@ -76,12 +75,4 @@ export class HlmBadgeDirective {
 	set size(size: badgeVariants['size']) {
 		this._size.set(size);
 	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(
-			badgeVariants({ variant: this._variant(), size: this._size(), static: this._static() }),
-			this._userCls(),
-		);
-	}
 }