From d1a247112b74c12d1518a41efc9e08e1e6deb65c Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Thu, 22 Aug 2024 09:19:35 +0200
Subject: [PATCH] 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.
---
 src/cdk/text-field/BUILD.bazel                |  4 ++++
 src/cdk/text-field/autofill.ts                |  6 ++++++
 src/cdk/text-field/autosize.ts                |  8 ++++++--
 src/cdk/text-field/text-field-style-loader.ts | 20 +++++++++++++++++++
 src/material/core/_core.scss                  |  2 --
 5 files changed, 36 insertions(+), 4 deletions(-)
 create mode 100644 src/cdk/text-field/text-field-style-loader.ts

diff --git a/src/cdk/text-field/BUILD.bazel b/src/cdk/text-field/BUILD.bazel
index 7c88c2889835..edbeab8b7623 100644
--- a/src/cdk/text-field/BUILD.bazel
+++ b/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",
     ],
diff --git a/src/cdk/text-field/autofill.ts b/src/cdk/text-field/autofill.ts
index 2ad49e5f52e7..7717dd0d167e 100644
--- a/src/cdk/text-field/autofill.ts
+++ b/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);
 
diff --git a/src/cdk/text-field/autosize.ts b/src/cdk/text-field/autosize.ts
index 69d1c1dec8bd..c3b784851796 100644
--- a/src/cdk/text-field/autosize.ts
+++ b/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;
   }
 
diff --git a/src/cdk/text-field/text-field-style-loader.ts b/src/cdk/text-field/text-field-style-loader.ts
new file mode 100644
index 000000000000..a859d3494c3a
--- /dev/null
+++ b/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 {}
diff --git a/src/material/core/_core.scss b/src/material/core/_core.scss
index 91a7cd41cc8c..6ddcedfd18fb 100644
--- a/src/material/core/_core.scss
+++ b/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');