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

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

@@ -1,13 +1,13 @@
-import { booleanAttribute, computed, Directive, Input, signal } from '@angular/core';
+import { Directive, Input, booleanAttribute, computed, input, signal } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { BrnMenuItemDirective } from '@spartan-ng/ui-menu-brain';
-import { cva, VariantProps } from 'class-variance-authority';
+import { VariantProps, cva } from 'class-variance-authority';
 import { ClassValue } from 'clsx';
 
 export const hlmMenuItemVariants = cva(
 	'group w-full relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground disabled:pointer-events-none disabled:opacity-50',
 	{
-		variants: { inset: { true: 'pl-10', false: '' } },
+		variants: { inset: { true: 'pl-8', false: '' } },
 		defaultVariants: { inset: false },
 	},
 );
@@ -30,21 +30,11 @@ export type HlmMenuItemVariants = VariantProps<typeof hlmMenuItemVariants>;
 export class HlmMenuItemDirective {
 	private readonly _inset = signal<boolean>(false);
 
-	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(hlmMenuItemVariants({ inset: this._inset() }), this.userClass()));
 
 	@Input({ transform: booleanAttribute })
 	set inset(value: boolean) {
 		this._inset.set(value);
 	}
-
-	protected _computedClass = computed(() => this._generateClass());
-
-	private _generateClass() {
-		return hlm(hlmMenuItemVariants({ inset: this._inset() }), this._userCls());
-	}
 }

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

@@ -1,4 +1,4 @@
-import { booleanAttribute, Component, computed, Input, signal } from '@angular/core';
+import { Component, Input, booleanAttribute, computed, input, signal } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
@@ -13,20 +13,14 @@ import { ClassValue } from 'clsx';
 	},
 })
 export class HlmMenuLabelComponent {
-	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('block px-2 py-1.5 text-sm font-semibold', this._inset() && 'pl-8', this.userClass()),
+	);
 
 	private readonly _inset = signal<ClassValue>(false);
 	@Input({ transform: booleanAttribute })
 	set inset(value: boolean) {
 		this._inset.set(value);
 	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm('block px-2 py-1.5 text-sm font-semibold', this._inset() && 'pl-10', this._userCls());
-	}
 }

package/src/generators/ui/libs/ui-menu-helm/files/lib/hlm-menu-separator.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 HlmMenuSeparatorComponent {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm('block -mx-1 my-1 h-px bg-muted', this._userCls());
-	}
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm('block -mx-1 my-1 h-px bg-muted', this.userClass()));
 }

package/src/generators/ui/libs/ui-menu-helm/files/lib/hlm-menu-shortcut.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 HlmMenuShortcutComponent {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm('ml-auto font-light text-xs tracking-widest opacity-60', this._userCls());
-	}
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() =>
+		hlm('ml-auto font-light text-xs tracking-widest opacity-60', this.userClass()),
+	);
 }

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

@@ -1,7 +1,7 @@
-import { Component, computed, Input, signal } from '@angular/core';
+import { Component, Input, computed, input, signal } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { BrnMenuDirective } from '@spartan-ng/ui-menu-brain';
-import { cva, VariantProps } from 'class-variance-authority';
+import { VariantProps, cva } from 'class-variance-authority';
 import { ClassValue } from 'clsx';
 
 export const menuVariants = cva(
@@ -32,20 +32,12 @@ type MenuVariants = VariantProps<typeof menuVariants>;
 	`,
 })
 export class HlmMenuComponent {
-	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(menuVariants({ variant: this._variant() }), this.userClass()));
 
 	private readonly _variant = signal<MenuVariants['variant']>('default');
 	@Input()
 	set variant(value: MenuVariants['variant']) {
 		this._variant.set(value);
 	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(menuVariants({ variant: this._variant() }), this._userCls());
-	}
 }

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

@@ -1,4 +1,4 @@
-import { Component, computed, Input, signal } from '@angular/core';
+import { Component, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { BrnMenuDirective } from '@spartan-ng/ui-menu-brain';
 import { ClassValue } from 'clsx';
@@ -15,17 +15,11 @@ import { ClassValue } from 'clsx';
 	`,
 })
 export class HlmSubMenuComponent {
-	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(
 			'border-border min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-			this._userCls(),
-		);
-	}
+			this.userClass(),
+		),
+	);
 }

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

@@ -0,0 +1,33 @@
+import { NgModule } from '@angular/core';
+
+import { HlmPaginationContentDirective } from './lib/hlm-pagination-content.directive';
+import { HlmPaginationEllipsisComponent } from './lib/hlm-pagination-ellipsis.componet';
+import { HlmPaginationItemDirective } from './lib/hlm-pagination-item.directive';
+import { HlmPaginationLinkDirective } from './lib/hlm-pagination-link.directive';
+import { HlmPaginationNextComponent } from './lib/hlm-pagination-next.componet';
+import { HlmPaginationPreviousComponent } from './lib/hlm-pagination-previous.componet';
+import { HlmPaginationDirective } from './lib/hlm-pagination.directive';
+
+export * from './lib/hlm-pagination-content.directive';
+export * from './lib/hlm-pagination-ellipsis.componet';
+export * from './lib/hlm-pagination-item.directive';
+export * from './lib/hlm-pagination-link.directive';
+export * from './lib/hlm-pagination-next.componet';
+export * from './lib/hlm-pagination-previous.componet';
+export * from './lib/hlm-pagination.directive';
+
+export const HlmPaginationImports = [
+	HlmPaginationDirective,
+	HlmPaginationContentDirective,
+	HlmPaginationItemDirective,
+	HlmPaginationLinkDirective,
+	HlmPaginationPreviousComponent,
+	HlmPaginationNextComponent,
+	HlmPaginationEllipsisComponent,
+] as const;
+
+@NgModule({
+	imports: [...HlmPaginationImports],
+	exports: [...HlmPaginationImports],
+})
+export class HlmPaginationModule {}

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

@@ -0,0 +1,21 @@
+import { computed, Directive, input } from '@angular/core';
+import { hlm } from '@spartan-ng/ui-core';
+import { cva, VariantProps } from 'class-variance-authority';
+
+export const paginationContentVariants = cva('flex flex-row items-center gap-1', {
+	variants: {},
+	defaultVariants: {},
+});
+export type PaginationContentVariants = VariantProps<typeof paginationContentVariants>;
+
+@Directive({
+	selector: '[hlmPaginationContent]',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmPaginationContentDirective {
+	public readonly class = input('');
+	protected readonly _computedClass = computed(() => hlm(paginationContentVariants(), this.class()));
+}

package/src/generators/ui/libs/ui-pagination-helm/files/lib/hlm-pagination-ellipsis.componet.ts.template

@@ -0,0 +1,23 @@
+import { Component, computed, input } from '@angular/core';
+import { lucideMoreHorizontal } from '@ng-icons/lucide';
+import { hlm } from '@spartan-ng/ui-core';
+import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm';
+import { HlmPaginationLinkDirective } from './hlm-pagination-link.directive';
+
+@Component({
+	selector: 'hlm-pagination-ellipsis',
+	standalone: true,
+	imports: [HlmPaginationLinkDirective, HlmIconComponent],
+	providers: [provideIcons({ lucideMoreHorizontal })],
+	template: `
+		<span [class]="_computedClass()">
+			<hlm-icon size="sm" name="lucideMoreHorizontal" />
+			<span class="sr-only">More pages</span>
+		</span>
+	`,
+})
+export class HlmPaginationEllipsisComponent {
+	public readonly class = input('');
+
+	protected _computedClass = computed(() => hlm('flex h-9 w-9 items-center justify-center', this.class()));
+}

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

@@ -0,0 +1,22 @@
+import { computed, Directive, input } from '@angular/core';
+import { hlm } from '@spartan-ng/ui-core';
+import { cva, VariantProps } from 'class-variance-authority';
+
+export const paginationItemVariants = cva('', {
+	variants: {},
+	defaultVariants: {},
+});
+export type PaginationItemVariants = VariantProps<typeof paginationItemVariants>;
+
+@Directive({
+	selector: '[hlmPaginationItem]',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmPaginationItemDirective {
+	public readonly class = input('');
+
+	protected _computedClass = computed(() => hlm(paginationItemVariants(), this.class()));
+}

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

@@ -0,0 +1,56 @@
+import { booleanAttribute, computed, Directive, input } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { buttonVariants, ButtonVariants } from '@spartan-ng/ui-button-helm';
+import { hlm } from '@spartan-ng/ui-core';
+import { cva, VariantProps } from 'class-variance-authority';
+
+export const paginationLinkVariants = cva('', {
+	variants: {},
+	defaultVariants: {},
+});
+export type PaginationLinkVariants = VariantProps<typeof paginationLinkVariants>;
+
+@Directive({
+	selector: '[hlmPaginationLink]',
+	standalone: true,
+	hostDirectives: [
+		{
+			directive: RouterLink,
+			inputs: [
+				'target',
+				'queryParams',
+				'fragment',
+				'queryParamsHandling',
+				'state',
+				'info',
+				'relativeTo',
+				'preserveFragment',
+				'skipLocationChange',
+				'replaceUrl',
+				'routerLink: link',
+			],
+		},
+	],
+	host: {
+		'[class]': '_computedClass()',
+		'[attr.aria-current]': 'isActive() ? "page" : null',
+	},
+})
+export class HlmPaginationLinkDirective {
+	public readonly class = input('');
+	public readonly isActive = input(false, { transform: booleanAttribute });
+	public readonly size = input<ButtonVariants['size']>('icon');
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	public readonly link = input<string | any[] | null | undefined>();
+
+	protected _computedClass = computed(() =>
+		hlm(
+			paginationLinkVariants(),
+			buttonVariants({
+				variant: this.isActive() ? 'outline' : 'ghost',
+				size: this.size(),
+			}),
+			this.class(),
+		),
+	);
+}

package/src/generators/ui/libs/ui-pagination-helm/files/lib/hlm-pagination-next.componet.ts.template

@@ -0,0 +1,31 @@
+import { Component, computed, input } from '@angular/core';
+import { lucideChevronRight } from '@ng-icons/lucide';
+import { hlm } from '@spartan-ng/ui-core';
+import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm';
+import { HlmPaginationLinkDirective } from './hlm-pagination-link.directive';
+
+@Component({
+	selector: 'hlm-pagination-next',
+	standalone: true,
+	imports: [HlmPaginationLinkDirective, HlmIconComponent],
+	providers: [provideIcons({ lucideChevronRight })],
+	template: `
+		<a
+			[class]="_computedClass()"
+			hlmPaginationLink
+			[link]="link()"
+			size="default"
+			[attr.aria-label]="'Go to next page'"
+		>
+			<span>Next</span>
+			<hlm-icon size="sm" name="lucideChevronRight" />
+		</a>
+	`,
+})
+export class HlmPaginationNextComponent {
+	public readonly class = input('');
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	public readonly link = input<string | any[] | null | undefined>();
+
+	protected _computedClass = computed(() => hlm('gap-1 pr-2.5', this.class()));
+}

package/src/generators/ui/libs/ui-pagination-helm/files/lib/hlm-pagination-previous.componet.ts.template

@@ -0,0 +1,31 @@
+import { Component, computed, input } from '@angular/core';
+import { lucideChevronLeft } from '@ng-icons/lucide';
+import { hlm } from '@spartan-ng/ui-core';
+import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm';
+import { HlmPaginationLinkDirective } from './hlm-pagination-link.directive';
+
+@Component({
+	selector: 'hlm-pagination-previous',
+	standalone: true,
+	imports: [HlmPaginationLinkDirective, HlmIconComponent],
+	providers: [provideIcons({ lucideChevronLeft })],
+	template: `
+		<a
+			[class]="_computedClass()"
+			hlmPaginationLink
+			[link]="link()"
+			size="default"
+			[attr.aria-label]="'Go to previous page'"
+		>
+			<hlm-icon size="sm" name="lucideChevronLeft" />
+			<span>Previous</span>
+		</a>
+	`,
+})
+export class HlmPaginationPreviousComponent {
+	public readonly class = input('');
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	public readonly link = input<string | any[] | null | undefined>();
+
+	protected _computedClass = computed(() => hlm('gap-1 pr-2.5', this.class()));
+}

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

@@ -0,0 +1,25 @@
+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';
+
+export const paginationVariants = cva('mx-auto flex w-full justify-center', {
+	variants: {},
+	defaultVariants: {},
+});
+export type PaginationVariants = VariantProps<typeof paginationVariants>;
+
+@Directive({
+	selector: '[hlmPagination]',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+		'[attr.role]': '"navigation"',
+		'[attr.aria-label]': '"pagination"',
+	},
+})
+export class HlmPaginationDirective {
+	public readonly class = input<ClassValue>('');
+
+	protected _computedClass = computed(() => hlm(paginationVariants(), this.class()));
+}

package/src/generators/ui/libs/ui-pagination-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-pagination-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: 'pagination', internalName: 'ui-pagination-helm', publicName: 'ui-pagination-helm' }));
+    });
+}
+exports.generator = generator;
+//# sourceMappingURL=generator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/ui-pagination-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,YAAY,EAC3B,YAAY,EAAE,oBAAoB,EAClC,UAAU,EAAE,oBAAoB,IAC/B,CAAC;IACJ,CAAC;CAAA;AAPD,8BAOC"}

package/src/generators/ui/libs/ui-popover-helm/files/lib/hlm-popover-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 HlmPopoverCloseDirective {
-	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(
 			'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-popover-helm/files/lib/hlm-popover-content.directive.ts.template

@@ -1,4 +1,4 @@
-import { computed, Directive, effect, ElementRef, inject, Input, Renderer2, signal } from '@angular/core';
+import { Directive, ElementRef, Renderer2, computed, effect, inject, input, signal } from '@angular/core';
 import { hlm, injectExposesStateProvider } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
@@ -21,17 +21,11 @@ export class HlmPopoverContentDirective {
 		});
 	}
 
-	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(
 			'relative border-border w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-			this._userCls(),
-		);
-	}
+			this.userClass(),
+		),
+	);
 }

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

@@ -1,4 +1,4 @@
-import { computed, Directive, DoCheck, effect, ElementRef, inject, Input, Renderer2, signal } from '@angular/core';
+import { Directive, DoCheck, ElementRef, Renderer2, computed, effect, inject, input, signal } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
@@ -14,16 +14,10 @@ export class HlmProgressIndicatorDirective implements DoCheck {
 	private _renderer = inject(Renderer2);
 	private readonly _value = signal(0);
 
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm('inline-flex transform-gpu h-full w-full flex-1 bg-primary transition-all', this._userCls());
-	}
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() =>
+		hlm('inline-flex transform-gpu h-full w-full flex-1 bg-primary transition-all', this.userClass()),
+	);
 
 	constructor() {
 		effect(() => {

package/src/generators/ui/libs/ui-progress-helm/files/lib/hlm-progress.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,14 +10,8 @@ import { ClassValue } from 'clsx';
 	},
 })
 export class HlmProgressDirective {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm('inline-flex relative h-4 w-full overflow-hidden rounded-full bg-secondary', this._userCls());
-	}
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() =>
+		hlm('inline-flex relative h-4 w-full overflow-hidden rounded-full bg-secondary', this.userClass()),
+	);
 }

package/src/generators/ui/libs/ui-radio-group-helm/files/lib/hlm-radio-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,14 +10,6 @@ import { ClassValue } from 'clsx';
 	},
 })
 export class HlmRadioGroupDirective {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm('block', this._userCls());
-	}
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm('block', this.userClass()));
 }

package/src/generators/ui/libs/ui-radio-group-helm/files/lib/hlm-radio-indicator.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';
 
@@ -19,14 +19,6 @@ const btnLike =
 	`,
 })
 export class HlmRadioIndicatorComponent {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm('relative inline-flex h-4 w-4', this._userCls());
-	}
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm('relative inline-flex h-4 w-4', this.userClass()));
 }

package/src/generators/ui/libs/ui-radio-group-helm/files/lib/hlm-radio.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,14 +10,8 @@ import { ClassValue } from 'clsx';
 	},
 })
 export class HlmRadioDirective {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm('group [&.brn-radio-disabled]:text-muted-foreground flex items-center space-x-2', this._userCls());
-	}
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() =>
+		hlm('group [&.brn-radio-disabled]:text-muted-foreground flex items-center space-x-2', this.userClass()),
+	);
 }