Upgrade to Angular 16

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

src/app/deposits/fixed-deposits/fixed-deposit-account-view/charges-tab/charges-tab.component.html

@@ -1,5 +1,5 @@
 <div class="tab-container mat-typography">
-  <div fxLayout="row" fxLayoutAlign="start">
+  <div class="layout-row align-start">
     <div class="m-b-10">
       <h3>{{ 'labels.heading.All Charges' | translate }}</h3>
     </div>

src/app/deposits/fixed-deposits/fixed-deposit-account-view/fixed-deposit-account-view.component.html

@@ -1,5 +1,5 @@
 <mat-card class="account-card">
-  <mat-card-header fxLayout="column" class="header">
+  <mat-card-header class="header layout-column">
     <mat-card-title-group class="header-title-group">
       <div class="profile-image-container">
         <div>
@@ -14,7 +14,7 @@
 
       <div class="mat-typography account-card-title">
         <mat-card-title>
-          <div fxFlex="60%">
+          <div class="flex-60">
             <h3>
               <i
                 class="fa fa-stop"
@@ -40,15 +40,14 @@
             *ngIf="
               !fixedDepositsAccountData.status.rejected && !fixedDepositsAccountData.status.submittedAndPendingApproval
             "
-            fxFlex="30%"
-            fxLayout="column"
+            class="layout-column flex-30"
           >
-            <h3 fxFlex="100%">{{ 'labels.heading.Account Overview' | translate }}</h3>
-            <table class="account-overview" fxFlex="100%">
+            <h3 class="flex-100">{{ 'labels.heading.Account Overview' | translate }}</h3>
+            <table class="account-overview flex-100">
               <tbody>
                 <tr>
-                  <td fxFlex="70%">{{ 'labels.inputs.Current Balance' | translate }}</td>
-                  <td fxFlex="30%" class="r-amount">
+                  <td class="flex-70">{{ 'labels.inputs.Current Balance' | translate }}</td>
+                  <td class="r-amount flex-30">
                     {{
                       fixedDepositsAccountData.summary.accountBalance
                         | currency: currency.code : 'symbol-narrow' : '1.2-2'
@@ -56,8 +55,8 @@
                   </td>
                 </tr>
                 <tr>
-                  <td fxFlex="70%">{{ 'labels.inputs.Deposit Amount' | translate }}</td>
-                  <td fxFlex="30%" class="r-amount">
+                  <td class="flex-70">{{ 'labels.inputs.Deposit Amount' | translate }}</td>
+                  <td class="r-amount flex-30">
                     {{ fixedDepositsAccountData.depositAmount | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
                   </td>
                 </tr>
@@ -65,9 +64,8 @@
             </table>
           </div>
 
-          <span fxFlex="auto"></span>
-
-          <div fxFlex="5%">
+          <span class="flex-auto"></span>
+          <div class="flex-5">
             <button
               mat-icon-button
               [matMenuTriggerFor]="accountMenu"
@@ -102,7 +100,7 @@
   </mat-card-header>
 
   <mat-card-content class="content">
-    <nav mat-tab-nav-bar class="navigation-tabs">
+    <nav mat-tab-nav-bar class="navigation-tabs" [tabPanel]="tabPanel">
       <a
         mat-tab-link
         [routerLink]="['./general']"
@@ -165,6 +163,8 @@
       </ng-container>
     </nav>
 
-    <router-outlet></router-outlet>
+    <mat-tab-nav-panel #tabPanel>
+      <router-outlet></router-outlet>
+    </mat-tab-nav-panel>
   </mat-card-content>
 </mat-card>

src/app/deposits/fixed-deposits/fixed-deposit-account-view/general-tab/general-tab.component.html

@@ -1,5 +1,5 @@
-<div class="fixed-deposits-account-tables" fxLayout="row" fxLayoutGap="2%">
-  <div fxFlex="49%" fxLayout="column" fxLayoutGap="4%">
+<div class="fixed-deposits-account-tables layout-row gap-2percent">
+  <div class="flex-49 layout-column gap-4percent">
     <div>
       <h4 class="table-headers">{{ 'labels.heading.Fixed Deposit Details' | translate }}</h4>
       <table>
@@ -104,7 +104,7 @@
     </div>
   </div>
 
-  <div fxFlex="49%">
+  <div class="flex-49">
     <div
       *ngIf="
         !fixedDepositsAccountData.status.rejected && !fixedDepositsAccountData.status.submittedAndPendingApproval;

src/app/deposits/fixed-deposits/fixed-deposit-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component.html

@@ -1,5 +1,5 @@
 <div class="tab-container mat-typography">
-  <div fxLayoutAlign="start">
+  <div class="align-start-center">
     <div class="m-b-20">
       <h3>{{ 'labels.heading.All Interest Rates' | translate }}</h3>
     </div>
@@ -60,19 +60,16 @@
           [attr.colspan]="chartSlabsDisplayedColumns.length"
         >
           <div
-            fxLayout="row wrap"
-            fxFlexFill
-            class="incentives"
+            class="layout-row-wrap flex-fill incentives"
             [@expandChartSlab]="chartSlabIndex === expandChartSlabIndex ? 'expanded' : 'collapsed'"
           >
-            <mat-card fxLayout="row wrap" fxFlexFill>
-              <h4 class="m-b-10" fxFlex="13%">
+            <mat-card class="layout-row-wrap flex-fill">
+              <h4 class="m-b-10 flex-13">
                 {{ 'labels.heading.Incentives' | translate }}
               </h4>
 
               <table
-                fxFlexFill
-                class="mat-elevation-z1"
+                class="flex-fill mat-elevation-z1"
                 mat-table
                 [dataSource]="chartSlab.incentives"
                 *ngIf="chartSlab.incentives?.length"

src/app/deposits/fixed-deposits/fixed-deposit-account-view/transactions-tab/transactions-tab.component.html

@@ -1,10 +1,10 @@
 <div class="tab-container mat-typography">
   <div class="mat-elevation-z1 m-b-25">
-    <div fxLayout="row" fxLayoutAlign="start">
+    <div class="layout-row align-start">
       <div class="m-b-20">
         <h3>{{ 'labels.heading.All Transactions' | translate }}</h3>
       </div>
-      <div class="action-button m-b-20" fxLayout="row" fxLayoutGap="20px" *ngIf="checkStatus()">
+      <div class="action-button m-b-20 layout-row gap-20px" *ngIf="checkStatus()">
         <mat-checkbox [formControl]="hideReversedParam" (click)="hideReversed()" class="accruals">
           {{ 'labels.inputs.Hide Reversed' | translate }}</mat-checkbox
         >

src/app/deposits/fixed-deposits/fixed-deposit-account-view/view-transaction/view-transaction.component.html

@@ -1,4 +1,4 @@
-<div fxLayoutAlign="end" class="container m-b-20" fxLayoutGap="2%">
+<div class="container m-b-20 align-end-center gap-2percent">
   <span *ngIf="allowUndo()">
     <button
       mat-raised-button
@@ -13,54 +13,54 @@
 <div class="container">
   <mat-card>
     <mat-card-content>
-      <div fxLayout="row wrap" class="content">
-        <div fxFlex="100%" [ngClass]="transactionColor()"></div>
+      <div class="layout-row-wrap">
+        <div class="flex-100" [ngClass]="transactionColor()"></div>
 
-        <div fxFlex="50%" class="mat-body-strong">
+        <div class="flex-50 mat-body-strong">
           {{ 'labels.inputs.Transaction Id' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ transactionData.id }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">
+        <div class="flex-50 mat-body-strong">
           {{ 'labels.inputs.Type' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ transactionData.transactionType.value }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">
+        <div class="flex-50 mat-body-strong">
           {{ 'labels.inputs.Transaction Date' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ transactionData.date | dateFormat }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">
+        <div class="flex-50 mat-body-strong">
           {{ 'labels.inputs.Currency' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ transactionData.currency.displayLabel }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">
+        <div class="flex-50 mat-body-strong">
           {{ 'labels.inputs.Amount' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ transactionData.amount | currency: transactionData.currency.code : 'symbol-narrow' : '1.2-2' }}
         </div>
 
-        <div fxFlex="50%" *ngIf="transactionData.note" class="mat-body-strong">
+        <div class="flex-50 mat-body-strong" *ngIf="transactionData.note">
           {{ 'labels.inputs.Note' | translate }}
         </div>
 
-        <div fxFlex="50%" *ngIf="transactionData.note">
+        <div class="flex-50" *ngIf="transactionData.note">
           {{ transactionData.note }}
         </div>
 
@@ -71,7 +71,7 @@
         </mifosx-transaction-payment-detail>
       </div>
 
-      <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="2%" fxLayout.lt-md="column">
+      <div class="layout-row layout-align-center gap-2percent column-on-mobile">
         <button type="button" mat-raised-button color="primary" [routerLink]="['../']">
           {{ 'labels.buttons.Back' | translate }}
         </button>