Upgrade to Angular 16

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

src/app/savings/saving-account-actions/activate-savings-account/activate-savings-account.component.html

@@ -2,26 +2,28 @@
   <mat-card>
     <form [formGroup]="activateSavingsAccountForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <mat-form-field fxFlex (click)="activatedOnDatePicker.open()">
-          <mat-label>{{ 'labels.inputs.Activated On Date' | translate }}</mat-label>
-          <input
-            matInput
-            [min]="minDate"
-            [max]="maxDate"
-            [matDatepicker]="activatedOnDatePicker"
-            required
-            formControlName="activatedOnDate"
-          />
-          <mat-datepicker-toggle matSuffix [for]="activatedOnDatePicker"></mat-datepicker-toggle>
-          <mat-datepicker #activatedOnDatePicker></mat-datepicker>
-          <mat-error *ngIf="activateSavingsAccountForm.controls.activatedOnDate.hasError('required')">
-            {{ 'labels.inputs.Activated On Date' | translate }} {{ 'labels.commons.is' | translate }}
-            <strong>{{ 'labels.commons.required' | translate }}</strong>
-          </mat-error>
-        </mat-form-field>
+        <div class="layout-column">
+          <mat-form-field class="flex-fill" (click)="activatedOnDatePicker.open()">
+            <mat-label>{{ 'labels.inputs.Activated On Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="activatedOnDatePicker"
+              required
+              formControlName="activatedOnDate"
+            />
+            <mat-datepicker-toggle matSuffix [for]="activatedOnDatePicker"></mat-datepicker-toggle>
+            <mat-datepicker #activatedOnDatePicker></mat-datepicker>
+            <mat-error *ngIf="activateSavingsAccountForm.controls.activatedOnDate.hasError('required')">
+              {{ 'labels.inputs.Activated On Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+          </mat-form-field>
+        </div>
       </mat-card-content>
 
-      <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]="['../../transactions']">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>

src/app/savings/saving-account-actions/add-charge-savings-account/add-charge-savings-account.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="savingsChargeForm" (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">
@@ -16,7 +16,7 @@
             </mat-error>
           </mat-form-field>
 
-          <div *ngIf="chargeDetails" fxLayout="column">
+          <div *ngIf="chargeDetails" class="layout-column">
             <mat-form-field>
               <mat-label>{{ 'labels.inputs.Amount' | translate }}</mat-label>
               <input type="number" required matInput formControlName="amount" />
@@ -90,7 +90,7 @@
           </div>
         </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]="['../../transactions']">
             {{ 'labels.buttons.Cancel' | translate }}
           </button>

src/app/savings/saving-account-actions/apply-annual-fees-savings-account/apply-annual-fees-savings-account.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="applyAnnualFeesForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field (click)="dueDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Annual Fees Transaction Date' | translate }}</mat-label>
             <input
@@ -32,7 +32,7 @@
         </div>
       </mat-card-content>
 
-      <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/savings/saving-account-actions/approve-savings-account/approve-savings-account.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="approveSavingsAccountForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field (click)="approvedOnDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Approved On Date' | translate }}</mat-label>
             <input
@@ -28,7 +28,7 @@
         </div>
       </mat-card-content>
 
-      <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/savings/saving-account-actions/close-savings-account/close-savings-account.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="closeSavingsAccountForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field (click)="closedOnDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Closed On Date' | translate }}</mat-label>
             <input
@@ -29,7 +29,7 @@
             {{ 'labels.inputs.Is Interest Posting required on closure date' | translate }}?
           </mat-checkbox>
 
-          <div *ngIf="closeSavingsAccountForm.controls['withdrawBalance'].value" fxLayout="column">
+          <div *ngIf="closeSavingsAccountForm.controls['withdrawBalance'].value" class="layout-column">
             <mat-form-field class="m-t-20" *ngIf="closeSavingsAccountForm.controls['amount']">
               <mat-label>{{ 'labels.inputs.Transaction Amount' | translate }}</mat-label>
               <input type="number" required matInput formControlName="amount" />
@@ -44,8 +44,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>
@@ -87,7 +87,7 @@
         </div>
       </mat-card-content>
 
-      <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/savings/saving-account-actions/manage-savings-account/manage-savings-account.component.html

@@ -4,7 +4,7 @@
     <h2 mat-title *ngIf="transactionType.blockaccount">{{ 'labels.heading.Block Savings Account' | translate }}</h2>
 
     <form [formGroup]="manageSavingsAccountForm" (ngSubmit)="submit()">
-      <mat-card-content fxLayout="column">
+      <mat-card-content class="layout-column">
         <mat-form-field>
           <mat-label>{{ 'labels.inputs.Reason' | translate }}</mat-label>
           <mat-select required formControlName="reasonForBlock">
@@ -18,7 +18,7 @@
           </mat-error>
         </mat-form-field>
 
-        <mat-form-field fxFlex (click)="transactionDatePicker.open()" *ngIf="transactionType.holdamount">
+        <mat-form-field class="flex-fill" (click)="transactionDatePicker.open()" *ngIf="transactionType.holdamount">
           <mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
           <input
             matInput
@@ -46,7 +46,7 @@
         </mifosx-input-amount>
       </mat-card-content>
 
-      <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]="['../../transactions']">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>

src/app/savings/saving-account-actions/post-interest-as-on-savings-account/post-interest-as-on-savings-account.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="postInterestSavingsAccountForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <mat-form-field fxFlex (click)="transactionDatePicker.open()">
+        <mat-form-field class="flex-fill" (click)="transactionDatePicker.open()">
           <mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
           <input
             matInput
@@ -21,7 +21,7 @@
         </mat-form-field>
       </mat-card-content>
 
-      <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/savings/saving-account-actions/reject-savings-account/reject-savings-account.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="rejectSavingsAccountForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field (click)="rejectedOnDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Rejected On Date' | translate }}</mat-label>
             <input
@@ -28,7 +28,7 @@
         </div>
       </mat-card-content>
 
-      <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/savings/saving-account-actions/savings-account-assign-staff/savings-account-assign-staff.component.html

@@ -2,8 +2,8 @@
   <mat-card>
     <form [formGroup]="savingsAssignStaffForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
-          <mat-form-field fxFlex="48%">
+        <div class="layout-column">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.To Savings Officer' | translate }}</mat-label>
             <mat-select formControlName="toSavingsOfficerId">
               <mat-option *ngFor="let officer of fieldOfficerData" [value]="officer.id">
@@ -32,7 +32,7 @@
         </div>
       </mat-card-content>
 
-      <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/savings/saving-account-actions/savings-account-transactions/savings-account-transactions.component.html

@@ -1,97 +1,99 @@
 <div class="container mat-elevation-z8">
   <mat-card>
-    <h2 mat-title *ngIf="transactionType.withdrawal">
+    <h2 mat-title *ngIf="transactionType.withdrawal" class="m-l-10">
       {{ 'labels.heading.Withdraw Money From Saving Account' | translate }}
     </h2>
-    <h2 mat-title *ngIf="transactionType.deposit">
+    <h2 mat-title *ngIf="transactionType.deposit" class="m-l-10">
       {{ 'labels.heading.Deposit Money To Saving Account' | translate }}
     </h2>
 
     <form [formGroup]="savingAccountTransactionForm" (ngSubmit)="submit()">
-      <mat-card-content fxLayout="column">
-        <mat-form-field (click)="dueDatePicker.open()">
-          <mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
-          <input
-            matInput
-            [min]="minDate"
-            [max]="maxDate"
-            [matDatepicker]="dueDatePicker"
-            formControlName="transactionDate"
-            required
-          />
-          <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
-          <mat-datepicker #dueDatePicker></mat-datepicker>
-          <mat-error *ngIf="savingAccountTransactionForm.controls.transactionDate.hasError('required')">
-            {{ 'labels.inputs.Transaction Date' | translate }} {{ 'labels.commons.is' | translate }}
-            <strong>{{ 'labels.commons.required' | translate }}</strong>
-          </mat-error>
-        </mat-form-field>
+      <mat-card-content>
+        <div class="layout-column">
+          <mat-form-field (click)="dueDatePicker.open()">
+            <mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="dueDatePicker"
+              formControlName="transactionDate"
+              required
+            />
+            <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
+            <mat-datepicker #dueDatePicker></mat-datepicker>
+            <mat-error *ngIf="savingAccountTransactionForm.controls.transactionDate.hasError('required')">
+              {{ 'labels.inputs.Transaction Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+          </mat-form-field>
 
-        <mifosx-input-amount
-          [currency]="currency"
-          [isRequired]="true"
-          [inputFormControl]="savingAccountTransactionForm.controls.transactionAmount"
-          [inputLabel]="'Transaction Amount'"
-        >
-        </mifosx-input-amount>
+          <mifosx-input-amount
+            [currency]="currency"
+            [isRequired]="true"
+            [inputFormControl]="savingAccountTransactionForm.controls.transactionAmount"
+            [inputLabel]="'Transaction Amount'"
+          >
+          </mifosx-input-amount>
 
-        <mat-form-field>
-          <mat-label>{{ 'labels.inputs.Payment Type' | translate }}</mat-label>
-          <mat-select required formControlName="paymentTypeId">
-            <mat-option *ngFor="let paymentType of paymentTypeOptions" [value]="paymentType.id">
-              {{ paymentType.name }}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
+          <mat-form-field>
+            <mat-label>{{ 'labels.inputs.Payment Type' | translate }}</mat-label>
+            <mat-select required formControlName="paymentTypeId">
+              <mat-option *ngFor="let paymentType of paymentTypeOptions" [value]="paymentType.id">
+                {{ paymentType.name }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
 
-        <div fxFlexFill>
-          <span fxFlex="75%" class="expandcollapsebutton m-l-10 m-t-40" (click)="addPaymentDetails()">
-            <mat-slide-toggle>
-              <div [className]="addPaymentDetailsFlag ? 'enabled' : 'disabled'">
-                <span class="m-l-10">{{ 'labels.inputs.Show Payment Details' | translate }}</span>
-              </div>
-            </mat-slide-toggle>
-          </span>
+          <div class="flex-fill">
+            <span class="expandcollapsebutton m-l-10 m-t-40 flex-75" (click)="addPaymentDetails()">
+              <mat-slide-toggle>
+                <div [className]="addPaymentDetailsFlag ? 'enabled' : 'disabled'">
+                  <span class="m-l-10">{{ 'labels.inputs.Show Payment Details' | translate }}</span>
+                </div>
+              </mat-slide-toggle>
+            </span>
+          </div>
+
+          <mat-form-field *ngIf="addPaymentDetailsFlag">
+            <mat-label>{{ 'labels.inputs.Account Number' | translate }}</mat-label>
+            <input type="number" formControlName="accountNumber" matInput />
+          </mat-form-field>
+
+          <mat-form-field *ngIf="addPaymentDetailsFlag">
+            <mat-label>{{ 'labels.inputs.Cheque' | translate }}</mat-label>
+            <input type="number" formControlName="checkNumber" matInput />
+          </mat-form-field>
+
+          <mat-form-field *ngIf="addPaymentDetailsFlag">
+            <mat-label>{{ 'labels.inputs.Routing Code' | translate }}</mat-label>
+            <input formControlName="routingCode" matInput />
+          </mat-form-field>
+
+          <mat-form-field *ngIf="addPaymentDetailsFlag">
+            <mat-label>{{ 'labels.inputs.Receipt Number' | translate }}</mat-label>
+            <input formControlName="receiptNumber" matInput />
+          </mat-form-field>
+
+          <mat-form-field *ngIf="addPaymentDetailsFlag">
+            <mat-label>{{ 'labels.inputs.Bank' | translate }}</mat-label>
+            <input formControlName="bankNumber" matInput />
+          </mat-form-field>
+
+          <mat-form-field>
+            <mat-label>{{ 'labels.inputs.Notes' | translate }}</mat-label>
+            <textarea formControlName="note" matInput cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
+          </mat-form-field>
+
+          <mat-card-actions class="layout-row layout-xs-column layout-align-center gap-5px">
+            <button type="button" mat-raised-button [routerLink]="['../../transactions']">
+              {{ 'labels.buttons.Cancel' | translate }}
+            </button>
+            <button mat-raised-button color="primary" [disabled]="!savingAccountTransactionForm.valid">
+              {{ 'labels.buttons.Submit' | translate }}
+            </button>
+          </mat-card-actions>
         </div>
-
-        <mat-form-field *ngIf="addPaymentDetailsFlag">
-          <mat-label>{{ 'labels.inputs.Account Number' | translate }}</mat-label>
-          <input type="number" formControlName="accountNumber" matInput />
-        </mat-form-field>
-
-        <mat-form-field *ngIf="addPaymentDetailsFlag">
-          <mat-label>{{ 'labels.inputs.Cheque' | translate }}</mat-label>
-          <input type="number" formControlName="checkNumber" matInput />
-        </mat-form-field>
-
-        <mat-form-field *ngIf="addPaymentDetailsFlag">
-          <mat-label>{{ 'labels.inputs.Routing Code' | translate }}</mat-label>
-          <input formControlName="routingCode" matInput />
-        </mat-form-field>
-
-        <mat-form-field *ngIf="addPaymentDetailsFlag">
-          <mat-label>{{ 'labels.inputs.Receipt Number' | translate }}</mat-label>
-          <input formControlName="receiptNumber" matInput />
-        </mat-form-field>
-
-        <mat-form-field *ngIf="addPaymentDetailsFlag">
-          <mat-label>{{ 'labels.inputs.Bank' | translate }}</mat-label>
-          <input formControlName="bankNumber" matInput />
-        </mat-form-field>
-
-        <mat-form-field>
-          <mat-label>{{ 'labels.inputs.Notes' | translate }}</mat-label>
-          <textarea formControlName="note" matInput cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
-        </mat-form-field>
-
-        <mat-card-actions fxLayoutGap="5px" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center">
-          <button type="button" mat-raised-button [routerLink]="['../../transactions']">
-            {{ 'labels.buttons.Cancel' | translate }}
-          </button>
-          <button mat-raised-button color="primary" [disabled]="!savingAccountTransactionForm.valid">
-            {{ 'labels.buttons.Submit' | translate }}
-          </button>
-        </mat-card-actions>
       </mat-card-content>
     </form>
   </mat-card>

src/app/savings/saving-account-actions/savings-account-unassign-staff/savings-account-unassign-staff.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="savingsUnassignStaffForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <mat-form-field fxFlex (click)="unassignedDatePicker.open()">
+        <mat-form-field class="flex-fill" (click)="unassignedDatePicker.open()">
           <mat-label>{{ 'labels.inputs.Unassignment Date' | translate }}</mat-label>
           <input
             matInput
@@ -21,7 +21,7 @@
         </mat-form-field>
       </mat-card-content>
 
-      <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/savings/saving-account-actions/undo-approval-savings-account/undo-approval-savings-account.component.html

@@ -2,13 +2,13 @@
   <mat-card>
     <form [formGroup]="undoApprovalSavingsAccountForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <mat-form-field fxFlex>
+        <mat-form-field class="flex-fill">
           <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
           <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
         </mat-form-field>
       </mat-card-content>
 
-      <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/savings/saving-account-actions/withdraw-by-client-savings-account/withdraw-by-client-savings-account.component.html

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