Upgrade to Angular 16

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

src/app/system/codes/view-code/code-values.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 { SystemService } from '../../system.service';
  * Code Values data resolver.
  */
 @Injectable()
-export class CodeValuesResolver implements Resolve<Object> {
+export class CodeValuesResolver {
   /**
    * @param {SystemService} systemService System service.
    */

src/app/system/codes/view-code/view-code.component.html

@@ -1,4 +1,4 @@
-<div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px" fxLayout.xs="column">
+<div class="container m-b-20 layout-row align-end layout-xs-column gap-20px">
   <button mat-raised-button color="primary" (click)="addCodeValueRow()" *mifosxHasPermission="'CREATE_CODEVALUE'">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
     {{ 'labels.buttons.Add Code Value' | translate }}
@@ -26,8 +26,8 @@
     <form [formGroup]="codeValuesForm">
       <mat-card-content>
         <div formArrayName="codeValues" *ngFor="let codeValue of codeValues.controls; let i = index">
-          <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" [formGroupName]="i">
-            <mat-form-field fxFlex="20%">
+          <div class="flex-fill layout-row-wrap gap-2percent responsive-column" [formGroupName]="i">
+            <mat-form-field class="flex-fill flex-20">
               <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
               <input required matInput formControlName="name" />
               <mat-error *ngIf="codeValues.at(i).controls.name.hasError('required')">
@@ -36,12 +36,12 @@
               </mat-error>
             </mat-form-field>
 
-            <mat-form-field fxFlex="22%">
+            <mat-form-field class="flex-fill flex-22">
               <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
               <input matInput formControlName="description" />
             </mat-form-field>
 
-            <mat-form-field fxFlex="18%">
+            <mat-form-field class="flex-fill flex-18">
               <mat-label>{{ 'labels.inputs.Position' | translate }}</mat-label>
               <input required matInput formControlName="position" type="number" />
               <mat-error *ngIf="codeValues.at(i).controls.position.hasError('required')">
@@ -50,13 +50,13 @@
               </mat-error>
             </mat-form-field>
 
-            <div class="active-wrapper" fxFlex="8%">
+            <div class="active-wrapper flex-8">
               <mat-checkbox formControlName="isActive" class="active">{{
                 'labels.inputs.Active' | translate
               }}</mat-checkbox>
             </div>
 
-            <div fxLayoutGap="2%" fxFlex="22%" class="options-wrapper">
+            <div class="options-wrapper gap-2percent flex-22">
               <span *ngIf="codeValueRowStatus[i] === 'edit'">
                 <button
                   mat-stroked-button