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

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

@@ -1,4 +1,6 @@
-import { ChangeDetectionStrategy, Component, booleanAttribute, input, numberAttribute } from '@angular/core';
+import { ChangeDetectionStrategy, Component, booleanAttribute, computed, input, numberAttribute } from '@angular/core';
+import { hlm } from '@spartan-ng/ui-core';
+import type { ClassValue } from 'clsx';
 import { NgxSonnerToaster, type ToasterProps } from 'ngx-sonner';
 
 @Component({
@@ -20,35 +22,35 @@ import { NgxSonnerToaster, type ToasterProps } from 'ngx-sonner';
 			[toastOptions]="toastOptions()"
 			[offset]="offset()"
 			[dir]="dir()"
-			[class]="_class()"
-			[style]="_style()"
+			[class]="_computedClass()"
+			[style]="userStyle()"
 		/>
 	`,
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmToasterComponent {
-	invert = input<ToasterProps['invert'], boolean | string>(false, {
+	public readonly invert = input<ToasterProps['invert'], boolean | string>(false, {
 		transform: booleanAttribute,
 	});
-	theme = input<ToasterProps['theme']>('light');
-	position = input<ToasterProps['position']>('bottom-right');
-	hotKey = input<ToasterProps['hotkey']>(['altKey', 'KeyT']);
-	richColors = input<ToasterProps['richColors'], boolean | string>(false, {
+	public readonly theme = input<ToasterProps['theme']>('light');
+	public readonly position = input<ToasterProps['position']>('bottom-right');
+	public readonly hotKey = input<ToasterProps['hotkey']>(['altKey', 'KeyT']);
+	public readonly richColors = input<ToasterProps['richColors'], boolean | string>(false, {
 		transform: booleanAttribute,
 	});
-	expand = input<ToasterProps['expand'], boolean | string>(false, {
+	public readonly expand = input<ToasterProps['expand'], boolean | string>(false, {
 		transform: booleanAttribute,
 	});
-	duration = input<ToasterProps['duration'], number | string>(4000, {
+	public readonly duration = input<ToasterProps['duration'], number | string>(4000, {
 		transform: numberAttribute,
 	});
-	visibleToasts = input<ToasterProps['visibleToasts'], number | string>(3, {
+	public readonly visibleToasts = input<ToasterProps['visibleToasts'], number | string>(3, {
 		transform: numberAttribute,
 	});
-	closeButton = input<ToasterProps['closeButton'], boolean | string>(false, {
+	public readonly closeButton = input<ToasterProps['closeButton'], boolean | string>(false, {
 		transform: booleanAttribute,
 	});
-	toastOptions = input<ToasterProps['toastOptions']>({
+	public readonly toastOptions = input<ToasterProps['toastOptions']>({
 		classes: {
 			toast:
 				'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
@@ -57,8 +59,10 @@ export class HlmToasterComponent {
 			cancelButton: 'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
 		},
 	});
-	offset = input<ToasterProps['offset']>(null);
-	dir = input<ToasterProps['dir']>('auto');
-	_class = input('', { alias: 'class' });
-	_style = input<Record<string, string>>({}, { alias: 'style' });
+	public readonly offset = input<ToasterProps['offset']>(null);
+	public readonly dir = input<ToasterProps['dir']>('auto');
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly userStyle = input<Record<string, string>>({}, { alias: 'style' });
+
+	protected readonly _computedClass = computed(() => hlm(this.userClass()));
 }

package/src/generators/ui/libs/ui-sonner-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-sonner-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: 'sonner', internalName: 'ui-sonner-helm', publicName: 'ui-sonner-helm' }));
+const generator_1 = tslib_1.__importDefault(require("../../../base/generator"));
+async function generator(tree, options) {
+    return await (0, generator_1.default)(tree, {
+        ...options,
+        primitiveName: 'sonner',
+        internalName: 'ui-sonner-helm',
+        publicName: 'ui-sonner-helm',
     });
 }
 //# sourceMappingURL=generator.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/ui-sonner-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,QAAQ,EACvB,YAAY,EAAE,gBAAgB,EAC9B,UAAU,EAAE,gBAAgB,IAC3B,CAAC;IACJ,CAAC;CAAA"}
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/ui-sonner-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,QAAQ;QACvB,YAAY,EAAE,gBAAgB;QAC9B,UAAU,EAAE,gBAAgB;KAC5B,CAAC,CAAC;AACJ,CAAC"}

package/src/generators/ui/libs/ui-spinner-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-spinner-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: 'spinner', internalName: 'ui-spinner-helm', publicName: 'ui-spinner-helm' }));
+const generator_1 = tslib_1.__importDefault(require("../../../base/generator"));
+async function generator(tree, options) {
+    return await (0, generator_1.default)(tree, {
+        ...options,
+        primitiveName: 'spinner',
+        internalName: 'ui-spinner-helm',
+        publicName: 'ui-spinner-helm',
     });
 }
 //# sourceMappingURL=generator.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/ui-spinner-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,SAAS,EACxB,YAAY,EAAE,iBAAiB,EAC/B,UAAU,EAAE,iBAAiB,IAC5B,CAAC;IACJ,CAAC;CAAA"}
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/ui-spinner-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,SAAS;QACxB,YAAY,EAAE,iBAAiB;QAC/B,UAAU,EAAE,iBAAiB;KAC7B,CAAC,CAAC;AACJ,CAAC"}

package/src/generators/ui/libs/ui-switch-helm/files/lib/hlm-switch-ng-model.component.ignore.spec.ts.template

@@ -5,6 +5,7 @@ import { HlmSwitchComponent } from './hlm-switch.component';
 	selector: 'hlm-switch-ng-model',
 	standalone: true,
 	template: `
+		<!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -->
 		<label class="flex items-center" hlmLabel>
 			<hlm-switch
 				[(ngModel)]="switchValue"

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

@@ -11,7 +11,8 @@ import type { ClassValue } from 'clsx';
 })
 export class HlmSwitchThumbDirective {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() =>
+
+	protected readonly _computedClass = computed(() =>
 		hlm(
 			'block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform group-data-[state=checked]:translate-x-5 group-data-[state=unchecked]:translate-x-0',
 			this.userClass(),

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

@@ -1,20 +1,11 @@
-import {
-	Component,
-	EventEmitter,
-	Input,
-	Output,
-	booleanAttribute,
-	computed,
-	forwardRef,
-	input,
-	signal,
-} from '@angular/core';
+import { BooleanInput } from '@angular/cdk/coercion';
+import { Component, booleanAttribute, computed, forwardRef, input, model, output } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { hlm } from '@spartan-ng/ui-core';
+import { ChangeFn, TouchFn } from '@spartan-ng/ui-forms-brain';
 import { BrnSwitchComponent, BrnSwitchThumbComponent } from '@spartan-ng/ui-switch-brain';
 import type { ClassValue } from 'clsx';
 import { HlmSwitchThumbDirective } from './hlm-switch-thumb.directive';
-
 export const HLM_SWITCH_VALUE_ACCESSOR = {
 	provide: NG_VALUE_ACCESSOR,
 	useExisting: forwardRef(() => HlmSwitchComponent),
@@ -35,14 +26,14 @@ export const HLM_SWITCH_VALUE_ACCESSOR = {
 	template: `
 		<brn-switch
 			[class]="_computedClass()"
-			[checked]="_checked()"
-			(changed)="_handleChange($event)"
+			[checked]="checked()"
+			(changed)="handleChange($event)"
 			(touched)="_onTouched()"
-			[disabled]="_disabled()"
-			[id]="id"
-			[aria-label]="ariaLabel"
-			[aria-labelledby]="ariaLabelledby"
-			[aria-describedby]="ariaDescribedby"
+			[disabled]="disabled()"
+			[id]="id()"
+			[aria-label]="ariaLabel()"
+			[aria-labelledby]="ariaLabelledby()"
+			[aria-describedby]="ariaDescribedby()"
 		>
 			<brn-switch-thumb hlm />
 		</brn-switch>
@@ -51,69 +42,56 @@ export const HLM_SWITCH_VALUE_ACCESSOR = {
 })
 export class HlmSwitchComponent {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() =>
+	protected readonly _computedClass = computed(() =>
 		hlm(
 			'group inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
-			this._disabled() ? 'cursor-not-allowed opacity-50' : '',
+			this.disabled() ? 'cursor-not-allowed opacity-50' : '',
 			this.userClass(),
 		),
 	);
 
-	@Output()
-	public changed = new EventEmitter<boolean>();
+	public readonly checked = model<boolean>(false);
 
-	protected _handleChange(value: boolean): void {
-		this._checked.set(value);
-		this._onChange(value);
-		this.changed.emit(value);
-	}
-
-	protected _checked = signal(false);
-	@Input({ transform: booleanAttribute })
-	set checked(value: boolean) {
-		this._checked.set(value);
-	}
-
-	protected readonly _disabled = signal(false);
-	@Input({ transform: booleanAttribute })
-	set disabled(value: boolean) {
-		this._disabled.set(value);
-	}
+	public readonly disabled = input<boolean, BooleanInput>(false, {
+		transform: booleanAttribute,
+	});
 
 	/** Used to set the id on the underlying brn element. */
-	@Input()
-	id: string | null = null;
+	public readonly id = input<string | null>(null);
 
 	/** Used to set the aria-label attribute on the underlying brn element. */
-	@Input('aria-label')
-	ariaLabel: string | null = null;
+	public readonly ariaLabel = input<string | null>(null, { alias: 'aria-label' });
 
 	/** Used to set the aria-labelledby attribute on the underlying brn element. */
-	@Input('aria-labelledby')
-	ariaLabelledby: string | null = null;
+	public readonly ariaLabelledby = input<string | null>(null, { alias: 'aria-labelledby' });
 
 	/** Used to set the aria-describedby attribute on the underlying brn element. */
-	@Input('aria-describedby')
-	ariaDescribedby: string | null = null;
+	public readonly ariaDescribedby = input<string | null>(null, { alias: 'aria-describedby' });
+
+	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 handleChange(value: boolean): void {
+		this.checked.set(value);
+		this._onChange(value);
+		this.changed.emit(value);
+	}
 
 	/** CONROL VALUE ACCESSOR */
 
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	writeValue(value: any): void {
-		this.checked = !!value;
+	writeValue(value: boolean): void {
+		this.checked.set(Boolean(value));
 	}
-	// eslint-disable-next-line @typescript-eslint/no-empty-function,@typescript-eslint/no-unused-vars,,@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<boolean>): void {
 		this._onChange = fn;
 	}
 
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	registerOnTouched(fn: any): void {
+	registerOnTouched(fn: TouchFn): void {
 		this._onTouched = fn;
 	}
 }

package/src/generators/ui/libs/ui-switch-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-switch-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: 'switch', internalName: 'ui-switch-helm', publicName: 'ui-switch-helm' }));
+const generator_1 = tslib_1.__importDefault(require("../../../base/generator"));
+async function generator(tree, options) {
+    return await (0, generator_1.default)(tree, {
+        ...options,
+        primitiveName: 'switch',
+        internalName: 'ui-switch-helm',
+        publicName: 'ui-switch-helm',
     });
 }
 //# sourceMappingURL=generator.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/ui-switch-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,QAAQ,EACvB,YAAY,EAAE,gBAAgB,EAC9B,UAAU,EAAE,gBAAgB,IAC3B,CAAC;IACJ,CAAC;CAAA"}
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/ui-switch-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,QAAQ;QACvB,YAAY,EAAE,gBAAgB;QAC9B,UAAU,EAAE,gBAAgB;KAC5B,CAAC,CAAC;AACJ,CAAC"}

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

@@ -10,7 +10,7 @@ import {
 } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import type { ClassValue } from 'clsx';
-import { HlmTableComponent } from '../index';
+import { HlmTableComponent } from './hlm-table.component';
 
 let captionIdSequence = 0;
 

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

@@ -3,7 +3,7 @@ import { injectTableClassesSettable } from '@spartan-ng/ui-core';
 
 @Directive({ standalone: true, selector: '[hlmTable],brn-table[hlm]' })
 export class HlmTableDirective {
-	private _tableClassesSettable = injectTableClassesSettable({ host: true, optional: true });
+	private readonly _tableClassesSettable = injectTableClassesSettable({ host: true, optional: true });
 
 	constructor() {
 		this._tableClassesSettable?.setTableClasses({

package/src/generators/ui/libs/ui-table-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-table-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: 'table', internalName: 'ui-table-helm', publicName: 'ui-table-helm' }));
+const generator_1 = tslib_1.__importDefault(require("../../../base/generator"));
+async function generator(tree, options) {
+    return await (0, generator_1.default)(tree, {
+        ...options,
+        primitiveName: 'table',
+        internalName: 'ui-table-helm',
+        publicName: 'ui-table-helm',
     });
 }
 //# sourceMappingURL=generator.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/ui-table-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,OAAO,EACtB,YAAY,EAAE,eAAe,EAC7B,UAAU,EAAE,eAAe,IAC1B,CAAC;IACJ,CAAC;CAAA"}
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/ui-table-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,OAAO;QACtB,YAAY,EAAE,eAAe;QAC7B,UAAU,EAAE,eAAe;KAC3B,CAAC,CAAC;AACJ,CAAC"}

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

@@ -1,5 +1,6 @@
 import { CdkObserveContent } from '@angular/cdk/observers';
-import { Component, ContentChildren, type ElementRef, type QueryList, ViewChild, computed, input } from '@angular/core';
+import { Component, type ElementRef, computed, contentChildren, input, viewChild } from '@angular/core';
+import { toObservable } from '@angular/core/rxjs-interop';
 import { lucideChevronLeft, lucideChevronRight } from '@ng-icons/lucide';
 import { buttonVariants } from '@spartan-ng/ui-button-helm';
 import { hlm } from '@spartan-ng/ui-core';
@@ -61,25 +62,27 @@ import { listVariants } from './hlm-tabs-list.component';
 	},
 })
 export class HlmTabsPaginatedListComponent extends BrnTabsPaginatedListDirective {
-	@ContentChildren(BrnTabsTriggerDirective, { descendants: false })
-	_items!: QueryList<BrnTabsTriggerDirective>;
-	@ViewChild('tabListContainer', { static: true })
-	_tabListContainer!: ElementRef;
-	@ViewChild('tabList', { static: true }) _tabList!: ElementRef;
-	@ViewChild('tabListInner', { static: true }) _tabListInner!: ElementRef;
-	@ViewChild('nextPaginator') _nextPaginator!: ElementRef<HTMLElement>;
-	@ViewChild('previousPaginator') _previousPaginator!: ElementRef<HTMLElement>;
+	public readonly _items = contentChildren(BrnTabsTriggerDirective, { descendants: false });
+	public readonly _itemsChanges = toObservable(this._items);
+
+	public readonly _tabListContainer = viewChild.required<ElementRef<HTMLElement>>('tabListContainer');
+	public readonly _tabList = viewChild.required<ElementRef<HTMLElement>>('tabList');
+	public readonly _tabListInner = viewChild.required<ElementRef<HTMLElement>>('tabListInner');
+	public readonly _nextPaginator = viewChild.required<ElementRef<HTMLElement>>('nextPaginator');
+	public readonly _previousPaginator = viewChild.required<ElementRef<HTMLElement>>('previousPaginator');
 
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm('flex overflow-hidden relative flex-shrink-0', this.userClass()));
+	protected readonly _computedClass = computed(() =>
+		hlm('flex overflow-hidden relative gap-1 flex-shrink-0', this.userClass()),
+	);
 
 	public readonly tabLisClass = input<ClassValue>('', { alias: 'class' });
-	protected _tabListClass = computed(() => hlm(listVariants(), this.tabLisClass()));
+	protected readonly _tabListClass = computed(() => hlm(listVariants(), this.tabLisClass()));
 
 	public readonly paginationButtonClass = input<ClassValue>('', { alias: 'class' });
-	protected _paginationButtonClass = computed(() =>
+	protected readonly _paginationButtonClass = computed(() =>
 		hlm(
-			'relative z-[2] select-none data-[pagination=previous]:pr-1 data-[pagination=next]:pl-1 disabled:cursor-default',
+			'relative z-[2] select-none disabled:cursor-default',
 			buttonVariants({ variant: 'ghost', size: 'icon' }),
 			this.paginationButtonClass(),
 		),

package/src/generators/ui/libs/ui-tabs-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-tabs-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: 'tabs', internalName: 'ui-tabs-helm', publicName: 'ui-tabs-helm' }));
+const generator_1 = tslib_1.__importDefault(require("../../../base/generator"));
+async function generator(tree, options) {
+    return await (0, generator_1.default)(tree, {
+        ...options,
+        primitiveName: 'tabs',
+        internalName: 'ui-tabs-helm',
+        publicName: 'ui-tabs-helm',
     });
 }
 //# sourceMappingURL=generator.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/ui-tabs-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-tabs-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-toggle-helm/files/lib/hlm-toggle-group.directive.ts.template

@@ -11,7 +11,7 @@ import type { ClassValue } from 'clsx';
 })
 export class HlmToggleGroupDirective {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() =>
+	protected readonly _computedClass = computed(() =>
 		hlm(
 			'inline-flex items-center rounded-md [&>[hlm][brnToggle][variant="outline"]]:-mx-[0.5px] [&>[hlm][brnToggle]]:rounded-none focus:[&>[hlm][brnToggle]]:z-10 first-of-type:[&>[hlm][brnToggle]]:rounded-l-md last-of-type:[&>[hlm][brnToggle]]:rounded-r-md',
 			this.userClass(),

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

@@ -36,7 +36,7 @@ export class HlmToggleDirective {
 	public readonly variant = input<ToggleVariants['variant']>('default');
 	public readonly size = input<ToggleVariants['size']>('default');
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() =>
+	protected readonly _computedClass = computed(() =>
 		hlm(toggleVariants({ variant: this.variant(), size: this.size() }), this.userClass()),
 	);
 }

package/src/generators/ui/libs/ui-toggle-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-toggle-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: 'toggle', internalName: 'ui-toggle-helm', publicName: 'ui-toggle-helm' }));
+const generator_1 = tslib_1.__importDefault(require("../../../base/generator"));
+async function generator(tree, options) {
+    return await (0, generator_1.default)(tree, {
+        ...options,
+        primitiveName: 'toggle',
+        internalName: 'ui-toggle-helm',
+        publicName: 'ui-toggle-helm',
     });
 }
 //# sourceMappingURL=generator.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/ui-toggle-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,QAAQ,EACvB,YAAY,EAAE,gBAAgB,EAC9B,UAAU,EAAE,gBAAgB,IAC3B,CAAC;IACJ,CAAC;CAAA"}
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/ui-toggle-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,QAAQ;QACvB,YAAY,EAAE,gBAAgB;QAC9B,UAAU,EAAE,gBAAgB;KAC5B,CAAC,CAAC;AACJ,CAAC"}

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

@@ -38,7 +38,7 @@ export class HlmTooltipTriggerDirective {
 	}
 
 	@Input()
-	set hlmTooltipTrigger(value: string | TemplateRef<unknown> | null) {
+	public set hlmTooltipTrigger(value: string | TemplateRef<unknown> | null) {
 		this._brnTooltipTrigger.content = value;
 	}
 }

package/src/generators/ui/libs/ui-tooltip-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-tooltip-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: 'tooltip', internalName: 'ui-tooltip-helm', publicName: 'ui-tooltip-helm' }));
+const generator_1 = tslib_1.__importDefault(require("../../../base/generator"));
+async function generator(tree, options) {
+    return await (0, generator_1.default)(tree, {
+        ...options,
+        primitiveName: 'tooltip',
+        internalName: 'ui-tooltip-helm',
+        publicName: 'ui-tooltip-helm',
     });
 }
 //# sourceMappingURL=generator.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/ui-tooltip-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,SAAS,EACxB,YAAY,EAAE,iBAAiB,EAC/B,UAAU,EAAE,iBAAiB,IAC5B,CAAC;IACJ,CAAC;CAAA"}
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/ui-tooltip-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,SAAS;QACxB,YAAY,EAAE,iBAAiB;QAC/B,UAAU,EAAE,iBAAiB;KAC7B,CAAC,CAAC;AACJ,CAAC"}

package/src/generators/ui/libs/ui-typography-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-typography-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: 'typography', internalName: 'ui-typography-helm', publicName: 'ui-typography-helm' }));
+const generator_1 = tslib_1.__importDefault(require("../../../base/generator"));
+async function generator(tree, options) {
+    return await (0, generator_1.default)(tree, {
+        ...options,
+        primitiveName: 'typography',
+        internalName: 'ui-typography-helm',
+        publicName: 'ui-typography-helm',
     });
 }
 //# sourceMappingURL=generator.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/ui-typography-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,YAAY,EAC3B,YAAY,EAAE,oBAAoB,EAClC,UAAU,EAAE,oBAAoB,IAC/B,CAAC;IACJ,CAAC;CAAA"}
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/ui-typography-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,YAAY;QAC3B,YAAY,EAAE,oBAAoB;QAClC,UAAU,EAAE,oBAAoB;KAChC,CAAC,CAAC;AACJ,CAAC"}

package/src/generators/ui/primivite-deps.js

@@ -8,6 +8,7 @@ exports.primitiveDependencies = {
     aspectratio: [],
     avatar: [],
     badge: [],
+    breadcrumb: ['icon'],
     button: [],
     card: [],
     carousel: [],
@@ -41,10 +42,9 @@ exports.primitiveDependencies = {
     tooltip: [],
 };
 const getDependentPrimitives = (primitives) => {
-    var _a;
     const dependentPrimitives = new Set();
     for (const primitive of primitives) {
-        const deps = (_a = exports.primitiveDependencies[primitive]) !== null && _a !== void 0 ? _a : [];
+        const deps = exports.primitiveDependencies[primitive] ?? [];
         for (const dep of deps) {
             if (!primitives.includes(dep)) {
                 // only add the dependent primitive if it's not already in the list of primitives to create