feat(cdk): tuiNativeElement add util (#7393)

Signed-off-by: waterplea <[email protected]>

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<readonly [number, number]>([0, 0]);
 
     constructor() {
-        const el: SVGPathElement = inject(ElementRef).nativeElement;
+        const el = tuiInjectElement<SVGPathElement>();
         const performance = inject(PERFORMANCE);
         const animationFrame$ = inject(ANIMATION_FRAME);
         const speed = inject(TUI_ANIMATIONS_SPEED);

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()

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<HTMLElement>;
 
-    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);

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<boolean>(1);
 
     constructor() {
-        const el: HTMLElement = inject(ElementRef).nativeElement;
+        const el = tuiInjectElement();
 
         inject(TUI_DOC_PAGE_LOADED)
             .pipe(

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<number> {
-    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);

projects/addon-mobile/components/sheet-dialog/sheet-dialog.component.ts

@@ -1,16 +1,15 @@
-import type {AfterViewInit, QueryList} from '@angular/core';
+import type {AfterViewInit, ElementRef, QueryList} from '@angular/core';
 import {
     ChangeDetectionStrategy,
     Component,
-    ElementRef,
     HostBinding,
     HostListener,
     inject,
     ViewChild,
     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<I> implements AfterViewInit {
     @ViewChildren('stops')
     private readonly stopsRefs: QueryList<ElementRef<HTMLElement>> = EMPTY_QUERY;
 
-    private readonly el: HTMLElement = inject(ElementRef).nativeElement;
+    private readonly el = tuiInjectElement();
     private readonly speed = inject(TUI_ANIMATIONS_SPEED);
 
     private pointers = 0;

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();

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<T> implements TuiSheetRequiredProps<T>, 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()

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()

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(

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;

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<boolean> =
             inject(RouterLinkActive, {optional: true})?.isActiveChange || EMPTY;
 

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<number> {
     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);

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);

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;
 

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;

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;