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

package/src/generators/ui/libs/ui-switch-helm/files/lib/hlm-switch-thumb.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 HlmSwitchThumbDirective {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() =>
+		hlm(
 			'block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform group-data-[state=checked]:translate-x-5 group-data-[state=unchecked]:translate-x-0',
-			this._userCls(),
-		);
-	}
+			this.userClass(),
+		),
+	);
 }

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

@@ -1,4 +1,14 @@
-import { Component, EventEmitter, Input, Output, booleanAttribute, computed, forwardRef, signal } from '@angular/core';
+import {
+	Component,
+	EventEmitter,
+	Input,
+	Output,
+	booleanAttribute,
+	computed,
+	forwardRef,
+	input,
+	signal,
+} from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { hlm } from '@spartan-ng/ui-core';
 import { BrnSwitchComponent, BrnSwitchThumbComponent } from '@spartan-ng/ui-switch-brain';
@@ -40,11 +50,14 @@ export const HLM_SWITCH_VALUE_ACCESSOR = {
 	providers: [HLM_SWITCH_VALUE_ACCESSOR],
 })
 export class HlmSwitchComponent {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() =>
+		hlm(
+			'group inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+			this._disabled() ? 'cursor-not-allowed opacity-50' : '',
+			this.userClass(),
+		),
+	);
 
 	@Output()
 	public changed = new EventEmitter<boolean>();
@@ -83,14 +96,6 @@ export class HlmSwitchComponent {
 	@Input('aria-describedby')
 	ariaDescribedby: string | null = null;
 
-	protected _computedClass = computed(() =>
-		hlm(
-			'group inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
-			this._disabled() ? 'cursor-not-allowed opacity-50' : '',
-			this._userCls(),
-		),
-	);
-
 	/** CONROL VALUE ACCESSOR */
 
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any

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

@@ -5,8 +5,7 @@ import {
 	computed,
 	effect,
 	inject,
-	Input,
-	signal,
+	input,
 	ViewEncapsulation,
 } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
@@ -20,7 +19,7 @@ let captionIdSequence = 0;
 	standalone: true,
 	host: {
 		'[class]': '_computedClass()',
-		'[id]': '_id()',
+		'[id]': 'id()',
 	},
 	template: `
 		<ng-content />
@@ -31,41 +30,24 @@ let captionIdSequence = 0;
 export class HlmCaptionComponent {
 	private readonly _table = inject(HlmTableComponent, { optional: true });
 
-	private readonly _hidden = signal(false);
-	private readonly _userCls = signal<ClassValue>('');
+	protected readonly id = input<string | null | undefined>(`${captionIdSequence++}`);
+
+	public readonly hidden = input(false, { transform: booleanAttribute });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
 			'text-center block mt-4 text-sm text-muted-foreground',
-			this._hidden() ? 'sr-only' : 'order-last',
-			this._userCls(),
+			this.hidden() ? 'sr-only' : 'order-last',
+			this.userClass(),
 		),
 	);
-	protected readonly _id = signal<string | null | undefined>(`${captionIdSequence++}`);
-
-	@Input({ transform: booleanAttribute })
-	public truncate = false;
-
-	@Input()
-	set class(inputs: ClassValue) {
-		this._userCls.set(inputs);
-	}
-
-	@Input()
-	set id(value: string | null | undefined) {
-		this._id.set(value);
-	}
-
-	@Input({ transform: booleanAttribute })
-	set hidden(value: boolean) {
-		this._hidden.set(value);
-	}
 
 	constructor() {
 		effect(
 			() => {
-				const id = this._id();
+				const id = this.id();
 				if (!this._table) return;
-				this._table.labeledBy = id;
+				this._table.labeledBy.set(id);
 			},
 			{ allowSignalWrites: true },
 		);

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

@@ -1,12 +1,4 @@
-import {
-	booleanAttribute,
-	ChangeDetectionStrategy,
-	Component,
-	computed,
-	Input,
-	signal,
-	ViewEncapsulation,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, effect, input, signal, ViewEncapsulation } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
@@ -16,7 +8,7 @@ import { ClassValue } from 'clsx';
 	host: {
 		'[class]': '_computedClass()',
 		role: 'table',
-		'[attr.aria-labelledby]': '_labeledBy()',
+		'[attr.aria-labelledby]': 'labeledBy()',
 	},
 	template: `
 		<ng-content />
@@ -25,24 +17,16 @@ import { ClassValue } from 'clsx';
 	encapsulation: ViewEncapsulation.None,
 })
 export class HlmTableComponent {
-	@Input({ transform: booleanAttribute })
-	public truncate = false;
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() =>
+		hlm('flex flex-col text-sm [&_hlm-trow:last-child]:border-0', this.userClass()),
+	);
 
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(inputs: ClassValue) {
-		this._userCls.set(inputs);
-	}
-
-	protected readonly _labeledBy = signal<string | null | undefined>(undefined);
-	// eslint-disable-next-line @angular-eslint/no-input-rename
-	@Input({ alias: 'aria-labelledby' })
-	set labeledBy(value: string | null | undefined) {
-		this._labeledBy.set(value);
-	}
+	// we aria-labelledby to be settable from outside but use the input by default.
+	public readonly _labeledByInput = input<string | null | undefined>(undefined, { alias: 'aria-labelledby' });
+	public readonly labeledBy = signal<string | null | undefined>(undefined);
 
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm('flex flex-col text-sm [&_hlm-trow:last-child]:border-0', this._userCls());
+	constructor() {
+		effect(() => this.labeledBy.set(this._labeledByInput()), { allowSignalWrites: true });
 	}
 }

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

@@ -4,11 +4,12 @@ import {
 	ChangeDetectionStrategy,
 	Component,
 	computed,
-	Input,
-	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({
@@ -22,7 +23,7 @@ import { ClassValue } from 'clsx';
 		<ng-template #content>
 			<ng-content />
 		</ng-template>
-		@if (truncate) {
+		@if (truncate()) {
 			<span class="flex-1 truncate">
 				<ng-container [ngTemplateOutlet]="content" />
 			</span>
@@ -34,16 +35,11 @@ import { ClassValue } from 'clsx';
 	encapsulation: ViewEncapsulation.None,
 })
 export class HlmTdComponent {
-	@Input({ transform: booleanAttribute })
-	public truncate = false;
+	private readonly _columnDef? = inject(BrnColumnDefComponent, { optional: true });
+	public readonly truncate = input(false, { transform: booleanAttribute });
 
-	private readonly _userCls = signal<ClassValue>('');
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
-		hlm('flex flex-none p-4 items-center [&:has([role=checkbox])]:pr-0', this._userCls()),
+		hlm('flex flex-none p-4 items-center [&:has([role=checkbox])]:pr-0', this._columnDef?.class(), this.userClass()),
 	);
-
-	@Input()
-	set class(inputs: ClassValue) {
-		this._userCls.set(inputs);
-	}
 }

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 });
+	public readonly truncate = input(false, { transform: booleanAttribute });
 
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(
+	public 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(
+	public 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(
+	public 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());
-	}
+	public 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());
-	}
+	public 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());
-	}
+	public 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());
-	}
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm(hlmH1, this.userClass()));
 }