chore: drop waResizeObserver

taiga-family · Sep 16, 2024 · 9975242 · 9975242
1 parent 40943ea
commit 9975242
Show file tree

Hide file tree

Showing 12 changed files with 32 additions and 24 deletions.
diff --git a/projects/addon-commerce/components/input-card-group/input-card-group.component.ts b/projects/addon-commerce/components/input-card-group/input-card-group.component.ts
@@ -13,7 +13,6 @@ import {
 import {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,
@@ -85,7 +84,6 @@ export interface TuiCard {
         TuiIconPipe,
         TuiLet,
         TuiMapperPipe,
-        WaResizeObserver,
     ],
     templateUrl: './input-card-group.template.html',
     styleUrls: ['./input-card-group.style.less'],

diff --git a/projects/addon-commerce/components/input-card-group/input-card-group.template.html b/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

diff --git a/projects/addon-mobile/components/swipe-action/swipe-actions.component.ts b/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();
     }
 }
diff --git a/projects/addon-mobile/components/swipe-action/swipe-actions.template.html b/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>
diff --git a/projects/core/components/textfield/textfield.component.ts b/projects/core/components/textfield/textfield.component.ts
@@ -14,7 +14,6 @@ import {
     ViewEncapsulation,
 } from '@angular/core';
 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';
@@ -42,7 +41,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,
@@ -137,8 +136,14 @@ export class TuiTextfieldComponent<T> implements TuiDataListHost<T> {
         return Boolean(this.label?.nativeElement?.childNodes.length);
     }
 
-    protected onResize(entry: readonly ResizeObserverEntry[]): void {
-        this.side = entry[0]?.contentRect?.width || 0;
+    protected onResize(event: UIEvent): void {
+        const [entry] = event as unknown as ResizeObserverEntry[];
+
+        if (!entry) {
+            return;
+        }
+
+        this.side = entry?.contentRect?.width || 0;
         this.cdr.detectChanges();
     }
 }
diff --git a/projects/core/components/textfield/textfield.template.html b/projects/core/components/textfield/textfield.template.html
@@ -4,7 +4,7 @@
 <span
     class="t-content"
     (mousedown.prevent)="el?.nativeElement?.focus()"
-    (waResizeObserver)="onResize($event)"
+    (resize)="onResize($event)"
 >
     <ng-content />
     <button

diff --git a/projects/kit/components/badged-content/badged-content.component.ts b/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,

diff --git a/projects/kit/components/badged-content/badged-content.template.html b/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">

diff --git a/projects/kit/components/line-clamp/line-clamp.component.ts b/projects/kit/components/line-clamp/line-clamp.component.ts
@@ -13,7 +13,6 @@ import {
     signal,
     ViewChild,
 } from '@angular/core';
-import {WaResizeObserver} from '@ng-web-apis/resize-observer';
 import {TuiLet} from '@taiga-ui/cdk/directives/let';
 import {tuiTypedFromEvent, tuiZonefree} from '@taiga-ui/cdk/observables';
 import {tuiInjectElement, tuiIsCurrentTarget} from '@taiga-ui/cdk/utils/dom';
@@ -53,7 +52,6 @@ import {TuiLineClampPositionDirective} from './line-clamp-position.directive';
         TuiHint,
         TuiLet,
         TuiLineClampPositionDirective,
-        WaResizeObserver,
     ],
     templateUrl: './line-clamp.template.html',
     styleUrls: ['./line-clamp.style.less'],

diff --git a/projects/kit/components/line-clamp/line-clamp.template.html b/projects/kit/components/line-clamp/line-clamp.template.html
@@ -6,7 +6,7 @@
     [style.word-break]="(lineClamp || 0) > 1 ? 'break-word' : 'break-all'"
     [tuiHint]="computedContent"
     (mouseenter)="updateView()"
-    (waResizeObserver)="updateView()"
+    (resize)="updateView()"
 >
     <ng-container *polymorpheusOutlet="content as text">
         {{ text }}

diff --git a/projects/kit/components/preview/preview.component.ts b/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();

diff --git a/projects/kit/components/preview/preview.template.html b/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>