refactor: drop decorators (#8542)

taiga-family · Aug 15, 2024 · a2db543 · a2db543
1 parent 6bfd12a
commit a2db543
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 39 deletions.
diff --git a/projects/cdk/directives/media/media.directive.ts b/projects/cdk/directives/media/media.directive.ts
@@ -1,26 +1,28 @@
-import {
-    Directive,
-    EventEmitter,
-    HostBinding,
-    HostListener,
-    Input,
-    Output,
-} from '@angular/core';
+import {Directive, EventEmitter, Input, Output} from '@angular/core';
 import {tuiInjectElement} from '@taiga-ui/cdk/utils';
 
 @Directive({
     standalone: true,
     selector: 'video[tuiMedia], audio[tuiMedia]',
     exportAs: 'tuiMedia',
-    host: {'(durationchange)': '0'},
+    host: {
+        '[volume]': 'volume',
+        '(durationchange)': '0',
+        '(ended)': 'onPausedChange(true)',
+        '(pause)': 'onPausedChange(true)',
+        '(play)': 'onPausedChange(false)',
+        '(volumechange)': 'onVolumeChange()',
+        '(timeupdate)': 'onCurrentTimeChange()',
+        '(seeking)': 'onCurrentTimeChange()',
+        '(seeked)': 'onCurrentTimeChange()',
+    },
 })
 export class TuiMedia {
     private readonly el = tuiInjectElement<HTMLMediaElement>();
 
     private playbackRate = 1;
 
     @Input()
-    @HostBinding('volume')
     public volume = 1;
 
     @Output()
@@ -62,23 +64,16 @@ export class TuiMedia {
         return Boolean(this.el.paused);
     }
 
-    @HostListener('ended', ['true'])
-    @HostListener('pause', ['true'])
-    @HostListener('play', ['false'])
     protected onPausedChange(paused: boolean): void {
         this.pausedChange.emit(paused);
         this.updatePlaybackRate(this.playbackRate);
     }
 
-    @HostListener('volumechange')
     protected onVolumeChange(): void {
         this.volume = this.el.volume;
         this.volumeChange.emit(this.volume);
     }
 
-    @HostListener('timeupdate')
-    @HostListener('seeking')
-    @HostListener('seeked')
     protected onCurrentTimeChange(): void {
         this.currentTimeChange.emit(this.currentTime);
     }

diff --git a/projects/cdk/directives/resizer/resizer.directive.ts b/projects/cdk/directives/resizer/resizer.directive.ts
@@ -1,21 +1,19 @@
 import type {ElementRef} from '@angular/core';
-import {
-    Directive,
-    EventEmitter,
-    HostBinding,
-    HostListener,
-    inject,
-    Input,
-    Output,
-} from '@angular/core';
+import {Directive, EventEmitter, inject, Input, Output} from '@angular/core';
 import {tuiPx} from '@taiga-ui/cdk/utils/miscellaneous';
 
 import {TuiResizable} from './resizable.directive';
 
 @Directive({
     standalone: true,
     selector: '[tuiResizer]',
-    host: {'[style.touchAction]': '"none"'},
+    host: {
+        '[style.cursor]': 'cursor',
+        '[style.touchAction]': '"none"',
+        '(pointerdown.silent.prevent)': 'onPointerDown($event.x, $event.y)',
+        '(document:pointermove.silent)': 'onPointerMove($event)',
+        '(document:pointerup.silent)': 'onPointerUp()',
+    },
 })
 export class TuiResizer {
     private readonly resizable: ElementRef<HTMLElement> = inject(TuiResizable);
@@ -31,7 +29,6 @@ export class TuiResizer {
     @Output()
     public readonly tuiSizeChange = new EventEmitter<readonly [x: number, y: number]>();
 
-    @HostBinding('style.cursor')
     protected get cursor(): string {
         if (!this.tuiResizer[0]) {
             return 'ns-resize';
@@ -48,15 +45,13 @@ export class TuiResizer {
         return 'nesw-resize';
     }
 
-    @HostListener('pointerdown.silent.prevent', ['$event.x', '$event.y'])
     protected onPointerDown(x: number, y: number): void {
         this.x = x;
         this.y = y;
         this.width = this.resizable.nativeElement.clientWidth;
         this.height = this.resizable.nativeElement.clientHeight;
     }
 
-    @HostListener('document:pointermove.silent', ['$event'])
     protected onPointerMove({x, y, buttons}: PointerEvent): void {
         if (!buttons) {
             this.onPointerUp();
@@ -65,7 +60,6 @@ export class TuiResizer {
         }
     }
 
-    @HostListener('document:pointerup.silent')
     protected onPointerUp(): void {
         this.x = NaN;
     }

diff --git a/projects/kit/components/files/file/file.component.ts b/projects/kit/components/files/file/file.component.ts
@@ -3,7 +3,6 @@ import {
     ChangeDetectionStrategy,
     Component,
     EventEmitter,
-    HostBinding,
     inject,
     Input,
     Output,
@@ -48,6 +47,9 @@ import {TUI_FILE_OPTIONS} from './file.options';
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [tuiAppearanceOptionsProvider(TUI_FILE_OPTIONS)],
     hostDirectives: [TuiAppearance],
+    host: {
+        '[attr.data-delete]': 'showDelete',
+    },
 })
 export class TuiFile {
     private readonly sanitizer = inject(DomSanitizer);
@@ -68,7 +70,6 @@ export class TuiFile {
     public size: TuiSizeL = 'm';
 
     @Input()
-    @HostBinding('attr.data-delete')
     public showDelete: boolean | 'always' = true;
 
     @Input()

diff --git a/projects/kit/components/files/input-files/input-files-validator.directive.ts b/projects/kit/components/files/input-files/input-files-validator.directive.ts
@@ -1,5 +1,5 @@
 import type {OnChanges, OnInit} from '@angular/core';
-import {Directive, HostBinding, inject, Input} from '@angular/core';
+import {Directive, inject, Input} from '@angular/core';
 import {Validators} from '@angular/forms';
 import {TuiValidator} from '@taiga-ui/cdk/directives/validator';
 
@@ -13,13 +13,15 @@ import {TUI_INPUT_FILES_OPTIONS} from './input-files.options';
     standalone: true,
     exportAs: 'tuiInputFilesValidator',
     hostDirectives: [TuiValidator],
+    host: {
+        '[accept]': 'accept',
+    },
 })
 export class TuiInputFilesValidator implements OnChanges, OnInit {
     private readonly options = inject(TUI_INPUT_FILES_OPTIONS);
     private readonly validator = inject(TuiValidator);
 
     @Input()
-    @HostBinding('accept')
     public accept = this.options.accept;
 
     @Input()

diff --git a/projects/kit/components/tiles/tiles.component.ts b/projects/kit/components/tiles/tiles.component.ts
@@ -1,8 +1,6 @@
 import {
     ChangeDetectionStrategy,
     Component,
-    HostBinding,
-    HostListener,
     Input,
     Output,
     ViewEncapsulation,
@@ -30,6 +28,10 @@ import {BehaviorSubject, debounce, filter, map, Subject, timer} from 'rxjs';
             useValue: {childList: true},
         },
     ],
+    host: {
+        '[class._dragged]': 'element',
+        '(pointerleave.silent)': 'rearrange($event)',
+    },
 })
 export class TuiTilesComponent {
     private readonly el = tuiInjectElement();
@@ -45,7 +47,6 @@ export class TuiTilesComponent {
         map((element) => this.reorder(element)),
     );
 
-    @HostBinding('class._dragged')
     public element: Element | null = null;
 
     public readonly order$ = new BehaviorSubject(new Map<number, number>());
@@ -59,7 +60,6 @@ export class TuiTilesComponent {
         return this.order$.value;
     }
 
-    @HostListener('pointerleave.silent')
     public rearrange(element?: Element): void {
         this.el$.next(element);
     }