Upgrade to Angular 16

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

src/app/clients/client-stepper/client-general-step/client-general-step.component.html

@@ -1,6 +1,6 @@
 <form [formGroup]="createClientForm">
-  <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <mat-form-field fxFlex="48%">
+  <div class="layout-row-wrap gap-2px responsive-column">
+    <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
       <mat-select required formControlName="officeId">
         <mat-option *ngFor="let office of officeOptions" [value]="office.id">
@@ -13,7 +13,7 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field fxFlex="23%">
+    <mat-form-field class="flex-fill flex-23">
       <mat-label>{{ 'labels.inputs.Legal Form' | translate }}</mat-label>
       <mat-select required formControlName="legalFormId">
         <mat-option *ngFor="let legalForm of legalFormOptions" [value]="legalForm.id">
@@ -22,12 +22,12 @@
       </mat-select>
     </mat-form-field>
 
-    <mat-form-field fxFlex="23%">
+    <mat-form-field class="flex-fill flex-23">
       <mat-label>{{ 'labels.inputs.External Id' | translate }}</mat-label>
       <input matInput formControlName="externalId" />
     </mat-form-field>
 
-    <mat-form-field *ngIf="createClientForm.contains('fullname')" fxFlex="48%">
+    <mat-form-field *ngIf="createClientForm.contains('fullname')" class="flex-48">
       <mat-label>
         {{ 'labels.inputs.' + getDateLabel(createClientForm.value.legalFormId, ['Name', 'Entity Name']) | translate }}
       </mat-label>
@@ -42,7 +42,7 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field *ngIf="createClientForm.contains('firstname')" fxFlex="48%">
+    <mat-form-field *ngIf="createClientForm.contains('firstname')" class="flex-48">
       <mat-label>{{ 'labels.inputs.First Name' | translate }}</mat-label>
       <input matInput required formControlName="firstname" />
       <mat-error *ngIf="createClientForm.controls.firstname.hasError('required')">
@@ -55,7 +55,7 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field *ngIf="createClientForm.contains('middlename')" fxFlex="48%">
+    <mat-form-field *ngIf="createClientForm.contains('middlename')" class="flex-48">
       <mat-label>{{ 'labels.inputs.Middle Name' | translate }}</mat-label>
       <input matInput formControlName="middlename" />
       <mat-error *ngIf="createClientForm.controls.middlename.hasError('pattern')">
@@ -64,7 +64,7 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field *ngIf="createClientForm.contains('lastname')" fxFlex="48%">
+    <mat-form-field *ngIf="createClientForm.contains('lastname')" class="flex-48">
       <mat-label>{{ 'labels.inputs.Last Name' | translate }}</mat-label>
       <input matInput required formControlName="lastname" />
       <mat-error *ngIf="createClientForm.controls.lastname.hasError('required')">
@@ -79,7 +79,7 @@
 
     <mat-divider></mat-divider>
 
-    <mat-form-field fxFlex="48%" (click)="dateOfBirthDatePicker.open()">
+    <mat-form-field class="flex-48" (click)="dateOfBirthDatePicker.open()">
       <mat-label>
         {{
           'labels.inputs.' + getDateLabel(createClientForm.value.legalFormId, ['Date of Birth', 'Incorporation Date'])
@@ -92,14 +92,11 @@
     </mat-form-field>
 
     <div
-      fxFlex="100%"
-      fxLayout="row wrap"
-      fxLayoutGap="2%"
-      fxLayout.lt-md="column"
+      class="flex-100 layout-row-wrap responsive-column gap-4percent"
       formGroupName="clientNonPersonDetails"
-      *ngIf="createClientForm.contains('clientNonPersonDetails')"
+      *ngIf="createClientForm.get('clientNonPersonDetails')"
     >
-      <mat-form-field fxFlex="48%">
+      <mat-form-field class="flex-48">
         <mat-label>{{ 'labels.inputs.Constitution' | translate }}</mat-label>
         <mat-select formControlName="constitutionId" required>
           <mat-option *ngFor="let constitution of constitutionOptions" [value]="constitution.id">
@@ -108,7 +105,7 @@
         </mat-select>
       </mat-form-field>
 
-      <mat-form-field fxFlex="48%">
+      <mat-form-field class="flex-48">
         <mat-label>{{ 'labels.inputs.Main Business Line' | translate }}</mat-label>
         <mat-select formControlName="mainBusinessLineId">
           <mat-option *ngFor="let business of businessLineOptions" [value]="business.id">
@@ -117,7 +114,7 @@
         </mat-select>
       </mat-form-field>
 
-      <mat-form-field fxFlex="48%" (click)="incorpValidityTillDateDatePicker.open()">
+      <mat-form-field class="flex-48" (click)="incorpValidityTillDateDatePicker.open()">
         <mat-label>{{ 'labels.inputs.Incorporation Validity Till Date' | translate }}</mat-label>
         <input
           matInput
@@ -130,18 +127,18 @@
         <mat-datepicker #incorpValidityTillDateDatePicker></mat-datepicker>
       </mat-form-field>
 
-      <mat-form-field fxFlex="48%">
+      <mat-form-field class="flex-48">
         <mat-label>{{ 'labels.inputs.Incorporation Number' | translate }}</mat-label>
         <input matInput formControlName="incorpNumber" />
       </mat-form-field>
 
-      <mat-form-field fxFlex="98%">
+      <mat-form-field class="flex-98">
         <mat-label>{{ 'labels.inputs.Remarks' | translate }}</mat-label>
         <textarea matInput formControlName="remarks" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
       </mat-form-field>
     </div>
 
-    <mat-form-field *ngIf="createClientForm.value.legalFormId === 1" fxFlex="48%">
+    <mat-form-field *ngIf="createClientForm.value.legalFormId === 1" class="flex-48">
       <mat-label>{{ 'labels.inputs.Gender' | translate }}</mat-label>
       <mat-select formControlName="genderId">
         <mat-option *ngFor="let gender of genderOptions" [value]="gender.id">
@@ -150,7 +147,7 @@
       </mat-select>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Staff' | translate }}</mat-label>
       <mat-select formControlName="staffId">
         <mat-option *ngFor="let staff of staffOptions" [value]="staff.id">
@@ -161,22 +158,21 @@
 
     <mat-checkbox
       *ngIf="createClientForm.value.legalFormId === 1"
-      fxFlex="48%"
+      class="flex-48 margin-v"
       labelPosition="before"
       formControlName="isStaff"
-      class="margin-v"
     >
       {{ 'labels.inputs.Is staff' | translate }}?
     </mat-checkbox>
 
-    <mat-divider fxFlex="98%"></mat-divider>
+    <mat-divider class="flex-98"></mat-divider>
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Mobile No' | translate }}</mat-label>
       <input matInput type="number" formControlName="mobileNo" />
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Email Address' | translate }}</mat-label>
       <input matInput formControlName="emailAddress" />
       <mat-error *ngIf="createClientForm.controls.emailAddress.errors?.email">
@@ -184,7 +180,7 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Client Type' | translate }}</mat-label>
       <mat-select formControlName="clientTypeId">
         <mat-option *ngFor="let clientType of clientTypeOptions" [value]="clientType.id">
@@ -193,7 +189,7 @@
       </mat-select>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Client Classification' | translate }}</mat-label>
       <mat-select formControlName="clientClassificationId">
         <mat-option
@@ -205,7 +201,7 @@
       </mat-select>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%" (click)="submittedOnDatePicker.open()">
+    <mat-form-field class="flex-48" (click)="submittedOnDatePicker.open()">
       <mat-label>{{ 'labels.inputs.Submitted On' | translate }}</mat-label>
       <input
         matInput
@@ -221,13 +217,13 @@
 
     <br />
 
-    <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="active" class="margin-v">
+    <mat-checkbox labelPosition="before" formControlName="active" class="margin-v flex-48">
       {{ 'labels.inputs.Active' | translate }}?
     </mat-checkbox>
 
     <mat-form-field
       *ngIf="createClientForm.contains('activationDate')"
-      fxFlex="48%"
+      class="flex-48"
       (click)="activatedOnDatePicker.open()"
     >
       <mat-label>{{ 'labels.inputs.Activation Date' | translate }}</mat-label>
@@ -247,11 +243,11 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="addSavings" class="margin-v">
+    <mat-checkbox labelPosition="before" formControlName="addSavings" class="margin-v flex-48">
       {{ 'labels.inputs.Open Savings Account' | translate }}?
     </mat-checkbox>
 
-    <mat-form-field *ngIf="createClientForm.contains('savingsProductId')" fxFlex="48%">
+    <mat-form-field *ngIf="createClientForm.contains('savingsProductId')" class="flex-48">
       <mat-label>{{ 'labels.inputs.Savings Product' | translate }}</mat-label>
       <mat-select required formControlName="savingsProductId">
         <mat-option *ngFor="let product of savingProductOptions" [value]="product.id">
@@ -265,7 +261,7 @@
     </mat-form-field>
   </div>
 
-  <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
+  <div class="layout-row align-center gap-2percent margin-t responsive-column">
     <button mat-raised-button matStepperPrevious disabled>
       <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       {{ 'labels.buttons.Previous' | translate }}