Upgrade to Angular 16

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

src/app/reports/common-resolvers/reports.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 { ReportsService } from '../reports.service';
  * Reports data resolver.
  */
 @Injectable()
-export class ReportsResolver implements Resolve<Object> {
+export class ReportsResolver {
   /**
    * @param {ReportsService} reportsService Reports service.
    */

src/app/reports/common-resolvers/run-report.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 { ReportsService } from '../reports.service';
  * Reports data resolver.
  */
 @Injectable()
-export class RunReportResolver implements Resolve<Object> {
+export class RunReportResolver {
   /**
    * @param {ReportsService} reportsService Reports service.
    */

src/app/reports/reports.component.html

@@ -1,6 +1,6 @@
 <div class="container">
-  <div fxLayout="row" fxLayoutGap="20px">
-    <mat-form-field fxFlex>
+  <div class="layout-row gap-20px">
+    <mat-form-field class="flex-fill">
       <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
       <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>

src/app/reports/run-report/chart/chart.component.html

@@ -1,4 +1,4 @@
-<div class="m-b-20" fxLayoutAlign="end">
+<div class="m-b-20 layout-align-end">
   <mat-button-toggle-group aria-label="Select Chart Type">
     <mat-button-toggle value="Bar" (click)="setBarChart(inputData)">{{
       'labels.buttons.Bar Chart' | translate

src/app/reports/run-report/run-report.component.html

@@ -1,10 +1,10 @@
 <div class="container input">
   <mat-card *ngIf="!isCollapsed">
     <form [formGroup]="reportForm">
-      <mat-card-content fxLayout="column">
+      <mat-card-content class="layout-column">
         <ng-container *ngFor="let param of paramData" [ngSwitch]="param.displayType">
           <ng-container *ngIf="reportForm.contains(param.name)">
-            <mat-form-field fxFlex *ngSwitchCase="'text'">
+            <mat-form-field class="flex-fill" *ngSwitchCase="'text'">
               <mat-label>{{ param.label }}</mat-label>
               <input matInput required [formControlName]="param.name" />
               <mat-error *ngIf="reportForm.controls[param.name].hasError('required')">
@@ -13,7 +13,7 @@
               </mat-error>
             </mat-form-field>
 
-            <mat-form-field fxFlex *ngSwitchCase="'date'" (click)="runReportDatePicker.open()">
+            <mat-form-field class="flex-fill" *ngSwitchCase="'date'" (click)="runReportDatePicker.open()">
               <mat-label>{{ param.label }}</mat-label>
               <input
                 matInput
@@ -31,7 +31,7 @@
               </mat-error>
             </mat-form-field>
 
-            <mat-form-field fxFlex *ngSwitchCase="'select'">
+            <mat-form-field class="flex-fill" *ngSwitchCase="'select'">
               <mat-label>{{ param.label }}</mat-label>
               <mat-select required [formControlName]="param.name">
                 <mat-option *ngFor="let option of param.selectOptions" [value]="option">
@@ -46,7 +46,7 @@
           </ng-container>
         </ng-container>
 
-        <mat-form-field fxFlex>
+        <mat-form-field class="flex-fill">
           <mat-label>{{ 'labels.inputs.Decimal Places' | translate }}</mat-label>
           <mat-select [formControl]="decimalChoice">
             <mat-option value="0">0</mat-option>
@@ -57,7 +57,7 @@
           </mat-select>
         </mat-form-field>
 
-        <mat-form-field fxFlex *ngIf="isPentahoReport()">
+        <mat-form-field class="flex-fill" *ngIf="isPentahoReport()">
           <mat-label>{{ 'labels.inputs.Output Type' | translate }}</mat-label>
           <mat-select required formControlName="outputType">
             <mat-option *ngFor="let option of outputTypeOptions" [value]="option.value">
@@ -70,14 +70,14 @@
           </mat-error>
         </mat-form-field>
 
-        <div fxFlex="98%" *ngIf="exportToS3Allowed">
+        <div class="flex-98" *ngIf="exportToS3Allowed">
           <mat-checkbox labelPosition="after" formControlName="exportOutputToS3">
             {{ 'labels.text.Export output data to S3 repository' | translate }} [{{ exportToS3Repository }}]
           </mat-checkbox>
         </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]="['/reports']">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>

src/app/reports/run-report/table-and-sms/table-and-sms.component.html

@@ -1,6 +1,6 @@
 <div class="container">
   <div *ngIf="!hideOutput && !toBeExportedToRepo">
-    <div class="m-b-10" *ngIf="dataObject.report.type === 'Table'" fxLayoutGap="25px" fxLayoutAlign="end">
+    <div class="m-b-10 gap-25px align-end" *ngIf="dataObject.report.type === 'Table'">
       <button
         mat-raised-button
         color="primary"