Upgrade to Angular 16

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

src/app/clients/clients-view/charges/charges-overview/charge-overview.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';
@@ -12,7 +12,7 @@ import { ClientsService } from '../../../clients.service';
  * Client Charges data resolver.
  */
 @Injectable()
-export class ClientChargeOverviewResolver implements Resolve<Object> {
+export class ClientChargeOverviewResolver {
   /**
    * @param {ClientsService} ClientsService Clients service.
    */

src/app/clients/clients-view/charges/client-pay-charges/client-pay-charges.component.html

@@ -1,7 +1,7 @@
 <div class="container mat-typography">
   <mat-card>
     <form [formGroup]="transactionForm" (ngSubmit)="submit()">
-      <div fxLayout="column">
+      <div class="layout-column">
         <mat-form-field>
           <mat-label> {{ 'labels.inputs.Amount' | translate }} </mat-label>
           <input matInput required autofocus formControlName="amount" />
@@ -29,7 +29,7 @@
         </mat-form-field>
       </div>
 
-      <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="5px">
+      <div class="layout-row align-center gap-5px">
         <button type="button" mat-raised-button [routerLink]="['../../..', 'general']">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>

src/app/clients/clients-view/charges/view-charge/view-charge.component.html

@@ -1,4 +1,4 @@
-<div fxLayout="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">
   <button mat-raised-button color="primary" [routerLink]="['pay']" *mifosxHasPermission="'PAY_CLIENTCHARGE'">
     <fa-icon icon="dollar-sign" class="m-r-10"></fa-icon>
     {{ 'labels.buttons.Pay' | translate }}
@@ -23,7 +23,7 @@
     <mat-divider></mat-divider>
 
     <mat-card-content>
-      <div class="share-account-tables p-t-20" fxLayout="row wrap" fxFlex="50%">
+      <div class="share-account-tables p-t-20 layout-row-wrap flex-50">
         <table>
           <tbody>
             <tr>
@@ -69,7 +69,7 @@
       </div>
     </mat-card-content>
 
-    <div fxLayout="row wrap" class="content">
+    <div class="layout-row-wrap">
       <h1>
         <b> {{ 'labels.heading.Transactions' | translate }} </b>
       </h1>
@@ -121,7 +121,7 @@
       </table>
     </div>
 
-    <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+    <mat-card-actions class="layout-row align-center gap-5px responsive-column">
       <button type="button" mat-raised-button [routerLink]="['../../', 'general']">
         {{ 'labels.buttons.Back' | translate }}
       </button>