@spartan-ng/cli 0.0.1-alpha.337 → 0.0.1-alpha.339

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

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

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

@@ -18,11 +18,11 @@ import { ClassValue } from 'clsx';
 	],
 })
 export class HlmMenuItemRadioDirective {
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _computedClass = computed(() =>
 		hlm(
 			'group w-full relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground disabled:pointer-events-none disabled:opacity-50',
-			this._userClass(),
+			this.userClass(),
 		),
 	);
 }

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

@@ -17,6 +17,6 @@ import { ClassValue } from 'clsx';
 	},
 })
 export class HlmMenuItemSubIndicatorComponent {
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm('inline-block ml-auto h-4 w-4', this._userClass()));
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm('inline-block ml-auto h-4 w-4', this.userClass()));
 }

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

@@ -30,8 +30,8 @@ export type HlmMenuItemVariants = VariantProps<typeof hlmMenuItemVariants>;
 export class HlmMenuItemDirective {
 	private readonly _inset = signal<boolean>(false);
 
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm(hlmMenuItemVariants({ inset: this._inset() }), this._userClass()));
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm(hlmMenuItemVariants({ inset: this._inset() }), this.userClass()));
 
 	@Input({ transform: booleanAttribute })
 	set inset(value: boolean) {

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

@@ -13,9 +13,9 @@ import { ClassValue } from 'clsx';
 	},
 })
 export class HlmMenuLabelComponent {
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _computedClass = computed(() =>
-		hlm('block px-2 py-1.5 text-sm font-semibold', this._inset() && 'pl-8', this._userClass()),
+		hlm('block px-2 py-1.5 text-sm font-semibold', this._inset() && 'pl-8', this.userClass()),
 	);
 
 	private readonly _inset = signal<ClassValue>(false);

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

@@ -11,6 +11,6 @@ import { ClassValue } from 'clsx';
 	},
 })
 export class HlmMenuSeparatorComponent {
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm('block -mx-1 my-1 h-px bg-muted', this._userClass()));
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm('block -mx-1 my-1 h-px bg-muted', this.userClass()));
 }

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

@@ -13,8 +13,8 @@ import { ClassValue } from 'clsx';
 	},
 })
 export class HlmMenuShortcutComponent {
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _computedClass = computed(() =>
-		hlm('ml-auto font-light text-xs tracking-widest opacity-60', this._userClass()),
+		hlm('ml-auto font-light text-xs tracking-widest opacity-60', this.userClass()),
 	);
 }

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

@@ -32,8 +32,8 @@ type MenuVariants = VariantProps<typeof menuVariants>;
 	`,
 })
 export class HlmMenuComponent {
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm(menuVariants({ variant: this._variant() }), this._userClass()));
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm(menuVariants({ variant: this._variant() }), this.userClass()));
 
 	private readonly _variant = signal<MenuVariants['variant']>('default');
 	@Input()

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

@@ -15,11 +15,11 @@ import { ClassValue } from 'clsx';
 	`,
 })
 export class HlmSubMenuComponent {
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _computedClass = computed(() =>
 		hlm(
 			'border-border min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-			this._userClass(),
+			this.userClass(),
 		),
 	);
 }

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

@@ -10,11 +10,11 @@ import { ClassValue } from 'clsx';
 	},
 })
 export class HlmPopoverCloseDirective {
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _computedClass = computed(() =>
 		hlm(
 			'absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground',
-			this._userClass(),
+			this.userClass(),
 		),
 	);
 }

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

@@ -21,11 +21,11 @@ export class HlmPopoverContentDirective {
 		});
 	}
 
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _computedClass = computed(() =>
 		hlm(
 			'relative border-border w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-			this._userClass(),
+			this.userClass(),
 		),
 	);
 }

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

@@ -14,9 +14,9 @@ export class HlmProgressIndicatorDirective implements DoCheck {
 	private _renderer = inject(Renderer2);
 	private readonly _value = signal(0);
 
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _computedClass = computed(() =>
-		hlm('inline-flex transform-gpu h-full w-full flex-1 bg-primary transition-all', this._userClass()),
+		hlm('inline-flex transform-gpu h-full w-full flex-1 bg-primary transition-all', this.userClass()),
 	);
 
 	constructor() {

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

@@ -10,8 +10,8 @@ import { ClassValue } from 'clsx';
 	},
 })
 export class HlmProgressDirective {
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _computedClass = computed(() =>
-		hlm('inline-flex relative h-4 w-full overflow-hidden rounded-full bg-secondary', this._userClass()),
+		hlm('inline-flex relative h-4 w-full overflow-hidden rounded-full bg-secondary', this.userClass()),
 	);
 }

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

@@ -10,6 +10,6 @@ import { ClassValue } from 'clsx';
 	},
 })
 export class HlmRadioGroupDirective {
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm('block', this._userClass()));
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm('block', this.userClass()));
 }

package/src/generators/ui/libs/ui-radio-group-helm/files/lib/hlm-radio-indicator.component.ts.template

@@ -19,6 +19,6 @@ const btnLike =
 	`,
 })
 export class HlmRadioIndicatorComponent {
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm('relative inline-flex h-4 w-4', this._userClass()));
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm('relative inline-flex h-4 w-4', this.userClass()));
 }

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

@@ -10,8 +10,8 @@ import { ClassValue } from 'clsx';
 	},
 })
 export class HlmRadioDirective {
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _computedClass = computed(() =>
-		hlm('group [&.brn-radio-disabled]:text-muted-foreground flex items-center space-x-2', this._userClass()),
+		hlm('group [&.brn-radio-disabled]:text-muted-foreground flex items-center space-x-2', this.userClass()),
 	);
 }

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

@@ -24,7 +24,7 @@ export class HlmSelectLabelDirective implements OnInit {
 	}
 	protected _computedClass = computed(() =>
 		hlm(
-			'px-2 py-1.5 text-sm font-semibold',
+			'pl-8 pr-2 text-sm font-semibold rtl:pl-2 rtl:pr-8',
 			this._stickyLabels() ? 'sticky top-0 bg-popover block z-[2]' : '',
 			this._classNames(),
 		),

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

@@ -18,7 +18,7 @@ import { ClassValue } from 'clsx';
 		<ng-content />
 		<span
 			[attr.dir]="_brnSelectOption.dir()"
-			class="absolute right-2 flex h-3.5 w-3.5 items-center justify-center rtl:left-2 rtl:right-auto"
+			class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center rtl:left-auto rtl:right-2"
 			[attr.data-state]="this._brnSelectOption.checkedState()"
 		>
 			@if (this._brnSelectOption.selected()) {
@@ -39,7 +39,7 @@ export class HlmSelectOptionComponent {
 	}
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pr-8 pl-2  rtl:flex-reverse rtl:pl-8 rtl:pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+			'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2  rtl:flex-reverse rtl:pr-8 rtl:pl-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
 			this.classNames(),
 		),
 	);

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

@@ -1,6 +1,6 @@
 import { Component, computed, ContentChild, ElementRef, Input, signal, ViewChild } from '@angular/core';
 import { provideIcons } from '@ng-icons/core';
-import { lucideChevronsUpDown } from '@ng-icons/lucide';
+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';
@@ -10,14 +10,14 @@ import { ClassValue } from 'clsx';
 	selector: 'hlm-select-trigger',
 	standalone: true,
 	imports: [BrnSelectTriggerDirective, HlmIconComponent],
-	providers: [provideIcons({ lucideChevronsUpDown })],
+	providers: [provideIcons({ lucideChevronDown })],
 	template: `
 		<button [class]="_computedClass()" #button brnSelectTrigger type="button">
 			<ng-content />
 			@if (icon) {
 				<ng-content select="hlm-icon" />
 			} @else {
-				<hlm-icon class="ml-2 h-4 w-4 flex-none" name="lucideChevronsUpDown" />
+				<hlm-icon class="ml-2 h-4 w-4 flex-none" name="lucideChevronDown" />
 			}
 		</button>
 	`,

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

@@ -17,12 +17,12 @@ export class HlmSeparatorDirective {
 		this._orientation.set(value);
 	}
 
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _computedClass = computed(() =>
 		hlm(
 			'inline-flex shrink-0 border-0 bg-border',
 			this._orientation() === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
-			this._userClass(),
+			this.userClass(),
 		),
 	);
 }

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

@@ -10,11 +10,11 @@ import { ClassValue } from 'clsx';
 	},
 })
 export class HlmSheetCloseDirective {
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _computedClass = computed(() =>
 		hlm(
 			'absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground',
-			this._userClass(),
+			this.userClass(),
 		),
 	);
 }

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

@@ -56,6 +56,6 @@ export class HlmSheetContentComponent {
 		});
 	}
 
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm(sheetVariants({ side: this._sideProvider.side() }), this._userClass()));
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm(sheetVariants({ side: this._sideProvider.side() }), this.userClass()));
 }

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

@@ -12,6 +12,6 @@ import { ClassValue } from 'clsx';
 	hostDirectives: [BrnSheetDescriptionDirective],
 })
 export class HlmSheetDescriptionDirective {
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm('text-sm text-muted-foreground', this._userClass()));
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm('text-sm text-muted-foreground', this.userClass()));
 }

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

@@ -13,8 +13,8 @@ import { ClassValue } from 'clsx';
 	},
 })
 export class HlmSheetFooterComponent {
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _computedClass = computed(() =>
-		hlm('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', this._userClass()),
+		hlm('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', this.userClass()),
 	);
 }

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

@@ -13,6 +13,6 @@ import { ClassValue } from 'clsx';
 	},
 })
 export class HlmSheetHeaderComponent {
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm('flex flex-col space-y-2 text-center sm:text-left', this._userClass()));
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm('flex flex-col space-y-2 text-center sm:text-left', this.userClass()));
 }

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

@@ -11,11 +11,11 @@ import { ClassValue } from 'clsx';
 })
 export class HlmSheetOverlayDirective {
 	private _classSettable = injectCustomClassSettable({ optional: true, host: true });
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _computedClass = computed(() =>
 		hlm(
 			'bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-			this._userClass(),
+			this.userClass(),
 		),
 	);
 

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

@@ -12,6 +12,6 @@ import { ClassValue } from 'clsx';
 	hostDirectives: [BrnSheetTitleDirective],
 })
 export class HlmSheetTitleDirective {
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm('text-lg font-semibold', this._userClass()));
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm('text-lg font-semibold', this.userClass()));
 }

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

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, forwardRef, ViewEncapsulation } from '@angular/core';
-import { BrnDialogComponent, provideBrnDialog } from '@spartan-ng/ui-dialog-brain';
+import { BrnDialogComponent } from '@spartan-ng/ui-dialog-brain';
 import { BrnSheetComponent, BrnSheetOverlayComponent } from '@spartan-ng/ui-sheet-brain';
 import { HlmSheetOverlayDirective } from './hlm-sheet-overlay.directive';
 
@@ -8,7 +8,6 @@ import { HlmSheetOverlayDirective } from './hlm-sheet-overlay.directive';
 	standalone: true,
 	imports: [BrnSheetOverlayComponent, HlmSheetOverlayDirective],
 	providers: [
-		provideBrnDialog(),
 		{
 			provide: BrnDialogComponent,
 			useExisting: forwardRef(() => BrnSheetComponent),

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

@@ -11,6 +11,6 @@ import { ClassValue } from 'clsx';
 	},
 })
 export class HlmSkeletonComponent {
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm('block animate-pulse rounded-md bg-muted', this._userClass()));
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm('block animate-pulse rounded-md bg-muted', this.userClass()));
 }

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

@@ -51,6 +51,6 @@ export class HlmSpinnerComponent {
 		this._size.set(value);
 	}
 
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm(spinnerVariants({ size: this._size() }), this._userClass()));
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm(spinnerVariants({ size: this._size() }), this.userClass()));
 }

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

@@ -10,11 +10,11 @@ import { ClassValue } from 'clsx';
 	},
 })
 export class HlmSwitchThumbDirective {
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _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(),
+			this.userClass(),
 		),
 	);
 }

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

@@ -50,12 +50,12 @@ export const HLM_SWITCH_VALUE_ACCESSOR = {
 	providers: [HLM_SWITCH_VALUE_ACCESSOR],
 })
 export class HlmSwitchComponent {
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _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._userClass(),
+			this.userClass(),
 		),
 	);
 

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

@@ -32,13 +32,13 @@ export class HlmCaptionComponent {
 
 	protected readonly id = input<string | null | undefined>(`${captionIdSequence++}`);
 
-	private readonly hidden = input(false, { transform: booleanAttribute });
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly hidden = input(false, { transform: booleanAttribute });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
 			'text-center block mt-4 text-sm text-muted-foreground',
 			this.hidden() ? 'sr-only' : 'order-last',
-			this._userClass(),
+			this.userClass(),
 		),
 	);
 

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

@@ -17,13 +17,13 @@ import { ClassValue } from 'clsx';
 	encapsulation: ViewEncapsulation.None,
 })
 export class HlmTableComponent {
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
-		hlm('flex flex-col text-sm [&_hlm-trow:last-child]:border-0', this._userClass()),
+		hlm('flex flex-col text-sm [&_hlm-trow:last-child]:border-0', this.userClass()),
 	);
 
 	// we aria-labelledby to be settable from outside but use the input by default.
-	private readonly _labeledByInput = input<string | null | undefined>(undefined, { alias: 'aria-labelledby' });
+	public readonly _labeledByInput = input<string | null | undefined>(undefined, { alias: 'aria-labelledby' });
 	public readonly labeledBy = signal<string | null | undefined>(undefined);
 
 	constructor() {

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

@@ -36,10 +36,10 @@ import { ClassValue } from 'clsx';
 })
 export class HlmTdComponent {
 	private readonly _columnDef? = inject(BrnColumnDefComponent, { optional: true });
-	protected readonly truncate = input(false, { transform: booleanAttribute });
+	public readonly truncate = input(false, { transform: booleanAttribute });
 
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
-		hlm('flex flex-none p-4 items-center [&:has([role=checkbox])]:pr-0', this._columnDef?.class(), this._userClass()),
+		hlm('flex flex-none p-4 items-center [&:has([role=checkbox])]:pr-0', this._columnDef?.class(), this.userClass()),
 	);
 }

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

@@ -36,14 +36,14 @@ import { ClassValue } from 'clsx';
 })
 export class HlmThComponent {
 	private readonly _columnDef? = inject(BrnColumnDefComponent, { optional: true });
-	protected readonly truncate = input(false, { transform: booleanAttribute });
+	public readonly truncate = input(false, { transform: booleanAttribute });
 
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
 			'flex flex-none h-12 px-4 text-sm items-center font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
 			this._columnDef?.class(),
-			this._userClass(),
+			this.userClass(),
 		),
 	);
 }

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

@@ -16,11 +16,11 @@ import { ClassValue } from 'clsx';
 	encapsulation: ViewEncapsulation.None,
 })
 export class HlmTrowComponent {
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _computedClass = computed(() =>
 		hlm(
 			'flex flex border-b border-border transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
-			this._userClass(),
+			this.userClass(),
 		),
 	);
 }

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

@@ -14,11 +14,11 @@ import { ClassValue } from 'clsx';
 export class HlmTabsContentDirective {
 	public readonly contentFor = input.required<string>({ alias: 'hlmTabsContent' });
 
-	public readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _computedClass = computed(() =>
 		hlm(
 			'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
-			this._userClass(),
+			this.userClass(),
 		),
 	);
 }

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

@@ -32,6 +32,6 @@ type ListVariants = VariantProps<typeof listVariants>;
 export class HlmTabsListComponent {
 	public readonly orientation = input<ListVariants['orientation']>('horizontal');
 
-	public readonly _userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm(listVariants({ orientation: this.orientation() }), this._userClass()));
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm(listVariants({ orientation: this.orientation() }), this.userClass()));
 }

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

@@ -14,11 +14,11 @@ import { ClassValue } from 'clsx';
 export class HlmTabsTriggerDirective {
 	public readonly triggerFor = input.required<string>({ alias: 'hlmTabsTrigger' });
 
-	public readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _computedClass = computed(() =>
 		hlm(
 			'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
-			this._userClass(),
+			this.userClass(),
 		),
 	);
 }

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

@@ -10,11 +10,11 @@ import { ClassValue } from 'clsx';
 	},
 })
 export class HlmToggleGroupDirective {
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _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(),
+			this.userClass(),
 		),
 	);
 }

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

@@ -45,8 +45,8 @@ export class HlmToggleDirective {
 		this._size.set(value);
 	}
 
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _computedClass = computed(() =>
-		hlm(toggleVariants({ variant: this._variant(), size: this._size() }), this._userClass()),
+		hlm(toggleVariants({ variant: this._variant(), size: this._size() }), this.userClass()),
 	);
 }

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

@@ -12,6 +12,6 @@ export const hlmBlockquote = 'mt-6 border-border border-l-2 pl-6 italic';
 	},
 })
 export class HlmBlockquoteDirective {
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm(hlmBlockquote, this._userClass()));
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm(hlmBlockquote, this.userClass()));
 }

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

@@ -12,6 +12,6 @@ export const hlmCode = 'relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-m
 	},
 })
 export class HlmCodeDirective {
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm(hlmCode, this._userClass()));
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm(hlmCode, this.userClass()));
 }

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

@@ -12,6 +12,6 @@ export const hlmH1 = 'scroll-m-20 text-4xl font-extrabold tracking-tight lg:text
 	},
 })
 export class HlmH1Directive {
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm(hlmH1, this._userClass()));
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm(hlmH1, this.userClass()));
 }