fix: address feedback

Author: mmalerba

src/cdk/observers/private/BUILD.bazel

@@ -15,7 +15,6 @@ ng_module(
     ),
     deps = [
         "//src:dev_mode_types",
-        "//src/cdk/platform",
         "@npm//rxjs",
     ],
 )

src/cdk/observers/private/shared-resize-observer.ts

@@ -8,7 +8,6 @@
 import {inject, Injectable, NgZone, OnDestroy} from '@angular/core';
 import {Observable, Subject} from 'rxjs';
 import {filter, shareReplay, takeUntil} from 'rxjs/operators';
-import {Platform} from '@angular/cdk/platform';
 
 /**
  * Handler that logs "ResizeObserver loop limit exceeded" errors.
@@ -40,10 +39,8 @@ class SingleBoxSharedResizeObserver {
   constructor(
     /** The box type to observe for resizes. */
     private _box: ResizeObserverBoxOptions,
-    /** The platform. */
-    platform: Platform,
   ) {
-    if (platform.isBrowser) {
+    if (typeof ResizeObserver !== 'undefined') {
       this._resizeObserver = new ResizeObserver(entries => this._resizeSubject.next(entries));
     }
   }
@@ -58,16 +55,15 @@ class SingleBoxSharedResizeObserver {
       this._elementObservables.set(
         target,
         new Observable<ResizeObserverEntry[]>(observer => {
-          const subscription = this._resizeSubject
-            .pipe(filter(entries => entries.some(entry => entry.target === target)))
-            .subscribe(observer);
+          const subscription = this._resizeSubject.subscribe(observer);
           this._resizeObserver?.observe(target, {box: this._box});
           return () => {
             this._resizeObserver?.unobserve(target);
             subscription.unsubscribe();
             this._elementObservables.delete(target);
           };
         }).pipe(
+          filter(entries => entries.some(entry => entry.target === target)),
           // Share a replay of the last event so that subsequent calls to observe the same element
           // receive initial sizing info like the first one. Also enable ref counting so the
           // element will be automatically unobserved when there are no more subscriptions.
@@ -108,11 +104,8 @@ export class SharedResizeObserver implements OnDestroy {
   /** The Angular zone. */
   private _ngZone = inject(NgZone);
 
-  /** The platform. */
-  private _platform = inject(Platform);
-
   constructor() {
-    if (this._platform.isBrowser && (typeof ngDevMode === 'undefined' || ngDevMode)) {
+    if (typeof ResizeObserver !== 'undefined' && (typeof ngDevMode === 'undefined' || ngDevMode)) {
       this._ngZone.runOutsideAngular(() => {
         window.addEventListener('error', loopLimitExceededErrorHandler);
       });
@@ -124,7 +117,7 @@ export class SharedResizeObserver implements OnDestroy {
       observer.destroy();
     }
     this._observers.clear();
-    if (this._platform.isBrowser && (typeof ngDevMode === 'undefined' || ngDevMode)) {
+    if (typeof ResizeObserver !== 'undefined' && (typeof ngDevMode === 'undefined' || ngDevMode)) {
       window.removeEventListener('error', loopLimitExceededErrorHandler);
     }
   }
@@ -138,7 +131,7 @@ export class SharedResizeObserver implements OnDestroy {
   observe(target: Element, options?: ResizeObserverOptions): Observable<ResizeObserverEntry[]> {
     const box = options?.box || 'content-box';
     if (!this._observers.has(box)) {
-      this._observers.set(box, new SingleBoxSharedResizeObserver(box, this._platform));
+      this._observers.set(box, new SingleBoxSharedResizeObserver(box));
     }
     return this._observers.get(box)!.observe(target);
   }

src/material/form-field/directives/floating-label.ts

@@ -9,16 +9,21 @@
 import {
   Directive,
   ElementRef,
-  EventEmitter,
   inject,
   Input,
   NgZone,
   OnDestroy,
-  Output,
+  InjectionToken,
 } from '@angular/core';
 import {SharedResizeObserver} from '@angular/cdk/observers/private';
 import {Subscription} from 'rxjs';
 
+export interface FloatingLabelParent {
+  _handleLabelResized(): void;
+}
+
+export const FLOATING_LABEL_PARENT = new InjectionToken<FloatingLabelParent>('FloatingLabelParent');
+
 /**
  * Internal directive that maintains a MDC floating label. This directive does not
  * use the `MDCFloatingLabelFoundation` class, as it is not worth the size cost of
@@ -48,7 +53,7 @@ export class MatFormFieldFloatingLabel implements OnDestroy {
   set floating(value: boolean) {
     this._floating = value;
     if (this.monitorResize) {
-      this.resized.emit();
+      this._handleResize();
     }
   }
   private _floating = false;
@@ -68,15 +73,14 @@ export class MatFormFieldFloatingLabel implements OnDestroy {
   }
   private _monitorResize = false;
 
-  /** Emits when the label is resized (if resize events are being monitored). */
-  @Output() resized = new EventEmitter<void>();
-
   /** The shared ResizeObserver. */
   private _resizeObserver = inject(SharedResizeObserver);
 
   /** The Angular zone. */
   private _ngZone = inject(NgZone);
 
+  private _parent = inject(FLOATING_LABEL_PARENT);
+
   /** The current resize event subscription. */
   private _resizeSubscription = new Subscription();
 
@@ -106,7 +110,9 @@ export class MatFormFieldFloatingLabel implements OnDestroy {
     // This is expected, but If we allow this to all happen within the same macro task it causes an
     // error: `ResizeObserver loop limit exceeded`. Therefore we push the notch resize out until
     // the next macro task.
-    setTimeout(() => this.resized.emit());
+    this._ngZone.runOutsideAngular(() => {
+      setTimeout(() => this._parent._handleLabelResized());
+    });
   }
 
   /** Subscribes to resize events. */

src/material/form-field/form-field.html

@@ -20,8 +20,7 @@
          *ngIf="_hasFloatingLabel()"
          [id]="_labelId"
          [attr.for]="_control.id"
-         [attr.aria-owns]="_control.id"
-         (resized)="_refreshOutlineNotchWidth()">
+         [attr.aria-owns]="_control.id">
     <ng-content select="mat-label"></ng-content>
     <!--
       We set the required marker as a separate element, in order to make it easier to target if

src/material/form-field/form-field.ts

@@ -33,7 +33,11 @@ import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 import {merge, Subject} from 'rxjs';
 import {takeUntil} from 'rxjs/operators';
 import {MAT_ERROR, MatError} from './directives/error';
-import {MatFormFieldFloatingLabel} from './directives/floating-label';
+import {
+  FLOATING_LABEL_PARENT,
+  FloatingLabelParent,
+  MatFormFieldFloatingLabel,
+} from './directives/floating-label';
 import {MatHint} from './directives/hint';
 import {MatLabel} from './directives/label';
 import {MatFormFieldLineRipple} from './directives/line-ripple';
@@ -151,10 +155,13 @@ const FLOATING_LABEL_DEFAULT_DOCKED_TRANSFORM = `translateY(-50%)`;
   },
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [{provide: MAT_FORM_FIELD, useExisting: MatFormField}],
+  providers: [
+    {provide: MAT_FORM_FIELD, useExisting: MatFormField},
+    {provide: FLOATING_LABEL_PARENT, useExisting: MatFormField},
+  ],
 })
 export class MatFormField
-  implements AfterContentInit, AfterContentChecked, AfterViewInit, OnDestroy
+  implements FloatingLabelParent, AfterContentInit, AfterContentChecked, AfterViewInit, OnDestroy
 {
   @ViewChild('textField') _textField: ElementRef<HTMLElement>;
   @ViewChild('iconPrefixContainer') _iconPrefixContainer: ElementRef<HTMLElement>;
@@ -532,6 +539,10 @@ export class MatFormField
       : 'hint';
   }
 
+  _handleLabelResized() {
+    this._refreshOutlineNotchWidth();
+  }
+
   /** Refreshes the width of the outline-notch, if present. */
   _refreshOutlineNotchWidth() {
     if (!this._hasOutline() || !this._floatingLabel || !this._shouldLabelFloat()) {