diff --git a/src/app/ui/dialog-confirm/dialog-confirm.component.html b/src/app/ui/dialog-confirm/dialog-confirm.component.html index cffbba78a2..2d35ae13c3 100644 --- a/src/app/ui/dialog-confirm/dialog-confirm.component.html +++ b/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())" > close {{ 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())" > check {{ data.okTxt || T.G.OK | translate }} diff --git a/src/app/ui/dialog-confirm/dialog-confirm.component.ts b/src/app/ui/dialog-confirm/dialog-confirm.component.ts index d2ba64b0c2..1b5509a21e 100644 --- a/src/app/ui/dialog-confirm/dialog-confirm.component.ts +++ b/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); - data = inject(MAT_DIALOG_DATA); + private readonly _matDialogRef = + inject>(MatDialogRef); + readonly data = inject(MAT_DIALOG_DATA); - T: typeof T = T; + readonly T: typeof T = T; close(res: any): void { this._matDialogRef.close(res); diff --git a/src/app/ui/swipe-gesture/pan.directive.ts b/src/app/ui/swipe-gesture/pan.directive.ts index 62cfe45517..dbd266ca5d 100644 --- a/src/app/ui/swipe-gesture/pan.directive.ts +++ b/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(); - @Output() panmove = new EventEmitter(); - @Output() panend = new EventEmitter(); - @Output() panleft = new EventEmitter(); - @Output() panright = new EventEmitter(); - @Output() panup = new EventEmitter(); - @Output() pandown = new EventEmitter(); - @Output() pancancel = new EventEmitter(); + readonly panstart = output(); + readonly panmove = output(); + readonly panend = output(); + readonly panleft = output(); + readonly panright = output(); + readonly panup = output(); + readonly pandown = output(); + readonly pancancel = output(); // 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; } diff --git a/src/app/ui/swipe-gesture/swipe.directive.ts b/src/app/ui/swipe-gesture/swipe.directive.ts index b3290ce8ca..405dcdde9e 100644 --- a/src/app/ui/swipe-gesture/swipe.directive.ts +++ b/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(); - @Output() swipeleft = new EventEmitter(); + readonly swiperight = output(); + readonly swipeleft = output(); // 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 }