Upgrade to Angular 16

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

src/app/system/audit-trails/audit-trail-search-template.resolver.ts

@@ -1,6 +1,5 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +11,7 @@ import { SystemService } from '../system.service';
  * Audit Trail Search Template data resolver.
  */
 @Injectable()
-export class AuditTrailSearchTemplateResolver implements Resolve<Object> {
+export class AuditTrailSearchTemplateResolver {
   /**
    * @param {SystemService} systemService System service.
    */

src/app/system/audit-trails/audit-trails.component.html

@@ -1,17 +1,17 @@
-<div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
+<div class="container m-b-20 layout-row align-end gap-20px">
   <button mat-raised-button color="primary" (click)="downloadCSV()">
     <fa-icon icon="file" class="m-r-10"></fa-icon>
     {{ 'labels.buttons.Download CSV' | translate }}
   </button>
 </div>
 
-<div class="container" fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-  <mat-form-field fxFlex="48%">
+<div class="container layout-row-wrap gap-2px responsive-column">
+  <mat-form-field class="flex-48">
     <mat-label>{{ 'labels.inputs.Resource ID' | translate }}</mat-label>
     <input matInput [formControl]="resourceId" />
   </mat-form-field>
 
-  <mat-form-field fxFlex="48%">
+  <mat-form-field class="flex-48">
     <mat-label>{{ 'labels.inputs.Status' | translate }}</mat-label>
     <mat-select [formControl]="processingResult" (selectionChange)="applyFilter($event.value, 'processingResult')">
       <mat-option
@@ -23,41 +23,41 @@
     </mat-select>
   </mat-form-field>
 
-  <mat-form-field fxFlex="48%">
+  <mat-form-field class="flex-48">
     <mat-label>{{ 'labels.inputs.User' | translate }}</mat-label>
     <input matInput [formControl]="user" [matAutocomplete]="userNameAutocomplete" />
   </mat-form-field>
 
-  <mat-form-field fxFlex="48%">
+  <mat-form-field class="flex-48">
     <mat-label>{{ 'labels.inputs.Action' | translate }}</mat-label>
     <input matInput [formControl]="actionName" [matAutocomplete]="actionNameAutocomplete" />
   </mat-form-field>
 
-  <mat-form-field fxFlex="48%">
+  <mat-form-field class="flex-48">
     <mat-label>{{ 'labels.inputs.Entity' | translate }}</mat-label>
     <input matInput [formControl]="entityName" [matAutocomplete]="entityNameAutocomplete" />
   </mat-form-field>
 
-  <mat-form-field fxFlex="48%">
+  <mat-form-field class="flex-48">
     <mat-label>{{ 'labels.inputs.Checker' | translate }}</mat-label>
     <input matInput [formControl]="checker" [matAutocomplete]="checkerAutocomplete" />
   </mat-form-field>
 
-  <mat-form-field fxFlex="48%" (click)="fromDatePicker.open()">
+  <mat-form-field class="flex-48" (click)="fromDatePicker.open()">
     <mat-label>{{ 'labels.inputs.Maker From Date' | translate }}</mat-label>
     <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="fromDatePicker" [formControl]="fromDate" />
     <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
     <mat-datepicker #fromDatePicker></mat-datepicker>
   </mat-form-field>
 
-  <mat-form-field fxFlex="48%" (click)="toDatePicker.open()">
+  <mat-form-field class="flex-48" (click)="toDatePicker.open()">
     <mat-label>{{ 'labels.inputs.Maker To Date' | translate }}</mat-label>
     <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="toDatePicker" [formControl]="toDate" />
     <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
     <mat-datepicker #toDatePicker></mat-datepicker>
   </mat-form-field>
 
-  <mat-form-field fxFlex="48%" (click)="checkedFromDatePicker.open()">
+  <mat-form-field class="flex-48" (click)="checkedFromDatePicker.open()">
     <mat-label>{{ 'labels.inputs.Checker From Date' | translate }}</mat-label>
     <input
       matInput
@@ -70,7 +70,7 @@
     <mat-datepicker #checkedFromDatePicker></mat-datepicker>
   </mat-form-field>
 
-  <mat-form-field fxFlex="48%" (click)="checkedToDatePicker.open()">
+  <mat-form-field class="flex-48" (click)="checkedToDatePicker.open()">
     <mat-label>{{ 'labels.inputs.Checked To Date' | translate }}</mat-label>
     <input
       matInput

src/app/system/audit-trails/view-audit/audit-trail.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';
  * Audit Trail data resolver.
  */
 @Injectable()
-export class AuditTrailResolver implements Resolve<Object> {
+export class AuditTrailResolver {
   /**
    * @param {SystemService} systemService System service.
    */

src/app/system/audit-trails/view-audit/view-audit.component.html

@@ -1,85 +1,85 @@
-<div class="container" fxLayout="row" fxLayoutAlign="space-between" fxLayoutGap.lt-md="4%" fxLayout.lt-md="column">
-  <div fxFlex="46%">
+<div class="container layout-row-wrap align-between responsive-column gap-4percent">
+  <div class="flex-46">
     <mat-card>
       <mat-card-content>
-        <div fxLayout="row wrap" class="content">
-          <div fxFlex="50%" class="mat-body-strong">
+        <div class="layout-row-wrap">
+          <div class="flex-50 mat-body-strong">
             {{ 'labels.inputs.ID' | translate }}
           </div>
 
-          <div fxFlex="50%">
+          <div class="flex-50">
             {{ auditTrailData.id }}
           </div>
 
-          <div fxFlex="50%" class="mat-body-strong">
+          <div class="flex-50 mat-body-strong">
             {{ 'labels.inputs.Status' | translate }}
           </div>
 
-          <div fxFlex="50%">
+          <div class="flex-50">
             {{ auditTrailData.processingResult }}
           </div>
 
-          <div fxFlex="50%" class="mat-body-strong">
+          <div class="flex-50 mat-body-strong">
             {{ 'labels.inputs.User' | translate }}
           </div>
 
-          <div fxFlex="50%">
+          <div class="flex-50">
             {{ auditTrailData.maker }}
           </div>
 
-          <div fxFlex="50%" class="mat-body-strong">
+          <div class="flex-50 mat-body-strong">
             {{ 'labels.inputs.Action' | translate }}
           </div>
 
-          <div fxFlex="50%">
+          <div class="flex-50">
             {{ auditTrailData.actionName }}
           </div>
 
-          <div fxFlex="50%" class="mat-body-strong">
+          <div class="flex-50 mat-body-strong">
             {{ 'labels.inputs.Entity' | translate }}
           </div>
 
-          <div fxFlex="50%">
+          <div class="flex-50">
             {{ auditTrailData.entityName }}
           </div>
 
-          <div fxFlex="50%" class="mat-body-strong">
+          <div class="flex-50 mat-body-strong">
             {{ 'labels.inputs.Resource ID' | translate }}
           </div>
 
-          <div fxFlex="50%">
+          <div class="flex-50">
             {{ auditTrailData.resourceId }}
           </div>
 
-          <div fxFlex="50%" class="mat-body-strong">
+          <div class="flex-50 mat-body-strong">
             {{ 'labels.inputs.Date' | translate }}
           </div>
 
-          <div fxFlex="50%">
+          <div class="flex-50">
             {{ auditTrailData.madeOnDate | dateFormat }}
           </div>
 
-          <div fxFlex="50%" class="mat-body-strong" *ngIf="auditTrailData.officeName">
+          <div class="flex-50 mat-body-strong" *ngIf="auditTrailData.officeName">
             {{ 'labels.inputs.Office' | translate }}
           </div>
 
-          <div fxFlex="50%" *ngIf="auditTrailData.officeName">
+          <div class="flex-50" *ngIf="auditTrailData.officeName">
             {{ auditTrailData.officeName }}
           </div>
 
-          <div fxFlex="50%" class="mat-body-strong" *ngIf="auditTrailData.savingsAccountNo">
+          <div class="flex-50 mat-body-strong" *ngIf="auditTrailData.savingsAccountNo">
             {{ 'labels.inputs.Savings Account No' | translate }}
           </div>
 
-          <div fxFlex="50%" *ngIf="auditTrailData.savingsAccountNo">
+          <div class="flex-50" *ngIf="auditTrailData.savingsAccountNo">
             {{ auditTrailData.savingsAccountNo }}
           </div>
 
-          <div fxFlex="50%" class="mat-body-strong" *ngIf="auditTrailData.groupLevelName">
+          <div class="flex-50 mat-body-strong" *ngIf="auditTrailData.groupLevelName">
             {{ 'labels.inputs.Group Level' | translate }}
           </div>
 
-          <div fxFlex="50%" *ngIf="auditTrailData.groupLevelName">
+          <div class="flex-50" *ngIf="auditTrailData.groupLevelName">
             {{ auditTrailData.groupLevelName }}
           </div>
         </div>
@@ -87,7 +87,7 @@
     </mat-card>
   </div>
 
-  <div fxFlex="46%">
+  <div class="flex-46">
     <table mat-table [dataSource]="dataSource" matSort>
       <ng-container matColumnDef="command">
         <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Command' | translate }}</th>