refactor(cdk)!: Resize remove service and directive (#6537)

projects/addon-commerce/components/input-card-grouped/input-card-grouped.module.ts

@@ -2,15 +2,14 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MaskitoModule} from '@maskito/angular';
+import {ResizeObserverModule} from '@ng-web-apis/resize-observer';
 import {TuiFormatCardModule} from '@taiga-ui/addon-commerce/pipes';
 import {
     TuiActiveZoneModule,
     TuiAutoFocusModule,
     TuiFocusableModule,
     TuiLetModule,
     TuiMapperPipeModule,
-    TuiPreventDefaultModule,
-    TuiResizeModule,
 } from '@taiga-ui/cdk';
 import {TuiDropdownModule, TuiSvgModule, TuiWrapperModule} from '@taiga-ui/core';
 import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
@@ -19,6 +18,7 @@ import {TuiInputCardGroupedComponent} from './input-card-grouped.component';
 
 @NgModule({
     imports: [
+        ResizeObserverModule,
         CommonModule,
         FormsModule,
         MaskitoModule,
@@ -28,10 +28,8 @@ import {TuiInputCardGroupedComponent} from './input-card-grouped.component';
         TuiActiveZoneModule,
         TuiMapperPipeModule,
         TuiDropdownModule,
-        TuiPreventDefaultModule,
         PolymorpheusModule,
         TuiLetModule,
-        TuiResizeModule,
         TuiFormatCardModule,
         TuiAutoFocusModule,
     ],

projects/addon-commerce/components/input-card-grouped/input-card-grouped.template.html

@@ -18,7 +18,7 @@
     <div class="t-wrapper">
         <label
             *tuiLet="value?.card | tuiFormatCard: cardPrefilled as formattedCard"
-            tuiPreventDefault="click"
+            (click.silent.prevent)="(0)"
         >
             <input
                 #inputCard
@@ -48,7 +48,7 @@
                 class="t-collapsed"
                 [attr.data-before]="masked"
                 [class.t-collapsed_enable-mask]="isCardCollapsed"
-                (tuiResize)="(0)"
+                (waResizeObserver)="(0)"
             >
                 <span
                     #ghost
@@ -77,7 +77,7 @@
         class="t-wrapper t-wrapper_expire"
         [class.t-wrapper_active]="isCardCollapsed"
     >
-        <label tuiPreventDefault="click">
+        <label (click.silent.prevent)="(0)">
             <input
                 #inputExpire
                 automation-id="tui-input-card-grouped__expire"
@@ -110,7 +110,7 @@
         class="t-wrapper t-wrapper_cvc"
         [class.t-wrapper_active]="isCardCollapsed"
     >
-        <label tuiPreventDefault="click">
+        <label (click.silent.prevent)="(0)">
             <input
                 #inputCVC
                 automation-id="tui-input-card-grouped__cvc"

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

@@ -2,13 +2,14 @@ import {
     ChangeDetectionStrategy,
     Component,
     ElementRef,
-    Inject,
+    inject,
     QueryList,
     ViewChildren,
 } from '@angular/core';
 import {MutationObserverService} from '@ng-web-apis/mutation-observer';
-import {EMPTY_QUERY, TuiResizeService} from '@taiga-ui/cdk';
-import {map, merge, Observable} from 'rxjs';
+import {ResizeObserverService} from '@ng-web-apis/resize-observer';
+import {EMPTY_QUERY} from '@taiga-ui/cdk';
+import {map, merge} from 'rxjs';
 
 import {TUI_APP_BAR_PROVIDERS} from './app-bar.providers';
 
@@ -23,7 +24,10 @@ export class TuiAppBarComponent {
     @ViewChildren('side')
     private readonly side: QueryList<ElementRef<HTMLElement>> = EMPTY_QUERY;
 
-    readonly width$ = merge(this.resize$, this.mutation$).pipe(
+    readonly width$ = merge(
+        inject(ResizeObserverService),
+        inject(MutationObserverService),
+    ).pipe(
         map(
             () =>
                 2 *
@@ -33,9 +37,4 @@ export class TuiAppBarComponent {
                 ),
         ),
     );
-
-    constructor(
-        @Inject(TuiResizeService) private readonly resize$: Observable<unknown>,
-        @Inject(MutationObserverService) private readonly mutation$: Observable<unknown>,
-    ) {}
 }

projects/addon-mobile/components/app-bar/app-bar.providers.ts

@@ -3,12 +3,11 @@ import {
     MUTATION_OBSERVER_INIT,
     MutationObserverService,
 } from '@ng-web-apis/mutation-observer';
-import {TuiDestroyService, TuiResizeService} from '@taiga-ui/cdk';
+import {ResizeObserverService} from '@ng-web-apis/resize-observer';
 import {tuiButtonOptionsProvider} from '@taiga-ui/core';
 
 export const TUI_APP_BAR_PROVIDERS: Provider[] = [
-    TuiDestroyService,
-    TuiResizeService,
+    ResizeObserverService,
     MutationObserverService,
     {
         provide: MUTATION_OBSERVER_INIT,

projects/addon-preview/components/preview/preview.module.ts

@@ -2,14 +2,9 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MutationObserverModule} from '@ng-web-apis/mutation-observer';
+import {ResizeObserverModule} from '@ng-web-apis/resize-observer';
 import {TuiPreviewDialogService} from '@taiga-ui/addon-preview/components/preview-dialog';
-import {
-    tuiAsDialog,
-    TuiDragModule,
-    TuiPanModule,
-    TuiResizeModule,
-    TuiZoomModule,
-} from '@taiga-ui/cdk';
+import {tuiAsDialog, TuiDragModule, TuiPanModule, TuiZoomModule} from '@taiga-ui/cdk';
 import {
     TuiButtonModule,
     TuiHintModule,
@@ -31,12 +26,12 @@ import {TuiPreviewZoomComponent} from './zoom/preview-zoom.component';
         CommonModule,
         PolymorpheusModule,
         MutationObserverModule,
+        ResizeObserverModule,
         TuiButtonModule,
         FormsModule,
         TuiSliderModule,
         TuiHintModule,
         TuiDragModule,
-        TuiResizeModule,
         TuiSvgModule,
         TuiLoaderModule,
         TuiPanModule,

projects/addon-preview/components/preview/preview.template.html

@@ -11,9 +11,9 @@
         [style.cursor]="cursor$ | async"
         [style.transform]="wrapperTransform$ | async"
         (tuiPan)="onPan($event)"
-        (tuiResize)="onResize($event)"
         (tuiZoom)="onZoom($event)"
         (waMutationObserver)="onMutation(contentWrapper)"
+        (waResizeObserver)="onResize($event)"
     >
         <ng-content></ng-content>
     </section>

projects/cdk/directives/index.ts

@@ -28,7 +28,6 @@ export * from '@taiga-ui/cdk/directives/portal';
 export * from '@taiga-ui/cdk/directives/pressed';
 export * from '@taiga-ui/cdk/directives/prevent-default';
 export * from '@taiga-ui/cdk/directives/repeat-times';
-export * from '@taiga-ui/cdk/directives/resize';
 export * from '@taiga-ui/cdk/directives/resizer';
 export * from '@taiga-ui/cdk/directives/swipe';
 export * from '@taiga-ui/cdk/directives/validator';

projects/cdk/services/index.ts

@@ -4,7 +4,6 @@ export * from './focus-visible.service';
 export * from './id.service';
 export * from './obscured.service';
 export * from './pan.service';
-export * from './resize.service';
 export * from './scroll.service';
 export * from './static-request.service';
 export * from './swipe.service';

projects/demo/src/modules/app/abstract.app.ts

@@ -1,15 +1,16 @@
 import {Directive, ElementRef, HostBinding, OnInit} from '@angular/core';
 import {Router} from '@angular/router';
+import {ResizeObserverService} from '@ng-web-apis/resize-observer';
 import {TUI_DOC_PAGE_LOADED} from '@taiga-ui/addon-doc';
-import {TuiDestroyService, tuiPure, TuiResizeService} from '@taiga-ui/cdk';
+import {TuiDestroyService, tuiPure} from '@taiga-ui/cdk';
 import {Observable} from 'rxjs';
 
 import {readyToScrollFactory} from './utils/ready-to-scroll-factory';
 import {TuiVersionMeta} from './version-manager/versions.constants';
 
 export const DEMO_PAGE_LOADED_PROVIDER = {
     provide: TUI_DOC_PAGE_LOADED,
-    deps: [ElementRef, TuiResizeService, TuiDestroyService],
+    deps: [ElementRef, ResizeObserverService, TuiDestroyService],
     useFactory: readyToScrollFactory,
 };
 

projects/demo/src/modules/app/app.component.ts

@@ -3,8 +3,9 @@ import {Component, Inject, OnInit, Self, ViewEncapsulation} from '@angular/core'
 import {NavigationEnd, Router} from '@angular/router';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {LOCAL_STORAGE} from '@ng-web-apis/common';
+import {ResizeObserverService} from '@ng-web-apis/resize-observer';
 import {TUI_DOC_PAGE_LOADED} from '@taiga-ui/addon-doc';
-import {TuiDestroyService, TuiResizeService} from '@taiga-ui/cdk';
+import {TuiDestroyService} from '@taiga-ui/cdk';
 import {distinctUntilChanged, filter, map, Observable, takeUntil} from 'rxjs';
 
 import {AbstractDemoComponent, DEMO_PAGE_LOADED_PROVIDER} from './abstract.app';
@@ -22,7 +23,7 @@ import {TuiVersionMeta} from './version-manager/versions.constants';
     encapsulation: ViewEncapsulation.None,
     changeDetection,
     providers: [
-        TuiResizeService,
+        ResizeObserverService,
         TuiDestroyService,
         DEMO_PAGE_LOADED_PROVIDER,
         TUI_VERSION_MANAGER_PROVIDERS,