Upgrading to Angular 20:

Replaced checked in package-lock.json by regenerated one.
Ran ng update @angular/core@20 @angular/cli@20
Ran npm install @angular-builders/jest@^20.0.0 @fortawesome/angular-fontawesome@^3.0.0 @swimlane/ngx-graph@^11
Ran npm install ngx-mat-select-search@^8.0.2.
Ran ng update @angular/material@20.
Updated all eslint and typescript to the latest versions.
Removed @angular-devkit/schematics.
Updated fontawesome.
Updated rxjs and tslib.
Moved required node version from 16 to 20.
Updated jest-preset-angular.
Set preserveWhitespaces to false.
Corrected two type declarations in two typescript files to make ng serve run without errors.
Removed unused angular-devkit/schematics from view-user.component.ts .
Updated list of supported browsers.
Upgraded prettier.
Ran prettier . --write the first time.
Ran prettier . --write the second time.
Ran ng generate @angular/core:inject with defaults, excepted a handful of files.
Fixed remaining eslint problems.
Added dist directory to ignores in eslint.config.js.
Let prettier fix formatting, almost everything is just line breaks.
Made htmlhint ignore @if and @for Angular constructs.
Updated node version in Github workflow to 22.12.0 (build.yml).
Updated .env.ts.
Updated Angular datetime format strings from YYYY-MM-DD to yyyy-MM-dd.
Merged changes from dev into angular20 branch.

src/app/clients/clients-view/custom-dialogs/capture-image-dialog/capture-image-dialog.component.html

@@ -10,12 +10,16 @@
   <p #fallback [ngStyle]="{ display: 'none' }" align="center"></p>
 
   <div class="flex-20" align="center">
-    <button #captureButton *ngIf="!isCaptured" mat-stroked-button color="primary" (click)="capture()">
-      {{ 'labels.buttons.Capture' | translate }}
-    </button>
-    <button *ngIf="isCaptured" mat-stroked-button color="primary" (click)="recapture()">
-      <fa-icon icon="undo" size="sm" class="m-r-10"></fa-icon>{{ 'labels.buttons.Recapture' | translate }}
-    </button>
+    @if (!isCaptured) {
+      <button #captureButton mat-stroked-button color="primary" (click)="capture()">
+        {{ 'labels.buttons.Capture' | translate }}
+      </button>
+    }
+    @if (isCaptured) {
+      <button mat-stroked-button color="primary" (click)="recapture()">
+        <fa-icon icon="undo" size="sm" class="m-r-10"></fa-icon>{{ 'labels.buttons.Recapture' | translate }}
+      </button>
+    }
   </div>
 
   <mat-dialog-actions align="end">

src/app/clients/clients-view/custom-dialogs/capture-image-dialog/capture-image-dialog.component.ts

@@ -1,7 +1,7 @@
 /** Angular Imports */
-import { Component, ViewChild, ElementRef, AfterViewInit, Renderer2, OnDestroy } from '@angular/core';
+import { Component, ViewChild, ElementRef, AfterViewInit, Renderer2, OnDestroy, inject } from '@angular/core';
 import { MatDialogRef, MatDialogTitle, MatDialogActions, MatDialogClose } from '@angular/material/dialog';
-import { NgStyle, NgIf } from '@angular/common';
+import { NgStyle } from '@angular/common';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
@@ -22,6 +22,9 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class CaptureImageDialogComponent implements AfterViewInit, OnDestroy {
+  dialogRef = inject<MatDialogRef<CaptureImageDialogComponent>>(MatDialogRef);
+  private renderer = inject(Renderer2);
+
   /** Video element reference */
   @ViewChild('video', { static: true }) video: ElementRef;
   /** Canvas element reference */
@@ -36,15 +39,6 @@ export class CaptureImageDialogComponent implements AfterViewInit, OnDestroy {
   /** Client image file */
   clientImageDataURL: string;
 
-  /**
-   * @param {MatDialogRef} dialogRef Mat Dialog Reference
-   * @param {Renderer2} renderer Template Renderer
-   */
-  constructor(
-    public dialogRef: MatDialogRef<CaptureImageDialogComponent>,
-    private renderer: Renderer2
-  ) {}
-
   ngAfterViewInit() {
     this.startCamera();
   }

src/app/clients/clients-view/custom-dialogs/delete-signature-dialog/delete-signature-dialog.component.html

@@ -1,19 +1,27 @@
 <h1 mat-dialog-title>{{ 'labels.heading.Delete Client Signature' | translate }}</h1>
 
-<div *ngIf="signatureId" mat-dialog-content>
-  <p>{{ 'labels.text.Delete clients signature' | translate }} ?</p>
-</div>
+@if (signatureId) {
+  <div mat-dialog-content>
+    <p>{{ 'labels.text.Delete clients signature' | translate }} ?</p>
+  </div>
+}
 
-<div *ngIf="!signatureId" mat-dialog-content>
-  <p>{{ 'labels.text.Client Signature is not provided.' | translate }}</p>
-</div>
+@if (!signatureId) {
+  <div mat-dialog-content>
+    <p>{{ 'labels.text.Client Signature is not provided.' | translate }}</p>
+  </div>
+}
 
 <mat-dialog-actions align="end">
   <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
-  <button mat-raised-button *ngIf="signatureId" color="warn" [mat-dialog-close]="{ delete: true, id: signatureId }">
-    {{ 'labels.buttons.Confirm' | translate }}
-  </button>
-  <button mat-raised-button *ngIf="!signatureId" color="primary" [mat-dialog-close]="{ upload: true }">
-    {{ 'labels.buttons.Upload' | translate }}
-  </button>
+  @if (signatureId) {
+    <button mat-raised-button color="warn" [mat-dialog-close]="{ delete: true, id: signatureId }">
+      {{ 'labels.buttons.Confirm' | translate }}
+    </button>
+  }
+  @if (!signatureId) {
+    <button mat-raised-button color="primary" [mat-dialog-close]="{ upload: true }">
+      {{ 'labels.buttons.Upload' | translate }}
+    </button>
+  }
 </mat-dialog-actions>

src/app/clients/clients-view/custom-dialogs/delete-signature-dialog/delete-signature-dialog.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, Inject } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import {
   MatDialogRef,
   MAT_DIALOG_DATA,
@@ -28,6 +28,9 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class DeleteSignatureDialogComponent {
+  dialogRef = inject<MatDialogRef<DeleteSignatureDialogComponent>>(MatDialogRef);
+  data = inject(MAT_DIALOG_DATA);
+
   /** Id of client signature in documents */
   signatureId: any;
 
@@ -35,10 +38,7 @@ export class DeleteSignatureDialogComponent {
    * @param {MatDialogRef} dialogRef Component reference to dialog.
    * @param {any} data Documents data
    */
-  constructor(
-    public dialogRef: MatDialogRef<DeleteSignatureDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: any[]
-  ) {
+  constructor() {
     const signature = this.data.find((document: any) => document.name === 'clientSignature') || {};
     this.signatureId = signature.id;
   }

src/app/clients/clients-view/custom-dialogs/edit-notes-dialog/edit-notes-dialog.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, Inject } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import {
   MatDialogRef,
   MAT_DIALOG_DATA,
@@ -22,13 +22,11 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class EditNotesDialogComponent implements OnInit {
-  noteForm: UntypedFormGroup;
+  dialogRef = inject<MatDialogRef<EditNotesDialogComponent>>(MatDialogRef);
+  private formBuilder = inject(UntypedFormBuilder);
+  data = inject(MAT_DIALOG_DATA);
 
-  constructor(
-    public dialogRef: MatDialogRef<EditNotesDialogComponent>,
-    private formBuilder: UntypedFormBuilder,
-    @Inject(MAT_DIALOG_DATA) public data: any
-  ) {}
+  noteForm: UntypedFormGroup;
 
   ngOnInit() {
     this.createNoteForm();

src/app/clients/clients-view/custom-dialogs/unassign-staff-dialog/unassign-staff-dialog.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, Inject } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import {
   MatDialogRef,
   MAT_DIALOG_DATA,
@@ -28,8 +28,5 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class UnassignStaffDialogComponent {
-  /**
-   * @param {MatDialogRef} dialogRef Component reference to dialog.
-   */
-  constructor(public dialogRef: MatDialogRef<UnassignStaffDialogComponent>) {}
+  dialogRef = inject<MatDialogRef<UnassignStaffDialogComponent>>(MatDialogRef);
 }

src/app/clients/clients-view/custom-dialogs/upload-document-dialog/upload-document-dialog.component.html

@@ -1,69 +1,79 @@
 <h1 mat-dialog-title>
-  <ng-container *ngIf="documentIdentifier; else defaultTitle">
+  @if (documentIdentifier) {
     {{ 'labels.heading.Add Client Identifier' | translate }}
-  </ng-container>
-  <ng-template #defaultTitle>
+  } @else {
     {{ 'labels.heading.Upload' | translate }} {{ entityType }} {{ 'labels.heading.Documents' | translate }}
-  </ng-template>
+  }
 </h1>
 <div class="m-l-10 m-r-10">
   <form [formGroup]="uploadDocumentForm" class="layout-column">
     <!-- Identity-specific fields -->
-    <ng-container *ngIf="documentIdentifier">
+    @if (documentIdentifier) {
       <mat-form-field class="flex-fill">
         <mat-label>{{ 'labels.inputs.Document Type' | translate }}</mat-label>
         <mat-select formControlName="documentTypeId" required>
-          <mat-option *ngFor="let docType of allowedDocumentTypes" [value]="docType.id">
-            {{ docType.name }}
-          </mat-option>
+          @for (docType of allowedDocumentTypes; track docType) {
+            <mat-option [value]="docType.id">
+              {{ docType.name }}
+            </mat-option>
+          }
         </mat-select>
-        <mat-error *ngIf="uploadDocumentForm.controls.documentTypeId?.hasError('required')">
-          {{ 'labels.inputs.Document Type' | translate }} {{ 'labels.commons.is' | translate }}
-          <strong>{{ 'labels.commons.required' | translate }}</strong>
-        </mat-error>
+        @if (uploadDocumentForm.controls.documentTypeId?.hasError('required')) {
+          <mat-error>
+            {{ 'labels.inputs.Document Type' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
+          </mat-error>
+        }
       </mat-form-field>
-
       <mat-form-field class="flex-fill">
         <mat-label>{{ 'labels.inputs.Status' | translate }}</mat-label>
         <mat-select formControlName="status" required>
-          <mat-option *ngFor="let status of statusOptions" [value]="status.value">
-            {{ status.label }}
-          </mat-option>
+          @for (status of statusOptions; track status) {
+            <mat-option [value]="status.value">
+              {{ status.label }}
+            </mat-option>
+          }
         </mat-select>
-        <mat-error *ngIf="uploadDocumentForm.controls.status?.hasError('required')">
-          {{ 'labels.inputs.Status' | translate }} {{ 'labels.commons.is' | translate }}
-          <strong>{{ 'labels.commons.required' | translate }}</strong>
-        </mat-error>
+        @if (uploadDocumentForm.controls.status?.hasError('required')) {
+          <mat-error>
+            {{ 'labels.inputs.Status' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
+          </mat-error>
+        }
       </mat-form-field>
-
       <mat-form-field class="flex-fill">
         <mat-label>{{ 'labels.inputs.Document Key' | translate }}</mat-label>
         <input formControlName="documentKey" required matInput />
-        <mat-error *ngIf="uploadDocumentForm.controls.documentKey?.hasError('required')">
-          {{ 'labels.inputs.Document Key' | translate }} {{ 'labels.commons.is' | translate }}
-          <strong>{{ 'labels.commons.required' | translate }}</strong>
-        </mat-error>
+        @if (uploadDocumentForm.controls.documentKey?.hasError('required')) {
+          <mat-error>
+            {{ 'labels.inputs.Document Key' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
+          </mat-error>
+        }
       </mat-form-field>
-
       <mat-form-field class="flex-fill">
         <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
         <input formControlName="description" matInput />
       </mat-form-field>
-    </ng-container>
+    }
 
     <mat-form-field class="flex-fill">
       <mat-label>{{ 'labels.inputs.File Name' | translate }}</mat-label>
       <input formControlName="fileName" required matInput />
-      <mat-error *ngIf="uploadDocumentForm.controls.fileName.hasError('required')">
-        {{ 'labels.inputs.File Name' | translate }} {{ 'labels.commons.is' | translate }}
-        <strong>{{ 'labels.commons.required' | translate }}</strong>
-      </mat-error>
+      @if (uploadDocumentForm.controls.fileName.hasError('required')) {
+        <mat-error>
+          {{ 'labels.inputs.File Name' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
+        </mat-error>
+      }
     </mat-form-field>
 
-    <mat-form-field class="flex-fill" *ngIf="!documentIdentifier">
-      <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
-      <input formControlName="description" matInput />
-    </mat-form-field>
+    @if (!documentIdentifier) {
+      <mat-form-field class="flex-fill">
+        <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
+        <input formControlName="description" matInput />
+      </mat-form-field>
+    }
 
     <mifosx-file-upload flex="60%" (change)="onFileSelect($event)"></mifosx-file-upload>
 
@@ -75,12 +85,11 @@
         [disabled]="!uploadDocumentForm.valid"
         [mat-dialog-close]="uploadDocumentForm.value"
       >
-        <ng-container *ngIf="documentIdentifier; else uploadLabel">
+        @if (documentIdentifier) {
           {{ 'labels.buttons.Add' | translate }}
-        </ng-container>
-        <ng-template #uploadLabel>
+        } @else {
           {{ 'labels.buttons.Upload' | translate }}
-        </ng-template>
+        }
       </button>
     </mat-dialog-actions>
   </form>

src/app/clients/clients-view/custom-dialogs/upload-document-dialog/upload-document-dialog.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Inject } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import {
   MatDialogRef,
   MAT_DIALOG_DATA,
@@ -23,6 +23,10 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class UploadDocumentDialogComponent implements OnInit {
+  dialogRef = inject<MatDialogRef<UploadDocumentDialogComponent>>(MatDialogRef);
+  private formBuilder = inject(UntypedFormBuilder);
+  data = inject(MAT_DIALOG_DATA);
+
   /** Upload Document form. */
   uploadDocumentForm: UntypedFormGroup;
   /** Upload Document Data */
@@ -41,11 +45,9 @@ export class UploadDocumentDialogComponent implements OnInit {
    * @param {FormBuilder} formBuilder Form Builder
    * @param {any} data Dialog Data
    */
-  constructor(
-    public dialogRef: MatDialogRef<UploadDocumentDialogComponent>,
-    private formBuilder: UntypedFormBuilder,
-    @Inject(MAT_DIALOG_DATA) public data: any
-  ) {
+  constructor() {
+    const data = this.data;
+
     this.documentIdentifier = data.documentIdentifier;
     this.entityType = data.entityType;
     this.allowedDocumentTypes = data.allowedDocumentTypes || [];

src/app/clients/clients-view/custom-dialogs/upload-image-dialog/upload-image-dialog.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { MatDialogRef, MatDialogTitle, MatDialogActions, MatDialogClose } from '@angular/material/dialog';
 import { FileUploadComponent } from '../../../../shared/file-upload/file-upload.component';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
@@ -20,14 +20,11 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class UploadImageDialogComponent {
+  dialogRef = inject<MatDialogRef<UploadImageDialogComponent>>(MatDialogRef);
+
   /** Client Image */
   image: File;
 
-  /**
-   * @param {MatDialogRef} dialogRef Component reference to dialog.
-   */
-  constructor(public dialogRef: MatDialogRef<UploadImageDialogComponent>) {}
-
   /**
    * Sets file form control value.
    * @param {any} $event file change event.

src/app/clients/clients-view/custom-dialogs/upload-signature-dialog/upload-signature-dialog.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { MatDialogRef, MatDialogTitle, MatDialogActions, MatDialogClose } from '@angular/material/dialog';
 import { FileUploadComponent } from '../../../../shared/file-upload/file-upload.component';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
@@ -20,14 +20,11 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class UploadSignatureDialogComponent {
+  dialogRef = inject<MatDialogRef<UploadSignatureDialogComponent>>(MatDialogRef);
+
   /** Client Signature */
   signature: File;
 
-  /**
-   * @param {MatDialogRef} dialogRef Component reference to dialog.
-   */
-  constructor(public dialogRef: MatDialogRef<UploadSignatureDialogComponent>) {}
-
   /**
    * Sets file form control value.
    * @param {any} $event file change event.

src/app/clients/clients-view/custom-dialogs/view-signature-dialog/view-signature-dialog.component.html

@@ -1,19 +1,27 @@
 <h1 mat-dialog-title>{{ 'labels.heading.View Client Signature' | translate }}</h1>
 
-<div *ngIf="signatureId" mat-dialog-content>
-  <img [src]="signatureImage" alt="Signature" />
-</div>
+@if (signatureId) {
+  <div mat-dialog-content>
+    <img [src]="signatureImage" alt="Signature" />
+  </div>
+}
 
-<div *ngIf="!signatureId" mat-dialog-content>
-  <p>{{ 'labels.text.Client Signature is not provided.' | translate }}</p>
-</div>
+@if (!signatureId) {
+  <div mat-dialog-content>
+    <p>{{ 'labels.text.Client Signature is not provided.' | translate }}</p>
+  </div>
+}
 
 <mat-dialog-actions align="end">
   <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Close' | translate }}</button>
-  <button mat-raised-button *ngIf="signatureId" color="warn" [mat-dialog-close]="{ delete: true }">
-    {{ 'labels.buttons.Delete' | translate }}
-  </button>
-  <button mat-raised-button *ngIf="!signatureId" color="primary" [mat-dialog-close]="{ upload: true }">
-    {{ 'labels.buttons.Upload' | translate }}
-  </button>
+  @if (signatureId) {
+    <button mat-raised-button color="warn" [mat-dialog-close]="{ delete: true }">
+      {{ 'labels.buttons.Delete' | translate }}
+    </button>
+  }
+  @if (!signatureId) {
+    <button mat-raised-button color="primary" [mat-dialog-close]="{ upload: true }">
+      {{ 'labels.buttons.Upload' | translate }}
+    </button>
+  }
 </mat-dialog-actions>

src/app/clients/clients-view/custom-dialogs/view-signature-dialog/view-signature-dialog.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, Inject, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import {
   MatDialogRef,
   MAT_DIALOG_DATA,
@@ -35,6 +35,14 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ViewSignatureDialogComponent implements OnInit {
+  dialogRef = inject<MatDialogRef<ViewSignatureDialogComponent>>(MatDialogRef);
+  private clientsService = inject(ClientsService);
+  private sanitizer = inject(DomSanitizer);
+  data = inject<{
+    documents: any[];
+    id: string;
+  }>(MAT_DIALOG_DATA);
+
   /** Id of client signature in documents */
   signatureId: any;
   /** Signature Image */
@@ -46,12 +54,7 @@ export class ViewSignatureDialogComponent implements OnInit {
    * @param {MatDialogRef} dialogRef Component reference to dialog.
    * @param {any} data Documents data
    */
-  constructor(
-    public dialogRef: MatDialogRef<ViewSignatureDialogComponent>,
-    private clientsService: ClientsService,
-    private sanitizer: DomSanitizer,
-    @Inject(MAT_DIALOG_DATA) public data: { documents: any[]; id: string }
-  ) {
+  constructor() {
     const signature = this.data.documents.find((document: any) => document.name === 'clientSignature') || {};
     this.signatureId = signature.id;
     this.clientId = this.data.id;