Upgrade to Angular 16

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

src/app/accounting/financial-activity-mappings/create-financial-activity-mapping/create-financial-activity-mapping.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="financialActivityMappingForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Financial Activity' | translate }}</mat-label>
             <mat-select required formControlName="financialActivityId">
@@ -27,7 +27,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/accounting/financial-activity-mappings/create-financial-activity-mapping/financial-activity-mappings-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 { AccountingService } from '../../accounting.service';
  * Financial activity mappings template data resolver.
  */
 @Injectable()
-export class FinancialActivityMappingsTemplateResolver implements Resolve<Object> {
+export class FinancialActivityMappingsTemplateResolver {
   /**
    * @param {AccountingService} accountingService Accounting service.
    */

src/app/accounting/financial-activity-mappings/edit-financial-activity-mapping/edit-financial-activity-mapping.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="financialActivityMappingForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Financial Activity' | translate }}</mat-label>
             <mat-select required formControlName="financialActivityId">
@@ -23,7 +23,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/accounting/financial-activity-mappings/edit-financial-activity-mapping/financial-activity-mapping-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 { AccountingService } from '../../accounting.service';
  * Financial activity mapping and template data resolver.
  */
 @Injectable()
-export class FinancialActivityMappingAndTemplateResolver implements Resolve<Object> {
+export class FinancialActivityMappingAndTemplateResolver {
   /**
    * @param {AccountingService} accountingService Accounting service.
    */

src/app/accounting/financial-activity-mappings/financial-activity-mappings.component.html

@@ -1,4 +1,4 @@
-<div fxLayout="row" fxLayoutAlign="end" class="container m-b-20">
+<div class="layout-row align-end container m-b-20">
   <div #buttonDefineMapping>
     <button
       mat-raised-button
@@ -51,7 +51,7 @@
 <ng-template #templateButtonDefineMapping let-popover="popover">
   <h2>{{ 'labels.heading.Define New Mapping' | translate }}</h2>
   <p class="mw300">{{ 'labels.text.To define new mapping.' | translate }}</p>
-  <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>
@@ -77,7 +77,7 @@
       >{{ 'labels.heading.Accounts linked to Financial Activities' | 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/accounting/financial-activity-mappings/financial-activity-mappings.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 { AccountingService } from '../accounting.service';
  * Financial activity mappings data resolver.
  */
 @Injectable()
-export class FinancialActivityMappingsResolver implements Resolve<Object> {
+export class FinancialActivityMappingsResolver {
   /**
    * @param {AccountingService} accountingService Accounting service.
    */

src/app/accounting/financial-activity-mappings/view-financial-activity-mapping/financial-activity-mapping.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 { AccountingService } from '../../accounting.service';
  * Financial activity mapping data resolver.
  */
 @Injectable()
-export class FinancialActivityMappingResolver implements Resolve<Object> {
+export class FinancialActivityMappingResolver {
   /**
    * @param {AccountingService} accountingService Accounting service.
    */

src/app/accounting/financial-activity-mappings/view-financial-activity-mapping/view-financial-activity-mapping.component.html

@@ -1,4 +1,4 @@
-<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" class="container m-b-20">
+<div class="layout-row align-end gap-2percent container m-b-20">
   <button
     mat-raised-button
     color="primary"
@@ -22,23 +22,23 @@
 <div class="container">
   <mat-card>
     <mat-card-content>
-      <div fxLayout="row wrap" class="content">
-        <div fxFlex="50%" class="header">
+      <div class="layout-row-wrap">
+        <div class="flex-50 header">
           {{ 'labels.inputs.Financial Activity' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           ({{ financialActivityAccount?.financialActivityData.id }})
           {{
             'labels.accounting.financialActivity.' + financialActivityAccount?.financialActivityData.name | translate
           }}
         </div>
 
-        <div fxFlex="50%" class="header">
+        <div class="flex-50 header">
           {{ 'labels.inputs.Account Type' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{
             'labels.inputs.accounting.' + financialActivityAccount?.financialActivityData.mappedGLAccountType
               | translate
@@ -46,7 +46,7 @@
         </div>
 
         <mifosx-gl-account-display
-          fxFlex="100%"
+          class="flex-100"
           [glAccount]="financialActivityAccount?.glAccountData"
           [accountTitle]="'Account Name'"
         >
@@ -54,7 +54,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" color="primary" mat-raised-button [routerLink]="['../..']">
         {{ 'labels.buttons.Back' | translate }}
       </button>