diff --git a/libs/ui/alert-dialog/brain/src/lib/brn-alert-dialog.component.ts b/libs/ui/alert-dialog/brain/src/lib/brn-alert-dialog.component.ts index 9a1610dae..f9b710864 100644 --- a/libs/ui/alert-dialog/brain/src/lib/brn-alert-dialog.component.ts +++ b/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); } } diff --git a/libs/ui/dialog/brain/src/lib/brn-dialog.component.ts b/libs/ui/dialog/brain/src/lib/brn-dialog.component.ts index 3b3299e2e..5e077fc53 100644 --- a/libs/ui/dialog/brain/src/lib/brn-dialog.component.ts +++ b/libs/ui/dialog/brain/src/lib/brn-dialog.component.ts @@ -67,7 +67,9 @@ export class BrnDialogComponent { } }); - public readonly role = input('dialog'); + public readonly roleInput = input('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(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(); }); diff --git a/libs/ui/popover/brain/src/lib/brn-popover-trigger.directive.ts b/libs/ui/popover/brain/src/lib/brn-popover-trigger.directive.ts index 29efc2cc9..f78ee57d2 100644 --- a/libs/ui/popover/brain/src/lib/brn-popover-trigger.directive.ts +++ b/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(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 }, + ); } diff --git a/libs/ui/popover/brain/src/lib/brn-popover.component.ts b/libs/ui/popover/brain/src/lib/brn-popover.component.ts index e31f7d262..80a8ef3d2 100644 --- a/libs/ui/popover/brain/src/lib/brn-popover.component.ts +++ b/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('center'); + public readonly sideOffset = input(0, { transform: numberAttribute }); - private readonly _align = signal('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, - })), - ); } } diff --git a/libs/ui/sheet/brain/src/lib/brn-sheet-trigger.directive.ts b/libs/ui/sheet/brain/src/lib/brn-sheet-trigger.directive.ts index acddd5556..da323cb96 100644 --- a/libs/ui/sheet/brain/src/lib/brn-sheet-trigger.directive.ts +++ b/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(); } diff --git a/libs/ui/sheet/brain/src/lib/brn-sheet.component.ts b/libs/ui/sheet/brain/src/lib/brn-sheet.component.ts index 6cc24d95f..60396f4e4 100644 --- a/libs/ui/sheet/brain/src/lib/brn-sheet.component.ts +++ b/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 }, + ); }