Chorehancement: update to Angular v22, 'zoneless' / 'reactive' (#13114)

src-ui/src/app/components/common/pdf-editor/pdf-editor.component.spec.ts

@@ -146,8 +146,8 @@ describe('PDFEditorComponent', () => {
     const previewSpy = jest
       .spyOn(documentService, 'getPreviewUrl')
       .mockReturnValue('preview-version')
-    component.documentID = 3
-    component.versionID = 10
+    component.documentID.set(3)
+    component.versionID.set(10)
 
     expect(component.pdfSrc).toBe('preview-version')
     expect(previewSpy).toHaveBeenCalledWith(3, false, 10)

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

@@ -3,7 +3,7 @@ import {
   DragDropModule,
   moveItemInArray,
 } from '@angular/cdk/drag-drop'
-import { Component, inject } from '@angular/core'
+import { Component, inject, signal } from '@angular/core'
 import { FormsModule } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
@@ -45,8 +45,9 @@ export class PDFEditorComponent extends ConfirmDialogComponent {
   private readonly settingsService = inject(SettingsService)
   activeModal: NgbActiveModal = inject(NgbActiveModal)
 
-  documentID: number
-  versionID?: number
+  readonly documentID = signal<number>(undefined)
+  readonly versionID = signal<number>(undefined)
+
   pages: PageOperation[] = []
   totalPages = 0
   editMode: PdfEditorEditMode = this.settingsService.get(
@@ -57,9 +58,9 @@ export class PDFEditorComponent extends ConfirmDialogComponent {
 
   get pdfSrc(): string {
     return this.documentService.getPreviewUrl(
-      this.documentID,
+      this.documentID(),
       false,
-      this.versionID
+      this.versionID()
     )
   }