refactor(dialog,sheet,popover): migrate to signals

libs/brain/alert-dialog/src/lib/brn-alert-dialog-trigger.directive.ts

@@ -1,4 +1,4 @@
-import { Directive, Input } from '@angular/core';
+import { Directive, effect, input, untracked } from '@angular/core';
 import { BrnDialogTriggerDirective } from '@spartan-ng/brain/dialog';
 import type { BrnAlertDialogComponent } from './brn-alert-dialog.component';
 
@@ -14,8 +14,17 @@ import type { BrnAlertDialogComponent } from './brn-alert-dialog.component';
 	},
 })
 export class BrnAlertDialogTriggerDirective extends BrnDialogTriggerDirective {
-	@Input()
-	public set brnAlertDialogTriggerFor(brnDialog: BrnAlertDialogComponent) {
-		super.brnDialogTriggerFor = brnDialog;
+	public readonly brnAlertDialogTriggerFor = input<BrnAlertDialogComponent | undefined>();
+
+	constructor() {
+		super();
+		effect(() => {
+			const brnDialog = this.brnAlertDialogTriggerFor();
+			untracked(() => {
+				if (brnDialog) {
+					this.mutableBrnDialogTriggerFor().set(brnDialog);
+				}
+			});
+		});
 	}
 }

libs/brain/alert-dialog/src/lib/brn-alert-dialog.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, ViewEncapsulation, forwardRef } from '@angular/core';
+import { ChangeDetectionStrategy, Component, forwardRef, ViewEncapsulation } from '@angular/core';
 import { BrnDialogComponent } from '@spartan-ng/brain/dialog';
 
 @Component({
@@ -20,8 +20,8 @@ import { BrnDialogComponent } from '@spartan-ng/brain/dialog';
 export class BrnAlertDialogComponent extends BrnDialogComponent {
 	constructor() {
 		super();
-		this._options.role = 'alertdialog';
-		this._options.closeOnBackdropClick = false;
-		this._options.closeOnOutsidePointerEvents = false;
+		this.mutableCloseOnOutsidePointerEvents().set(false);
+		this.mutableCloseOnBackdropClick().set(false);
+		this.mutableRole().set('alertdialog');
 	}
 }

libs/brain/dialog/src/index.ts

@@ -16,6 +16,7 @@ export * from './lib/brn-dialog-overlay.component';
 export * from './lib/brn-dialog-ref';
 export * from './lib/brn-dialog-state';
 export * from './lib/brn-dialog-title.directive';
+export * from './lib/brn-dialog-token';
 export * from './lib/brn-dialog-trigger.directive';
 export * from './lib/brn-dialog-utils';
 export * from './lib/brn-dialog.component';

libs/brain/dialog/src/lib/brn-dialog-close.directive.ts

@@ -1,5 +1,5 @@
-import { type NumberInput, coerceNumberProperty } from '@angular/cdk/coercion';
-import { Directive, Input, inject } from '@angular/core';
+import { coerceNumberProperty } from '@angular/cdk/coercion';
+import { Directive, inject, input } from '@angular/core';
 import { BrnDialogRef } from './brn-dialog-ref';
 
 @Directive({
@@ -12,14 +12,9 @@ import { BrnDialogRef } from './brn-dialog-ref';
 export class BrnDialogCloseDirective {
 	private readonly _brnDialogRef = inject(BrnDialogRef);
 
-	private _delay: number | undefined;
-
-	@Input()
-	public set delay(value: NumberInput) {
-		this._delay = coerceNumberProperty(value);
-	}
+	public readonly delay = input<number | undefined, number>(undefined, { transform: coerceNumberProperty });
 
 	public close() {
-		this._brnDialogRef.close(undefined, this._delay);
+		this._brnDialogRef.close(undefined, this.delay());
 	}
 }

libs/brain/dialog/src/lib/brn-dialog-content.directive.ts

@@ -1,4 +1,4 @@
-import { Directive, Input, TemplateRef, computed, inject } from '@angular/core';
+import { computed, Directive, effect, inject, input, TemplateRef, untracked } from '@angular/core';
 import { provideExposesStateProviderExisting } from '@spartan-ng/brain/core';
 import { BrnDialogRef } from './brn-dialog-ref';
 import { BrnDialogComponent } from './brn-dialog.component';
@@ -12,22 +12,24 @@ export class BrnDialogContentDirective<T> {
 	private readonly _brnDialog = inject(BrnDialogComponent, { optional: true });
 	private readonly _brnDialogRef = inject(BrnDialogRef, { optional: true });
 	private readonly _template = inject(TemplateRef);
-	public readonly state = computed(() => this._brnDialog?.state() ?? this._brnDialogRef?.state() ?? 'closed');
+	public readonly state = computed(() => this._brnDialog?.stateComputed() ?? this._brnDialogRef?.state() ?? 'closed');
 
-	@Input()
-	public set class(newClass: string | null | undefined) {
-		if (!this._brnDialog) return;
-		this._brnDialog.setPanelClass(newClass);
-	}
+	public readonly className = input<string | null | undefined>(undefined, { alias: 'class' });
 
-	@Input()
-	public set context(context: T) {
-		if (!this._brnDialog) return;
-		this._brnDialog.setContext(context);
-	}
+	public readonly context = input<T | undefined>(undefined);
 
 	constructor() {
 		if (!this._brnDialog) return;
 		this._brnDialog.registerTemplate(this._template);
+		effect(() => {
+			const context = this.context();
+			if (!this._brnDialog || !context) return;
+			untracked(() => this._brnDialog?.setContext(context));
+		});
+		effect(() => {
+			if (!this._brnDialog) return;
+			const newClass = this.className();
+			untracked(() => this._brnDialog?.setPanelClass(newClass));
+		});
 	}
 }

libs/brain/dialog/src/lib/brn-dialog-overlay.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, effect, inject, input, untracked, ViewEncapsulation } from '@angular/core';
 import { provideCustomClassSettableExisting } from '@spartan-ng/brain/core';
 import { BrnDialogComponent } from './brn-dialog.component';
 
@@ -13,12 +13,16 @@ import { BrnDialogComponent } from './brn-dialog.component';
 export class BrnDialogOverlayComponent {
 	private readonly _brnDialog = inject(BrnDialogComponent);
 
-	@Input()
-	public set class(newClass: string | null | undefined) {
-		this._brnDialog.setOverlayClass(newClass);
-	}
+	public readonly className = input<string | null | undefined>(undefined, { alias: 'class' });
 
 	setClassToCustomElement(newClass: string) {
 		this._brnDialog.setOverlayClass(newClass);
 	}
+	constructor() {
+		effect(() => {
+			if (!this._brnDialog) return;
+			const newClass = this.className();
+			untracked(() => this._brnDialog.setOverlayClass(newClass));
+		});
+	}
 }

libs/brain/dialog/src/lib/brn-dialog-token.ts

@@ -0,0 +1,23 @@
+import { inject, InjectionToken, ValueProvider } from '@angular/core';
+
+export interface BrnDialogDefaultOptions {
+	/** The delay in milliseconds before the dialog closes. */
+	closeDelay?: number;
+}
+
+export const defaultOptions: BrnDialogDefaultOptions = {
+	closeDelay: 0,
+};
+
+const BRN_DIALOG_DEFAULT_OPTIONS = new InjectionToken<BrnDialogDefaultOptions>('brn-dialog-default-options', {
+	providedIn: 'root',
+	factory: () => defaultOptions,
+});
+
+export function provideBrnDialogDefaultOptions(options: Partial<BrnDialogDefaultOptions>): ValueProvider {
+	return { provide: BRN_DIALOG_DEFAULT_OPTIONS, useValue: { ...defaultOptions, ...options } };
+}
+
+export function injectBrnDialogDefaultOptions(): BrnDialogDefaultOptions {
+	return inject(BRN_DIALOG_DEFAULT_OPTIONS, { optional: true }) ?? defaultOptions;
+}

libs/brain/dialog/src/lib/brn-dialog-trigger.directive.ts

@@ -1,4 +1,4 @@
-import { Directive, Input, type Signal, inject, input, signal } from '@angular/core';
+import { computed, Directive, effect, inject, input, type Signal, signal } from '@angular/core';
 import { BrnDialogRef } from './brn-dialog-ref';
 import type { BrnDialogState } from './brn-dialog-state';
 import { BrnDialogComponent } from './brn-dialog.component';
@@ -27,9 +27,18 @@ export class BrnDialogTriggerDirective {
 	public readonly state: Signal<BrnDialogState> = this._brnDialogRef?.state ?? signal('closed');
 	public readonly dialogId = `brn-dialog-${this._brnDialogRef?.dialogId ?? idSequence++}`;
 
-	@Input()
-	public set brnDialogTriggerFor(brnDialog: BrnDialogComponent) {
-		this._brnDialog = brnDialog;
+	public readonly brnDialogTriggerFor = input<BrnDialogComponent | undefined>(undefined, {
+		alias: 'brnDialogTriggerFor',
+	});
+	public readonly mutableBrnDialogTriggerFor = computed(() => signal(this.brnDialogTriggerFor()));
+	public readonly brnDialogTriggerForState = computed(() => this.mutableBrnDialogTriggerFor()());
+
+	constructor() {
+		effect(() => {
+			const brnDialog = this.brnDialogTriggerForState();
+			if (!brnDialog) return;
+			this._brnDialog = brnDialog;
+		});
 	}
 
 	open() {