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

package/src/generators/ui/libs/ui-button-helm/files/lib/hlm-button.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';
@@ -28,7 +28,7 @@ export const buttonVariants = cva(
 		},
 	},
 );
-type ButtonVariants = VariantProps<typeof buttonVariants>;
+export type ButtonVariants = VariantProps<typeof buttonVariants>;
 
 @Directive({
 	selector: '[hlmBtn]',
@@ -38,10 +38,15 @@ type ButtonVariants = VariantProps<typeof buttonVariants>;
 	},
 })
 export class HlmButtonDirective {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	private readonly _settableClass = signal<ClassValue>('');
+
+	protected _computedClass = computed(() =>
+		hlm(buttonVariants({ variant: this._variant(), size: this._size() }), this._settableClass(), this._userClass()),
+	);
+
+	setClass(value: ClassValue) {
+		this._settableClass.set(value);
 	}
 
 	private readonly _variant = signal<ButtonVariants['variant']>('default');
@@ -55,9 +60,4 @@ export class HlmButtonDirective {
 	set size(size: ButtonVariants['size']) {
 		this._size.set(size);
 	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(buttonVariants({ variant: this._variant(), size: this._size() }), this._userCls());
-	}
 }

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

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

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

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

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

@@ -1,4 +1,4 @@
-import { computed, Directive, Input, signal } from '@angular/core';
+import { computed, Directive, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { cva, VariantProps } from 'class-variance-authority';
 import { ClassValue } from 'clsx';
@@ -24,20 +24,10 @@ export type CardFooterVariants = VariantProps<typeof cardFooterVariants>;
 	},
 })
 export class HlmCardFooterDirective {
-	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(cardFooterVariants({ direction: this.direction() }), this._userClass()),
+	);
 
-	private readonly _direction = signal<CardFooterVariants['direction']>('row');
-	@Input()
-	set direction(direction: CardFooterVariants['direction']) {
-		this._direction.set(direction);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(cardFooterVariants({ direction: this._direction() }), this._userCls());
-	}
+	public readonly direction = input<CardFooterVariants['direction']>('row');
 }

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

@@ -1,4 +1,4 @@
-import { computed, Directive, Input, signal } from '@angular/core';
+import { computed, Directive, input, signal } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { cva, VariantProps } from 'class-variance-authority';
 import { ClassValue } from 'clsx';
@@ -24,20 +24,11 @@ export type CardHeaderVariants = VariantProps<typeof cardHeaderVariants>;
 	},
 })
 export class HlmCardHeaderDirective {
-	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(cardHeaderVariants({ direction: this._direction() }), this._userClass()),
+	);
 
 	private readonly _direction = signal<CardHeaderVariants['direction']>('column');
-	@Input()
-	set direction(direction: CardHeaderVariants['direction']) {
-		this._direction.set(direction);
-	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(cardHeaderVariants({ direction: this._direction() }), this._userCls());
-	}
+	public readonly direction = input<CardHeaderVariants['direction']>('column');
 }

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

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

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

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

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

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { HlmCarouselContentComponent } from './lib/hlm-carousel-content.component';
+import { HlmCarouselItemComponent } from './lib/hlm-carousel-item.component';
+import { HlmCarouselNextComponent } from './lib/hlm-carousel-next.component';
+import { HlmCarouselPreviousComponent } from './lib/hlm-carousel-previous.component';
+import { HlmCarouselComponent } from './lib/hlm-carousel.component';
+
+export * from './lib/hlm-carousel-content.component';
+export * from './lib/hlm-carousel-item.component';
+export * from './lib/hlm-carousel-next.component';
+export * from './lib/hlm-carousel-previous.component';
+export * from './lib/hlm-carousel.component';
+
+export const HlmCarouselImports = [
+	HlmCarouselComponent,
+	HlmCarouselContentComponent,
+	HlmCarouselItemComponent,
+	HlmCarouselPreviousComponent,
+	HlmCarouselNextComponent,
+] as const;
+
+@NgModule({
+	imports: [...HlmCarouselImports],
+	exports: [...HlmCarouselImports],
+})
+export class HlmCarouselModule {}

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

@@ -0,0 +1,25 @@
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, inject, input } from '@angular/core';
+import { hlm } from '@spartan-ng/ui-core';
+import { ClassValue } from 'clsx';
+import { HlmCarouselComponent } from './hlm-carousel.component';
+
+@Component({
+	selector: 'hlm-carousel-content',
+	standalone: true,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	encapsulation: ViewEncapsulation.None,
+	host: {
+		'[class]': '_computedClass()',
+	},
+	template: `
+		<ng-content />
+	`,
+})
+export class HlmCarouselContentComponent {
+	private orientation = inject(HlmCarouselComponent).orientation;
+
+	_userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() =>
+		hlm('flex', this.orientation() === 'horizontal' ? '-ml-4' : '-mt-4 flex-col', this._userClass()),
+	);
+}

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

@@ -0,0 +1,26 @@
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, inject, input } from '@angular/core';
+import { hlm } from '@spartan-ng/ui-core';
+import { ClassValue } from 'clsx';
+import { HlmCarouselComponent } from './hlm-carousel.component';
+
+@Component({
+	selector: 'hlm-carousel-item',
+	standalone: true,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	encapsulation: ViewEncapsulation.None,
+	host: {
+		'[class]': '_computedClass()',
+		role: 'group',
+		'aria-roledescription': 'slide',
+	},
+	template: `
+		<ng-content />
+	`,
+})
+export class HlmCarouselItemComponent {
+	_userClass = input<ClassValue>('', { alias: 'class' });
+	private orientation = inject(HlmCarouselComponent).orientation;
+	protected _computedClass = computed(() =>
+		hlm('min-w-0 shrink-0 grow-0 basis-full', this.orientation() === 'horizontal' ? 'pl-4' : 'pt-4', this._userClass()),
+	);
+}

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

@@ -0,0 +1,62 @@
+import {
+	ChangeDetectionStrategy,
+	Component,
+	ViewEncapsulation,
+	computed,
+	effect,
+	inject,
+	input,
+	untracked,
+} from '@angular/core';
+import { lucideArrowRight } from '@ng-icons/lucide';
+import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
+import { hlm } from '@spartan-ng/ui-core';
+import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm';
+import { ClassValue } from 'clsx';
+import { HlmCarouselComponent } from './hlm-carousel.component';
+
+@Component({
+	// eslint-disable-next-line @angular-eslint/component-selector
+	selector: 'button[hlm-carousel-next], button[hlmCarouselNext]',
+	standalone: true,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	encapsulation: ViewEncapsulation.None,
+	host: {
+		'[disabled]': 'isDisabled()',
+		'(click)': 'carousel.scrollNext()',
+	},
+	hostDirectives: [{ directive: HlmButtonDirective, inputs: ['variant', 'size'] }],
+	providers: [provideIcons({ lucideArrowRight })],
+	imports: [HlmIconComponent],
+	template: `
+		<hlm-icon size="sm" name="lucideArrowRight" />
+		<span class="sr-only">Next slide</span>
+	`,
+})
+export class HlmCarouselNextComponent {
+	protected carousel = inject(HlmCarouselComponent);
+	_userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() =>
+		hlm(
+			'absolute h-8 w-8 rounded-full',
+			this.carousel.orientation() === 'horizontal'
+				? '-right-12 top-1/2 -translate-y-1/2'
+				: '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
+			this._userClass(),
+		),
+	);
+	protected isDisabled = () => !this.carousel.canScrollNext();
+
+	constructor() {
+		const button = inject(HlmButtonDirective);
+
+		button.variant = 'outline';
+		button.size = 'icon';
+
+		effect(() => {
+			const computedClass = this._computedClass();
+
+			untracked(() => button.setClass(computedClass));
+		});
+	}
+}

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

@@ -0,0 +1,62 @@
+import {
+	ChangeDetectionStrategy,
+	Component,
+	ViewEncapsulation,
+	computed,
+	effect,
+	inject,
+	input,
+	untracked,
+} from '@angular/core';
+import { lucideArrowLeft } from '@ng-icons/lucide';
+import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
+import { hlm } from '@spartan-ng/ui-core';
+import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm';
+import { ClassValue } from 'clsx';
+import { HlmCarouselComponent } from './hlm-carousel.component';
+
+@Component({
+	// eslint-disable-next-line @angular-eslint/component-selector
+	selector: 'button[hlm-carousel-previous], button[hlmCarouselPrevious]',
+	standalone: true,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	encapsulation: ViewEncapsulation.None,
+	host: {
+		'[disabled]': 'isDisabled()',
+		'(click)': 'carousel.scrollPrev()',
+	},
+	hostDirectives: [{ directive: HlmButtonDirective, inputs: ['variant', 'size'] }],
+	providers: [provideIcons({ lucideArrowLeft })],
+	imports: [HlmIconComponent],
+	template: `
+		<hlm-icon size="sm" name="lucideArrowLeft" />
+		<span class="sr-only">Previous slide</span>
+	`,
+})
+export class HlmCarouselPreviousComponent {
+	protected carousel = inject(HlmCarouselComponent);
+	_userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() =>
+		hlm(
+			'absolute h-8 w-8 rounded-full',
+			this.carousel.orientation() === 'horizontal'
+				? '-left-12 top-1/2 -translate-y-1/2'
+				: '-top-12 left-1/2 -translate-x-1/2 rotate-90',
+			this._userClass(),
+		),
+	);
+	protected isDisabled = () => !this.carousel.canScrollPrev();
+
+	constructor() {
+		const button = inject(HlmButtonDirective);
+
+		button.variant = 'outline';
+		button.size = 'icon';
+
+		effect(() => {
+			const computedClass = this._computedClass();
+
+			untracked(() => button.setClass(computedClass));
+		});
+	}
+}

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

@@ -0,0 +1,93 @@
+import {
+	ChangeDetectionStrategy,
+	Component,
+	HostListener,
+	InputSignal,
+	Signal,
+	ViewChild,
+	ViewEncapsulation,
+	computed,
+	input,
+	signal,
+} from '@angular/core';
+import { hlm } from '@spartan-ng/ui-core';
+import { ClassValue } from 'clsx';
+import { EmblaCarouselDirective, EmblaEventType, EmblaPluginType, type EmblaOptionsType } from 'embla-carousel-angular';
+
+@Component({
+	selector: 'hlm-carousel',
+	standalone: true,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	encapsulation: ViewEncapsulation.None,
+	host: {
+		'[class]': '_computedClass()',
+		role: 'region',
+		'aria-roledescription': 'carousel',
+	},
+	imports: [EmblaCarouselDirective],
+	template: `
+		<div
+			emblaCarousel
+			class="overflow-hidden"
+			[plugins]="plugins()"
+			[options]="emblaOptions()"
+			[subscribeToEvents]="['init', 'select', 'reInit']"
+			(emblaChange)="onEmblaEvent($event)"
+		>
+			<ng-content select="hlm-carousel-content" />
+		</div>
+		<ng-content />
+	`,
+})
+export class HlmCarouselComponent {
+	@ViewChild(EmblaCarouselDirective) protected emblaCarousel?: EmblaCarouselDirective;
+
+	_userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm('relative', this._userClass()));
+
+	orientation = input<'horizontal' | 'vertical'>('horizontal');
+	options: InputSignal<Omit<EmblaOptionsType, 'axis'> | undefined> = input();
+	plugins: InputSignal<EmblaPluginType[]> = input([] as EmblaPluginType[]);
+
+	protected emblaOptions: Signal<EmblaOptionsType> = computed(() => ({
+		...this.options(),
+		axis: this.orientation() === 'horizontal' ? 'x' : 'y',
+	}));
+
+	private _canScrollPrev = signal(false);
+	canScrollPrev = this._canScrollPrev.asReadonly();
+	private _canScrollNext = signal(false);
+	canScrollNext = this._canScrollNext.asReadonly();
+
+	protected onEmblaEvent(event: EmblaEventType) {
+		const emblaApi = this.emblaCarousel?.emblaApi;
+
+		if (!emblaApi) {
+			return;
+		}
+
+		if (event === 'select' || event === 'init' || event === 'reInit') {
+			this._canScrollPrev.set(emblaApi.canScrollPrev());
+			this._canScrollNext.set(emblaApi.canScrollNext());
+		}
+	}
+
+	@HostListener('keydown', ['$event'])
+	protected onKeydown(event: KeyboardEvent) {
+		if (event.key === 'ArrowLeft') {
+			event.preventDefault();
+			this.emblaCarousel?.scrollPrev();
+		} else if (event.key === 'ArrowRight') {
+			event.preventDefault();
+			this.emblaCarousel?.scrollNext();
+		}
+	}
+
+	scrollPrev() {
+		this.emblaCarousel?.scrollPrev();
+	}
+
+	scrollNext() {
+		this.emblaCarousel?.scrollNext();
+	}
+}

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/ui-carousel-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,UAAU,EACzB,YAAY,EAAE,kBAAkB,EAChC,UAAU,EAAE,kBAAkB,IAC7B,CAAC;IACJ,CAAC;CAAA;AAPD,8BAOC"}

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

@@ -1,5 +1,5 @@
-import { Component, computed, inject, Input, signal } from '@angular/core';
-import { radixCheck } from '@ng-icons/radix-icons';
+import { Component, computed, inject, input, Input, signal } from '@angular/core';
+import { lucideCheck } from '@ng-icons/lucide';
 import { BrnCheckboxComponent } from '@spartan-ng/ui-checkbox-brain';
 import { hlm } from '@spartan-ng/ui-core';
 import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm';
@@ -9,7 +9,7 @@ import { ClassValue } from 'clsx';
 	selector: 'hlm-checkbox-checkicon',
 	standalone: true,
 	imports: [HlmIconComponent],
-	providers: [provideIcons({ radixCheck })],
+	providers: [provideIcons({ lucideCheck })],
 	host: {
 		'[class]': '_computedClass()',
 	},
@@ -20,24 +20,23 @@ import { ClassValue } from 'clsx';
 export class HlmCheckboxCheckIconComponent {
 	private _brnCheckbox = inject(BrnCheckboxComponent);
 	protected _checked = this._brnCheckbox?.isChecked;
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
+	// TODO - this cannot be private for some reason
+	// build fails because hlm-checkbox.component.ts is giving the following error:
+	// Property '_userClass' is private and only accessible within class 'HlmCheckboxCheckIconComponent'.
+	// it should work as private but it doesn't
+	readonly _userClass = input<ClassValue>('', { alias: 'class' });
 
-	protected readonly _iconName = signal<string>('radixCheck');
+	protected readonly _iconName = signal<string>('lucideCheck');
 	@Input()
 	set iconName(iconName: string) {
 		this._iconName.set(iconName);
 	}
 
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm(
+	protected _computedClass = computed(() =>
+		hlm(
 			'h-4 w-4 leading-none group-data-[state=unchecked]:opacity-0',
 			this._checked() === 'indeterminate' ? 'opacity-50' : '',
-			this._userCls(),
-		);
-	}
+			this._userClass(),
+		),
+	);
 }

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

@@ -1,4 +1,14 @@
-import { booleanAttribute, Component, computed, EventEmitter, forwardRef, Input, Output, 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 { BrnCheckboxComponent, indeterminateBooleanAttribute } from '@spartan-ng/ui-checkbox-brain';
 import { hlm } from '@spartan-ng/ui-core';
@@ -24,7 +34,7 @@ export const HLM_CHECKBOX_VALUE_ACCESSOR = {
 			[disabled]="_disabled()"
 			[id]="id"
 		>
-			<hlm-checkbox-checkicon [iconName]="_checkIconName()" />
+			<hlm-checkbox-checkicon [class]="_checkIconClass()" [iconName]="_checkIconName()" />
 		</brn-checkbox>
 	`,
 	host: {
@@ -37,17 +47,28 @@ export const HLM_CHECKBOX_VALUE_ACCESSOR = {
 	providers: [HLM_CHECKBOX_VALUE_ACCESSOR],
 })
 export class HlmCheckboxComponent {
-	private readonly _userCls = signal<ClassValue>('');
-	@Input()
-	set class(userCls: ClassValue) {
-		this._userCls.set(userCls);
-	}
-	protected readonly _checkIconName = signal<string>('radixCheck');
+	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() =>
+		hlm(
+			'group inline-flex border border-foreground shrink-0 cursor-pointer items-center rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring' +
+				' focus-visible:ring-offset-2 focus-visible:ring-offset-background data-[state=checked]:text-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-background',
+			this._disabled() ? 'cursor-not-allowed opacity-50' : '',
+			this._userClass(),
+		),
+	);
+
+	protected readonly _checkIconName = signal<string>('lucideCheck');
 	@Input()
 	set checkIconName(checkIconName: string) {
 		this._checkIconName.set(checkIconName);
 	}
 
+	protected readonly _checkIconClass = signal<string>('');
+	@Input()
+	set checkIconClass(checkIconName: string) {
+		this._checkIconClass.set(checkIconName);
+	}
+
 	@Output()
 	public changed = new EventEmitter<boolean>();
 
@@ -88,15 +109,6 @@ export class HlmCheckboxComponent {
 	@Input('aria-describedby')
 	ariaDescribedby: string | null = null;
 
-	protected _computedClass = computed(() =>
-		hlm(
-			'group inline-flex border border-foreground shrink-0 cursor-pointer items-center rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring' +
-				' focus-visible:ring-offset-2 focus-visible:ring-offset-background data-[state=checked]:text-background data-[state=unchecked]:bg-foreground data-[state=checked]:bg-primary data-[state=unchecked]:bg-background',
-			this._disabled() ? 'cursor-not-allowed opacity-50' : '',
-			this._userCls(),
-		),
-	);
-
 	/** CONROL VALUE ACCESSOR */
 
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any