refactor(dialog,sheet,popover): migrate to signals #427 #423 #425

libs/ui/alert-dialog/brain/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/ui-dialog-brain';
 
 @Component({
@@ -20,8 +20,8 @@ import { BrnDialogComponent } from '@spartan-ng/ui-dialog-brain';
 export class BrnAlertDialogComponent extends BrnDialogComponent {
 	constructor() {
 		super();
-		this._options.role = 'alertdialog';
-		this._options.closeOnBackdropClick = false;
-		this._options.closeOnOutsidePointerEvents = false;
+		this.roleState().set('alertdialog');
+		this.closeOnBackdropClickState().set(false);
+		this.closeOnOutsidePointerEventsState().set(false);
 	}
 }

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

@@ -67,7 +67,9 @@ export class BrnDialogComponent {
 		}
 	});
 
-	public readonly role = input<BrnDialogOptions['role']>('dialog');
+	public readonly roleInput = input<BrnDialogOptions['role']>('dialog', { alias: 'role' });
+	public readonly roleState = computed(() => signal(this.roleInput()));
+	public readonly role = computed(() => this.roleState()());
 	private readonly _roleEffect = effect(() => {
 		this._options.role = this.role();
 	});
@@ -123,8 +125,10 @@ export class BrnDialogComponent {
 		transform: booleanAttribute,
 		alias: 'closeOnBackdropClick',
 	});
+	public readonly closeOnBackdropClickState = computed(() => signal(this.closeOnBackdropClickInput()));
+	public readonly closeOnBackdropClick = computed(() => this.closeOnBackdropClickState()());
 	private readonly _closeOnBackdropClickEffect = effect(() => {
-		this._options.closeOnBackdropClick = this.closeOnBackdropClickInput();
+		this._options.closeOnBackdropClick = this.closeOnBackdropClick();
 	});
 
 	public readonly attachToInput = input<BrnDialogOptions['attachTo']>(null, { alias: 'attachTo' });
@@ -138,6 +142,8 @@ export class BrnDialogComponent {
 	public readonly attachPositionsState = computed(() => signal(this.attachPositionsInput()));
 	public readonly attachPositions = computed(() => this.attachPositionsState()());
 	private readonly _attachPositionsEffect = effect(() => {
+		console.log(this.attachPositions());
+		console.log(2);
 		this._options.attachPositions = this.attachPositions();
 	});
 

libs/ui/popover/brain/src/lib/brn-popover-trigger.directive.ts

@@ -1,4 +1,4 @@
-import { Directive, ElementRef, inject, Input } from '@angular/core';
+import { Directive, effect, ElementRef, inject, input } from '@angular/core';
 import { BrnDialogTriggerDirective } from '@spartan-ng/ui-dialog-brain';
 import type { BrnPopoverComponent } from './brn-popover.component';
 
@@ -23,10 +23,17 @@ export class BrnPopoverTriggerDirective extends BrnDialogTriggerDirective {
 		this._brnDialog.closeOnOutsidePointerEventsState().set(true);
 	}
 
-	@Input()
-	public set brnPopoverTriggerFor(brnDialog: BrnPopoverComponent) {
-		brnDialog.attachToState().set(this._host.nativeElement);
-		brnDialog.closeOnOutsidePointerEventsState().set(true);
-		this.brnDialogTriggerForState().set(brnDialog);
-	}
+	public readonly brnPopoverTriggerFor = input<BrnPopoverComponent | undefined>(undefined, {
+		alias: 'brnPopoverTriggerFor',
+	});
+	private readonly _brnPopoverTriggerForEffect = effect(
+		() => {
+			const brnDialog = this.brnPopoverTriggerFor();
+			if (!brnDialog) return;
+			brnDialog.attachToState().set(this._host.nativeElement);
+			brnDialog.closeOnOutsidePointerEventsState().set(true);
+			this.brnDialogTriggerForState().set(brnDialog);
+		},
+		{ allowSignalWrites: true },
+	);
 }

libs/ui/popover/brain/src/lib/brn-popover.component.ts

@@ -1,12 +1,11 @@
 import {
 	ChangeDetectionStrategy,
 	Component,
+	computed,
 	effect,
 	forwardRef,
-	Input,
+	input,
 	numberAttribute,
-	signal,
-	untracked,
 	ViewEncapsulation,
 } from '@angular/core';
 import { BrnDialogComponent } from '@spartan-ng/ui-dialog-brain';
@@ -30,17 +29,13 @@ export type BrnPopoverAlign = 'start' | 'center' | 'end';
 	exportAs: 'brnPopover',
 })
 export class BrnPopoverComponent extends BrnDialogComponent {
-	private readonly _sideOffset = signal(0);
-	@Input({ transform: numberAttribute })
-	public set sideOffset(value: number) {
-		this._sideOffset.set(value);
-	}
+	public readonly align = input<BrnPopoverAlign>('center');
+	public readonly sideOffset = input(0, { transform: numberAttribute });
 
-	private readonly _align = signal<BrnPopoverAlign>('center');
-	@Input()
-	public set align(value: BrnPopoverAlign) {
-		this._align.set(value);
-	}
+	private readonly _state = computed(() => ({
+		align: this.align(),
+		sideOffset: this.sideOffset(),
+	}));
 
 	constructor() {
 		super();
@@ -51,40 +46,25 @@ export class BrnPopoverComponent extends BrnDialogComponent {
 
 		effect(
 			() => {
-				const align = this._align();
+				const { align, sideOffset } = this._state();
 				this.attachPositionsState().set([
 					{
 						originX: align,
 						originY: 'bottom',
 						overlayX: align,
 						overlayY: 'top',
+						offsetY: sideOffset,
 					},
 					{
 						originX: align,
 						originY: 'top',
 						overlayX: align,
 						overlayY: 'bottom',
+						offsetY: -sideOffset,
 					},
 				]);
-				this.applySideOffset(untracked(this._sideOffset));
 			},
 			{ allowSignalWrites: true },
 		);
-
-		effect(
-			() => {
-				this.applySideOffset(this._sideOffset());
-			},
-			{ allowSignalWrites: true },
-		);
-	}
-
-	private applySideOffset(sideOffset: number) {
-		this.attachPositionsState().set(
-			(this._options.attachPositions ?? []).map((position) => ({
-				...position,
-				offsetY: position.originY === 'top' ? -sideOffset : sideOffset,
-			})),
-		);
 	}
 }

libs/ui/sheet/brain/src/lib/brn-sheet-trigger.directive.ts

@@ -1,4 +1,4 @@
-import { Directive, Input, inject } from '@angular/core';
+import { Directive, inject, input } from '@angular/core';
 import { BrnDialogTriggerDirective } from '@spartan-ng/ui-dialog-brain';
 import { BrnSheetComponent } from './brn-sheet.component';
 
@@ -8,12 +8,13 @@ import { BrnSheetComponent } from './brn-sheet.component';
 })
 export class BrnSheetTriggerDirective extends BrnDialogTriggerDirective {
 	private readonly _sheet = inject(BrnSheetComponent, { optional: true });
-	@Input()
-	public side: 'top' | 'bottom' | 'left' | 'right' | undefined;
+
+	public side = input<'top' | 'bottom' | 'left' | 'right' | undefined>(undefined);
 
 	override open() {
-		if (this._sheet && this.side) {
-			this._sheet.setSide = this.side;
+		const side = this.side();
+		if (this._sheet && side) {
+			this._sheet.sideInputState().set(side);
 		}
 		super.open();
 	}

libs/ui/sheet/brain/src/lib/brn-sheet.component.ts

@@ -1,4 +1,13 @@
-import { ChangeDetectionStrategy, Component, forwardRef, Input, signal, ViewEncapsulation } from '@angular/core';
+import {
+	ChangeDetectionStrategy,
+	Component,
+	computed,
+	effect,
+	forwardRef,
+	input,
+	signal,
+	ViewEncapsulation,
+} from '@angular/core';
 import { BrnDialogComponent } from '@spartan-ng/ui-dialog-brain';
 
 @Component({
@@ -18,24 +27,25 @@ import { BrnDialogComponent } from '@spartan-ng/ui-dialog-brain';
 	exportAs: 'brnSheet',
 })
 export class BrnSheetComponent extends BrnDialogComponent {
-	private readonly _side = signal<'top' | 'bottom' | 'left' | 'right'>('top');
-	public readonly side = this._side.asReadonly();
-
-	/* eslint-disable-next-line @angular-eslint/no-input-rename */
-	@Input('side')
-	public set setSide(side: 'top' | 'bottom' | 'left' | 'right') {
-		this._side.set(side);
-		if (side === 'top') {
-			this.positionStrategyState().set(this.positionBuilder.global().top());
-		}
-		if (side === 'bottom') {
-			this.positionStrategyState().set(this.positionBuilder.global().bottom());
-		}
-		if (side === 'left') {
-			this.positionStrategyState().set(this.positionBuilder.global().left());
-		}
-		if (side === 'right') {
-			this.positionStrategyState().set(this.positionBuilder.global().right());
-		}
-	}
+	public readonly sideInput = input<'top' | 'bottom' | 'left' | 'right'>('top', { alias: 'side' });
+	public readonly sideInputState = computed(() => signal(this.sideInput()));
+	public readonly side = computed(() => this.sideInputState().asReadonly()());
+	private readonly _sideEffect = effect(
+		() => {
+			const side = this.side();
+			if (side === 'top') {
+				this.positionStrategyState().set(this.positionBuilder.global().top());
+			}
+			if (side === 'bottom') {
+				this.positionStrategyState().set(this.positionBuilder.global().bottom());
+			}
+			if (side === 'left') {
+				this.positionStrategyState().set(this.positionBuilder.global().left());
+			}
+			if (side === 'right') {
+				this.positionStrategyState().set(this.positionBuilder.global().right());
+			}
+		},
+		{ allowSignalWrites: true },
+	);
 }