refactor: modernize syntax

src/app/ui/dialog-confirm/dialog-confirm.component.html

@@ -22,7 +22,7 @@
       class="btn btn-primary"
       mat-button
       type="button"
-      (keydown.ArrowRight)="focusNextButton(confirmButton)"
+      (keydown.ArrowRight)="focusNextButton(confirmButton())"
     >
       <mat-icon>close</mat-icon>
       {{ data.cancelTxt || T.G.CANCEL | translate }}
@@ -37,7 +37,7 @@
       color="primary"
       type="button"
       mat-stroked-button
-      (keydown.ArrowLeft)="focusNextButton(cancelButton)"
+      (keydown.ArrowLeft)="focusNextButton(cancelButton())"
     >
       <mat-icon>check</mat-icon>
       {{ data.okTxt || T.G.OK | translate }}

src/app/ui/dialog-confirm/dialog-confirm.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, inject, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import {
   MAT_DIALOG_DATA,
   MatDialogActions,
@@ -26,12 +26,11 @@ import { TranslatePipe } from '@ngx-translate/core';
   ],
 })
 export class DialogConfirmComponent {
-  @ViewChild('cancelButton', { read: MatButton }) cancelButton!: MatButton;
-  @ViewChild('confirmButton', { read: MatButton }) confirmButton!: MatButton;
-  private _matDialogRef = inject<MatDialogRef<DialogConfirmComponent>>(MatDialogRef);
-  data = inject(MAT_DIALOG_DATA);
+  private readonly _matDialogRef =
+    inject<MatDialogRef<DialogConfirmComponent>>(MatDialogRef);
+  readonly data = inject(MAT_DIALOG_DATA);
 
-  T: typeof T = T;
+  readonly T: typeof T = T;
 
   close(res: any): void {
     this._matDialogRef.close(res);

src/app/ui/swipe-gesture/pan.directive.ts

@@ -1,12 +1,12 @@
 import {
   Directive,
-  EventEmitter,
   HostListener,
-  Output,
-  Input,
+  output,
+  input,
   ElementRef,
   Renderer2,
   NgZone,
+  inject,
 } from '@angular/core';
 
 export interface PanEvent {
@@ -28,18 +28,18 @@ export interface PanEvent {
   standalone: true,
 })
 export class PanDirective {
-  @Output() panstart = new EventEmitter<PanEvent>();
-  @Output() panmove = new EventEmitter<PanEvent>();
-  @Output() panend = new EventEmitter<PanEvent>();
-  @Output() panleft = new EventEmitter<PanEvent>();
-  @Output() panright = new EventEmitter<PanEvent>();
-  @Output() panup = new EventEmitter<PanEvent>();
-  @Output() pandown = new EventEmitter<PanEvent>();
-  @Output() pancancel = new EventEmitter<PanEvent>();
+  readonly panstart = output<PanEvent>();
+  readonly panmove = output<PanEvent>();
+  readonly panend = output<PanEvent>();
+  readonly panleft = output<PanEvent>();
+  readonly panright = output<PanEvent>();
+  readonly panup = output<PanEvent>();
+  readonly pandown = output<PanEvent>();
+  readonly pancancel = output<PanEvent>();
 
   // Configuration
-  @Input() panThreshold = 10; // Minimum distance to start panning
-  @Input() panEnabled = true;
+  readonly panThreshold = input(10); // Minimum distance to start panning
+  readonly panEnabled = input(true);
 
   private startX = 0;
   private startY = 0;
@@ -50,15 +50,13 @@ export class PanDirective {
   private touchIdentifier: number | null = null;
   private lastDirection: 'left' | 'right' | 'up' | 'down' | null = null;
 
-  constructor(
-    private elementRef: ElementRef,
-    private renderer: Renderer2,
-    private ngZone: NgZone,
-  ) {}
+  private readonly elementRef = inject(ElementRef);
+  private readonly renderer = inject(Renderer2);
+  private readonly ngZone = inject(NgZone);
 
   @HostListener('touchstart', ['$event'])
   onTouchStart(event: TouchEvent): void {
-    if (!this.panEnabled || this.touchIdentifier !== null) {
+    if (!this.panEnabled() || this.touchIdentifier !== null) {
       return;
     }
 
@@ -83,7 +81,7 @@ export class PanDirective {
 
   @HostListener('touchmove', ['$event'])
   onTouchMove(event: TouchEvent): void {
-    if (!this.panEnabled || this.touchIdentifier === null) {
+    if (!this.panEnabled() || this.touchIdentifier === null) {
       return;
     }
 
@@ -109,7 +107,7 @@ export class PanDirective {
     const distance = Math.sqrt(xSquared + ySquared);
 
     // Check if we should start panning
-    if (!this.isPanning && distance >= this.panThreshold) {
+    if (!this.isPanning && distance >= this.panThreshold()) {
       this.isPanning = true;
     }
 
@@ -162,7 +160,7 @@ export class PanDirective {
 
   @HostListener('touchend', ['$event'])
   onTouchEnd(event: TouchEvent): void {
-    if (!this.panEnabled || this.touchIdentifier === null) {
+    if (!this.panEnabled() || this.touchIdentifier === null) {
       return;
     }
 
@@ -197,7 +195,7 @@ export class PanDirective {
 
   @HostListener('touchcancel', ['$event'])
   onTouchCancel(event: TouchEvent): void {
-    if (!this.panEnabled || this.touchIdentifier === null) {
+    if (!this.panEnabled() || this.touchIdentifier === null) {
       return;
     }
 

src/app/ui/swipe-gesture/swipe.directive.ts

@@ -1,4 +1,4 @@
-import { Directive, EventEmitter, HostListener, Output, Input } from '@angular/core';
+import { Directive, HostListener, output, input } from '@angular/core';
 
 /**
  * Simple swipe directive for touch gestures
@@ -9,14 +9,14 @@ import { Directive, EventEmitter, HostListener, Output, Input } from '@angular/c
   standalone: true,
 })
 export class SwipeDirective {
-  @Output() swiperight = new EventEmitter<void>();
-  @Output() swipeleft = new EventEmitter<void>();
+  readonly swiperight = output<void>();
+  readonly swipeleft = output<void>();
 
   // Configuration options
-  @Input() swipeThreshold = 50; // Minimum distance in pixels
-  @Input() swipeVelocityThreshold = 0.3; // Minimum velocity in pixels/ms
-  @Input() swipeMaxTime = 1000; // Maximum time in ms for a swipe
-  @Input() swipeEnabled = true; // Enable/disable swipe detection
+  readonly swipeThreshold = input(50); // Minimum distance in pixels
+  readonly swipeVelocityThreshold = input(0.3); // Minimum velocity in pixels/ms
+  readonly swipeMaxTime = input(1000); // Maximum time in ms for a swipe
+  readonly swipeEnabled = input(true); // Enable/disable swipe detection
 
   private swipeStartX = 0;
   private swipeStartY = 0;
@@ -25,7 +25,7 @@ export class SwipeDirective {
 
   @HostListener('touchstart', ['$event'])
   onTouchStart(event: TouchEvent): void {
-    if (!this.swipeEnabled || this.touchIdentifier !== null) {
+    if (!this.swipeEnabled() || this.touchIdentifier !== null) {
       return;
     }
 
@@ -38,7 +38,7 @@ export class SwipeDirective {
 
   @HostListener('touchend', ['$event'])
   onTouchEnd(event: TouchEvent): void {
-    if (!this.swipeEnabled || this.touchIdentifier === null) {
+    if (!this.swipeEnabled() || this.touchIdentifier === null) {
       return;
     }
 
@@ -63,7 +63,7 @@ export class SwipeDirective {
     this.touchIdentifier = null;
 
     // Check if this qualifies as a swipe
-    if (deltaTime > this.swipeMaxTime) {
+    if (deltaTime > this.swipeMaxTime()) {
       return; // Too slow
     }
 
@@ -71,13 +71,13 @@ export class SwipeDirective {
     const absY = Math.abs(deltaY);
 
     // Check if horizontal movement is dominant
-    if (absX < this.swipeThreshold || absX < absY * 1.5) {
+    if (absX < this.swipeThreshold() || absX < absY * 1.5) {
       return; // Not enough horizontal movement or too much vertical movement
     }
 
     // Calculate velocity
     const velocity = absX / deltaTime;
-    if (velocity < this.swipeVelocityThreshold) {
+    if (velocity < this.swipeVelocityThreshold()) {
       return; // Too slow
     }