Upgrade to Angular 16

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

src/app/system/manage-jobs/scheduler-jobs/view-scheduler-job/view-scheduler-job.component.html

@@ -1,4 +1,4 @@
-<div class="container m-b-20" fxLayout="row" fxLayout.lt-md="column" fxLayoutAlign="end" fxLayoutGap="2%">
+<div class="container m-b-20 layout-row layout-lt-md-column align-end gap-2percent">
   <button mat-raised-button color="primary" [routerLink]="['edit']">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
     {{ 'labels.buttons.Edit' | translate }}
@@ -11,34 +11,34 @@
 <div class="container">
   <mat-card>
     <mat-card-content>
-      <div fxLayout="row wrap" class="content">
-        <div fxFlex="50%" class="mat-body-strong">
+      <div class="layout-row-wrap">
+        <div class="flex-50 mat-body-strong">
           {{ 'labels.inputs.Job Name' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ jobData.displayName }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">
+        <div class="flex-50 mat-body-strong">
           {{ 'labels.inputs.Cron Expression' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ jobData.cronExpression }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">{{ 'labels.inputs.Is Active Job' | translate }}?</div>
+        <div class="flex-50 mat-body-strong">{{ 'labels.inputs.Is Active Job' | translate }}?</div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ jobData.active | yesNo }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">
+        <div class="flex-50 mat-body-strong">
           {{ 'labels.inputs.Follow' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           <a href="http://www.cronmaker.com/">
             {{ 'labels.text.Click Here To Generate Cron Expression' | translate }}
           </a>
@@ -47,7 +47,7 @@
     </mat-card-content>
 
     <mat-card-actions>
-      <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="2%" fxLayout.lt-md="column">
+      <div class="layout-row layout-align-center gap-2percent column-on-mobile">
         <button type="button" color="primary" mat-raised-button [routerLink]="['../']">
           {{ 'labels.buttons.Back' | translate }}
         </button>