Upgrade to Angular 16

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

src/app/system/configurations/global-configurations-tab/edit-configuration/edit-configuration.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="configurationForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Configuration Name' | translate }}</mat-label>
             <input matInput required formControlName="name" />
@@ -23,7 +23,7 @@
             <input matInput formControlName="stringValue" />
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%" (click)="configurationDatePicker.open()">
+          <mat-form-field class="flex-48" (click)="configurationDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Date Value' | translate }}</mat-label>
             <input
               matInput
@@ -38,7 +38,7 @@
         </div>
       </mat-card-content>
 
-      <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]="['../..']">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>

src/app/system/configurations/global-configurations-tab/global-configuration.resolver.ts

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

src/app/system/configurations/global-configurations-tab/global-configurations-tab.component.html

@@ -1,6 +1,6 @@
 <div class="container">
-  <div #filter fxLayout="row">
-    <mat-form-field fxFlex>
+  <div #filter class="layout-row">
+    <mat-form-field class="flex-fill">
       <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
       <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>
@@ -71,7 +71,7 @@
 
 <ng-template #templateFilter let-data let-popover="popover">
   <h4>{{ 'labels.heading.Search bar to filter configurations' | translate }}</h4>
-  <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>
@@ -95,7 +95,7 @@
       'labels.inputs.Global Configurations' | translate
     }}</a>
   </h4>
-  <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>

src/app/system/configurations/global-configurations-tab/global-configurations.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';
  * Configurations data resolver.
  */
 @Injectable()
-export class GlobalConfigurationsResolver implements Resolve<Object> {
+export class GlobalConfigurationsResolver {
   /**
    * @param {SystemService} systemService System service.
    */