Merge branch 'main' into ty-ler/dynamic-dialog

libs/cli/src/generators/base/lib/build-dependency-array.ts

@@ -13,6 +13,7 @@ import {
 	SPARTAN_POPOVER_BRAIN_VERSION,
 	SPARTAN_PROGRESS_BRAIN_VERSION,
 	SPARTAN_RADIO_GROUP_BRAIN_VERSION,
+	SPARTAN_SELECT_BRAIN_VERSION,
 	SPARTAN_SEPARATOR_BRAIN_VERSION,
 	SPARTAN_SHEET_BRAIN_VERSION,
 	SPARTAN_SWITCH_VERSION,
@@ -36,6 +37,7 @@ const BRAIN_DEPENDENCY_MAP = {
 	popover: SPARTAN_POPOVER_BRAIN_VERSION,
 	progress: SPARTAN_PROGRESS_BRAIN_VERSION,
 	radiogroup: SPARTAN_RADIO_GROUP_BRAIN_VERSION,
+	select: SPARTAN_SELECT_BRAIN_VERSION,
 	separator: SPARTAN_SEPARATOR_BRAIN_VERSION,
 	sheet: SPARTAN_SHEET_BRAIN_VERSION,
 	switch: SPARTAN_SWITCH_VERSION,

libs/cli/src/generators/base/versions.ts

@@ -16,6 +16,7 @@ export const SPARTAN_MENU_BRAIN_VERSION = '0.0.1-alpha.335';
 export const SPARTAN_POPOVER_BRAIN_VERSION = '0.0.1-alpha.335';
 export const SPARTAN_PROGRESS_BRAIN_VERSION = '0.0.1-alpha.335';
 export const SPARTAN_RADIO_GROUP_BRAIN_VERSION = '0.0.1-alpha.335';
+export const SPARTAN_SELECT_BRAIN_VERSION = '0.0.1-alpha.336';
 export const SPARTAN_SEPARATOR_BRAIN_VERSION = '0.0.1-alpha.335';
 export const SPARTAN_SHEET_BRAIN_VERSION = '0.0.1-alpha.335';
 export const SPARTAN_SWITCH_VERSION = '0.0.1-alpha.335';

libs/cli/src/generators/ui/generator.ts

@@ -41,7 +41,14 @@ async function createPrimitiveLibraries(
 	const tasks: GeneratorCallback[] = [];
 
 	if (!response.primitives.includes('all')) {
-		await addIconForDependentPrimitive(primitivesToCreate, ['alert', 'command', 'menu', 'checkbox', 'pagination']);
+		await addIconForDependentPrimitive(primitivesToCreate, [
+			'alert',
+			'command',
+			'menu',
+			'checkbox',
+			'pagination',
+			'select',
+		]);
 		await addButtonForDependentPrimitive(primitivesToCreate, ['alertdialog', 'command', 'pagination']);
 	}
 	await replaceContextAndMenuBar(primitivesToCreate, allPrimitivesSelected);

libs/cli/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(),
 		),

libs/cli/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()) {

libs/cli/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>
 	`,

libs/cli/src/generators/ui/supported-ui-libraries.json

@@ -303,8 +303,11 @@
 	"select": {
 		"internalName": "ui-select-helm",
 		"peerDependencies": {
-			"@angular/common": "^17.0.0",
-			"@angular/core": "^17.0.0"
+			"@angular/core": "^17.1.0",
+			"@spartan-ng/ui-core": "0.0.1-alpha.336",
+			"@spartan-ng/ui-select-brain": "0.0.1-alpha.336",
+			"class-variance-authority": "^0.6.0",
+			"clsx": "^1.2.1"
 		}
 	}
 }

libs/ui/accordion/helm/src/lib/hlm-accordion-content.directive.ts

@@ -13,10 +13,10 @@ import { ClassValue } from 'clsx';
 export class HlmAccordionContentDirective {
 	private readonly _brn = inject(BrnAccordionContentComponent, { optional: true });
 
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() => {
 		const gridRows = this._brn?.state() === 'open' ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]';
-		return hlm('text-sm transition-all grid', gridRows, this._userClass());
+		return hlm('text-sm transition-all grid', gridRows, this.userClass());
 	});
 
 	constructor() {

libs/ui/accordion/helm/src/lib/hlm-accordion-icon.directive.ts

@@ -15,9 +15,9 @@ import { ClassValue } from 'clsx';
 export class HlmAccordionIconDirective {
 	private readonly _hlmIcon = inject(HlmIconComponent);
 
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _computedClass = computed(() =>
-		hlm('inline-block h-4 w-4 transition-transform duration-200', this._userClass()),
+		hlm('inline-block h-4 w-4 transition-transform duration-200', this.userClass()),
 	);
 
 	constructor() {

libs/ui/accordion/helm/src/lib/hlm-accordion-item.directive.ts

@@ -17,8 +17,8 @@ import { ClassValue } from 'clsx';
 	],
 })
 export class HlmAccordionItemDirective {
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
-		hlm('flex flex-1 flex-col border-b border-border', this._userClass()),
+		hlm('flex flex-1 flex-col border-b border-border', this.userClass()),
 	);
 }

libs/ui/accordion/helm/src/lib/hlm-accordion-trigger.directive.ts

@@ -13,11 +13,11 @@ import { ClassValue } from 'clsx';
 	hostDirectives: [BrnAccordionTriggerDirective],
 })
 export class HlmAccordionTriggerDirective {
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _computedClass = computed(() =>
 		hlm(
 			'w-full focus-visible:outline-none text-sm focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2 flex flex-1 items-center justify-between py-4 px-0.5 font-medium underline-offset-4 hover:underline [&[data-state=open]>[hlmAccordionIcon]]:rotate-180 [&[data-state=open]>[hlmAccIcon]]:rotate-180',
-			this._userClass(),
+			this.userClass(),
 		),
 	);
 }

libs/ui/accordion/helm/src/lib/hlm-accordion.directive.ts

@@ -14,8 +14,8 @@ import { ClassValue } from 'clsx';
 export class HlmAccordionDirective {
 	private readonly _brn = inject(BrnAccordionDirective);
 
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
-		hlm('flex', this._brn.orientation === 'horizontal' ? 'flex-row' : 'flex-col', this._userClass()),
+		hlm('flex', this._brn.orientation === 'horizontal' ? 'flex-row' : 'flex-col', this.userClass()),
 	);
 }

libs/ui/alert-dialog/helm/src/lib/hlm-alert-dialog-cancel-button.directive.ts

@@ -14,8 +14,8 @@ import { ClassValue } from 'clsx';
 export class HlmAlertDialogCancelButtonDirective {
 	private readonly _hlmBtn = inject(HlmButtonDirective, { host: true });
 
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm('mt-2 sm:mt-0', this._userClass()));
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() => hlm('mt-2 sm:mt-0', this.userClass()));
 
 	constructor() {
 		this._hlmBtn.variant = 'outline';

libs/ui/alert-dialog/helm/src/lib/hlm-alert-dialog-content.component.ts

@@ -19,11 +19,11 @@ export class HlmAlertDialogContentComponent {
 	private readonly _stateProvider = injectExposesStateProvider({ optional: true, host: true });
 	public readonly state = this._stateProvider?.state ?? signal('closed');
 
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
 			'relative grid w-full max-w-lg gap-4 border-border border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-top-[2%]  data-[state=open]:slide-in-from-top-[2%] sm:rounded-lg md:w-full',
-			this._userClass(),
+			this.userClass(),
 		),
 	);
 }

libs/ui/alert-dialog/helm/src/lib/hlm-alert-dialog-description.directive.ts

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

libs/ui/alert-dialog/helm/src/lib/hlm-alert-dialog-footer.component.ts

@@ -15,8 +15,8 @@ import { ClassValue } from 'clsx';
 	encapsulation: ViewEncapsulation.None,
 })
 export class HlmAlertDialogFooterComponent {
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _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()),
 	);
 }

libs/ui/alert-dialog/helm/src/lib/hlm-alert-dialog-header.component.ts

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

libs/ui/alert-dialog/helm/src/lib/hlm-alert-dialog-overlay.directive.ts

@@ -9,11 +9,11 @@ import { ClassValue } from 'clsx';
 export class HlmAlertDialogOverlayDirective {
 	private readonly _classSettable = injectCustomClassSettable({ optional: true, host: true });
 
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _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(),
 		),
 	);
 

libs/ui/alert-dialog/helm/src/lib/hlm-alert-dialog-title.directive.ts

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

libs/ui/alert/helm/src/lib/hlm-alert-description.directive.ts

@@ -16,6 +16,6 @@ export type AlertDescriptionVariants = VariantProps<typeof alertDescriptionVaria
 	},
 })
 export class HlmAlertDescriptionDirective {
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm(alertDescriptionVariants(), this._userClass()));
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm(alertDescriptionVariants(), this.userClass()));
 }

libs/ui/alert/helm/src/lib/hlm-alert-title.directive.ts

@@ -16,6 +16,6 @@ export type AlertTitleVariants = VariantProps<typeof alertTitleVariants>;
 	},
 })
 export class HlmAlertTitleDirective {
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm(alertTitleVariants(), this._userClass()));
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm(alertTitleVariants(), this.userClass()));
 }

libs/ui/alert/helm/src/lib/hlm-alert.directive.ts

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

libs/ui/aspect-ratio/helm/src/lib/helm-aspect-ratio.directive.ts

@@ -27,8 +27,8 @@ export class HlmAspectRatioDirective implements AfterViewInit {
 		return `${100 / this._ratio()}%`;
 	});
 
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm(`relative w-full`, this._userClass()));
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() => hlm(`relative w-full`, this.userClass()));
 
 	@Input()
 	set hlmAspectRatio(value: NumberInput) {

libs/ui/avatar/helm/src/lib/hlm-avatar.component.ts

@@ -36,9 +36,9 @@ type AvatarVariants = VariantProps<typeof avatarVariants>;
 	`,
 })
 export class HlmAvatarComponent extends BrnAvatarComponent {
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
-		hlm(avatarVariants({ variant: this._variant() }), this._userClass()),
+		hlm(avatarVariants({ variant: this._variant() }), this.userClass()),
 	);
 
 	private readonly _variant = signal<AvatarVariants['variant']>('medium');

libs/ui/avatar/helm/src/lib/image/hlm-avatar-image.directive.ts

@@ -15,6 +15,6 @@ import { ClassValue } from 'clsx';
 export class HlmAvatarImageDirective {
 	canShow = inject(BrnAvatarImageDirective).canShow;
 
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm('aspect-square object-cover h-full w-full', this._userClass()));
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm('aspect-square object-cover h-full w-full', this.userClass()));
 }

libs/ui/badge/helm/src/lib/hlm-badge.directive.ts

@@ -53,9 +53,9 @@ type badgeVariants = VariantProps<typeof badgeVariants>;
 	},
 })
 export class HlmBadgeDirective {
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _computedClass = computed(() =>
-		hlm(badgeVariants({ variant: this._variant(), size: this._size(), static: this._static() }), this._userClass()),
+		hlm(badgeVariants({ variant: this._variant(), size: this._size(), static: this._static() }), this.userClass()),
 	);
 
 	private readonly _variant = signal<badgeVariants['variant']>('default');

libs/ui/button/helm/src/lib/hlm-button.directive.ts

@@ -38,11 +38,11 @@ export type ButtonVariants = VariantProps<typeof buttonVariants>;
 	},
 })
 export class HlmButtonDirective {
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	private readonly _settableClass = signal<ClassValue>('');
 
 	protected _computedClass = computed(() =>
-		hlm(buttonVariants({ variant: this._variant(), size: this._size() }), this._settableClass(), this._userClass()),
+		hlm(buttonVariants({ variant: this._variant(), size: this._size() }), this._settableClass(), this.userClass()),
 	);
 
 	setClass(value: ClassValue) {

libs/ui/card/helm/src/lib/hlm-card-content.directive.ts

@@ -17,6 +17,6 @@ export type CardContentVariants = VariantProps<typeof cardContentVariants>;
 	},
 })
 export class HlmCardContentDirective {
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm(cardContentVariants(), this._userClass()));
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm(cardContentVariants(), this.userClass()));
 }

libs/ui/card/helm/src/lib/hlm-card-description.directive.ts

@@ -17,6 +17,6 @@ export type CardDescriptionVariants = VariantProps<typeof cardDescriptionVariant
 	},
 })
 export class HlmCardDescriptionDirective {
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm(cardDescriptionVariants(), this._userClass()));
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm(cardDescriptionVariants(), this.userClass()));
 }

libs/ui/card/helm/src/lib/hlm-card-footer.directive.ts

@@ -24,10 +24,8 @@ export type CardFooterVariants = VariantProps<typeof cardFooterVariants>;
 	},
 })
 export class HlmCardFooterDirective {
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() =>
-		hlm(cardFooterVariants({ direction: this.direction() }), this._userClass()),
-	);
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm(cardFooterVariants({ direction: this.direction() }), this.userClass()));
 
 	public readonly direction = input<CardFooterVariants['direction']>('row');
 }

libs/ui/card/helm/src/lib/hlm-card-header.directive.ts

@@ -24,9 +24,9 @@ export type CardHeaderVariants = VariantProps<typeof cardHeaderVariants>;
 	},
 })
 export class HlmCardHeaderDirective {
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _computedClass = computed(() =>
-		hlm(cardHeaderVariants({ direction: this._direction() }), this._userClass()),
+		hlm(cardHeaderVariants({ direction: this._direction() }), this.userClass()),
 	);
 
 	private readonly _direction = signal<CardHeaderVariants['direction']>('column');

libs/ui/card/helm/src/lib/hlm-card-title.directive.ts

@@ -17,6 +17,6 @@ export type CardTitleVariants = VariantProps<typeof cardTitleVariants>;
 	},
 })
 export class HlmCardTitleDirective {
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm(cardTitleVariants(), this._userClass()));
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm(cardTitleVariants(), this.userClass()));
 }

libs/ui/card/helm/src/lib/hlm-card.directive.ts

@@ -20,6 +20,6 @@ export type CardVariants = VariantProps<typeof cardVariants>;
 	},
 })
 export class HlmCardDirective {
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm(cardVariants(), this._userClass()));
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm(cardVariants(), this.userClass()));
 }