Upgrade to Angular 16

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

src/app/savings/savings-account-view/transactions/edit-transaction/edit-transaction.component.html

@@ -1,7 +1,7 @@
 <div class="container">
   <mat-card>
     <form [formGroup]="editTransactionForm" (ngSubmit)="submit()">
-      <mat-card-content fxLayout="column">
+      <mat-card-content class="layout-column">
         <mat-form-field (click)="dueDatePicker.open()">
           <mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
           <input
@@ -37,8 +37,9 @@
           </mat-select>
         </mat-form-field>
 
-        <div fxFlexFill>
-          <span fxFlex="75%" class="expandcollapsebutton m-l-10 m-t-40" (click)="addPaymentDetails()">
+        <div class="flex-fill">
+          <span class="expandcollapsebutton m-l-10 m-t-40 flex-75">
+            (click)="addPaymentDetails()">
             <mat-slide-toggle>
               <div [className]="showPaymentDetails ? 'enabled' : 'disabled'">
                 <span class="m-l-10">{{ 'labels.inputs.Show Payment Details' | translate }}</span>
@@ -72,7 +73,7 @@
           <input formControlName="bankNumber" matInput />
         </mat-form-field>
 
-        <mat-card-actions fxLayoutGap="5px" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center">
+        <mat-card-actions class="layout-row layout-xs-column layout-align-center gap-5px">
           <button type="button" mat-raised-button [routerLink]="['../']">
             {{ 'labels.buttons.Cancel' | translate }}
           </button>

src/app/savings/savings-account-view/transactions/view-transaction/savings-transaction-general-tab/savings-transaction-general-tab.component.html

@@ -1,4 +1,4 @@
-<div fxLayoutAlign="end" class="container m-b-20" fxLayoutGap="2%">
+<div class="container transaction-buttons m-b-20 align-end-center gap-2percent" align="end">
   <span
     *ngIf="
       !(
@@ -48,54 +48,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 card-content">
+        <div class="flex-100" [ngClass]="transactionColor()"></div>
 
-        <div fxFlex="50%" class="mat-body-strong">
+        <div class="flex-50 mat-body-strong">
           {{ 'labels.inputs.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.Transaction Type' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ transactionData.transactionType.value | translateKey: 'catalogs' }}
         </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%" class="mat-body-strong" *ngIf="transactionData.note">
+        <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>
 
@@ -106,7 +106,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>

src/app/savings/savings-account-view/transactions/view-transaction/savings-transaction-general-tab/savings-transaction-general-tab.component.scss

@@ -4,7 +4,7 @@
 .container {
   max-width: 37rem;
 
-  .content {
+  .card-content {
     div {
       margin: 1rem 0;
       word-wrap: break-word;
@@ -17,6 +17,10 @@
   }
 }
 
+.transaction-buttons {
+  margin-top: 3%;
+}
+
 .active {
   background-color: $status-active;
   height: 4px;

src/app/savings/savings-account-view/transactions/view-transaction/view-transaction.component.html

@@ -1,5 +1,5 @@
 <div class="container">
-  <nav mat-tab-nav-bar class="navigation-tabs">
+  <nav mat-tab-nav-bar class="navigation-tabs" [tabPanel]="tabPanel">
     <a
       mat-tab-link
       [routerLink]="['./general']"
@@ -23,5 +23,7 @@
     </ng-container>
   </nav>
 
-  <router-outlet></router-outlet>
+  <mat-tab-nav-panel #tabPanel>
+    <router-outlet></router-outlet>
+  </mat-tab-nav-panel>
 </div>