@spartan-ng/cli 0.0.1-alpha.366 → 0.0.1-alpha.367

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

@@ -0,0 +1,160 @@
+import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
+import { Component, booleanAttribute, computed, input, model, numberAttribute, viewChild } from '@angular/core';
+import { lucideChevronLeft, lucideChevronRight } from '@ng-icons/lucide';
+import { buttonVariants } from '@spartan-ng/ui-button-helm';
+import {
+	BrnCalendarCellButtonDirective,
+	BrnCalendarCellDirective,
+	BrnCalendarDirective,
+	BrnCalendarGridDirective,
+	BrnCalendarHeaderDirective,
+	BrnCalendarNextButtonDirective,
+	BrnCalendarPreviousButtonDirective,
+	BrnCalendarWeekDirective,
+	BrnCalendarWeekdayDirective,
+	Weekday,
+	injectBrnCalendarI18n,
+} from '@spartan-ng/ui-calendar-brain';
+import { hlm } from '@spartan-ng/ui-core';
+import { injectDateAdapter } from '@spartan-ng/ui-date-time';
+import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm';
+
+@Component({
+	standalone: true,
+	selector: 'hlm-calendar',
+	imports: [
+		BrnCalendarDirective,
+		BrnCalendarHeaderDirective,
+		BrnCalendarNextButtonDirective,
+		BrnCalendarPreviousButtonDirective,
+		BrnCalendarWeekdayDirective,
+		BrnCalendarWeekDirective,
+		BrnCalendarCellButtonDirective,
+		BrnCalendarCellDirective,
+		BrnCalendarGridDirective,
+		HlmIconComponent,
+	],
+	viewProviders: [provideIcons({ lucideChevronLeft, lucideChevronRight })],
+	template: `
+		<div
+			brnCalendar
+			[min]="min()"
+			[max]="max()"
+			[disabled]="disabled()"
+			[(date)]="date"
+			[dateDisabled]="dateDisabled()"
+			[weekStartsOn]="weekStartsOn()"
+			[defaultFocusedDate]="defaultFocusedDate()"
+			class="rounded-md border p-3"
+		>
+			<div class="inline-flex flex-col space-y-4">
+				<!-- Header -->
+				<div class="space-y-4">
+					<div class="relative flex items-center justify-center pt-1">
+						<div brnCalendarHeader class="text-sm font-medium">
+							{{ heading() }}
+						</div>
+
+						<div class="flex items-center space-x-1">
+							<button
+								brnCalendarPreviousButton
+								class="ring-offset-background focus-visible:ring-ring border-input hover:bg-accent hover:text-accent-foreground absolute left-1 inline-flex h-7 w-7 items-center justify-center whitespace-nowrap rounded-md border bg-transparent p-0 text-sm font-medium opacity-50 transition-colors hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+							>
+								<hlm-icon name="lucideChevronLeft" size="sm" />
+							</button>
+
+							<button
+								brnCalendarNextButton
+								class="ring-offset-background focus-visible:ring-ring border-input hover:bg-accent hover:text-accent-foreground absolute right-1 inline-flex h-7 w-7 items-center justify-center whitespace-nowrap rounded-md border bg-transparent p-0 text-sm font-medium opacity-50 transition-colors hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+							>
+								<hlm-icon name="lucideChevronRight" size="sm" />
+							</button>
+						</div>
+					</div>
+				</div>
+
+				<table class="w-full border-collapse space-y-1" brnCalendarGrid>
+					<thead>
+						<tr class="flex">
+							<th
+								*brnCalendarWeekday="let weekday"
+								scope="col"
+								class="text-muted-foreground w-9 rounded-md text-[0.8rem] font-normal"
+								[attr.aria-label]="i18n.labelWeekday(weekday)"
+							>
+								{{ i18n.formatWeekdayName(weekday) }}
+							</th>
+						</tr>
+					</thead>
+
+					<tbody role="rowgroup">
+						<tr *brnCalendarWeek="let week" class="mt-2 flex w-full">
+							@for (date of week; track dateAdapter.getTime(date)) {
+								<td
+									brnCalendarCell
+									class="data-[selected]:data-[outside]:bg-accent/50 data-[selected]:bg-accent relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 first:data-[selected]:rounded-l-md last:data-[selected]:rounded-r-md [&:has([aria-selected].day-range-end)]:rounded-r-md"
+								>
+									<button brnCalendarCellButton [date]="date" [class]="btnClass">
+										{{ dateAdapter.getDate(date) }}
+									</button>
+								</td>
+							}
+						</tr>
+					</tbody>
+				</table>
+			</div>
+		</div>
+	`,
+})
+export class HlmCalendarComponent<T> {
+	/** Access the calendar i18n */
+	protected readonly i18n = injectBrnCalendarI18n();
+
+	/** Access the date time adapter */
+	protected readonly dateAdapter = injectDateAdapter<T>();
+
+	/** The minimum date that can be selected.*/
+	public readonly min = input<T>();
+
+	/* * The maximum date that can be selected. */
+	public readonly max = input<T>();
+
+	/** Determine if the date picker is disabled. */
+	public readonly disabled = input<boolean, BooleanInput>(false, {
+		transform: booleanAttribute,
+	});
+
+	/** The selected value. */
+	public readonly date = model<T>();
+
+	/** Whether a specific date is disabled. */
+	public readonly dateDisabled = input<(date: T) => boolean>(() => false);
+
+	/** The day the week starts on */
+	public readonly weekStartsOn = input<Weekday, NumberInput>(0, {
+		transform: (v: unknown) => numberAttribute(v) as Weekday,
+	});
+
+	/** The default focused date. */
+	public readonly defaultFocusedDate = input<T>();
+
+	/** Access the calendar directive */
+	private readonly _calendar = viewChild.required(BrnCalendarDirective);
+
+	/** Get the heading for the current month and year */
+	protected heading = computed(() =>
+		this.i18n.formatHeader(
+			this.dateAdapter.getMonth(this._calendar().focusedDate()),
+			this.dateAdapter.getYear(this._calendar().focusedDate()),
+		),
+	);
+
+	protected readonly btnClass = hlm(
+		buttonVariants({ variant: 'ghost' }),
+		'h-9 w-9 p-0 font-normal aria-selected:opacity-100',
+		'data-[outside]:text-muted-foreground data-[outside]:opacity-50 data-[outside]:aria-selected:bg-accent/50 data-[outside]:aria-selected:text-muted-foreground data-[outside]:aria-selected:opacity-30',
+		'data-[today]:bg-accent data-[today]:text-accent-foreground',
+		'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',
+		'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
+	);
+}

package/src/generators/ui/libs/ui-calendar-helm/generator.d.ts

@@ -0,0 +1,3 @@
+import { Tree } from '@nx/devkit';
+import type { HlmBaseGeneratorSchema } from '../../../base/schema';
+export declare function generator(tree: Tree, options: HlmBaseGeneratorSchema): Promise<import("@nx/devkit").GeneratorCallback>;

package/src/generators/ui/libs/ui-calendar-helm/generator.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generator = generator;
+const tslib_1 = require("tslib");
+const generator_1 = tslib_1.__importDefault(require("../../../base/generator"));
+async function generator(tree, options) {
+    return await (0, generator_1.default)(tree, {
+        ...options,
+        primitiveName: 'calendar',
+        internalName: 'ui-calendar-helm',
+        publicName: 'ui-calendar-helm',
+    });
+}
+//# sourceMappingURL=generator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/ui-calendar-helm/generator.ts"],"names":[],"mappings":";;AAIA,8BAOC;;AAVD,gFAAuD;AAGhD,KAAK,UAAU,SAAS,CAAC,IAAU,EAAE,OAA+B;IAC1E,OAAO,MAAM,IAAA,mBAAgB,EAAC,IAAI,EAAE;QACnC,GAAG,OAAO;QACV,aAAa,EAAE,UAAU;QACzB,YAAY,EAAE,kBAAkB;QAChC,UAAU,EAAE,kBAAkB;KAC9B,CAAC,CAAC;AACJ,CAAC"}

package/src/generators/ui/libs/ui-card-helm/generator.d.ts

@@ -1,3 +1,3 @@
 import { Tree } from '@nx/devkit';
-import { HlmBaseGeneratorSchema } from '../../../base/schema';
+import type { HlmBaseGeneratorSchema } from '../../../base/schema';
 export declare function generator(tree: Tree, options: HlmBaseGeneratorSchema): Promise<import("@nx/devkit").GeneratorCallback>;

package/src/generators/ui/libs/ui-card-helm/generator.js

@@ -2,10 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generator = generator;
 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: 'card', internalName: 'ui-card-helm', publicName: 'ui-card-helm' }));
+const generator_1 = tslib_1.__importDefault(require("../../../base/generator"));
+async function generator(tree, options) {
+    return await (0, generator_1.default)(tree, {
+        ...options,
+        primitiveName: 'card',
+        internalName: 'ui-card-helm',
+        publicName: 'ui-card-helm',
     });
 }
 //# sourceMappingURL=generator.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/ui-card-helm/generator.ts"],"names":[],"mappings":";;AAIA,8BAOC;;AATD,uDAAuD;AAEvD,SAAsB,SAAS,CAAC,IAAU,EAAE,OAA+B;;QAC1E,OAAO,MAAM,IAAA,mBAAgB,EAAC,IAAI,kCAC9B,OAAO,KACV,aAAa,EAAE,MAAM,EACrB,YAAY,EAAE,cAAc,EAC5B,UAAU,EAAE,cAAc,IACzB,CAAC;IACJ,CAAC;CAAA"}
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/ui-card-helm/generator.ts"],"names":[],"mappings":";;AAIA,8BAOC;;AAVD,gFAAuD;AAGhD,KAAK,UAAU,SAAS,CAAC,IAAU,EAAE,OAA+B;IAC1E,OAAO,MAAM,IAAA,mBAAgB,EAAC,IAAI,EAAE;QACnC,GAAG,OAAO;QACV,aAAa,EAAE,MAAM;QACrB,YAAY,EAAE,cAAc;QAC5B,UAAU,EAAE,cAAc;KAC1B,CAAC,CAAC;AACJ,CAAC"}

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

@@ -16,10 +16,10 @@ import { HlmCarouselComponent } from './hlm-carousel.component';
 	`,
 })
 export class HlmCarouselContentComponent {
-	private orientation = inject(HlmCarouselComponent).orientation;
+	private readonly _orientation = inject(HlmCarouselComponent).orientation;
 
-	_userClass = input<ClassValue>('', { alias: 'class' });
+	public _userClass = input<ClassValue>('', { alias: 'class' });
 	protected _computedClass = computed(() =>
-		hlm('flex', this.orientation() === 'horizontal' ? '-ml-4' : '-mt-4 flex-col', this._userClass()),
+		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

@@ -18,9 +18,13 @@ import { HlmCarouselComponent } from './hlm-carousel.component';
 	`,
 })
 export class HlmCarouselItemComponent {
-	_userClass = input<ClassValue>('', { alias: 'class' });
-	private orientation = inject(HlmCarouselComponent).orientation;
+	public _userClass = input<ClassValue>('', { alias: 'class' });
+	private readonly _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()),
+		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

@@ -9,7 +9,7 @@ import {
 	untracked,
 } from '@angular/core';
 import { lucideArrowRight } from '@ng-icons/lucide';
-import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
+import { HlmButtonDirective, provideBrnButtonConfig } from '@spartan-ng/ui-button-helm';
 import { hlm } from '@spartan-ng/ui-core';
 import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm';
 import type { ClassValue } from 'clsx';
@@ -23,10 +23,10 @@ import { HlmCarouselComponent } from './hlm-carousel.component';
 	encapsulation: ViewEncapsulation.None,
 	host: {
 		'[disabled]': 'isDisabled()',
-		'(click)': 'carousel.scrollNext()',
+		'(click)': '_carousel.scrollNext()',
 	},
 	hostDirectives: [{ directive: HlmButtonDirective, inputs: ['variant', 'size'] }],
-	providers: [provideIcons({ lucideArrowRight })],
+	providers: [provideIcons({ lucideArrowRight }), provideBrnButtonConfig({ variant: 'outline', size: 'icon' })],
 	imports: [HlmIconComponent],
 	template: `
 		<hlm-icon size="sm" name="lucideArrowRight" />
@@ -34,29 +34,25 @@ import { HlmCarouselComponent } from './hlm-carousel.component';
 	`,
 })
 export class HlmCarouselNextComponent {
-	protected carousel = inject(HlmCarouselComponent);
-	_userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() =>
+	private readonly _button = inject(HlmButtonDirective);
+	private readonly _carousel = inject(HlmCarouselComponent);
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	private readonly _computedClass = computed(() =>
 		hlm(
 			'absolute h-8 w-8 rounded-full',
-			this.carousel.orientation() === 'horizontal'
+			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(),
+			this.userClass(),
 		),
 	);
-	protected isDisabled = () => !this.carousel.canScrollNext();
+	protected readonly isDisabled = () => !this._carousel.canScrollNext();
 
 	constructor() {
-		const button = inject(HlmButtonDirective);
-
-		button.variant = 'outline';
-		button.size = 'icon';
-
 		effect(() => {
 			const computedClass = this._computedClass();
 
-			untracked(() => button.setClass(computedClass));
+			untracked(() => this._button.setClass(computedClass));
 		});
 	}
 }

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

@@ -9,7 +9,7 @@ import {
 	untracked,
 } from '@angular/core';
 import { lucideArrowLeft } from '@ng-icons/lucide';
-import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
+import { HlmButtonDirective, provideBrnButtonConfig } from '@spartan-ng/ui-button-helm';
 import { hlm } from '@spartan-ng/ui-core';
 import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm';
 import type { ClassValue } from 'clsx';
@@ -23,10 +23,10 @@ import { HlmCarouselComponent } from './hlm-carousel.component';
 	encapsulation: ViewEncapsulation.None,
 	host: {
 		'[disabled]': 'isDisabled()',
-		'(click)': 'carousel.scrollPrev()',
+		'(click)': '_carousel.scrollPrev()',
 	},
 	hostDirectives: [{ directive: HlmButtonDirective, inputs: ['variant', 'size'] }],
-	providers: [provideIcons({ lucideArrowLeft })],
+	providers: [provideIcons({ lucideArrowLeft }), provideBrnButtonConfig({ variant: 'outline', size: 'icon' })],
 	imports: [HlmIconComponent],
 	template: `
 		<hlm-icon size="sm" name="lucideArrowLeft" />
@@ -34,29 +34,28 @@ import { HlmCarouselComponent } from './hlm-carousel.component';
 	`,
 })
 export class HlmCarouselPreviousComponent {
-	protected carousel = inject(HlmCarouselComponent);
-	_userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() =>
+	private readonly _button = inject(HlmButtonDirective);
+
+	protected readonly _carousel = inject(HlmCarouselComponent);
+
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+
+	private readonly _computedClass = computed(() =>
 		hlm(
 			'absolute h-8 w-8 rounded-full',
-			this.carousel.orientation() === 'horizontal'
+			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(),
+			this.userClass(),
 		),
 	);
-	protected isDisabled = () => !this.carousel.canScrollPrev();
+	protected readonly isDisabled = () => !this._carousel.canScrollPrev();
 
 	constructor() {
-		const button = inject(HlmButtonDirective);
-
-		button.variant = 'outline';
-		button.size = 'icon';
-
 		effect(() => {
 			const computedClass = this._computedClass();
 
-			untracked(() => button.setClass(computedClass));
+			untracked(() => this._button.setClass(computedClass));
 		});
 	}
 }

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

@@ -47,22 +47,22 @@ import {
 export class HlmCarouselComponent {
 	@ViewChild(EmblaCarouselDirective) protected emblaCarousel?: EmblaCarouselDirective;
 
-	_userClass = input<ClassValue>('', { alias: 'class' });
+	public _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[]);
+	public orientation = input<'horizontal' | 'vertical'>('horizontal');
+	public options: InputSignal<Omit<EmblaOptionsType, 'axis'> | undefined> = input();
+	public 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();
+	private readonly _canScrollPrev = signal(false);
+	public canScrollPrev = this._canScrollPrev.asReadonly();
+	private readonly _canScrollNext = signal(false);
+	public canScrollNext = this._canScrollNext.asReadonly();
 
 	protected onEmblaEvent(event: EmblaEventType) {
 		const emblaApi = this.emblaCarousel?.emblaApi;

package/src/generators/ui/libs/ui-carousel-helm/generator.d.ts

@@ -1,3 +1,3 @@
 import { Tree } from '@nx/devkit';
-import { HlmBaseGeneratorSchema } from '../../../base/schema';
+import type { 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

@@ -2,10 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generator = generator;
 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' }));
+const generator_1 = tslib_1.__importDefault(require("../../../base/generator"));
+async function generator(tree, options) {
+    return await (0, generator_1.default)(tree, {
+        ...options,
+        primitiveName: 'carousel',
+        internalName: 'ui-carousel-helm',
+        publicName: 'ui-carousel-helm',
     });
 }
 //# sourceMappingURL=generator.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/ui-carousel-helm/generator.ts"],"names":[],"mappings":";;AAIA,8BAOC;;AATD,uDAAuD;AAEvD,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"}
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/ui-carousel-helm/generator.ts"],"names":[],"mappings":";;AAIA,8BAOC;;AAVD,gFAAuD;AAGhD,KAAK,UAAU,SAAS,CAAC,IAAU,EAAE,OAA+B;IAC1E,OAAO,MAAM,IAAA,mBAAgB,EAAC,IAAI,EAAE;QACnC,GAAG,OAAO;QACV,aAAa,EAAE,UAAU;QACzB,YAAY,EAAE,kBAAkB;QAChC,UAAU,EAAE,kBAAkB;KAC9B,CAAC,CAAC;AACJ,CAAC"}

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

@@ -18,7 +18,7 @@ import type { ClassValue } from 'clsx';
 	`,
 })
 export class HlmCheckboxCheckIconComponent {
-	private _brnCheckbox = inject(BrnCheckboxComponent);
+	private readonly _brnCheckbox = inject(BrnCheckboxComponent);
 	protected _checked = this._brnCheckbox?.isChecked;
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 

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

@@ -1,15 +1,4 @@
-import {
-	Component,
-	EventEmitter,
-	Output,
-	booleanAttribute,
-	computed,
-	effect,
-	forwardRef,
-	input,
-	model,
-	signal,
-} from '@angular/core';
+import { Component, booleanAttribute, computed, forwardRef, input, model, output, 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';
@@ -32,7 +21,7 @@ export const HLM_CHECKBOX_VALUE_ACCESSOR = {
 			[name]="name()"
 			[class]="_computedClass()"
 			[checked]="checked()"
-			[disabled]="_disabled()"
+			[disabled]="state().disabled()"
 			[required]="required()"
 			[aria-label]="ariaLabel()"
 			[aria-labelledby]="ariaLabelledby()"
@@ -59,7 +48,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.state().disabled() ? 'cursor-not-allowed opacity-50' : '',
 		),
 	);
 
@@ -80,25 +69,20 @@ export class HlmCheckboxComponent {
 	public readonly name = input<string | null>(null);
 	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 },
-	);
+	protected readonly state = computed(() => ({
+		disabled: signal(this.disabled()),
+	}));
 
 	// icon inputs
 	public readonly checkIconName = input<string>('lucideCheck');
-	public readonly checkIconClass = input<string>('');
+	public readonly checkIconClass = input<ClassValue>('');
 
-	@Output()
-	public changed = new EventEmitter<boolean>();
+	public readonly changed = output<boolean>();
 
 	protected _handleChange(): void {
-		if (this._disabled()) return;
+		if (this.state().disabled()) return;
 
 		const previousChecked = this.checked();
 		this.checked.set(previousChecked === 'indeterminate' ? true : !previousChecked);
@@ -112,7 +96,7 @@ export class HlmCheckboxComponent {
 	writeValue(value: any): void {
 		this.checked.set(!!value);
 	}
-	// eslint-disable-next-line @typescript-eslint/no-empty-function,@typescript-eslint/no-unused-vars,,@typescript-eslint/no-explicit-any
+	// 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 = () => {};
@@ -128,6 +112,6 @@ export class HlmCheckboxComponent {
 	}
 
 	setDisabledState(isDisabled: boolean): void {
-		this._disabled.set(isDisabled);
+		this.state().disabled.set(isDisabled);
 	}
 }

package/src/generators/ui/libs/ui-checkbox-helm/generator.d.ts

@@ -1,3 +1,3 @@
 import { Tree } from '@nx/devkit';
-import { HlmBaseGeneratorSchema } from '../../../base/schema';
+import type { HlmBaseGeneratorSchema } from '../../../base/schema';
 export declare function generator(tree: Tree, options: HlmBaseGeneratorSchema): Promise<import("@nx/devkit").GeneratorCallback>;

package/src/generators/ui/libs/ui-checkbox-helm/generator.js

@@ -2,10 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generator = generator;
 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: 'checkbox', internalName: 'ui-checkbox-helm', publicName: 'ui-checkbox-helm' }));
+const generator_1 = tslib_1.__importDefault(require("../../../base/generator"));
+async function generator(tree, options) {
+    return await (0, generator_1.default)(tree, {
+        ...options,
+        primitiveName: 'checkbox',
+        internalName: 'ui-checkbox-helm',
+        publicName: 'ui-checkbox-helm',
     });
 }
 //# sourceMappingURL=generator.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/ui-checkbox-helm/generator.ts"],"names":[],"mappings":";;AAIA,8BAOC;;AATD,uDAAuD;AAEvD,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"}
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/ui-checkbox-helm/generator.ts"],"names":[],"mappings":";;AAIA,8BAOC;;AAVD,gFAAuD;AAGhD,KAAK,UAAU,SAAS,CAAC,IAAU,EAAE,OAA+B;IAC1E,OAAO,MAAM,IAAA,mBAAgB,EAAC,IAAI,EAAE;QACnC,GAAG,OAAO;QACV,aAAa,EAAE,UAAU;QACzB,YAAY,EAAE,kBAAkB;QAChC,UAAU,EAAE,kBAAkB;KAC9B,CAAC,CAAC;AACJ,CAAC"}

package/src/generators/ui/libs/ui-command-helm/files/lib/hlm-command-dialog-close-button.directive.ts.template

@@ -1,5 +1,5 @@
-import { Directive, computed, inject, input } from '@angular/core';
-import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
+import { Directive, computed, input } from '@angular/core';
+import { HlmButtonDirective, provideBrnButtonConfig } from '@spartan-ng/ui-button-helm';
 import { hlm } from '@spartan-ng/ui-core';
 import type { ClassValue } from 'clsx';
 
@@ -7,16 +7,12 @@ import type { ClassValue } from 'clsx';
 	selector: '[hlmCmdDialogCloseBtn]',
 	standalone: true,
 	hostDirectives: [HlmButtonDirective],
+	providers: [provideBrnButtonConfig({ variant: 'ghost' })],
 	host: {
-		'[class]': '_computedClass()',
+		'[class]': 'computedClass()',
 	},
 })
 export class HlmCommandDialogCloseButtonDirective {
-	private _hlmBtn = inject(HlmButtonDirective, { host: true });
-	constructor() {
-		this._hlmBtn.variant = 'ghost';
-	}
-
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm('!p-1 !h-5 !w-5', this.userClass()));
+	protected readonly computedClass = computed(() => hlm('!p-1 !h-5 !w-5', this.userClass()));
 }

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

@@ -12,10 +12,10 @@ import { HlmCommandDirective } from './hlm-command.directive';
 	},
 })
 export class HlmCommandDialogDirective {
-	private _stateProvider = injectExposesStateProvider({ host: true });
+	private readonly _stateProvider = injectExposesStateProvider({ host: true });
 	public state = this._stateProvider.state ?? signal('closed').asReadonly();
-	private _renderer = inject(Renderer2);
-	private _element = inject(ElementRef);
+	private readonly _renderer = inject(Renderer2);
+	private readonly _element = inject(ElementRef);
 
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _computedClass = computed(() =>

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

@@ -1,23 +1,17 @@
-import { Directive, computed, inject, input } from '@angular/core';
+import { Directive, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
-import { HlmIconComponent } from '@spartan-ng/ui-icon-helm';
+import { provideHlmIconConfig } from '@spartan-ng/ui-icon-helm';
 import type { ClassValue } from 'clsx';
 
 @Directive({
 	selector: '[hlmCmdIcon]',
 	standalone: true,
+	providers: [provideHlmIconConfig({ size: 'none' })],
 	host: {
 		'[class]': '_computedClass()',
 	},
 })
 export class HlmCommandItemIconDirective {
-	private _menuIcon = inject(HlmIconComponent, { host: true, optional: true });
-
-	constructor() {
-		if (!this._menuIcon) return;
-		this._menuIcon.size = 'none';
-	}
-
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _computedClass = computed(() => hlm('mr-2 h-4 w-4', this.userClass()));
 }

package/src/generators/ui/libs/ui-command-helm/generator.d.ts

@@ -1,3 +1,3 @@
 import { Tree } from '@nx/devkit';
-import { HlmBaseGeneratorSchema } from '../../../base/schema';
+import type { HlmBaseGeneratorSchema } from '../../../base/schema';
 export declare function generator(tree: Tree, options: HlmBaseGeneratorSchema): Promise<import("@nx/devkit").GeneratorCallback>;