Fix: use proper signal for modal buttonsEnabled (#13672)

src-ui/src/app/components/admin/tasks/tasks.component.spec.ts

@@ -576,7 +576,7 @@ describe('TasksComponent', () => {
 
     expect(dismissSpy).toHaveBeenCalledWith(new Set([tasks[0].id, tasks[1].id]))
     expect(toastSpy).toHaveBeenCalledWith('Error dismissing tasks', error)
-    expect(modal.componentInstance.buttonsEnabled).toBe(true)
+    expect(modal.componentInstance.buttonsEnabled()).toBe(true)
     expect(component.selectedTasks.size).toBe(0)
   })
 
@@ -642,7 +642,7 @@ describe('TasksComponent', () => {
 
     expect(dismissSpy).toHaveBeenCalled()
     expect(toastSpy).toHaveBeenCalledWith('Error dismissing tasks', error)
-    expect(modal.componentInstance.buttonsEnabled).toBe(true)
+    expect(modal.componentInstance.buttonsEnabled()).toBe(true)
   })
 
   it('should dismiss the currently visible scoped and filtered tasks', () => {

src-ui/src/app/components/admin/tasks/tasks.component.ts

@@ -316,7 +316,7 @@ export class TasksComponent
       modal.componentInstance.btnClass = 'btn-warning'
       modal.componentInstance.btnCaption = $localize`Dismiss`
       modal.componentInstance.confirmClicked.pipe(first()).subscribe(() => {
-        modal.componentInstance.buttonsEnabled = false
+        modal.componentInstance.buttonsEnabled.set(false)
         modal.close()
         this.tasksService.dismissTasks(tasks).subscribe({
           next: () => {
@@ -324,7 +324,7 @@ export class TasksComponent
           },
           error: (e) => {
             this.toastService.showError($localize`Error dismissing tasks`, e)
-            modal.componentInstance.buttonsEnabled = true
+            modal.componentInstance.buttonsEnabled.set(true)
           },
         })
         this.clearSelection()
@@ -350,7 +350,7 @@ export class TasksComponent
     modal.componentInstance.btnClass = 'btn-warning'
     modal.componentInstance.btnCaption = $localize`Dismiss`
     modal.componentInstance.confirmClicked.pipe(first()).subscribe(() => {
-      modal.componentInstance.buttonsEnabled = false
+      modal.componentInstance.buttonsEnabled.set(false)
       modal.close()
       this.tasksService.dismissAllTasks().subscribe({
         next: () => {
@@ -358,7 +358,7 @@ export class TasksComponent
         },
         error: (e) => {
           this.toastService.showError($localize`Error dismissing tasks`, e)
-          modal.componentInstance.buttonsEnabled = true
+          modal.componentInstance.buttonsEnabled.set(true)
         },
       })
       this.clearSelection()

src-ui/src/app/components/admin/trash/trash.component.ts

@@ -82,7 +82,7 @@ export class TrashComponent
     modal.componentInstance.confirmClicked
       .pipe(takeUntil(this.unsubscribeNotifier))
       .subscribe(() => {
-        modal.componentInstance.buttonsEnabled = false
+        modal.componentInstance.buttonsEnabled.set(false)
         this.trashService.emptyTrash([document.id]).subscribe({
           next: () => {
             this.toastService.showInfo(

src-ui/src/app/components/admin/users-groups/users-groups.component.ts

@@ -146,7 +146,7 @@ export class UsersAndGroupsComponent
     modal.componentInstance.btnClass = 'btn-danger'
     modal.componentInstance.btnCaption = $localize`Proceed`
     modal.componentInstance.confirmClicked.subscribe(() => {
-      modal.componentInstance.buttonsEnabled = false
+      modal.componentInstance.buttonsEnabled.set(false)
       this.usersService.delete(user).subscribe({
         next: () => {
           modal.close()
@@ -199,7 +199,7 @@ export class UsersAndGroupsComponent
     modal.componentInstance.btnClass = 'btn-danger'
     modal.componentInstance.btnCaption = $localize`Proceed`
     modal.componentInstance.confirmClicked.subscribe(() => {
-      modal.componentInstance.buttonsEnabled = false
+      modal.componentInstance.buttonsEnabled.set(false)
       this.groupsService.delete(group).subscribe({
         next: () => {
           modal.close()

src-ui/src/app/components/common/confirm-dialog/confirm-dialog.component.html

@@ -12,10 +12,10 @@
   }
 </div>
 <div class="modal-footer">
-  <button type="button" class="btn" [class]="cancelBtnClass" (click)="cancel()" [disabled]="!buttonsEnabled">
+  <button type="button" class="btn" [class]="cancelBtnClass" (click)="cancel()" [disabled]="!buttonsEnabled()">
         <span class="d-inline-block" style="padding-bottom: 1px;">{{cancelBtnCaption}}</span>
       </button>
-  <button type="button" class="btn" [class]="btnClass" (click)="confirm()" [disabled]="!confirmButtonEnabled || !buttonsEnabled">
+  <button type="button" class="btn" [class]="btnClass" (click)="confirm()" [disabled]="!confirmButtonEnabled || !buttonsEnabled()">
     <span>
       {{btnCaption}}
       <span class="visually-hidden">{{ seconds | number: '1.0-0' }} seconds</span>
@@ -25,7 +25,7 @@
     }
   </button>
   @if (alternativeBtnCaption) {
-    <button type="button" class="btn" [class]="alternativeBtnClass" (click)="alternative()" [disabled]="!alternativeButtonEnabled || !buttonsEnabled">
+    <button type="button" class="btn" [class]="alternativeBtnClass" (click)="alternative()" [disabled]="!alternativeButtonEnabled || !buttonsEnabled()">
       {{alternativeBtnCaption}}
     </button>
   }

src-ui/src/app/components/common/confirm-dialog/confirm-dialog.component.spec.ts

@@ -64,6 +64,22 @@ describe('ConfirmDialogComponent', () => {
     expect(confirmSubjectResult).toBeTruthy()
   })
 
+  it('should re-render the buttons when they are toggled from outside', async () => {
+    const confirmButton: HTMLButtonElement =
+      fixture.nativeElement.querySelectorAll('.modal-footer button')[1]
+    expect(confirmButton.disabled).toBeFalsy()
+
+    // Deliberately no detectChanges: a request callback toggling this is all
+    // that happens, and nothing else schedules a render for the modal
+    component.buttonsEnabled.set(false)
+    await fixture.whenStable()
+    expect(confirmButton.disabled).toBeTruthy()
+
+    component.buttonsEnabled.set(true)
+    await fixture.whenStable()
+    expect(confirmButton.disabled).toBeFalsy()
+  })
+
   it('should support cancel & close modal', () => {
     let confirmSubjectResult
     const closeModalSpy = jest.spyOn(modal, 'close')

src-ui/src/app/components/common/confirm-dialog/confirm-dialog.component.ts

@@ -1,5 +1,12 @@
 import { DecimalPipe } from '@angular/common'
-import { Component, EventEmitter, Input, Output, inject } from '@angular/core'
+import {
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  inject,
+  signal,
+} from '@angular/core'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { Subject } from 'rxjs'
 import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
@@ -46,8 +53,7 @@ export class ConfirmDialogComponent extends LoadingComponentWithPermissions {
   @Input()
   cancelBtnCaption = $localize`Cancel`
 
-  @Input()
-  buttonsEnabled = true
+  readonly buttonsEnabled = signal(true)
 
   confirmButtonEnabled = true
   alternativeButtonEnabled = true

src-ui/src/app/components/common/confirm-dialog/merge-confirm-dialog/merge-confirm-dialog.component.html

@@ -56,10 +56,10 @@
     }
 </div>
 <div class="modal-footer">
-    <button type="button" class="btn" [class]="cancelBtnClass" (click)="cancel()" [disabled]="!buttonsEnabled">
+    <button type="button" class="btn" [class]="cancelBtnClass" (click)="cancel()" [disabled]="!buttonsEnabled()">
         <span class="d-inline-block" style="padding-bottom: 1px;">{{cancelBtnCaption}}</span>
     </button>
-    <button type="button" class="btn" [class]="btnClass" (click)="confirm()" [disabled]="!confirmButtonEnabled || !buttonsEnabled">
+    <button type="button" class="btn" [class]="btnClass" (click)="confirm()" [disabled]="!confirmButtonEnabled || !buttonsEnabled()">
         {{btnCaption}}
     </button>
 </div>

src-ui/src/app/components/common/confirm-dialog/password-removal-confirm-dialog/password-removal-confirm-dialog.component.html

@@ -57,7 +57,7 @@
     class="btn"
     [class]="cancelBtnClass"
     (click)="cancel()"
-    [disabled]="!buttonsEnabled"
+    [disabled]="!buttonsEnabled()"
   >
     <span class="d-inline-block" style="padding-bottom: 1px;">
       {{cancelBtnCaption}}
@@ -68,7 +68,7 @@
     class="btn"
     [class]="btnClass"
     (click)="confirm()"
-    [disabled]="!confirmButtonEnabled || !buttonsEnabled"
+    [disabled]="!confirmButtonEnabled || !buttonsEnabled()"
   >
     {{btnCaption}}
   </button>

src-ui/src/app/components/common/confirm-dialog/rotate-confirm-dialog/rotate-confirm-dialog.component.html

@@ -34,10 +34,10 @@
           <p class="mb-0 small"><b>{{messageBold}}</b></p>
         }
     </div>
-    <button type="button" class="btn" [class]="cancelBtnClass" (click)="cancel()" [disabled]="!buttonsEnabled">
+    <button type="button" class="btn" [class]="cancelBtnClass" (click)="cancel()" [disabled]="!buttonsEnabled()">
         <span class="d-inline-block" style="padding-bottom: 1px;">{{cancelBtnCaption}}</span>
     </button>
-    <button type="button" class="btn" [class]="btnClass" (click)="confirm()" [disabled]="!confirmButtonEnabled || !buttonsEnabled || degrees === 0">
+    <button type="button" class="btn" [class]="btnClass" (click)="confirm()" [disabled]="!confirmButtonEnabled || !buttonsEnabled() || degrees === 0">
       {{btnCaption}}
       @if (!confirmButtonEnabled) {
           <ngb-progressbar style="height: 1px;" type="dark" [max]="secondsTotal" [value]="seconds"></ngb-progressbar>

src-ui/src/app/components/common/pdf-editor/pdf-editor.component.html

@@ -100,7 +100,7 @@
       </div>
     }
     <div class="form-group ms-md-auto">
-      <button type="button" class="btn me-2" [class]="cancelBtnClass" (click)="cancel()" [disabled]="!buttonsEnabled">{{ cancelBtnCaption }}</button>
+      <button type="button" class="btn me-2" [class]="cancelBtnClass" (click)="cancel()" [disabled]="!buttonsEnabled()">{{ cancelBtnCaption }}</button>
       <button type="button" class="btn" [class]="btnClass" (click)="confirm()" [disabled]="pages.length === 0">{{ btnCaption }}</button>
     </div>
   </div>

src-ui/src/app/components/common/share-link-bundle-dialog/share-link-bundle-dialog.component.html

@@ -119,7 +119,7 @@
         type="button"
         class="btn btn-primary btn-sm d-inline-flex align-items-center gap-2 text-nowrap"
         (click)="submit()"
-        [disabled]="loading() || !buttonsEnabled">
+        [disabled]="loading() || !buttonsEnabled()">
         @if (loading()) {
           <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
         }

src-ui/src/app/components/common/share-link-bundle-dialog/share-link-bundle-dialog.component.spec.ts

@@ -69,7 +69,7 @@ describe('ShareLinkBundleDialogComponent', () => {
       file_version: FileVersion.Original,
       expiration_days: 3,
     })
-    expect(component.buttonsEnabled).toBe(false)
+    expect(component.buttonsEnabled()).toBe(false)
     expect(confirmSpy).toHaveBeenCalled()
 
     component.form.setValue({

src-ui/src/app/components/common/share-link-bundle-dialog/share-link-bundle-dialog.component.ts

@@ -78,7 +78,7 @@ export class ShareLinkBundleDialogComponent extends ConfirmDialogComponent {
         : FileVersion.Original,
       expiration_days: this.form.value.expirationDays,
     }
-    this.buttonsEnabled = false
+    this.buttonsEnabled.set(false)
     super.confirm()
   }
 

src-ui/src/app/components/document-detail/document-detail.component.spec.ts

@@ -1564,7 +1564,7 @@ describe('DocumentDetailComponent', () => {
     dialog.confirmClicked.next()
     await openModal.result
 
-    expect(dialog.buttonsEnabled).toBe(false)
+    expect(dialog.buttonsEnabled()).toBe(false)
     expect(reloadSpy).toHaveBeenCalled()
     expect((component as any).incomingUpdateModal).toBeNull()
   })
@@ -1789,7 +1789,7 @@ describe('DocumentDetailComponent', () => {
 
     expect(errorSpy).toHaveBeenCalled()
     expect(component.networkActive()).toBe(false)
-    expect(dialog.buttonsEnabled).toBe(true)
+    expect(dialog.buttonsEnabled()).toBe(true)
   })
 
   it('should refresh the document when removing password in update mode', () => {

src-ui/src/app/components/document-detail/document-detail.component.ts

@@ -659,7 +659,7 @@ export class DocumentDetailComponent
     modal.componentInstance.cancelBtnCaption = $localize`Dismiss`
 
     modal.componentInstance.confirmClicked.pipe(first()).subscribe(() => {
-      modal.componentInstance.buttonsEnabled = false
+      modal.componentInstance.buttonsEnabled.set(false)
       modal.close()
       this.reloadRemoteVersion()
     })
@@ -1374,7 +1374,7 @@ export class DocumentDetailComponent
     modal.componentInstance.confirmClicked
       .pipe(
         switchMap(() => {
-          modal.componentInstance.buttonsEnabled = false
+          modal.componentInstance.buttonsEnabled.set(false)
           return this.documentsService.delete(this.document())
         })
       )
@@ -1386,7 +1386,7 @@ export class DocumentDetailComponent
         },
         error: (error) => {
           this.toastService.showError($localize`Error deleting document`, error)
-          modal.componentInstance.buttonsEnabled = true
+          modal.componentInstance.buttonsEnabled.set(true)
           this.subscribeModalDelete(modal)
         },
       })
@@ -1411,7 +1411,7 @@ export class DocumentDetailComponent
     modal.componentInstance.btnClass = 'btn-danger'
     modal.componentInstance.btnCaption = $localize`Proceed`
     modal.componentInstance.confirmClicked.subscribe(() => {
-      modal.componentInstance.buttonsEnabled = false
+      modal.componentInstance.buttonsEnabled.set(false)
       this.documentsService
         .reprocessDocuments({ documents: [this.document().id] })
         .subscribe({
@@ -1425,7 +1425,7 @@ export class DocumentDetailComponent
           },
           error: (error) => {
             if (modal) {
-              modal.componentInstance.buttonsEnabled = true
+              modal.componentInstance.buttonsEnabled.set(true)
             }
             this.toastService.showError(
               $localize`Error executing operation`,
@@ -1798,7 +1798,7 @@ export class DocumentDetailComponent
     modal.componentInstance.confirmClicked
       .pipe(takeUntil(this.unsubscribeNotifier))
       .subscribe(() => {
-        modal.componentInstance.buttonsEnabled = false
+        modal.componentInstance.buttonsEnabled.set(false)
         this.documentsService
           .editPdfDocuments([sourceDocumentId], {
             operations: modal.componentInstance.getOperations(),
@@ -1821,7 +1821,7 @@ export class DocumentDetailComponent
             },
             error: (error) => {
               if (modal) {
-                modal.componentInstance.buttonsEnabled = true
+                modal.componentInstance.buttonsEnabled.set(true)
               }
               this.toastService.showError(
                 $localize`Error executing PDF edit operation`,
@@ -1855,7 +1855,7 @@ export class DocumentDetailComponent
         const sourceDocumentId = this.selectedVersionId() ?? this.document().id
         const dialog =
           modal.componentInstance as PasswordRemovalConfirmDialogComponent
-        dialog.buttonsEnabled = false
+        dialog.buttonsEnabled.set(false)
         this.networkActive.set(true)
         this.documentsService
           .removePasswordDocuments([sourceDocumentId], {
@@ -1880,7 +1880,7 @@ export class DocumentDetailComponent
               }
             },
             error: (error) => {
-              dialog.buttonsEnabled = true
+              dialog.buttonsEnabled.set(true)
               this.networkActive.set(false)
               this.toastService.showError(
                 $localize`Error executing password removal operation`,

src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.spec.ts

@@ -1683,7 +1683,7 @@ describe('BulkEditorComponent', () => {
           expiration_days: 7,
         },
         loading: signal(false),
-        buttonsEnabled: true,
+        buttonsEnabled: signal(true),
         copied: signal(false),
       },
     }
@@ -1715,7 +1715,7 @@ describe('BulkEditorComponent', () => {
       expiration_days: 7,
     })
     expect(dialogInstance.loading()).toBe(false)
-    expect(dialogInstance.buttonsEnabled).toBe(false)
+    expect(dialogInstance.buttonsEnabled()).toBe(false)
     expect(dialogInstance.createdBundle).toEqual({ id: 42 })
     expect(typeof dialogInstance.onOpenManage).toBe('function')
     expect(toastInfoSpy).toHaveBeenCalledWith(
@@ -1755,7 +1755,7 @@ describe('BulkEditorComponent', () => {
           expiration_days: null,
         },
         loading: signal(false),
-        buttonsEnabled: true,
+        buttonsEnabled: signal(true),
       },
     }
 
@@ -1777,7 +1777,7 @@ describe('BulkEditorComponent', () => {
       expect.any(Error)
     )
     expect(dialogInstance.loading()).toBe(false)
-    expect(dialogInstance.buttonsEnabled).toBe(true)
+    expect(dialogInstance.buttonsEnabled()).toBe(true)
     openSpy.mockRestore()
   })
 

src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.ts

@@ -273,7 +273,7 @@ export class BulkEditorComponent
     overrideSelection?: DocumentSelectionQuery
   ) {
     if (modal) {
-      this.setModalButtonsEnabled(modal, false)
+      modal.componentInstance.buttonsEnabled.set(false)
     }
     this.documentService
       .bulkEdit(overrideSelection ?? this.getSelectionQuery(), method, args)
@@ -290,7 +290,7 @@ export class BulkEditorComponent
     options: { deleteOriginals?: boolean } = {}
   ) {
     if (modal) {
-      this.setModalButtonsEnabled(modal, false)
+      modal.componentInstance.buttonsEnabled.set(false)
     }
     request.pipe(first()).subscribe({
       next: () => {
@@ -320,7 +320,7 @@ export class BulkEditorComponent
 
   private handleOperationError(modal: NgbModalRef, error: any) {
     if (modal) {
-      this.setModalButtonsEnabled(modal, true)
+      modal.componentInstance.buttonsEnabled.set(true)
     }
     this.toastService.showError(
       $localize`Error executing bulk operation`,
@@ -328,15 +328,6 @@ export class BulkEditorComponent
     )
   }
 
-  private setModalButtonsEnabled(modal: NgbModalRef, enabled: boolean) {
-    const buttonsEnabled = modal.componentInstance.buttonsEnabled
-    if (typeof buttonsEnabled?.set === 'function') {
-      buttonsEnabled.set(enabled)
-    } else {
-      modal.componentInstance.buttonsEnabled = enabled
-    }
-  }
-
   private applySelectionData(
     items: SelectionDataItem[],
     selectionModel: FilterableDropdownSelectionModel
@@ -872,7 +863,7 @@ export class BulkEditorComponent
       modal.componentInstance.confirmClicked
         .pipe(takeUntil(this.unsubscribeNotifier))
         .subscribe(() => {
-          modal.componentInstance.buttonsEnabled = false
+          modal.componentInstance.buttonsEnabled.set(false)
           this.executeDocumentAction(
             modal,
             this.documentService.deleteDocuments(this.getSelectionQuery())
@@ -920,7 +911,7 @@ export class BulkEditorComponent
     modal.componentInstance.confirmClicked
       .pipe(takeUntil(this.unsubscribeNotifier))
       .subscribe(() => {
-        modal.componentInstance.buttonsEnabled = false
+        modal.componentInstance.buttonsEnabled.set(false)
         this.executeDocumentAction(
           modal,
           this.documentService.reprocessDocuments(this.getSelectionQuery())
@@ -957,7 +948,7 @@ export class BulkEditorComponent
     rotateDialog.confirmClicked
       .pipe(takeUntil(this.unsubscribeNotifier))
       .subscribe(() => {
-        rotateDialog.buttonsEnabled = false
+        rotateDialog.buttonsEnabled.set(false)
         this.executeDocumentAction(
           modal,
           this.documentService.rotateDocuments(
@@ -990,7 +981,7 @@ export class BulkEditorComponent
         if (mergeDialog.archiveFallback()) {
           args.archive_fallback = true
         }
-        mergeDialog.buttonsEnabled = false
+        mergeDialog.buttonsEnabled.set(false)
         this.executeDocumentAction(
           modal,
           this.documentService.mergeDocuments(mergeDialog.documentIDs(), args),
@@ -1063,14 +1054,14 @@ export class BulkEditorComponent
       .pipe(takeUntil(this.unsubscribeNotifier))
       .subscribe(() => {
         dialog.loading.set(true)
-        dialog.buttonsEnabled = false
+        dialog.buttonsEnabled.set(false)
         this.shareLinkBundleService
           .createBundle(dialog.payload)
           .pipe(first())
           .subscribe({
             next: (result) => {
               dialog.loading.set(false)
-              dialog.buttonsEnabled = false
+              dialog.buttonsEnabled.set(false)
               dialog.createdBundle = result
               dialog.copied.set(false)
               dialog.payload = null
@@ -1084,7 +1075,7 @@ export class BulkEditorComponent
             },
             error: (error) => {
               dialog.loading.set(false)
-              dialog.buttonsEnabled = true
+              dialog.buttonsEnabled.set(true)
               this.toastService.showError(
                 $localize`Share link bundle creation is not available yet.`,
                 error

src-ui/src/app/components/manage/document-attributes/custom-fields/custom-fields.component.ts

@@ -105,7 +105,7 @@ export class CustomFieldsComponent
     modal.componentInstance.btnClass = 'btn-danger'
     modal.componentInstance.btnCaption = $localize`Proceed`
     modal.componentInstance.confirmClicked.subscribe(() => {
-      modal.componentInstance.buttonsEnabled = false
+      modal.componentInstance.buttonsEnabled.set(false)
       this.customFieldsService.delete(field).subscribe({
         next: () => {
           modal.close()

src-ui/src/app/components/manage/document-attributes/management-list/management-list.component.ts

@@ -274,7 +274,7 @@ export abstract class ManagementListComponent<T extends MatchingModel>
     activeModal.componentInstance.btnClass = 'btn-danger'
     activeModal.componentInstance.btnCaption = $localize`Delete`
     activeModal.componentInstance.confirmClicked.subscribe(() => {
-      activeModal.componentInstance.buttonsEnabled = false
+      activeModal.componentInstance.buttonsEnabled.set(false)
       this.service
         .delete(object)
         .pipe(takeUntil(this.unsubscribeNotifier))
@@ -284,7 +284,7 @@ export abstract class ManagementListComponent<T extends MatchingModel>
             this.reloadData()
           },
           error: (error) => {
-            activeModal.componentInstance.buttonsEnabled = true
+            activeModal.componentInstance.buttonsEnabled.set(true)
             this.toastService.showError(
               $localize`Error while deleting element`,
               error
@@ -455,7 +455,7 @@ export abstract class ManagementListComponent<T extends MatchingModel>
     modal.componentInstance.btnClass = 'btn-danger'
     modal.componentInstance.btnCaption = $localize`Proceed`
     modal.componentInstance.confirmClicked.subscribe(() => {
-      modal.componentInstance.buttonsEnabled = false
+      modal.componentInstance.buttonsEnabled.set(false)
       this.service
         .bulk_edit_objects(
           this.allSelectionActive ? [] : Array.from(this.selectedObjects),
@@ -472,7 +472,7 @@ export abstract class ManagementListComponent<T extends MatchingModel>
             this.reloadData()
           },
           error: (error) => {
-            modal.componentInstance.buttonsEnabled = true
+            modal.componentInstance.buttonsEnabled.set(true)
             this.toastService.showError(
               $localize`Error deleting objects`,
               error

src-ui/src/app/components/manage/mail/mail.component.ts

@@ -196,7 +196,7 @@ export class MailComponent
     modal.componentInstance.btnClass = 'btn-danger'
     modal.componentInstance.btnCaption = $localize`Proceed`
     modal.componentInstance.confirmClicked.subscribe(() => {
-      modal.componentInstance.buttonsEnabled = false
+      modal.componentInstance.buttonsEnabled.set(false)
       this.mailAccountService.delete(account).subscribe({
         next: () => {
           modal.close()
@@ -298,7 +298,7 @@ export class MailComponent
     modal.componentInstance.btnClass = 'btn-danger'
     modal.componentInstance.btnCaption = $localize`Proceed`
     modal.componentInstance.confirmClicked.subscribe(() => {
-      modal.componentInstance.buttonsEnabled = false
+      modal.componentInstance.buttonsEnabled.set(false)
       this.mailRuleService.delete(rule).subscribe({
         next: () => {
           modal.close()

src-ui/src/app/components/manage/workflows/workflows.component.ts

@@ -134,7 +134,7 @@ export class WorkflowsComponent
     modal.componentInstance.btnClass = 'btn-danger'
     modal.componentInstance.btnCaption = $localize`Proceed`
     modal.componentInstance.confirmClicked.subscribe(() => {
-      modal.componentInstance.buttonsEnabled = false
+      modal.componentInstance.buttonsEnabled.set(false)
       this.workflowService.delete(workflow).subscribe({
         next: () => {
           modal.close()

src-ui/src/app/guards/dirty-form.guard.ts

@@ -18,7 +18,7 @@ export class DirtyFormGuard extends DirtyCheckGuard {
     modal.componentInstance.btnClass = 'btn-warning'
     modal.componentInstance.btnCaption = $localize`Leave page`
     modal.componentInstance.confirmClicked.subscribe(() => {
-      modal.componentInstance.buttonsEnabled = false
+      modal.componentInstance.buttonsEnabled.set(false)
       modal.close()
     })
     const subject = new Subject<boolean>()

src-ui/src/app/guards/dirty-saved-view.guard.ts

@@ -36,12 +36,12 @@ export class DirtySavedViewGuard {
     modal.componentInstance.alternativeBtnClass = 'btn-primary'
     modal.componentInstance.alternativeBtnCaption = $localize`Save and close`
     modal.componentInstance.alternativeClicked.pipe(first()).subscribe(() => {
-      modal.componentInstance.buttonsEnabled = false
+      modal.componentInstance.buttonsEnabled.set(false)
       component.saveViewConfig()
       modal.close()
     })
     modal.componentInstance.confirmClicked.pipe(first()).subscribe(() => {
-      modal.componentInstance.buttonsEnabled = false
+      modal.componentInstance.buttonsEnabled.set(false)
       modal.close()
     })
 

src-ui/src/app/services/open-documents.service.ts

@@ -142,7 +142,7 @@ export class OpenDocumentsService {
       modal.componentInstance.btnClass = 'btn-warning'
       modal.componentInstance.btnCaption = $localize`Close document`
       modal.componentInstance.confirmClicked.pipe(first()).subscribe(() => {
-        modal.componentInstance.buttonsEnabled = false
+        modal.componentInstance.buttonsEnabled.set(false)
         modal.close()
         this.openDocuments.splice(index, 1)
         this.dirtyDocuments.delete(doc.id)
@@ -165,7 +165,7 @@ export class OpenDocumentsService {
       modal.componentInstance.btnClass = 'btn-warning'
       modal.componentInstance.btnCaption = $localize`Close documents`
       modal.componentInstance.confirmClicked.pipe(first()).subscribe(() => {
-        modal.componentInstance.buttonsEnabled = false
+        modal.componentInstance.buttonsEnabled.set(false)
         modal.close()
         this.openDocuments.splice(0, this.openDocuments.length)
         this.dirtyDocuments.clear()