@spartan-ng/cli 0.0.1-alpha.326 → 0.0.1-alpha.327

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spartan-ng/cli",
-  "version": "0.0.1-alpha.326",
+  "version": "0.0.1-alpha.327",
   "type": "commonjs",
   "dependencies": {
     "@nx/js": "^17.1.0",

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

@@ -1,13 +1,13 @@
 import { NgModule } from '@angular/core';
 
 import { HlmAccordionContentDirective } from './lib/hlm-accordion-content.directive';
-import { HlmAccordionIconComponent } from './lib/hlm-accordion-icon.component';
+import { HlmAccordionIconDirective } from './lib/hlm-accordion-icon.directive';
 import { HlmAccordionItemDirective } from './lib/hlm-accordion-item.directive';
 import { HlmAccordionTriggerDirective } from './lib/hlm-accordion-trigger.directive';
 import { HlmAccordionDirective } from './lib/hlm-accordion.directive';
 
 export * from './lib/hlm-accordion-content.directive';
-export * from './lib/hlm-accordion-icon.component';
+export * from './lib/hlm-accordion-icon.directive';
 export * from './lib/hlm-accordion-item.directive';
 export * from './lib/hlm-accordion-trigger.directive';
 export * from './lib/hlm-accordion.directive';
@@ -17,7 +17,7 @@ export const HlmAccordionImports = [
 	HlmAccordionItemDirective,
 	HlmAccordionTriggerDirective,
 	HlmAccordionContentDirective,
-	HlmAccordionIconComponent,
+	HlmAccordionIconDirective,
 ] as const;
 
 @NgModule({

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

@@ -1,85 +1,30 @@
-import { isPlatformBrowser } from '@angular/common';
-import {
-	computed,
-	Directive,
-	effect,
-	ElementRef,
-	inject,
-	Injector,
-	Input,
-	OnInit,
-	PLATFORM_ID,
-	signal,
-} from '@angular/core';
-import { hlm, injectCustomClassSettable } from '@spartan-ng/ui-core';
+import { computed, Directive, inject, Input, signal } from '@angular/core';
+import { BrnAccordionContentComponent } from '@spartan-ng/ui-accordion-brain';
+import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
 @Directive({
 	selector: '[hlmAccordionContent],brn-accordion-content[hlm]',
 	standalone: true,
 	host: {
-		'[style.height]': 'cssHeight()',
 		'[class]': '_computedClass()',
 	},
 })
-export class HlmAccordionContentDirective implements OnInit {
-	private readonly _host = injectCustomClassSettable({ optional: true });
-	private readonly _element = inject(ElementRef).nativeElement;
-	private readonly _injector = inject(Injector);
-	private readonly _platformId = inject(PLATFORM_ID);
-
-	private _changes?: MutationObserver;
-
-	public readonly height = signal('-1');
-	public readonly cssHeight = computed(() => (this.height() === '-1' ? 'auto' : this.height()));
-	public readonly state = signal('closed');
+export class HlmAccordionContentDirective {
+	private readonly _brn = inject(BrnAccordionContentComponent, { optional: true });
 
 	private readonly _userCls = signal<ClassValue>('');
+	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._userCls());
+	});
+
 	@Input()
 	set class(userCls: ClassValue) {
 		this._userCls.set(userCls);
 	}
 
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm('overflow-hidden text-sm transition-all', this._userCls());
-	}
-
-	public ngOnInit() {
-		this._host?.setClassToCustomElement('pt-1 pb-4');
-
-		if (isPlatformBrowser(this._platformId)) {
-			this._changes = new MutationObserver((mutations: MutationRecord[]) => {
-				mutations.forEach((mutation: MutationRecord) => {
-					if (mutation.attributeName !== 'data-state') return;
-					// eslint-disable-next-line
-					const state = (mutation.target as any).attributes.getNamedItem(mutation.attributeName)?.value;
-					this.state.set(state);
-				});
-			});
-		}
-
-		Promise.resolve().then(() => {
-			this._changes?.observe(this._element, {
-				attributes: true,
-				childList: true,
-				characterData: true,
-			});
-		});
-
-		effect(
-			() => {
-				const isOpen = this.state() === 'open';
-				Promise.resolve().then(() => {
-					this.height.set(
-						isOpen ? getComputedStyle(this._element).getPropertyValue('--brn-collapsible-content-height') : '0px',
-					);
-				});
-			},
-			{
-				injector: this._injector,
-				allowSignalWrites: true,
-			},
-		);
+	constructor() {
+		this._brn?.setClassToCustomElement('pt-1 pb-4');
 	}
 }

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

@@ -0,0 +1,31 @@
+import { computed, Directive, inject, Input, signal } from '@angular/core';
+import { radixChevronDown } from '@ng-icons/radix-icons';
+import { hlm } from '@spartan-ng/ui-core';
+import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm';
+import { ClassValue } from 'clsx';
+
+@Directive({
+	selector: 'hlm-icon[hlmAccordionIcon], hlm-icon[hlmAccIcon]',
+	standalone: true,
+	providers: [provideIcons({ radixChevronDown })],
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmAccordionIconDirective {
+	private readonly _hlmIcon = inject(HlmIconComponent);
+
+	private readonly _userCls = signal<ClassValue>('');
+	protected _computedClass = computed(() =>
+		hlm('inline-block h-4 w-4 transition-transform duration-200', this._userCls()),
+	);
+
+	@Input()
+	set class(userCls: ClassValue) {
+		this._userCls.set(userCls);
+	}
+
+	constructor() {
+		this._hlmIcon.name = 'radixChevronDown';
+	}
+}

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

@@ -1,4 +1,5 @@
-import { Directive, Input, computed, signal } from '@angular/core';
+import { computed, Directive, Input, signal } from '@angular/core';
+import { BrnAccordionItemDirective } from '@spartan-ng/ui-accordion-brain';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
@@ -8,16 +9,16 @@ import { ClassValue } from 'clsx';
 	host: {
 		'[class]': '_computedClass()',
 	},
+	hostDirectives: [BrnAccordionItemDirective],
 })
 export class HlmAccordionItemDirective {
 	private readonly _userCls = signal<ClassValue>('');
+	protected readonly _computedClass = computed(() =>
+		hlm('flex flex-1 flex-col border-b border-border', this._userCls()),
+	);
+
 	@Input()
 	set class(userCls: ClassValue) {
 		this._userCls.set(userCls);
 	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm('flex flex-1 flex-col border-b border-border', this._userCls());
-	}
 }

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

@@ -1,39 +1,28 @@
-import { Directive, Input, computed, signal } from '@angular/core';
-import { hlm, injectCustomClassSettable } from '@spartan-ng/ui-core';
+import { computed, Directive, Input, signal } from '@angular/core';
+import { BrnAccordionTriggerDirective } from '@spartan-ng/ui-accordion-brain';
+import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
 @Directive({
-	selector: '[hlmAccordionTrigger],brn-accordion-trigger[hlm]',
+	selector: '[hlmAccordionTrigger]',
 	standalone: true,
 	host: {
 		'[style.--tw-ring-offset-shadow]': '"0 0 #000"',
 		'[class]': '_computedClass()',
 	},
+	hostDirectives: [BrnAccordionTriggerDirective],
 })
 export class HlmAccordionTriggerDirective {
-	private _host = injectCustomClassSettable({ optional: true });
-
-	constructor() {
-		this._host?.setClassToCustomElement(this._generateClass());
-	}
-
 	private readonly _userCls = signal<ClassValue>('');
+	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._userCls(),
+		),
+	);
+
 	@Input()
 	set class(inputs: ClassValue) {
 		this._userCls.set(inputs);
-		// cannot set in effect because it sets a signal
-		if (this._host) {
-			this._host.setClassToCustomElement(this._generateClass());
-		}
-	}
-
-	protected _computedClass = computed(() => {
-		return !this._host ? this._generateClass() : '';
-	});
-	private _generateClass() {
-		return 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]>hlm-accordion-icon]:rotate-180',
-			this._userCls(),
-		);
 	}
 }

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

@@ -1,23 +1,26 @@
-import { Directive, Input, computed, signal } from '@angular/core';
+import { computed, Directive, inject, Input, signal } from '@angular/core';
+import { BrnAccordionDirective } from '@spartan-ng/ui-accordion-brain';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
 @Directive({
-	selector: '[hlmAccordion],brn-accordion[hlm]',
+	selector: '[hlmAccordion]',
 	standalone: true,
 	host: {
 		'[class]': '_computedClass()',
 	},
+	hostDirectives: [BrnAccordionDirective],
 })
 export class HlmAccordionDirective {
+	private readonly _brn = inject(BrnAccordionDirective);
+
 	private readonly _userCls = signal<ClassValue>('');
+	protected readonly _computedClass = computed(() =>
+		hlm('flex', this._brn.orientation === 'horizontal' ? 'flex-row' : 'flex-col', this._userCls()),
+	);
+
 	@Input()
 	set class(userCls: ClassValue) {
 		this._userCls.set(userCls);
 	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm('flex flex-col', this._userCls());
-	}
 }

package/src/generators/ui/libs/ui-alert-dialog-helm/files/index.ts.template

@@ -2,27 +2,26 @@ import { NgModule } from '@angular/core';
 
 import { HlmAlertDialogActionButtonDirective } from './lib/hlm-alert-dialog-action-button.directive';
 import { HlmAlertDialogCancelButtonDirective } from './lib/hlm-alert-dialog-cancel-button.directive';
-import { HlmAlertDialogCloseDirective } from './lib/hlm-alert-dialog-close.directive';
-import { HlmAlertDialogContentDirective } from './lib/hlm-alert-dialog-content.directive';
+import { HlmAlertDialogContentComponent } from './lib/hlm-alert-dialog-content.component';
 import { HlmAlertDialogDescriptionDirective } from './lib/hlm-alert-dialog-description.directive';
 import { HlmAlertDialogFooterComponent } from './lib/hlm-alert-dialog-footer.component';
 import { HlmAlertDialogHeaderComponent } from './lib/hlm-alert-dialog-header.component';
 import { HlmAlertDialogOverlayDirective } from './lib/hlm-alert-dialog-overlay.directive';
 import { HlmAlertDialogTitleDirective } from './lib/hlm-alert-dialog-title.directive';
+import { HlmAlertDialogComponent } from './lib/hlm-alert-dialog.component';
 
 export * from './lib/hlm-alert-dialog-action-button.directive';
 export * from './lib/hlm-alert-dialog-cancel-button.directive';
-export * from './lib/hlm-alert-dialog-close.directive';
-export * from './lib/hlm-alert-dialog-content.directive';
+export * from './lib/hlm-alert-dialog-content.component';
 export * from './lib/hlm-alert-dialog-description.directive';
 export * from './lib/hlm-alert-dialog-footer.component';
 export * from './lib/hlm-alert-dialog-header.component';
 export * from './lib/hlm-alert-dialog-overlay.directive';
 export * from './lib/hlm-alert-dialog-title.directive';
+export * from './lib/hlm-alert-dialog.component';
 
 export const HlmAlertDialogImports = [
-	HlmAlertDialogCloseDirective,
-	HlmAlertDialogContentDirective,
+	HlmAlertDialogContentComponent,
 	HlmAlertDialogDescriptionDirective,
 	HlmAlertDialogFooterComponent,
 	HlmAlertDialogHeaderComponent,
@@ -30,6 +29,7 @@ export const HlmAlertDialogImports = [
 	HlmAlertDialogTitleDirective,
 	HlmAlertDialogActionButtonDirective,
 	HlmAlertDialogCancelButtonDirective,
+	HlmAlertDialogComponent,
 ] as const;
 
 @NgModule({

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

@@ -12,9 +12,11 @@ import { ClassValue } from 'clsx';
 	},
 })
 export class HlmAlertDialogCancelButtonDirective {
-	private _hlmBtn = inject(HlmButtonDirective, { host: true });
+	private readonly _hlmBtn = inject(HlmButtonDirective, { host: true });
 
 	private readonly _userCls = signal<ClassValue>('');
+	protected readonly _computedClass = computed(() => hlm('mt-2 sm:mt-0', this._userCls()));
+
 	@Input()
 	set class(userCls: ClassValue) {
 		this._userCls.set(userCls);
@@ -23,9 +25,4 @@ export class HlmAlertDialogCancelButtonDirective {
 	constructor() {
 		this._hlmBtn.variant = 'outline';
 	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm('mt-2 sm:mt-0', this._userCls());
-	}
 }

package/src/generators/ui/libs/ui-alert-dialog-helm/files/lib/{hlm-alert-dialog-content.directive.ts.template → hlm-alert-dialog-content.component.ts.template}

@@ -1,35 +1,34 @@
-import { computed, Directive, effect, ElementRef, inject, Input, Renderer2, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, Input, signal, ViewEncapsulation } from '@angular/core';
 import { hlm, injectExposesStateProvider } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
-@Directive({
-	selector: '[hlmAlertDialogContent],[brnAlertDialogContent][hlm]',
+@Component({
+	selector: 'hlm-alert-dialog-content',
 	standalone: true,
 	host: {
 		'[class]': '_computedClass()',
+		'[attr.data-state]': 'state()',
 	},
+	template: `
+		<ng-content />
+	`,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	encapsulation: ViewEncapsulation.None,
 })
-export class HlmAlertDialogContentDirective {
-	private _stateProvider = injectExposesStateProvider({ optional: true, host: true });
-	public state = this._stateProvider?.state ?? signal('closed');
-	private _renderer = inject(Renderer2);
-	private _element = inject(ElementRef);
-
-	constructor() {
-		effect(() => this._renderer.setAttribute(this._element.nativeElement, 'data-state', this.state()));
-	}
+export class HlmAlertDialogContentComponent {
+	private readonly _stateProvider = injectExposesStateProvider({ optional: true, host: true });
+	public readonly state = this._stateProvider?.state ?? signal('closed');
 
 	private readonly _userCls = signal<ClassValue>('');
+	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._userCls(),
+		),
+	);
+
 	@Input()
 	set class(userCls: ClassValue) {
 		this._userCls.set(userCls);
 	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return 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._userCls(),
-		);
-	}
 }

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

@@ -1,4 +1,5 @@
-import { Directive, Input, computed, signal } from '@angular/core';
+import { computed, Directive, Input, signal } from '@angular/core';
+import { BrnAlertDialogDescriptionDirective } from '@spartan-ng/ui-alertdialog-brain';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
@@ -8,16 +9,14 @@ import { ClassValue } from 'clsx';
 	host: {
 		'[class]': '_computedClass()',
 	},
+	hostDirectives: [BrnAlertDialogDescriptionDirective],
 })
 export class HlmAlertDialogDescriptionDirective {
 	private readonly _userCls = signal<ClassValue>('');
+	protected readonly _computedClass = computed(() => hlm('text-sm text-muted-foreground', this._userCls()));
+
 	@Input()
 	set class(userCls: ClassValue) {
 		this._userCls.set(userCls);
 	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm('text-sm text-muted-foreground', this._userCls());
-	}
 }

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

@@ -1,4 +1,4 @@
-import { Component, Input, computed, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, Input, signal, ViewEncapsulation } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
@@ -11,16 +11,16 @@ import { ClassValue } from 'clsx';
 	host: {
 		'[class]': '_computedClass()',
 	},
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	encapsulation: ViewEncapsulation.None,
 })
 export class HlmAlertDialogFooterComponent {
 	private readonly _userCls = signal<ClassValue>('');
+	protected readonly _computedClass = computed(() =>
+		hlm('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', this._userCls()),
+	);
 	@Input()
 	set class(userCls: ClassValue) {
 		this._userCls.set(userCls);
 	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', this._userCls());
-	}
 }

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

@@ -1,4 +1,4 @@
-import { Component, Input, computed, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, Input, signal, ViewEncapsulation } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
@@ -11,16 +11,16 @@ import { ClassValue } from 'clsx';
 	host: {
 		'[class]': '_computedClass()',
 	},
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	encapsulation: ViewEncapsulation.None,
 })
 export class HlmAlertDialogHeaderComponent {
 	private readonly _userCls = signal<ClassValue>('');
+	protected readonly _computedClass = computed(() =>
+		hlm('flex flex-col space-y-2 text-center sm:text-left', this._userCls()),
+	);
 	@Input()
 	set class(userCls: ClassValue) {
 		this._userCls.set(userCls);
 	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm('flex flex-col space-y-2 text-center sm:text-left', this._userCls());
-	}
 }

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

@@ -1,33 +1,27 @@
-import { Directive, Input, computed, signal } from '@angular/core';
+import { computed, Directive, effect, Input, signal } from '@angular/core';
 import { hlm, injectCustomClassSettable } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
 @Directive({
 	selector: '[hlmAlertDialogOverlay],brn-alert-dialog-overlay[hlm]',
 	standalone: true,
-	host: {
-		'[class]': '_computedClass()',
-	},
 })
 export class HlmAlertDialogOverlayDirective {
-	private _classSettable = injectCustomClassSettable({ optional: true, host: true });
-
-	constructor() {
-		this._classSettable?.setClassToCustomElement(this._computedClass());
-	}
+	private readonly _classSettable = injectCustomClassSettable({ optional: true, host: true });
 
 	private readonly _userCls = signal<ClassValue>('');
+	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._userCls(),
+		),
+	);
 	@Input()
 	set class(userCls: ClassValue) {
 		this._userCls.set(userCls);
-		this._classSettable?.setClassToCustomElement(this._computedClass());
 	}
 
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return 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._userCls(),
-		);
+	constructor() {
+		effect(() => this._classSettable?.setClassToCustomElement(this._computedClass()));
 	}
 }

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

@@ -1,4 +1,5 @@
-import { Directive, Input, computed, signal } from '@angular/core';
+import { computed, Directive, Input, signal } from '@angular/core';
+import { BrnAlertDialogTitleDirective } from '@spartan-ng/ui-alertdialog-brain';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
@@ -8,16 +9,13 @@ import { ClassValue } from 'clsx';
 	host: {
 		'[class]': '_computedClass()',
 	},
+	hostDirectives: [BrnAlertDialogTitleDirective],
 })
 export class HlmAlertDialogTitleDirective {
 	private readonly _userCls = signal<ClassValue>('');
+	protected readonly _computedClass = computed(() => hlm('text-lg font-semibold', this._userCls()));
 	@Input()
 	set class(userCls: ClassValue) {
 		this._userCls.set(userCls);
 	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm('text-lg font-semibold', this._userCls());
-	}
 }

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

@@ -0,0 +1,30 @@
+import { ChangeDetectionStrategy, Component, forwardRef, ViewEncapsulation } from '@angular/core';
+import { BrnAlertDialogComponent, BrnAlertDialogOverlayComponent } from '@spartan-ng/ui-alertdialog-brain';
+import { BrnDialogComponent, provideBrnDialog } from '@spartan-ng/ui-dialog-brain';
+import { HlmAlertDialogOverlayDirective } from './hlm-alert-dialog-overlay.directive';
+
+@Component({
+	selector: 'hlm-alert-dialog',
+	standalone: true,
+	template: `
+		<brn-alert-dialog-overlay hlm />
+		<ng-content />
+	`,
+	providers: [
+		provideBrnDialog(),
+		{
+			provide: BrnDialogComponent,
+			useExisting: forwardRef(() => HlmAlertDialogComponent),
+		},
+	],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	encapsulation: ViewEncapsulation.None,
+	exportAs: 'hlmAlertDialog',
+	imports: [BrnAlertDialogOverlayComponent, HlmAlertDialogOverlayDirective],
+})
+export class HlmAlertDialogComponent extends BrnAlertDialogComponent {
+	constructor() {
+		super();
+		this.closeDelay = 100;
+	}
+}

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

@@ -1,9 +1,9 @@
-import { Directive, Input, computed, signal } from '@angular/core';
+import { computed, Directive, Input, signal } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
-import { VariantProps, cva } from 'class-variance-authority';
+import { cva, VariantProps } from 'class-variance-authority';
 import { ClassValue } from 'clsx';
 
-const alertDescriptionVariants = cva('text-sm [&_p]:leading-relaxed', {
+export const alertDescriptionVariants = cva('text-sm [&_p]:leading-relaxed', {
 	variants: {},
 });
 export type AlertDescriptionVariants = VariantProps<typeof alertDescriptionVariants>;

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

@@ -1,9 +1,9 @@
-import { Directive, Input, computed, signal } from '@angular/core';
+import { computed, Directive, Input, signal } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
-import { VariantProps, cva } from 'class-variance-authority';
+import { cva, VariantProps } from 'class-variance-authority';
 import { ClassValue } from 'clsx';
 
-const alertTitleVariants = cva('mb-1 font-medium leading-none tracking-tight', {
+export const alertTitleVariants = cva('mb-1 font-medium leading-none tracking-tight', {
 	variants: {},
 });
 export type AlertTitleVariants = VariantProps<typeof alertTitleVariants>;

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

@@ -1,9 +1,9 @@
-import { Directive, Input, computed, signal } from '@angular/core';
+import { computed, Directive, Input, signal } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
-import { VariantProps, cva } from 'class-variance-authority';
+import { cva, VariantProps } from 'class-variance-authority';
 import { ClassValue } from 'clsx';
 
-const alertVariants = cva(
+export const alertVariants = cva(
 	'relative w-full rounded-lg border border-border p-4 [&>[hlmAlertIcon]]:absolute [&>[hlmAlertIcon]]:text-foreground [&>[hlmAlertIcon]]:left-4 [&>[hlmAlertIcon]]:top-4 [&>[hlmAlertIcon]+div]:translate-y-[-3px] [&>[hlmAlertIcon]~*]:pl-7',
 	{
 		variants: {