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

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

@@ -0,0 +1,21 @@
+import { computed, Directive, Input, signal } from '@angular/core';
+import { hlm } from '@spartan-ng/ui-core';
+import { ClassValue } from 'clsx';
+
+@Directive({
+	// eslint-disable-next-line @angular-eslint/directive-selector
+	selector: 'hlm-select, brn-select [hlm]',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmSelectDirective {
+	private readonly _classNames = signal<ClassValue>('');
+	// eslint-disable-next-line @angular-eslint/no-input-rename
+	@Input({ alias: 'class' })
+	set _class(classNames: ClassValue) {
+		this._classNames.set(classNames);
+	}
+	protected readonly _computedClass = computed(() => hlm('', this._classNames()));
+}

package/src/generators/ui/libs/ui-select-helm/generator.d.ts

@@ -0,0 +1,3 @@
+import { Tree } from '@nx/devkit';
+import { HlmBaseGeneratorSchema } from '../../../base/schema';
+export declare function generator(tree: Tree, options: HlmBaseGeneratorSchema): Promise<import("@nx/devkit").GeneratorCallback>;

package/src/generators/ui/libs/ui-select-helm/generator.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generator = void 0;
+const tslib_1 = require("tslib");
+const generator_1 = require("../../../base/generator");
+function generator(tree, options) {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        return yield (0, generator_1.default)(tree, Object.assign(Object.assign({}, options), { primitiveName: 'select', internalName: 'ui-select-helm', publicName: 'ui-select-helm' }));
+    });
+}
+exports.generator = generator;
+//# sourceMappingURL=generator.js.map

package/src/generators/ui/libs/ui-select-helm/generator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/ui-select-helm/generator.ts"],"names":[],"mappings":";;;;AACA,uDAAuD;AAGvD,SAAsB,SAAS,CAAC,IAAU,EAAE,OAA+B;;QAC1E,OAAO,MAAM,IAAA,mBAAgB,EAAC,IAAI,kCAC9B,OAAO,KACV,aAAa,EAAE,QAAQ,EACvB,YAAY,EAAE,gBAAgB,EAC9B,UAAU,EAAE,gBAAgB,IAC3B,CAAC;IACJ,CAAC;CAAA;AAPD,8BAOC"}

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

@@ -1,4 +1,4 @@
-import { Directive, Input, computed, signal } from '@angular/core';
+import { Directive, Input, computed, input, signal } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
@@ -17,18 +17,12 @@ export class HlmSeparatorDirective {
 		this._orientation.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(
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() =>
+		hlm(
 			'inline-flex shrink-0 border-0 bg-border',
 			this._orientation() === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
-			this._userCls(),
-		);
-	}
+			this._userClass(),
+		),
+	);
 }

package/src/generators/ui/libs/ui-sheet-helm/files/lib/hlm-sheet-close.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 HlmSheetCloseDirective {
-	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(
 			'absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground',
-			this._userCls(),
-		);
-	}
+			this._userClass(),
+		),
+	);
 }

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

@@ -1,5 +1,5 @@
-import { Component, computed, effect, ElementRef, inject, Input, Renderer2, signal } from '@angular/core';
-import { radixCross1 } from '@ng-icons/radix-icons';
+import { Component, ElementRef, Renderer2, computed, effect, inject, input, signal } from '@angular/core';
+import { lucideX } from '@ng-icons/lucide';
 import { hlm, injectExposedSideProvider, injectExposesStateProvider } from '@spartan-ng/ui-core';
 import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm';
 import { BrnSheetCloseDirective } from '@spartan-ng/ui-sheet-brain';
@@ -30,7 +30,7 @@ export const sheetVariants = cva(
 	selector: 'hlm-sheet-content',
 	standalone: true,
 	imports: [HlmSheetCloseDirective, BrnSheetCloseDirective, HlmIconComponent],
-	providers: [provideIcons({ radixCross1 })],
+	providers: [provideIcons({ lucideX })],
 	host: {
 		'[class]': '_computedClass()',
 		'[attr.data-state]': 'state()',
@@ -39,7 +39,7 @@ export const sheetVariants = cva(
 		<ng-content />
 		<button brnSheetClose hlm>
 			<span class="sr-only">Close</span>
-			<hlm-icon class="flex h-4 w-4" size="100%" name="radixCross1" />
+			<hlm-icon class="flex h-4 w-4" size="100%" name="lucideX" />
 		</button>
 	`,
 })
@@ -56,14 +56,6 @@ export class HlmSheetContentComponent {
 		});
 	}
 
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(sheetVariants({ side: this._sideProvider.side() }), this._userCls());
-	}
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm(sheetVariants({ side: this._sideProvider.side() }), this._userClass()));
 }

package/src/generators/ui/libs/ui-sheet-helm/files/lib/hlm-sheet-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 { BrnSheetDescriptionDirective } from '@spartan-ng/ui-sheet-brain';
 import { ClassValue } from 'clsx';
@@ -12,14 +12,6 @@ import { ClassValue } from 'clsx';
 	hostDirectives: [BrnSheetDescriptionDirective],
 })
 export class HlmSheetDescriptionDirective {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm('text-sm text-muted-foreground', this._userCls);
-	}
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm('text-sm text-muted-foreground', this._userClass()));
 }

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

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

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

@@ -1,4 +1,4 @@
-import { Component, Input, computed, signal } from '@angular/core';
+import { Component, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
@@ -13,14 +13,6 @@ import { ClassValue } from 'clsx';
 	},
 })
 export class HlmSheetHeaderComponent {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm('flex flex-col space-y-2 text-center sm:text-left', this._userCls());
-	}
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm('flex flex-col space-y-2 text-center sm:text-left', this._userClass()));
 }

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

@@ -1,4 +1,4 @@
-import { Directive, Input, computed, signal } from '@angular/core';
+import { Directive, computed, effect, input } from '@angular/core';
 import { hlm, injectCustomClassSettable } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
@@ -11,23 +11,17 @@ import { ClassValue } from 'clsx';
 })
 export class HlmSheetOverlayDirective {
 	private _classSettable = injectCustomClassSettable({ optional: true, host: true });
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _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._userClass(),
+		),
+	);
 
 	constructor() {
-		this._classSettable?.setClassToCustomElement(this._computedClass());
-	}
-
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-		this._classSettable?.setClassToCustomElement(this._computedClass());
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return 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(),
-		);
+		effect(() => {
+			this._classSettable?.setClassToCustomElement(this._computedClass());
+		});
 	}
 }

package/src/generators/ui/libs/ui-sheet-helm/files/lib/hlm-sheet-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 { BrnSheetTitleDirective } from '@spartan-ng/ui-sheet-brain';
 import { ClassValue } from 'clsx';
@@ -12,14 +12,6 @@ import { ClassValue } from 'clsx';
 	hostDirectives: [BrnSheetTitleDirective],
 })
 export class HlmSheetTitleDirective {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm('text-lg font-semibold', this._userCls());
-	}
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm('text-lg font-semibold', this._userClass()));
 }

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

@@ -1,4 +1,4 @@
-import { Component, Input, computed, signal } from '@angular/core';
+import { Component, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
@@ -11,14 +11,6 @@ import { ClassValue } from 'clsx';
 	},
 })
 export class HlmSkeletonComponent {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm('block animate-pulse rounded-md bg-muted', this._userCls());
-	}
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm('block animate-pulse rounded-md bg-muted', this._userClass()));
 }

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

@@ -1,4 +1,4 @@
-import { Component, computed, Input, signal } from '@angular/core';
+import { Component, computed, input, Input, signal } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { cva, VariantProps } from 'class-variance-authority';
 import { ClassValue } from 'clsx';
@@ -12,6 +12,8 @@ export const spinnerVariants = cva('inline-block', {
 			xs: 'h-4 w-4',
 			sm: 'h-6 w-6',
 			default: 'w-8 h-8 ',
+			lg: 'w-12 h-12',
+			xl: 'w-16 h-16',
 		},
 	},
 	defaultVariants: {
@@ -49,14 +51,6 @@ export class HlmSpinnerComponent {
 		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(spinnerVariants({ size: this._size() }), this._userCls());
-	}
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm(spinnerVariants({ size: this._size() }), this._userClass()));
 }

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(
+	private 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);
-	}
+	private 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++}`);
+
+	private readonly hidden = input(false, { transform: booleanAttribute });
+	private 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;
+	private 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.
+	private 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 });
+	protected readonly truncate = input(false, { transform: booleanAttribute });
 
-	private readonly _userCls = signal<ClassValue>('');
+	private 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);
-	}
 }