Upgrade to Angular 16

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

src/app/collaterals/common-resolvers/client-collateral.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 { CollateralsService } from '../collaterals.service';
  * Client Collateral data resolver.
  */
 @Injectable()
-export class ClientCollateralResolver implements Resolve<Object> {
+export class ClientCollateralResolver {
   /**
    * @param {CollateralsService} collateralsService Collaterals service.
    */

src/app/collaterals/edit-collateral/edit-collateral.component.html

@@ -2,8 +2,8 @@
   <mat-card>
     <form [formGroup]="clientCollateralForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
-          <div fxLayout="column">
+        <div class="layout-column">
+          <div class="layout-column">
             <mat-form-field>
               <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
               <input matInput required formControlName="name" />
@@ -31,7 +31,7 @@
         </div>
       </mat-card-content>
 
-      <mat-card-actions fxLayoutGap="5px" fxLayout="row" fsLayout.xs="column" fxLayoutAlign="center">
+      <mat-card-actions class="layout-row layout-xs-column layout-align-center gap-5px">
         <button type="button" mat-raised-button [routerLink]="['../../']">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>

src/app/collaterals/view-collateral/view-collateral.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"
@@ -26,7 +26,7 @@
     <div class="tab-container mat-typography">
       <h3>{{ 'labels.heading.Client Collateral Details' | translate }}</h3>
 
-      <div fxLayout="row" fxLayoutGap="32px" class="group-details-container m-b-30">
+      <div class="layout-row gap-32px group-details-container m-b-30">
         <p>
           {{ 'labels.inputs.name' | translate }}: {{ clientCollateralData.name }}<br />
           {{ 'labels.inputs.Quantity' | translate }}: {{ clientCollateralData.quantity }}<br />