Upgrade to Angular 16

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

src/app/system/manage-surveys/create-survey/create-survey.component.html

@@ -1,10 +1,10 @@
 <div class="container">
   <form [formGroup]="surveyForm" (ngSubmit)="submit()">
-    <div fxLayout="column" fxLayoutGap="4%">
+    <div class="layout-column gap-4percent">
       <mat-card>
         <mat-card-content>
-          <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.Key' | translate }}</mat-label>
               <input matInput maxlength="32" required formControlName="key" />
               <mat-error *ngIf="surveyForm.controls.key.hasError('required')">
@@ -13,7 +13,7 @@
               </mat-error>
             </mat-form-field>
 
-            <mat-form-field fxFlex="48%">
+            <mat-form-field class="flex-48">
               <mat-label>{{ 'labels.inputs.Name' | translate }}</mat-label>
               <input matInput maxlength="255" required formControlName="name" />
               <mat-error *ngIf="surveyForm.controls.name.hasError('required')">
@@ -22,7 +22,7 @@
               </mat-error>
             </mat-form-field>
 
-            <mat-form-field fxFlex="48%">
+            <mat-form-field class="flex-48">
               <mat-label>{{ 'labels.inputs.Country Code' | translate }}</mat-label>
               <input matInput maxlength="2" required formControlName="countryCode" />
               <mat-error *ngIf="surveyForm.controls.countryCode.hasError('required')">
@@ -35,17 +35,13 @@
               </mat-error>
             </mat-form-field>
 
-            <mat-form-field fxFlex="98%">
+            <mat-form-field class="flex-98">
               <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
               <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
             </mat-form-field>
 
             <div
-              fxFlexFill
-              fxLayout="row"
-              fxLayout.xs="column"
-              fxLayoutAlign="center"
-              fxLayoutGap="5px"
+              class="flex-fill layout-row layout-align-center gap-5px layout-xs-column"
               *ngIf="!questionDatas.length"
             >
               <button type="button" mat-raised-button [routerLink]="['../']">
@@ -71,7 +67,7 @@
         </mat-card-content>
       </mat-card>
 
-      <div cdkDropList (cdkDropListDropped)="dropQuestion($event)" fxLayout="column" fxLayoutGap="4%">
+      <div cdkDropList (cdkDropListDropped)="dropQuestion($event)" class="layout-column gap-4percent">
         <mat-card
           cdkDrag
           cdkDragLockAxis="y"
@@ -79,14 +75,8 @@
           *ngFor="let question of questionDatas.controls; let questionIndex = index; last as isLast"
         >
           <mat-card-content>
-            <div
-              fxFlexFill
-              fxLayoutGap="2%"
-              fxLayout.lt-md="column"
-              fxLayout="row wrap"
-              [formGroupName]="questionIndex"
-            >
-              <div fxFlex="98%" fxLayout="row wrap" fxLayoutGap="2%" fxLayoutAlign="space-between center">
+            <div class="flex-fill gap-2percent responsive-column layout-row-wrap" [formGroupName]="questionIndex">
+              <div class="flex-98 layout-row-wrap gap-2percent align-between align-items-center">
                 <h2 class="mat-h2">{{ 'labels.heading.Question' | translate }} {{ questionIndex + 1 }}</h2>
                 <button
                   mat-raised-button
@@ -99,7 +89,7 @@
                 </button>
               </div>
 
-              <mat-form-field fxFlex="48%">
+              <mat-form-field class="flex-48">
                 <mat-label>{{ 'labels.inputs.Key' | translate }}</mat-label>
                 <input matInput maxlength="32" required formControlName="key" />
                 <mat-error *ngIf="question.controls.key.hasError('required')">
@@ -108,7 +98,7 @@
                 </mat-error>
               </mat-form-field>
 
-              <mat-form-field fxFlex="48">
+              <mat-form-field class="flex-fill" ="48">
                 <mat-label>{{ 'labels.inputs.Text' | translate }}</mat-label>
                 <input matInput maxlength="255" required formControlName="text" />
                 <mat-error *ngIf="question.controls.text.hasError('required')">
@@ -117,14 +107,14 @@
                 </mat-error>
               </mat-form-field>
 
-              <mat-form-field fxFlex="98%">
+              <mat-form-field class="flex-98">
                 <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
                 <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
               </mat-form-field>
 
               <mat-divider [inset]="true"></mat-divider>
 
-              <div fxFlex="98%" fxLayout="row" fxLayoutAlign="space-between center">
+              <div class="flex-98 layout-row align-between align-items-center">
                 <h4 class="mat-h4">{{ 'labels.heading.Options' | translate }}</h4>
                 <button type="button" mat-raised-button color="primary" (click)="addResponse(questionIndex)">
                   <fa-icon icon="plus" class="m-r-10"></fa-icon>
@@ -135,21 +125,17 @@
               <div
                 cdkDropList
                 (cdkDropListDropped)="dropResponse($event, questionIndex)"
-                fxFlexFill
-                fxLayout="row wrap"
-                fxLayoutGap="2%"
+                class="flex-fill layout-row-wrap gap-2percent"
               >
                 <div
                   cdkDrag
                   cdkDragLockAxis="y"
-                  fxFlexFill
-                  fxLayout="row wrap"
-                  fxLayoutGap="2%"
+                  class="flex-fill layout-row-wrap gap-2percent"
                   formArrayName="responseDatas"
                   *ngFor="let response of getResponseDatas(questionIndex).controls; let responseIndex = index"
                 >
-                  <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" [formGroupName]="responseIndex">
-                    <mat-form-field fxFlex="43%">
+                  <div class="flex-fill layout-row-wrap gap-2percent" [formGroupName]="responseIndex">
+                    <mat-form-field class="flex-43">
                       <mat-label>{{ 'labels.inputs.Text' | translate }}</mat-label>
                       <input matInput required formControlName="text" />
                       <mat-error *ngIf="response.controls.text.hasError('required')">
@@ -158,7 +144,7 @@
                       </mat-error>
                     </mat-form-field>
 
-                    <mat-form-field fxFlex="43%">
+                    <mat-form-field class="flex-43">
                       <mat-label>{{ 'labels.inputs.Value' | translate }}</mat-label>
                       <input matInput required formControlName="value" />
                       <mat-error *ngIf="response.controls.value.hasError('required')">
@@ -171,7 +157,7 @@
                       </mat-error>
                     </mat-form-field>
 
-                    <div fxFlex="8%">
+                    <div class="flex-8">
                       <div class="delete-wrapper">
                         <button
                           type="button"
@@ -193,13 +179,7 @@
           </mat-card-content>
 
           <div>
-            <mat-card-actions
-              *ngIf="isLast"
-              fxLayout="row"
-              fxLayout.xs="column"
-              fxLayoutAlign="center"
-              fxLayoutGap="5px"
-            >
+            <mat-card-actions *ngIf="isLast" class="layout-row layout-xs-column layout-align-center gap-5px">
               <button type="button" mat-raised-button (click)="cancelSurvey()">
                 {{ 'labels.buttons.Cancel' | translate }}
               </button>