From 68d4514713ba2e2de9e928cc6c09e3115403c454 Mon Sep 17 00:00:00 2001 From: Alex Inkin Date: Thu, 9 May 2024 15:21:44 +0800 Subject: [PATCH] feat(cdk): `tuiNativeElement` add util (#7393) Signed-off-by: waterplea --- .../pie-chart/pie-chart.directive.ts | 6 +- .../input-card-grouped.component.ts | 5 +- .../components/demo/demo.component.ts | 6 +- .../scroll-into-view.directive.ts | 6 +- .../pull-to-refresh.service.ts | 6 +- .../sheet-dialog/sheet-dialog.component.ts | 7 +- .../sheet-heading/sheet-heading.component.ts | 6 +- .../sheet/components/sheet/sheet.component.ts | 13 +++- .../sheet-close/sheet-close.directive.ts | 12 ++- .../sheet-stop/sheet-stop.directive.ts | 5 +- .../swipe-actions-auto-close.directive.ts | 6 +- .../tab-bar/tab-bar-item.directive.ts | 6 +- .../elastic-sticky/elastic-sticky.service.ts | 12 ++- .../directives/ripple/ripple.directive.ts | 5 +- .../touchable/touchable.directive.ts | 6 +- .../components/preview/preview.component.ts | 11 +-- .../table/directives/resized.directive.ts | 6 +- .../active-zone/active-zone.directive.ts | 6 +- .../click-outside/click-outside.directive.ts | 10 ++- .../droppable/droppable.directive.ts | 5 +- .../directives/element/element.directive.ts | 5 +- .../focus-trap/focus-trap.directive.ts | 10 ++- .../directives/focused/focused.directive.ts | 5 +- .../directives/for/test/for.directive.spec.ts | 6 +- .../cdk/directives/hovered/hovered.service.ts | 6 +- .../cdk/directives/media/media.directive.ts | 5 +- .../native-validator.directive.ts | 14 +--- .../directives/pressed/pressed.directive.ts | 5 +- projects/cdk/services/obscured.service.ts | 6 +- projects/cdk/services/pan.service.ts | 9 ++- projects/cdk/services/swipe.service.ts | 7 +- projects/cdk/services/zoom.service.ts | 16 ++-- projects/cdk/utils/dom/index.ts | 1 + projects/cdk/utils/dom/inject-element.ts | 5 ++ .../core/components/alert/alert.component.ts | 11 +-- .../data-list/data-list.component.ts | 4 +- .../data-list/option/option.component.ts | 5 +- .../components/dialog/dialog-close.service.ts | 5 +- .../components/dialog/dialogs.component.ts | 6 +- .../hosted-dropdown.component.ts | 3 +- .../components/loader/loader.component.ts | 4 +- .../primitive-textfield.component.ts | 6 +- .../textfield/textfield.component.ts | 6 +- .../scroll-controls/scrollbar.directive.ts | 8 +- .../scroll-controls/scrollbar.service.ts | 6 +- .../scrollbar/scrollable.directive.ts | 5 +- .../scrollbar/scrollbar.component.ts | 4 +- projects/core/components/svg/svg.component.ts | 4 +- .../dropdown/dropdown-hover.directive.ts | 3 +- .../dropdown/dropdown-open.directive.ts | 3 +- .../dropdown/dropdown-selection.directive.ts | 5 +- .../directives/dropdown/dropdown.component.ts | 5 +- .../directives/dropdown/dropdown.directive.ts | 5 +- .../hint/hint-describe.directive.ts | 5 +- .../directives/hint/hint-hover.directive.ts | 6 +- .../core/directives/hint/hint.component.ts | 4 +- .../core/directives/hint/hint.directive.ts | 6 +- .../scroll-into-view.directive.ts | 5 +- .../pipes/fallback-src/fallback-src.pipe.ts | 5 +- projects/core/services/position.service.ts | 6 +- .../modules/components/group/group.module.ts | 2 - .../hosted-dropdown/examples/5/accessor.ts | 5 +- .../viewport/examples/1/index.ts | 5 +- .../viewport/examples/2/portal-host.ts | 6 +- .../dropdown-open/examples/5/accessor.ts | 7 +- .../modules/utils/browser/examples/1/index.ts | 6 +- .../components/textfield/label.directive.ts | 6 +- .../textfield/textfield.directive.ts | 6 +- .../kit/abstract/abstract-native-select.ts | 5 +- .../carousel/carousel-scroll.directive.ts | 6 +- .../components/carousel/carousel.component.ts | 4 +- .../components/carousel/carousel.directive.ts | 5 +- .../components/checkbox/checkbox.component.ts | 10 ++- .../elastic-container.directive.ts | 5 +- .../input-files/input-files.directive.ts | 5 +- .../kit/components/filter/filter.component.ts | 5 +- .../input-range/input-range.component.ts | 4 +- .../input-tag/input-tag.component.ts | 3 +- .../items-with-more.service.ts | 6 +- .../line-clamp/line-clamp.component.ts | 10 ++- .../pagination/pagination.component.ts | 9 ++- .../progress-color-segments.directive.ts | 6 +- .../radio-list/radio-list.component.ts | 5 +- .../kit/components/radio/radio.component.ts | 12 +-- .../range/range-change.directive.ts | 6 +- .../kit/components/range/range.component.ts | 4 +- .../segmented/segmented.component.ts | 5 +- .../segmented/segmented.directive.ts | 4 +- .../select-option/select-option.component.ts | 5 +- .../helpers/slider-key-steps.directive.ts | 18 ++--- .../helpers/slider-readonly.directive.ts | 11 ++- .../kit/components/slider/slider.component.ts | 5 +- .../components/stepper/step/step.component.ts | 4 +- .../components/stepper/stepper.component.ts | 3 +- .../kit/components/switch/switch.component.ts | 5 +- projects/kit/components/tabs/tab.directive.ts | 6 +- .../tabs/tabs-horizontal.directive.ts | 5 +- .../tabs/tabs-with-more.component.ts | 3 +- .../kit/components/tabs/tabs.directive.ts | 5 +- projects/kit/components/tag/tag.component.ts | 3 +- .../kit/components/tiles/tile.component.ts | 6 +- projects/kit/components/tiles/tile.service.ts | 6 +- .../kit/components/tiles/tiles.component.ts | 5 +- .../tree-item/tree-item.component.ts | 5 +- .../directives/chevron/chevron.directive.ts | 6 +- .../kit/directives/fade/fade.directive.ts | 6 +- .../highlight/highlight.directive.ts | 6 +- projects/kit/directives/index.ts | 1 - .../lazy-loading/lazy-loading.directive.ts | 12 +-- .../kit/directives/project-class/index.ts | 2 - .../directives/project-class/ng-package.json | 5 -- .../project-class/project-class.directive.ts | 21 ----- .../project-class/project-class.module.ts | 9 --- .../test/project-class.directive.spec.ts | 76 ------------------- .../directives/skeleton/skeleton.directive.ts | 11 ++- .../unfinished-validator.directive.ts | 6 +- 116 files changed, 359 insertions(+), 439 deletions(-) create mode 100644 projects/cdk/utils/dom/inject-element.ts delete mode 100644 projects/kit/directives/project-class/index.ts delete mode 100644 projects/kit/directives/project-class/ng-package.json delete mode 100644 projects/kit/directives/project-class/project-class.directive.ts delete mode 100644 projects/kit/directives/project-class/project-class.module.ts delete mode 100644 projects/kit/directives/project-class/test/project-class.directive.spec.ts diff --git a/projects/addon-charts/components/pie-chart/pie-chart.directive.ts b/projects/addon-charts/components/pie-chart/pie-chart.directive.ts index 42880a8d6ced..a1cac74dfe90 100644 --- a/projects/addon-charts/components/pie-chart/pie-chart.directive.ts +++ b/projects/addon-charts/components/pie-chart/pie-chart.directive.ts @@ -1,8 +1,8 @@ -import {Directive, ElementRef, inject, Input, NgZone} from '@angular/core'; +import {Directive, inject, Input, NgZone} from '@angular/core'; import {takeUntilDestroyed} from '@angular/core/rxjs-interop'; import {ANIMATION_FRAME, PERFORMANCE} from '@ng-web-apis/common'; import {tuiDescribeSector} from '@taiga-ui/addon-charts/utils'; -import {tuiClamp, tuiEaseInOutQuad, tuiZonefree} from '@taiga-ui/cdk'; +import {tuiClamp, tuiEaseInOutQuad, tuiInjectElement, tuiZonefree} from '@taiga-ui/cdk'; import {TUI_ANIMATIONS_SPEED, tuiGetDuration} from '@taiga-ui/core'; import {BehaviorSubject, map, pairwise, switchMap, takeWhile} from 'rxjs'; @@ -13,7 +13,7 @@ export class TuiPieChartDirective { private readonly sector$ = new BehaviorSubject([0, 0]); constructor() { - const el: SVGPathElement = inject(ElementRef).nativeElement; + const el = tuiInjectElement(); const performance = inject(PERFORMANCE); const animationFrame$ = inject(ANIMATION_FRAME); const speed = inject(TUI_ANIMATIONS_SPEED); diff --git a/projects/addon-commerce/components/input-card-grouped/input-card-grouped.component.ts b/projects/addon-commerce/components/input-card-grouped/input-card-grouped.component.ts index 8974d42b1962..41a577452b6e 100644 --- a/projects/addon-commerce/components/input-card-grouped/input-card-grouped.component.ts +++ b/projects/addon-commerce/components/input-card-grouped/input-card-grouped.component.ts @@ -1,8 +1,8 @@ +import type {ElementRef} from '@angular/core'; import { ChangeDetectionStrategy, Component, ContentChild, - ElementRef, EventEmitter, HostListener, inject, @@ -22,6 +22,7 @@ import { tuiAsControl, tuiAsFocusableItemAccessor, TuiAutoFocusDirective, + tuiInjectElement, tuiIsElement, tuiIsInput, tuiIsNativeFocused, @@ -85,7 +86,7 @@ export class TuiInputCardGroupedComponent @ViewChild('inputCVC', {read: TuiAutoFocusDirective}) private readonly cvcCardAutofocusRef?: TuiAutoFocusDirective; - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); private expireInert = false; @Input() diff --git a/projects/addon-doc/components/demo/demo.component.ts b/projects/addon-doc/components/demo/demo.component.ts index 3fa7311573ae..e1acf0638334 100644 --- a/projects/addon-doc/components/demo/demo.component.ts +++ b/projects/addon-doc/components/demo/demo.component.ts @@ -1,10 +1,9 @@ import {Location} from '@angular/common'; -import type {OnInit} from '@angular/core'; +import type {ElementRef, OnInit} from '@angular/core'; import { ChangeDetectionStrategy, Component, ContentChild, - ElementRef, HostBinding, HostListener, inject, @@ -23,6 +22,7 @@ import {tuiCoerceValueIsTrue} from '@taiga-ui/addon-doc/utils'; import { tuiClamp, tuiCleanObject, + tuiInjectElement, tuiPure, tuiPx, TuiResizeableDirective, @@ -47,7 +47,7 @@ export class TuiDocDemoComponent implements OnInit { @ViewChild('resizer', {static: true}) private readonly resizer?: ElementRef; - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); private readonly locationRef = inject(Location); private readonly urlSerializer = inject(UrlSerializer); private readonly urlStateHandler = inject(TUI_DOC_URL_STATE_HANDLER); diff --git a/projects/addon-doc/directives/scroll-into-view/scroll-into-view.directive.ts b/projects/addon-doc/directives/scroll-into-view/scroll-into-view.directive.ts index 6cda319c9593..fc4bdc4122c1 100644 --- a/projects/addon-doc/directives/scroll-into-view/scroll-into-view.directive.ts +++ b/projects/addon-doc/directives/scroll-into-view/scroll-into-view.directive.ts @@ -1,7 +1,7 @@ -import {Directive, ElementRef, inject, Input} from '@angular/core'; +import {Directive, inject, Input} from '@angular/core'; import {takeUntilDestroyed} from '@angular/core/rxjs-interop'; import {TUI_DOC_PAGE_LOADED} from '@taiga-ui/addon-doc/tokens'; -import {tuiGetElementObscures} from '@taiga-ui/cdk'; +import {tuiGetElementObscures, tuiInjectElement} from '@taiga-ui/cdk'; import {debounceTime, filter, ReplaySubject, switchMap} from 'rxjs'; @Directive({ @@ -11,7 +11,7 @@ export class TuiScrollIntoViewLinkDirective { private readonly scroll$ = new ReplaySubject(1); constructor() { - const el: HTMLElement = inject(ElementRef).nativeElement; + const el = tuiInjectElement(); inject(TUI_DOC_PAGE_LOADED) .pipe( diff --git a/projects/addon-mobile/components/pull-to-refresh/pull-to-refresh.service.ts b/projects/addon-mobile/components/pull-to-refresh/pull-to-refresh.service.ts index d41d5b22d299..b1e9c1341248 100644 --- a/projects/addon-mobile/components/pull-to-refresh/pull-to-refresh.service.ts +++ b/projects/addon-mobile/components/pull-to-refresh/pull-to-refresh.service.ts @@ -1,5 +1,5 @@ -import {ElementRef, inject, Injectable} from '@angular/core'; -import {tuiScrollFrom, tuiTypedFromEvent} from '@taiga-ui/cdk'; +import {inject, Injectable} from '@angular/core'; +import {tuiInjectElement, tuiScrollFrom, tuiTypedFromEvent} from '@taiga-ui/cdk'; import {TUI_SCROLL_REF} from '@taiga-ui/core'; import { distinctUntilChanged, @@ -27,7 +27,7 @@ export const MICRO_OFFSET = 10 ** -6; @Injectable() export class TuiPullToRefreshService extends Observable { - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); private readonly scrollRef: HTMLElement = inject(TUI_SCROLL_REF).nativeElement; private readonly loaded$ = inject(TUI_PULL_TO_REFRESH_LOADED); private readonly threshold = inject(TUI_PULL_TO_REFRESH_THRESHOLD); diff --git a/projects/addon-mobile/components/sheet-dialog/sheet-dialog.component.ts b/projects/addon-mobile/components/sheet-dialog/sheet-dialog.component.ts index 4108142cd003..9ba525daa6cd 100644 --- a/projects/addon-mobile/components/sheet-dialog/sheet-dialog.component.ts +++ b/projects/addon-mobile/components/sheet-dialog/sheet-dialog.component.ts @@ -1,8 +1,7 @@ -import type {AfterViewInit, QueryList} from '@angular/core'; +import type {AfterViewInit, ElementRef, QueryList} from '@angular/core'; import { ChangeDetectionStrategy, Component, - ElementRef, HostBinding, HostListener, inject, @@ -10,7 +9,7 @@ import { ViewChildren, } from '@angular/core'; import type {TuiPopover} from '@taiga-ui/cdk'; -import {EMPTY_QUERY, tuiPure} from '@taiga-ui/cdk'; +import {EMPTY_QUERY, tuiInjectElement, tuiPure} from '@taiga-ui/cdk'; import { TUI_ANIMATIONS_SPEED, TUI_CLOSE_WORD, @@ -47,7 +46,7 @@ export class TuiSheetDialogComponent implements AfterViewInit { @ViewChildren('stops') private readonly stopsRefs: QueryList> = EMPTY_QUERY; - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); private readonly speed = inject(TUI_ANIMATIONS_SPEED); private pointers = 0; diff --git a/projects/addon-mobile/components/sheet/components/sheet-heading/sheet-heading.component.ts b/projects/addon-mobile/components/sheet/components/sheet-heading/sheet-heading.component.ts index a023a2660eee..47d9e2aac56e 100644 --- a/projects/addon-mobile/components/sheet/components/sheet-heading/sheet-heading.component.ts +++ b/projects/addon-mobile/components/sheet/components/sheet-heading/sheet-heading.component.ts @@ -1,6 +1,6 @@ import type {AfterViewInit} from '@angular/core'; -import {ChangeDetectionStrategy, Component, ElementRef, inject} from '@angular/core'; -import {TuiIdService} from '@taiga-ui/cdk'; +import {ChangeDetectionStrategy, Component, inject} from '@angular/core'; +import {TuiIdService, tuiInjectElement} from '@taiga-ui/cdk'; import {TUI_CLOSE_WORD, TUI_COMMON_ICONS} from '@taiga-ui/core'; export const TUI_SHEET_CLOSE = 'tui-sheet-close'; @@ -13,7 +13,7 @@ export const TUI_SHEET_ID = 'tui-sheet-id'; changeDetection: ChangeDetectionStrategy.OnPush, }) export class TuiSheetHeadingComponent implements AfterViewInit { - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); protected readonly closeWord$ = inject(TUI_CLOSE_WORD); protected readonly icons = inject(TUI_COMMON_ICONS); protected readonly id = inject(TuiIdService).generate(); diff --git a/projects/addon-mobile/components/sheet/components/sheet/sheet.component.ts b/projects/addon-mobile/components/sheet/components/sheet/sheet.component.ts index ebe2a4b46438..5b0a7ae03d99 100644 --- a/projects/addon-mobile/components/sheet/components/sheet/sheet.component.ts +++ b/projects/addon-mobile/components/sheet/components/sheet/sheet.component.ts @@ -1,9 +1,8 @@ -import type {AfterViewInit, QueryList} from '@angular/core'; +import type {AfterViewInit, ElementRef, QueryList} from '@angular/core'; import { ChangeDetectionStrategy, Component, DestroyRef, - ElementRef, HostListener, inject, Input, @@ -12,7 +11,13 @@ import { ViewChildren, } from '@angular/core'; import {takeUntilDestroyed} from '@angular/core/rxjs-interop'; -import {EMPTY_QUERY, TUI_IS_IOS, tuiPure, tuiZonefull} from '@taiga-ui/cdk'; +import { + EMPTY_QUERY, + TUI_IS_IOS, + tuiInjectElement, + tuiPure, + tuiZonefull, +} from '@taiga-ui/cdk'; import {tuiSlideInTop} from '@taiga-ui/core'; import {TUI_MORE_WORD} from '@taiga-ui/kit'; import {map, timer} from 'rxjs'; @@ -50,7 +55,7 @@ export class TuiSheetComponent implements TuiSheetRequiredProps, AfterView private readonly destroyRef = inject(DestroyRef); private readonly scroll$ = inject(TUI_SHEET_SCROLL); - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); private readonly zone = inject(NgZone); @Input() diff --git a/projects/addon-mobile/components/sheet/directives/sheet-close/sheet-close.directive.ts b/projects/addon-mobile/components/sheet/directives/sheet-close/sheet-close.directive.ts index f6119d36402e..efab2de1fd66 100644 --- a/projects/addon-mobile/components/sheet/directives/sheet-close/sheet-close.directive.ts +++ b/projects/addon-mobile/components/sheet/directives/sheet-close/sheet-close.directive.ts @@ -1,6 +1,12 @@ -import {Directive, ElementRef, inject, NgZone, Output} from '@angular/core'; +import {Directive, inject, NgZone, Output} from '@angular/core'; import {WINDOW} from '@ng-web-apis/common'; -import {tuiIfMap, tuiIsFalsy, tuiTypedFromEvent, tuiZonefull} from '@taiga-ui/cdk'; +import { + tuiIfMap, + tuiInjectElement, + tuiIsFalsy, + tuiTypedFromEvent, + tuiZonefull, +} from '@taiga-ui/cdk'; import type {Observable} from 'rxjs'; import {distinctUntilChanged, filter, merge, startWith} from 'rxjs'; @@ -16,7 +22,7 @@ export class TuiSheetCloseDirective { private readonly dragged$ = inject(TUI_SHEET_DRAGGED); private readonly scroll$ = inject(TUI_SHEET_SCROLL); private readonly win = inject(WINDOW); - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); private readonly sheet = inject(TuiSheetComponent); @Output() diff --git a/projects/addon-mobile/components/sheet/directives/sheet-stop/sheet-stop.directive.ts b/projects/addon-mobile/components/sheet/directives/sheet-stop/sheet-stop.directive.ts index 487037d3c609..b30b9186f5cc 100644 --- a/projects/addon-mobile/components/sheet/directives/sheet-stop/sheet-stop.directive.ts +++ b/projects/addon-mobile/components/sheet/directives/sheet-stop/sheet-stop.directive.ts @@ -1,5 +1,6 @@ -import {DestroyRef, Directive, ElementRef, inject} from '@angular/core'; +import {DestroyRef, Directive, inject} from '@angular/core'; import {takeUntilDestroyed} from '@angular/core/rxjs-interop'; +import {tuiInjectElement} from '@taiga-ui/cdk'; import {TUI_SCROLL_REF} from '@taiga-ui/core'; import { distinctUntilChanged, @@ -19,7 +20,7 @@ export class TuiSheetStopDirective { constructor() { const scrollRef = inject(TUI_SCROLL_REF).nativeElement; const destroyRef = inject(DestroyRef); - const el: HTMLElement = inject(ElementRef).nativeElement; + const el = tuiInjectElement(); inject(TUI_SHEET_SCROLL) .pipe( diff --git a/projects/addon-mobile/components/swipe-action/swipe-actions-auto-close.directive.ts b/projects/addon-mobile/components/swipe-action/swipe-actions-auto-close.directive.ts index 45c8e0fc4acc..bb4267cd4af5 100644 --- a/projects/addon-mobile/components/swipe-action/swipe-actions-auto-close.directive.ts +++ b/projects/addon-mobile/components/swipe-action/swipe-actions-auto-close.directive.ts @@ -1,5 +1,5 @@ -import {Directive, ElementRef, inject, Input} from '@angular/core'; -import {tuiGetActualTarget} from '@taiga-ui/cdk'; +import {Directive, Input} from '@angular/core'; +import {tuiGetActualTarget, tuiInjectElement} from '@taiga-ui/cdk'; @Directive({ standalone: true, @@ -10,7 +10,7 @@ import {tuiGetActualTarget} from '@taiga-ui/cdk'; }, }) export class TuiSwipeActionsAutoCloseDirective { - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); @Input() public autoClose: boolean | string = true; diff --git a/projects/addon-mobile/components/tab-bar/tab-bar-item.directive.ts b/projects/addon-mobile/components/tab-bar/tab-bar-item.directive.ts index ca9c3d5a1cd5..e2fcda823c47 100644 --- a/projects/addon-mobile/components/tab-bar/tab-bar-item.directive.ts +++ b/projects/addon-mobile/components/tab-bar/tab-bar-item.directive.ts @@ -1,7 +1,7 @@ -import {ChangeDetectorRef, Directive, ElementRef, inject} from '@angular/core'; +import {ChangeDetectorRef, Directive, inject} from '@angular/core'; import {takeUntilDestroyed} from '@angular/core/rxjs-interop'; import {RouterLinkActive} from '@angular/router'; -import {tuiWatch} from '@taiga-ui/cdk'; +import {tuiInjectElement, tuiWatch} from '@taiga-ui/cdk'; import type {Observable} from 'rxjs'; import {EMPTY, filter} from 'rxjs'; @@ -13,7 +13,7 @@ import {TuiTabBarComponent} from './tab-bar.component'; export class TuiTabBarItemDirective { constructor() { const tabs = inject(TuiTabBarComponent); - const el: HTMLElement = inject(ElementRef).nativeElement; + const el = tuiInjectElement(); const link: Observable = inject(RouterLinkActive, {optional: true})?.isActiveChange || EMPTY; diff --git a/projects/addon-mobile/directives/elastic-sticky/elastic-sticky.service.ts b/projects/addon-mobile/directives/elastic-sticky/elastic-sticky.service.ts index 8c63501dc753..ed6682ae86f3 100644 --- a/projects/addon-mobile/directives/elastic-sticky/elastic-sticky.service.ts +++ b/projects/addon-mobile/directives/elastic-sticky/elastic-sticky.service.ts @@ -2,22 +2,26 @@ import { afterNextRender, ChangeDetectorRef, DestroyRef, - ElementRef, inject, Injectable, INJECTOR, NgZone, } from '@angular/core'; import {takeUntilDestroyed} from '@angular/core/rxjs-interop'; -import {tuiGetElementOffset, tuiScrollFrom, tuiZonefree} from '@taiga-ui/cdk'; +import { + tuiGetElementOffset, + tuiInjectElement, + tuiScrollFrom, + tuiZonefree, +} from '@taiga-ui/cdk'; import {SCROLL_REF_SELECTOR, TUI_SCROLL_REF} from '@taiga-ui/core'; import {map, Observable, Subscription, tap} from 'rxjs'; @Injectable() export class TuiElasticStickyService extends Observable { private readonly injector = inject(INJECTOR); - private readonly el: HTMLElement = inject(ElementRef).nativeElement; - private readonly scrollRef: HTMLElement = inject(TUI_SCROLL_REF).nativeElement; + private readonly el = tuiInjectElement(); + private readonly scrollRef = inject(TUI_SCROLL_REF).nativeElement; private readonly zone = inject(NgZone); private readonly cd = inject(ChangeDetectorRef); private readonly destroyRef = inject(DestroyRef); diff --git a/projects/addon-mobile/directives/ripple/ripple.directive.ts b/projects/addon-mobile/directives/ripple/ripple.directive.ts index 12f3826aabd3..6748d599f964 100644 --- a/projects/addon-mobile/directives/ripple/ripple.directive.ts +++ b/projects/addon-mobile/directives/ripple/ripple.directive.ts @@ -1,8 +1,9 @@ -import {Directive, ElementRef, inject, Input, Renderer2} from '@angular/core'; +import {Directive, inject, Input, Renderer2} from '@angular/core'; import {takeUntilDestroyed} from '@angular/core/rxjs-interop'; import { TUI_FALSE_HANDLER, TUI_TRUE_HANDLER, + tuiInjectElement, tuiTypedFromEvent, tuiWithStyles, } from '@taiga-ui/cdk'; @@ -23,7 +24,7 @@ const TOUCH_MOVE_DELAY = 100; providers: TUI_RIPPLE_PROVIDERS, }) export class TuiRippleDirective { - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); private readonly renderer = inject(Renderer2); private readonly start$ = inject(TUI_RIPPLE_START); private readonly end$ = inject(TUI_RIPPLE_END); diff --git a/projects/addon-mobile/directives/touchable/touchable.directive.ts b/projects/addon-mobile/directives/touchable/touchable.directive.ts index f8378df6f836..1d80be4cd686 100644 --- a/projects/addon-mobile/directives/touchable/touchable.directive.ts +++ b/projects/addon-mobile/directives/touchable/touchable.directive.ts @@ -1,8 +1,8 @@ -import {Directive, ElementRef, inject, Input, Renderer2} from '@angular/core'; +import {Directive, inject, Input, Renderer2} from '@angular/core'; import {takeUntilDestroyed} from '@angular/core/rxjs-interop'; import type {TuiTouchMode} from '@taiga-ui/addon-mobile/types'; import {tuiFindTouchIndex} from '@taiga-ui/addon-mobile/utils'; -import {TUI_IS_IOS, tuiTypedFromEvent} from '@taiga-ui/cdk'; +import {TUI_IS_IOS, tuiInjectElement, tuiTypedFromEvent} from '@taiga-ui/cdk'; import {TUI_ELEMENT_REF} from '@taiga-ui/core'; import {filter, map, race, switchMap, take, tap} from 'rxjs'; @@ -18,7 +18,7 @@ const STYLE = { export class TuiTouchableDirective { private readonly isIOS = inject(TUI_IS_IOS); private readonly renderer = inject(Renderer2); - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); private readonly elementRef?: HTMLElement = inject(TUI_ELEMENT_REF, {optional: true}) ?.nativeElement; diff --git a/projects/addon-preview/components/preview/preview.component.ts b/projects/addon-preview/components/preview/preview.component.ts index e0c01ebdcb6d..e53600387505 100644 --- a/projects/addon-preview/components/preview/preview.component.ts +++ b/projects/addon-preview/components/preview/preview.component.ts @@ -1,16 +1,11 @@ -import { - ChangeDetectionStrategy, - Component, - ElementRef, - inject, - Input, -} from '@angular/core'; +import {ChangeDetectionStrategy, Component, inject, Input} from '@angular/core'; import {TUI_PREVIEW_ICONS, TUI_PREVIEW_TEXTS} from '@taiga-ui/addon-preview/tokens'; import type {TuiZoom} from '@taiga-ui/cdk'; import { TUI_FALSE_HANDLER, tuiClamp, tuiDragAndDropFrom, + tuiInjectElement, tuiPx, tuiRound, tuiTypedFromEvent, @@ -30,7 +25,7 @@ const ROTATION_ANGLE = 90; animations: [tuiSlideInTop], }) export class TuiPreviewComponent { - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); @Input() public zoomable = true; diff --git a/projects/addon-table/components/table/directives/resized.directive.ts b/projects/addon-table/components/table/directives/resized.directive.ts index 59c3240ffa3d..daaddd585f7e 100644 --- a/projects/addon-table/components/table/directives/resized.directive.ts +++ b/projects/addon-table/components/table/directives/resized.directive.ts @@ -1,6 +1,6 @@ import {DOCUMENT} from '@angular/common'; -import {Directive, ElementRef, inject, Output} from '@angular/core'; -import {tuiPreventDefault, tuiTypedFromEvent} from '@taiga-ui/cdk'; +import {Directive, inject, Output} from '@angular/core'; +import {tuiInjectElement, tuiPreventDefault, tuiTypedFromEvent} from '@taiga-ui/cdk'; import {TUI_ELEMENT_REF} from '@taiga-ui/core'; import {distinctUntilChanged, map, switchMap, takeUntil} from 'rxjs'; @@ -9,7 +9,7 @@ import {distinctUntilChanged, map, switchMap, takeUntil} from 'rxjs'; }) export class TuiResizedDirective { private readonly doc = inject(DOCUMENT); - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); private readonly parentRef: HTMLTableCellElement = inject(TUI_ELEMENT_REF).nativeElement; diff --git a/projects/cdk/directives/active-zone/active-zone.directive.ts b/projects/cdk/directives/active-zone/active-zone.directive.ts index 52171e618fc7..f1b2139d63f7 100644 --- a/projects/cdk/directives/active-zone/active-zone.directive.ts +++ b/projects/cdk/directives/active-zone/active-zone.directive.ts @@ -1,8 +1,8 @@ import type {OnDestroy} from '@angular/core'; -import {Directive, ElementRef, inject, Input, NgZone, Output} from '@angular/core'; +import {Directive, inject, Input, NgZone, Output} from '@angular/core'; import {tuiZoneOptimized} from '@taiga-ui/cdk/observables'; import {TUI_ACTIVE_ELEMENT} from '@taiga-ui/cdk/tokens'; -import {tuiArrayRemove, tuiPure} from '@taiga-ui/cdk/utils'; +import {tuiArrayRemove, tuiInjectElement, tuiPure} from '@taiga-ui/cdk/utils'; import type {Observable} from 'rxjs'; import {distinctUntilChanged, map, skip, startWith} from 'rxjs'; @@ -18,7 +18,7 @@ import {distinctUntilChanged, map, skip, startWith} from 'rxjs'; export class TuiActiveZoneDirective implements OnDestroy { private readonly active$ = inject>(TUI_ACTIVE_ELEMENT); private readonly zone = inject(NgZone); - private readonly el: Element = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); private tuiActiveZoneParent: TuiActiveZoneDirective | null = null; private subActiveZones: readonly TuiActiveZoneDirective[] = []; private readonly directParentActiveZone = inject(TuiActiveZoneDirective, { diff --git a/projects/cdk/directives/click-outside/click-outside.directive.ts b/projects/cdk/directives/click-outside/click-outside.directive.ts index 015962ca5c4c..6cc2f876a1a7 100644 --- a/projects/cdk/directives/click-outside/click-outside.directive.ts +++ b/projects/cdk/directives/click-outside/click-outside.directive.ts @@ -1,7 +1,11 @@ import {DOCUMENT} from '@angular/common'; -import {Directive, ElementRef, inject, NgZone, Output} from '@angular/core'; +import {Directive, inject, NgZone, Output} from '@angular/core'; import {tuiZoneOptimized} from '@taiga-ui/cdk/observables'; -import {tuiContainsOrAfter, tuiGetActualTarget} from '@taiga-ui/cdk/utils'; +import { + tuiContainsOrAfter, + tuiGetActualTarget, + tuiInjectElement, +} from '@taiga-ui/cdk/utils'; import type {Observable} from 'rxjs'; import {filter, fromEvent, map} from 'rxjs'; @@ -12,7 +16,7 @@ import {filter, fromEvent, map} from 'rxjs'; export class TuiClickOutsideDirective { private readonly zone = inject(NgZone); private readonly doc = inject(DOCUMENT); - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); @Output() public readonly tuiClickOutside: Observable = fromEvent( diff --git a/projects/cdk/directives/droppable/droppable.directive.ts b/projects/cdk/directives/droppable/droppable.directive.ts index 16ac5a53dc24..bca33b65cb08 100644 --- a/projects/cdk/directives/droppable/droppable.directive.ts +++ b/projects/cdk/directives/droppable/droppable.directive.ts @@ -1,5 +1,6 @@ -import {Directive, ElementRef, inject, Output} from '@angular/core'; +import {Directive, Output} from '@angular/core'; import {tuiPreventDefault, tuiTypedFromEvent} from '@taiga-ui/cdk/observables'; +import {tuiInjectElement} from '@taiga-ui/cdk/utils'; import {tuiIsPresent} from '@taiga-ui/cdk/utils/miscellaneous'; import {distinctUntilChanged, filter, map, merge, startWith, switchMap} from 'rxjs'; @@ -11,7 +12,7 @@ import {distinctUntilChanged, filter, map, merge, startWith, switchMap} from 'rx }, }) export class TuiDroppableDirective { - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); @Output() public readonly tuiDroppableDropped = tuiTypedFromEvent(this.el, 'drop').pipe( diff --git a/projects/cdk/directives/element/element.directive.ts b/projects/cdk/directives/element/element.directive.ts index 283c6141ca53..bd2808932fb9 100644 --- a/projects/cdk/directives/element/element.directive.ts +++ b/projects/cdk/directives/element/element.directive.ts @@ -1,4 +1,5 @@ -import {Directive, ElementRef, inject} from '@angular/core'; +import {Directive, ElementRef} from '@angular/core'; +import {tuiInjectElement} from '@taiga-ui/cdk/utils'; @Directive({ selector: '[tuiElement]', @@ -7,7 +8,7 @@ import {Directive, ElementRef, inject} from '@angular/core'; export class TuiElementDirective implements ElementRef { - public nativeElement = inject(ElementRef).nativeElement; + public nativeElement = tuiInjectElement(); constructor() { /** diff --git a/projects/cdk/directives/focus-trap/focus-trap.directive.ts b/projects/cdk/directives/focus-trap/focus-trap.directive.ts index 9e22a23a69b5..ac0ab1ab15f4 100644 --- a/projects/cdk/directives/focus-trap/focus-trap.directive.ts +++ b/projects/cdk/directives/focus-trap/focus-trap.directive.ts @@ -1,7 +1,11 @@ import {DOCUMENT} from '@angular/common'; import type {OnDestroy} from '@angular/core'; -import {Directive, ElementRef, HostListener, inject} from '@angular/core'; -import {tuiContainsOrAfter, tuiIsHTMLElement} from '@taiga-ui/cdk/utils/dom'; +import {Directive, HostListener, inject} from '@angular/core'; +import { + tuiContainsOrAfter, + tuiInjectElement, + tuiIsHTMLElement, +} from '@taiga-ui/cdk/utils/dom'; import { tuiBlurNativeFocused, tuiGetClosestFocusable, @@ -17,7 +21,7 @@ import { }) export class TuiFocusTrapDirective implements OnDestroy { private readonly doc = inject(DOCUMENT); - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); private readonly activeElement = tuiGetNativeFocused(this.doc); constructor() { diff --git a/projects/cdk/directives/focused/focused.directive.ts b/projects/cdk/directives/focused/focused.directive.ts index 00c891323363..5ba948c27aef 100644 --- a/projects/cdk/directives/focused/focused.directive.ts +++ b/projects/cdk/directives/focused/focused.directive.ts @@ -1,5 +1,6 @@ -import {Directive, ElementRef, inject, NgZone, Output} from '@angular/core'; +import {Directive, inject, NgZone, Output} from '@angular/core'; import {tuiTypedFromEvent, tuiZoneOptimized} from '@taiga-ui/cdk/observables'; +import {tuiInjectElement} from '@taiga-ui/cdk/utils'; import {tuiIsNativeFocused} from '@taiga-ui/cdk/utils/focus'; import type {Observable} from 'rxjs'; import {distinctUntilChanged, map, merge, skip, startWith} from 'rxjs'; @@ -13,7 +14,7 @@ import {distinctUntilChanged, map, merge, skip, startWith} from 'rxjs'; selector: '[tuiFocusedChange]', }) export class TuiFocusedDirective { - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); private readonly zone = inject(NgZone); @Output() diff --git a/projects/cdk/directives/for/test/for.directive.spec.ts b/projects/cdk/directives/for/test/for.directive.spec.ts index 11ec4ca0948a..0d5003282f1a 100644 --- a/projects/cdk/directives/for/test/for.directive.spec.ts +++ b/projects/cdk/directives/for/test/for.directive.spec.ts @@ -1,7 +1,7 @@ -import {Component, ElementRef, inject} from '@angular/core'; +import {Component} from '@angular/core'; import type {ComponentFixture} from '@angular/core/testing'; import {TestBed} from '@angular/core/testing'; -import {TuiForModule} from '@taiga-ui/cdk'; +import {TuiForModule, tuiInjectElement} from '@taiga-ui/cdk'; import {NG_EVENT_PLUGINS} from '@tinkoff/ng-event-plugins'; import {Subject} from 'rxjs'; @@ -16,7 +16,7 @@ describe('TuiFor directive', () => { `, }) class TestComponent { - public readonly el: HTMLElement = inject(ElementRef).nativeElement; + public readonly el = tuiInjectElement(); public readonly items$ = new Subject(); } diff --git a/projects/cdk/directives/hovered/hovered.service.ts b/projects/cdk/directives/hovered/hovered.service.ts index 4bbaa6ee9544..39079236ae09 100644 --- a/projects/cdk/directives/hovered/hovered.service.ts +++ b/projects/cdk/directives/hovered/hovered.service.ts @@ -1,7 +1,7 @@ -import {ElementRef, inject, Injectable, NgZone} from '@angular/core'; +import {inject, Injectable, NgZone} from '@angular/core'; import {TUI_FALSE_HANDLER, TUI_TRUE_HANDLER} from '@taiga-ui/cdk/constants'; import {tuiTypedFromEvent, tuiZoneOptimized} from '@taiga-ui/cdk/observables'; -import {tuiIsElement} from '@taiga-ui/cdk/utils'; +import {tuiInjectElement, tuiIsElement} from '@taiga-ui/cdk/utils'; import {distinctUntilChanged, filter, map, merge, Observable} from 'rxjs'; function movedOut({currentTarget, relatedTarget}: MouseEvent): boolean { @@ -14,7 +14,7 @@ function movedOut({currentTarget, relatedTarget}: MouseEvent): boolean { @Injectable() export class TuiHoveredService extends Observable { - private readonly el: Element = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); private readonly zone = inject(NgZone); private readonly stream$ = merge( diff --git a/projects/cdk/directives/media/media.directive.ts b/projects/cdk/directives/media/media.directive.ts index 5178da9120d3..e67ef7695198 100644 --- a/projects/cdk/directives/media/media.directive.ts +++ b/projects/cdk/directives/media/media.directive.ts @@ -1,13 +1,12 @@ import { Directive, - ElementRef, EventEmitter, HostBinding, HostListener, - inject, Input, Output, } from '@angular/core'; +import {tuiInjectElement} from '@taiga-ui/cdk/utils'; @Directive({ standalone: true, @@ -15,7 +14,7 @@ import { exportAs: 'tuiMedia', }) export class TuiMediaDirective { - private readonly el: HTMLMediaElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); private playbackRate = 1; diff --git a/projects/cdk/directives/native-validator/native-validator.directive.ts b/projects/cdk/directives/native-validator/native-validator.directive.ts index c738c54604a4..9b9c0cd6875c 100644 --- a/projects/cdk/directives/native-validator/native-validator.directive.ts +++ b/projects/cdk/directives/native-validator/native-validator.directive.ts @@ -1,16 +1,8 @@ -import { - DestroyRef, - Directive, - ElementRef, - HostListener, - inject, - Input, - NgZone, -} from '@angular/core'; +import {DestroyRef, Directive, HostListener, inject, Input, NgZone} from '@angular/core'; import type {AbstractControl, Validator} from '@angular/forms'; import {NG_VALIDATORS} from '@angular/forms'; import {tuiTakeUntilDestroyed, tuiZonefree} from '@taiga-ui/cdk/observables'; -import {tuiProvide} from '@taiga-ui/cdk/utils'; +import {tuiInjectElement, tuiProvide} from '@taiga-ui/cdk/utils'; import {timer} from 'rxjs'; @Directive({ @@ -21,7 +13,7 @@ import {timer} from 'rxjs'; export class TuiNativeValidatorDirective implements Validator { private readonly destroyRef = inject(DestroyRef); private readonly zone = inject(NgZone); - private readonly host: HTMLInputElement = inject(ElementRef).nativeElement; + private readonly host = tuiInjectElement(); private control?: AbstractControl; @Input() diff --git a/projects/cdk/directives/pressed/pressed.directive.ts b/projects/cdk/directives/pressed/pressed.directive.ts index f7097ca92db4..66135ce87418 100644 --- a/projects/cdk/directives/pressed/pressed.directive.ts +++ b/projects/cdk/directives/pressed/pressed.directive.ts @@ -1,12 +1,13 @@ -import {Directive, ElementRef, inject, Output} from '@angular/core'; +import {Directive, inject, Output} from '@angular/core'; import {tuiPressedObservable} from '@taiga-ui/cdk/observables'; import {TUI_TAKE_ONLY_TRUSTED_EVENTS} from '@taiga-ui/cdk/tokens'; +import {tuiInjectElement} from '@taiga-ui/cdk/utils'; @Directive({ selector: '[tuiPressedChange]', }) export class TuiPressedDirective { - private readonly el: Element = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); private readonly takeOnlyTrustedEvents = inject(TUI_TAKE_ONLY_TRUSTED_EVENTS); @Output() diff --git a/projects/cdk/services/obscured.service.ts b/projects/cdk/services/obscured.service.ts index f2c74b2a5f95..0dfd28f779f6 100644 --- a/projects/cdk/services/obscured.service.ts +++ b/projects/cdk/services/obscured.service.ts @@ -1,8 +1,8 @@ -import {ElementRef, inject, Injectable, NgZone} from '@angular/core'; +import {inject, Injectable, NgZone} from '@angular/core'; import {ANIMATION_FRAME} from '@ng-web-apis/common'; import {POLLING_TIME} from '@taiga-ui/cdk/constants'; import {tuiZoneOptimized} from '@taiga-ui/cdk/observables'; -import {tuiGetElementObscures} from '@taiga-ui/cdk/utils/dom'; +import {tuiGetElementObscures, tuiInjectElement} from '@taiga-ui/cdk/utils/dom'; import {distinctUntilChanged, map, Observable, startWith, throttleTime} from 'rxjs'; // @bad TODO: Consider Intersection Observer with fallback to current implementation @@ -12,7 +12,7 @@ import {distinctUntilChanged, map, Observable, startWith, throttleTime} from 'rx */ @Injectable() export class TuiObscuredService extends Observable { - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); private readonly obscured$ = inject(ANIMATION_FRAME).pipe( throttleTime(POLLING_TIME), map(() => tuiGetElementObscures(this.el)), diff --git a/projects/cdk/services/pan.service.ts b/projects/cdk/services/pan.service.ts index ae40b32db5ed..7e43d08138a8 100644 --- a/projects/cdk/services/pan.service.ts +++ b/projects/cdk/services/pan.service.ts @@ -1,6 +1,7 @@ import {DOCUMENT} from '@angular/common'; -import {ElementRef, inject, Injectable} from '@angular/core'; +import {inject, Injectable} from '@angular/core'; import {tuiTypedFromEvent} from '@taiga-ui/cdk/observables'; +import {tuiInjectElement} from '@taiga-ui/cdk/utils/dom'; import { filter, map, @@ -15,13 +16,13 @@ import { @Injectable() export class TuiPanService extends Observable { constructor() { - const nativeElement = inject(ElementRef).nativeElement; + const el = tuiInjectElement(); const doc = inject(DOCUMENT); super(subscriber => { merge( - tuiTypedFromEvent(nativeElement, 'touchstart', {passive: true}), - tuiTypedFromEvent(nativeElement, 'mousedown'), + tuiTypedFromEvent(el, 'touchstart', {passive: true}), + tuiTypedFromEvent(el, 'mousedown'), ) .pipe( switchMap(() => diff --git a/projects/cdk/services/swipe.service.ts b/projects/cdk/services/swipe.service.ts index 8c1edfaac47d..fd2807a94e4a 100644 --- a/projects/cdk/services/swipe.service.ts +++ b/projects/cdk/services/swipe.service.ts @@ -1,8 +1,9 @@ import {DOCUMENT} from '@angular/common'; -import {ElementRef, inject, Injectable} from '@angular/core'; +import {inject, Injectable} from '@angular/core'; import {tuiTypedFromEvent} from '@taiga-ui/cdk/observables'; import {TUI_SWIPE_OPTIONS} from '@taiga-ui/cdk/tokens'; import type {TuiSwipe} from '@taiga-ui/cdk/types'; +import {tuiInjectElement} from '@taiga-ui/cdk/utils/dom'; import {tuiGetSwipeDirection, tuiIsPresent} from '@taiga-ui/cdk/utils/miscellaneous'; import {filter, map, merge, Observable, pairwise} from 'rxjs'; @@ -10,12 +11,12 @@ import {filter, map, merge, Observable, pairwise} from 'rxjs'; export class TuiSwipeService extends Observable { constructor() { const doc = inject(DOCUMENT); - const nativeElement = inject(ElementRef).nativeElement; + const el = tuiInjectElement(); const {timeout, threshold} = inject(TUI_SWIPE_OPTIONS); super(subscriber => { merge( - tuiTypedFromEvent(nativeElement, 'touchstart', {passive: true}), + tuiTypedFromEvent(el, 'touchstart', {passive: true}), tuiTypedFromEvent(doc, 'touchend'), ) .pipe( diff --git a/projects/cdk/services/zoom.service.ts b/projects/cdk/services/zoom.service.ts index 3cc3f022272a..983a8f8ca7dc 100644 --- a/projects/cdk/services/zoom.service.ts +++ b/projects/cdk/services/zoom.service.ts @@ -1,8 +1,8 @@ -import {ElementRef, inject, Injectable} from '@angular/core'; +import {inject, Injectable} from '@angular/core'; import {tuiPreventDefault, tuiTypedFromEvent} from '@taiga-ui/cdk/observables'; import {TUI_ZOOM_OPTIONS} from '@taiga-ui/cdk/tokens'; import type {TuiZoom} from '@taiga-ui/cdk/types'; -import {tuiDistanceBetweenTouches} from '@taiga-ui/cdk/utils'; +import {tuiDistanceBetweenTouches, tuiInjectElement} from '@taiga-ui/cdk/utils'; import {filter, map, merge, Observable, scan, switchMap, takeUntil} from 'rxjs'; const TOUCH_SENSITIVITY = 0.01; @@ -10,17 +10,15 @@ const TOUCH_SENSITIVITY = 0.01; @Injectable() export class TuiZoomService extends Observable { constructor() { - const nativeElement = inject(ElementRef).nativeElement; + const el = tuiInjectElement(); const {wheelSensitivity} = inject(TUI_ZOOM_OPTIONS); super(subscriber => { merge( - tuiTypedFromEvent(nativeElement, 'touchstart', {passive: true}).pipe( + tuiTypedFromEvent(el, 'touchstart', {passive: true}).pipe( filter(({touches}) => touches.length > 1), switchMap(startEvent => - tuiTypedFromEvent(nativeElement, 'touchmove', { - passive: true, - }).pipe( + tuiTypedFromEvent(el, 'touchmove', {passive: true}).pipe( tuiPreventDefault(), scan( (prev, event) => { @@ -52,11 +50,11 @@ export class TuiZoomService extends Observable { return {clientX, clientY, delta, event}; }), - takeUntil(tuiTypedFromEvent(nativeElement, 'touchend')), + takeUntil(tuiTypedFromEvent(el, 'touchend')), ), ), ), - tuiTypedFromEvent(nativeElement, 'wheel', {passive: false}).pipe( + tuiTypedFromEvent(el, 'wheel', {passive: false}).pipe( tuiPreventDefault(), map(wheel => ({ clientX: wheel.clientX, diff --git a/projects/cdk/utils/dom/index.ts b/projects/cdk/utils/dom/index.ts index d35165f739a0..eac226d1c797 100644 --- a/projects/cdk/utils/dom/index.ts +++ b/projects/cdk/utils/dom/index.ts @@ -8,6 +8,7 @@ export * from './get-element-obscurers'; export * from './get-element-offset'; export * from './get-scroll-parent'; export * from './get-selected-text'; +export * from './inject-element'; export * from './is-current-target'; export * from './is-element-editable'; export * from './is-inside-iframe'; diff --git a/projects/cdk/utils/dom/inject-element.ts b/projects/cdk/utils/dom/inject-element.ts new file mode 100644 index 000000000000..e8f440dcf6ba --- /dev/null +++ b/projects/cdk/utils/dom/inject-element.ts @@ -0,0 +1,5 @@ +import {ElementRef, inject} from '@angular/core'; + +export function tuiInjectElement(): T { + return inject(ElementRef).nativeElement; +} diff --git a/projects/core/components/alert/alert.component.ts b/projects/core/components/alert/alert.component.ts index 8c07323d9196..0ab9fa7126fe 100644 --- a/projects/core/components/alert/alert.component.ts +++ b/projects/core/components/alert/alert.component.ts @@ -1,13 +1,8 @@ import type {OnInit} from '@angular/core'; -import { - ChangeDetectionStrategy, - Component, - DestroyRef, - ElementRef, - inject, -} from '@angular/core'; +import {ChangeDetectionStrategy, Component, DestroyRef, inject} from '@angular/core'; import {takeUntilDestroyed} from '@angular/core/rxjs-interop'; import type {TuiPopover} from '@taiga-ui/cdk'; +import {tuiInjectElement} from '@taiga-ui/cdk'; import {tuiFadeIn, tuiHeightCollapse, tuiSlideIn} from '@taiga-ui/core/animations'; import {TUI_ANIMATIONS_SPEED} from '@taiga-ui/core/tokens'; import {tuiToAnimationOptions} from '@taiga-ui/core/utils'; @@ -33,7 +28,7 @@ import {TUI_ALERT_POSITION} from './alert.tokens'; }, }) export class TuiAlertComponent implements OnInit { - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); private readonly destroyRef = inject(DestroyRef); protected readonly position = inject(TUI_ALERT_POSITION); protected readonly item = diff --git a/projects/core/components/data-list/data-list.component.ts b/projects/core/components/data-list/data-list.component.ts index 2feb9d2b8c9c..0f2f770a4766 100644 --- a/projects/core/components/data-list/data-list.component.ts +++ b/projects/core/components/data-list/data-list.component.ts @@ -3,7 +3,6 @@ import { ChangeDetectionStrategy, Component, ContentChildren, - ElementRef, forwardRef, HostBinding, HostListener, @@ -13,6 +12,7 @@ import { } from '@angular/core'; import { EMPTY_QUERY, + tuiInjectElement, tuiIsElement, tuiIsNativeFocusedIn, tuiIsPresent, @@ -50,7 +50,7 @@ export class TuiDataListComponent implements TuiDataListAccessor { private readonly options: QueryList> = EMPTY_QUERY; private origin?: HTMLElement; - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); private readonly controller = inject(TUI_TEXTFIELD_WATCHED_CONTROLLER, { optional: true, }); diff --git a/projects/core/components/data-list/option/option.component.ts b/projects/core/components/data-list/option/option.component.ts index ca3741c2ad4f..c1552af6c2ed 100644 --- a/projects/core/components/data-list/option/option.component.ts +++ b/projects/core/components/data-list/option/option.component.ts @@ -2,7 +2,6 @@ import type {OnDestroy} from '@angular/core'; import { ChangeDetectionStrategy, Component, - ElementRef, forwardRef, HostBinding, HostListener, @@ -10,7 +9,7 @@ import { Input, } from '@angular/core'; import type {TuiEventWith} from '@taiga-ui/cdk'; -import {tuiIsNativeFocused} from '@taiga-ui/cdk'; +import {tuiInjectElement, tuiIsNativeFocused} from '@taiga-ui/cdk'; import {TuiDropdownDirective} from '@taiga-ui/core/directives/dropdown'; import type {TuiDataListHost} from '@taiga-ui/core/interfaces'; import { @@ -40,7 +39,7 @@ function shouldFocus({currentTarget}: TuiEventWith): bo }, }) export class TuiOptionComponent implements OnDestroy { - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); private readonly dataList = inject>( forwardRef(() => TuiDataListComponent), {optional: true}, diff --git a/projects/core/components/dialog/dialog-close.service.ts b/projects/core/components/dialog/dialog-close.service.ts index 8248b62f7eae..4d10a6fd7032 100644 --- a/projects/core/components/dialog/dialog-close.service.ts +++ b/projects/core/components/dialog/dialog-close.service.ts @@ -1,9 +1,10 @@ import {DOCUMENT} from '@angular/common'; -import {ElementRef, inject, Injectable} from '@angular/core'; +import {inject, Injectable} from '@angular/core'; import {WINDOW} from '@ng-web-apis/common'; import { tuiContainsOrAfter, tuiGetActualTarget, + tuiInjectElement, tuiIsElement, tuiTypedFromEvent, } from '@taiga-ui/cdk'; @@ -16,7 +17,7 @@ const SCROLLBAR_PLACEHOLDER = 17; export class TuiDialogCloseService extends Observable { private readonly win = inject(WINDOW); private readonly doc = inject(DOCUMENT); - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); private readonly esc$ = tuiTypedFromEvent(this.doc, 'keydown').pipe( filter(event => { diff --git a/projects/core/components/dialog/dialogs.component.ts b/projects/core/components/dialog/dialogs.component.ts index 366ab4db6566..32cd48790c60 100644 --- a/projects/core/components/dialog/dialogs.component.ts +++ b/projects/core/components/dialog/dialogs.component.ts @@ -1,7 +1,7 @@ import {CommonModule} from '@angular/common'; -import {ChangeDetectionStrategy, Component, ElementRef, inject} from '@angular/core'; +import {ChangeDetectionStrategy, Component, inject} from '@angular/core'; import type {TuiPopover} from '@taiga-ui/cdk'; -import {TuiFocusTrapDirective} from '@taiga-ui/cdk'; +import {TuiFocusTrapDirective, tuiInjectElement} from '@taiga-ui/cdk'; import {tuiHost} from '@taiga-ui/core/animations'; import { TuiScrollControlsComponent, @@ -33,7 +33,7 @@ import {TUI_DIALOGS} from './dialog.tokens'; }, }) export class TuiDialogsComponent { - protected readonly el: HTMLElement = inject(ElementRef).nativeElement; + protected readonly el = tuiInjectElement(); protected readonly dialogs$: Observable>> = inject(TUI_DIALOGS); } diff --git a/projects/core/components/hosted-dropdown/hosted-dropdown.component.ts b/projects/core/components/hosted-dropdown/hosted-dropdown.component.ts index 28e89b5b1a64..a9e7b0aa1271 100644 --- a/projects/core/components/hosted-dropdown/hosted-dropdown.component.ts +++ b/projects/core/components/hosted-dropdown/hosted-dropdown.component.ts @@ -22,6 +22,7 @@ import { tuiAsFocusableItemAccessor, tuiGetActualTarget, tuiGetClosestFocusable, + tuiInjectElement, tuiIsElement, tuiIsElementEditable, tuiIsHTMLElement, @@ -115,7 +116,7 @@ export class TuiHostedDropdownComponent implements TuiFocusableElementAccessor { optional: true, }); - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); private readonly openChange$ = new BehaviorSubject(false); private readonly hostHover$ = tuiTypedFromEvent(this.el, 'mouseover') .pipe( diff --git a/projects/core/components/loader/loader.component.ts b/projects/core/components/loader/loader.component.ts index 01921ef25215..a6b933526b42 100644 --- a/projects/core/components/loader/loader.component.ts +++ b/projects/core/components/loader/loader.component.ts @@ -2,7 +2,6 @@ import {DOCUMENT} from '@angular/common'; import { ChangeDetectionStrategy, Component, - ElementRef, HostBinding, inject, Input, @@ -10,6 +9,7 @@ import { import { TUI_IS_IOS, tuiBlurNativeFocused, + tuiInjectElement, tuiIsNativeFocusedIn, tuiIsSafari, } from '@taiga-ui/cdk'; @@ -26,7 +26,7 @@ import {TUI_LOADER_OPTIONS} from './loader.options'; }) export class TuiLoaderComponent { private readonly doc = inject(DOCUMENT); - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); private readonly isIOS = inject(TUI_IS_IOS); private readonly options = inject(TUI_LOADER_OPTIONS); diff --git a/projects/core/components/primitive-textfield/primitive-textfield.component.ts b/projects/core/components/primitive-textfield/primitive-textfield.component.ts index ed71760e988d..d13c21741df8 100644 --- a/projects/core/components/primitive-textfield/primitive-textfield.component.ts +++ b/projects/core/components/primitive-textfield/primitive-textfield.component.ts @@ -1,9 +1,8 @@ -import type {QueryList} from '@angular/core'; +import type {ElementRef, QueryList} from '@angular/core'; import { ChangeDetectionStrategy, Component, ContentChildren, - ElementRef, EventEmitter, HostBinding, HostListener, @@ -16,6 +15,7 @@ import type {TuiContext} from '@taiga-ui/cdk'; import { AbstractTuiInteractive, tuiAsFocusableItemAccessor, + tuiInjectElement, tuiIsNativeFocusedIn, tuiPure, tuiRetargetedBoundaryCrossing, @@ -63,7 +63,7 @@ export class TuiPrimitiveTextfieldComponent private readonly focusableElement?: ElementRef; private readonly options = inject(TUI_TEXTFIELD_OPTIONS); - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); @Input() public editable = true; diff --git a/projects/core/components/primitive-textfield/textfield/textfield.component.ts b/projects/core/components/primitive-textfield/textfield/textfield.component.ts index 0f0a5ce1c5c9..4ba11c0794e7 100644 --- a/projects/core/components/primitive-textfield/textfield/textfield.component.ts +++ b/projects/core/components/primitive-textfield/textfield/textfield.component.ts @@ -1,5 +1,5 @@ -import {ChangeDetectionStrategy, Component, ElementRef, inject} from '@angular/core'; -import {TuiIdService} from '@taiga-ui/cdk'; +import {ChangeDetectionStrategy, Component, inject} from '@angular/core'; +import {TuiIdService, tuiInjectElement} from '@taiga-ui/cdk'; import { TEXTFIELD_CONTROLLER_PROVIDER, TUI_TEXTFIELD_WATCHED_CONTROLLER, @@ -26,7 +26,7 @@ import {TUI_TEXTFIELD_HOST} from '@taiga-ui/core/tokens'; }, }) export class TuiTextfieldComponent { - private readonly el: HTMLInputElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); private readonly idService = inject(TuiIdService); protected readonly controller = inject(TUI_TEXTFIELD_WATCHED_CONTROLLER); protected readonly host = inject(TUI_TEXTFIELD_HOST); diff --git a/projects/core/components/scroll-controls/scrollbar.directive.ts b/projects/core/components/scroll-controls/scrollbar.directive.ts index aa3ce8e80088..e2cc959e1f8f 100644 --- a/projects/core/components/scroll-controls/scrollbar.directive.ts +++ b/projects/core/components/scroll-controls/scrollbar.directive.ts @@ -1,7 +1,7 @@ -import {Directive, ElementRef, inject, Input, NgZone} from '@angular/core'; +import {Directive, inject, Input, NgZone} from '@angular/core'; import {takeUntilDestroyed} from '@angular/core/rxjs-interop'; import {ANIMATION_FRAME} from '@ng-web-apis/common'; -import {POLLING_TIME, tuiScrollFrom, tuiZonefree} from '@taiga-ui/cdk'; +import {POLLING_TIME, tuiInjectElement, tuiScrollFrom, tuiZonefree} from '@taiga-ui/cdk'; import {TUI_SCROLL_REF} from '@taiga-ui/core/tokens'; import {merge, throttleTime} from 'rxjs'; @@ -15,8 +15,8 @@ const MIN_WIDTH = 24; providers: [TuiScrollbarService], }) export class TuiScrollbarDirective { - private readonly el: HTMLElement = inject(TUI_SCROLL_REF).nativeElement; - private readonly style: CSSStyleDeclaration = inject(ElementRef).nativeElement.style; + private readonly el = inject(TUI_SCROLL_REF).nativeElement; + private readonly style = tuiInjectElement().style; @Input() public tuiScrollbar: 'horizontal' | 'vertical' = 'vertical'; diff --git a/projects/core/components/scroll-controls/scrollbar.service.ts b/projects/core/components/scroll-controls/scrollbar.service.ts index df438f858816..57001e7b9128 100644 --- a/projects/core/components/scroll-controls/scrollbar.service.ts +++ b/projects/core/components/scroll-controls/scrollbar.service.ts @@ -1,11 +1,11 @@ -import {ElementRef, inject, Injectable, NgZone} from '@angular/core'; -import {tuiTypedFromEvent, tuiZonefree} from '@taiga-ui/cdk'; +import {inject, Injectable, NgZone} from '@angular/core'; +import {tuiInjectElement, tuiTypedFromEvent, tuiZonefree} from '@taiga-ui/cdk'; import {TUI_SCROLL_REF} from '@taiga-ui/core/tokens'; import {map, merge, Observable, switchMap, takeUntil} from 'rxjs'; @Injectable() export class TuiScrollbarService extends Observable<[number, number]> { - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); private readonly element = inject(TUI_SCROLL_REF).nativeElement; private readonly scroll$ = merge( tuiTypedFromEvent(this.el.parentElement!, 'mousedown').pipe( diff --git a/projects/core/components/scrollbar/scrollable.directive.ts b/projects/core/components/scrollbar/scrollable.directive.ts index 9d1b3485f33c..b84f7695f2e6 100644 --- a/projects/core/components/scrollbar/scrollable.directive.ts +++ b/projects/core/components/scrollbar/scrollable.directive.ts @@ -1,5 +1,6 @@ import type {OnInit} from '@angular/core'; -import {Directive, ElementRef, inject} from '@angular/core'; +import {Directive} from '@angular/core'; +import {tuiInjectElement} from '@taiga-ui/cdk'; import {TUI_SCROLLABLE} from '@taiga-ui/core/constants'; @Directive({ @@ -7,7 +8,7 @@ import {TUI_SCROLLABLE} from '@taiga-ui/core/constants'; selector: '[tuiScrollable]', }) export class TuiScrollableDirective implements OnInit { - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); public ngOnInit(): void { this.el.dispatchEvent( diff --git a/projects/core/components/scrollbar/scrollbar.component.ts b/projects/core/components/scrollbar/scrollbar.component.ts index 75804cc61712..968073f95574 100644 --- a/projects/core/components/scrollbar/scrollbar.component.ts +++ b/projects/core/components/scrollbar/scrollbar.component.ts @@ -7,7 +7,7 @@ import { inject, Input, } from '@angular/core'; -import {TUI_IS_IOS, tuiGetElementOffset} from '@taiga-ui/cdk'; +import {TUI_IS_IOS, tuiGetElementOffset, tuiInjectElement} from '@taiga-ui/cdk'; import {TuiScrollControlsComponent} from '@taiga-ui/core/components/scroll-controls'; import {TUI_SCROLL_INTO_VIEW, TUI_SCROLLABLE} from '@taiga-ui/core/constants'; import {TUI_SCROLL_REF} from '@taiga-ui/core/tokens'; @@ -28,7 +28,7 @@ import {TUI_SCROLL_REF} from '@taiga-ui/core/tokens'; ], }) export class TuiScrollbarComponent { - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); @Input() public hidden = false; diff --git a/projects/core/components/svg/svg.component.ts b/projects/core/components/svg/svg.component.ts index ad2e289dbf0c..aa16448a63e5 100644 --- a/projects/core/components/svg/svg.component.ts +++ b/projects/core/components/svg/svg.component.ts @@ -3,7 +3,6 @@ import {AsyncPipe, DOCUMENT, NgIf} from '@angular/common'; import { ChangeDetectionStrategy, Component, - ElementRef, inject, Input, SecurityContext, @@ -15,6 +14,7 @@ import type {TuiSafeHtml} from '@taiga-ui/cdk'; import { TUI_BASE_HREF, tuiGetDocumentOrShadowRoot, + tuiInjectElement, tuiIsString, TuiLetDirective, tuiPure, @@ -53,7 +53,7 @@ export class TuiSvgComponent { private readonly svgService = inject(TuiSvgService); private readonly staticRequestService = inject(TuiStaticRequestService); private readonly sanitizer = inject(DomSanitizer); - private readonly el: Element = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); private readonly baseHref = inject(TUI_BASE_HREF); private readonly src$ = new ReplaySubject(1); private readonly srcInterceptors = inject(TUI_SVG_SRC_INTERCEPTORS, { diff --git a/projects/core/directives/dropdown/dropdown-hover.directive.ts b/projects/core/directives/dropdown/dropdown-hover.directive.ts index 687c6422aad9..9877d50ec351 100644 --- a/projects/core/directives/dropdown/dropdown-hover.directive.ts +++ b/projects/core/directives/dropdown/dropdown-hover.directive.ts @@ -11,6 +11,7 @@ import { import { TuiActiveZoneDirective, tuiGetActualTarget, + tuiInjectElement, tuiIsElement, tuiTypedFromEvent, tuiZoneOptimized, @@ -30,7 +31,7 @@ export class TuiDropdownHoverDirective extends TuiDriver { @ContentChild('tuiDropdownHost', {descendants: true, read: ElementRef}) private readonly dropdownHost?: ElementRef; - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); private readonly doc = inject(DOCUMENT); private readonly options = inject(TUI_DROPDOWN_HOVER_OPTIONS); private readonly activeZone = inject(TuiActiveZoneDirective); diff --git a/projects/core/directives/dropdown/dropdown-open.directive.ts b/projects/core/directives/dropdown/dropdown-open.directive.ts index 1e1e2cb67274..164cabb91b39 100644 --- a/projects/core/directives/dropdown/dropdown-open.directive.ts +++ b/projects/core/directives/dropdown/dropdown-open.directive.ts @@ -15,6 +15,7 @@ import { TuiActiveZoneDirective, tuiGetActualTarget, tuiGetClosestFocusable, + tuiInjectElement, tuiIsElement, tuiIsElementEditable, tuiIsHTMLElement, @@ -71,7 +72,7 @@ export class TuiDropdownOpenDirective implements OnChanges { // TODO: Remove optional after refactor is complete private readonly directive = inject(TuiDropdownDirective, {optional: true}); - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); private readonly driver = inject(TuiDropdownDriver); private readonly obscured = inject(TuiObscuredDirective); diff --git a/projects/core/directives/dropdown/dropdown-selection.directive.ts b/projects/core/directives/dropdown/dropdown-selection.directive.ts index de3b424e0386..8b589e5fafd0 100644 --- a/projects/core/directives/dropdown/dropdown-selection.directive.ts +++ b/projects/core/directives/dropdown/dropdown-selection.directive.ts @@ -1,6 +1,6 @@ import {DOCUMENT} from '@angular/common'; import type {OnDestroy} from '@angular/core'; -import {Directive, ElementRef, inject, Input, ViewContainerRef} from '@angular/core'; +import {Directive, inject, Input, ViewContainerRef} from '@angular/core'; import type {TuiBooleanHandler} from '@taiga-ui/cdk'; import { CHAR_NO_BREAK_SPACE, @@ -9,6 +9,7 @@ import { TUI_RANGE, TUI_TRUE_HANDLER, tuiGetNativeFocused, + tuiInjectElement, tuiIsElement, tuiIsString, tuiIsTextfield, @@ -45,7 +46,7 @@ export class TuiDropdownSelectionDirective protected readonly doc = inject(DOCUMENT); protected readonly vcr = inject(ViewContainerRef); protected readonly dropdown = inject(TuiDropdownDirective); - protected readonly el: HTMLElement = inject(ElementRef).nativeElement; + protected readonly el = tuiInjectElement(); protected readonly handler$ = new BehaviorSubject>( TUI_TRUE_HANDLER, ); diff --git a/projects/core/directives/dropdown/dropdown.component.ts b/projects/core/directives/dropdown/dropdown.component.ts index 30dda4277d82..49b05c34aada 100644 --- a/projects/core/directives/dropdown/dropdown.component.ts +++ b/projects/core/directives/dropdown/dropdown.component.ts @@ -1,10 +1,11 @@ import type {OnInit} from '@angular/core'; -import {ChangeDetectionStrategy, Component, ElementRef, inject} from '@angular/core'; +import {ChangeDetectionStrategy, Component, inject} from '@angular/core'; import {takeUntilDestroyed} from '@angular/core/rxjs-interop'; import {WINDOW} from '@ng-web-apis/common'; import { TuiActiveZoneDirective, tuiGetClosestFocusable, + tuiInjectElement, tuiIsElement, tuiPx, } from '@taiga-ui/cdk'; @@ -53,7 +54,7 @@ import {TuiDropdownPositionDirective} from './dropdown-position.directive'; animations: [tuiDropdownAnimation], }) export class TuiDropdownComponent implements OnInit { - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); private readonly accessor = inject(TuiRectAccessor); private readonly win = inject(WINDOW); private readonly viewport = inject(TuiVisualViewportService); diff --git a/projects/core/directives/dropdown/dropdown.directive.ts b/projects/core/directives/dropdown/dropdown.directive.ts index 64301a624e29..2b9dc30947c9 100644 --- a/projects/core/directives/dropdown/dropdown.directive.ts +++ b/projects/core/directives/dropdown/dropdown.directive.ts @@ -2,7 +2,6 @@ import type {AfterViewChecked, ComponentRef, OnChanges, OnDestroy} from '@angula import { ChangeDetectorRef, Directive, - ElementRef, inject, INJECTOR, Input, @@ -10,7 +9,7 @@ import { } from '@angular/core'; import {takeUntilDestroyed} from '@angular/core/rxjs-interop'; import type {TuiActiveZoneDirective, TuiContext} from '@taiga-ui/cdk'; -import {tuiPure} from '@taiga-ui/cdk'; +import {tuiInjectElement, tuiPure} from '@taiga-ui/cdk'; import type {TuiRectAccessor, TuiVehicle} from '@taiga-ui/core/abstract'; import {tuiAsRectAccessor, tuiAsVehicle} from '@taiga-ui/core/abstract'; import type {TuiPortalItem} from '@taiga-ui/core/interfaces'; @@ -47,7 +46,7 @@ export class TuiDropdownDirective private readonly service = inject(TuiDropdownService); private readonly cdr = inject(ChangeDetectorRef); - public readonly el: HTMLElement = inject(ElementRef).nativeElement; + public readonly el = tuiInjectElement(); public readonly type = 'dropdown'; public readonly component = new PolymorpheusComponent( inject(TUI_DROPDOWN_COMPONENT), diff --git a/projects/core/directives/hint/hint-describe.directive.ts b/projects/core/directives/hint/hint-describe.directive.ts index d471688259eb..5be0b6512ac4 100644 --- a/projects/core/directives/hint/hint-describe.directive.ts +++ b/projects/core/directives/hint/hint-describe.directive.ts @@ -1,8 +1,9 @@ import {DOCUMENT} from '@angular/common'; import type {OnChanges} from '@angular/core'; -import {Directive, ElementRef, inject, Input, NgZone} from '@angular/core'; +import {Directive, inject, Input, NgZone} from '@angular/core'; import { tuiIfMap, + tuiInjectElement, tuiIsNativeFocused, tuiIsPresent, tuiPure, @@ -31,7 +32,7 @@ import { export class TuiHintDescribeDirective extends TuiDriver implements OnChanges { private readonly zone = inject(NgZone); private readonly doc = inject(DOCUMENT); - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); private readonly id$ = new ReplaySubject(1); private readonly stream$ = this.id$.pipe( tuiIfMap(() => fromEvent(this.doc, 'keydown', {capture: true}), tuiIsPresent), diff --git a/projects/core/directives/hint/hint-hover.directive.ts b/projects/core/directives/hint/hint-hover.directive.ts index 70189fe4d2d3..df28fc719ba4 100644 --- a/projects/core/directives/hint/hint-hover.directive.ts +++ b/projects/core/directives/hint/hint-hover.directive.ts @@ -1,6 +1,6 @@ /* eslint-disable rxjs/no-unsafe-takeuntil */ -import {Directive, ElementRef, inject, Input} from '@angular/core'; -import {TuiHoveredService} from '@taiga-ui/cdk'; +import {Directive, inject, Input} from '@angular/core'; +import {TuiHoveredService, tuiInjectElement} from '@taiga-ui/cdk'; import {tuiAsDriver, TuiDriver} from '@taiga-ui/core/abstract'; import {tuiIsObscured} from '@taiga-ui/core/utils'; import { @@ -64,7 +64,7 @@ export class TuiHintHoverDirective extends TuiDriver { public enabled = true; - public readonly el: HTMLElement = inject(ElementRef).nativeElement; + public readonly el = tuiInjectElement(); constructor() { super(subscriber => this.stream$.subscribe(subscriber)); diff --git a/projects/core/directives/hint/hint.component.ts b/projects/core/directives/hint/hint.component.ts index c3928e95ebda..dfe4885d4ea6 100644 --- a/projects/core/directives/hint/hint.component.ts +++ b/projects/core/directives/hint/hint.component.ts @@ -1,7 +1,6 @@ import { ChangeDetectionStrategy, Component, - ElementRef, HostBinding, HostListener, inject, @@ -12,6 +11,7 @@ import { EMPTY_CLIENT_RECT, tuiClamp, TuiHoveredService, + tuiInjectElement, tuiPure, tuiPx, } from '@taiga-ui/cdk'; @@ -65,7 +65,7 @@ export class TuiHintComponent { private readonly polymorpheus = inject>>(POLYMORPHEUS_CONTEXT); - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); private readonly hover = inject(TuiHintHoverDirective); private readonly visualViewportService = inject(TuiVisualViewportService); private readonly viewport = inject(TUI_VIEWPORT); diff --git a/projects/core/directives/hint/hint.directive.ts b/projects/core/directives/hint/hint.directive.ts index d49872e3627a..0e56dea9a820 100644 --- a/projects/core/directives/hint/hint.directive.ts +++ b/projects/core/directives/hint/hint.directive.ts @@ -1,6 +1,6 @@ import type {OnChanges, OnDestroy} from '@angular/core'; -import {Directive, ElementRef, inject, INJECTOR, Input} from '@angular/core'; -import {TuiActiveZoneDirective} from '@taiga-ui/cdk'; +import {Directive, inject, INJECTOR, Input} from '@angular/core'; +import {TuiActiveZoneDirective, tuiInjectElement} from '@taiga-ui/cdk'; import type {TuiRectAccessor, TuiVehicle} from '@taiga-ui/core/abstract'; import {tuiAsRectAccessor, tuiAsVehicle} from '@taiga-ui/core/abstract'; import type {TuiPortalItem} from '@taiga-ui/core/interfaces'; @@ -39,7 +39,7 @@ export class TuiHintDirective public tuiHintAppearance: string | null = null; public component = inject(PolymorpheusComponent); - public readonly el: HTMLElement = inject(ElementRef).nativeElement; + public readonly el = tuiInjectElement(); public readonly activeZone? = inject(TuiActiveZoneDirective, {optional: true}); public readonly type = 'hint'; diff --git a/projects/core/directives/scroll-into-view/scroll-into-view.directive.ts b/projects/core/directives/scroll-into-view/scroll-into-view.directive.ts index 0388dadd20a2..553ab0c0f4fd 100644 --- a/projects/core/directives/scroll-into-view/scroll-into-view.directive.ts +++ b/projects/core/directives/scroll-into-view/scroll-into-view.directive.ts @@ -1,5 +1,6 @@ -import {DestroyRef, Directive, ElementRef, inject, Input} from '@angular/core'; +import {DestroyRef, Directive, inject, Input} from '@angular/core'; import {takeUntilDestroyed} from '@angular/core/rxjs-interop'; +import {tuiInjectElement} from '@taiga-ui/cdk'; import {TUI_SCROLL_INTO_VIEW} from '@taiga-ui/core/constants'; import {timer} from 'rxjs'; @@ -10,7 +11,7 @@ import {timer} from 'rxjs'; selector: '[tuiScrollIntoView]', }) export class TuiScrollIntoViewDirective { - private readonly el: Element = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); private readonly destroyRef = inject(DestroyRef); @Input() diff --git a/projects/core/pipes/fallback-src/fallback-src.pipe.ts b/projects/core/pipes/fallback-src/fallback-src.pipe.ts index 7f3aece42c46..81beb483dfe0 100644 --- a/projects/core/pipes/fallback-src/fallback-src.pipe.ts +++ b/projects/core/pipes/fallback-src/fallback-src.pipe.ts @@ -1,5 +1,6 @@ import type {PipeTransform} from '@angular/core'; -import {ElementRef, inject, Pipe} from '@angular/core'; +import {Pipe} from '@angular/core'; +import {tuiInjectElement} from '@taiga-ui/cdk'; import {TUI_ICON_ERROR} from '@taiga-ui/core/constants'; import type {Observable} from 'rxjs'; import {fromEvent, map, merge, startWith} from 'rxjs'; @@ -9,7 +10,7 @@ import {fromEvent, map, merge, startWith} from 'rxjs'; name: 'tuiFallbackSrc', }) export class TuiFallbackSrcPipe implements PipeTransform { - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); public transform(src: string, fallback: string): Observable { return merge( diff --git a/projects/core/services/position.service.ts b/projects/core/services/position.service.ts index e8b0bfdc0a4c..b746dae29860 100644 --- a/projects/core/services/position.service.ts +++ b/projects/core/services/position.service.ts @@ -1,13 +1,13 @@ -import {ElementRef, inject, Injectable, NgZone} from '@angular/core'; +import {inject, Injectable, NgZone} from '@angular/core'; import {ANIMATION_FRAME} from '@ng-web-apis/common'; -import {EMPTY_CLIENT_RECT, tuiZonefree} from '@taiga-ui/cdk'; +import {EMPTY_CLIENT_RECT, tuiInjectElement, tuiZonefree} from '@taiga-ui/cdk'; import {TuiPositionAccessor} from '@taiga-ui/core/abstract'; import type {TuiPoint} from '@taiga-ui/core/types'; import {finalize, map, Observable} from 'rxjs'; @Injectable() export class TuiPositionService extends Observable { - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); private readonly accessor = inject(TuiPositionAccessor); constructor() { diff --git a/projects/demo/src/modules/components/group/group.module.ts b/projects/demo/src/modules/components/group/group.module.ts index 29733df32b5d..1cdd61d05e66 100644 --- a/projects/demo/src/modules/components/group/group.module.ts +++ b/projects/demo/src/modules/components/group/group.module.ts @@ -23,7 +23,6 @@ import { TuiInputModule, TuiInputNumberModule, TuiMultiSelectModule, - TuiProjectClassModule, TuiRadioComponent, TuiSelectModule, } from '@taiga-ui/kit'; @@ -36,7 +35,6 @@ import {ExampleTuiGroupComponent} from './group.component'; @NgModule({ imports: [ - TuiProjectClassModule, TuiLinkDirective, TuiBadgeDirective, TuiButtonDirective, diff --git a/projects/demo/src/modules/components/hosted-dropdown/examples/5/accessor.ts b/projects/demo/src/modules/components/hosted-dropdown/examples/5/accessor.ts index 997c421440cd..866246d8c315 100644 --- a/projects/demo/src/modules/components/hosted-dropdown/examples/5/accessor.ts +++ b/projects/demo/src/modules/components/hosted-dropdown/examples/5/accessor.ts @@ -1,4 +1,5 @@ -import {Directive, ElementRef, inject} from '@angular/core'; +import {Directive} from '@angular/core'; +import {tuiInjectElement} from '@taiga-ui/cdk'; import type {TuiPoint} from '@taiga-ui/core'; import {tuiAsPositionAccessor, TuiPositionAccessor} from '@taiga-ui/core'; @@ -7,7 +8,7 @@ import {tuiAsPositionAccessor, TuiPositionAccessor} from '@taiga-ui/core'; providers: [tuiAsPositionAccessor(TopRightDirective)], }) export class TopRightDirective extends TuiPositionAccessor { - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); public readonly type = 'dropdown'; diff --git a/projects/demo/src/modules/customization/viewport/examples/1/index.ts b/projects/demo/src/modules/customization/viewport/examples/1/index.ts index aa379b1f3fc7..fb64d0aa2726 100644 --- a/projects/demo/src/modules/customization/viewport/examples/1/index.ts +++ b/projects/demo/src/modules/customization/viewport/examples/1/index.ts @@ -1,6 +1,7 @@ -import {Component, ElementRef, inject} from '@angular/core'; +import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; +import {tuiInjectElement} from '@taiga-ui/cdk'; import { tuiAsViewport, TuiDropdownDirective, @@ -19,7 +20,7 @@ import { providers: [tuiAsViewport(TuiViewportExample1)], }) export class TuiViewportExample1 extends TuiRectAccessor { - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); public readonly type = 'viewport'; diff --git a/projects/demo/src/modules/customization/viewport/examples/2/portal-host.ts b/projects/demo/src/modules/customization/viewport/examples/2/portal-host.ts index 501c075bf3d5..2179e4051255 100644 --- a/projects/demo/src/modules/customization/viewport/examples/2/portal-host.ts +++ b/projects/demo/src/modules/customization/viewport/examples/2/portal-host.ts @@ -1,5 +1,5 @@ -import {ChangeDetectionStrategy, Component, ElementRef, inject} from '@angular/core'; -import {tuiAsPortal, TuiPortalsComponent} from '@taiga-ui/cdk'; +import {ChangeDetectionStrategy, Component} from '@angular/core'; +import {tuiAsPortal, tuiInjectElement, TuiPortalsComponent} from '@taiga-ui/cdk'; import type {TuiRectAccessor} from '@taiga-ui/core'; import {tuiAsViewport, TuiDropdownService} from '@taiga-ui/core'; @@ -18,7 +18,7 @@ import {tuiAsViewport, TuiDropdownService} from '@taiga-ui/core'; ], }) export class PortalHost extends TuiPortalsComponent implements TuiRectAccessor { - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); public readonly type = 'viewport'; diff --git a/projects/demo/src/modules/directives/dropdown-open/examples/5/accessor.ts b/projects/demo/src/modules/directives/dropdown-open/examples/5/accessor.ts index 997c421440cd..31cfe58da3c2 100644 --- a/projects/demo/src/modules/directives/dropdown-open/examples/5/accessor.ts +++ b/projects/demo/src/modules/directives/dropdown-open/examples/5/accessor.ts @@ -1,4 +1,5 @@ -import {Directive, ElementRef, inject} from '@angular/core'; +import {Directive} from '@angular/core'; +import {tuiInjectElement} from '@taiga-ui/cdk'; import type {TuiPoint} from '@taiga-ui/core'; import {tuiAsPositionAccessor, TuiPositionAccessor} from '@taiga-ui/core'; @@ -7,11 +8,11 @@ import {tuiAsPositionAccessor, TuiPositionAccessor} from '@taiga-ui/core'; providers: [tuiAsPositionAccessor(TopRightDirective)], }) export class TopRightDirective extends TuiPositionAccessor { - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); public readonly type = 'dropdown'; - public getPosition({height}: ClientRect): TuiPoint { + public getPosition({height}: DOMRect): TuiPoint { const {right, top} = this.el.getBoundingClientRect(); return [top - height, right]; diff --git a/projects/demo/src/modules/utils/browser/examples/1/index.ts b/projects/demo/src/modules/utils/browser/examples/1/index.ts index e1c616b8a72c..a7bd596229cc 100644 --- a/projects/demo/src/modules/utils/browser/examples/1/index.ts +++ b/projects/demo/src/modules/utils/browser/examples/1/index.ts @@ -1,8 +1,8 @@ -import {Component, ElementRef, inject} from '@angular/core'; +import {Component, inject} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {USER_AGENT} from '@ng-web-apis/common'; -import {tuiIsEdge, tuiIsFirefox, tuiIsSafari} from '@taiga-ui/cdk'; +import {tuiInjectElement, tuiIsEdge, tuiIsFirefox, tuiIsSafari} from '@taiga-ui/cdk'; @Component({ selector: 'tui-browser-example-1', @@ -12,7 +12,7 @@ import {tuiIsEdge, tuiIsFirefox, tuiIsSafari} from '@taiga-ui/cdk'; }) export class TuiBrowserExample1 { private readonly userAgent = inject(USER_AGENT); - private readonly el: Element = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); protected get aboutMyBrowser(): string { if (tuiIsEdge(this.userAgent)) { diff --git a/projects/experimental/components/textfield/label.directive.ts b/projects/experimental/components/textfield/label.directive.ts index c0984774fc3a..afb61d8abde2 100644 --- a/projects/experimental/components/textfield/label.directive.ts +++ b/projects/experimental/components/textfield/label.directive.ts @@ -1,5 +1,5 @@ -import {ContentChild, Directive, ElementRef, forwardRef, inject} from '@angular/core'; -import {tuiWithStyles} from '@taiga-ui/cdk'; +import {ContentChild, Directive, forwardRef, inject} from '@angular/core'; +import {tuiInjectElement, tuiWithStyles} from '@taiga-ui/cdk'; import {TuiLabelComponent} from './label.component'; import {TuiTextfieldComponent} from './textfield.component'; @@ -16,7 +16,7 @@ export class TuiLabelDirective { @ContentChild(forwardRef(() => TuiTextfieldComponent)) protected readonly textfield?: unknown; - protected readonly el: HTMLLabelElement = inject(ElementRef).nativeElement; + protected readonly el = tuiInjectElement(); protected readonly nothing = tuiWithStyles(TuiLabelComponent); protected readonly parent = inject( forwardRef(() => TuiTextfieldComponent), diff --git a/projects/experimental/components/textfield/textfield.directive.ts b/projects/experimental/components/textfield/textfield.directive.ts index 6c5a41571338..57417a927382 100644 --- a/projects/experimental/components/textfield/textfield.directive.ts +++ b/projects/experimental/components/textfield/textfield.directive.ts @@ -1,6 +1,6 @@ import type {DoCheck} from '@angular/core'; -import {Directive, ElementRef, inject, Input} from '@angular/core'; -import {TuiIdService, TuiNativeValidatorDirective} from '@taiga-ui/cdk'; +import {Directive, inject, Input} from '@angular/core'; +import {TuiIdService, tuiInjectElement, TuiNativeValidatorDirective} from '@taiga-ui/cdk'; import type {TuiInteractiveState} from '@taiga-ui/core'; import {TuiAppearanceDirective} from '@taiga-ui/core'; @@ -40,7 +40,7 @@ export class TuiTextfieldDirective implements DoCheck { protected readonly textfield = inject(TuiTextfieldComponent); protected readonly id = inject(TuiIdService).generate(); - protected readonly el: HTMLInputElement = inject(ElementRef).nativeElement; + protected readonly el = tuiInjectElement(); public ngDoCheck(): void { this.appearance.tuiAppearance = this.options.appearance; diff --git a/projects/kit/abstract/abstract-native-select.ts b/projects/kit/abstract/abstract-native-select.ts index 23e812f9ec62..6d87f8eba27e 100644 --- a/projects/kit/abstract/abstract-native-select.ts +++ b/projects/kit/abstract/abstract-native-select.ts @@ -1,6 +1,5 @@ import { Directive, - ElementRef, HostBinding, inject, Input, @@ -8,7 +7,7 @@ import { ViewChild, } from '@angular/core'; import type {TuiBooleanHandler} from '@taiga-ui/cdk'; -import {AbstractTuiControl, TuiIdService} from '@taiga-ui/cdk'; +import {AbstractTuiControl, TuiIdService, tuiInjectElement} from '@taiga-ui/cdk'; import type {TuiTextfieldHost} from '@taiga-ui/core'; import {TUI_TEXTFIELD_HOST, TuiDataListDirective} from '@taiga-ui/core'; import {TUI_ITEMS_HANDLERS} from '@taiga-ui/kit/tokens'; @@ -23,7 +22,7 @@ export abstract class AbstractTuiNativeSelect @ViewChild(TuiDataListDirective, {read: TemplateRef, static: true}) protected readonly datalist: TemplateRef | null = null; - protected readonly el: HTMLSelectElement = inject(ElementRef).nativeElement; + protected readonly el = tuiInjectElement(); protected readonly host = inject(TUI_TEXTFIELD_HOST); protected readonly control = inject(AbstractTuiControl); protected readonly itemsHandlers = inject(TUI_ITEMS_HANDLERS); diff --git a/projects/kit/components/carousel/carousel-scroll.directive.ts b/projects/kit/components/carousel/carousel-scroll.directive.ts index d8663dcc391b..e2ffcc80211c 100644 --- a/projects/kit/components/carousel/carousel-scroll.directive.ts +++ b/projects/kit/components/carousel/carousel-scroll.directive.ts @@ -1,12 +1,12 @@ -import {Directive, ElementRef, inject, Output} from '@angular/core'; -import {tuiTypedFromEvent} from '@taiga-ui/cdk'; +import {Directive, Output} from '@angular/core'; +import {tuiInjectElement, tuiTypedFromEvent} from '@taiga-ui/cdk'; import {filter, map, tap, throttleTime} from 'rxjs'; @Directive({ selector: '[tuiCarouselScroll]', }) export class TuiCarouselScrollDirective { - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); @Output() public readonly tuiCarouselScroll = tuiTypedFromEvent(this.el, 'wheel').pipe( diff --git a/projects/kit/components/carousel/carousel.component.ts b/projects/kit/components/carousel/carousel.component.ts index 19452e3c4901..319424daa4a7 100644 --- a/projects/kit/components/carousel/carousel.component.ts +++ b/projects/kit/components/carousel/carousel.component.ts @@ -4,7 +4,6 @@ import { ChangeDetectorRef, Component, ContentChildren, - ElementRef, EventEmitter, HostBinding, HostListener, @@ -18,6 +17,7 @@ import { EMPTY_QUERY, TUI_IS_MOBILE, tuiClamp, + tuiInjectElement, TuiItemDirective, tuiPure, } from '@taiga-ui/cdk'; @@ -29,7 +29,7 @@ import { changeDetection: ChangeDetectionStrategy.OnPush, }) export class TuiCarouselComponent { - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); private readonly cdr = inject(ChangeDetectorRef); private readonly isMobile = inject(TUI_IS_MOBILE); private translate = 0; diff --git a/projects/kit/components/carousel/carousel.directive.ts b/projects/kit/components/carousel/carousel.directive.ts index 0b74f739b449..458a835c7af3 100644 --- a/projects/kit/components/carousel/carousel.directive.ts +++ b/projects/kit/components/carousel/carousel.directive.ts @@ -1,9 +1,10 @@ -import {Directive, ElementRef, inject, Input} from '@angular/core'; +import {Directive, inject, Input} from '@angular/core'; import {PAGE_VISIBILITY} from '@ng-web-apis/common'; import { TUI_FALSE_HANDLER, TUI_TRUE_HANDLER, tuiIfMap, + tuiInjectElement, tuiTypedFromEvent, } from '@taiga-ui/cdk'; import {BehaviorSubject, combineLatest, interval, map, merge, Observable} from 'rxjs'; @@ -12,7 +13,7 @@ import {BehaviorSubject, combineLatest, interval, map, merge, Observable} from ' selector: 'tui-carousel', }) export class TuiCarouselDirective extends Observable { - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); private readonly visible$ = inject(PAGE_VISIBILITY); private readonly duration$ = new BehaviorSubject(0); private readonly running$ = merge( diff --git a/projects/kit/components/checkbox/checkbox.component.ts b/projects/kit/components/checkbox/checkbox.component.ts index 23d7fdc66323..efcd3a7b03be 100644 --- a/projects/kit/components/checkbox/checkbox.component.ts +++ b/projects/kit/components/checkbox/checkbox.component.ts @@ -3,13 +3,17 @@ import { ChangeDetectionStrategy, Component, DestroyRef, - ElementRef, inject, Input, } from '@angular/core'; import {takeUntilDestroyed} from '@angular/core/rxjs-interop'; import {NgControl, NgModel} from '@angular/forms'; -import {tuiControlValue, tuiIsString, TuiNativeValidatorDirective} from '@taiga-ui/cdk'; +import { + tuiControlValue, + tuiInjectElement, + tuiIsString, + TuiNativeValidatorDirective, +} from '@taiga-ui/cdk'; import type {TuiSizeS} from '@taiga-ui/core'; import {TUI_ICON_RESOLVER, TuiAppearanceDirective} from '@taiga-ui/core'; @@ -45,7 +49,7 @@ export class TuiCheckboxComponent implements OnInit, DoCheck { private readonly options = inject(TUI_CHECKBOX_OPTIONS); private readonly resolver = inject(TUI_ICON_RESOLVER); private readonly destroyRef = inject(DestroyRef); - private readonly el: HTMLInputElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); @Input() public size: TuiSizeS = this.options.size; diff --git a/projects/kit/components/elastic-container/elastic-container.directive.ts b/projects/kit/components/elastic-container/elastic-container.directive.ts index b46bf94752a2..6f1056c27a34 100644 --- a/projects/kit/components/elastic-container/elastic-container.directive.ts +++ b/projects/kit/components/elastic-container/elastic-container.directive.ts @@ -1,9 +1,10 @@ -import {Directive, ElementRef, inject, Output} from '@angular/core'; +import {Directive, inject, Output} from '@angular/core'; import { MUTATION_OBSERVER_INIT, MutationObserverService, } from '@ng-web-apis/mutation-observer'; import {ResizeObserverService} from '@ng-web-apis/resize-observer'; +import {tuiInjectElement} from '@taiga-ui/cdk'; import {debounceTime, distinctUntilChanged, map, merge} from 'rxjs'; @Directive({ @@ -22,7 +23,7 @@ import {debounceTime, distinctUntilChanged, map, merge} from 'rxjs'; ], }) export class TuiElasticContainerDirective { - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); private readonly resize$ = inject(ResizeObserverService); private readonly mutation$ = inject(MutationObserverService); diff --git a/projects/kit/components/files/input-files/input-files.directive.ts b/projects/kit/components/files/input-files/input-files.directive.ts index b3ba788a8b62..055671faeae6 100644 --- a/projects/kit/components/files/input-files/input-files.directive.ts +++ b/projects/kit/components/files/input-files/input-files.directive.ts @@ -1,9 +1,10 @@ import {coerceArray} from '@angular/cdk/coercion'; -import {Directive, ElementRef, forwardRef, inject, Output} from '@angular/core'; +import {Directive, forwardRef, inject, Output} from '@angular/core'; import { AbstractTuiNullableControl, EMPTY_ARRAY, tuiControlValue, + tuiInjectElement, tuiIsNativeFocused, } from '@taiga-ui/cdk'; import type {TuiAppearanceOptions} from '@taiga-ui/core'; @@ -52,7 +53,7 @@ export class TuiInputFilesDirective ); public readonly appearance = 'file'; - public readonly input: HTMLInputElement = inject(ElementRef).nativeElement; + public readonly input = tuiInjectElement(); protected readonly host = inject(forwardRef(() => TuiInputFilesComponent)); diff --git a/projects/kit/components/filter/filter.component.ts b/projects/kit/components/filter/filter.component.ts index 8af248f3c387..90d9ca1562f0 100644 --- a/projects/kit/components/filter/filter.component.ts +++ b/projects/kit/components/filter/filter.component.ts @@ -1,10 +1,8 @@ import { ChangeDetectionStrategy, Component, - ElementRef, EventEmitter, HostBinding, - inject, Input, Output, } from '@angular/core'; @@ -13,6 +11,7 @@ import { AbstractTuiMultipleControl, TUI_DEFAULT_IDENTITY_MATCHER, TUI_FALSE_HANDLER, + tuiInjectElement, tuiIsNativeFocusedIn, } from '@taiga-ui/cdk'; import type {TuiSizeL, TuiSizeS, TuiSizeXL, TuiSizeXS} from '@taiga-ui/core'; @@ -33,7 +32,7 @@ const badgeSizeMap: Record = { changeDetection: ChangeDetectionStrategy.OnPush, }) export class TuiFilterComponent extends AbstractTuiMultipleControl { - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); @Input() public identityMatcher: TuiIdentityMatcher = TUI_DEFAULT_IDENTITY_MATCHER; diff --git a/projects/kit/components/input-range/input-range.component.ts b/projects/kit/components/input-range/input-range.component.ts index 54b09f3571ea..6cf298be6835 100644 --- a/projects/kit/components/input-range/input-range.component.ts +++ b/projects/kit/components/input-range/input-range.component.ts @@ -2,7 +2,6 @@ import type {QueryList} from '@angular/core'; import { ChangeDetectionStrategy, Component, - ElementRef, inject, Input, ViewChild, @@ -20,6 +19,7 @@ import { tuiAsControl, tuiAsFocusableItemAccessor, tuiClamp, + tuiInjectElement, tuiIsNativeFocused, tuiIsNativeFocusedIn, tuiPure, @@ -63,7 +63,7 @@ export class TuiInputRangeComponent private readonly rangeRef: TuiRangeComponent | null = null; private readonly isMobile = inject(TUI_IS_MOBILE); - private readonly el: Element = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); @Input() public min = 0; diff --git a/projects/kit/components/input-tag/input-tag.component.ts b/projects/kit/components/input-tag/input-tag.component.ts index 7d42336f9922..1f02838fead4 100644 --- a/projects/kit/components/input-tag/input-tag.component.ts +++ b/projects/kit/components/input-tag/input-tag.component.ts @@ -31,6 +31,7 @@ import { tuiAsFocusableItemAccessor, tuiGetActualTarget, tuiGetClipboardDataText, + tuiInjectElement, tuiIsElement, tuiIsNativeFocusedIn, tuiRetargetedBoundaryCrossing, @@ -102,7 +103,7 @@ export class TuiInputTagComponent @ViewChild(TuiScrollbarComponent, {read: ElementRef}) private readonly scrollBar?: ElementRef; - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); private readonly options = inject(TUI_INPUT_TAG_OPTIONS); @Input() diff --git a/projects/kit/components/items-with-more/items-with-more.service.ts b/projects/kit/components/items-with-more/items-with-more.service.ts index f5214cb0410a..8aba0264a5b5 100644 --- a/projects/kit/components/items-with-more/items-with-more.service.ts +++ b/projects/kit/components/items-with-more/items-with-more.service.ts @@ -1,14 +1,14 @@ -import {ElementRef, inject, Injectable, NgZone} from '@angular/core'; +import {inject, Injectable, NgZone} from '@angular/core'; import {MutationObserverService} from '@ng-web-apis/mutation-observer'; import {ResizeObserverService} from '@ng-web-apis/resize-observer'; -import {tuiClamp, tuiZoneOptimized} from '@taiga-ui/cdk'; +import {tuiClamp, tuiInjectElement, tuiZoneOptimized} from '@taiga-ui/cdk'; import {distinctUntilChanged, map, merge, Observable, share, throttleTime} from 'rxjs'; import {TuiItemsWithMoreDirective} from './items-with-more.directive'; @Injectable() export class TuiItemsWithMoreService extends Observable { - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); private readonly directive = inject(TuiItemsWithMoreDirective); protected readonly stream$ = merge( diff --git a/projects/kit/components/line-clamp/line-clamp.component.ts b/projects/kit/components/line-clamp/line-clamp.component.ts index 69e4e3719503..73629b89e8d6 100644 --- a/projects/kit/components/line-clamp/line-clamp.component.ts +++ b/projects/kit/components/line-clamp/line-clamp.component.ts @@ -12,7 +12,13 @@ import { Renderer2, ViewChild, } from '@angular/core'; -import {tuiIsCurrentTarget, tuiPx, tuiTypedFromEvent, tuiZonefree} from '@taiga-ui/cdk'; +import { + tuiInjectElement, + tuiIsCurrentTarget, + tuiPx, + tuiTypedFromEvent, + tuiZonefree, +} from '@taiga-ui/cdk'; import {TUI_HINT_COMPONENT, TuiHintDirective} from '@taiga-ui/core'; import type {PolymorpheusContent} from '@tinkoff/ng-polymorpheus'; import type {Observable} from 'rxjs'; @@ -49,7 +55,7 @@ export class TuiLineClampComponent implements DoCheck, AfterViewInit { private readonly outlet?: ElementRef; private readonly options = inject(TUI_LINE_CLAMP_OPTIONS); - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); private readonly renderer = inject(Renderer2); private readonly cd = inject(ChangeDetectorRef); private readonly zone: NgZone = inject(NgZone); diff --git a/projects/kit/components/pagination/pagination.component.ts b/projects/kit/components/pagination/pagination.component.ts index 54d49d0287e1..d1eeea918946 100644 --- a/projects/kit/components/pagination/pagination.component.ts +++ b/projects/kit/components/pagination/pagination.component.ts @@ -10,7 +10,12 @@ import { ViewChildren, } from '@angular/core'; import type {TuiContext, TuiNativeFocusableElement} from '@taiga-ui/cdk'; -import {EMPTY_QUERY, tuiClamp, tuiIsNativeFocusedIn} from '@taiga-ui/cdk'; +import { + EMPTY_QUERY, + tuiClamp, + tuiInjectElement, + tuiIsNativeFocusedIn, +} from '@taiga-ui/cdk'; import type {TuiHorizontalDirection, TuiSizeL, TuiSizeS, TuiSizeXS} from '@taiga-ui/core'; import {TUI_SPIN_ICONS} from '@taiga-ui/core'; import {TUI_PAGINATION_TEXTS} from '@taiga-ui/kit/tokens'; @@ -30,7 +35,7 @@ export class TuiPaginationComponent { @ViewChildren('element', {read: ElementRef}) private readonly els: QueryList> = EMPTY_QUERY; - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); @Input() public length = 1; diff --git a/projects/kit/components/progress/progress-bar/progress-color-segments.directive.ts b/projects/kit/components/progress/progress-bar/progress-color-segments.directive.ts index 7cafc92bb668..f871404cd9fd 100644 --- a/projects/kit/components/progress/progress-bar/progress-color-segments.directive.ts +++ b/projects/kit/components/progress/progress-bar/progress-color-segments.directive.ts @@ -1,6 +1,6 @@ -import {Directive, ElementRef, inject, Input} from '@angular/core'; +import {Directive, inject, Input} from '@angular/core'; import {ResizeObserverService} from '@ng-web-apis/resize-observer'; -import {tuiPure} from '@taiga-ui/cdk'; +import {tuiInjectElement, tuiPure} from '@taiga-ui/cdk'; import type {Observable} from 'rxjs'; import {BehaviorSubject, combineLatest, distinctUntilChanged, map} from 'rxjs'; @@ -25,7 +25,7 @@ function calculateColorSegments(colors: string[], progressWidth: number): string }) export class TuiProgressColorSegmentsDirective { private readonly colors$ = new BehaviorSubject([]); - private readonly el: HTMLProgressElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); private readonly resize$ = inject(ResizeObserverService); @Input('tuiProgressColorSegments') diff --git a/projects/kit/components/radio-list/radio-list.component.ts b/projects/kit/components/radio-list/radio-list.component.ts index bc59c4682e06..55e8c5bc36f6 100644 --- a/projects/kit/components/radio-list/radio-list.component.ts +++ b/projects/kit/components/radio-list/radio-list.component.ts @@ -3,10 +3,8 @@ import type {QueryList} from '@angular/core'; import { ChangeDetectionStrategy, Component, - ElementRef, HostBinding, HostListener, - inject, Input, ViewChildren, ViewEncapsulation, @@ -20,6 +18,7 @@ import { TUI_DEFAULT_IDENTITY_MATCHER, TUI_FALSE_HANDLER, tuiAsControl, + tuiInjectElement, tuiIsNativeFocusedIn, TuiValidatorDirective, } from '@taiga-ui/cdk'; @@ -49,7 +48,7 @@ export class TuiRadioListComponent extends AbstractTuiNullableControl { @ViewChildren(NgControl) private readonly controls: QueryList = EMPTY_QUERY; - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); @Input() public items: readonly T[] = []; diff --git a/projects/kit/components/radio/radio.component.ts b/projects/kit/components/radio/radio.component.ts index ce98865d789c..d53ee8b64341 100644 --- a/projects/kit/components/radio/radio.component.ts +++ b/projects/kit/components/radio/radio.component.ts @@ -1,13 +1,7 @@ import type {DoCheck} from '@angular/core'; -import { - ChangeDetectionStrategy, - Component, - ElementRef, - inject, - Input, -} from '@angular/core'; +import {ChangeDetectionStrategy, Component, inject, Input} from '@angular/core'; import {NgControl} from '@angular/forms'; -import {TuiNativeValidatorDirective} from '@taiga-ui/cdk'; +import {tuiInjectElement, TuiNativeValidatorDirective} from '@taiga-ui/cdk'; import type {TuiSizeS} from '@taiga-ui/core'; import {TuiAppearanceDirective} from '@taiga-ui/core'; @@ -39,7 +33,7 @@ import {TUI_RADIO_OPTIONS} from './radio.options'; export class TuiRadioComponent implements DoCheck { private readonly appearance = inject(TuiAppearanceDirective); private readonly options = inject(TUI_RADIO_OPTIONS); - private readonly el: HTMLInputElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); @Input() public size: TuiSizeS = this.options.size; diff --git a/projects/kit/components/range/range-change.directive.ts b/projects/kit/components/range/range-change.directive.ts index 3cd6aa8e84db..c0e145eff97c 100644 --- a/projects/kit/components/range/range-change.directive.ts +++ b/projects/kit/components/range/range-change.directive.ts @@ -1,7 +1,7 @@ import {DOCUMENT} from '@angular/common'; -import {Directive, ElementRef, EventEmitter, inject, Output} from '@angular/core'; +import {Directive, EventEmitter, inject, Output} from '@angular/core'; import {takeUntilDestroyed} from '@angular/core/rxjs-interop'; -import {tuiClamp, tuiRound, tuiTypedFromEvent} from '@taiga-ui/cdk'; +import {tuiClamp, tuiInjectElement, tuiRound, tuiTypedFromEvent} from '@taiga-ui/cdk'; import {TUI_FLOATING_PRECISION} from '@taiga-ui/kit/constants'; import {filter, map, merge, repeat, startWith, switchMap, takeUntil, tap} from 'rxjs'; @@ -12,7 +12,7 @@ import {TuiRangeComponent} from './range.component'; }) export class TuiRangeChangeDirective { private readonly doc = inject(DOCUMENT); - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); private readonly range = inject(TuiRangeComponent); /** diff --git a/projects/kit/components/range/range.component.ts b/projects/kit/components/range/range.component.ts index 8bf8d596ec38..23f08fba331a 100644 --- a/projects/kit/components/range/range.component.ts +++ b/projects/kit/components/range/range.component.ts @@ -5,7 +5,6 @@ import { ElementRef, HostBinding, HostListener, - inject, Input, ViewChildren, } from '@angular/core'; @@ -14,6 +13,7 @@ import { AbstractTuiControl, EMPTY_QUERY, tuiClamp, + tuiInjectElement, tuiIsNativeFocusedIn, tuiPure, tuiQuantize, @@ -40,7 +40,7 @@ export class TuiRangeComponent extends AbstractTuiControl<[number, number]> implements TuiWithOptionalMinMax, TuiFocusableElementAccessor { - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); @Input() public min = 0; diff --git a/projects/kit/components/segmented/segmented.component.ts b/projects/kit/components/segmented/segmented.component.ts index ed0691d23099..f06bf955bb54 100644 --- a/projects/kit/components/segmented/segmented.component.ts +++ b/projects/kit/components/segmented/segmented.component.ts @@ -2,7 +2,6 @@ import type {OnChanges} from '@angular/core'; import { ChangeDetectionStrategy, Component, - ElementRef, EventEmitter, HostBinding, inject, @@ -13,7 +12,7 @@ import { } from '@angular/core'; import {takeUntilDestroyed} from '@angular/core/rxjs-interop'; import {ResizeObserverService} from '@ng-web-apis/resize-observer'; -import {tuiIsHTMLElement, tuiPx, tuiZonefree} from '@taiga-ui/cdk'; +import {tuiInjectElement, tuiIsHTMLElement, tuiPx, tuiZonefree} from '@taiga-ui/cdk'; import type {TuiSizeL, TuiSizeS} from '@taiga-ui/core'; import {tuiBadgeNotificationOptionsProvider} from '@taiga-ui/kit/components/badge-notification'; @@ -30,7 +29,7 @@ import {TuiSegmentedDirective} from './segmented.directive'; providers: [ResizeObserverService, tuiBadgeNotificationOptionsProvider({size: 's'})], }) export class TuiSegmentedComponent implements OnChanges { - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); @Input() @HostBinding('attr.data-size') diff --git a/projects/kit/components/segmented/segmented.directive.ts b/projects/kit/components/segmented/segmented.directive.ts index b3fc922a337e..54f13ed5ebd6 100644 --- a/projects/kit/components/segmented/segmented.directive.ts +++ b/projects/kit/components/segmented/segmented.directive.ts @@ -10,7 +10,7 @@ import { import {takeUntilDestroyed} from '@angular/core/rxjs-interop'; import {NgControl} from '@angular/forms'; import {RouterLinkActive} from '@angular/router'; -import {EMPTY_QUERY, tuiQueryListChanges} from '@taiga-ui/cdk'; +import {EMPTY_QUERY, tuiInjectElement, tuiQueryListChanges} from '@taiga-ui/cdk'; import {EMPTY, switchMap} from 'rxjs'; import {TuiSegmentedComponent} from './segmented.component'; @@ -31,7 +31,7 @@ export class TuiSegmentedDirective implements AfterContentChecked, AfterContentI private readonly destroyRef = inject(DestroyRef); private readonly component = inject(TuiSegmentedComponent); - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); public ngAfterContentInit(): void { tuiQueryListChanges(this.controls) diff --git a/projects/kit/components/select-option/select-option.component.ts b/projects/kit/components/select-option/select-option.component.ts index fa93c40fff02..a7232f3393a0 100644 --- a/projects/kit/components/select-option/select-option.component.ts +++ b/projects/kit/components/select-option/select-option.component.ts @@ -1,10 +1,11 @@ import type {DoCheck, OnInit, TemplateRef} from '@angular/core'; -import {ChangeDetectionStrategy, Component, ElementRef, inject} from '@angular/core'; +import {ChangeDetectionStrategy, Component, inject} from '@angular/core'; import {NgControl} from '@angular/forms'; import type {TuiContext, TuiIdentityMatcher} from '@taiga-ui/cdk'; import { AbstractTuiControl, TUI_DEFAULT_IDENTITY_MATCHER, + tuiInjectElement, tuiIsPresent, tuiTypedFromEvent, } from '@taiga-ui/cdk'; @@ -26,7 +27,7 @@ import {distinctUntilChanged, EMPTY, map, merge, startWith, Subject} from 'rxjs' }) export class TuiSelectOptionComponent implements OnInit, DoCheck { private readonly host = inject>(TUI_DATA_LIST_HOST); - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); private readonly changeDetection$ = new Subject(); protected readonly abstractControl = inject(AbstractTuiControl, {optional: true}); protected readonly control = inject(NgControl); diff --git a/projects/kit/components/slider/helpers/slider-key-steps.directive.ts b/projects/kit/components/slider/helpers/slider-key-steps.directive.ts index 1f409fbbb986..91cd03531001 100644 --- a/projects/kit/components/slider/helpers/slider-key-steps.directive.ts +++ b/projects/kit/components/slider/helpers/slider-key-steps.directive.ts @@ -1,13 +1,11 @@ -import { - Directive, - ElementRef, - forwardRef, - HostListener, - inject, - Input, -} from '@angular/core'; +import {Directive, forwardRef, HostListener, inject, Input} from '@angular/core'; import type {TuiFocusableElementAccessor} from '@taiga-ui/cdk'; -import {AbstractTuiControl, tuiClamp, tuiIsNativeFocused} from '@taiga-ui/cdk'; +import { + AbstractTuiControl, + tuiClamp, + tuiInjectElement, + tuiIsNativeFocused, +} from '@taiga-ui/cdk'; import type {TuiKeySteps} from '@taiga-ui/kit/types'; import { tuiKeyStepValueToPercentage, @@ -29,7 +27,7 @@ export class TuiSliderKeyStepsDirective extends AbstractTuiControl implements TuiFocusableElementAccessor { - private readonly el: HTMLInputElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); private readonly slider = inject( forwardRef(() => TuiSliderComponent), ); diff --git a/projects/kit/components/slider/helpers/slider-readonly.directive.ts b/projects/kit/components/slider/helpers/slider-readonly.directive.ts index 280555650c35..31718ab63aaf 100644 --- a/projects/kit/components/slider/helpers/slider-readonly.directive.ts +++ b/projects/kit/components/slider/helpers/slider-readonly.directive.ts @@ -1,9 +1,14 @@ import type {BooleanInput} from '@angular/cdk/coercion'; import {coerceBooleanProperty} from '@angular/cdk/coercion'; import {DOCUMENT} from '@angular/common'; -import {Directive, ElementRef, HostListener, inject, Input} from '@angular/core'; +import {Directive, HostListener, inject, Input} from '@angular/core'; import {takeUntilDestroyed} from '@angular/core/rxjs-interop'; -import {TUI_FALSE_HANDLER, TUI_TRUE_HANDLER, tuiTypedFromEvent} from '@taiga-ui/cdk'; +import { + TUI_FALSE_HANDLER, + TUI_TRUE_HANDLER, + tuiInjectElement, + tuiTypedFromEvent, +} from '@taiga-ui/cdk'; import {combineLatest, filter, map, merge, tap} from 'rxjs'; const SLIDER_INTERACTION_KEYS = new Set([ @@ -25,7 +30,7 @@ const SLIDER_INTERACTION_KEYS = new Set([ selector: 'input[tuiSlider][readonly]', }) export class TuiSliderReadonlyDirective { - private readonly el: HTMLInputElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); private readonly doc = inject(DOCUMENT); @Input({transform: coerceBooleanProperty}) diff --git a/projects/kit/components/slider/slider.component.ts b/projects/kit/components/slider/slider.component.ts index bd7ee5c10b66..a94230eb983b 100644 --- a/projects/kit/components/slider/slider.component.ts +++ b/projects/kit/components/slider/slider.component.ts @@ -2,14 +2,13 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, - ElementRef, HostBinding, inject, INJECTOR, Input, } from '@angular/core'; import {NgControl, NgModel} from '@angular/forms'; -import {tuiPure, tuiWatch} from '@taiga-ui/cdk'; +import {tuiInjectElement, tuiPure, tuiWatch} from '@taiga-ui/cdk'; import type {TuiSizeS} from '@taiga-ui/core'; import {take} from 'rxjs'; @@ -50,7 +49,7 @@ export class TuiSliderComponent { @Input() public segments = 1; - public readonly el: HTMLInputElement = inject(ElementRef).nativeElement; + public readonly el = tuiInjectElement(); constructor() { if (this.control instanceof NgModel) { diff --git a/projects/kit/components/stepper/step/step.component.ts b/projects/kit/components/stepper/step/step.component.ts index 7ed64a89309f..2e7a33218c04 100644 --- a/projects/kit/components/stepper/step/step.component.ts +++ b/projects/kit/components/stepper/step/step.component.ts @@ -1,13 +1,13 @@ import { ChangeDetectionStrategy, Component, - ElementRef, HostBinding, HostListener, inject, Input, } from '@angular/core'; import {RouterLinkActive} from '@angular/router'; +import {tuiInjectElement} from '@taiga-ui/cdk'; import {TUI_COMMON_ICONS} from '@taiga-ui/core'; import type {Observable} from 'rxjs'; import {EMPTY, filter} from 'rxjs'; @@ -26,7 +26,7 @@ import {TuiStepperComponent} from '../stepper.component'; }) export class TuiStepComponent { private readonly stepper = inject(TuiStepperComponent); - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); private readonly routerLinkActive$: Observable = inject(RouterLinkActive, {optional: true})?.isActiveChange || EMPTY; diff --git a/projects/kit/components/stepper/stepper.component.ts b/projects/kit/components/stepper/stepper.component.ts index 95c05313fdfb..d24c799a82cc 100644 --- a/projects/kit/components/stepper/stepper.component.ts +++ b/projects/kit/components/stepper/stepper.component.ts @@ -19,6 +19,7 @@ import {ResizeObserverService} from '@ng-web-apis/resize-observer'; import { EMPTY_QUERY, tuiGetOriginalArrayFromQueryList, + tuiInjectElement, tuiIsElement, tuiMoveFocus, tuiPure, @@ -44,7 +45,7 @@ export class TuiStepperComponent { private readonly steps: QueryList> = EMPTY_QUERY; private readonly cdr = inject(ChangeDetectorRef); - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); private readonly scrollService = inject(TuiScrollService); private readonly resize$ = inject(ResizeObserverService); private readonly speed = inject(TUI_ANIMATIONS_SPEED); diff --git a/projects/kit/components/switch/switch.component.ts b/projects/kit/components/switch/switch.component.ts index 226915f68ef1..96734920955d 100644 --- a/projects/kit/components/switch/switch.component.ts +++ b/projects/kit/components/switch/switch.component.ts @@ -2,13 +2,12 @@ import type {DoCheck} from '@angular/core'; import { ChangeDetectionStrategy, Component, - ElementRef, HostBinding, inject, Input, } from '@angular/core'; import {NgControl} from '@angular/forms'; -import {tuiIsString, TuiNativeValidatorDirective} from '@taiga-ui/cdk'; +import {tuiInjectElement, tuiIsString, TuiNativeValidatorDirective} from '@taiga-ui/cdk'; import type {TuiSizeS} from '@taiga-ui/core'; import {TUI_ICON_RESOLVER, TuiAppearanceDirective} from '@taiga-ui/core'; @@ -42,7 +41,7 @@ export class TuiSwitchComponent implements DoCheck { private readonly appearance = inject(TuiAppearanceDirective); private readonly resolver = inject(TUI_ICON_RESOLVER); private readonly options = inject(TUI_SWITCH_OPTIONS); - private readonly el: HTMLInputElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); @Input() public size: TuiSizeS = this.options.size; diff --git a/projects/kit/components/tabs/tab.directive.ts b/projects/kit/components/tabs/tab.directive.ts index 4065c70007f1..20df19abd18c 100644 --- a/projects/kit/components/tabs/tab.directive.ts +++ b/projects/kit/components/tabs/tab.directive.ts @@ -1,9 +1,9 @@ import type {OnDestroy} from '@angular/core'; -import {Directive, ElementRef, inject} from '@angular/core'; +import {Directive, inject} from '@angular/core'; import {takeUntilDestroyed} from '@angular/core/rxjs-interop'; import {RouterLinkActive} from '@angular/router'; import {MutationObserverService} from '@ng-web-apis/mutation-observer'; -import {tuiIsNativeFocused, tuiTypedFromEvent} from '@taiga-ui/cdk'; +import {tuiInjectElement, tuiIsNativeFocused, tuiTypedFromEvent} from '@taiga-ui/cdk'; import {TuiIconsDirective} from '@taiga-ui/core'; import {EMPTY, filter, merge} from 'rxjs'; @@ -24,7 +24,7 @@ export const TUI_TAB_ACTIVATE = 'tui-tab-activate'; }, }) export class TuiTabDirective implements OnDestroy { - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); private readonly rla = inject(RouterLinkActive, {optional: true}); private readonly observer = this.rla && diff --git a/projects/kit/components/tabs/tabs-horizontal.directive.ts b/projects/kit/components/tabs/tabs-horizontal.directive.ts index 8e937190ce0d..06173e78c1dd 100644 --- a/projects/kit/components/tabs/tabs-horizontal.directive.ts +++ b/projects/kit/components/tabs/tabs-horizontal.directive.ts @@ -2,7 +2,6 @@ import type {AfterViewChecked, QueryList} from '@angular/core'; import { ContentChildren, Directive, - ElementRef, forwardRef, HostListener, inject, @@ -14,7 +13,7 @@ import { MUTATION_OBSERVER_INIT, MutationObserverService, } from '@ng-web-apis/mutation-observer'; -import {EMPTY_QUERY, tuiPure, tuiPx, tuiZonefree} from '@taiga-ui/cdk'; +import {EMPTY_QUERY, tuiInjectElement, tuiPure, tuiPx, tuiZonefree} from '@taiga-ui/cdk'; import {TuiTabDirective} from './tab.directive'; import {TuiTabsDirective} from './tabs.directive'; @@ -47,7 +46,7 @@ import {TUI_TABS_OPTIONS} from './tabs.options'; }, }) export class TuiTabsHorizontalDirective implements AfterViewChecked { - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); private readonly options = inject(TUI_TABS_OPTIONS); private readonly tabs = inject(TuiTabsDirective); diff --git a/projects/kit/components/tabs/tabs-with-more.component.ts b/projects/kit/components/tabs/tabs-with-more.component.ts index a103a7c6800c..a0bf2153b91e 100644 --- a/projects/kit/components/tabs/tabs-with-more.component.ts +++ b/projects/kit/components/tabs/tabs-with-more.component.ts @@ -19,6 +19,7 @@ import { tuiClamp, TuiFocusableModule, tuiGetClosestFocusable, + tuiInjectElement, tuiIsElement, tuiIsNativeFocused, TuiItemDirective, @@ -64,7 +65,7 @@ export class TuiTabsWithMoreComponent implements AfterViewChecked, AfterViewInit private readonly options = inject(TUI_TABS_OPTIONS); private readonly refresh$ = inject(TUI_TABS_REFRESH); - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); private readonly cdr = inject(ChangeDetectorRef); private maxIndex = Infinity; diff --git a/projects/kit/components/tabs/tabs.directive.ts b/projects/kit/components/tabs/tabs.directive.ts index 2484884cc2c3..c378ccee638f 100644 --- a/projects/kit/components/tabs/tabs.directive.ts +++ b/projects/kit/components/tabs/tabs.directive.ts @@ -2,7 +2,6 @@ import type {AfterViewChecked} from '@angular/core'; import { afterNextRender, Directive, - ElementRef, EventEmitter, HostListener, inject, @@ -10,7 +9,7 @@ import { Input, Output, } from '@angular/core'; -import {tuiMoveFocus, tuiWithStyles} from '@taiga-ui/cdk'; +import {tuiInjectElement, tuiMoveFocus, tuiWithStyles} from '@taiga-ui/cdk'; import type {TuiSizeL} from '@taiga-ui/core'; import {TUI_TAB_ACTIVATE} from './tab.directive'; @@ -25,7 +24,7 @@ import {TUI_TABS_OPTIONS} from './tabs.options'; }, }) export class TuiTabsDirective implements AfterViewChecked { - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); private readonly injector = inject(INJECTOR); @Input() diff --git a/projects/kit/components/tag/tag.component.ts b/projects/kit/components/tag/tag.component.ts index a7e5d513c0f0..56d78cc80a69 100644 --- a/projects/kit/components/tag/tag.component.ts +++ b/projects/kit/components/tag/tag.component.ts @@ -10,6 +10,7 @@ import { Output, ViewChild, } from '@angular/core'; +import {tuiInjectElement} from '@taiga-ui/cdk'; import type {TuiSizeL, TuiSizeS, TuiSizeXS} from '@taiga-ui/core'; import {TUI_COMMON_ICONS, tuiSizeBigger, tuiStringHashToHsl} from '@taiga-ui/core'; import type {TuiStatus} from '@taiga-ui/kit/types'; @@ -24,7 +25,7 @@ import {TUI_TAG_OPTIONS} from './tag.options'; changeDetection: ChangeDetectionStrategy.OnPush, }) export class TuiTagComponent { - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); private readonly options = inject(TUI_TAG_OPTIONS); // TODO: Possibly implement standard focus mechanisms and outline diff --git a/projects/kit/components/tiles/tile.component.ts b/projects/kit/components/tiles/tile.component.ts index 871bb42e7a94..f57aa0dafc59 100644 --- a/projects/kit/components/tiles/tile.component.ts +++ b/projects/kit/components/tiles/tile.component.ts @@ -1,14 +1,14 @@ -import type {AfterViewInit, OnDestroy} from '@angular/core'; +import type {AfterViewInit, ElementRef, OnDestroy} from '@angular/core'; import { ChangeDetectionStrategy, Component, - ElementRef, HostBinding, HostListener, inject, Input, ViewChild, } from '@angular/core'; +import {tuiInjectElement} from '@taiga-ui/cdk'; import {TuiTileService} from './tile.service'; import {TuiTilesComponent} from './tiles.component'; @@ -32,7 +32,7 @@ export class TuiTileComponent implements OnDestroy, AfterViewInit { @Input() public height = 1; - public readonly element: HTMLElement = inject(ElementRef).nativeElement; + public readonly element = tuiInjectElement(); @HostBinding('class._dragged') protected dragged = false; diff --git a/projects/kit/components/tiles/tile.service.ts b/projects/kit/components/tiles/tile.service.ts index e9f3d670833a..a27436ad200c 100644 --- a/projects/kit/components/tiles/tile.service.ts +++ b/projects/kit/components/tiles/tile.service.ts @@ -1,9 +1,9 @@ import {isPlatformBrowser} from '@angular/common'; import type {OnDestroy} from '@angular/core'; -import {ElementRef, inject, Injectable, PLATFORM_ID} from '@angular/core'; +import {inject, Injectable, PLATFORM_ID} from '@angular/core'; import {MutationObserverService} from '@ng-web-apis/mutation-observer'; import {ResizeObserverService} from '@ng-web-apis/resize-observer'; -import {tuiArrayShallowEquals, tuiPx} from '@taiga-ui/cdk'; +import {tuiArrayShallowEquals, tuiInjectElement, tuiPx} from '@taiga-ui/cdk'; import type {Observable} from 'rxjs'; import { BehaviorSubject, @@ -20,7 +20,7 @@ import {TuiTilesComponent} from './tiles.component'; @Injectable() export class TuiTileService implements OnDestroy { private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID)); - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); private readonly tiles = inject(TuiTilesComponent); private readonly sub = new Subscription(); private readonly offset$ = new BehaviorSubject([NaN, NaN]); diff --git a/projects/kit/components/tiles/tiles.component.ts b/projects/kit/components/tiles/tiles.component.ts index cdbeaf4c272f..21dee42f2343 100644 --- a/projects/kit/components/tiles/tiles.component.ts +++ b/projects/kit/components/tiles/tiles.component.ts @@ -1,10 +1,8 @@ import { ChangeDetectionStrategy, Component, - ElementRef, HostBinding, HostListener, - inject, Input, Output, ViewEncapsulation, @@ -14,6 +12,7 @@ import { MutationObserverService, } from '@ng-web-apis/mutation-observer'; import {ResizeObserverService} from '@ng-web-apis/resize-observer'; +import {tuiInjectElement} from '@taiga-ui/cdk'; import {BehaviorSubject, debounce, filter, map, Subject, timer} from 'rxjs'; @Component({ @@ -32,7 +31,7 @@ import {BehaviorSubject, debounce, filter, map, Subject, timer} from 'rxjs'; ], }) export class TuiTilesComponent { - private readonly el: Element = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); private readonly el$ = new Subject(); @Input() diff --git a/projects/kit/components/tree/components/tree-item/tree-item.component.ts b/projects/kit/components/tree/components/tree-item/tree-item.component.ts index 4d85622fe121..be1c09a3d89a 100644 --- a/projects/kit/components/tree/components/tree-item/tree-item.component.ts +++ b/projects/kit/components/tree/components/tree-item/tree-item.component.ts @@ -3,13 +3,12 @@ import { ChangeDetectionStrategy, Component, ContentChildren, - ElementRef, forwardRef, HostBinding, inject, SkipSelf, } from '@angular/core'; -import {EMPTY_QUERY, tuiProvide} from '@taiga-ui/cdk'; +import {EMPTY_QUERY, tuiInjectElement, tuiProvide} from '@taiga-ui/cdk'; import type {PolymorpheusContent} from '@tinkoff/ng-polymorpheus'; import {distinctUntilChanged, map, startWith, Subject} from 'rxjs'; @@ -42,7 +41,7 @@ export class TuiTreeItemComponent implements DoCheck { @ContentChildren(TUI_TREE_NODE as any) private readonly nested: QueryList = EMPTY_QUERY; - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); private readonly controller = inject( forwardRef(() => TUI_TREE_CONTROLLER), diff --git a/projects/kit/directives/chevron/chevron.directive.ts b/projects/kit/directives/chevron/chevron.directive.ts index ac42797fc765..cae4a66aa774 100644 --- a/projects/kit/directives/chevron/chevron.directive.ts +++ b/projects/kit/directives/chevron/chevron.directive.ts @@ -1,6 +1,6 @@ import type {DoCheck} from '@angular/core'; -import {Directive, ElementRef, inject, INJECTOR, Input} from '@angular/core'; -import {tuiWithStyles} from '@taiga-ui/cdk'; +import {Directive, inject, INJECTOR, Input} from '@angular/core'; +import {tuiInjectElement, tuiWithStyles} from '@taiga-ui/cdk'; import {TuiDropdownDirective, TuiIconsDirective} from '@taiga-ui/core'; import {TuiChevronComponent} from './chevron.component'; @@ -14,7 +14,7 @@ import {TuiChevronService} from './chevron.service'; }, }) export class TuiChevronDirective implements DoCheck { - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); private readonly dropdown = inject(TuiDropdownDirective, {optional: true}); private readonly icons = inject(TuiIconsDirective); private readonly handler = inject(TuiChevronService).getHandler(inject(INJECTOR)); diff --git a/projects/kit/directives/fade/fade.directive.ts b/projects/kit/directives/fade/fade.directive.ts index 2186b13ecb0d..9e4a454ca5b5 100644 --- a/projects/kit/directives/fade/fade.directive.ts +++ b/projects/kit/directives/fade/fade.directive.ts @@ -1,11 +1,11 @@ -import {Directive, ElementRef, HostBinding, inject, Input, NgZone} from '@angular/core'; +import {Directive, HostBinding, inject, Input, NgZone} from '@angular/core'; import {takeUntilDestroyed} from '@angular/core/rxjs-interop'; import { MUTATION_OBSERVER_INIT, MutationObserverService, } from '@ng-web-apis/mutation-observer'; import {ResizeObserverService} from '@ng-web-apis/resize-observer'; -import {tuiWithStyles, tuiZonefree} from '@taiga-ui/cdk'; +import {tuiInjectElement, tuiWithStyles, tuiZonefree} from '@taiga-ui/cdk'; import type {TuiOrientation} from '@taiga-ui/core'; import {fromEvent, merge} from 'rxjs'; @@ -45,7 +45,7 @@ export class TuiFadeDirective { public orientation: TuiOrientation | '' = 'horizontal'; constructor() { - const el: HTMLElement = inject(ElementRef).nativeElement; + const el = tuiInjectElement(); tuiWithStyles(TuiFadeComponent); merge( diff --git a/projects/kit/directives/highlight/highlight.directive.ts b/projects/kit/directives/highlight/highlight.directive.ts index ef6914232013..57db17c009ee 100644 --- a/projects/kit/directives/highlight/highlight.directive.ts +++ b/projects/kit/directives/highlight/highlight.directive.ts @@ -1,9 +1,9 @@ import {DOCUMENT} from '@angular/common'; import type {OnChanges} from '@angular/core'; -import {Directive, ElementRef, inject, Input, Renderer2} from '@angular/core'; +import {Directive, inject, Input, Renderer2} from '@angular/core'; import {takeUntilDestroyed} from '@angular/core/rxjs-interop'; import {ResizeObserverService} from '@ng-web-apis/resize-observer'; -import {svgNodeFilter, tuiPx} from '@taiga-ui/cdk'; +import {svgNodeFilter, tuiInjectElement, tuiPx} from '@taiga-ui/cdk'; @Directive({ selector: '[tuiHighlight]', @@ -14,7 +14,7 @@ import {svgNodeFilter, tuiPx} from '@taiga-ui/cdk'; }, }) export class TuiHighlightDirective implements OnChanges { - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); private readonly renderer = inject(Renderer2); private readonly doc = inject(DOCUMENT); private readonly highlight: HTMLElement = this.setUpHighlight(); diff --git a/projects/kit/directives/index.ts b/projects/kit/directives/index.ts index 8da0b14e7afe..c1f0aa4168b7 100644 --- a/projects/kit/directives/index.ts +++ b/projects/kit/directives/index.ts @@ -8,7 +8,6 @@ export * from '@taiga-ui/kit/directives/fade'; export * from '@taiga-ui/kit/directives/highlight'; export * from '@taiga-ui/kit/directives/lazy-loading'; export * from '@taiga-ui/kit/directives/present'; -export * from '@taiga-ui/kit/directives/project-class'; export * from '@taiga-ui/kit/directives/sensitive'; export * from '@taiga-ui/kit/directives/skeleton'; export * from '@taiga-ui/kit/directives/unfinished-validator'; diff --git a/projects/kit/directives/lazy-loading/lazy-loading.directive.ts b/projects/kit/directives/lazy-loading/lazy-loading.directive.ts index 5a9364816589..8ef2d5187496 100644 --- a/projects/kit/directives/lazy-loading/lazy-loading.directive.ts +++ b/projects/kit/directives/lazy-loading/lazy-loading.directive.ts @@ -1,13 +1,7 @@ -import { - Directive, - ElementRef, - HostBinding, - HostListener, - inject, - Input, -} from '@angular/core'; +import {Directive, HostBinding, HostListener, inject, Input} from '@angular/core'; import type {SafeResourceUrl} from '@angular/platform-browser'; import {IntersectionObserverService} from '@ng-web-apis/intersection-observer'; +import {tuiInjectElement} from '@taiga-ui/cdk'; import {TuiLazyLoadingService} from './lazy-loading.service'; @@ -16,7 +10,7 @@ import {TuiLazyLoadingService} from './lazy-loading.service'; providers: [TuiLazyLoadingService, IntersectionObserverService], }) export class TuiLazyLoadingDirective { - private readonly el: HTMLImageElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); private readonly src$ = inject(TuiLazyLoadingService); @HostBinding('style.animation') diff --git a/projects/kit/directives/project-class/index.ts b/projects/kit/directives/project-class/index.ts deleted file mode 100644 index 99a2d56817fb..000000000000 --- a/projects/kit/directives/project-class/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './project-class.directive'; -export * from './project-class.module'; diff --git a/projects/kit/directives/project-class/ng-package.json b/projects/kit/directives/project-class/ng-package.json deleted file mode 100644 index bebf62dcb5e5..000000000000 --- a/projects/kit/directives/project-class/ng-package.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "lib": { - "entryFile": "index.ts" - } -} diff --git a/projects/kit/directives/project-class/project-class.directive.ts b/projects/kit/directives/project-class/project-class.directive.ts deleted file mode 100644 index 1fd707f6d5df..000000000000 --- a/projects/kit/directives/project-class/project-class.directive.ts +++ /dev/null @@ -1,21 +0,0 @@ -import type {AfterViewChecked} from '@angular/core'; -import {Directive, ElementRef, inject, Input} from '@angular/core'; - -/** - * A directive for projecting classes from nested children to host - */ -@Directive({ - selector: '[tuiProjectClass]', -}) -export class TuiProjectClassDirective implements AfterViewChecked { - private readonly el: HTMLElement = inject(ElementRef).nativeElement; - - @Input('tuiProjectClass') - public classNames: readonly string[] = []; - - public ngAfterViewChecked(): void { - this.classNames.forEach(className => - this.el.classList.toggle(className, !!this.el.querySelector(`.${className}`)), - ); - } -} diff --git a/projects/kit/directives/project-class/project-class.module.ts b/projects/kit/directives/project-class/project-class.module.ts deleted file mode 100644 index 6c98712077a7..000000000000 --- a/projects/kit/directives/project-class/project-class.module.ts +++ /dev/null @@ -1,9 +0,0 @@ -import {NgModule} from '@angular/core'; - -import {TuiProjectClassDirective} from './project-class.directive'; - -@NgModule({ - declarations: [TuiProjectClassDirective], - exports: [TuiProjectClassDirective], -}) -export class TuiProjectClassModule {} diff --git a/projects/kit/directives/project-class/test/project-class.directive.spec.ts b/projects/kit/directives/project-class/test/project-class.directive.spec.ts deleted file mode 100644 index f511685da584..000000000000 --- a/projects/kit/directives/project-class/test/project-class.directive.spec.ts +++ /dev/null @@ -1,76 +0,0 @@ -import {Component} from '@angular/core'; -import type {ComponentFixture} from '@angular/core/testing'; -import {TestBed} from '@angular/core/testing'; -import {FormControl, ReactiveFormsModule} from '@angular/forms'; -import {TuiDataListModule} from '@taiga-ui/core'; -import { - TuiComboBoxModule, - TuiDataListWrapperModule, - TuiProjectClassModule, -} from '@taiga-ui/kit'; -import {TuiNativeInputPO} from '@taiga-ui/testing'; -import {NG_EVENT_PLUGINS} from '@tinkoff/ng-event-plugins'; - -describe('Directive TuiProjectClassDirective', () => { - @Component({ - template: ` -
-
- - - -
-
- `, - }) - class TestComponent { - public classNames = ['_focused']; - public control = new FormControl(); - public items = [1, 2, 3]; - } - - let fixture: ComponentFixture; - let inputPO: TuiNativeInputPO; - - beforeEach(async () => { - TestBed.configureTestingModule({ - imports: [ - TuiProjectClassModule, - TuiComboBoxModule, - TuiDataListModule, - TuiDataListWrapperModule, - ReactiveFormsModule, - ], - providers: [NG_EVENT_PLUGINS], - declarations: [TestComponent], - }); - await TestBed.compileComponents(); - fixture = TestBed.createComponent(TestComponent); - fixture.detectChanges(); - inputPO = new TuiNativeInputPO(fixture, 'tui-primitive-textfield__native-input'); - }); - - it('if the child does not have the required class, it is not on the host either', () => { - expect(getParentElement().classList.contains('_focused')).toBe(false); - }); - - it('if a class appears on the child, it is projected to the host', () => { - inputPO.focus(); - fixture.detectChanges(); - - expect(getParentElement().classList.contains('_focused')).toBe(true); - }); - - function getParentElement(): HTMLElement { - return document.getElementById('parent')!; - } -}); diff --git a/projects/kit/directives/skeleton/skeleton.directive.ts b/projects/kit/directives/skeleton/skeleton.directive.ts index e8926ad1c38e..f85ce7d9a257 100644 --- a/projects/kit/directives/skeleton/skeleton.directive.ts +++ b/projects/kit/directives/skeleton/skeleton.directive.ts @@ -1,6 +1,11 @@ import type {OnChanges, SimpleChanges} from '@angular/core'; -import {Directive, ElementRef, inject, Input} from '@angular/core'; -import {CHAR_NO_BREAK_SPACE, tuiPure, tuiWithStyles} from '@taiga-ui/cdk'; +import {Directive, inject, Input} from '@angular/core'; +import { + CHAR_NO_BREAK_SPACE, + tuiInjectElement, + tuiPure, + tuiWithStyles, +} from '@taiga-ui/cdk'; import {TUI_ANIMATIONS_DEFAULT_DURATION, TUI_ANIMATIONS_SPEED} from '@taiga-ui/core'; import {TuiSkeletonComponent} from './skeleton.component'; @@ -18,7 +23,7 @@ const FADE = [{opacity: 0.06}, {opacity: 1}]; }) export class TuiSkeletonDirective implements OnChanges { private animation?: Animation; - private readonly el: HTMLElement = inject(ElementRef).nativeElement; + private readonly el = tuiInjectElement(); private readonly duration = inject(TUI_ANIMATIONS_SPEED) * TUI_ANIMATIONS_DEFAULT_DURATION * 2; diff --git a/projects/kit/directives/unfinished-validator/unfinished-validator.directive.ts b/projects/kit/directives/unfinished-validator/unfinished-validator.directive.ts index c4d368745df9..497d51725e53 100644 --- a/projects/kit/directives/unfinished-validator/unfinished-validator.directive.ts +++ b/projects/kit/directives/unfinished-validator/unfinished-validator.directive.ts @@ -1,7 +1,7 @@ -import {Directive, ElementRef, inject, INJECTOR} from '@angular/core'; +import {Directive, inject, INJECTOR} from '@angular/core'; import type {Validator} from '@angular/forms'; import {NG_VALIDATORS} from '@angular/forms'; -import {TUI_FOCUSABLE_ITEM_ACCESSOR, tuiProvide} from '@taiga-ui/cdk'; +import {TUI_FOCUSABLE_ITEM_ACCESSOR, tuiInjectElement, tuiProvide} from '@taiga-ui/cdk'; import {tuiCreateUnfinishedValidator} from './unfinished.validator'; @@ -14,6 +14,6 @@ export class TuiUnfinishedValidatorDirective implements Validator { public readonly validate = tuiCreateUnfinishedValidator( () => this.injector.get(TUI_FOCUSABLE_ITEM_ACCESSOR), - inject(ElementRef).nativeElement.getAttribute('tuiUnfinishedValidator') || '', + tuiInjectElement().getAttribute('tuiUnfinishedValidator') || '', ); }