[WIP] chore: drop waResizeObserver

projects/addon-commerce/components/input-card-group/input-card-group.component.ts

@@ -13,7 +13,6 @@ import {
 import {takeUntilDestroyed, toSignal} from '@angular/core/rxjs-interop';
 import {FormsModule} from '@angular/forms';
 import {MaskitoDirective} from '@maskito/angular';
-import {WaResizeObserver} from '@ng-web-apis/resize-observer';
 import {
     TUI_MASK_CARD,
     TUI_MASK_CVC,
@@ -87,7 +86,6 @@ export interface TuiCard {
         TuiIconPipe,
         TuiLet,
         TuiMapperPipe,
-        WaResizeObserver,
     ],
     templateUrl: './input-card-group.template.html',
     styleUrls: ['./input-card-group.style.less'],

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

@@ -31,7 +31,7 @@
             class="t-collapsed"
             [attr.data-before]="masked"
             [class.t-collapsed_enable-mask]="cardCollapsed"
-            (waResizeObserver)="onResize()"
+            (resize)="onResize()"
         >
             <span
                 #ghost

projects/addon-mobile/components/swipe-action/swipe-actions.component.ts

@@ -4,12 +4,10 @@ import {
     Component,
     inject,
 } from '@angular/core';
-import {WaResizeObserver} from '@ng-web-apis/resize-observer';
 
 @Component({
     standalone: true,
     selector: 'tui-swipe-actions',
-    imports: [WaResizeObserver],
     templateUrl: './swipe-actions.template.html',
     styleUrls: ['./swipe-actions.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -22,8 +20,14 @@ export class TuiSwipeActions {
 
     protected readonly cdr = inject(ChangeDetectorRef);
 
-    protected onResize({target}: ResizeObserverEntry): void {
-        this.actionsWidth = target.clientWidth;
+    protected onResize(event: UIEvent): void {
+        const [entry] = event as unknown as ResizeObserverEntry[];
+
+        if (!entry) {
+            return;
+        }
+
+        this.actionsWidth = entry.target.clientWidth;
         this.cdr.detectChanges();
     }
 }

projects/addon-mobile/components/swipe-action/swipe-actions.template.html

@@ -4,7 +4,7 @@
 
 <div
     class="t-actions"
-    (waResizeObserver)="$event[0] && onResize($event[0])"
+    (resize)="onResize($event)"
 >
     <ng-content select="[tuiSwipeAction]" />
 </div>

projects/core/components/textfield/textfield.component.ts

@@ -1,6 +1,7 @@
 import {NgIf} from '@angular/common';
 import {
     ChangeDetectionStrategy,
+    ChangeDetectorRef,
     Component,
     computed,
     ContentChild,
@@ -15,7 +16,6 @@ import {
 } from '@angular/core';
 import {toSignal} from '@angular/core/rxjs-interop';
 import {NgControl} from '@angular/forms';
-import {WaResizeObserver} from '@ng-web-apis/resize-observer';
 import {tuiInjectId} from '@taiga-ui/cdk/services';
 import type {TuiContext, TuiStringHandler} from '@taiga-ui/cdk/types';
 import {tuiInjectElement} from '@taiga-ui/cdk/utils/dom';
@@ -44,7 +44,7 @@ import {TuiWithTextfieldDropdown} from './textfield-dropdown.directive';
 @Component({
     standalone: true,
     selector: 'tui-textfield',
-    imports: [NgIf, PolymorpheusOutlet, TuiButton, WaResizeObserver],
+    imports: [NgIf, PolymorpheusOutlet, TuiButton],
     templateUrl: './textfield.template.html',
     styles: ['@import "@taiga-ui/core/styles/components/textfield.less";'],
     encapsulation: ViewEncapsulation.None,
@@ -81,6 +81,8 @@ export class TuiTextfieldComponent<T> implements TuiDataListHost<T> {
     @ContentChild(NgControl)
     protected readonly control?: NgControl;
 
+    protected readonly cdr = inject(ChangeDetectorRef);
+
     protected readonly icons = inject(TUI_COMMON_ICONS);
     protected readonly clear = toSignal(inject(TUI_CLEAR_WORD));
 
@@ -138,7 +140,14 @@ export class TuiTextfieldComponent<T> implements TuiDataListHost<T> {
         return Boolean(this.label?.nativeElement?.childNodes.length);
     }
 
-    protected onResize({contentRect}: ResizeObserverEntry): void {
-        this.el.style.setProperty('--t-side', tuiPx(contentRect.width));
+    protected onResize(event: UIEvent): void {
+        const [entry] = event as unknown as ResizeObserverEntry[];
+
+        if (!entry) {
+            return;
+        }
+
+        this.el.style.setProperty('--t-side', tuiPx(entry.contentRect.width));
+        this.cdr.detectChanges();
     }
 }

projects/core/components/textfield/textfield.template.html

@@ -4,7 +4,7 @@
 <span
     class="t-content"
     (mousedown.prevent)="input?.nativeElement?.focus()"
-    (waResizeObserver)="$event[0] && onResize($event[0])"
+    (resize)="onResize($event)"
 >
     <ng-content />
     <button

projects/kit/components/badged-content/badged-content.component.ts

@@ -4,14 +4,13 @@ import {
     Component,
     inject,
 } from '@angular/core';
-import {WaResizeObserver} from '@ng-web-apis/resize-observer';
 
 import {TuiBadgedContentDirective} from './badged-content.directive';
 
 @Component({
     standalone: true,
     selector: 'tui-badged-content',
-    imports: [TuiBadgedContentDirective, WaResizeObserver],
+    imports: [TuiBadgedContentDirective],
     templateUrl: './badged-content.template.html',
     styleUrls: ['./badged-content.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,

projects/kit/components/badged-content/badged-content.template.html

@@ -4,7 +4,7 @@
     #badgeTop
     class="t-badge t-badge_top"
     [style.--t-badge-height.px]="badgeTop.offsetHeight"
-    (waResizeObserver)="onResize()"
+    (resize)="onResize()"
 >
     <ng-content select="tui-badge-notification[tuiSlot='top']" />
     <div class="t-border">
@@ -16,7 +16,7 @@
     #badgeBottom
     class="t-badge t-badge_bottom"
     [style.--t-badge-height.px]="badgeBottom.offsetHeight"
-    (waResizeObserver)="onResize()"
+    (resize)="onResize()"
 >
     <ng-content select="tui-badge-notification[tuiSlot='bottom']" />
     <div class="t-border">

projects/kit/components/line-clamp/line-clamp.component.ts

@@ -13,7 +13,6 @@ import {
     ViewChild,
 } from '@angular/core';
 import {takeUntilDestroyed, toSignal} from '@angular/core/rxjs-interop';
-import {WaResizeObserver} from '@ng-web-apis/resize-observer';
 import {tuiTypedFromEvent, tuiZonefree} from '@taiga-ui/cdk/observables';
 import {tuiInjectElement, tuiIsCurrentTarget} from '@taiga-ui/cdk/utils/dom';
 import {
@@ -50,7 +49,6 @@ import {TuiLineClampPositionDirective} from './line-clamp-position.directive';
         PolymorpheusTemplate,
         TuiHint,
         TuiLineClampPositionDirective,
-        WaResizeObserver,
     ],
     templateUrl: './line-clamp.template.html',
     styleUrls: ['./line-clamp.style.less'],
@@ -76,7 +74,7 @@ export class TuiLineClamp implements DoCheck, AfterViewInit {
 
     private readonly options = inject(TUI_LINE_CLAMP_OPTIONS);
     private readonly el = tuiInjectElement();
-    private readonly cd = inject(ChangeDetectorRef);
+    private readonly cdr = inject(ChangeDetectorRef);
     private readonly zone: NgZone = inject(NgZone);
     private readonly linesLimit$ = new BehaviorSubject(1);
     private readonly isOverflown$ = new Subject<boolean>();
@@ -146,7 +144,7 @@ export class TuiLineClamp implements DoCheck, AfterViewInit {
     }
 
     protected updateView(): void {
-        this.cd.detectChanges();
+        this.cdr.detectChanges();
     }
 
     private update(): void {

projects/kit/components/preview/preview.component.ts

@@ -7,7 +7,6 @@ import {
     Input,
 } from '@angular/core';
 import {WaMutationObserver} from '@ng-web-apis/mutation-observer';
-import {WaResizeObserver} from '@ng-web-apis/resize-observer';
 import {TUI_FALSE_HANDLER} from '@taiga-ui/cdk/constants';
 import {TuiPan} from '@taiga-ui/cdk/directives/pan';
 import type {TuiZoomEvent} from '@taiga-ui/cdk/directives/zoom';
@@ -42,7 +41,6 @@ const ROTATION_ANGLE = 90;
         TuiPreviewZoom,
         TuiZoom,
         WaMutationObserver,
-        WaResizeObserver,
     ],
     templateUrl: './preview.template.html',
     styleUrls: ['./preview.style.less'],
@@ -119,7 +117,13 @@ export class TuiPreviewComponent {
         }
     }
 
-    protected onResize([entry]: readonly ResizeObserverEntry[]): void {
+    protected onResize(event: UIEvent): void {
+        const [entry] = event as unknown as ResizeObserverEntry[];
+
+        if (!entry) {
+            return;
+        }
+
         if (entry?.contentRect) {
             this.refresh(entry.contentRect.width, entry.contentRect.height);
             this.cdr.detectChanges();

projects/kit/components/preview/preview.template.html

@@ -10,10 +10,10 @@
         [class.t-transitive]="transitioned$ | async"
         [style.cursor]="cursor$ | async"
         [style.transform]="wrapperTransform$ | async"
+        (resize)="onResize($event)"
         (tuiPan)="onPan($event)"
         (tuiZoom)="onZoom($event)"
         (waMutationObserver)="onMutation(contentWrapper)"
-        (waResizeObserver)="onResize($event)"
     >
         <ng-content />
     </section>