Upgrade to Angular 16

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

src/app/loans/loans-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
@@ -42,8 +42,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>
@@ -77,7 +78,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/loans/loans-view/transactions/export-transactions/export-transactions.component.html

@@ -1,6 +1,6 @@
-<form class="m-t-20" fxLayout="column" [formGroup]="transactionsReportForm" (ngSubmit)="generate()">
-  <div fxLayout="row" fxLayoutGap="3%" fxLayoutAlign="center">
-    <mat-form-field fxFlex="30%" (click)="fromDatePicker.open()">
+<form class="layout-column m-t-20" [formGroup]="transactionsReportForm" (ngSubmit)="generate()">
+  <div class="layout-row layout-align-center gap-3percent">
+    <mat-form-field class="flex-fill" (click)="fromDatePicker.open()">
       <mat-label>{{ 'labels.inputs.From Date' | translate }}</mat-label>
       <input
         matInput
@@ -18,7 +18,7 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field fxFlex="30%" (click)="toDatePicker.open()">
+    <mat-form-field class="flex-fill flex-30" (click)="toDatePicker.open()">
       <mat-label>{{ 'labels.inputs.To Date' | translate }}</mat-label>
       <input
         matInput
@@ -37,7 +37,7 @@
     </mat-form-field>
   </div>
 
-  <div class="generate-button" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5%">
+  <div class="generate-button layout-row layout-xs-column layout-align-center gap-5percent">
     <button type="button" mat-raised-button [routerLink]="['../']">{{ 'labels.buttons.Cancel' | translate }}</button>
     <button mat-raised-button color="primary" [disabled]="!transactionsReportForm.valid">
       <fa-icon icon="cogs" class="m-r-10"></fa-icon>{{ 'labels.buttons.Generate Report' | translate }} &nbsp;

src/app/loans/loans-view/transactions/view-transaction/view-transaction.component.html

@@ -1,9 +1,4 @@
-<div
-  fxLayoutAlign="end"
-  class="container m-b-20 transaction-buttons"
-  fxLayoutGap="2%"
-  *ngIf="!transactionData.type.contra"
->
+<div class="container m-b-20 transaction-buttons layout-align-end gap-2percent" *ngIf="!transactionData.type.contra">
   <span *mifosxHasPermission="'ADJUST_LOAN'">
     <button mat-raised-button color="primary" [routerLink]="'edit'" [disabled]="!allowEdition">
       <fa-icon icon="edit" class="m-r-10"></fa-icon>{{ 'Edit' | translate }}
@@ -23,64 +18,64 @@
 <div class="container">
   <mat-card>
     <mat-card-content>
-      <div fxLayout="row wrap" class="content">
-        <div fxFlex="100%" [ngClass]="loanTransactionColor()"></div>
+      <div class="layout-row-wrap card-content">
+        <div class="flex-100" [ngClass]="loanTransactionColor()"></div>
 
-        <div fxFlex="50%" class="mat-body-strong">
+        <div class="flex-50 mat-body-strong">
           {{ 'Transaction Id' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ transactionData.id }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong" *ngIf="transactionData.toLoanTransactionRelation">
+        <div class="flex-50 mat-body-strong" *ngIf="transactionData.toLoanTransactionRelation">
           {{ 'Repayment Transaction' | translate }}
         </div>
 
-        <div fxFlex="50%" *ngIf="transactionData.toLoanTransactionRelation">
+        <div class="flex-50" *ngIf="transactionData.toLoanTransactionRelation">
           <a [href]="loanTransactionRelatedLink(transactionData.toLoanTransactionRelation.fromLoanTransaction)">
             {{ transactionData.toLoanTransactionRelation.fromLoanTransaction }}
           </a>
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">
+        <div class="flex-50 mat-body-strong">
           {{ 'Type' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ transactionData.type.value }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">
+        <div class="flex-50 mat-body-strong">
           {{ '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">
           {{ 'Currency' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ transactionData.currency.name }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">
+        <div class="flex-50 mat-body-strong">
           {{ '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.externalId">
+        <div class="flex-50 mat-body-strong" *ngIf="transactionData.externalId">
           {{ 'External Id' | translate }}
         </div>
 
-        <div fxFlex="50%" *ngIf="transactionData.externalId">
+        <div class="flex-50" *ngIf="transactionData.externalId">
           <mifosx-external-identifier
             externalId="{{ transactionData.externalId }}"
             completed="true"
@@ -89,7 +84,7 @@
 
         <mat-divider *ngIf="existTransactionRelations" [inset]="true"></mat-divider>
 
-        <div fxFlex="100%" class="mat-body-strong" *ngIf="existTransactionRelations">
+        <div class="mat-body-strong flex-100" *ngIf="existTransactionRelations">
           {{ 'Linked Transactions' | translate }}
           <br />
 
@@ -128,7 +123,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/loans/loans-view/transactions/view-transaction/view-transaction.component.scss

@@ -4,7 +4,7 @@
 .container {
   max-width: 37rem;
 
-  .content {
+  .card-content {
     div {
       margin: 1rem 0;
       word-wrap: break-word;