Upgrade to Angular 16

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

src/app/organization/adhoc-query/adhoc-query-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 { OrganizationService } from 'app/organization/organization.service';
  * Adhoc Query template data resolver.
  */
 @Injectable()
-export class AdhocQueryTemplateResolver implements Resolve<Object> {
+export class AdhocQueryTemplateResolver {
   /**
    * @param {OrganizationService} organizationService Organization service.
    */

src/app/organization/adhoc-query/adhoc-query.component.html

@@ -1,4 +1,4 @@
-<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" [routerLink]="['create']" *mifosxHasPermission="'CREATE_ADHOC'">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
     {{ 'labels.buttons.Create AdHoc Query' | translate }}
@@ -6,8 +6,8 @@
 </div>
 
 <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/organization/adhoc-query/common-resolvers/adhoc-queries.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 { OrganizationService } from '../../organization.service';
  * Adhoc Queries data resolver.
  */
 @Injectable()
-export class AdhocQueriesResolver implements Resolve<Object> {
+export class AdhocQueriesResolver {
   /**
    * @param {OrganizationService} organizationService Organization service.
    */

src/app/organization/adhoc-query/common-resolvers/adhoc-query-and-template.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 { OrganizationService } from 'app/organization/organization.service';
  * Adhoc Query and template data resolver.
  */
 @Injectable()
-export class AdhocQueryAndTemplateResolver implements Resolve<Object> {
+export class AdhocQueryAndTemplateResolver {
   /**
    * @param {OrganizationService} organizationService Organization service.
    */

src/app/organization/adhoc-query/common-resolvers/adhoc-query.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 { OrganizationService } from 'app/organization/organization.service';
  * Adhoc Query data resolver.
  */
 @Injectable()
-export class AdhocQueryResolver implements Resolve<Object> {
+export class AdhocQueryResolver {
   /**
    * @param {OrganizationService} organizationService Organization service.
    */

src/app/organization/adhoc-query/create-adhoc-query/create-adhoc-query.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="adhocQueryForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
             <input matInput required formControlName="name" />
@@ -76,7 +76,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/organization/adhoc-query/edit-adhoc-query/edit-adhoc-query.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="editAdhocQueryForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
             <input matInput required formControlName="name" />
@@ -76,7 +76,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/organization/adhoc-query/view-adhoc-query/view-adhoc-query.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" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_ADHOC'">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
     {{ 'labels.buttons.Edit' | translate }}
@@ -12,52 +12,52 @@
 <div class="container">
   <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.name' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ adhocQueryData.name }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">
+        <div class="flex-50 mat-body-strong">
           {{ 'labels.inputs.Query' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ adhocQueryData.query }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">
+        <div class="flex-50 mat-body-strong">
           {{ 'labels.inputs.Table Affected' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ adhocQueryData.tableName }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong" *ngIf="adhocQueryData.reportRunFrequency">
+        <div class="flex-50 mat-body-strong" *ngIf="adhocQueryData.reportRunFrequency">
           {{ 'labels.inputs.Report Run Frequency' | translate }}
         </div>
 
-        <div fxFlex="50%" *ngIf="adhocQueryData.reportRunFrequency">
+        <div class="flex-50" *ngIf="adhocQueryData.reportRunFrequency">
           {{ reportRunFrequency }}
         </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">
           {{ adhocQueryData.isActive === true ? 'Active' : 'Inactive' }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">
+        <div class="flex-50 mat-body-strong">
           {{ 'labels.inputs.Created By' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ adhocQueryData.createdBy }}
         </div>
       </div>