fix: code quality linting improvements

apps/app/src/app/pages/(components)/components/(checkbox)/checkbox.preview.ts

@@ -17,7 +17,7 @@ export class CheckboxPreviewComponent {}
 
 export const defaultCode = `
 import { Component } from '@angular/core';
-import { HlmCheckboxCheckIconComponent, HlmCheckboxComponent } from '@spartan-ng/ui-checkbox-helm';
+import { HlmCheckboxComponent } from '@spartan-ng/ui-checkbox-helm';
 import { HlmLabelDirective } from '@spartan-ng/ui-label-helm';
 @Component({
 	selector: 'spartan-checkbox-preview',

apps/app/src/app/pages/(components)/components/(data-table)/data-table.preview.ts

@@ -9,7 +9,7 @@ import { BrnMenuTriggerDirective } from '@spartan-ng/brain/menu';
 import { BrnSelectModule } from '@spartan-ng/brain/select';
 import { BrnTableModule, type PaginatorState, useBrnColumnManager } from '@spartan-ng/brain/table';
 import { HlmButtonModule } from '@spartan-ng/ui-button-helm';
-import { HlmCheckboxCheckIconComponent, HlmCheckboxComponent } from '@spartan-ng/ui-checkbox-helm';
+import { HlmCheckboxComponent } from '@spartan-ng/ui-checkbox-helm';
 import { HlmIconDirective } from '@spartan-ng/ui-icon-helm';
 import { HlmInputDirective } from '@spartan-ng/ui-input-helm';
 import { HlmMenuModule } from '@spartan-ng/ui-menu-helm';
@@ -168,7 +168,6 @@ const PAYMENT_DATA: Payment[] = [
 		HlmIconDirective,
 		HlmInputDirective,
 
-		HlmCheckboxCheckIconComponent,
 		HlmCheckboxComponent,
 
 		BrnSelectModule,
@@ -404,7 +403,7 @@ import { toObservable, toSignal } from '@angular/core/rxjs-interop';
 import { FormsModule } from '@angular/forms';
 import { lucideArrowUpDown, lucideChevronDown, lucideEllipsis } from '@ng-icons/lucide';
 import { HlmButtonModule } from '@spartan-ng/ui-button-helm';
-import { HlmCheckboxCheckIconComponent, HlmCheckboxComponent } from '@spartan-ng/ui-checkbox-helm';
+import { HlmCheckboxComponent } from '@spartan-ng/ui-checkbox-helm';
 import { HlmIconDirective, provideIcons } from '@spartan-ng/ui-icon-helm';
 import { HlmInputDirective } from '@spartan-ng/ui-input-helm';
 import { BrnMenuTriggerDirective } from '@spartan-ng/brain/menu';
@@ -565,7 +564,6 @@ const PAYMENT_DATA: Payment[] = [
     HlmIconDirective,
     HlmInputDirective,
 
-    HlmCheckboxCheckIconComponent,
     HlmCheckboxComponent,
 
     BrnSelectModule,

libs/ui/breadcrumb/helm/eslint.config.js

@@ -1,42 +1,34 @@
-const { FlatCompat } = require('@eslint/eslintrc');
+const nx = require('@nx/eslint-plugin');
 const baseConfig = require('../../../../eslint.config.cjs');
-const js = require('@eslint/js');
-
-const compat = new FlatCompat({
-	baseDirectory: __dirname,
-	recommendedConfig: js.configs.recommended,
-});
 
 module.exports = [
 	...baseConfig,
-	...compat
-		.config({ extends: ['plugin:@nx/angular', 'plugin:@angular-eslint/template/process-inline-templates'] })
-		.map((config) => ({
-			...config,
-			files: ['**/*.ts'],
-			rules: {
-				'@angular-eslint/no-host-metadata-property': 0,
-				'@angular-eslint/directive-selector': [
-					'error',
-					{
-						type: 'attribute',
-						prefix: 'hlm',
-						style: 'camelCase',
-					},
-				],
-				'@angular-eslint/component-selector': [
-					'error',
-					{
-						type: 'element',
-						prefix: 'hlm',
-						style: 'kebab-case',
-					},
-				],
-			},
-		})),
-	...compat.config({ extends: ['plugin:@nx/angular-template'] }).map((config) => ({
-		...config,
+	...nx.configs['flat/angular'],
+	...nx.configs['flat/angular-template'],
+	{
+		files: ['**/*.ts'],
+		rules: {
+			'@angular-eslint/directive-selector': [
+				'error',
+				{
+					type: 'attribute',
+					prefix: 'hlm',
+					style: 'camelCase',
+				},
+			],
+			'@angular-eslint/component-selector': [
+				'error',
+				{
+					type: 'element',
+					prefix: 'hlm',
+					style: 'kebab-case',
+				},
+			],
+		},
+	},
+	{
 		files: ['**/*.html'],
+		// Override or add rules here
 		rules: {},
-	})),
+	},
 ];

libs/ui/carousel/helm/eslint.config.js

@@ -19,7 +19,7 @@ module.exports = [
 			'@angular-eslint/component-selector': [
 				'error',
 				{
-					type: 'element',
+					type: ['attribute', 'element'],
 					prefix: 'hlm',
 					style: 'kebab-case',
 				},

libs/ui/carousel/helm/src/lib/hlm-carousel-next.component.ts

@@ -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/ui/carousel/helm/src/lib/hlm-carousel-previous.component.ts

@@ -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/ui/checkbox/helm/src/index.ts

@@ -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/ui/checkbox/helm/src/lib/hlm-checkbox.component.ts

@@ -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/ui/dialog/helm/src/lib/hlm-dialog.service.ts

@@ -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/ui/icon/helm/src/lib/hlm-icon.directive.ts

@@ -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/ui/sonner/helm/jest.config.ts

@@ -1,4 +1,3 @@
-/* eslint-disable */
 export default {
 	displayName: 'ui-sonner-helm',
 	preset: '../../../../jest.preset.cjs',

libs/ui/switch/helm/src/lib/hlm-switch.component.ts

@@ -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);
 	}