Upgrade to Angular 16

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

src/app/system/manage-hooks/edit-hook/edit-hook.component.html

@@ -2,8 +2,8 @@
   <mat-card>
     <form [formGroup]="hookForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="row wrap" fxLayout.lt-md="column" fxLayoutGap="4%">
-          <mat-form-field fxFlex="40%">
+        <div class="layout-row-wrap responsive-column gap-4percent">
+          <mat-form-field class="flex-40">
             <mat-label>{{ 'labels.inputs.Hook Template' | translate }}</mat-label>
             <mat-select required formControlName="name">
               <mat-option *ngFor="let hookTemplate of hooksTemplateData.templates" [value]="hookTemplate.name">
@@ -16,7 +16,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="40%">
+          <mat-form-field class="flex-40">
             <mat-label>{{ 'labels.inputs.Display Name' | translate }}</mat-label>
             <input matInput required formControlName="displayName" />
             <mat-error *ngIf="hookForm.controls.displayName.hasError('required')">
@@ -26,14 +26,14 @@
           </mat-form-field>
 
           <div class="is-active-wrapper">
-            <mat-checkbox class="is-active" fxFlex="10%" labelPosition="before" formControlName="isActive">
+            <mat-checkbox class="is-active flex-10" labelPosition="before" formControlName="isActive">
               {{ 'labels.inputs.Is Active' | translate }}?
             </mat-checkbox>
           </div>
         </div>
 
-        <div fxLayout="row wrap" fxLayout.lt-md="column" fxLayoutGap="4%">
-          <mat-form-field fxFlex="40%" *ngIf="hookForm.controls.name.value === 'Web'">
+        <div class="layout-row-wrap responsive-column gap-4percent">
+          <mat-form-field class="flex-fill flex-40" *ngIf="hookForm.controls.name.value === 'Web'">
             <mat-label>{{ 'labels.inputs.Content Type' | translate }}</mat-label>
             <mat-select required formControlName="contentType">
               <mat-option [value]="'json'">
@@ -49,7 +49,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="40%" *ngIf="hookForm.controls.name.value === 'SMS Bridge'">
+          <mat-form-field class="flex-fill flex-40" *ngIf="hookForm.controls.name.value === 'SMS Bridge'">
             <mat-label>{{ 'labels.inputs.Phone Number' | translate }}</mat-label>
             <input matInput type="tel" #input maxlength="10" required formControlName="phoneNumber" />
             <mat-hint align="end">{{ input.value?.length || 0 }}/10</mat-hint>
@@ -59,7 +59,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="40%">
+          <mat-form-field class="flex-40">
             <mat-label>{{ 'labels.inputs.Payload URL' | translate }}</mat-label>
             <input matInput required formControlName="payloadUrl" />
             <mat-error *ngIf="hookForm.controls.payloadUrl.hasError('required')">
@@ -70,12 +70,10 @@
         </div>
 
         <div
-          fxLayout="row wrap"
-          fxLayout.lt-md="column"
-          fxLayoutGap="4%"
+          class="layout-row-wrap responsive-column gap-4percent"
           *ngIf="hookForm.controls.name.value === 'SMS Bridge'"
         >
-          <mat-form-field fxFlex="30%">
+          <mat-form-field class="flex-30">
             <mat-label>{{ 'labels.inputs.SMS Provider' | translate }}</mat-label>
             <input matInput required formControlName="smsProvider" />
             <mat-error *ngIf="hookForm.controls.smsProvider.hasError('required')">
@@ -84,7 +82,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="30%">
+          <mat-form-field class="flex-30">
             <mat-label>{{ 'labels.inputs.SMS Provider Account ID' | translate }}</mat-label>
             <input matInput required formControlName="smsProviderAccountId" />
             <mat-error *ngIf="hookForm.controls.smsProviderAccountId.hasError('required')">
@@ -93,7 +91,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="30%">
+          <mat-form-field class="flex-30">
             <mat-label>{{ 'labels.inputs.SMS Provider Token' | translate }}</mat-label>
             <input matInput required formControlName="smsProviderToken" />
             <mat-error *ngIf="hookForm.controls.smsProviderToken.hasError('required')">
@@ -109,19 +107,10 @@
 
         <br />
 
-        <div fxLayout="row wrap" fxLayout.lt-md="column">
-          <p fxFlex="20%" class="mat-title">
-            {{ 'labels.inputs.Events' | translate }} <span style="color: red">*</span>
-          </p>
+        <div class="layout-row-wrap responsive-column">
+          <p class="mat-title flex-20">{{ 'labels.inputs.Events' | translate }} <span style="color: red">*</span></p>
 
-          <button
-            mat-raised-button
-            class="AddEventButton"
-            fxFlex="20%"
-            type="button"
-            color="primary"
-            (click)="addEvent()"
-          >
+          <button mat-raised-button class="AddEventButton flex-20" type="button" color="primary" (click)="addEvent()">
             <fa-icon icon="plus" class="m-r-10"></fa-icon>
             {{ 'labels.buttons.Add' | translate }} {{ 'labels.inputs.Events' | translate }}
           </button>
@@ -158,7 +147,7 @@
         </table>
       </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>