refactor(material/form-field): convert to standalone

Converts `material/form-field` to standalone.

Author: crisbeto

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

@@ -26,6 +26,7 @@ export const MAT_ERROR = new InjectionToken<MatError>('MatError');
     '[id]': 'id',
   },
   providers: [{provide: MAT_ERROR, useExisting: MatError}],
+  standalone: true,
 })
 export class MatError {
   @Input() id: string = `mat-mdc-error-${nextUniqueId++}`;

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

@@ -45,6 +45,7 @@ export const FLOATING_LABEL_PARENT = new InjectionToken<FloatingLabelParent>('Fl
     'class': 'mdc-floating-label mat-mdc-floating-label',
     '[class.mdc-floating-label--float-above]': 'floating',
   },
+  standalone: true,
 })
 export class MatFormFieldFloatingLabel implements OnDestroy {
   /** Whether the label is floating. */

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

@@ -20,6 +20,7 @@ let nextUniqueId = 0;
     // Remove align attribute to prevent it from interfering with layout.
     '[attr.align]': 'null',
   },
+  standalone: true,
 })
 export class MatHint {
   /** Whether to align the hint label at the start or end of the line. */

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

@@ -11,5 +11,6 @@ import {Directive} from '@angular/core';
 /** The floating label for a `mat-form-field`. */
 @Directive({
   selector: 'mat-label',
+  standalone: true,
 })
 export class MatLabel {}

src/material/form-field/directives/line-ripple.ts

@@ -27,9 +27,13 @@ const DEACTIVATING_CLASS = 'mdc-line-ripple--deactivating';
   host: {
     'class': 'mdc-line-ripple',
   },
+  standalone: true,
 })
 export class MatFormFieldLineRipple implements OnDestroy {
-  constructor(private _elementRef: ElementRef<HTMLElement>, ngZone: NgZone) {
+  constructor(
+    private _elementRef: ElementRef<HTMLElement>,
+    ngZone: NgZone,
+  ) {
     ngZone.runOutsideAngular(() => {
       _elementRef.nativeElement.addEventListener('transitionend', this._handleTransitionEnd);
     });

src/material/form-field/directives/notched-outline.ts

@@ -34,14 +34,18 @@ import {
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
+  standalone: true,
 })
 export class MatFormFieldNotchedOutline implements AfterViewInit {
   /** Whether the notch should be opened. */
   @Input('matFormFieldNotchedOutlineOpen') open: boolean = false;
 
   @ViewChild('notch') _notch: ElementRef;
 
-  constructor(private _elementRef: ElementRef<HTMLElement>, private _ngZone: NgZone) {}
+  constructor(
+    private _elementRef: ElementRef<HTMLElement>,
+    private _ngZone: NgZone,
+  ) {}
 
   ngAfterViewInit(): void {
     const label = this._elementRef.nativeElement.querySelector<HTMLElement>('.mdc-floating-label');

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

@@ -19,6 +19,7 @@ export const MAT_PREFIX = new InjectionToken<MatPrefix>('MatPrefix');
 @Directive({
   selector: '[matPrefix], [matIconPrefix], [matTextPrefix]',
   providers: [{provide: MAT_PREFIX, useExisting: MatPrefix}],
+  standalone: true,
 })
 export class MatPrefix {
   @Input('matTextPrefix')

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

@@ -19,6 +19,7 @@ export const MAT_SUFFIX = new InjectionToken<MatSuffix>('MatSuffix');
 @Directive({
   selector: '[matSuffix], [matIconSuffix], [matTextSuffix]',
   providers: [{provide: MAT_SUFFIX, useExisting: MatSuffix}],
+  standalone: true,
 })
 export class MatSuffix {
   @Input('matTextSuffix')

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

@@ -51,7 +51,7 @@ import {
   getMatFormFieldDuplicatedHintError,
   getMatFormFieldMissingControlError,
 } from './form-field-errors';
-import {DOCUMENT} from '@angular/common';
+import {DOCUMENT, NgTemplateOutlet} from '@angular/common';
 
 /** Type for the available floatLabel values. */
 export type FloatLabelType = 'always' | 'auto';
@@ -140,7 +140,6 @@ interface MatFormFieldControl<T> extends _MatFormFieldControl<T> {}
     '[class.mat-mdc-form-field-label-always-float]': '_shouldAlwaysFloat()',
     '[class.mat-mdc-form-field-has-icon-prefix]': '_hasIconPrefix',
     '[class.mat-mdc-form-field-has-icon-suffix]': '_hasIconSuffix',
-
     // Note that these classes reuse the same names as the non-MDC version, because they can be
     // considered a public API since custom form controls may use them to style themselves.
     // See https://github.com/angular/components/pull/20502#discussion_r486124901.
@@ -169,6 +168,14 @@ interface MatFormFieldControl<T> extends _MatFormFieldControl<T> {}
     {provide: MAT_FORM_FIELD, useExisting: MatFormField},
     {provide: FLOATING_LABEL_PARENT, useExisting: MatFormField},
   ],
+  standalone: true,
+  imports: [
+    MatFormFieldFloatingLabel,
+    MatFormFieldNotchedOutline,
+    NgTemplateOutlet,
+    MatFormFieldLineRipple,
+    MatHint,
+  ],
 })
 export class MatFormField
   implements FloatingLabelParent, AfterContentInit, AfterContentChecked, AfterViewInit, OnDestroy

src/material/form-field/module.ts

@@ -11,28 +11,24 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatCommonModule} from '@angular/material/core';
 import {MatError} from './directives/error';
-import {MatFormFieldFloatingLabel} from './directives/floating-label';
 import {MatHint} from './directives/hint';
 import {MatLabel} from './directives/label';
-import {MatFormFieldLineRipple} from './directives/line-ripple';
-import {MatFormFieldNotchedOutline} from './directives/notched-outline';
 import {MatPrefix} from './directives/prefix';
 import {MatSuffix} from './directives/suffix';
 import {MatFormField} from './form-field';
 
 @NgModule({
-  imports: [MatCommonModule, CommonModule, ObserversModule],
-  exports: [MatFormField, MatLabel, MatHint, MatError, MatPrefix, MatSuffix, MatCommonModule],
-  declarations: [
+  imports: [
+    MatCommonModule,
+    CommonModule,
+    ObserversModule,
     MatFormField,
     MatLabel,
     MatError,
     MatHint,
     MatPrefix,
     MatSuffix,
-    MatFormFieldFloatingLabel,
-    MatFormFieldNotchedOutline,
-    MatFormFieldLineRipple,
   ],
+  exports: [MatFormField, MatLabel, MatHint, MatError, MatPrefix, MatSuffix, MatCommonModule],
 })
 export class MatFormFieldModule {}