Upgrade to Angular 16

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

src/app/loans/loans-view/loan-account-actions/add-collateral/add-collateral.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="collateralForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Collateral Type' | translate }}</mat-label>
             <mat-select required formControlName="collateralTypeId">
@@ -31,7 +31,7 @@
           </mat-form-field>
         </div>
 
-        <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]="['../../loan-collateral']">
             {{ 'labels.buttons.Cancel' | translate }}
           </button>

src/app/loans/loans-view/loan-account-actions/add-interest-pause/add-interest-pause.component.html

@@ -1,11 +1,11 @@
 <div class="container mat-elevation-z8">
   <mat-card>
-    <div class="m-b-20" fxLayout="column" *ngIf="maturityDate">
+    <div class="m-b-20 layout-column" *ngIf="maturityDate">
       <span class="m-r-10">{{ 'Maturity Date' | translateKey: 'inputs' }} : {{ maturityDate | dateFormat }}</span>
     </div>
     <form [formGroup]="interestPauseLoanForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field (click)="startDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Start Date' | translate }}</mat-label>
             <input
@@ -41,7 +41,7 @@
           </mat-form-field>
         </div>
 
-        <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]="['../../general']">
             {{ 'labels.buttons.Cancel' | translate }}
           </button>

src/app/loans/loans-view/loan-account-actions/add-loan-charge/add-loan-charge.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="loanChargeForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Charge' | translate }}</mat-label>
             <mat-select required formControlName="chargeId">
@@ -54,7 +54,7 @@
           </mat-form-field>
         </div>
 
-        <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]="['../../general']">
             {{ 'labels.buttons.Cancel' | translate }}
           </button>

src/app/loans/loans-view/loan-account-actions/adjust-loan-charge/adjust-loan-charge.component.html

@@ -2,11 +2,11 @@
   <mat-card>
     <form [formGroup]="adjustLoanChargeForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field appearance="fill">
             <mat-label>{{ 'labels.inputs.Amount' | translate }}</mat-label>
             <span matTextSuffix class="m-l-10">{{ loanDetailsData.currency.code }}</span>
-            <span fxFlex="auto"></span>
+            <span class="flex-auto"></span>
             <input type="number" matInput required class="right-input" formControlName="amount" />
             <mat-error *ngIf="adjustLoanChargeForm.controls.amount.hasError('required')">
               {{ 'labels.inputs.Amount' | translate }} {{ 'labels.commons.is' | translate }}
@@ -28,8 +28,8 @@
             </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>
@@ -71,7 +71,7 @@
           </mat-form-field>
         </div>
 
-        <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/loans/loans-view/loan-account-actions/approve-loan/approve-loan.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="approveLoanForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field (click)="approvedDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Approved On' | translate }}</mat-label>
             <input
@@ -55,7 +55,7 @@
           </mat-form-field>
         </div>
 
-        <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]="['../../general']">
             {{ 'labels.buttons.Cancel' | translate }}
           </button>

src/app/loans/loans-view/loan-account-actions/asset-transfer-loan/asset-transfer-loan.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="saleLoanForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field (click)="settlementDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Settlement Date' | translate }}</mat-label>
             <input
@@ -45,7 +45,7 @@
           </mat-form-field>
         </div>
 
-        <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]="['../../general']">
             {{ 'labels.buttons.Cancel' | translate }}
           </button>

src/app/loans/loans-view/loan-account-actions/assign-loan-officer/assign-loan-officer.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="assignOfficerForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field>
             <mat-label> {{ 'labels.inputs.To Loan Officer' | translate }}</mat-label>
             <mat-select required formControlName="toLoanOfficerId">
@@ -35,7 +35,7 @@
           </mat-form-field>
         </div>
 
-        <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]="['../../general']">
             {{ 'labels.buttons.Cancel' | translate }}
           </button>

src/app/loans/loans-view/loan-account-actions/charge-off/charge-off.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="chargeoffLoanForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field (click)="transactionDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
             <input
@@ -45,7 +45,7 @@
           </mat-form-field>
         </div>
 
-        <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]="['../../general']">
             {{ 'labels.buttons.Cancel' | translate }}
           </button>

src/app/loans/loans-view/loan-account-actions/close-as-rescheduled/close-as-rescheduled.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="closeLoanForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field (click)="closedDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Closed On' | translate }}</mat-label>
             <input
@@ -27,7 +27,7 @@
           </mat-form-field>
         </div>
 
-        <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]="['../../general']">
             {{ 'labels.buttons.Cancel' | translate }}
           </button>

src/app/loans/loans-view/loan-account-actions/create-guarantor/create-guarantor.component.html

@@ -2,13 +2,13 @@
   <mat-card>
     <form [formGroup]="newGuarantorForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-checkbox labelPosition="before" formControlName="existingClient">
             {{ 'labels.inputs.Existing Client' | translate }}
           </mat-checkbox>
 
           <ng-container *ngIf="!showClientDetailsForm">
-            <mat-form-field fxFlex="30%">
+            <mat-form-field class="flex-30">
               <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
               <input matInput formControlName="name" [matAutocomplete]="clientsAutocomplete" />
               <mat-error *ngIf="newGuarantorForm.controls.name.hasError('required')">
@@ -121,7 +121,7 @@
           </ng-container>
         </div>
 
-        <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]="['../../general']">
             {{ 'labels.buttons.Cancel' | translate }}
           </button>

src/app/loans/loans-view/loan-account-actions/disburse-to-savings-account/disburse-to-savings-account.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="disbursementForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field (click)="disbursementDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Disbursement On' | translate }}</mat-label>
             <input
@@ -40,7 +40,7 @@
           </mat-form-field>
         </div>
 
-        <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]="['../../general']">
             {{ 'labels.buttons.Cancel' | translate }}
           </button>

src/app/loans/loans-view/loan-account-actions/disburse/disburse.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="disbursementLoanForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field (click)="actualDisbursementDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Disbursed On' | translate }}</mat-label>
             <input
@@ -43,8 +43,8 @@
             </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>
@@ -86,7 +86,7 @@
           </mat-form-field>
         </div>
 
-        <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]="['../../general']">
             {{ 'labels.buttons.Cancel' | translate }}
           </button>

src/app/loans/loans-view/loan-account-actions/edit-repayment-schedule/edit-repayment-schedule.component.html

@@ -1,17 +1,17 @@
 <div class="container mat-elevation-z8">
   <mat-card>
     <mat-card-content>
-      <div fxLayout="column" class="m-b-10">
+      <div class="m-b-10 layout-column">
         <mifosx-repayment-schedule-tab
           *ngIf="repaymentScheduleDetails"
-          fxFlex="100%"
+          class="flex-100"
           [repaymentScheduleDetails]="repaymentScheduleDetails"
           [forEditing]="true"
         >
         </mifosx-repayment-schedule-tab>
       </div>
 
-      <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]="['../../general']">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>

src/app/loans/loans-view/loan-account-actions/foreclosure/foreclosure.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="foreclosureForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field (click)="transactionsDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
             <input
@@ -52,7 +52,7 @@
           </mat-form-field>
         </div>
 
-        <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]="['../../general']">
             {{ 'labels.buttons.Cancel' | translate }}
           </button>

src/app/loans/loans-view/loan-account-actions/loan-credit-balance-refund/loan-credit-balance-refund.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="creditBalanceLoanForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field (click)="transactionDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
             <input
@@ -40,7 +40,7 @@
           </mat-form-field>
         </div>
 
-        <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]="['../../general']">
             {{ 'labels.buttons.Cancel' | translate }}
           </button>

src/app/loans/loans-view/loan-account-actions/loan-reaging/loan-reaging.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="reagingLoanForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Number of Installments' | translate }}</mat-label>
             <input type="number" matInput required formControlName="numberOfInstallments" />
@@ -51,7 +51,7 @@
           </mat-form-field>
         </div>
 
-        <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]="['../../general']">
             {{ 'labels.buttons.Cancel' | translate }}
           </button>

src/app/loans/loans-view/loan-account-actions/loan-reamortize/loan-reamortize.component.html

@@ -2,21 +2,21 @@
   <mat-card>
     <form [formGroup]="reamortizeLoanForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Reason' | translate }}</mat-label>
             <input matInput formControlName="note" />
           </mat-form-field>
         </div>
 
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.External Id' | translate }}</mat-label>
             <input matInput formControlName="externalId" />
           </mat-form-field>
         </div>
 
-        <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]="['../../general']">
             {{ 'labels.buttons.Cancel' | translate }}
           </button>

src/app/loans/loans-view/loan-account-actions/loan-reschedule/loan-reschedule.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="rescheduleLoanForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field (click)="rescheduleDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Reschedule from Installment On' | translate }}</mat-label>
             <input
@@ -111,7 +111,7 @@
           </ng-container>
         </div>
 
-        <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]="['../../general']">
             {{ 'labels.buttons.Cancel' | translate }}
           </button>

src/app/loans/loans-view/loan-account-actions/loan-screen-reports/loan-screen-reports.component.html

@@ -3,7 +3,7 @@
     <form [formGroup]="loanScreenReportForm" (ngSubmit)="generate()">
       <mat-card-content>
         <div>
-          <mat-form-field fxFlex>
+          <mat-form-field class="flex-fill">
             <mat-label>{{ 'labels.inputs.Loan Screen Reports' | translate }}</mat-label>
             <mat-select formControlName="templateId">
               <mat-option *ngFor="let template of templatesData" [value]="template.id">
@@ -17,7 +17,7 @@
           </mat-form-field>
         </div>
 
-        <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]="['../../general']">
             {{ 'labels.buttons.Cancel' | translate }}
           </button>
@@ -31,8 +31,8 @@
 </div>
 
 <div #output class="container">
-  <mat-card fxLayout="column" fxLayoutGap="3%">
-    <div fxLayoutAlign="end">
+  <mat-card class="layout-column gap-3percent">
+    <div class="layout-align-end">
       <button mat-stroked-button color="primary" [disabled]="!template" (click)="print()">
         <fa-icon icon="file" class="m-r-10"></fa-icon>
         {{ 'labels.buttons.Print' | translate }}

src/app/loans/loans-view/loan-account-actions/loans-account-close/loans-account-close.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="closeLoanForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field (click)="closedDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Closed On' | translate }}</mat-label>
             <input
@@ -27,7 +27,7 @@
           </mat-form-field>
         </div>
 
-        <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]="['../../general']">
             {{ 'labels.buttons.Cancel' | translate }}
           </button>

src/app/loans/loans-view/loan-account-actions/make-repayment/make-repayment.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="repaymentLoanForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field (click)="transactionDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
             <input
@@ -21,36 +21,36 @@
             </mat-error>
           </mat-form-field>
 
-          <div fxLayout="row wrap" class="content" *ngIf="showDetails()">
-            <div fxFlex="50%" class="mat-body-strong">
+          <div class="layout-row-wrap" *ngIf="showDetails()">
+            <div class="flex-50 mat-body-strong">
               {{ 'Principal' | translate }}
             </div>
 
-            <div fxFlex="50%" class="r-amount right-label">
+            <div class="flex-50 r-amount right-label">
               {{ dataObject.principalPortion | formatNumber }}
             </div>
 
-            <div fxFlex="50%" class="mat-body-strong">
+            <div class="flex-50 mat-body-strong">
               {{ 'Interest' | translate }}
             </div>
 
-            <div fxFlex="50%" class="r-amount right-label">
+            <div class="flex-50 r-amount right-label">
               {{ dataObject.interestPortion | formatNumber }}
             </div>
 
-            <div fxFlex="50%" class="mat-body-strong">
+            <div class="flex-50 mat-body-strong">
               {{ 'Fees' | translate }}
             </div>
 
-            <div fxFlex="50%" class="r-amount right-label">
+            <div class="flex-50 r-amount right-label">
               {{ dataObject.feeChargesPortion | formatNumber }}
             </div>
 
-            <div fxFlex="50%" class="mat-body-strong">
+            <div class="flex-50 mat-body-strong">
               {{ 'Penalties' | translate }}
             </div>
 
-            <div fxFlex="50%" class="r-amount right-label">
+            <div class="flex-50 r-amount right-label">
               {{ dataObject.penaltyChargesPortion | formatNumber }}
             </div>
           </div>
@@ -77,8 +77,8 @@
             </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>
@@ -120,7 +120,7 @@
           </mat-form-field>
         </div>
 
-        <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]="['../../general']">
             {{ 'labels.buttons.Cancel' | translate }}
           </button>

src/app/loans/loans-view/loan-account-actions/prepay-loan/prepay-loan.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="prepayLoanForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field (click)="transactionDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
             <input
@@ -21,36 +21,36 @@
             </mat-error>
           </mat-form-field>
 
-          <div fxLayout="row wrap" class="content">
-            <div fxFlex="50%" class="mat-body-strong">
+          <div class="layout-row-wrap">
+            <div class="flex-50 mat-body-strong">
               {{ 'Principal' | translate }}
             </div>
 
-            <div fxFlex="50%" class="r-amount right-label">
+            <div class="flex-50 r-amount right-label">
               {{ prepayData.principalPortion | formatNumber }}
             </div>
 
-            <div fxFlex="50%" class="mat-body-strong">
+            <div class="flex-50 mat-body-strong">
               {{ 'Interest' | translate }}
             </div>
 
-            <div fxFlex="50%" class="r-amount right-label">
+            <div class="flex-50 r-amount right-label">
               {{ prepayData.interestPortion | formatNumber }}
             </div>
 
-            <div fxFlex="50%" class="mat-body-strong">
+            <div class="flex-50 mat-body-strong">
               {{ 'Fees' | translate }}
             </div>
 
-            <div fxFlex="50%" class="r-amount right-label">
+            <div class="flex-50 r-amount right-label">
               {{ prepayData.feeChargesPortion | formatNumber }}
             </div>
 
-            <div fxFlex="50%" class="mat-body-strong">
+            <div class="flex-50 mat-body-strong">
               {{ 'Penalties' | translate }}
             </div>
 
-            <div fxFlex="50%" class="r-amount right-label">
+            <div class="flex-50 r-amount right-label">
               {{ prepayData.penaltyChargesPortion | formatNumber }}
             </div>
           </div>
@@ -77,8 +77,8 @@
             </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>
@@ -120,7 +120,7 @@
           </mat-form-field>
         </div>
 
-        <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]="['../../general']">
             {{ 'labels.buttons.Cancel' | translate }}
           </button>

src/app/loans/loans-view/loan-account-actions/recovery-repayment/recovery-repayment.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="recoveryRepaymentLoanForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field (click)="transactionDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
             <input
@@ -43,8 +43,8 @@
             </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>
@@ -86,7 +86,7 @@
           </mat-form-field>
         </div>
 
-        <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]="['../../general']">
             {{ 'labels.buttons.Cancel' | translate }}
           </button>

src/app/loans/loans-view/loan-account-actions/reject-loan/reject-loan.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="rejectLoanForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field (click)="rejectedDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Rejected On' | translate }}</mat-label>
             <input
@@ -27,7 +27,7 @@
           </mat-form-field>
         </div>
 
-        <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]="['../../general']">
             {{ 'labels.buttons.Cancel' | translate }}
           </button>

src/app/loans/loans-view/loan-account-actions/undo-approval/undo-approval.component.html

@@ -1,13 +1,13 @@
 <div class="container mat-elevation-z8">
   <mat-card>
     <mat-card-content>
-      <div fxLayout="column">
-        <mat-form-field fxFlex>
+      <div class="layout-column">
+        <mat-form-field class="flex-fill">
           <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
           <textarea matInput [formControl]="note"></textarea>
         </mat-form-field>
 
-        <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]="['../../general']">
             {{ 'labels.buttons.Cancel' | translate }}
           </button>

src/app/loans/loans-view/loan-account-actions/undo-disbursal/undo-disbursal.component.html

@@ -1,14 +1,14 @@
 <div class="container mat-elevation-z8">
   <mat-card>
     <mat-card-content>
-      <div fxLayout="column">
-        <mat-form-field fxFlex>
+      <div class="layout-column">
+        <mat-form-field class="flex-fill">
           <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
           <textarea matInput required [formControl]="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
         </mat-form-field>
       </div>
 
-      <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]="['../../general']">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>

src/app/loans/loans-view/loan-account-actions/view-guarantors/view-guarantors.component.html

@@ -1,7 +1,7 @@
 <div class="container mat-elevation-z8">
   <mat-card>
-    <div class="view-guarantors-account-tables" fxLayout="row" fxLayoutGap="2%">
-      <div fxFlex="49%">
+    <div class="view-guarantors-account-tables layout-row gap-2percent">
+      <div class="flex-49">
         <table>
           <tbody>
             <tr>
@@ -37,7 +37,7 @@
         </table>
       </div>
 
-      <div fxFlex="49%">
+      <div class="flex-49">
         <table>
           <tbody>
             <tr>
@@ -71,16 +71,16 @@
       </div>
     </div>
 
-    <div fxFlexFill *ngIf="guarantorDetails" fxLayout="row wrap" fxLayout.lt-md="column">
+    <div *ngIf="guarantorDetails" class="layout-row-wrap responsive-column flex-fill">
       <!-- guarantors details table -->
       <div class="heading-content">
-        <div fxLayout="column" fxFlex="50%">
+        <div class="layout-column flex-50">
           <div class="heading-name">
             <h3>{{ 'labels.heading.Guarantors Details' | translate }}</h3>
           </div>
         </div>
-        <div fxLayout="column" fxFlex="50%">
-          <div fxLayout="row" fxLayoutAlign="flex-end">
+        <div class="layout-column flex-50">
+          <div class="layout-row align-flex-end">
             <button mat-raised-button class="f-right" color="primary" (click)="toggleGuarantorsDetailsOverview()">
               {{ showDeletedGuarantorsAccounts ? 'Hide Deleted Guarantors' : 'Show Deleted Guarantors' }}
             </button>
@@ -89,7 +89,7 @@
       </div>
 
       <table
-        fxFlexFill
+        class="flex-fill"
         mat-table
         [dataSource]="guarantorDetails | accountsFilter: 'guarantor' : showDeletedGuarantorsAccounts"
       >

src/app/loans/loans-view/loan-account-actions/waive-interest/waive-interest.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="loanInterestForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field (click)="interestDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Interest waived on' | translate }}</mat-label>
             <input
@@ -35,7 +35,7 @@
           </mat-form-field>
         </div>
 
-        <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]="['../../general']">
             {{ 'labels.buttons.Cancel' | translate }}
           </button>

src/app/loans/loans-view/loan-account-actions/withdrawn-by-client/withdrawn-by-client.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="withdrawnByClientLoanForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field (click)="withdrawnOnDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Withdrawn On' | translate }}</mat-label>
             <input
@@ -27,7 +27,7 @@
           </mat-form-field>
         </div>
 
-        <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]="['../../../general']">
             {{ 'labels.buttons.Cancel' | translate }}
           </button>

src/app/loans/loans-view/loan-account-actions/write-off-page/write-off-page.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <mat-card-content>
       <form [formGroup]="writeOffForm">
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field (click)="writeOffDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Write off on' | translate }}</mat-label>
             <input
@@ -33,7 +33,7 @@
         </div>
       </form>
 
-      <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]="['../../general']">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>