Upgrade to Angular 16

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

src/app/system/roles-and-permissions/view-role/view-role.component.html

@@ -1,4 +1,4 @@
-<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
+<div class="layout-row align-end gap-2px responsive-column container m-b-20">
   <button
     mat-raised-button
     color="primary"
@@ -45,20 +45,20 @@
 <div class="container m-b-20">
   <mat-card class="mat-elevation-z8">
     <mat-card-content>
-      <div fxLayout="row wrap" class="content">
-        <div fxFlex="40%" fxFlex.lt-md="50%" class="header">
+      <div class="layout-row-wrap">
+        <div class="flex-40 flex-lt-md-50 header">
           <b>{{ 'labels.inputs.Name' | translate }}:</b>
         </div>
 
-        <div fxFlex="60%" fxFlex.lt-md="50%">
+        <div class="flex-60 flex-lt-md-50">
           {{ rolePermissionService.name }}
         </div>
 
-        <div fxFlex="40%" fxFlex.lt-md="50%" class="header">
+        <div class="flex-40 flex-lt-md-50 header">
           <b>{{ 'labels.inputs.Role Description' | translate }}:</b>
         </div>
 
-        <div fxFlex="60%" fxFlex.lt-md="50%">
+        <div class="flex-60 flex-lt-md-50">
           {{ rolePermissionService.description }}
         </div>
       </div>
@@ -69,22 +69,14 @@
 <div class="mat-elevation-z8 container">
   <mat-card>
     <ng-container>
-      <div fxLayout="row" class="permission-selected">
-        <div fxFlex="75">
+      <div class="permission-selected layout-row">
+        <div class="flex-75">
           <h3>
             {{ 'labels.buttons.Permissions' | translate }}: <strong>{{ formatName(previousGrouping) }}</strong>
           </h3>
         </div>
 
-        <div
-          fxFlex="25"
-          fxLayout="row"
-          fxLayout.xs="column"
-          fxLayoutAlign="end"
-          fxLayoutGap="5px"
-          *ngIf="!isDisabled"
-          class="select-deselect"
-        >
+        <div class="flex-25 layout-row layout-xs-column layout-align-end gap-5px select-deselect" *ngIf="!isDisabled">
           <button mat-raised-button color="primary" (click)="selectAll()">
             {{ 'labels.buttons.Select All' | translate }}
           </button>
@@ -94,8 +86,8 @@
         </div>
       </div>
 
-      <div fxLayout="row">
-        <div fxFlex="30" fxLayout="column">
+      <div class="layout-row">
+        <div class="layout-column flex-30">
           <mat-list>
             <mat-list-item
               [ngClass]="selectedItem === grouping ? 'active' : 'inactive'"
@@ -111,7 +103,7 @@
 
         <mat-divider [vertical]="true"></mat-divider>
 
-        <div fxFlex="70" fxLayout="column" class="list-permission">
+        <div class="flex-70 layout-column list-permission">
           <form [formGroup]="formGroup" (submit)="submit()">
             <div *ngFor="let permission of permissions.permissions" class="display-permissions">
               <div formArrayName="roster">
@@ -127,7 +119,7 @@
       </div>
     </ng-container>
 
-    <div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px" *ngIf="!isDisabled">
+    <div class="layout-row layout-align-center gap-5px layout-xs-column" *ngIf="!isDisabled">
       <mat-card-actions>
         <button type="button" mat-raised-button (click)="cancel(); restoreCheckboxes()">
           {{ 'labels.buttons.Cancel' | translate }}