chore: nightly release 2025-01-24 ⚡

libs/brain/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@spartan-ng/brain",
-	"version": "0.0.1-alpha.390",
+	"version": "0.0.1-alpha.391",
 	"sideEffects": false,
 	"exports": {
 		"./hlm-tailwind-preset": {

libs/cli/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@spartan-ng/cli",
-	"version": "0.0.1-alpha.390",
+	"version": "0.0.1-alpha.391",
 	"type": "commonjs",
 	"dependencies": {
 		"@nx/angular": ">=20.0.0",

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

@@ -17,7 +17,6 @@ import type { 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,

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

@@ -17,7 +17,6 @@ import type { 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,

libs/cli/src/generators/ui/libs/ui-checkbox-helm/files/index.ts.template

@@ -1,12 +1,10 @@
 import { NgModule } from '@angular/core';
 
-import { HlmCheckboxCheckIconComponent } from './lib/hlm-checkbox-checkicon.component';
 import { HlmCheckboxComponent } from './lib/hlm-checkbox.component';
 
-export * from './lib/hlm-checkbox-checkicon.component';
 export * from './lib/hlm-checkbox.component';
 
-export const HlmCheckboxImports = [HlmCheckboxComponent, HlmCheckboxCheckIconComponent] as const;
+export const HlmCheckboxImports = [HlmCheckboxComponent] as const;
 @NgModule({
 	imports: [...HlmCheckboxImports],
 	exports: [...HlmCheckboxImports],

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

@@ -1,9 +1,12 @@
 import { Component, booleanAttribute, computed, forwardRef, input, model, output, signal } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideCheck } from '@ng-icons/lucide';
 import { BrnCheckboxComponent } from '@spartan-ng/brain/checkbox';
 import { hlm } from '@spartan-ng/brain/core';
+import type { ChangeFn, TouchFn } from '@spartan-ng/brain/forms';
+import { HlmIconDirective } from '@spartan-ng/ui-icon-helm';
 import type { ClassValue } from 'clsx';
-import { HlmCheckboxCheckIconComponent } from './hlm-checkbox-checkicon.component';
 
 export const HLM_CHECKBOX_VALUE_ACCESSOR = {
 	provide: NG_VALUE_ACCESSOR,
@@ -14,7 +17,7 @@ export const HLM_CHECKBOX_VALUE_ACCESSOR = {
 @Component({
 	selector: 'hlm-checkbox',
 	standalone: true,
-	imports: [BrnCheckboxComponent, HlmCheckboxCheckIconComponent],
+	imports: [BrnCheckboxComponent, NgIcon, HlmIconDirective],
 	template: `
 		<brn-checkbox
 			[id]="id()"
@@ -27,9 +30,9 @@ export const HLM_CHECKBOX_VALUE_ACCESSOR = {
 			[aria-labelledby]="ariaLabelledby()"
 			[aria-describedby]="ariaDescribedby()"
 			(changed)="_handleChange()"
-			(touched)="_onTouched()"
+			(touched)="_onTouched?.()"
 		>
-			<hlm-checkbox-checkicon [class]="checkIconClass()" [iconName]="checkIconName()" />
+			<ng-icon [class]="_computedIconClass()" hlm size="sm" name="lucideCheck" />
 		</brn-checkbox>
 	`,
 	host: {
@@ -40,10 +43,12 @@ export const HLM_CHECKBOX_VALUE_ACCESSOR = {
 		'[attr.aria-describedby]': 'null',
 	},
 	providers: [HLM_CHECKBOX_VALUE_ACCESSOR],
+	viewProviders: [provideIcons({ lucideCheck })],
 })
 export class HlmCheckboxComponent {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() =>
+
+	protected readonly _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',
@@ -52,6 +57,10 @@ export class HlmCheckboxComponent {
 		),
 	);
 
+	protected readonly _computedIconClass = computed(() =>
+		hlm('leading-none group-data-[state=unchecked]:opacity-0', this.checked() === 'indeterminate' ? 'opacity-50' : ''),
+	);
+
 	/** Used to set the id on the underlying brn element. */
 	public readonly id = input<string | null>(null);
 
@@ -64,54 +73,52 @@ export class HlmCheckboxComponent {
 	/** Used to set the aria-describedby attribute on the underlying brn element. */
 	public readonly ariaDescribedby = input<string | null>(null, { alias: 'aria-describedby' });
 
-	public readonly checked = model<boolean | 'indeterminate'>(false);
+	/** The checked state of the checkbox. */
+	public readonly checked = model<CheckboxValue>(false);
 
+	/** The name attribute of the checkbox. */
 	public readonly name = input<string | null>(null);
+
+	/** Whether the checkbox is required. */
 	public readonly required = input(false, { transform: booleanAttribute });
 
+	/** Whether the checkbox is disabled. */
 	public readonly disabled = input(false, { transform: booleanAttribute });
 
 	protected readonly state = computed(() => ({
 		disabled: signal(this.disabled()),
 	}));
 
-	// icon inputs
-	public readonly checkIconName = input<string>('lucideCheck');
-	public readonly checkIconClass = input<ClassValue>('');
-
 	public readonly changed = output<boolean>();
 
+	protected _onChange?: ChangeFn<CheckboxValue>;
+	protected _onTouched?: TouchFn;
+
 	protected _handleChange(): void {
 		if (this.state().disabled()) return;
 
 		const previousChecked = this.checked();
 		this.checked.set(previousChecked === 'indeterminate' ? true : !previousChecked);
-		this._onChange(!previousChecked);
+		this._onChange?.(!previousChecked);
 		this.changed.emit(!previousChecked);
 	}
 
 	/** CONROL VALUE ACCESSOR */
-
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	writeValue(value: any): void {
+	writeValue(value: CheckboxValue): void {
 		this.checked.set(!!value);
 	}
-	// eslint-disable-next-line @typescript-eslint/no-empty-function,,@typescript-eslint/no-explicit-any
-	protected _onChange = (_: any) => {};
-	// eslint-disable-next-line @typescript-eslint/no-empty-function
-	protected _onTouched = () => {};
 
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	registerOnChange(fn: any): void {
+	registerOnChange(fn: ChangeFn<CheckboxValue>): void {
 		this._onChange = fn;
 	}
 
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	registerOnTouched(fn: any): void {
+	registerOnTouched(fn: TouchFn): void {
 		this._onTouched = fn;
 	}
 
 	setDisabledState(isDisabled: boolean): void {
 		this.state().disabled.set(isDisabled);
 	}
 }
+
+type CheckboxValue = boolean | 'indeterminate';

libs/cli/src/generators/ui/libs/ui-dialog-helm/files/lib/hlm-dialog.service.ts.template

@@ -9,8 +9,7 @@ import {
 import { HlmDialogContentComponent } from './hlm-dialog-content.component';
 import { hlmDialogOverlayClass } from './hlm-dialog-overlay.directive';
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type HlmDialogOptions<DialogContext = any> = BrnDialogOptions & {
+export type HlmDialogOptions<DialogContext = unknown> = BrnDialogOptions & {
 	contentClass?: string;
 	context?: DialogContext;
 };
@@ -28,7 +27,7 @@ export class HlmDialogService {
 
 			...(options ?? {}),
 			backdropClass: cssClassesToArray(`${hlmDialogOverlayClass} ${options?.backdropClass ?? ''}`),
-			context: { ...options?.context, $component: component, $dynamicComponentClass: options?.contentClass },
+			context: { ...(options?.context ?? {}), $component: component, $dynamicComponentClass: options?.contentClass },
 		};
 
 		return this._brnDialogService.open(HlmDialogContentComponent, undefined, mergedOptions.context, mergedOptions);

libs/cli/src/generators/ui/libs/ui-icon-helm/files/lib/hlm-icon.directive.ts.template

@@ -1,12 +1,7 @@
 import { Directive, computed, input } from '@angular/core';
 import { injectHlmIconConfig } from './hlm-icon.token';
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const DEFINED_SIZES = ['xs', 'sm', 'base', 'lg', 'xl', 'none'] as const;
-
-type DefinedSizes = (typeof DEFINED_SIZES)[number];
-
-export type IconSize = DefinedSizes | (Record<never, never> & string);
+export type IconSize = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | 'none' | (Record<never, never> & string);
 
 @Directive({
 	selector: 'ng-icon[hlm]',

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

@@ -28,7 +28,7 @@ export const HLM_SWITCH_VALUE_ACCESSOR = {
 			[class]="_computedClass()"
 			[checked]="checked()"
 			(changed)="handleChange($event)"
-			(touched)="_onTouched()"
+			(touched)="_onTouched?.()"
 			[disabled]="disabled()"
 			[id]="id()"
 			[aria-label]="ariaLabel()"
@@ -50,8 +50,10 @@ export class HlmSwitchComponent {
 		),
 	);
 
+	/** The checked state of the switch. */
 	public readonly checked = model<boolean>(false);
 
+	/** The disabled state of the switch. */
 	public readonly disabled = input<boolean, BooleanInput>(false, {
 		transform: booleanAttribute,
 	});
@@ -68,16 +70,15 @@ export class HlmSwitchComponent {
 	/** Used to set the aria-describedby attribute on the underlying brn element. */
 	public readonly ariaDescribedby = input<string | null>(null, { alias: 'aria-describedby' });
 
+	/** Emits when the checked state of the switch changes. */
 	public readonly changed = output<boolean>();
 
-	// eslint-disable-next-line @typescript-eslint/no-empty-function
-	protected _onChange: ChangeFn<boolean> = () => {};
-	// eslint-disable-next-line @typescript-eslint/no-empty-function
-	protected _onTouched: TouchFn = () => {};
+	protected _onChange?: ChangeFn<boolean>;
+	protected _onTouched?: TouchFn;
 
 	protected handleChange(value: boolean): void {
 		this.checked.set(value);
-		this._onChange(value);
+		this._onChange?.(value);
 		this.changed.emit(value);
 	}