feat(experimental): Fade add new component

projects/addon-charts/components/line-chart/line-chart-hint.directive.ts

@@ -52,15 +52,15 @@ export class TuiLineChartHintDirective implements AfterViewInit {
     constructor(
         @Inject(Renderer2) private readonly renderer: Renderer2,
         @Self() @Inject(TuiDestroyService) private readonly destroy$: TuiDestroyService,
-        @Inject(NgZone) private readonly ngZone: NgZone,
+        @Inject(NgZone) private readonly zone: NgZone,
         @Inject(TuiHoveredService) private readonly hovered$: Observable<boolean>,
     ) {}
 
     ngAfterViewInit(): void {
         combineLatest([tuiLineChartDrivers(this.charts), this.hovered$])
             .pipe(
                 filter(result => !result.some(Boolean)),
-                tuiZonefree(this.ngZone),
+                tuiZonefree(this.zone),
                 takeUntil(this.destroy$),
             )
             .subscribe(() => {

projects/addon-charts/components/line-chart/line-chart.component.ts

@@ -83,7 +83,7 @@ export class TuiLineChartComponent {
 
     constructor(
         @Inject(TuiIdService) idService: TuiIdService,
-        @Inject(NgZone) private readonly ngZone: NgZone,
+        @Inject(NgZone) private readonly zone: NgZone,
         @Optional()
         @Inject(TuiLineChartHintDirective)
         readonly hintDirective: TuiLineChartHintDirective | null,
@@ -97,7 +97,7 @@ export class TuiLineChartComponent {
 
     @tuiPure
     get hovered$(): Observable<number> {
-        return this._hovered$.pipe(distinctUntilChanged(), tuiZoneOptimized(this.ngZone));
+        return this._hovered$.pipe(distinctUntilChanged(), tuiZoneOptimized(this.zone));
     }
 
     get hintContent(): PolymorpheusContent<TuiLineChartHintContext<TuiPoint>> {

projects/addon-charts/components/line-days-chart/line-days-chart-hint.directive.ts

@@ -40,7 +40,7 @@ export class TuiLineDaysChartHintDirective implements AfterContentInit {
 
     constructor(
         @Self() @Inject(TuiDestroyService) private readonly destroy$: TuiDestroyService,
-        @Inject(NgZone) private readonly ngZone: NgZone,
+        @Inject(NgZone) private readonly zone: NgZone,
         @Inject(TuiHoveredService) private readonly hovered$: Observable<boolean>,
     ) {}
 
@@ -51,7 +51,7 @@ export class TuiLineDaysChartHintDirective implements AfterContentInit {
         ])
             .pipe(
                 filter(result => !result.some(Boolean)),
-                tuiZonefree(this.ngZone),
+                tuiZonefree(this.zone),
                 takeUntil(this.destroy$),
             )
             .subscribe(() => {

projects/addon-charts/components/line-days-chart/line-days-chart.component.ts

@@ -111,7 +111,7 @@ export class TuiLineDaysChartComponent implements AfterViewInit {
         @Inject(TuiLineDaysChartHintDirective)
         private readonly hintDirective: TuiLineDaysChartHintDirective | null,
         @Self() @Inject(TuiDestroyService) private readonly destroy$: TuiDestroyService,
-        @Inject(NgZone) private readonly ngZone: NgZone,
+        @Inject(NgZone) private readonly zone: NgZone,
         @Inject(TuiHoveredService) private readonly hovered$: Observable<boolean>,
         @Inject(TUI_LINE_CHART_OPTIONS) private readonly options: TuiLineChartOptions,
     ) {}
@@ -144,7 +144,7 @@ export class TuiLineDaysChartComponent implements AfterViewInit {
         combineLatest([tuiLineChartDrivers(this.charts), this.hovered$])
             .pipe(
                 filter(result => !result.some(Boolean)),
-                tuiZonefree(this.ngZone),
+                tuiZonefree(this.zone),
                 takeUntil(this.destroy$),
             )
             .subscribe(() => {

projects/addon-charts/components/pie-chart/pie-chart.directive.ts

@@ -20,7 +20,7 @@ export class TuiPieChartDirective {
 
     constructor(
         @Inject(ElementRef) {nativeElement}: ElementRef<SVGPathElement>,
-        @Inject(NgZone) ngZone: NgZone,
+        @Inject(NgZone) zone: NgZone,
         @Self() @Inject(TuiDestroyService) destroy$: Observable<unknown>,
         @Inject(PERFORMANCE) performance: Performance,
         @Inject(ANIMATION_FRAME) animationFrame$: Observable<number>,
@@ -47,7 +47,7 @@ export class TuiPieChartDirective {
                         ]),
                     );
                 }),
-                tuiZonefree(ngZone),
+                tuiZonefree(zone),
                 takeUntil(destroy$),
             )
             .subscribe(([start, end]) => {

projects/addon-mobile/components/pull-to-refresh/pull-to-refresh.component.ts

@@ -52,7 +52,7 @@ export class TuiPullToRefreshComponent {
     );
 
     constructor(
-        @Inject(NgZone) ngZone: NgZone,
+        @Inject(NgZone) zone: NgZone,
         @Inject(TuiDestroyService) @Self() destroy$: Observable<unknown>,
         @Inject(TUI_SCROLL_REF) {nativeElement}: ElementRef<HTMLElement>,
         @Inject(TUI_IS_IOS) private readonly isIOS: boolean,
@@ -64,7 +64,7 @@ export class TuiPullToRefreshComponent {
         // Ensure scrolling down is impossible while pulling
         if (this.component) {
             tuiScrollFrom(nativeElement)
-                .pipe(startWith(null), tuiZonefree(ngZone), takeUntil(destroy$))
+                .pipe(startWith(null), tuiZonefree(zone), takeUntil(destroy$))
                 .subscribe(() => {
                     if (nativeElement.scrollTop) {
                         nativeElement.style.touchAction = '';

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

@@ -14,13 +14,13 @@ import {TUI_SHEET, TUI_SHEET_SCROLL} from '../../sheet-tokens';
 })
 export class TuiSheetBarComponent {
     readonly rotate$ = this.scroll$.pipe(
-        tuiZonefulMap(y => tuiClamp(10 - (y - this.stop) / 5, 0, 10), this.ngZone),
+        tuiZonefulMap(y => tuiClamp(10 - (y - this.stop) / 5, 0, 10), this.zone),
     );
 
     constructor(
         @Inject(TUI_SHEET) private readonly sheet: TuiSheetRequiredProps,
         @Inject(TUI_SHEET_SCROLL) private readonly scroll$: Observable<number>,
-        @Inject(NgZone) private readonly ngZone: NgZone,
+        @Inject(NgZone) private readonly zone: NgZone,
     ) {}
 
     private get stop(): number {

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

@@ -59,7 +59,7 @@ export class TuiSheetComponent<T> implements TuiSheetRequiredProps<T>, AfterView
     constructor(
         @Inject(TUI_SHEET_SCROLL) private readonly scroll$: Observable<number>,
         @Inject(ElementRef) private readonly el: ElementRef<HTMLElement>,
-        @Inject(NgZone) private readonly ngZone: NgZone,
+        @Inject(NgZone) private readonly zone: NgZone,
         @Inject(TUI_IS_IOS) readonly isIos: boolean,
         @Inject(TUI_MORE_WORD) readonly moreWord$: Observable<string>,
     ) {}
@@ -80,7 +80,7 @@ export class TuiSheetComponent<T> implements TuiSheetRequiredProps<T>, AfterView
     get context(): TuiSheet<T> {
         return {
             ...this.item,
-            scroll$: this.scroll$.pipe(tuiZonefull(this.ngZone)),
+            scroll$: this.scroll$.pipe(tuiZonefull(this.zone)),
         };
     }
 

projects/addon-mobile/components/sheet/components/sheet/sheet.providers.ts

@@ -35,18 +35,18 @@ export const TUI_SHEET_PROVIDERS: Provider[] = [
         deps: [ElementRef, NgZone, DOCUMENT, TUI_IS_IOS],
         useFactory: (
             {nativeElement}: ElementRef<HTMLElement>,
-            ngZone: NgZone,
+            zone: NgZone,
             doc: Document,
             isIos: boolean,
         ): Observable<number> => {
             return isIos
-                ? iosScrollFactory(nativeElement, doc, ngZone)
+                ? iosScrollFactory(nativeElement, doc, zone)
                 : merge(
                       tuiTypedFromEvent(nativeElement, `scroll`),
                       tuiTypedFromEvent(nativeElement, `load`, {capture: true}),
                   ).pipe(
                       map(() => nativeElement.scrollTop),
-                      tuiZonefree(ngZone),
+                      tuiZonefree(zone),
                       share(),
                   );
         },

projects/addon-mobile/components/sheet/directives/sheet-close/sheet-close.directive.ts

@@ -23,12 +23,12 @@ export class TuiSheetCloseDirective {
             ),
             filter(y => this.sheet.item?.closeable && this.shouldClose(y)),
             distinctUntilChanged(),
-            tuiZonefull(this.ngZone),
+            tuiZonefull(this.zone),
         ),
     );
 
     constructor(
-        @Inject(NgZone) private readonly ngZone: NgZone,
+        @Inject(NgZone) private readonly zone: NgZone,
         @Inject(TUI_SHEET_DRAGGED) private readonly dragged$: Observable<boolean>,
         @Inject(TUI_SHEET_SCROLL) private readonly scroll$: Observable<number>,
         @Inject(WINDOW) private readonly win: Window,

projects/addon-mobile/components/sheet/directives/sheet-wrapper/sheet-wrapper.directive.ts

@@ -42,7 +42,7 @@ export class TuiSheetWrapperDirective {
     tuiSheetWrapper = 16;
 
     constructor(
-        @Inject(NgZone) private readonly ngZone: NgZone,
+        @Inject(NgZone) private readonly zone: NgZone,
         @Inject(WINDOW) private readonly win: Window,
     ) {}
 
@@ -51,15 +51,15 @@ export class TuiSheetWrapperDirective {
         return this.scroll$.pipe(
             map(y => y + 16 > this.win.innerHeight - this.tuiSheetWrapper),
             distinctUntilChanged(),
-            tuiZonefull(this.ngZone),
+            tuiZonefull(this.zone),
         );
     }
 
     @tuiPure
     get visible$(): Observable<boolean> {
         return processDragged(this.dragged$, this.scroll$).pipe(
             distinctUntilChanged(),
-            tuiZonefull(this.ngZone),
+            tuiZonefull(this.zone),
         );
     }
 

projects/addon-mobile/components/sheet/ios.hacks.ts

@@ -7,7 +7,7 @@ import {delay, map, share, switchMap, take, takeUntil} from 'rxjs/operators';
 export function iosScrollFactory(
     element: HTMLElement,
     doc: Document,
-    ngZone: NgZone,
+    zone: NgZone,
 ): Observable<number> {
     const load$ = tuiTypedFromEvent(element, `load`, {capture: true});
     const touchstart$ = tuiTypedFromEvent(element, `touchstart`, {passive: true});
@@ -38,7 +38,7 @@ export function iosScrollFactory(
         ),
     );
 
-    return concat(scroll$.pipe(take(1)), result$).pipe(tuiZonefree(ngZone), share());
+    return concat(scroll$.pipe(take(1)), result$).pipe(tuiZonefree(zone), share());
 }
 
 // eslint-disable-next-line @typescript-eslint/naming-convention

projects/addon-mobile/directives/elastic-sticky/elastic-sticky.service.ts

@@ -22,11 +22,11 @@ export class TuiElasticStickyService extends Observable<number> {
     constructor(
         @Inject(TUI_SCROLL_REF) scrollRef: ElementRef<HTMLElement>,
         @Inject(ElementRef) {nativeElement}: ElementRef<HTMLElement>,
-        @Inject(NgZone) ngZone: NgZone,
+        @Inject(NgZone) zone: NgZone,
         @Self() @Inject(TuiDestroyService) destroy$: TuiDestroyService,
     ) {
         super(subscriber =>
-            ngZone.onStable
+            zone.onStable
                 .pipe(
                     take(1),
                     switchMap(() => {
@@ -53,7 +53,7 @@ export class TuiElasticStickyService extends Observable<number> {
                     startWith(1),
                     distinctUntilChanged(),
                     skip(1),
-                    tuiZoneOptimized(ngZone),
+                    tuiZoneOptimized(zone),
                     takeUntil(destroy$),
                 )
                 .subscribe(subscriber),

projects/cdk/directives/active-zone/active-zone.directive.ts

@@ -37,13 +37,13 @@ export class TuiActiveZoneDirective implements OnDestroy {
         startWith(false),
         distinctUntilChanged(),
         skip(1),
-        tuiZoneOptimized(this.ngZone),
+        tuiZoneOptimized(this.zone),
     );
 
     constructor(
         @Inject(TUI_ACTIVE_ELEMENT)
         private readonly active$: Observable<Element | null>,
-        @Inject(NgZone) private readonly ngZone: NgZone,
+        @Inject(NgZone) private readonly zone: NgZone,
         @Inject(ElementRef) private readonly el: ElementRef<Element>,
         @Optional()
         @SkipSelf()

projects/cdk/directives/auto-focus/autofocus.options.ts

@@ -54,12 +54,12 @@ export const TUI_AUTOFOCUS_PROVIDERS = [
             el: ElementRef<HTMLElement>,
             animationFrame$: Observable<number>,
             renderer: Renderer2,
-            ngZone: NgZone,
+            zone: NgZone,
             win: Window,
             isIos: boolean,
         ) =>
             isIos
-                ? new TuiIosAutofocusHandler(focusable, el, renderer, ngZone, win)
+                ? new TuiIosAutofocusHandler(focusable, el, renderer, zone, win)
                 : new TuiDefaultAutofocusHandler(focusable, el, animationFrame$),
         deps: [
             [new Optional(), new Self(), TUI_FOCUSABLE_ITEM_ACCESSOR],

projects/cdk/directives/auto-focus/handlers/ios.handler.ts

@@ -36,7 +36,7 @@ export class TuiIosAutofocusHandler extends AbstractTuiAutofocusHandler {
         focusable: TuiFocusableElementAccessor | null,
         @Inject(ElementRef) el: ElementRef<HTMLElement>,
         @Inject(Renderer2) private readonly renderer: Renderer2,
-        @Inject(NgZone) private readonly ngZone: NgZone,
+        @Inject(NgZone) private readonly zone: NgZone,
         @Inject(WINDOW) private readonly win: Window,
     ) {
         super(focusable, el);
@@ -45,7 +45,7 @@ export class TuiIosAutofocusHandler extends AbstractTuiAutofocusHandler {
 
     setFocus(): void {
         if (this.isTextFieldElement) {
-            this.ngZone.runOutsideAngular(() => this.iosWebkitAutofocus());
+            this.zone.runOutsideAngular(() => this.iosWebkitAutofocus());
         } else {
             this.element.focus();
         }

projects/cdk/directives/focused/focused.directive.ts

@@ -19,7 +19,7 @@ export class TuiFocusedDirective {
     constructor(
         @Inject(ElementRef)
         {nativeElement}: ElementRef<HTMLElement>,
-        @Inject(NgZone) ngZone: NgZone,
+        @Inject(NgZone) zone: NgZone,
     ) {
         this.tuiFocusedChange = merge(
             tuiTypedFromEvent(nativeElement, 'focusin'),
@@ -29,7 +29,7 @@ export class TuiFocusedDirective {
             startWith(false),
             distinctUntilChanged(),
             skip(1),
-            tuiZoneOptimized(ngZone),
+            tuiZoneOptimized(zone),
         );
     }
 }

projects/cdk/directives/hovered/hovered.service.ts

@@ -27,11 +27,11 @@ export class TuiHoveredService extends Observable<boolean> {
             filter(movedOut),
             map(ALWAYS_FALSE_HANDLER),
         ),
-    ).pipe(distinctUntilChanged(), tuiZoneOptimized(this.ngZone));
+    ).pipe(distinctUntilChanged(), tuiZoneOptimized(this.zone));
 
     constructor(
         @Inject(ElementRef) private readonly el: ElementRef<Element>,
-        @Inject(NgZone) private readonly ngZone: NgZone,
+        @Inject(NgZone) private readonly zone: NgZone,
     ) {
         super(subscriber => this.stream$.subscribe(subscriber));
     }

projects/cdk/directives/overscroll/overscroll.directive.ts

@@ -27,13 +27,13 @@ export class TuiOverscrollDirective {
 
     constructor(
         @Inject(ElementRef) {nativeElement}: ElementRef<HTMLElement>,
-        @Inject(NgZone) ngZone: NgZone,
+        @Inject(NgZone) zone: NgZone,
         @Self() @Inject(TuiDestroyService) destroy$: Observable<void>,
     ) {
         tuiTypedFromEvent(nativeElement, 'wheel', {passive: false})
             .pipe(
                 filter(() => this.enabled),
-                tuiZonefree(ngZone),
+                tuiZonefree(zone),
                 takeUntil(destroy$),
             )
             .subscribe(event => {
@@ -77,7 +77,7 @@ export class TuiOverscrollDirective {
                         }),
                     );
                 }),
-                tuiZonefree(ngZone),
+                tuiZonefree(zone),
                 takeUntil(destroy$),
             )
             .subscribe();

projects/cdk/directives/prevent-default/prevent-default.directive.ts

@@ -19,13 +19,13 @@ export class TuiPreventDefaultDirective implements OnInit {
 
     constructor(
         @Inject(ElementRef) private readonly el: ElementRef<HTMLElement>,
-        @Inject(NgZone) private readonly ngZone: NgZone,
+        @Inject(NgZone) private readonly zone: NgZone,
         @Self() @Inject(TuiDestroyService) private readonly destroy$: Observable<void>,
     ) {}
 
     ngOnInit(): void {
         fromEvent(this.el.nativeElement, this.eventName, {passive: false})
-            .pipe(tuiZonefree(this.ngZone), tuiPreventDefault(), takeUntil(this.destroy$))
+            .pipe(tuiZonefree(this.zone), tuiPreventDefault(), takeUntil(this.destroy$))
             .subscribe();
     }
 }