Upgrade to Angular 16

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

src/app/organization/currencies/currencies.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">
   <div #buttonAddEdit class="in-block">
     <button mat-raised-button color="primary" [routerLink]="'manage'" *mifosxHasPermission="'UPDATE_CURRENCY'">
       <fa-icon icon="plus" class="m-r-10"></fa-icon>
@@ -8,8 +8,8 @@
 </div>
 
 <div class="container">
-  <div #filter fxLayout="row" fxLayoutGap="20px">
-    <mat-form-field fxFlex>
+  <div #filter 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>
@@ -38,7 +38,7 @@
 <ng-template #templateButtonAddEdit let-popover="popover">
   <h2>{{ 'labels.heading.Add/Edit Currency' | translate }}</h2>
   <p class="mw300">{{ 'labels.text.List of all currencies currently in use' | 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>
@@ -57,7 +57,7 @@
 
 <ng-template #templateFilter let-popover="popover">
   <h4>{{ 'labels.heading.Search bar to filter currencies.' | 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>
@@ -80,7 +80,7 @@
 
 <ng-template #templateTableCurrencies let-popover="popover">
   <h4>{{ 'labels.heading.List of currencies available.' | 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>

src/app/organization/currencies/currencies.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';
  * Currencies data resolver.
  */
 @Injectable()
-export class CurrenciesResolver implements Resolve<Object> {
+export class CurrenciesResolver {
   /**
    * @param {OrganizationService} organizationService Organization service.
    */

src/app/organization/currencies/manage-currencies/manage-currencies.component.html

@@ -4,13 +4,10 @@
       <form
         #formRef="ngForm"
         [formGroup]="currencyForm"
-        fxLayout="row"
-        fxLayoutAlign="start baseline"
-        fxLayoutGap="20px"
-        fxFlex="48%"
+        class="layout-row align-start-baseline gap-20px flex-48"
         (ngSubmit)="addCurrency()"
       >
-        <mat-form-field fxFlex="calc(90%-20px)">
+        <mat-form-field class="flex-fill flex-90-minus-20px">
           <mat-label>{{ 'labels.inputs.Currency' | translate }}</mat-label>
           <mat-select required formControlName="currency">
             <mat-option>
@@ -32,7 +29,7 @@
 
         <button
           mat-raised-button
-          fxFlex
+          class="flex-fill"
           color="primary"
           [disabled]="!currencyForm.valid"
           *mifosxHasPermission="'UPDATE_CURRENCY'"
@@ -43,18 +40,22 @@
     </div>
 
     <mat-grid-list cols="2" rowHeight="50px">
-      <mat-grid-tile *ngFor="let currency of selectedCurrencies; index as i">
-        <input matInput [value]="currency.name" />
+      <mat-grid-tile class="grid-tile-content" *ngFor="let currency of selectedCurrencies; index as i">
+        <div class="grid-container">
+          <div>
+            <button
+              mat-button
+              color="warn"
+              (click)="deleteCurrency(currency.code, i)"
+              *mifosxHasPermission="'UPDATE_CURRENCY'"
+            >
+              <fa-icon icon="trash"></fa-icon>
+            </button>
+          </div>
 
-        <div fxLayout="row" fxLayoutAlign="flex-start">
-          <button
-            mat-button
-            color="warn"
-            (click)="deleteCurrency(currency.code, i)"
-            *mifosxHasPermission="'UPDATE_CURRENCY'"
+          <span class="label m-l-10 p-t-5"
+            ><b>{{ currency.name }}</b></span
           >
-            <fa-icon icon="trash"></fa-icon>
-          </button>
         </div>
       </mat-grid-tile>
     </mat-grid-list>
@@ -69,7 +70,7 @@
       'labels.inputs.Currency Configuration' | translate
     }}</a>
   </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>

src/app/organization/currencies/manage-currencies/manage-currencies.component.scss

@@ -1,3 +1,20 @@
 .container {
   width: 74rem;
 }
+
+.currency-grid {
+  max-width: 40%;
+  justify-content: left !important;
+}
+
+mat-grid-tile {
+  justify-content: left !important;
+}
+
+.grid-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: left;
+  width: 100%;
+  height: 100%;
+}