Upgrade to Angular 16

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

src/app/clients/client-stepper/client-family-members-step/client-family-member-dialog/client-family-member-dialog.component.html

@@ -1,8 +1,8 @@
 <h1 mat-dialog-title>{{ data.context }} {{ 'labels.heading.Family Member' | translate }}</h1>
 
 <form [formGroup]="familyMemberForm">
-  <div fxLayout="row wrap" fxLayout.lt-md="column" fxLayoutAlign="start center" fxLayoutGap="2%">
-    <mat-form-field fxFlex="48%">
+  <div class="layout-row-wrap responsive-column align-start-center gap-2px">
+    <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.First Name' | translate }}</mat-label>
       <input formControlName="firstName" required matInput />
       <mat-error *ngIf="familyMemberForm.controls.firstName.hasError('required')">
@@ -11,12 +11,12 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Middle Name' | translate }}</mat-label>
       <input formControlName="middleName" matInput />
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Last Name' | translate }}</mat-label>
       <input formControlName="lastName" required matInput />
       <mat-error *ngIf="familyMemberForm.controls.lastName.hasError('required')">
@@ -25,12 +25,12 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Qualification' | translate }}</mat-label>
       <input formControlName="qualification" matInput />
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Age' | translate }}</mat-label>
       <input type="number" formControlName="age" matInput [min]="0" />
       <mat-error *ngIf="familyMemberForm.controls.age.hasError('required')">
@@ -39,11 +39,11 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-checkbox formControlName="isDependent" labelPosition="before" fxFlex="48%"
+    <mat-checkbox formControlName="isDependent" labelPosition="before" class="flex-48"
       >{{ 'labels.inputs.Is Dependent' | translate }}?</mat-checkbox
     >
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Relationship' | translate }}</mat-label>
       <mat-select formControlName="relationshipId" required>
         <mat-option *ngFor="let relation of data.options.relationshipIdOptions" [value]="relation.id">
@@ -56,7 +56,7 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Gender' | translate }}</mat-label>
       <mat-select formControlName="genderId" required>
         <mat-option *ngFor="let gender of data.options.genderIdOptions" [value]="gender.id">
@@ -69,7 +69,7 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Profession' | translate }}</mat-label>
       <mat-select formControlName="professionId">
         <mat-option *ngFor="let profession of data.options.professionIdOptions" [value]="profession.id">
@@ -78,7 +78,7 @@
       </mat-select>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Marital Status' | translate }}</mat-label>
       <mat-select formControlName="maritalStatusId">
         <mat-option *ngFor="let maritalStatus of data.options.maritalStatusIdOptions" [value]="maritalStatus.id">
@@ -87,7 +87,7 @@
       </mat-select>
     </mat-form-field>
 
-    <mat-form-field fxFlex="98%" (click)="dueDatePicker.open()">
+    <mat-form-field class="flex-98" (click)="dueDatePicker.open()">
       <mat-label>{{ 'labels.inputs.Date Of Birth' | translate }}</mat-label>
       <input formControlName="dateOfBirth" matInput [max]="maxDate" [matDatepicker]="dueDatePicker" required />
       <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>

src/app/clients/client-stepper/client-family-members-step/client-family-members-step.component.html

@@ -1,7 +1,7 @@
 <div class="mat-typography">
   <h3>{{ 'labels.heading.Family Members' | translate }}</h3>
 
-  <div fxLayout="row" fxLayoutAlign="flex-end" class="m-b-20">
+  <div class="layout-row align-end m-b-20">
     <button mat-raised-button color="primary" (click)="addFamilyMember()">
       <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
     </button>
@@ -21,7 +21,7 @@
 
       <mat-divider></mat-divider>
 
-      <div class="family-member-actions" fxLayout="row" fxLayoutAlign="flex-end">
+      <div class="family-member-actions layout-row align-end">
         <button mat-button color="primary">
           <fa-icon icon="edit" (click)="editFamilyMember(member, i)"></fa-icon>
         </button>
@@ -52,7 +52,7 @@
     </mat-expansion-panel>
   </mat-accordion>
 
-  <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>
       <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       {{ 'labels.buttons.Previous' | translate }}