Upgrade to Angular 16

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

src/app/home/dashboard/amount-collected-pie/amount-collected-pie.component.html

@@ -1,10 +1,10 @@
 <mat-card class="card">
   <mat-card-header class="header">
-    <h3 fxFlex="100%">
+    <h3 class="flex-100">
       <fa-icon icon="donate"></fa-icon>
       &nbsp;&nbsp; {{ 'labels.inputs.Amount Collected' | translate }}
       <div>
-        <mat-form-field id="office" fxFlex="94%">
+        <mat-form-field id="office" class="flex-94">
           <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
           <mat-select [formControl]="officeId">
             <mat-option *ngFor="let office of officeData" [value]="office.id">
@@ -21,7 +21,7 @@
     <div [ngStyle]="{ display: hideOutput ? 'none' : 'block' }">
       <canvas id="collection-pie" width="800" height="600"></canvas>
     </div>
-    <div *ngIf="showFallback" class="fallback" fxLayoutAlign="center center">
+    <div *ngIf="showFallback" class="fallback align-center-center">
       <p>{{ 'labels.text.No Data' | translate }}</p>
     </div>
   </mat-card-content>

src/app/home/dashboard/amount-disbursed-pie/amount-disbursed-pie.component.html

@@ -1,10 +1,10 @@
 <mat-card class="card">
   <mat-card-header class="header">
-    <h3 fxFlex="100%">
+    <h3 class="flex-100">
       <fa-icon icon="money-bill"></fa-icon>
       &nbsp;&nbsp; {{ 'labels.inputs.Amount Pending / Disbursed' | translate }}
       <div>
-        <mat-form-field id="office" fxFlex="94%">
+        <mat-form-field id="office" class="flex-94">
           <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
           <mat-select [formControl]="officeId">
             <mat-option *ngFor="let office of officeData" [value]="office.id">
@@ -21,7 +21,7 @@
     <div [ngStyle]="{ display: hideOutput ? 'none' : 'block' }">
       <canvas id="disbursement-pie" width="800" height="600"></canvas>
     </div>
-    <div *ngIf="showFallback" class="fallback" fxLayoutAlign="center center">
+    <div *ngIf="showFallback" class="fallback align-center-center">
       <p>{{ 'labels.text.No Data' | translate }}</p>
     </div>
   </mat-card-content>

src/app/home/dashboard/client-trends-bar/client-trends-bar.component.html

@@ -1,10 +1,10 @@
 <mat-card class="card">
   <mat-card-header class="header">
-    <h3 fxFlex="100%">
+    <h3 class="flex-100">
       <fa-icon icon="chart-line"></fa-icon>
       &nbsp;&nbsp; {{ 'labels.inputs.Client Trends' | translate }}
       <div>
-        <mat-form-field id="office" fxFlex="94%">
+        <mat-form-field id="office" class="flex-94">
           <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
           <mat-select [formControl]="officeId">
             <mat-option *ngFor="let office of officeData" [value]="office.id">

src/app/home/dashboard/dashboard.component.html

@@ -1,6 +1,6 @@
 <div class="container">
-  <mat-card class="card" fxLayout="column" fxLayoutGap="40px">
-    <div fxLayout="row" class="search">
+  <mat-card class="card layout-column gap-40px">
+    <div class="layout-row search">
       <mat-card-content>
         <mat-form-field>
           <mat-label>{{ 'labels.placeholders.Search Activity' | translate }}</mat-label>
@@ -15,13 +15,13 @@
       </mat-card-content>
     </div>
 
-    <div fxLayout="row" class="top-card">
+    <div class="layout-row top-card">
       <div class="trends-bar">
         <mifosx-client-trends-bar></mifosx-client-trends-bar>
       </div>
     </div>
 
-    <div fxLayout="row" class="bottom-card">
+    <div class="layout-row bottom-card">
       <div class="amount-disbursed">
         <mifosx-amount-disbursed-pie></mifosx-amount-disbursed-pie>
       </div>

src/app/home/home.component.html

@@ -1,4 +1,4 @@
-<div fxLayput="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
+<div class="layout-row align-end gap-2px responsive-column container m-b-20">
   <div #buttonDashboard class="in-block">
     <button mat-raised-button color="primary" [routerLink]="['/dashboard']">
       <fa-icon icon="tachometer-alt" class="m-r-10"></fa-icon>
@@ -14,7 +14,7 @@
     </mat-card-header>
 
     <mat-card-content #searchActivity>
-      <div fxLayout="column">
+      <div class="layout-column">
         <mat-form-field>
           <mat-label>{{ 'labels.placeholders.Search Activity' | translate }}</mat-label>
           <input matInput [matAutocomplete]="activitySearch" [formControl]="searchText" />
@@ -33,7 +33,7 @@
 </div>
 
 <ng-template #popoverButtons let-popover="popover" let-prev="prev" let-next="next">
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row align-end gap-2px responsive-column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>
@@ -59,7 +59,7 @@
 <ng-template #templateButtonDashboard let-popover="popover">
   <h2>{{ 'labels.heading.Dashboard' | translate }}</h2>
   <p class="mw300">{{ 'labels.text.This will navigate the user to the dashboard component.' | translate }}</p>
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row align-end gap-2px responsive-column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>
@@ -79,7 +79,7 @@
 <ng-template #templateSearchActivity let-popover="popover">
   <h2>{{ 'labels.heading.Search Activity' | translate }}</h2>
   <p class="mw300">{{ 'labels.text.This will navigate the user to the searched activity.' | translate }}</p>
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row align-end gap-2px responsive-column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>