Upgrade to Angular 16

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

src/app/clients/edit-client/edit-client.component.html

@@ -2,8 +2,8 @@
   <mat-card>
     <form [formGroup]="editClientForm">
       <mat-card-content>
-        <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-          <mat-form-field fxFlex="23%">
+        <div class="layout-row-wrap gap-2px responsive-column">
+          <mat-form-field class="flex-fill flex-23">
             <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <mat-select required formControlName="officeId">
               <mat-option *ngFor="let office of officeOptions" [value]="office.id">
@@ -16,7 +16,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 formControlName="legalFormId">
               <mat-option *ngFor="let legalForm of legalFormOptions" [value]="legalForm.id">
@@ -25,17 +25,17 @@
             </mat-select>
           </mat-form-field>
 
-          <mat-form-field fxFlex="23%">
+          <mat-form-field class="flex-fill flex-23">
             <mat-label>{{ 'labels.inputs.Account No' | translate }}</mat-label>
             <input matInput formControlName="accountNo" />
           </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="editClientForm.contains('fullname')" fxFlex="48%">
+          <mat-form-field *ngIf="editClientForm.contains('fullname')" class="flex-48">
             <mat-label>{{
               'labels.inputs.' + getDateLabel(legalFormId, ['Name', 'Entity Name']) | translate
             }}</mat-label>
@@ -46,7 +46,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field *ngIf="editClientForm.contains('firstname')" fxFlex="48%">
+          <mat-form-field *ngIf="editClientForm.contains('firstname')" class="flex-48">
             <mat-label>{{ 'labels.inputs.First Name' | translate }}</mat-label>
             <input matInput required formControlName="firstname" />
             <mat-error *ngIf="editClientForm.controls.firstname.hasError('required')">
@@ -55,12 +55,12 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field *ngIf="editClientForm.contains('middlename')" fxFlex="48%">
+          <mat-form-field *ngIf="editClientForm.contains('middlename')" class="flex-48">
             <mat-label>{{ 'labels.inputs.Middle Name' | translate }}</mat-label>
             <input matInput formControlName="middlename" />
           </mat-form-field>
 
-          <mat-form-field *ngIf="editClientForm.contains('lastname')" fxFlex="48%">
+          <mat-form-field *ngIf="editClientForm.contains('lastname')" class="flex-48">
             <mat-label>{{ 'labels.inputs.Last Name' | translate }}</mat-label>
             <input matInput required formControlName="lastname" />
             <mat-error *ngIf="editClientForm.controls.lastname.hasError('required')">
@@ -71,7 +71,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(legalFormId, ['Date of Birth', 'Incorporation Date']) | translate
             }}</mat-label>
@@ -80,7 +80,7 @@
             <mat-datepicker #dateOfBirthDatePicker></mat-datepicker>
           </mat-form-field>
 
-          <mat-form-field *ngIf="legalFormId === 1" fxFlex="48%">
+          <mat-form-field *ngIf="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">
@@ -89,7 +89,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">
@@ -99,14 +99,11 @@
           </mat-form-field>
 
           <div
-            fxFlex="100%"
-            fxLayout="row wrap"
-            fxLayoutGap="2%"
-            fxLayout.lt-md="column"
+            class="flex-100 layout-row-wrap gap-2percent column-on-small"
             formGroupName="clientNonPersonDetails"
             *ngIf="editClientForm.contains('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">
@@ -115,7 +112,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">
@@ -124,7 +121,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
@@ -137,12 +134,12 @@
               <mat-datepicker #incorpValidityTillDateDatePicker></mat-datepicker>
             </mat-form-field>
 
-            <mat-form-field fxFlex="48%">
+            <mat-form-field class="flex-48">
               <mat-label>{{ 'labels.inputs.Incorporation No' | 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>
@@ -150,26 +147,25 @@
 
           <mat-checkbox
             *ngIf="legalFormId === 1"
-            fxFlex="48%"
+            class="flex-48 margin-v"
             labelPosition="before"
             formControlName="isStaff"
-            class="margin-v"
           >
             {{ 'labels.inputs.Is staff' | translate }}?
           </mat-checkbox>
 
-          <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="editClientForm.controls.emailAddress.errors?.email"> Email not valid </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">
@@ -178,7 +174,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
@@ -190,7 +186,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
@@ -208,7 +204,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%" (click)="activatedOnDatePicker.open()">
+          <mat-form-field class="flex-48" (click)="activatedOnDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Activated On' | translate }}</mat-label>
             <input
               matInput
@@ -223,7 +219,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]="['../general']">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>