Upgrade to Angular 16

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

src/app/savings/savings-account-stepper/savings-account-preview-step/savings-account-preview-step.component.html

@@ -1,41 +1,40 @@
-<div fxLayout="row wrap" fxLayout.lt-md="column">
-  <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Details' | translate }}</h3>
+<div class="responsive-column">
+  <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Details' | translate }}</h3>
 
-  <mat-divider fxFlexFill></mat-divider>
-
-  <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.Product' | translate }}</span>
-    <span fxFlex="60%">{{
+  <mat-divider class="flex-fill"></mat-divider>
+  <div class="flex-fill layout-row">
+    <span class="flex-40">{{ 'labels.inputs.Product' | translate }}</span>
+    <span class="flex-60">{{
       savingsAccount.productId | find: savingsAccountTemplate.productOptions : 'id' : 'name'
     }}</span>
   </div>
 
-  <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.Submitted On' | translate }}</span>
-    <span fxFlex="60%">{{ savingsAccount.submittedOnDate | dateFormat }}</span>
+  <div class="flex-fill layout-row">
+    <span class="flex-40">{{ 'labels.inputs.Submitted On' | translate }}</span>
+    <span class="flex-60">{{ savingsAccount.submittedOnDate | dateFormat }}</span>
   </div>
 
-  <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.External Id' | translate }}</span>
-    <span fxFlex="60%" *ngIf="savingsAccount.externalId">
+  <div class="flex-fill layout-row">
+    <span class="flex-40">{{ 'labels.inputs.External Id' | translate }}</span>
+    <span class="flex-60" *ngIf="savingsAccount.externalId">
       <mifosx-external-identifier externalId="{{ savingsAccount.externalId }}"></mifosx-external-identifier>
     </span>
-    <span fxFlex="60%" *ngIf="!savingsAccount.externalId">
+    <span class="flex-60" *ngIf="!savingsAccount.externalId">
       {{ 'labels.inputs.Unassigned' | translate }}
     </span>
   </div>
 
-  <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.Field Officer' | translate }}</span>
-    <span fxFlex="60%">{{
+  <div class="flex-fill layout-row">
+    <span class="flex-40">{{ 'labels.inputs.Field Officer' | translate }}</span>
+    <span class="flex-60">{{
       savingsAccount.fieldOfficerId | find: savingsAccountProductTemplate.fieldOfficerOptions : 'id' : 'displayName'
     }}</span>
   </div>
 
   <ng-container *ngIf="activeClientMembers">
-    <h3 class="mat-h3" fxFlexFill class="margin-t">{{ 'labels.heading.Client Members' | translate }}</h3>
-    <mat-divider fxFlexFill></mat-divider>
-    <div fxFlex="60%">
+    <h3 class="mat-h3 margin-t flex-fill">{{ 'labels.heading.Client Members' | translate }}</h3>
+    <mat-divider class="flex-fill"></mat-divider>
+    <div class="flex-60">
       <table mat-table #membersTable [dataSource]="dataSource">
         <!-- ID Column -->
         <ng-container matColumnDef="id">
@@ -55,28 +54,27 @@
     </div>
   </ng-container>
 
-  <h3 class="mat-h3" fxFlexFill class="margin-t">{{ 'labels.heading.Terms' | translate }}</h3>
+  <h3 class="mat-h3 margin-t flex-fill">{{ 'labels.heading.Terms' | translate }}</h3>
 
-  <mat-divider fxFlexFill></mat-divider>
-
-  <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.Currency' | translate }}</span>
-    <span fxFlex="60%">{{ savingsAccountTermsForm.get('currencyCode').value }}</span>
+  <mat-divider class="flex-fill"></mat-divider>
+  <div class="flex-fill layout-row">
+    <span class="flex-40">{{ 'labels.inputs.Currency' | translate }}</span>
+    <span class="flex-60">{{ savingsAccountTermsForm.get('currencyCode').value }}</span>
   </div>
 
-  <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.Decimal Places' | translate }}</span>
-    <span fxFlex="60%">{{ savingsAccountTermsForm.get('decimal').value }}</span>
+  <div class="flex-fill layout-row">
+    <span class="flex-40">{{ 'labels.inputs.Decimal Places' | translate }}</span>
+    <span class="flex-60">{{ savingsAccountTermsForm.get('decimal').value }}</span>
   </div>
 
-  <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.Nominal Annual Interest' | translate }}:</span>
-    <span fxFlex="60%">{{ savingsAccount.nominalAnnualInterestRate | formatNumber }} %</span>
+  <div class="flex-fill layout-row">
+    <span class="flex-40">{{ 'labels.inputs.Nominal Annual Interest' | translate }}:</span>
+    <span class="flex-60">{{ savingsAccount.nominalAnnualInterestRate | formatNumber }} %</span>
   </div>
 
-  <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.Interest Compounding Period' | translate }}:</span>
-    <span fxFlex="60%">{{
+  <div class="flex-fill layout-row">
+    <span class="flex-40">{{ 'labels.inputs.Interest Compounding Period' | translate }}:</span>
+    <span class="flex-60">{{
       getCatalogTranslation(
         savingsAccount.interestCompoundingPeriodType
           | find: savingsAccountProductTemplate.interestCompoundingPeriodTypeOptions : 'id' : 'value'
@@ -84,9 +82,9 @@
     }}</span>
   </div>
 
-  <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.Interest Posting Period' | translate }}:</span>
-    <span fxFlex="60%">{{
+  <div class="flex-fill layout-row">
+    <span class="flex-40">{{ 'labels.inputs.Interest Posting Period' | translate }}:</span>
+    <span class="flex-60">{{
       getCatalogTranslation(
         savingsAccount.interestPostingPeriodType
           | find: savingsAccountProductTemplate.interestPostingPeriodTypeOptions : 'id' : 'value'
@@ -94,9 +92,9 @@
     }}</span>
   </div>
 
-  <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.Interest Calculated using' | translate }}:</span>
-    <span fxFlex="60%">{{
+  <div class="flex-fill layout-row">
+    <span class="flex-40">{{ 'labels.inputs.Interest Calculated using' | translate }}:</span>
+    <span class="flex-60">{{
       getCatalogTranslation(
         savingsAccount.interestCalculationType
           | find: savingsAccountProductTemplate.interestCalculationTypeOptions : 'id' : 'value'
@@ -104,9 +102,9 @@
     }}</span>
   </div>
 
-  <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.Days in Year' | translate }}:</span>
-    <span fxFlex="60%">{{
+  <div class="flex-fill layout-row">
+    <span class="flex-40">{{ 'labels.inputs.Days in Year' | translate }}:</span>
+    <span class="flex-60">{{
       getCatalogTranslation(
         savingsAccount.interestCalculationDaysInYearType
           | find: savingsAccountProductTemplate.interestCalculationDaysInYearTypeOptions : 'id' : 'value'
@@ -114,19 +112,19 @@
     }}</span>
   </div>
 
-  <div fxFlexFill *ngIf="savingsAccount.minRequiredOpeningBalance">
-    <span fxFlex="40%">{{ 'labels.inputs.Minimum Opening Balance' | translate }}:</span>
-    <span fxFlex="60%">{{ savingsAccount.minRequiredOpeningBalance | formatNumber }}</span>
+  <div class="flex-fill layout-row" *ngIf="savingsAccount.minRequiredOpeningBalance">
+    <span class="flex-40">{{ 'labels.inputs.Minimum Opening Balance' | translate }}:</span>
+    <span class="flex-60">{{ savingsAccount.minRequiredOpeningBalance | formatNumber }}</span>
   </div>
 
-  <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.Apply Withdrawal Fee for Transfers' | translate }}:</span>
-    <span fxFlex="60%">{{ savingsAccount.withdrawalFeeForTransfers | yesNo }}</span>
+  <div class="flex-fill layout-row">
+    <span class="flex-40">{{ 'labels.inputs.Apply Withdrawal Fee for Transfers' | translate }}:</span>
+    <span class="flex-60">{{ savingsAccount.withdrawalFeeForTransfers | yesNo }}</span>
   </div>
 
-  <div fxFlexFill *ngIf="savingsAccount.lockinPeriodFrequency">
-    <span fxFlex="40%">{{ 'labels.inputs.Lock-in Period' | translate }}:</span>
-    <span fxFlex="60%">{{
+  <div class="flex-fill layout-row" *ngIf="savingsAccount.lockinPeriodFrequency">
+    <span class="flex-40">{{ 'labels.inputs.Lock-in Period' | translate }}:</span>
+    <span class="flex-60">{{
       getCatalogTranslation(
         savingsAccount.lockinPeriodFrequency +
           ' ' +
@@ -136,42 +134,41 @@
     }}</span>
   </div>
 
-  <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.Is Overdraft Allowed' | translate }}:</span>
-    <span fxFlex="60%">{{ savingsAccount.allowOverdraft | yesNo }}</span>
+  <div class="flex-fill layout-row">
+    <span class="flex-40">{{ 'labels.inputs.Is Overdraft Allowed' | translate }}:</span>
+    <span class="flex-60">{{ savingsAccount.allowOverdraft | yesNo }}</span>
   </div>
 
-  <div fxFlexFill *ngIf="savingsAccount.minOverdraftForInterestCalculation">
-    <span fxFlex="40%">{{ 'labels.inputs.Minimum Overdraft Required for Interest Calculation' | translate }}:</span>
-    <span fxFlex="60%">{{ savingsAccount.minOverdraftForInterestCalculation | formatNumber }}</span>
+  <div class="flex-fill layout-row" *ngIf="savingsAccount.minOverdraftForInterestCalculation">
+    <span class="flex-40">{{ 'labels.inputs.Minimum Overdraft Required for Interest Calculation' | translate }}:</span>
+    <span class="flex-60">{{ savingsAccount.minOverdraftForInterestCalculation | formatNumber }}</span>
   </div>
 
-  <div fxFlexFill *ngIf="savingsAccount.nominalAnnualInterestRateOverdraft">
-    <span fxFlex="40%">{{ 'labels.inputs.Nominal Annual Interest for Overdraft' | translate }}:</span>
-    <span fxFlex="60%">{{ savingsAccount.nominalAnnualInterestRateOverdraft | formatNumber }} %</span>
+  <div class="flex-fill layout-row" *ngIf="savingsAccount.nominalAnnualInterestRateOverdraft">
+    <span class="flex-40">{{ 'labels.inputs.Nominal Annual Interest for Overdraft' | translate }}:</span>
+    <span class="flex-60">{{ savingsAccount.nominalAnnualInterestRateOverdraft | formatNumber }} %</span>
   </div>
 
-  <div fxFlexFill *ngIf="savingsAccount.overdraftLimit">
-    <span fxFlex="40%">{{ 'labels.inputs.Maximum Overdraft Amount Limit' | translate }}:</span>
-    <span fxFlex="60%">{{ savingsAccount.overdraftLimit | formatNumber }}</span>
+  <div class="flex-fill layout-row" *ngIf="savingsAccount.overdraftLimit">
+    <span class="flex-40">{{ 'labels.inputs.Maximum Overdraft Amount Limit' | translate }}:</span>
+    <span class="flex-60">{{ savingsAccount.overdraftLimit | formatNumber }}</span>
   </div>
 
-  <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.Enforce Minimum Balance' | translate }}:</span>
-    <span fxFlex="60%">{{ savingsAccount.enforceMinRequiredBalance | yesNo }}</span>
+  <div class="flex-fill layout-row">
+    <span class="flex-40">{{ 'labels.inputs.Enforce Minimum Balance' | translate }}:</span>
+    <span class="flex-60">{{ savingsAccount.enforceMinRequiredBalance | yesNo }}</span>
   </div>
 
-  <div fxFlexFill *ngIf="savingsAccount.minRequiredBalance">
-    <span fxFlex="40%">{{ 'labels.inputs.Minimum Balance' | translate }}:</span>
-    <span fxFlex="60%">{{ savingsAccount.minRequiredBalance }}</span>
+  <div class="flex-fill layout-row" *ngIf="savingsAccount.minRequiredBalance">
+    <span class="flex-40">{{ 'labels.inputs.Minimum Balance' | translate }}:</span>
+    <span class="flex-60">{{ savingsAccount.minRequiredBalance }}</span>
   </div>
 
-  <div fxFlexFill *ngIf="savingsAccount.charges.length" fxLayout="row wrap" fxLayout.lt-md="column">
-    <h3 class="mat-h3" fxFlexFill>{{ 'labels.inputs.Charges' | translate }}</h3>
+  <div *ngIf="savingsAccount.charges.length" class="layout-row-wrap responsive-column flex-fill">
+    <h3 class="mat-h3 flex-fill">{{ 'labels.inputs.Charges' | translate }}</h3>
 
-    <mat-divider fxFlexFill></mat-divider>
-
-    <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="savingsAccount.charges">
+    <mat-divider class="flex-fill"></mat-divider>
+    <table class="flex-fill mat-elevation-z1" mat-table [dataSource]="savingsAccount.charges">
       <ng-container matColumnDef="name">
         <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Name' | translate }}</th>
         <td mat-cell *matCellDef="let charge">
@@ -239,7 +236,7 @@
   </div>
 </div>
 
-<div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
+<div class="layout-row responsive-column align-center gap-2px margin-t">
   <button mat-raised-button matStepperPrevious>
     <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
     {{ 'labels.buttons.Previous' | translate }}