Upgrade to Angular 16

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

src/app/organization/fund-mapping/fund-mapping.component.html

@@ -1,7 +1,7 @@
 <mat-card class="container" *ngIf="!isCollapsed">
   <form [formGroup]="fundMappingForm" (ngSubmit)="submit()">
-    <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" fxLayoutAlign.gt-sm="start center">
-      <mat-form-field fxFlex="48%">
+    <div class="layout-row-wrap gap-2percent responsive-column align-start-center">
+      <mat-form-field class="flex-48">
         <mat-label>{{ 'labels.inputs.Loan Status' | translate }}</mat-label>
         <mat-select formControlName="loanStatus" multiple>
           <mat-option value="all">{{ 'labels.inputs.All' | translate }}</mat-option>
@@ -12,9 +12,9 @@
         </mat-select>
       </mat-form-field>
 
-      <span fxFlex="48%" fxHide.lt-md></span>
+      <span class="flex-48 hide-lt-md"></span>
 
-      <mat-form-field fxFlex="48%">
+      <mat-form-field class="flex-48">
         <mat-label>{{ 'labels.inputs.Product' | translate }}</mat-label>
         <mat-select formControlName="loanProducts" multiple>
           <mat-option *ngFor="let product of advanceSearchTemplate.loanProducts" [value]="product.id">
@@ -23,7 +23,7 @@
         </mat-select>
       </mat-form-field>
 
-      <mat-form-field fxFlex="48%">
+      <mat-form-field class="flex-48">
         <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
         <mat-select formControlName="offices" multiple>
           <mat-option *ngFor="let office of advanceSearchTemplate.offices" [value]="office.id">
@@ -32,7 +32,7 @@
         </mat-select>
       </mat-form-field>
 
-      <mat-form-field fxFlex="31%">
+      <mat-form-field class="flex-31">
         <mat-label>{{ 'labels.inputs.Date Type' | translate }}</mat-label>
         <mat-select required formControlName="loanDateOption">
           <mat-option value="approvalDate">{{ 'labels.inputs.Approval Date' | translate }}</mat-option>
@@ -41,7 +41,7 @@
         </mat-select>
       </mat-form-field>
 
-      <mat-form-field fxFlex="31%" (click)="fromDatePicker.open()">
+      <mat-form-field class="flex-fill flex-31" (click)="fromDatePicker.open()">
         <mat-label>{{ 'labels.inputs.From Date' | translate }}</mat-label>
         <input
           matInput
@@ -59,7 +59,7 @@
         </mat-error>
       </mat-form-field>
 
-      <mat-form-field fxFlex="31%" (click)="toDatePicker.open()">
+      <mat-form-field class="flex-fill flex-31" (click)="toDatePicker.open()">
         <mat-label>{{ 'labels.inputs.To Date' | translate }}</mat-label>
         <input
           matInput
@@ -78,22 +78,18 @@
       </mat-form-field>
 
       <mat-checkbox
-        fxFlex="73%"
         labelPosition="before"
         formControlName="includeOutStandingAmountPercentage"
-        class="margin-b"
+        class="margin-b flex-73"
       >
         {{ 'labels.inputs.Loan Outstanding Percentage' | translate }}
       </mat-checkbox>
 
       <div
         *ngIf="fundMappingForm.value.includeOutStandingAmountPercentage"
-        fxFlexFill
-        fxLayout="row wrap"
-        fxLayoutGap="2%"
-        fxLayout.lt-md="column"
+        class="flex-fill layout-row-wrap gap-2percent layout-xs-column"
       >
-        <mat-form-field *ngIf="fundMappingForm.contains('outStandingAmountPercentageCondition')" fxFlex="31%">
+        <mat-form-field *ngIf="fundMappingForm.contains('outStandingAmountPercentageCondition')" class="flex-31">
           <mat-label>{{ 'labels.inputs.Comparison Condition' | translate }}</mat-label>
           <mat-select required formControlName="outStandingAmountPercentageCondition">
             <mat-option value="between">{{ 'labels.inputs.between' | translate }}</mat-option>
@@ -109,7 +105,7 @@
           </mat-error>
         </mat-form-field>
 
-        <mat-form-field *ngIf="fundMappingForm.contains('minOutStandingAmountPercentage')" fxFlex="31%">
+        <mat-form-field *ngIf="fundMappingForm.contains('minOutStandingAmountPercentage')" class="flex-31">
           <mat-label>{{ 'labels.inputs.Minimum Value' | translate }}</mat-label>
           <input type="number" matInput required formControlName="minOutStandingAmountPercentage" />
           <mat-error *ngIf="fundMappingForm.controls.minOutStandingAmountPercentage.hasError('required')">
@@ -118,7 +114,7 @@
           </mat-error>
         </mat-form-field>
 
-        <mat-form-field *ngIf="fundMappingForm.contains('outStandingAmountPercentage')" fxFlex="31%">
+        <mat-form-field *ngIf="fundMappingForm.contains('outStandingAmountPercentage')" class="flex-31">
           <mat-label>{{ 'labels.inputs.Comparison Value' | translate }}</mat-label>
           <input type="number" matInput required formControlName="outStandingAmountPercentage" />
           <mat-error *ngIf="fundMappingForm.controls.outStandingAmountPercentage.hasError('required')">
@@ -127,7 +123,7 @@
           </mat-error>
         </mat-form-field>
 
-        <mat-form-field *ngIf="fundMappingForm.contains('maxOutStandingAmountPercentage')" fxFlex="31%">
+        <mat-form-field *ngIf="fundMappingForm.contains('maxOutStandingAmountPercentage')" class="flex-31">
           <mat-label>{{ 'labels.inputs.Maximum Value' | translate }}</mat-label>
           <input type="number" matInput required formControlName="maxOutStandingAmountPercentage" />
           <mat-error *ngIf="fundMappingForm.controls.maxOutStandingAmountPercentage.hasError('required')">
@@ -137,18 +133,15 @@
         </mat-form-field>
       </div>
 
-      <mat-checkbox fxFlex="73%" labelPosition="before" formControlName="includeOutstandingAmount" class="margin-b">
+      <mat-checkbox class="flex-73 margin-b" labelPosition="before" formControlName="includeOutstandingAmount">
         {{ 'labels.inputs.Loan Outstanding Amount' | translate }}
       </mat-checkbox>
 
       <div
         *ngIf="fundMappingForm.value.includeOutstandingAmount"
-        fxFlexFill
-        fxLayout="row wrap"
-        fxLayoutGap="2%"
-        fxLayout.lt-md="column"
+        class="flex-fill layout-row-wrap gap-2percent responsive-column"
       >
-        <mat-form-field *ngIf="fundMappingForm.contains('outstandingAmountCondition')" fxFlex="31%">
+        <mat-form-field *ngIf="fundMappingForm.contains('outstandingAmountCondition')" class="flex-31">
           <mat-label>{{ 'labels.inputs.Comparison Condition' | translate }}</mat-label>
           <mat-select required formControlName="outstandingAmountCondition">
             <mat-option value="between">{{ 'labels.inputs.between' | translate }}</mat-option>
@@ -164,7 +157,7 @@
           </mat-error>
         </mat-form-field>
 
-        <mat-form-field *ngIf="fundMappingForm.contains('minOutstandingAmount')" fxFlex="31%">
+        <mat-form-field *ngIf="fundMappingForm.contains('minOutstandingAmount')" class="flex-31">
           <mat-label>{{ 'labels.inputs.Minimum Value' | translate }}</mat-label>
           <input type="number" matInput required formControlName="minOutstandingAmount" />
           <mat-error *ngIf="fundMappingForm.controls.minOutstandingAmount.hasError('required')">
@@ -173,7 +166,7 @@
           </mat-error>
         </mat-form-field>
 
-        <mat-form-field *ngIf="fundMappingForm.contains('outstandingAmount')" fxFlex="31%">
+        <mat-form-field *ngIf="fundMappingForm.contains('outstandingAmount')" class="flex-31">
           <mat-label>{{ 'labels.inputs.Comparison Value' | translate }}</mat-label>
           <input type="number" matInput required formControlName="outstandingAmount" />
           <mat-error *ngIf="fundMappingForm.controls.outstandingAmount.hasError('required')">
@@ -182,7 +175,7 @@
           </mat-error>
         </mat-form-field>
 
-        <mat-form-field *ngIf="fundMappingForm.contains('maxOutstandingAmount')" fxFlex="31%">
+        <mat-form-field *ngIf="fundMappingForm.contains('maxOutstandingAmount')" class="flex-31">
           <mat-label>{{ 'labels.inputs.Maximum Value' | translate }}</mat-label>
           <input type="number" matInput required formControlName="maxOutstandingAmount" />
           <mat-error *ngIf="fundMappingForm.controls.maxOutstandingAmount.hasError('required')">
@@ -193,7 +186,7 @@
       </div>
     </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>
       <button mat-raised-button color="primary" [disabled]="!fundMappingForm.valid">
         <fa-icon icon="search"></fa-icon>&nbsp; {{ 'labels.buttons.Summary' | translate }}