fix(cdk/text-field): avoid having to manually load text field styles

Reworks the text field so that users don't have to manually load its structural styles.

Author: crisbeto

src/cdk/text-field/BUILD.bazel

@@ -16,9 +16,13 @@ ng_module(
         ["**/*.ts"],
         exclude = ["**/*.spec.ts"],
     ),
+    assets = [
+        ":text-field-prebuilt.css",
+    ],
     deps = [
         "//src/cdk/coercion",
         "//src/cdk/platform",
+        "//src/cdk/private",
         "@npm//@angular/core",
         "@npm//rxjs",
     ],

src/cdk/text-field/autofill.ts

@@ -11,14 +11,17 @@ import {
   Directive,
   ElementRef,
   EventEmitter,
+  inject,
   Injectable,
   NgZone,
   OnDestroy,
   OnInit,
   Output,
 } from '@angular/core';
+import {_CdkPrivateStyleLoader} from '@angular/cdk/private';
 import {coerceElement} from '@angular/cdk/coercion';
 import {EMPTY, Observable, Subject} from 'rxjs';
+import {_CdkTextFieldStyleLoader} from './text-field-style-loader';
 
 /** An event that is emitted when the autofill state of an input changes. */
 export type AutofillEvent = {
@@ -44,6 +47,7 @@ const listenerOptions = normalizePassiveListenerOptions({passive: true});
  */
 @Injectable({providedIn: 'root'})
 export class AutofillMonitor implements OnDestroy {
+  private _styleLoader = inject(_CdkPrivateStyleLoader);
   private _monitoredElements = new Map<Element, MonitoredElementInfo>();
 
   constructor(
@@ -70,6 +74,8 @@ export class AutofillMonitor implements OnDestroy {
       return EMPTY;
     }
 
+    this._styleLoader.load(_CdkTextFieldStyleLoader);
+
     const element = coerceElement(elementOrRef);
     const info = this._monitoredElements.get(element);
 

src/cdk/text-field/autosize.ts

@@ -18,11 +18,14 @@ import {
   Optional,
   Inject,
   booleanAttribute,
+  inject,
 } from '@angular/core';
+import {DOCUMENT} from '@angular/common';
 import {Platform} from '@angular/cdk/platform';
+import {_CdkPrivateStyleLoader} from '@angular/cdk/private';
 import {auditTime, takeUntil} from 'rxjs/operators';
 import {fromEvent, Subject} from 'rxjs';
-import {DOCUMENT} from '@angular/common';
+import {_CdkTextFieldStyleLoader} from './text-field-style-loader';
 
 /** Directive to automatically resize a textarea to fit its content. */
 @Directive({
@@ -124,8 +127,9 @@ export class CdkTextareaAutosize implements AfterViewInit, DoCheck, OnDestroy {
     /** @breaking-change 11.0.0 make document required */
     @Optional() @Inject(DOCUMENT) document?: any,
   ) {
+    const styleLoader = inject(_CdkPrivateStyleLoader);
+    styleLoader.load(_CdkTextFieldStyleLoader);
     this._document = document;
-
     this._textareaElement = this._elementRef.nativeElement as HTMLTextAreaElement;
   }
 

src/cdk/text-field/text-field-style-loader.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
+
+/** Component used to load the structural styles of the text field. */
+@Component({
+  template: '',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  styleUrl: 'text-field-prebuilt.css',
+  standalone: true,
+  host: {'cdk-text-field-style-loader': ''},
+})
+export class _CdkTextFieldStyleLoader {}

src/material/core/_core.scss

@@ -15,8 +15,6 @@
   }
 
   @include cdk.a11y-visually-hidden();
-  @include cdk.text-field-autosize();
-  @include cdk.text-field-autofill();
   @include private.structural-styling('mat');
   @include private.structural-styling('mat-mdc');