Upgrade to Angular 16

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

src/app/users/create-user/create-user.component.html

@@ -2,8 +2,8 @@
   <mat-card>
     <form [formGroup]="userForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div #userFormRef fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-          <mat-form-field fxFlex="48%">
+        <div #userFormRef class="layout-row-wrap layout-lt-md-column gap-2percent">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Username' | translate }}</mat-label>
             <input matInput required formControlName="username" />
             <mat-error *ngIf="userForm.controls.username.hasError('required')">
@@ -12,7 +12,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Email' | translate }}</mat-label>
             <input matInput [required]="userForm.controls.sendPasswordToEmail.value" formControlName="email" />
             <mat-error *ngIf="userForm.controls.email.hasError('email')">
@@ -25,7 +25,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.First Name' | translate }}</mat-label>
             <input matInput required formControlName="firstname" />
             <mat-error *ngIf="userForm.controls.firstname.hasError('pattern')">
@@ -38,7 +38,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Last Name' | translate }}</mat-label>
             <input matInput required formControlName="lastname" />
             <mat-error *ngIf="userForm.controls.lastname.hasError('pattern')">
@@ -51,19 +51,19 @@
             </mat-error>
           </mat-form-field>
 
-          <div fxFlex="48%" class="password-never-expires-wrapper">
+          <div class="password-never-expires-wrapper flex-48">
             <mat-checkbox labelPosition="before" formControlName="passwordNeverExpires">
               {{ 'labels.inputs.Password never expires' | translate }}
             </mat-checkbox>
           </div>
 
-          <div fxFlex="48%" class="send-password-to-email-wrapper">
+          <div class="send-password-to-email-wrapper flex-48">
             <mat-checkbox labelPosition="before" formControlName="sendPasswordToEmail">
               {{ 'labels.inputs.Send password to email address' | translate }}
             </mat-checkbox>
           </div>
 
-          <mat-form-field fxFlex="48%" *ngIf="!userForm.controls.sendPasswordToEmail.value">
+          <mat-form-field class="flex-48" *ngIf="!userForm.controls.sendPasswordToEmail.value">
             <mat-label>{{ 'labels.inputs.Password' | translate }}</mat-label>
             <input matInput required type="password" formControlName="password" />
             <mat-error *ngIf="userForm.controls.password.hasError('required')">
@@ -92,7 +92,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%" *ngIf="!userForm.controls.sendPasswordToEmail.value">
+          <mat-form-field class="flex-48" *ngIf="!userForm.controls.sendPasswordToEmail.value">
             <mat-label>{{ 'labels.inputs.Repeat Password' | translate }}</mat-label>
             <input matInput required type="password" formControlName="repeatPassword" />
             <mat-error *ngIf="userForm.controls.repeatPassword.hasError('required')">
@@ -102,8 +102,7 @@
           </mat-form-field>
 
           <p
-            fxFlex="98%"
-            class="reset-password-error"
+            class="flex-98 reset-password-error"
             *ngIf="
               userForm.errors?.passwordsDoNotMatch &&
               !userForm.controls.password.hasError('required') &&
@@ -113,7 +112,7 @@
             {{ 'labels.inputs.Passwords' | translate }} <strong>{{ 'labels.commons.do not match' | translate }}</strong>
           </p>
 
-          <mat-form-field fxFlex="48%">
+          <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 officesData" [value]="office.id">
@@ -126,7 +125,7 @@
             </mat-error>
           </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 staffData" [value]="staff.id">
@@ -135,7 +134,7 @@
             </mat-select>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Roles' | translate }}</mat-label>
             <mat-select required formControlName="roles" multiple>
               <mat-option *ngFor="let role of rolesData" [value]="role.id">
@@ -150,7 +149,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]="['../']">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>
@@ -170,7 +169,7 @@
       'labels.inputs.Users' | translate
     }}</a>
   </p>
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row align-end gap-2px responsive-column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>