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

src-ui/src/app/components/common/preview-popup/preview-popup.component.ts

@@ -1,5 +1,12 @@
 import { HttpClient } from '@angular/common/http'
-import { Component, inject, Input, OnDestroy, ViewChild } from '@angular/core'
+import {
+  Component,
+  inject,
+  Input,
+  OnDestroy,
+  signal,
+  ViewChild,
+} from '@angular/core'
 import { NgbPopover, NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { first, Subject, takeUntil } from 'rxjs'
@@ -55,17 +62,17 @@ export class PreviewPopupComponent implements OnDestroy {
 
   unsubscribeNotifier: Subject<any> = new Subject()
 
-  error = false
+  readonly error = signal(false)
 
-  requiresPassword: boolean = false
+  readonly requiresPassword = signal(false)
 
-  previewText: string
+  readonly previewText = signal<string>(null)
 
   @ViewChild('popover') popover: NgbPopover
 
-  mouseOnPreview: boolean = false
+  readonly mouseOnPreview = signal(false)
 
-  popoverClass: string = 'shadow popover-preview'
+  readonly popoverClass = signal('shadow popover-preview')
 
   get renderAsObject(): boolean {
     return (this.isPdf && this.useNativePdfViewer) || !this.isPdf
@@ -97,10 +104,10 @@ export class PreviewPopupComponent implements OnDestroy {
         .pipe(first(), takeUntil(this.unsubscribeNotifier))
         .subscribe({
           next: (res) => {
-            this.previewText = res.toString()
+            this.previewText.set(res.toString())
           },
           error: (err) => {
-            this.error = err
+            this.error.set(err)
           },
         })
     }
@@ -108,22 +115,24 @@ export class PreviewPopupComponent implements OnDestroy {
 
   onError(event: any) {
     if (event.name == 'PasswordException') {
-      this.requiresPassword = true
+      this.requiresPassword.set(true)
     } else {
-      this.error = true
+      this.error.set(true)
     }
   }
 
   mouseEnterPreview() {
-    this.mouseOnPreview = true
+    this.mouseOnPreview.set(true)
     if (!this.popover.isOpen()) {
       // we're going to open but hide to pre-load content during hover delay
       this.popover.open()
-      this.popoverClass = 'shadow popover-preview pe-none opacity-0'
+      this.popoverClass.set('shadow popover-preview pe-none opacity-0')
       setTimeout(() => {
-        if (this.mouseOnPreview) {
+        if (this.mouseOnPreview()) {
           // show popover
-          this.popoverClass = this.popoverClass.replace('pe-none opacity-0', '')
+          this.popoverClass.set(
+            this.popoverClass().replace('pe-none opacity-0', '')
+          )
         } else {
           this.popover.close(true)
         }
@@ -132,13 +141,13 @@ export class PreviewPopupComponent implements OnDestroy {
   }
 
   mouseLeavePreview() {
-    this.mouseOnPreview = false
+    this.mouseOnPreview.set(false)
   }
 
   public close(immediate: boolean = false) {
     setTimeout(
       () => {
-        if (!this.mouseOnPreview) this.popover.close()
+        if (!this.mouseOnPreview()) this.popover.close()
       },
       immediate ? 0 : 300
     )