@spartan-ng/cli 0.0.1-alpha.360 → 0.0.1-alpha.361

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spartan-ng/cli",
-  "version": "0.0.1-alpha.360",
+  "version": "0.0.1-alpha.361",
   "type": "commonjs",
   "dependencies": {
     "@nx/js": "^19.1.0",

package/src/generators/base/versions.d.ts

@@ -1,25 +1,25 @@
 export declare const FALLBACK_ANGULAR_VERSION = "^18.0.0";
 export declare const NG_ICONS_VERSION = "^25.1.0";
-export declare const SPARTAN_ACCORDION_BRAIN_VERSION = "0.0.1-alpha.352";
-export declare const SPARTAN_ALERT_DIALOG_BRAIN_VERSION = "0.0.1-alpha.352";
-export declare const SPARTAN_AVATAR_BRAIN_VERSION = "0.0.1-alpha.352";
-export declare const SPARTAN_COMMAND_BRAIN_VERSION = "0.0.1-alpha.352";
-export declare const SPARTAN_COLLAPSIBLE_BRAIN_VERSION = "0.0.1-alpha.352";
-export declare const SPARTAN_CORE_VERSION = "0.0.1-alpha.352";
-export declare const SPARTAN_DIALOG_BRAIN_VERSION = "0.0.1-alpha.352";
-export declare const SPARTAN_HOVERCARD_BRAIN_VERSION = "0.0.1-alpha.352";
-export declare const SPARTAN_LABEL_BRAIN_VERSION = "0.0.1-alpha.352";
-export declare const SPARTAN_MENU_BRAIN_VERSION = "0.0.1-alpha.352";
-export declare const SPARTAN_POPOVER_BRAIN_VERSION = "0.0.1-alpha.352";
-export declare const SPARTAN_PROGRESS_BRAIN_VERSION = "0.0.1-alpha.352";
-export declare const SPARTAN_RADIO_GROUP_BRAIN_VERSION = "0.0.1-alpha.352";
-export declare const SPARTAN_SELECT_BRAIN_VERSION = "0.0.1-alpha.352";
-export declare const SPARTAN_SEPARATOR_BRAIN_VERSION = "0.0.1-alpha.352";
-export declare const SPARTAN_SHEET_BRAIN_VERSION = "0.0.1-alpha.352";
-export declare const SPARTAN_SWITCH_VERSION = "0.0.1-alpha.352";
-export declare const SPARTAN_TABS_VERSION = "0.0.1-alpha.352";
-export declare const SPARTAN_TABLE_VERSION = "0.0.1-alpha.352";
-export declare const SPARTAN_TOGGLE_VERSION = "0.0.1-alpha.352";
+export declare const SPARTAN_ACCORDION_BRAIN_VERSION = "0.0.1-alpha.353";
+export declare const SPARTAN_ALERT_DIALOG_BRAIN_VERSION = "0.0.1-alpha.353";
+export declare const SPARTAN_AVATAR_BRAIN_VERSION = "0.0.1-alpha.353";
+export declare const SPARTAN_COMMAND_BRAIN_VERSION = "0.0.1-alpha.353";
+export declare const SPARTAN_COLLAPSIBLE_BRAIN_VERSION = "0.0.1-alpha.353";
+export declare const SPARTAN_CORE_VERSION = "0.0.1-alpha.353";
+export declare const SPARTAN_DIALOG_BRAIN_VERSION = "0.0.1-alpha.353";
+export declare const SPARTAN_HOVERCARD_BRAIN_VERSION = "0.0.1-alpha.353";
+export declare const SPARTAN_LABEL_BRAIN_VERSION = "0.0.1-alpha.353";
+export declare const SPARTAN_MENU_BRAIN_VERSION = "0.0.1-alpha.353";
+export declare const SPARTAN_POPOVER_BRAIN_VERSION = "0.0.1-alpha.353";
+export declare const SPARTAN_PROGRESS_BRAIN_VERSION = "0.0.1-alpha.353";
+export declare const SPARTAN_RADIO_GROUP_BRAIN_VERSION = "0.0.1-alpha.353";
+export declare const SPARTAN_SELECT_BRAIN_VERSION = "0.0.1-alpha.353";
+export declare const SPARTAN_SEPARATOR_BRAIN_VERSION = "0.0.1-alpha.353";
+export declare const SPARTAN_SHEET_BRAIN_VERSION = "0.0.1-alpha.353";
+export declare const SPARTAN_SWITCH_VERSION = "0.0.1-alpha.353";
+export declare const SPARTAN_TABS_VERSION = "0.0.1-alpha.353";
+export declare const SPARTAN_TABLE_VERSION = "0.0.1-alpha.353";
+export declare const SPARTAN_TOGGLE_VERSION = "0.0.1-alpha.353";
 export declare const TAILWIND_MERGE_VERSION = "^2.2.0";
 export declare const TAILWINDCSS_VERSION = "^3.0.2";
 export declare const TAILWIND_ANIMATE_VERSION = "^1.0.6";

package/src/generators/base/versions.js

@@ -6,26 +6,26 @@ exports.FALLBACK_ANGULAR_VERSION = '^18.0.0';
 // ng-icon dependency
 exports.NG_ICONS_VERSION = '^25.1.0';
 // spartan dependencies
-exports.SPARTAN_ACCORDION_BRAIN_VERSION = '0.0.1-alpha.352';
-exports.SPARTAN_ALERT_DIALOG_BRAIN_VERSION = '0.0.1-alpha.352';
-exports.SPARTAN_AVATAR_BRAIN_VERSION = '0.0.1-alpha.352';
-exports.SPARTAN_COMMAND_BRAIN_VERSION = '0.0.1-alpha.352';
-exports.SPARTAN_COLLAPSIBLE_BRAIN_VERSION = '0.0.1-alpha.352';
-exports.SPARTAN_CORE_VERSION = '0.0.1-alpha.352';
-exports.SPARTAN_DIALOG_BRAIN_VERSION = '0.0.1-alpha.352';
-exports.SPARTAN_HOVERCARD_BRAIN_VERSION = '0.0.1-alpha.352';
-exports.SPARTAN_LABEL_BRAIN_VERSION = '0.0.1-alpha.352';
-exports.SPARTAN_MENU_BRAIN_VERSION = '0.0.1-alpha.352';
-exports.SPARTAN_POPOVER_BRAIN_VERSION = '0.0.1-alpha.352';
-exports.SPARTAN_PROGRESS_BRAIN_VERSION = '0.0.1-alpha.352';
-exports.SPARTAN_RADIO_GROUP_BRAIN_VERSION = '0.0.1-alpha.352';
-exports.SPARTAN_SELECT_BRAIN_VERSION = '0.0.1-alpha.352';
-exports.SPARTAN_SEPARATOR_BRAIN_VERSION = '0.0.1-alpha.352';
-exports.SPARTAN_SHEET_BRAIN_VERSION = '0.0.1-alpha.352';
-exports.SPARTAN_SWITCH_VERSION = '0.0.1-alpha.352';
-exports.SPARTAN_TABS_VERSION = '0.0.1-alpha.352';
-exports.SPARTAN_TABLE_VERSION = '0.0.1-alpha.352';
-exports.SPARTAN_TOGGLE_VERSION = '0.0.1-alpha.352';
+exports.SPARTAN_ACCORDION_BRAIN_VERSION = '0.0.1-alpha.353';
+exports.SPARTAN_ALERT_DIALOG_BRAIN_VERSION = '0.0.1-alpha.353';
+exports.SPARTAN_AVATAR_BRAIN_VERSION = '0.0.1-alpha.353';
+exports.SPARTAN_COMMAND_BRAIN_VERSION = '0.0.1-alpha.353';
+exports.SPARTAN_COLLAPSIBLE_BRAIN_VERSION = '0.0.1-alpha.353';
+exports.SPARTAN_CORE_VERSION = '0.0.1-alpha.353';
+exports.SPARTAN_DIALOG_BRAIN_VERSION = '0.0.1-alpha.353';
+exports.SPARTAN_HOVERCARD_BRAIN_VERSION = '0.0.1-alpha.353';
+exports.SPARTAN_LABEL_BRAIN_VERSION = '0.0.1-alpha.353';
+exports.SPARTAN_MENU_BRAIN_VERSION = '0.0.1-alpha.353';
+exports.SPARTAN_POPOVER_BRAIN_VERSION = '0.0.1-alpha.353';
+exports.SPARTAN_PROGRESS_BRAIN_VERSION = '0.0.1-alpha.353';
+exports.SPARTAN_RADIO_GROUP_BRAIN_VERSION = '0.0.1-alpha.353';
+exports.SPARTAN_SELECT_BRAIN_VERSION = '0.0.1-alpha.353';
+exports.SPARTAN_SEPARATOR_BRAIN_VERSION = '0.0.1-alpha.353';
+exports.SPARTAN_SHEET_BRAIN_VERSION = '0.0.1-alpha.353';
+exports.SPARTAN_SWITCH_VERSION = '0.0.1-alpha.353';
+exports.SPARTAN_TABS_VERSION = '0.0.1-alpha.353';
+exports.SPARTAN_TABLE_VERSION = '0.0.1-alpha.353';
+exports.SPARTAN_TOGGLE_VERSION = '0.0.1-alpha.353';
 // dev dependencies
 exports.TAILWIND_MERGE_VERSION = '^2.2.0';
 exports.TAILWINDCSS_VERSION = '^3.0.2';

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

@@ -1,4 +1,15 @@
-import { Component, EventEmitter, Output, booleanAttribute, computed, forwardRef, input, model } from '@angular/core';
+import {
+	Component,
+	EventEmitter,
+	Output,
+	booleanAttribute,
+	computed,
+	effect,
+	forwardRef,
+	input,
+	model,
+	signal,
+} from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { BrnCheckboxComponent } from '@spartan-ng/ui-checkbox-brain';
 import { hlm } from '@spartan-ng/ui-core';
@@ -21,7 +32,7 @@ export const HLM_CHECKBOX_VALUE_ACCESSOR = {
 			[name]="name()"
 			[class]="_computedClass()"
 			[checked]="checked()"
-			[disabled]="disabled()"
+			[disabled]="_disabled()"
 			[required]="required()"
 			[aria-label]="ariaLabel()"
 			[aria-labelledby]="ariaLabelledby()"
@@ -48,7 +59,7 @@ export class HlmCheckboxComponent {
 			'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.userClass(),
-			this.disabled() ? 'cursor-not-allowed opacity-50' : '',
+			this._disabled() ? 'cursor-not-allowed opacity-50' : '',
 		),
 	);
 
@@ -67,9 +78,18 @@ export class HlmCheckboxComponent {
 	public readonly checked = model<boolean | 'indeterminate'>(false);
 
 	public readonly name = input<string | null>(null);
-	public readonly disabled = input(false, { transform: booleanAttribute });
 	public readonly required = input(false, { transform: booleanAttribute });
 
+	protected readonly _disabled = signal(false);
+	public readonly disabled = input(false, { transform: booleanAttribute });
+
+	private disableInput = effect(
+		() => {
+			this._disabled.set(this.disabled());
+		},
+		{ allowSignalWrites: true },
+	);
+
 	// icon inputs
 	public readonly checkIconName = input<string>('lucideCheck');
 	public readonly checkIconClass = input<string>('');
@@ -78,7 +98,7 @@ export class HlmCheckboxComponent {
 	public changed = new EventEmitter<boolean>();
 
 	protected _handleChange(): void {
-		if (this.disabled()) return;
+		if (this._disabled()) return;
 
 		const previousChecked = this.checked();
 		this.checked.set(previousChecked === 'indeterminate' ? true : !previousChecked);
@@ -106,4 +126,8 @@ export class HlmCheckboxComponent {
 	registerOnTouched(fn: any): void {
 		this._onTouched = fn;
 	}
+
+	setDisabledState(isDisabled: boolean): void {
+		this._disabled.set(isDisabled);
+	}
 }

package/src/generators/ui/libs/ui-form-field/files/index.ts.template

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { HlmErrorDirective } from './lib/directives/hlm-error.directive';
+import { HlmHintDirective } from './lib/directives/hlm-hint.directive';
+import { HlmFormFieldComponent } from './lib/hlm-form-field.component';
+
+export * from './lib/hlm-form-field.component';
+export * from './lib/directives/hlm-error.directive';
+export * from './lib/directives/hlm-hint.directive';
+
+@NgModule({
+	imports: [HlmFormFieldComponent, HlmErrorDirective, HlmHintDirective],
+	exports: [HlmFormFieldComponent, HlmErrorDirective, HlmHintDirective],
+})
+export class HlmFormFieldModule {}

package/src/generators/ui/libs/ui-form-field/files/lib/directives/hlm-error.directive.ts.template

@@ -0,0 +1,10 @@
+import { Directive } from "@angular/core";
+
+@Directive({
+    standalone: true,
+    selector: 'hlm-error',
+    host: {
+        class: 'block text-destructive text-sm font-medium'
+    }
+})
+export class HlmErrorDirective {}

package/src/generators/ui/libs/ui-form-field/files/lib/directives/hlm-hint.directive.ts.template

@@ -0,0 +1,10 @@
+import { Directive } from '@angular/core';
+
+@Directive({
+	selector: 'hlm-hint',
+	standalone: true,
+	host: {
+		class: 'block text-sm text-muted-foreground',
+	},
+})
+export class HlmHintDirective {}

package/src/generators/ui/libs/ui-form-field/files/lib/hlm-form-field.component.ts.template

@@ -0,0 +1,41 @@
+import { Component, type Signal, computed, contentChild, contentChildren, effect } from '@angular/core';
+
+import { BrnFormFieldControl } from '@spartan-ng/ui-form-field-brain';
+import { HlmErrorDirective } from './directives/hlm-error.directive';
+
+@Component({
+	selector: 'hlm-form-field',
+	template: `
+		<ng-content></ng-content>
+
+		@switch (hasDisplayedMessage()) {
+			@case ('error') {
+				<ng-content select="hlm-error"></ng-content>
+			}
+			@default {
+				<ng-content select="hlm-hint"></ng-content>
+			}
+		}
+	`,
+	standalone: true,
+	host: {
+		class: 'space-y-2 block',
+	},
+})
+export class HlmFormFieldComponent {
+	control = contentChild(BrnFormFieldControl);
+
+	errorChildren = contentChildren(HlmErrorDirective);
+
+	hasDisplayedMessage: Signal<'error' | 'hint'> = computed(() => {
+		return this.errorChildren() && this.errorChildren().length > 0 && this.control()?.errorState() ? 'error' : 'hint';
+	});
+
+	constructor() {
+		effect(() => {
+			if(!this.control()) {
+				throw new Error('hlm-form-field must contain a BrnFormFieldControl.');
+			}
+		})
+	}
+}

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

package/src/generators/ui/libs/ui-form-field/generator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/ui-form-field/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-form-field-helm/files/index.ts.template

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { HlmErrorDirective } from './lib/hlm-error.directive';
+import { HlmFormFieldComponent } from './lib/hlm-form-field.component';
+import { HlmHintDirective } from './lib/hlm-hint.directive';
+
+export * from './lib/hlm-form-field.component';
+export * from './lib/hlm-error.directive';
+export * from './lib/hlm-hint.directive';
+
+@NgModule({
+	imports: [HlmFormFieldComponent, HlmErrorDirective, HlmHintDirective],
+	exports: [HlmFormFieldComponent, HlmErrorDirective, HlmHintDirective],
+})
+export class HlmFormFieldModule {}

package/src/generators/ui/libs/ui-form-field-helm/files/lib/form-field.spec.ts.template

@@ -0,0 +1,135 @@
+import { Component } from '@angular/core';
+import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
+import { render, screen } from '@testing-library/angular';
+import userEvent from '@testing-library/user-event';
+
+import { HlmInputDirective } from '@spartan-ng/ui-input-helm';
+
+import { ErrorStateMatcher, ShowOnDirtyErrorStateMatcher } from '@spartan-ng/ui-forms-brain';
+import { HlmErrorDirective } from './hlm-error.directive';
+import { HlmFormFieldComponent } from './hlm-form-field.component';
+import { HlmHintDirective } from './hlm-hint.directive';
+
+const DIRECTIVES = [HlmFormFieldComponent, HlmErrorDirective, HlmHintDirective, HlmInputDirective];
+
+@Component({
+	standalone: true,
+	selector: 'single-form-field-example',
+	imports: [ReactiveFormsModule, ...DIRECTIVES],
+	template: `
+		<hlm-form-field>
+			<input
+				data-testid="hlm-input"
+				aria-label="Your Name"
+				[formControl]="name"
+				class="w-80"
+				hlmInput
+				type="text"
+				placeholder="Your Name"
+			/>
+			<hlm-error data-testid="hlm-error">Your name is required</hlm-error>
+			<hlm-hint data-testid="hlm-hint">This is your public display name.</hlm-hint>
+		</hlm-form-field>
+	`,
+})
+class SingleFormFieldMock {
+	name = new FormControl('', Validators.required);
+}
+
+@Component({
+	standalone: true,
+	selector: 'single-form-field-dirty-example',
+	imports: [ReactiveFormsModule, ...DIRECTIVES],
+	template: `
+		<hlm-form-field>
+			<input
+				data-testid="hlm-input"
+				aria-label="Your Name"
+				[formControl]="name"
+				class="w-80"
+				hlmInput
+				type="text"
+				placeholder="Your Name"
+			/>
+			<hlm-error data-testid="hlm-error">Your name is required</hlm-error>
+			<hlm-hint data-testid="hlm-hint">This is your public display name.</hlm-hint>
+		</hlm-form-field>
+	`,
+	providers: [{ provide: ErrorStateMatcher, useClass: ShowOnDirtyErrorStateMatcher }],
+})
+class SingleFormFieldDirtyMock {
+	name = new FormControl('', Validators.required);
+}
+
+
+describe('Hlm Form Field Component', () => {
+	const TEXT_HINT = 'This is your public display name.';
+	const TEXT_ERROR = 'Your name is required';
+
+	const setupFormField = async () => {
+		const { fixture } = await render(SingleFormFieldMock);
+		return {
+			user: userEvent.setup(),
+			fixture,
+			hint: screen.getByTestId('hlm-hint'),
+			error: () => screen.queryByTestId('hlm-error'),
+			trigger: screen.getByTestId('hlm-input'),
+		};
+	};
+
+	const setupFormFieldWithErrorStateDirty = async () => {
+		const { fixture } = await render(SingleFormFieldDirtyMock);
+		return {
+			user: userEvent.setup(),
+			fixture,
+			hint: screen.getByTestId('hlm-hint'),
+			error: () => screen.queryByTestId('hlm-error'),
+			trigger: screen.getByTestId('hlm-input'),
+		};
+	};
+
+	describe('SingleFormField', () => {
+		it('should show the hint if the errorState is false', async () => {
+			const { hint } = await setupFormField();
+
+			expect(hint.textContent).toBe(TEXT_HINT);
+		});
+
+		it('should show the error if the errorState is true', async () => {
+			const { user, error, trigger } = await setupFormField();
+
+			expect(error()).toBeNull();
+
+			await user.click(trigger);
+
+			await user.click(document.body);
+
+			expect(screen.queryByTestId('hlm-hint')).toBeNull();
+			expect(error()?.textContent?.trim()).toBe(TEXT_ERROR);
+		});
+	});
+
+	describe('SingleFormFieldDirty', () => {
+		it('should not display the error if the input does not have the dirty state due to the ErrorStateMatcher', async () => {
+			const { error, user, trigger } = await setupFormFieldWithErrorStateDirty();
+
+			await user.click(trigger);
+
+			await user.click(document.body);
+
+			expect(error()).toBeNull();
+		});
+
+		it('should display the error if the input has the dirty state due to the ErrorStateMatcher', async () => {
+			const { error, user, trigger } = await setupFormFieldWithErrorStateDirty();
+
+			await user.click(trigger);
+			await user.type(trigger, 'a');
+			await user.clear(trigger);
+
+			await user.click(document.body);
+
+			expect(error()?.textContent?.trim()).toBe(TEXT_ERROR);
+		});
+	});
+});

package/src/generators/ui/libs/ui-form-field-helm/files/lib/hlm-error.directive.ts.template

@@ -0,0 +1,10 @@
+import { Directive } from "@angular/core";
+
+@Directive({
+    standalone: true,
+    selector: 'hlm-error',
+    host: {
+        class: 'block text-destructive text-sm font-medium'
+    }
+})
+export class HlmErrorDirective {}

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

@@ -0,0 +1,41 @@
+import { Component, type Signal, computed, contentChild, contentChildren, effect } from '@angular/core';
+
+import { BrnFormFieldControl } from '@spartan-ng/ui-form-field-brain';
+import { HlmErrorDirective } from './hlm-error.directive';
+
+@Component({
+	selector: 'hlm-form-field',
+	template: `
+		<ng-content></ng-content>
+
+		@switch (hasDisplayedMessage()) {
+			@case ('error') {
+				<ng-content select="hlm-error"></ng-content>
+			}
+			@default {
+				<ng-content select="hlm-hint"></ng-content>
+			}
+		}
+	`,
+	standalone: true,
+	host: {
+		class: 'space-y-2 block',
+	},
+})
+export class HlmFormFieldComponent {
+	control = contentChild(BrnFormFieldControl);
+
+	errorChildren = contentChildren(HlmErrorDirective);
+
+	hasDisplayedMessage: Signal<'error' | 'hint'> = computed(() => {
+		return this.errorChildren() && this.errorChildren().length > 0 && this.control()?.errorState() ? 'error' : 'hint';
+	});
+
+	constructor() {
+		effect(() => {
+			if(!this.control()) {
+				throw new Error('hlm-form-field must contain a BrnFormFieldControl.');
+			}
+		})
+	}
+}

package/src/generators/ui/libs/ui-form-field-helm/files/lib/hlm-hint.directive.ts.template

@@ -0,0 +1,10 @@
+import { Directive } from '@angular/core';
+
+@Directive({
+	selector: 'hlm-hint',
+	standalone: true,
+	host: {
+		class: 'block text-sm text-muted-foreground',
+	},
+})
+export class HlmHintDirective {}

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

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

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

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

@@ -1,5 +1,9 @@
-import { Directive, Input, computed, input, signal } from '@angular/core';
+import { Directive, type DoCheck, Inject, Injector, Input, computed, effect, inject, input, signal } from '@angular/core';
+import { FormGroupDirective, NgControl, NgForm } from '@angular/forms';
 import { hlm } from '@spartan-ng/ui-core';
+import { BrnFormFieldControl } from '@spartan-ng/ui-form-field-brain';
+import { ErrorStateMatcher, ErrorStateTracker } from '@spartan-ng/ui-forms-brain';
+
 import { type VariantProps, cva } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
 
@@ -31,8 +35,14 @@ type InputVariants = VariantProps<typeof inputVariants>;
 	host: {
 		'[class]': '_computedClass()',
 	},
+	providers: [
+		{
+			provide: BrnFormFieldControl,
+			useExisting: HlmInputDirective,
+		},
+	],
 })
-export class HlmInputDirective {
+export class HlmInputDirective implements BrnFormFieldControl, DoCheck {
 	private readonly _size = signal<InputVariants['size']>('default');
 	@Input()
 	set size(value: InputVariants['size']) {
@@ -49,4 +59,38 @@ export class HlmInputDirective {
 	protected _computedClass = computed(() =>
 		hlm(inputVariants({ size: this._size(), error: this._error() }), this.userClass()),
 	);
+
+	private injector = inject(Injector)
+
+	ngControl: NgControl | null = this.injector.get(NgControl, null);
+
+	errorStateTracker: ErrorStateTracker;
+
+	private defaultErrorStateMatcher = inject(ErrorStateMatcher);
+	private parentForm = inject(NgForm, { optional: true });
+	private parentFormGroup = inject(FormGroupDirective, { optional: true });
+
+	errorState = computed(() => this.errorStateTracker.errorState());
+	
+	constructor() {
+		this.errorStateTracker = new ErrorStateTracker(
+			this.defaultErrorStateMatcher,
+			this.ngControl,
+			this.parentFormGroup,
+			this.parentForm,
+		);
+
+		effect(
+			() => {
+				if (this.ngControl) {
+					this.error = this.errorStateTracker.errorState();
+				}
+			},
+			{ allowSignalWrites: true },
+		);
+	}
+
+	ngDoCheck() {
+		this.errorStateTracker.updateErrorState();
+	}
 }

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

@@ -1,9 +1,9 @@
-import { Component, ContentChild, type ElementRef, ViewChild, computed, input } from '@angular/core';
+import { Component, ContentChild, type ElementRef, ViewChild, computed, inject, input } from '@angular/core';
 import { provideIcons } from '@ng-icons/core';
 import { lucideChevronDown } from '@ng-icons/lucide';
 import { hlm } from '@spartan-ng/ui-core';
 import { HlmIconComponent } from '@spartan-ng/ui-icon-helm';
-import { BrnSelectTriggerDirective } from '@spartan-ng/ui-select-brain';
+import { BrnSelectComponent, BrnSelectTriggerDirective } from '@spartan-ng/ui-select-brain';
 import { type VariantProps, cva } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
 
@@ -40,7 +40,7 @@ type SelectTriggerVariants = VariantProps<typeof selectTriggerVariants>;
 			@if (icon) {
 				<ng-content select="hlm-icon" />
 			} @else {
-				<hlm-icon class="flex-none w-4 h-4 ml-2" name="lucideChevronDown" />
+				<hlm-icon class="ml-2 h-4 w-4 flex-none" name="lucideChevronDown" />
 			}
 		</button>
 	`,
@@ -52,11 +52,12 @@ export class HlmSelectTriggerComponent {
 	@ContentChild(HlmIconComponent, { static: false })
 	protected icon!: HlmIconComponent;
 
+	protected readonly brnSelect = inject(BrnSelectComponent, { optional: true });
+
 	public readonly _size = input<SelectTriggerVariants['size']>('default');
-	public readonly _error = input<SelectTriggerVariants['error']>('auto');
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 
 	protected _computedClass = computed(() =>
-		hlm(selectTriggerVariants({ size: this._size(), error: this._error() }), this.userClass()),
+		hlm(selectTriggerVariants({ size: this._size(), error: this.brnSelect?.errorState() }), this.userClass()),
 	);
 }

package/src/generators/ui/libs/ui-tabs-helm/files/lib/hlm-tabs-paginated-list.component.ts.template

@@ -1,11 +1,11 @@
 import { CdkObserveContent } from '@angular/cdk/observers';
-import { Component, ContentChildren, ElementRef, QueryList, ViewChild, computed, input } from '@angular/core';
+import { Component, ContentChildren, type ElementRef, type QueryList, ViewChild, computed, input } from '@angular/core';
 import { lucideChevronLeft, lucideChevronRight } from '@ng-icons/lucide';
 import { buttonVariants } from '@spartan-ng/ui-button-helm';
 import { hlm } from '@spartan-ng/ui-core';
 import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm';
 import { BrnTabsPaginatedListDirective, BrnTabsTriggerDirective } from '@spartan-ng/ui-tabs-brain';
-import { ClassValue } from 'clsx';
+import type { ClassValue } from 'clsx';
 import { listVariants } from './hlm-tabs-list.component';
 
 @Component({

package/src/generators/ui/supported-ui-libraries.json

@@ -3,9 +3,9 @@
 		"internalName": "ui-accordion-helm",
 		"peerDependencies": {
 			"@angular/core": "^18.0.0",
-			"@spartan-ng/ui-core": "0.0.1-alpha.352",
+			"@spartan-ng/ui-core": "0.0.1-alpha.353",
 			"clsx": "^1.2.1",
-			"@spartan-ng/ui-accordion-brain": "0.0.1-alpha.352",
+			"@spartan-ng/ui-accordion-brain": "0.0.1-alpha.353",
 			"@ng-icons/lucide": "^26.3.0"
 		}
 	},
@@ -13,7 +13,7 @@
 		"internalName": "ui-alert-helm",
 		"peerDependencies": {
 			"@angular/core": "^18.0.0",
-			"@spartan-ng/ui-core": "0.0.1-alpha.352",
+			"@spartan-ng/ui-core": "0.0.1-alpha.353",
 			"class-variance-authority": "^0.6.0",
 			"clsx": "^1.2.1"
 		}
@@ -22,10 +22,10 @@
 		"internalName": "ui-alert-dialog-helm",
 		"peerDependencies": {
 			"@angular/core": "^18.0.0",
-			"@spartan-ng/ui-core": "0.0.1-alpha.352",
+			"@spartan-ng/ui-core": "0.0.1-alpha.353",
 			"clsx": "^1.2.1",
-			"@spartan-ng/ui-alertdialog-brain": "0.0.1-alpha.352",
-			"@spartan-ng/ui-dialog-brain": "0.0.1-alpha.352"
+			"@spartan-ng/ui-alertdialog-brain": "0.0.1-alpha.353",
+			"@spartan-ng/ui-dialog-brain": "0.0.1-alpha.353"
 		}
 	},
 	"aspectratio": {
@@ -33,7 +33,7 @@
 		"peerDependencies": {
 			"@angular/core": "^18.0.0",
 			"@angular/cdk": "^18.0.0",
-			"@spartan-ng/ui-core": "0.0.1-alpha.352",
+			"@spartan-ng/ui-core": "0.0.1-alpha.353",
 			"clsx": "^1.2.1"
 		}
 	},
@@ -41,7 +41,7 @@
 		"internalName": "ui-avatar-helm",
 		"peerDependencies": {
 			"@angular/core": "^18.0.0",
-			"@spartan-ng/ui-core": "0.0.1-alpha.352",
+			"@spartan-ng/ui-core": "0.0.1-alpha.353",
 			"clsx": "^1.2.1",
 			"class-variance-authority": "^0.6.0"
 		}
@@ -50,7 +50,7 @@
 		"internalName": "ui-badge-helm",
 		"peerDependencies": {
 			"@angular/core": "^18.0.0",
-			"@spartan-ng/ui-core": "0.0.1-alpha.352",
+			"@spartan-ng/ui-core": "0.0.1-alpha.353",
 			"class-variance-authority": "^0.6.0",
 			"clsx": "^1.2.1"
 		}
@@ -59,7 +59,7 @@
 		"internalName": "ui-button-helm",
 		"peerDependencies": {
 			"@angular/core": "^18.0.0",
-			"@spartan-ng/ui-core": "0.0.1-alpha.352",
+			"@spartan-ng/ui-core": "0.0.1-alpha.353",
 			"class-variance-authority": "^0.6.0",
 			"clsx": "^1.2.1"
 		}
@@ -68,7 +68,7 @@
 		"internalName": "ui-card-helm",
 		"peerDependencies": {
 			"@angular/core": "^18.0.0",
-			"@spartan-ng/ui-core": "0.0.1-alpha.352",
+			"@spartan-ng/ui-core": "0.0.1-alpha.353",
 			"class-variance-authority": "^0.6.0",
 			"clsx": "^1.2.1"
 		}
@@ -77,7 +77,7 @@
 		"internalName": "ui-command-helm",
 		"peerDependencies": {
 			"@angular/core": "^18.0.0",
-			"@spartan-ng/ui-core": "0.0.1-alpha.352",
+			"@spartan-ng/ui-core": "0.0.1-alpha.353",
 			"clsx": "^1.2.1"
 		}
 	},
@@ -87,9 +87,9 @@
 			"@angular/core": "^18.0.0",
 			"@angular/common": "^18.0.0",
 			"@angular/cdk": "^18.0.0",
-			"@spartan-ng/ui-core": "0.0.1-alpha.352",
+			"@spartan-ng/ui-core": "0.0.1-alpha.353",
 			"clsx": "^1.2.1",
-			"@spartan-ng/ui-dialog-brain": "0.0.1-alpha.352",
+			"@spartan-ng/ui-dialog-brain": "0.0.1-alpha.353",
 			"@ng-icons/lucide": "^26.3.0"
 		}
 	},
@@ -98,7 +98,7 @@
 		"peerDependencies": {
 			"@angular/core": "^18.0.0",
 			"@angular/common": "^18.0.0",
-			"@spartan-ng/ui-core": "0.0.1-alpha.352",
+			"@spartan-ng/ui-core": "0.0.1-alpha.353",
 			"@ng-icons/core": "^25.1.0",
 			"class-variance-authority": "^0.6.0",
 			"clsx": "^1.2.1"
@@ -108,7 +108,7 @@
 		"internalName": "ui-input-helm",
 		"peerDependencies": {
 			"@angular/core": "^18.0.0",
-			"@spartan-ng/ui-core": "0.0.1-alpha.352",
+			"@spartan-ng/ui-core": "0.0.1-alpha.353",
 			"class-variance-authority": "^0.6.0",
 			"clsx": "^1.2.1"
 		}
@@ -117,28 +117,28 @@
 		"internalName": "ui-label-helm",
 		"peerDependencies": {
 			"@angular/core": "^18.0.0",
-			"@spartan-ng/ui-core": "0.0.1-alpha.352",
+			"@spartan-ng/ui-core": "0.0.1-alpha.353",
 			"class-variance-authority": "^0.6.0",
 			"clsx": "^1.2.1",
-			"@spartan-ng/ui-label-brain": "0.0.1-alpha.352"
+			"@spartan-ng/ui-label-brain": "0.0.1-alpha.353"
 		}
 	},
 	"menu": {
 		"internalName": "ui-menu-helm",
 		"peerDependencies": {
 			"@angular/core": "^18.0.0",
-			"@spartan-ng/ui-core": "0.0.1-alpha.352",
+			"@spartan-ng/ui-core": "0.0.1-alpha.353",
 			"@ng-icons/lucide": "^26.3.0",
 			"clsx": "^1.2.1",
 			"class-variance-authority": "^0.6.0",
-			"@spartan-ng/ui-menu-brain": "0.0.1-alpha.352"
+			"@spartan-ng/ui-menu-brain": "0.0.1-alpha.353"
 		}
 	},
 	"popover": {
 		"internalName": "ui-popover-helm",
 		"peerDependencies": {
 			"@angular/core": "^18.0.0",
-			"@spartan-ng/ui-core": "0.0.1-alpha.352",
+			"@spartan-ng/ui-core": "0.0.1-alpha.353",
 			"clsx": "^1.2.1"
 		}
 	},
@@ -146,7 +146,7 @@
 		"internalName": "ui-progress-helm",
 		"peerDependencies": {
 			"@angular/core": "^18.0.0",
-			"@spartan-ng/ui-core": "0.0.1-alpha.352",
+			"@spartan-ng/ui-core": "0.0.1-alpha.353",
 			"clsx": "^1.2.1"
 		}
 	},
@@ -154,7 +154,7 @@
 		"internalName": "ui-radio-group-helm",
 		"peerDependencies": {
 			"@angular/core": "^18.0.0",
-			"@spartan-ng/ui-core": "0.0.1-alpha.352",
+			"@spartan-ng/ui-core": "0.0.1-alpha.353",
 			"clsx": "^1.2.1"
 		}
 	},
@@ -162,7 +162,7 @@
 		"internalName": "ui-scroll-area-helm",
 		"peerDependencies": {
 			"@angular/core": "^18.0.0",
-			"@spartan-ng/ui-core": "0.0.1-alpha.352",
+			"@spartan-ng/ui-core": "0.0.1-alpha.353",
 			"ngx-scrollbar": "^13.0.1",
 			"clsx": "^1.2.1"
 		}
@@ -171,7 +171,7 @@
 		"internalName": "ui-separator-helm",
 		"peerDependencies": {
 			"@angular/core": "^18.0.0",
-			"@spartan-ng/ui-core": "0.0.1-alpha.352",
+			"@spartan-ng/ui-core": "0.0.1-alpha.353",
 			"clsx": "^1.2.1"
 		}
 	},
@@ -179,19 +179,19 @@
 		"internalName": "ui-sheet-helm",
 		"peerDependencies": {
 			"@angular/core": "^18.0.0",
-			"@spartan-ng/ui-core": "0.0.1-alpha.352",
+			"@spartan-ng/ui-core": "0.0.1-alpha.353",
 			"clsx": "^1.2.1",
 			"class-variance-authority": "^0.6.0",
 			"@ng-icons/lucide": "^26.3.0",
-			"@spartan-ng/ui-sheet-brain": "0.0.1-alpha.352",
-			"@spartan-ng/ui-dialog-brain": "0.0.1-alpha.352"
+			"@spartan-ng/ui-sheet-brain": "0.0.1-alpha.353",
+			"@spartan-ng/ui-dialog-brain": "0.0.1-alpha.353"
 		}
 	},
 	"skeleton": {
 		"internalName": "ui-skeleton-helm",
 		"peerDependencies": {
 			"@angular/core": "^18.0.0",
-			"@spartan-ng/ui-core": "0.0.1-alpha.352",
+			"@spartan-ng/ui-core": "0.0.1-alpha.353",
 			"clsx": "^1.2.1"
 		}
 	},
@@ -199,7 +199,7 @@
 		"internalName": "ui-spinner-helm",
 		"peerDependencies": {
 			"@angular/core": "^18.0.0",
-			"@spartan-ng/ui-core": "0.0.1-alpha.352",
+			"@spartan-ng/ui-core": "0.0.1-alpha.353",
 			"class-variance-authority": "^0.6.0",
 			"clsx": "^1.2.1"
 		}
@@ -209,26 +209,26 @@
 		"peerDependencies": {
 			"@angular/core": "^18.0.0",
 			"@angular/forms": "^18.0.0",
-			"@spartan-ng/ui-core": "0.0.1-alpha.352",
+			"@spartan-ng/ui-core": "0.0.1-alpha.353",
 			"clsx": "^1.2.1",
-			"@spartan-ng/ui-switch-brain": "0.0.1-alpha.352"
+			"@spartan-ng/ui-switch-brain": "0.0.1-alpha.353"
 		}
 	},
 	"tabs": {
 		"internalName": "ui-tabs-helm",
 		"peerDependencies": {
 			"@angular/core": "^18.0.0",
-			"@spartan-ng/ui-core": "0.0.1-alpha.352",
+			"@spartan-ng/ui-core": "0.0.1-alpha.353",
 			"clsx": "^1.2.1",
 			"class-variance-authority": "^0.6.0",
-			"@spartan-ng/ui-tabs-brain": "0.0.1-alpha.352"
+			"@spartan-ng/ui-tabs-brain": "0.0.1-alpha.353"
 		}
 	},
 	"toggle": {
 		"internalName": "ui-toggle-helm",
 		"peerDependencies": {
 			"@angular/core": "^18.0.0",
-			"@spartan-ng/ui-core": "0.0.1-alpha.352",
+			"@spartan-ng/ui-core": "0.0.1-alpha.353",
 			"clsx": "^1.2.1",
 			"class-variance-authority": "^0.6.0"
 		}
@@ -237,7 +237,7 @@
 		"internalName": "ui-typography-helm",
 		"peerDependencies": {
 			"@angular/core": "^18.0.0",
-			"@spartan-ng/ui-core": "0.0.1-alpha.352",
+			"@spartan-ng/ui-core": "0.0.1-alpha.353",
 			"clsx": "^1.2.1"
 		}
 	},
@@ -246,8 +246,8 @@
 		"peerDependencies": {
 			"@angular/common": "^18.0.0",
 			"@angular/core": "^18.0.0",
-			"@spartan-ng/ui-core": "0.0.1-alpha.352",
-			"@spartan-ng/ui-table-brain": "0.0.1-alpha.352",
+			"@spartan-ng/ui-core": "0.0.1-alpha.353",
+			"@spartan-ng/ui-table-brain": "0.0.1-alpha.353",
 			"clsx": "^1.2.1"
 		}
 	},
@@ -255,7 +255,7 @@
 		"internalName": "ui-hover-card-helm",
 		"peerDependencies": {
 			"@angular/core": "^18.0.0",
-			"@spartan-ng/ui-core": "0.0.1-alpha.352",
+			"@spartan-ng/ui-core": "0.0.1-alpha.353",
 			"clsx": "^1.2.1"
 		}
 	},
@@ -264,8 +264,8 @@
 		"peerDependencies": {
 			"@angular/core": "^18.0.0",
 			"@angular/forms": "^18.0.0",
-			"@spartan-ng/ui-core": "0.0.1-alpha.352",
-			"@spartan-ng/ui-checkbox-brain": "0.0.1-alpha.352",
+			"@spartan-ng/ui-core": "0.0.1-alpha.353",
+			"@spartan-ng/ui-checkbox-brain": "0.0.1-alpha.353",
 			"clsx": "^1.2.1",
 			"@ng-icons/lucide": "^26.3.0"
 		}
@@ -274,7 +274,7 @@
 		"internalName": "ui-tooltip-helm",
 		"peerDependencies": {
 			"@angular/core": "^18.0.0",
-			"@spartan-ng/ui-tooltip-brain": "0.0.1-alpha.352"
+			"@spartan-ng/ui-tooltip-brain": "0.0.1-alpha.353"
 		}
 	},
 	"pagination": {
@@ -282,7 +282,7 @@
 		"peerDependencies": {
 			"@angular/core": "^18.0.0",
 			"@angular/router": "^18.0.0",
-			"@spartan-ng/ui-core": "0.0.1-alpha.352",
+			"@spartan-ng/ui-core": "0.0.1-alpha.353",
 			"@ng-icons/lucide": "^26.3.0",
 			"class-variance-authority": "^0.6.0",
 			"clsx": "^1.2.1"
@@ -293,7 +293,7 @@
 		"peerDependencies": {
 			"@angular/core": "^18.0.0",
 			"@ng-icons/lucide": "^26.3.0",
-			"@spartan-ng/ui-core": "0.0.1-alpha.352",
+			"@spartan-ng/ui-core": "0.0.1-alpha.353",
 			"clsx": "^1.2.1",
 			"embla-carousel-angular": "^14.0.0"
 		}
@@ -302,8 +302,8 @@
 		"internalName": "ui-select-helm",
 		"peerDependencies": {
 			"@angular/core": "^18.0.0",
-			"@spartan-ng/ui-core": "0.0.1-alpha.352",
-			"@spartan-ng/ui-select-brain": "0.0.1-alpha.352",
+			"@spartan-ng/ui-core": "0.0.1-alpha.353",
+			"@spartan-ng/ui-select-brain": "0.0.1-alpha.353",
 			"class-variance-authority": "^0.6.0",
 			"clsx": "^1.2.1"
 		}
@@ -314,7 +314,7 @@
 			"@angular/core": "^18.0.0",
 			"@angular/forms": "^18.0.0",
 			"@ng-icons/lucide": "^26.3.0",
-			"@spartan-ng/ui-core": "0.0.1-alpha.352",
+			"@spartan-ng/ui-core": "0.0.1-alpha.353",
 			"clsx": "^1.2.1",
 			"ngx-sonner": "^2.0.0"
 		}
@@ -325,5 +325,14 @@
 			"@angular/common": "^17.1.0",
 			"@angular/core": "^17.1.0"
 		}
+	},
+	"formfield": {
+		"internalName": "ui-form-field-helm",
+		"peerDependencies": {
+			"@angular/core": "^18.0.0",
+			"@spartan-ng/ui-core": "0.0.1-alpha.353",
+			"class-variance-authority": "^0.6.0",
+			"clsx": "^1.2.1"
+		}
 	}
 }