@spartan-ng/cli 0.0.1-alpha.519 → 0.0.1-alpha.520

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

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
 import { hlm } from '<%- importAlias %>/utils';
-import { ClassValue } from 'clsx';
+import type { ClassValue } from 'clsx';
 import { HlmCarousel } from './hlm-carousel';
 
 @Component({
@@ -20,7 +20,7 @@ export class HlmCarouselSlideDisplay {
 	protected readonly _currentSlide = computed(() => this._carousel.currentSlide() + 1);
 
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm('', this.userClass()));
+	protected readonly _computedClass = computed(() => hlm('', this.userClass()));
 
 	public readonly slideClass = input<ClassValue>('text-muted-foreground text-sm');
 

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

@@ -1,4 +1,4 @@
-import { BooleanInput } from '@angular/cdk/coercion';
+import type { BooleanInput } from '@angular/cdk/coercion';
 import {
 	booleanAttribute,
 	ChangeDetectionStrategy,
@@ -10,7 +10,7 @@ import {
 	output,
 	signal,
 } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideCheck } from '@ng-icons/lucide';
 import { BrnCheckbox } from '@spartan-ng/brain/checkbox';

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

@@ -1,7 +1,7 @@
 import { computed, Directive, input } from '@angular/core';
 import { provideHlmIconConfig } from '<%- importAlias %>/icon';
 import { hlm } from '<%- importAlias %>/utils';
-import { ClassValue } from 'clsx';
+import type { ClassValue } from 'clsx';
 
 @Directive({
 	selector: '[hlmCommandIcon]',

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

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { hlm } from '<%- importAlias %>/utils';
-import { ClassValue } from 'clsx';
+import type { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-command-shortcut',

package/src/generators/ui/libs/ui-date-picker-helm/files/lib/hlm-date-picker-multi.token.ts.template

@@ -1,4 +1,4 @@
-import { inject, InjectionToken, ValueProvider } from '@angular/core';
+import { inject, InjectionToken, type ValueProvider } from '@angular/core';
 
 export interface HlmDatePickerMultiConfig<T> {
 	/**

package/src/generators/ui/libs/ui-date-picker-helm/files/lib/hlm-date-picker-multi.ts.template

@@ -1,4 +1,4 @@
-import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
+import type { BooleanInput, NumberInput } from '@angular/cdk/coercion';
 import {
 	booleanAttribute,
 	ChangeDetectionStrategy,
@@ -11,11 +11,11 @@ import {
 	output,
 	signal,
 } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideChevronDown } from '@ng-icons/lucide';
-import { BrnDialogState } from '@spartan-ng/brain/dialog';
-import { type ChangeFn, type TouchFn } from '@spartan-ng/brain/forms';
+import type { BrnDialogState } from '@spartan-ng/brain/dialog';
+import type { ChangeFn, TouchFn } from '@spartan-ng/brain/forms';
 import { BrnPopover, BrnPopoverContent, BrnPopoverTrigger } from '@spartan-ng/brain/popover';
 import { HlmCalendarMulti } from '<%- importAlias %>/calendar';
 import { HlmIcon } from '<%- importAlias %>/icon';

package/src/generators/ui/libs/ui-date-picker-helm/files/lib/hlm-date-picker.token.ts.template

@@ -1,4 +1,4 @@
-import { inject, InjectionToken, ValueProvider } from '@angular/core';
+import { inject, InjectionToken, type ValueProvider } from '@angular/core';
 
 export interface HlmDatePickerConfig<T> {
 	/**

package/src/generators/ui/libs/ui-date-picker-helm/files/lib/hlm-date-picker.ts.template

@@ -1,4 +1,4 @@
-import { BooleanInput } from '@angular/cdk/coercion';
+import type { BooleanInput } from '@angular/cdk/coercion';
 import {
 	booleanAttribute,
 	ChangeDetectionStrategy,
@@ -10,11 +10,11 @@ import {
 	output,
 	signal,
 } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideChevronDown } from '@ng-icons/lucide';
-import { BrnDialogState } from '@spartan-ng/brain/dialog';
-import { type ChangeFn, type TouchFn } from '@spartan-ng/brain/forms';
+import type { BrnDialogState } from '@spartan-ng/brain/dialog';
+import type { ChangeFn, TouchFn } from '@spartan-ng/brain/forms';
 import { BrnPopover, BrnPopoverContent, BrnPopoverTrigger } from '@spartan-ng/brain/popover';
 import { HlmCalendar } from '<%- importAlias %>/calendar';
 import { HlmIcon } from '<%- importAlias %>/icon';

package/src/generators/ui/libs/ui-date-picker-helm/files/lib/hlm-date-range-picker.token.ts.template

@@ -1,4 +1,4 @@
-import { inject, InjectionToken, ValueProvider } from '@angular/core';
+import { inject, InjectionToken, type ValueProvider } from '@angular/core';
 
 export interface HlmDateRangePickerConfig<T> {
 	/**

package/src/generators/ui/libs/ui-date-picker-helm/files/lib/hlm-date-range-picker.ts.template

@@ -1,4 +1,4 @@
-import { BooleanInput } from '@angular/cdk/coercion';
+import type { BooleanInput } from '@angular/cdk/coercion';
 import {
 	booleanAttribute,
 	ChangeDetectionStrategy,
@@ -11,11 +11,11 @@ import {
 	signal,
 	untracked,
 } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideChevronDown } from '@ng-icons/lucide';
-import { BrnDialogState } from '@spartan-ng/brain/dialog';
-import { type ChangeFn, type TouchFn } from '@spartan-ng/brain/forms';
+import type { BrnDialogState } from '@spartan-ng/brain/dialog';
+import type { ChangeFn, TouchFn } from '@spartan-ng/brain/forms';
 import { BrnPopover, BrnPopoverContent, BrnPopoverTrigger } from '@spartan-ng/brain/popover';
 import { HlmCalendarRange } from '<%- importAlias %>/calendar';
 import { HlmIcon } from '<%- importAlias %>/icon';

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

@@ -14,7 +14,7 @@ import type { ClassValue } from 'clsx';
 })
 export class HlmDialogFooter {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() =>
+	protected readonly _computedClass = computed(() =>
 		hlm('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', this.userClass()),
 	);
 }

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

@@ -14,5 +14,7 @@ import type { ClassValue } from 'clsx';
 })
 export class HlmDialogHeader {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm('flex flex-col gap-2 text-center sm:text-left', this.userClass()));
+	protected readonly _computedClass = computed(() =>
+		hlm('flex flex-col gap-2 text-center sm:text-left', this.userClass()),
+	);
 }

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

@@ -1,6 +1,6 @@
 import { computed, Directive, input } from '@angular/core';
 import { hlm } from '<%- importAlias %>/utils';
-import { ClassValue } from 'clsx';
+import type { ClassValue } from 'clsx';
 
 @Directive({
 	// eslint-disable-next-line @angular-eslint/directive-selector

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

@@ -9,7 +9,7 @@ import {
 } from '@angular/core';
 import { BrnFormFieldControl } from '@spartan-ng/brain/form-field';
 import { hlm } from '<%- importAlias %>/utils';
-import { ClassValue } from 'clsx';
+import type { ClassValue } from 'clsx';
 import { HlmError } from './hlm-error';
 
 @Component({

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

@@ -1,6 +1,6 @@
 import { computed, Directive, input } from '@angular/core';
 import { hlm } from '<%- importAlias %>/utils';
-import { ClassValue } from 'clsx';
+import type { ClassValue } from 'clsx';
 
 @Directive({
 	// eslint-disable-next-line @angular-eslint/directive-selector

package/src/generators/ui/libs/ui-icon-helm/files/lib/hlm-icon.token.ts.template

@@ -1,4 +1,4 @@
-import { InjectionToken, ValueProvider, inject } from '@angular/core';
+import { InjectionToken, type ValueProvider, inject } from '@angular/core';
 import type { IconSize } from './hlm-icon';
 
 export interface HlmIconConfig {

package/src/generators/ui/libs/ui-input-group-helm/files/index.ts.template

@@ -0,0 +1,13 @@
+import { HlmInputGroup } from './lib/hlm-input-group';
+import { HlmPrefix } from './lib/hlm-prefix';
+import { HlmPrefixAddon } from './lib/hlm-prefix-addon';
+import { HlmSuffix } from './lib/hlm-suffix';
+import { HlmSuffixAddon } from './lib/hlm-suffix-addon';
+
+export * from './lib/hlm-input-group';
+export * from './lib/hlm-prefix';
+export * from './lib/hlm-prefix-addon';
+export * from './lib/hlm-suffix';
+export * from './lib/hlm-suffix-addon';
+
+export const HlmInputGroupImports = [HlmInputGroup, HlmSuffixAddon, HlmPrefixAddon, HlmPrefix, HlmSuffix] as const;

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

@@ -0,0 +1,50 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { provideHlmIconConfig } from '<%- importAlias %>/icon';
+import { hlm } from '<%- importAlias %>/utils';
+import type { ClassValue } from 'clsx';
+
+@Component({
+	selector: 'hlm-input-group',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	providers: [
+		provideHlmIconConfig({
+			size: 'sm',
+		}),
+	],
+	template: `
+		<ng-content select="hlm-prefix-addon, [hlmPrefixAddon]" />
+		<div [class]="_inputWrapperClasses()">
+			<ng-content select="hlm-prefix, [hlmPrefix]" />
+			<ng-content select="input[hlmInput], textarea[hlmInput]"></ng-content>
+			<ng-content select="hlm-suffix, [hlmSuffix]" />
+		</div>
+		<ng-content select="hlm-suffix-addon, [hlmSuffixAddon]" />
+	`,
+	host: {
+		'[class]': '_wrapperClasses()',
+	},
+})
+export class HlmInputGroup {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly inputWrapperClass = input<ClassValue>('');
+
+	protected readonly _wrapperClasses = computed(() =>
+		hlm(
+			'shadow-xs group flex w-full items-stretch rounded-md has-[*:disabled]:pointer-events-none has-[*:disabled]:opacity-50 ' +
+				// Reset inner input/textarea
+				'[&_[hlmInput]]:h-auto [&_[hlmInput]]:flex-1 [&_[hlmInput]]:border-0 [&_[hlmInput]]:bg-transparent [&_[hlmInput]]:px-0 [&_[hlmInput]]:py-0 [&_[hlmInput]]:shadow-none [&_[hlmInput]]:outline-none [&_[hlmInput]]:ring-0 [&_[hlmInput]]:ring-offset-0 [&_textarea[hlmInput]]:min-h-6' +
+				this.userClass(),
+		),
+	);
+
+	protected readonly _inputWrapperClasses = computed(() =>
+		hlm(
+			'border-input bg-background placeholder:text-muted-foreground focus-within:border-ring focus-within:ring-ring/50 z-20 flex h-auto min-h-9 w-full flex-row gap-1 rounded-md border px-3 text-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-within:outline-none focus-within:ring-[3px]' +
+				// Invalid States
+				' has-[>.ng-invalid.ng-touched]:text-destructive/20 dark:[&.ng-invalid.ng-touched]:text-destructive/40 has-[>.ng-invalid.ng-touched]:border-destructive has-[>.ng-invalid.ng-touched]:focus-within:ring-destructive' +
+				// Group addon specific
+				' group-has-[hlm-prefix-addon,[hlmPrefixAddon]]:rounded-l-none group-has-[hlm-suffix-addon,[hlmSuffixAddon]]:rounded-r-none group-has-[hlm-prefix-addon,[hlmPrefixAddon]]:border-l-0 group-has-[hlm-suffix-addon,[hlmSuffixAddon]]:border-r-0',
+			this.inputWrapperClass(),
+		),
+	);
+}

package/src/generators/ui/libs/ui-input-group-helm/files/lib/hlm-prefix-addon.ts.template

@@ -0,0 +1,36 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { BrnAffixes } from '@spartan-ng/brain/input-group';
+import { hlm } from '<%- importAlias %>/utils';
+import type { ClassValue } from 'clsx';
+
+@Component({
+	selector: 'hlm-prefix-addon,[hlmPrefixAddon]',
+	hostDirectives: [
+		{
+			directive: BrnAffixes,
+			inputs: ['tabindex'],
+		},
+	],
+	template: `
+		<ng-content />
+	`,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmPrefixAddon {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() =>
+		hlm(
+			'bg-muted border-input focus-visible:border-ring focus-visible:ring-ring/50 block' +
+				' text-muted-foreground inline-flex h-auto min-h-9' +
+				' items-center justify-center whitespace-nowrap border' +
+				' px-3 text-sm font-medium transition-colors' +
+				' focus-visible:outline-none focus-visible:ring-[3px]' +
+				' disabled:pointer-events-none disabled:opacity-50' +
+				' rounded-l-md border-r-0',
+			this.userClass(),
+		),
+	);
+}

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

@@ -0,0 +1,27 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { BrnAffixes } from '@spartan-ng/brain/input-group';
+import { hlm } from '<%- importAlias %>/utils';
+import type { ClassValue } from 'clsx';
+
+@Component({
+	selector: 'hlm-prefix,[hlmPrefix]',
+	hostDirectives: [
+		{
+			directive: BrnAffixes,
+			inputs: ['tabindex'],
+		},
+	],
+	template: `
+		<ng-content />
+	`,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmPrefix {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() =>
+		hlm('text-muted-foreground inset-y-0 z-10 flex items-center ' + this.userClass()),
+	);
+}

package/src/generators/ui/libs/ui-input-group-helm/files/lib/hlm-suffix-addon.ts.template

@@ -0,0 +1,36 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { BrnAffixes } from '@spartan-ng/brain/input-group';
+import { hlm } from '<%- importAlias %>/utils';
+import type { ClassValue } from 'clsx';
+
+@Component({
+	selector: 'hlm-suffix-addon,[hlmSuffixAddon]',
+	hostDirectives: [
+		{
+			directive: BrnAffixes,
+			inputs: ['tabindex'],
+		},
+	],
+	template: `
+		<ng-content />
+	`,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmSuffixAddon {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() =>
+		hlm(
+			'bg-muted border-input focus-visible:border-ring focus-visible:ring-ring/50 block' +
+				' text-muted-foreground inline-flex h-auto min-h-9' +
+				' items-center justify-center whitespace-nowrap border' +
+				' px-3 text-sm font-medium transition-colors' +
+				' focus-visible:outline-none focus-visible:ring-[3px]' +
+				' disabled:pointer-events-none disabled:opacity-50' +
+				' border-p-0 rounded-r-md',
+			this.userClass(),
+		),
+	);
+}

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

@@ -0,0 +1,27 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { BrnAffixes } from '@spartan-ng/brain/input-group';
+import { hlm } from '<%- importAlias %>/utils';
+import type { ClassValue } from 'clsx';
+
+@Component({
+	selector: 'hlm-suffix,[hlmSuffix]',
+	hostDirectives: [
+		{
+			directive: BrnAffixes,
+			inputs: ['tabindex'],
+		},
+	],
+	template: `
+		<ng-content />
+	`,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmSuffix {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() =>
+		hlm('text-muted-foreground inset-y-0 z-10 flex items-center ' + this.userClass()),
+	);
+}

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/ui-input-group-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,aAAa;QAC5B,YAAY,EAAE,qBAAqB;QACnC,UAAU,EAAE,qBAAqB;KACjC,CAAC,CAAC;AACJ,CAAC"}

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

@@ -17,5 +17,5 @@ export type InputErrorVariants = VariantProps<typeof inputErrorVariants>;
 })
 export class HlmInputError {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm(inputErrorVariants(), this.userClass()));
+	protected readonly _computedClass = computed(() => hlm(inputErrorVariants(), this.userClass()));
 }

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

@@ -14,7 +14,7 @@ import { FormGroupDirective, NgControl, NgForm } from '@angular/forms';
 import { BrnFormFieldControl } from '@spartan-ng/brain/form-field';
 import { ErrorStateMatcher, ErrorStateTracker } from '@spartan-ng/brain/forms';
 import { hlm } from '<%- importAlias %>/utils';
-import { cva, VariantProps } from 'class-variance-authority';
+import { cva, type VariantProps } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
 
 export const inputVariants = cva(

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

@@ -1,6 +1,6 @@
 import { computed, Directive, input } from '@angular/core';
 import { hlm } from '<%- importAlias %>/utils';
-import { type ClassValue } from 'clsx';
+import type { ClassValue } from 'clsx';
 
 @Directive({
 	selector: '[hlmInputOtpGroup]',

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

@@ -3,7 +3,7 @@ import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideMinus } from '@ng-icons/lucide';
 import { HlmIcon } from '<%- importAlias %>/icon';
 import { hlm } from '<%- importAlias %>/utils';
-import { type ClassValue } from 'clsx';
+import type { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-input-otp-separator',

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

@@ -1,8 +1,8 @@
-import { NumberInput } from '@angular/cdk/coercion';
+import type { NumberInput } from '@angular/cdk/coercion';
 import { ChangeDetectionStrategy, Component, computed, input, numberAttribute } from '@angular/core';
 import { BrnInputOtpSlot } from '@spartan-ng/brain/input-otp';
 import { hlm } from '<%- importAlias %>/utils';
-import { type ClassValue } from 'clsx';
+import type { ClassValue } from 'clsx';
 import { HlmInputOtpFakeCaret } from './hlm-input-otp-fake-caret';
 
 @Component({

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

@@ -1,6 +1,6 @@
 import { computed, Directive, input } from '@angular/core';
 import { hlm } from '<%- importAlias %>/utils';
-import { type ClassValue } from 'clsx';
+import type { ClassValue } from 'clsx';
 
 @Directive({
 	selector: 'brn-input-otp[hlmInputOtp], brn-input-otp[hlm]',

package/src/generators/ui/libs/ui-menu-helm/files/lib/hlm-menu-bar.ts.template

@@ -14,7 +14,7 @@ import type { ClassValue } from 'clsx';
 })
 export class HlmMenuBar {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() =>
+	protected readonly _computedClass = computed(() =>
 		hlm('bg-background shadow-xs flex h-9 items-center gap-1 rounded-md border p-1', this.userClass()),
 	);
 }

package/src/generators/ui/libs/ui-menu-helm/files/lib/hlm-menu-item-check.ts.template

@@ -20,7 +20,7 @@ import type { ClassValue } from 'clsx';
 })
 export class HlmMenuItemCheck {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() =>
+	protected readonly _computedClass = computed(() =>
 		hlm(
 			'absolute left-2 flex h-3.5 w-3.5 items-center justify-center opacity-0 group-[.checked]:opacity-100',
 			this.userClass(),

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

@@ -12,5 +12,5 @@ import type { ClassValue } from 'clsx';
 })
 export class HlmMenuItemIcon {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm('mr-2', this.userClass()));
+	protected readonly _computedClass = computed(() => hlm('mr-2', this.userClass()));
 }

package/src/generators/ui/libs/ui-menu-helm/files/lib/hlm-menu-item-sub-indicator.ts.template

@@ -3,7 +3,7 @@ import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideChevronRight } from '@ng-icons/lucide';
 import { HlmIcon } from '<%- importAlias %>/icon';
 import { hlm } from '<%- importAlias %>/utils';
-import { ClassValue } from 'clsx';
+import type { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-menu-item-sub-indicator',

package/src/generators/ui/libs/ui-menu-helm/files/lib/hlm-menu-item.ts.template

@@ -1,8 +1,8 @@
-import { BooleanInput } from '@angular/cdk/coercion';
+import type { BooleanInput } from '@angular/cdk/coercion';
 import { booleanAttribute, computed, Directive, input } from '@angular/core';
 import { BrnMenuItem } from '@spartan-ng/brain/menu';
 import { hlm } from '<%- importAlias %>/utils';
-import { ClassValue } from 'clsx';
+import type { ClassValue } from 'clsx';
 
 @Directive({
 	selector: '[hlmMenuItem]',

package/src/generators/ui/libs/ui-menu-helm/files/lib/hlm-menu-label.ts.template

@@ -1,7 +1,7 @@
-import { BooleanInput } from '@angular/cdk/coercion';
+import type { BooleanInput } from '@angular/cdk/coercion';
 import { booleanAttribute, ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { hlm } from '<%- importAlias %>/utils';
-import { ClassValue } from 'clsx';
+import type { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-menu-label',
@@ -20,7 +20,7 @@ export class HlmMenuLabel {
 	});
 
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() =>
+	protected readonly _computedClass = computed(() =>
 		hlm('block px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', this.userClass()),
 	);
 }

package/src/generators/ui/libs/ui-menu-helm/files/lib/hlm-menu-separator.ts.template

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { hlm } from '<%- importAlias %>/utils';
-import { ClassValue } from 'clsx';
+import type { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-menu-separator',

package/src/generators/ui/libs/ui-menu-helm/files/lib/hlm-menu-shortcut.ts.template

@@ -14,7 +14,7 @@ import type { ClassValue } from 'clsx';
 })
 export class HlmMenuShortcut {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() =>
+	protected readonly _computedClass = computed(() =>
 		hlm('text-muted-foreground ml-auto text-xs tracking-widest', this.userClass()),
 	);
 }

package/src/generators/ui/libs/ui-pagination-helm/files/lib/hlm-numbered-pagination-query-params.ts.template

@@ -1,4 +1,4 @@
-import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
+import type { BooleanInput, NumberInput } from '@angular/cdk/coercion';
 import {
 	ChangeDetectionStrategy,
 	Component,

package/src/generators/ui/libs/ui-pagination-helm/files/lib/hlm-numbered-pagination.ts.template

@@ -1,4 +1,4 @@
-import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
+import type { BooleanInput, NumberInput } from '@angular/cdk/coercion';
 import {
 	ChangeDetectionStrategy,
 	Component,

package/src/generators/ui/libs/ui-pagination-helm/files/lib/hlm-pagination-link.ts.template

@@ -1,4 +1,4 @@
-import { BooleanInput } from '@angular/cdk/coercion';
+import type { BooleanInput } from '@angular/cdk/coercion';
 import { Directive, booleanAttribute, computed, input } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { type ButtonVariants, buttonVariants } from '<%- importAlias %>/button';

package/src/generators/ui/libs/ui-pagination-helm/files/lib/hlm-pagination-next.ts.template

@@ -1,12 +1,12 @@
-import { BooleanInput } from '@angular/cdk/coercion';
+import type { BooleanInput } from '@angular/cdk/coercion';
 import { booleanAttribute, ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
-import { RouterLink } from '@angular/router';
+import type { RouterLink } from '@angular/router';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideChevronRight } from '@ng-icons/lucide';
-import { ButtonVariants } from '<%- importAlias %>/button';
+import type { ButtonVariants } from '<%- importAlias %>/button';
 import { HlmIcon } from '<%- importAlias %>/icon';
 import { hlm } from '<%- importAlias %>/utils';
-import { ClassValue } from 'clsx';
+import type { ClassValue } from 'clsx';
 import { HlmPaginationLink } from './hlm-pagination-link';
 
 @Component({

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

@@ -1,12 +1,12 @@
-import { BooleanInput } from '@angular/cdk/coercion';
+import type { BooleanInput } from '@angular/cdk/coercion';
 import { booleanAttribute, ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
-import { RouterLink } from '@angular/router';
+import type { RouterLink } from '@angular/router';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideChevronLeft } from '@ng-icons/lucide';
-import { ButtonVariants } from '<%- importAlias %>/button';
+import type { ButtonVariants } from '<%- importAlias %>/button';
 import { HlmIcon } from '<%- importAlias %>/icon';
 import { hlm } from '<%- importAlias %>/utils';
-import { ClassValue } from 'clsx';
+import type { ClassValue } from 'clsx';
 import { HlmPaginationLink } from './hlm-pagination-link';
 
 @Component({