Upgrading to Angular 20:

Replaced checked in package-lock.json by regenerated one.
Ran ng update @angular/core@20 @angular/cli@20
Ran npm install @angular-builders/jest@^20.0.0 @fortawesome/angular-fontawesome@^3.0.0 @swimlane/ngx-graph@^11
Ran npm install ngx-mat-select-search@^8.0.2.
Ran ng update @angular/material@20.
Updated all eslint and typescript to the latest versions.
Removed @angular-devkit/schematics.
Updated fontawesome.
Updated rxjs and tslib.
Moved required node version from 16 to 20.
Updated jest-preset-angular.
Set preserveWhitespaces to false.
Corrected two type declarations in two typescript files to make ng serve run without errors.
Removed unused angular-devkit/schematics from view-user.component.ts .
Updated list of supported browsers.
Upgraded prettier.
Ran prettier . --write the first time.
Ran prettier . --write the second time.
Ran ng generate @angular/core:inject with defaults, excepted a handful of files.
Fixed remaining eslint problems.
Added dist directory to ignores in eslint.config.js.
Let prettier fix formatting, almost everything is just line breaks.
Made htmlhint ignore @if and @for Angular constructs.
Updated node version in Github workflow to 22.12.0 (build.yml).
Updated .env.ts.
Updated Angular datetime format strings from YYYY-MM-DD to yyyy-MM-dd.
Merged changes from dev into angular20 branch.

src/app/system/manage-hooks/add-event-dialog/add-event-dialog.component.html

@@ -6,40 +6,52 @@
       <mat-form-field>
         <mat-label>{{ 'labels.inputs.Select Grouping' | translate }}</mat-label>
         <mat-select required formControlName="grouping">
-          <mat-option *ngFor="let grouping of data.groupings" [value]="grouping.name">
-            {{ grouping.name | translateKey: 'catalogs' }}
-          </mat-option>
+          @for (grouping of data.groupings; track grouping) {
+            <mat-option [value]="grouping.name">
+              {{ grouping.name | translateKey: 'catalogs' }}
+            </mat-option>
+          }
         </mat-select>
-        <mat-error *ngIf="eventForm.controls.grouping.hasError('required')">
-          {{ 'labels.inputs.Grouping' | translate }} {{ 'labels.commons.is' | translate }}
-          <strong>{{ 'labels.commons.required' | translate }}</strong>
-        </mat-error>
+        @if (eventForm.controls.grouping.hasError('required')) {
+          <mat-error>
+            {{ 'labels.inputs.Grouping' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
+          </mat-error>
+        }
       </mat-form-field>
 
       <mat-form-field>
         <mat-label>{{ 'labels.inputs.Select Entity' | translate }}</mat-label>
         <mat-select required formControlName="entity">
-          <mat-option *ngFor="let entity of entityData" [value]="entity.name">
-            {{ entity.name }}
-          </mat-option>
+          @for (entity of entityData; track entity) {
+            <mat-option [value]="entity.name">
+              {{ entity.name }}
+            </mat-option>
+          }
         </mat-select>
-        <mat-error *ngIf="eventForm.controls.entity.hasError('required')">
-          {{ 'labels.inputs.Entity' | translate }} {{ 'labels.commons.is' | translate }}
-          <strong>{{ 'labels.commons.required' | translate }}</strong>
-        </mat-error>
+        @if (eventForm.controls.entity.hasError('required')) {
+          <mat-error>
+            {{ 'labels.inputs.Entity' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
+          </mat-error>
+        }
       </mat-form-field>
 
       <mat-form-field>
         <mat-label>{{ 'labels.inputs.Select Action' | translate }}</mat-label>
         <mat-select required formControlName="action">
-          <mat-option *ngFor="let action of actionData" [value]="action">
-            {{ action }}
-          </mat-option>
+          @for (action of actionData; track action) {
+            <mat-option [value]="action">
+              {{ action }}
+            </mat-option>
+          }
         </mat-select>
-        <mat-error *ngIf="eventForm.controls.action.hasError('required')">
-          {{ 'labels.inputs.Action' | translate }} {{ 'labels.commons.is' | translate }}
-          <strong>{{ 'labels.commons.required' | translate }}</strong>
-        </mat-error>
+        @if (eventForm.controls.action.hasError('required')) {
+          <mat-error>
+            {{ 'labels.inputs.Action' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
+          </mat-error>
+        }
       </mat-form-field>
     </div>
   </form>

src/app/system/manage-hooks/add-event-dialog/add-event-dialog.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, Inject } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import {
   MatDialogRef,
   MAT_DIALOG_DATA,
@@ -29,6 +29,10 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class AddEventDialogComponent implements OnInit {
+  dialogRef = inject<MatDialogRef<AddEventDialogComponent>>(MatDialogRef);
+  formBuilder = inject(UntypedFormBuilder);
+  data = inject(MAT_DIALOG_DATA);
+
   /** Event Form. */
   eventForm: UntypedFormGroup;
   /** Entity Data. */
@@ -36,17 +40,6 @@ export class AddEventDialogComponent implements OnInit {
   /** Action Data. */
   actionData: Array<any> = new Array<any>();
 
-  /**
-   * @param {MatDialogRef} dialogRef Component reference to dialog.
-   * @param {FormBuilder} formBuilder Form Builder.
-   * @param {any} data Provides grouping, entities and actions data to fill dropdowns.
-   */
-  constructor(
-    public dialogRef: MatDialogRef<AddEventDialogComponent>,
-    public formBuilder: UntypedFormBuilder,
-    @Inject(MAT_DIALOG_DATA) public data: any
-  ) {}
-
   /**
    * Creates add event form.
    */

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

@@ -6,94 +6,113 @@
           <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">
-                {{ hookTemplate.name | translateKey: 'text' }}
-              </mat-option>
+              @for (hookTemplate of hooksTemplateData.templates; track hookTemplate) {
+                <mat-option [value]="hookTemplate.name">
+                  {{ hookTemplate.name | translateKey: 'text' }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="hookForm.controls.name.hasError('required')">
-              {{ 'labels.inputs.Hook Template' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (hookForm.controls.name.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Hook Template' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <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')">
-              {{ 'labels.inputs.Display Name' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (hookForm.controls.displayName.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Display Name' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
         </div>
 
         <div class="layout-row-wrap responsive-column gap-4percent">
-          <mat-form-field class="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'">
-                {{ 'labels.inputs.json' | translate }}
-              </mat-option>
-              <mat-option [value]="'form'">
-                {{ 'labels.inputs.form' | translate }}
-              </mat-option>
-            </mat-select>
-            <mat-error *ngIf="hookForm.controls.contentType.hasError('required')">
-              {{ 'labels.inputs.Content Type' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-          </mat-form-field>
+          @if (hookForm.controls.name.value === 'Web') {
+            <mat-form-field class="flex-40">
+              <mat-label>{{ 'labels.inputs.Content Type' | translate }}</mat-label>
+              <mat-select required formControlName="contentType">
+                <mat-option [value]="'json'">
+                  {{ 'labels.inputs.json' | translate }}
+                </mat-option>
+                <mat-option [value]="'form'">
+                  {{ 'labels.inputs.form' | translate }}
+                </mat-option>
+              </mat-select>
+              @if (hookForm.controls.contentType.hasError('required')) {
+                <mat-error>
+                  {{ 'labels.inputs.Content Type' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
+                </mat-error>
+              }
+            </mat-form-field>
+          }
 
-          <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>
-            <mat-error *ngIf="hookForm.controls.phoneNumber.hasError('required')">
-              {{ 'labels.inputs.Payload URL' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-          </mat-form-field>
+          @if (hookForm.controls.name.value === 'SMS Bridge') {
+            <mat-form-field class="flex-fill flex-40">
+              <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>
+              @if (hookForm.controls.phoneNumber.hasError('required')) {
+                <mat-error>
+                  {{ 'labels.inputs.Payload URL' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
+                </mat-error>
+              }
+            </mat-form-field>
+          }
 
           <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')">
-              {{ 'labels.inputs.Payload URL' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (hookForm.controls.payloadUrl.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Payload URL' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
         </div>
 
-        <div
-          class="layout-row-wrap responsive-column gap-4percent"
-          *ngIf="hookForm.controls.name.value === 'SMS Bridge'"
-        >
-          <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')">
-              {{ 'labels.inputs.SMS Provider' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-          </mat-form-field>
-
-          <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')">
-              {{ 'labels.inputs.SMS Provider Account ID' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-          </mat-form-field>
-
-          <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')">
-              {{ 'labels.inputs.SMS Provider Token' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-          </mat-form-field>
-        </div>
+        @if (hookForm.controls.name.value === 'SMS Bridge') {
+          <div class="layout-row-wrap responsive-column gap-4percent">
+            <mat-form-field class="flex-30">
+              <mat-label>{{ 'labels.inputs.SMS Provider' | translate }}</mat-label>
+              <input matInput required formControlName="smsProvider" />
+              @if (hookForm.controls.smsProvider.hasError('required')) {
+                <mat-error>
+                  {{ 'labels.inputs.SMS Provider' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
+                </mat-error>
+              }
+            </mat-form-field>
+            <mat-form-field class="flex-30">
+              <mat-label>{{ 'labels.inputs.SMS Provider Account ID' | translate }}</mat-label>
+              <input matInput required formControlName="smsProviderAccountId" />
+              @if (hookForm.controls.smsProviderAccountId.hasError('required')) {
+                <mat-error>
+                  {{ 'labels.inputs.SMS Provider Account ID' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
+                </mat-error>
+              }
+            </mat-form-field>
+            <mat-form-field class="flex-30">
+              <mat-label>{{ 'labels.inputs.SMS Provider Token' | translate }}</mat-label>
+              <input matInput required formControlName="smsProviderToken" />
+              @if (hookForm.controls.smsProviderToken.hasError('required')) {
+                <mat-error>
+                  {{ 'labels.inputs.SMS Provider Token' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
+                </mat-error>
+              }
+            </mat-form-field>
+          </div>
+        }
 
         <br />
 

src/app/system/manage-hooks/create-hook/create-hook.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, inject } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { MatSort, MatSortHeader } from '@angular/material/sort';
@@ -59,6 +59,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class CreateHookComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+  private systemService = inject(SystemService);
+  private router = inject(Router);
+  private formBuilder = inject(UntypedFormBuilder);
+  private dialog = inject(MatDialog);
+  private translateService = inject(TranslateService);
+
   /** Hooks Template Data. */
   hooksTemplateData: any;
   /** Hook Form. */
@@ -85,14 +92,7 @@ export class CreateHookComponent implements OnInit {
    * @param {MatDialog} dialog Dialog Reference.
    * @param {TranslateService} translateService Translate Service.
    */
-  constructor(
-    private route: ActivatedRoute,
-    private systemService: SystemService,
-    private router: Router,
-    private formBuilder: UntypedFormBuilder,
-    private dialog: MatDialog,
-    private translateService: TranslateService
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { hooksTemplate: any }) => {
       this.hooksTemplateData = data.hooksTemplate;
     });

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

@@ -6,23 +6,29 @@
           <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">
-                {{ hookTemplate.name | translateKey: 'text' }}
-              </mat-option>
+              @for (hookTemplate of hooksTemplateData.templates; track hookTemplate) {
+                <mat-option [value]="hookTemplate.name">
+                  {{ hookTemplate.name | translateKey: 'text' }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="hookForm.controls.name.hasError('required')">
-              {{ 'labels.inputs.Hook Template' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (hookForm.controls.name.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Hook Template' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <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')">
-              {{ 'labels.inputs.Display Name' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (hookForm.controls.displayName.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Display Name' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <div class="is-active-wrapper">
@@ -33,73 +39,86 @@
         </div>
 
         <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'">
-                {{ 'labels.inputs.json' | translate }}
-              </mat-option>
-              <mat-option [value]="'form'">
-                {{ 'labels.inputs.form' | translate }}
-              </mat-option>
-            </mat-select>
-            <mat-error *ngIf="hookForm.controls.contentType.hasError('required')">
-              {{ 'labels.inputs.Content Type' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-          </mat-form-field>
+          @if (hookForm.controls.name.value === 'Web') {
+            <mat-form-field class="flex-fill flex-40">
+              <mat-label>{{ 'labels.inputs.Content Type' | translate }}</mat-label>
+              <mat-select required formControlName="contentType">
+                <mat-option [value]="'json'">
+                  {{ 'labels.inputs.json' | translate }}
+                </mat-option>
+                <mat-option [value]="'form'">
+                  {{ 'labels.inputs.form' | translate }}
+                </mat-option>
+              </mat-select>
+              @if (hookForm.controls.contentType.hasError('required')) {
+                <mat-error>
+                  {{ 'labels.inputs.Content Type' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
+                </mat-error>
+              }
+            </mat-form-field>
+          }
 
-          <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>
-            <mat-error *ngIf="hookForm.controls.phoneNumber.hasError('required')">
-              {{ 'labels.inputs.Payload URL' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-          </mat-form-field>
+          @if (hookForm.controls.name.value === 'SMS Bridge') {
+            <mat-form-field class="flex-fill flex-40">
+              <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>
+              @if (hookForm.controls.phoneNumber.hasError('required')) {
+                <mat-error>
+                  {{ 'labels.inputs.Payload URL' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
+                </mat-error>
+              }
+            </mat-form-field>
+          }
 
           <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')">
-              {{ 'labels.inputs.Payload URL' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (hookForm.controls.payloadUrl.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Payload URL' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
         </div>
 
-        <div
-          class="layout-row-wrap responsive-column gap-4percent"
-          *ngIf="hookForm.controls.name.value === 'SMS Bridge'"
-        >
-          <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')">
-              {{ 'labels.inputs.SMS Provider' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-          </mat-form-field>
-
-          <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')">
-              {{ 'labels.inputs.SMS Provider Account ID' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-          </mat-form-field>
-
-          <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')">
-              {{ 'labels.inputs.SMS Provider Token' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-          </mat-form-field>
-        </div>
+        @if (hookForm.controls.name.value === 'SMS Bridge') {
+          <div class="layout-row-wrap responsive-column gap-4percent">
+            <mat-form-field class="flex-30">
+              <mat-label>{{ 'labels.inputs.SMS Provider' | translate }}</mat-label>
+              <input matInput required formControlName="smsProvider" />
+              @if (hookForm.controls.smsProvider.hasError('required')) {
+                <mat-error>
+                  {{ 'labels.inputs.SMS Provider' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
+                </mat-error>
+              }
+            </mat-form-field>
+            <mat-form-field class="flex-30">
+              <mat-label>{{ 'labels.inputs.SMS Provider Account ID' | translate }}</mat-label>
+              <input matInput required formControlName="smsProviderAccountId" />
+              @if (hookForm.controls.smsProviderAccountId.hasError('required')) {
+                <mat-error>
+                  {{ 'labels.inputs.SMS Provider Account ID' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
+                </mat-error>
+              }
+            </mat-form-field>
+            <mat-form-field class="flex-30">
+              <mat-label>{{ 'labels.inputs.SMS Provider Token' | translate }}</mat-label>
+              <input matInput required formControlName="smsProviderToken" />
+              @if (hookForm.controls.smsProviderToken.hasError('required')) {
+                <mat-error>
+                  {{ 'labels.inputs.SMS Provider Token' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
+                </mat-error>
+              }
+            </mat-form-field>
+          </div>
+        }
 
         <br />
 
@@ -129,9 +148,11 @@
             <td mat-cell *matCellDef="let event">{{ event.actionName }}</td>
           </ng-container>
 
-          <div *ngIf="cannotDeleteLastEvent" class="error-message">
-            <p>At least one event is required. Cannot delete the last event.</p>
-          </div>
+          @if (cannotDeleteLastEvent) {
+            <div class="error-message">
+              <p>At least one event is required. Cannot delete the last event.</p>
+            </div>
+          }
 
           <ng-container matColumnDef="actions">
             <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>

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

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, inject } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { MatSort, MatSortHeader } from '@angular/material/sort';
@@ -67,6 +67,15 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class EditHookComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+  private systemService = inject(SystemService);
+  private router = inject(Router);
+  private formBuilder = inject(UntypedFormBuilder);
+  private dialog = inject(MatDialog);
+  private translateService = inject(TranslateService);
+  private snackBar = inject(MatSnackBar);
+  private cdr = inject(ChangeDetectorRef);
+
   @NgModule({
     imports: [
       MatSnackBarModule
@@ -103,16 +112,7 @@ export class EditHookComponent implements OnInit {
    * @param {MatDialog} dialog Dialog Reference.
    * @param {TranslateService} translateService Translate Service.
    */
-  constructor(
-    private route: ActivatedRoute,
-    private systemService: SystemService,
-    private router: Router,
-    private formBuilder: UntypedFormBuilder,
-    private dialog: MatDialog,
-    private translateService: TranslateService,
-    private snackBar: MatSnackBar,
-    private cdr: ChangeDetectorRef
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { hooksTemplate: any; hook: any }) => {
       this.hooksTemplateData = data.hooksTemplate;
       this.hookData = data.hook;
@@ -156,7 +156,6 @@ export class EditHookComponent implements OnInit {
           disabled: this.hookData.name !== 'SMS Bridge'
         },
         Validators.required
-
       ],
       smsProvider: [
         {
@@ -164,7 +163,6 @@ export class EditHookComponent implements OnInit {
           disabled: this.hookData.name !== 'SMS Bridge'
         },
         Validators.required
-
       ],
       smsProviderAccountId: [
         {
@@ -172,7 +170,6 @@ export class EditHookComponent implements OnInit {
           disabled: this.hookData.name !== 'SMS Bridge'
         },
         Validators.required
-
       ],
       smsProviderToken: [
         {
@@ -180,7 +177,6 @@ export class EditHookComponent implements OnInit {
           disabled: this.hookData.name !== 'SMS Bridge'
         },
         Validators.required
-
       ],
       contentType: [
         {
@@ -188,7 +184,6 @@ export class EditHookComponent implements OnInit {
           disabled: this.hookData.name !== 'Web'
         },
         Validators.required
-
       ],
       payloadUrl: [
         this.hookData.name === 'Web' ? this.hookData.config[1].fieldValue : this.hookData.config[0].fieldValue,

src/app/system/manage-hooks/hooks-template.resolver.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,10 +12,7 @@ import { SystemService } from '../system.service';
  */
 @Injectable()
 export class HooksTemplateResolver {
-  /**
-   * @param {SystemService} systemService System service.
-   */
-  constructor(private systemService: SystemService) {}
+  private systemService = inject(SystemService);
 
   /**
    * Returns the hooks template data.

src/app/system/manage-hooks/manage-hooks.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, inject } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort, MatSortHeader } from '@angular/material/sort';
 import {
@@ -47,6 +47,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ManageHooksComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+
   /** Hook data. */
   hookData: any;
   /** Columns to be displayed in manage hooks table. */
@@ -67,7 +69,7 @@ export class ManageHooksComponent implements OnInit {
    * Retrieves the hooks data from `resolve`.
    * @param {ActivatedRoute} route Activated Route.
    */
-  constructor(private route: ActivatedRoute) {
+  constructor() {
     this.route.data.subscribe((data: { hooks: any }) => {
       this.hookData = data.hooks;
     });

src/app/system/manage-hooks/manage-hooks.resolver.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,10 +12,7 @@ import { SystemService } from '../system.service';
  */
 @Injectable()
 export class ManageHooksResolver {
-  /**
-   * @param {SystemService} systemService System service.
-   */
-  constructor(private systemService: SystemService) {}
+  private systemService = inject(SystemService);
 
   /**
    * Returns the hooks data.

src/app/system/manage-hooks/view-hook/hook.resolver.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
@@ -13,10 +13,7 @@ import { SystemService } from '../../system.service';
  */
 @Injectable()
 export class HookResolver {
-  /**
-   * @param {SystemService} systemService System service.
-   */
-  constructor(private systemService: SystemService) {}
+  private systemService = inject(SystemService);
 
   /**
    * Returns the manage hooks data.

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

@@ -41,62 +41,77 @@
         <div class="flex-50 mat-body-strong">{{ 'labels.inputs.Events' | translate }}:</div>
 
         <div class="flex-50">
-          <mat-label *ngFor="let event of hookData.events">
-            {{ event.actionName + '  -  ' + event.entityName }}
-
-            <br />
-          </mat-label>
+          @for (event of hookData.events; track event) {
+            <mat-label>
+              {{ event.actionName + '  -  ' + event.entityName }}
+              <br />
+            </mat-label>
+          }
         </div>
 
-        <div class="flex-50 mat-body-strong" *ngIf="hookData.name === 'Web'">
-          {{ 'labels.inputs.Content Type' | translate }}:
-        </div>
+        @if (hookData.name === 'Web') {
+          <div class="flex-50 mat-body-strong">{{ 'labels.inputs.Content Type' | translate }}:</div>
+        }
 
-        <div class="flex-50" *ngIf="hookData.name === 'Web'">
-          {{ hookData.config[0].fieldValue }}
-        </div>
+        @if (hookData.name === 'Web') {
+          <div class="flex-50">
+            {{ hookData.config[0].fieldValue }}
+          </div>
+        }
 
         <div class="flex-50 mat-body-strong">{{ 'labels.inputs.Payload URL' | translate }}:</div>
 
-        <div class="flex-50" *ngIf="hookData.name === 'Web'">
-          {{ hookData.config[1].fieldValue }}
-        </div>
+        @if (hookData.name === 'Web') {
+          <div class="flex-50">
+            {{ hookData.config[1].fieldValue }}
+          </div>
+        }
 
-        <div class="flex-50" *ngIf="hookData.name === 'SMS Bridge'">
-          {{ hookData.config[0].fieldValue }}
-        </div>
+        @if (hookData.name === 'SMS Bridge') {
+          <div class="flex-50">
+            {{ hookData.config[0].fieldValue }}
+          </div>
+        }
 
-        <div class="flex-50 mat-body-strong" *ngIf="hookData.name === 'SMS Bridge'">
-          {{ 'labels.inputs.Phone Number' | translate }}:
-        </div>
+        @if (hookData.name === 'SMS Bridge') {
+          <div class="flex-50 mat-body-strong">{{ 'labels.inputs.Phone Number' | translate }}:</div>
+        }
 
-        <div class="flex-50" *ngIf="hookData.name === 'SMS Bridge'">
-          {{ hookData.config[1].fieldValue }}
-        </div>
+        @if (hookData.name === 'SMS Bridge') {
+          <div class="flex-50">
+            {{ hookData.config[1].fieldValue }}
+          </div>
+        }
 
-        <div class="flex-50 mat-body-strong" *ngIf="hookData.name === 'SMS Bridge'">
-          {{ 'labels.inputs.SMS Provider' | translate }}:
-        </div>
+        @if (hookData.name === 'SMS Bridge') {
+          <div class="flex-50 mat-body-strong">{{ 'labels.inputs.SMS Provider' | translate }}:</div>
+        }
 
-        <div class="flex-50" *ngIf="hookData.name === 'SMS Bridge'">
-          {{ hookData.config[2].fieldValue }}
-        </div>
+        @if (hookData.name === 'SMS Bridge') {
+          <div class="flex-50">
+            {{ hookData.config[2].fieldValue }}
+          </div>
+        }
 
-        <div class="flex-50 mat-body-strong" *ngIf="hookData.name === 'SMS Bridge'">
-          {{ 'labels.inputs.SMS Provider Account ID' | translate }}:
-        </div>
+        @if (hookData.name === 'SMS Bridge') {
+          <div class="flex-50 mat-body-strong">{{ 'labels.inputs.SMS Provider Account ID' | translate }}:</div>
+        }
 
-        <div class="flex-50" *ngIf="hookData.name === 'SMS Bridge'">
-          {{ hookData.config[3].fieldValue }}
-        </div>
+        @if (hookData.name === 'SMS Bridge') {
+          <div class="flex-50">
+            {{ hookData.config[3].fieldValue }}
+          </div>
+        }
 
-        <div class="flex-50 mat-body-strong" *ngIf="hookData.name === 'SMS Bridge'">
-          {{ 'labels.inputs.SMS Provider Token' | translate }}:
-        </div>
+        @if (hookData.name === 'SMS Bridge') {
+          <div class="flex-50 mat-body-strong">{{ 'labels.inputs.SMS Provider Token' | translate }}:</div>
+        }
 
-        <div class="flex-50" *ngIf="hookData.name === 'SMS Bridge'">
-          {{ hookData.config[4].fieldValue }}
-        </div>
+        @if (hookData.name === 'SMS Bridge') {
+          <div class="flex-50">
+            {{ hookData.config[4].fieldValue }}
+          </div>
+        }
       </div>
     </mat-card-content>
   </mat-card>

src/app/system/manage-hooks/view-hook/view-hook.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
@@ -27,6 +27,12 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ViewHookComponent {
+  private route = inject(ActivatedRoute);
+  private dialog = inject(MatDialog);
+  private systemService = inject(SystemService);
+  private router = inject(Router);
+  private translateService = inject(TranslateService);
+
   /** Hook Data. */
   hookData: any;
 
@@ -38,13 +44,7 @@ export class ViewHookComponent {
    * @param {Router} router Router for navigation.
    * @param {TranslateService} translateService Translate Service.
    */
-  constructor(
-    private route: ActivatedRoute,
-    private dialog: MatDialog,
-    private systemService: SystemService,
-    private router: Router,
-    private translateService: TranslateService
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { hook: any }) => {
       this.hookData = data.hook;
     });