Upgrade to Angular 16

Merge `angular-update-16` into `dev` branch

src/app/organization/bulk-import/bulk-import.component.html

@@ -1,8 +1,8 @@
 <!-- TODO: Refactor Permissions -->
 <div class="container">
   <mat-card>
-    <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px">
-      <div fxFlex="50%">
+    <div class="layout-row responsive-column gap-20px">
+      <div class="flex-50">
         <mat-nav-list>
           <mat-list-item *mifosxHasPermission="'READ_OFFICE'">
             <mat-icon matListIcon [routerLink]="['Offices']">
@@ -109,7 +109,7 @@
         </mat-nav-list>
       </div>
 
-      <div fxFlex="50%">
+      <div class="flex-50">
         <mat-nav-list>
           <mat-list-item *mifosxHasPermission="'READ_OFFICE'">
             <mat-icon matListIcon [routerLink]="['Employees']">

src/app/organization/bulk-import/bulk-import.resolver.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -15,7 +15,7 @@ import { BulkImports } from './view-bulk-import/bulk-imports';
  * Bulk Imports data resolver.
  */
 @Injectable()
-export class BulkImportResolver implements Resolve<Object> {
+export class BulkImportResolver {
   bulkImportsArray = BulkImports;
 
   /**

src/app/organization/bulk-import/view-bulk-import/view-bulk-import.component.html

@@ -1,6 +1,6 @@
 <div class="container">
-  <div fxLayoutGap="2%" class="m-b-20">
-    <mat-card fxLayout="column" fxLayoutGap="2%" fxFlex="50%">
+  <div class="gap-2percent m-b-20">
+    <mat-card class="layout-column gap-2percent flex-50">
       <h3>
         <strong>{{ bulkImport.name }} {{ 'labels.heading.Template' | translate }}</strong>
       </h3>
@@ -8,7 +8,7 @@
       <form [formGroup]="bulkImportForm">
         <mat-card-content>
           <div *ngIf="bulkImport.formFields >= 1">
-            <mat-form-field fxFlex>
+            <mat-form-field class="flex-fill">
               <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
               <mat-select formControlName="officeId">
                 <mat-option *ngFor="let office of officeData" [value]="office.id">
@@ -19,7 +19,7 @@
           </div>
 
           <div *ngIf="bulkImport.formFields >= 2">
-            <mat-form-field fxFlex>
+            <mat-form-field class="flex-fill">
               <mat-label>{{ 'labels.inputs.Staff' | translate }}</mat-label>
               <mat-select formControlName="staffId">
                 <mat-option *ngFor="let staff of staffData" [value]="staff.id">
@@ -30,7 +30,7 @@
           </div>
 
           <div *ngIf="bulkImport.formFields === 3">
-            <mat-form-field fxFlex>
+            <mat-form-field class="flex-fill">
               <mat-label>{{ 'labels.inputs.Legal Form' | translate }}</mat-label>
               <mat-select required formControlName="legalForm">
                 <mat-option value="Entity">{{ 'labels.inputs.Entity' | translate }}</mat-option>
@@ -41,7 +41,7 @@
         </mat-card-content>
       </form>
 
-      <div fxFlex="13%">
+      <div class="flex-13">
         <button
           mat-raised-button
           color="primary"
@@ -53,7 +53,7 @@
       </div>
     </mat-card>
 
-    <mat-card fxLayout="column" fxLayoutGap="2%" fxFlex="50%">
+    <mat-card class="layout-column gap-2percent flex-50">
       <h3>
         <strong>{{ bulkImport.name }}</strong>
       </h3>
@@ -66,13 +66,13 @@
         'labels.text.Please retain the value Entity/Person in the filename.' | translate
       }}</mat-hint>
 
-      <div fxFlex="13%">
+      <div class="flex-13">
         <button mat-raised-button color="primary" [disabled]="!template" (click)="uploadTemplate()">
           <i class="fa fa-upload"></i>&nbsp;&nbsp;{{ 'labels.buttons.Upload' | translate }}
         </button>
       </div>
 
-      <div *ngIf="bulkImport.formFields >= 2" fxFlex class="cover"></div>
+      <div *ngIf="bulkImport.formFields >= 2" class="flex cover"></div>
     </mat-card>
   </div>
 
@@ -83,7 +83,7 @@
       </h3>
     </div>
 
-    <div class="m-b-10" fxLayoutAlign="end">
+    <div class="m-b-10 layout-align-end">
       <button mat-raised-button color="primary" (click)="refreshDocuments()">
         <i class="fa fa-repeat"></i>&nbsp;&nbsp;{{ 'labels.buttons.Refresh' | translate }}
       </button>