diff --git a/projects/cdk/directives/media/media.directive.ts b/projects/cdk/directives/media/media.directive.ts index bf740698d0de..04b4150a5f1e 100644 --- a/projects/cdk/directives/media/media.directive.ts +++ b/projects/cdk/directives/media/media.directive.ts @@ -1,18 +1,21 @@ -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(); @@ -20,7 +23,6 @@ export class TuiMedia { 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 index 54f1db098ce5..d536f081639e 100644 --- a/projects/cdk/directives/resizer/resizer.directive.ts +++ b/projects/cdk/directives/resizer/resizer.directive.ts @@ -1,13 +1,5 @@ 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'; @@ -15,7 +7,13 @@ 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 = inject(TuiResizable); @@ -31,7 +29,6 @@ export class TuiResizer { @Output() public readonly tuiSizeChange = new EventEmitter(); - @HostBinding('style.cursor') protected get cursor(): string { if (!this.tuiResizer[0]) { return 'ns-resize'; @@ -48,7 +45,6 @@ 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; @@ -56,7 +52,6 @@ export class TuiResizer { 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 index 0d91f9233203..a507fcfe7a99 100644 --- 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 index 1964b2bcdac8..a942f33e2371 100644 --- 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 index efa24d8e1139..aad5d15e028a 100644 --- 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()); @@ -59,7 +60,6 @@ export class TuiTilesComponent { return this.order$.value; } - @HostListener('pointerleave.silent') public rearrange(element?: Element): void { this.el$.next(element); }