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

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

@@ -1,20 +1,21 @@
-import { NgIf, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import {
+	booleanAttribute,
 	ChangeDetectionStrategy,
 	Component,
-	Input,
-	ViewEncapsulation,
-	booleanAttribute,
 	computed,
-	signal,
+	inject,
+	input,
+	ViewEncapsulation,
 } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
+import { BrnColumnDefComponent } from '@spartan-ng/ui-table-brain';
 import { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-th',
 	standalone: true,
-	imports: [NgTemplateOutlet, NgIf],
+	imports: [NgTemplateOutlet],
 	host: {
 		'[class]': '_computedClass()',
 	},
@@ -22,29 +23,27 @@ import { ClassValue } from 'clsx';
 		<ng-template #content>
 			<ng-content />
 		</ng-template>
-		<span *ngIf="truncate" class="flex-1 truncate">
+		@if (truncate()) {
+			<span class="flex-1 truncate">
+				<ng-container [ngTemplateOutlet]="content" />
+			</span>
+		} @else {
 			<ng-container [ngTemplateOutlet]="content" />
-		</span>
-		<ng-container *ngIf="!truncate" [ngTemplateOutlet]="content" />
+		}
 	`,
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	encapsulation: ViewEncapsulation.None,
 })
 export class HlmThComponent {
-	@Input({ transform: booleanAttribute })
-	public truncate = false;
-
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(inputs: ClassValue) {
-		this._userCls.set(inputs);
-	}
+	private readonly _columnDef? = inject(BrnColumnDefComponent, { optional: true });
+	protected readonly truncate = input(false, { transform: booleanAttribute });
 
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() =>
+		hlm(
 			'flex flex-none h-12 px-4 text-sm items-center font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
-			this._userCls(),
-		);
-	}
+			this._columnDef?.class(),
+			this._userClass(),
+		),
+	);
 }

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

@@ -1,12 +1,4 @@
-import {
-	booleanAttribute,
-	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';
 
@@ -24,20 +16,11 @@ import { ClassValue } from 'clsx';
 	encapsulation: ViewEncapsulation.None,
 })
 export class HlmTrowComponent {
-	@Input({ transform: booleanAttribute })
-	public truncate = false;
-
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(inputs: ClassValue) {
-		this._userCls.set(inputs);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() =>
+		hlm(
 			'flex flex border-b border-border transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
-			this._userCls(),
-		);
-	}
+			this._userClass(),
+		),
+	);
 }

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

@@ -3,12 +3,19 @@ import { NgModule } from '@angular/core';
 import { HlmTabsContentDirective } from './lib/hlm-tabs-content.directive';
 import { HlmTabsListComponent } from './lib/hlm-tabs-list.component';
 import { HlmTabsTriggerDirective } from './lib/hlm-tabs-trigger.directive';
+import { HlmTabsComponent } from './lib/hlm-tabs.component';
 
 export * from './lib/hlm-tabs-content.directive';
 export * from './lib/hlm-tabs-list.component';
 export * from './lib/hlm-tabs-trigger.directive';
+export * from './lib/hlm-tabs.component';
 
-export const HlmTabsImports = [HlmTabsListComponent, HlmTabsTriggerDirective, HlmTabsContentDirective] as const;
+export const HlmTabsImports = [
+	HlmTabsComponent,
+	HlmTabsListComponent,
+	HlmTabsTriggerDirective,
+	HlmTabsContentDirective,
+] as const;
 
 @NgModule({
 	imports: [...HlmTabsImports],

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

@@ -1,4 +1,4 @@
-import { Directive, Input, computed, inject, signal } from '@angular/core';
+import { Directive, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { BrnTabsContentDirective } from '@spartan-ng/ui-tabs-brain';
 import { ClassValue } from 'clsx';
@@ -6,31 +6,19 @@ import { ClassValue } from 'clsx';
 @Directive({
 	selector: '[hlmTabsContent]',
 	standalone: true,
-	hostDirectives: [BrnTabsContentDirective],
+	hostDirectives: [{ directive: BrnTabsContentDirective, inputs: ['brnTabsContent: hlmTabsContent'] }],
 	host: {
 		'[class]': '_computedClass()',
 	},
 })
 export class HlmTabsContentDirective {
-	private readonly _brn = inject(BrnTabsContentDirective);
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
+	public readonly contentFor = input.required<string>({ alias: 'hlmTabsContent' });
 
-	@Input('hlmTabsContent')
-	set contentFor(key: string) {
-		if (this._brn) {
-			this._brn.contentFor = key;
-		}
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(
+	public readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() =>
+		hlm(
 			'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
-			this._userCls(),
-		);
-	}
+			this._userClass(),
+		),
+	);
 }

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

@@ -1,7 +1,7 @@
-import { Component, computed, Input, signal } from '@angular/core';
+import { Component, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { BrnTabsListDirective } from '@spartan-ng/ui-tabs-brain';
-import { cva, VariantProps } from 'class-variance-authority';
+import { VariantProps, cva } from 'class-variance-authority';
 import { ClassValue } from 'clsx';
 
 export const listVariants = cva(
@@ -30,20 +30,8 @@ type ListVariants = VariantProps<typeof listVariants>;
 	},
 })
 export class HlmTabsListComponent {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
+	public readonly orientation = input<ListVariants['orientation']>('horizontal');
 
-	private readonly _orientation = signal<ListVariants['orientation']>('horizontal');
-	@Input()
-	set orientation(value: ListVariants['orientation']) {
-		this._orientation.set(value);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(listVariants({ orientation: this._orientation() }), this._userCls());
-	}
+	public readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm(listVariants({ orientation: this.orientation() }), this._userClass()));
 }

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

@@ -1,4 +1,4 @@
-import { Directive, Input, computed, inject, signal } from '@angular/core';
+import { Directive, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { BrnTabsTriggerDirective } from '@spartan-ng/ui-tabs-brain';
 import { ClassValue } from 'clsx';
@@ -6,31 +6,19 @@ import { ClassValue } from 'clsx';
 @Directive({
 	selector: '[hlmTabsTrigger]',
 	standalone: true,
+	hostDirectives: [{ directive: BrnTabsTriggerDirective, inputs: ['brnTabsTrigger: hlmTabsTrigger', 'disabled'] }],
 	host: {
 		'[class]': '_computedClass()',
 	},
-	hostDirectives: [BrnTabsTriggerDirective],
 })
 export class HlmTabsTriggerDirective {
-	private readonly _brn = inject(BrnTabsTriggerDirective);
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
+	public readonly triggerFor = input.required<string>({ alias: 'hlmTabsTrigger' });
 
-	@Input('hlmTabsTrigger')
-	set triggerFor(key: string) {
-		if (this._brn) {
-			this._brn.triggerFor = key;
-		}
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(
+	public readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() =>
+		hlm(
 			'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
-			this._userCls(),
-		);
-	}
+			this._userClass(),
+		),
+	);
 }

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

@@ -0,0 +1,17 @@
+import { Component, input } from '@angular/core';
+import { BrnTabsDirective } from '@spartan-ng/ui-tabs-brain';
+
+@Component({
+	selector: 'hlm-tabs',
+	standalone: true,
+	hostDirectives: [
+		{
+			directive: BrnTabsDirective,
+			inputs: ['orientation', 'direction', 'activationMode', 'brnTabs: tab'],
+		},
+	],
+	template: '<ng-content/>',
+})
+export class HlmTabsComponent {
+	public readonly tab = input.required<string>();
+}

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

@@ -1,4 +1,4 @@
-import { Directive, Input, computed, signal } from '@angular/core';
+import { Directive, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
@@ -10,17 +10,11 @@ import { ClassValue } from 'clsx';
 	},
 })
 export class HlmToggleGroupDirective {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() =>
+		hlm(
 			'inline-flex items-center rounded-md [&>[hlm][brnToggle][variant="outline"]]:-mx-[0.5px] [&>[hlm][brnToggle]]:rounded-none focus:[&>[hlm][brnToggle]]:z-10 first-of-type:[&>[hlm][brnToggle]]:rounded-l-md last-of-type:[&>[hlm][brnToggle]]:rounded-r-md',
-			this._userCls(),
-		);
-	}
+			this._userClass(),
+		),
+	);
 }

package/src/generators/ui/libs/ui-toggle-helm/files/lib/hlm-toggle.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';
@@ -45,14 +45,8 @@ export class HlmToggleDirective {
 		this._size.set(value);
 	}
 
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(toggleVariants({ variant: this._variant(), size: this._size() }), this._userCls());
-	}
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() =>
+		hlm(toggleVariants({ variant: this._variant(), size: this._size() }), this._userClass()),
+	);
 }

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

@@ -1,4 +1,4 @@
-import { Directive, Input, computed, signal } from '@angular/core';
+import { Directive, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
@@ -12,14 +12,6 @@ export const hlmBlockquote = 'mt-6 border-border border-l-2 pl-6 italic';
 	},
 })
 export class HlmBlockquoteDirective {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(hlmBlockquote, this._userCls());
-	}
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm(hlmBlockquote, this._userClass()));
 }

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

@@ -1,4 +1,4 @@
-import { Directive, Input, computed, signal } from '@angular/core';
+import { Directive, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
@@ -12,14 +12,6 @@ export const hlmCode = 'relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-m
 	},
 })
 export class HlmCodeDirective {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(hlmCode, this._userCls());
-	}
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm(hlmCode, this._userClass()));
 }

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

@@ -1,4 +1,4 @@
-import { Directive, Input, computed, signal } from '@angular/core';
+import { Directive, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
@@ -12,14 +12,6 @@ export const hlmH1 = 'scroll-m-20 text-4xl font-extrabold tracking-tight lg:text
 	},
 })
 export class HlmH1Directive {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(hlmH1, this._userCls());
-	}
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm(hlmH1, this._userClass()));
 }

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

@@ -1,4 +1,4 @@
-import { Directive, Input, computed, signal } from '@angular/core';
+import { Directive, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
@@ -13,14 +13,6 @@ export const hlmH2 =
 	},
 })
 export class HlmH2Directive {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(hlmH2, this._userCls());
-	}
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm(hlmH2, this._userClass()));
 }

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

@@ -1,4 +1,4 @@
-import { Directive, Input, computed, signal } from '@angular/core';
+import { Directive, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
@@ -12,14 +12,6 @@ export const hlmH3 = 'scroll-m-20 text-2xl font-semibold tracking-tight';
 	},
 })
 export class HlmH3Directive {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(hlmH3, this._userCls());
-	}
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm(hlmH3, this._userClass()));
 }

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

@@ -1,4 +1,4 @@
-import { Directive, Input, computed, signal } from '@angular/core';
+import { Directive, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
@@ -12,14 +12,6 @@ export const hlmH4 = 'scroll-m-20 text-xl font-semibold tracking-tight';
 	},
 })
 export class HlmH4Directive {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(hlmH4, this._userCls());
-	}
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm(hlmH4, this._userClass()));
 }

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

@@ -1,4 +1,4 @@
-import { Directive, Input, computed, signal } from '@angular/core';
+import { Directive, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
@@ -12,14 +12,6 @@ export const hlmLarge = 'text-lg font-semibold';
 	},
 })
 export class HlmLargeDirective {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(hlmLarge, this._userCls());
-	}
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm(hlmLarge, this._userClass()));
 }

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

@@ -1,4 +1,4 @@
-import { Directive, Input, computed, signal } from '@angular/core';
+import { Directive, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
@@ -12,14 +12,6 @@ export const hlmLead = 'text-xl text-muted-foreground';
 	},
 })
 export class HlmLeadDirective {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(hlmLead, this._userCls());
-	}
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm(hlmLead, this._userClass()));
 }

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

@@ -1,4 +1,4 @@
-import { Directive, Input, computed, signal } from '@angular/core';
+import { Directive, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
@@ -12,14 +12,6 @@ export const hlmMuted = 'text-sm text-muted-foreground';
 	},
 })
 export class HlmMutedDirective {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(hlmMuted, this._userCls());
-	}
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm(hlmMuted, this._userClass()));
 }

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

@@ -1,4 +1,4 @@
-import { Directive, Input, computed, signal } from '@angular/core';
+import { Directive, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
@@ -12,14 +12,6 @@ export const hlmP = 'leading-7 [&:not(:first-child)]:mt-6';
 	},
 })
 export class HlmPDirective {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(hlmP, this._userCls());
-	}
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm(hlmP, this._userClass()));
 }

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

@@ -1,4 +1,4 @@
-import { Directive, Input, computed, signal } from '@angular/core';
+import { Directive, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
@@ -12,14 +12,6 @@ export const hlmSmall = 'text-sm font-medium leading-none';
 	},
 })
 export class HlmSmallDirective {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(hlmSmall, this._userCls());
-	}
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm(hlmSmall, this._userClass()));
 }

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

@@ -1,4 +1,4 @@
-import { Directive, Input, computed, signal } from '@angular/core';
+import { Directive, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
@@ -12,14 +12,6 @@ export const hlmUl = 'my-6 ml-6 list-disc [&>li]:mt-2';
 	},
 })
 export class HlmUlDirective {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(hlmUl, this._userCls());
-	}
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm(hlmUl, this._userClass()));
 }