feat(material/form-field): switch implementation to use MDC

Moves the MDC-based form field to stable and renames the old form field to `@angular/material/legacy-form-field`.

.github/CODEOWNERS

@@ -12,10 +12,10 @@
 /src/material/dialog/**                            @andrewseguin @crisbeto
 /src/material/divider/**                           @andrewseguin @crisbeto
 /src/material/expansion/**                         @andrewseguin
-/src/material/form-field/**                        @mmalerba
+/src/material/legacy-form-field/**                 @mmalerba
 /src/material/grid-list/**                         @andrewseguin
 /src/material/icon/**                              @andrewseguin
-/src/material/input/**                             @mmalerba
+/src/material/legacy-input/**                      @mmalerba
 /src/material/list/**                              @andrewseguin @crisbeto @devversion
 /src/material/menu/**                              @crisbeto
 /src/material/paginator/**                         @andrewseguin
@@ -39,6 +39,7 @@
 /src/material/legacy-tooltip/**                    @andrewseguin
 /src/material/tooltip/**                           @andrewseguin
 /src/material/tree/**                              @jelbourn @andrewseguin
+/src/material/input/**                                 @devversion @mmalerba
 
 # Angular Material core
 /src/material/core/*                                   @andrewseguin
@@ -114,7 +115,6 @@
 /src/material-experimental/mdc-core/**                 @crisbeto
 /src/material-experimental/mdc-dialog/**               @devversion
 /src/material-experimental/mdc-form-field/**           @devversion @mmalerba
-/src/material-experimental/mdc-input/**                @devversion @mmalerba
 /src/material-experimental/mdc-list/**                 @mmalerba @devversion
 /src/material-experimental/mdc-menu/**                 @crisbeto
 /src/material-experimental/mdc-select/**               @crisbeto
@@ -329,7 +329,7 @@
 /tools/public_api_guard/material/form-field**      @mmalerba
 /tools/public_api_guard/material/grid-list**       @andrewseguin
 /tools/public_api_guard/material/icon**            @andrewseguin
-/tools/public_api_guard/material/input**           @mmalerba
+/tools/public_api_guard/material/legacy-input**    @mmalerba
 /tools/public_api_guard/material/list**            @andrewseguin @crisbeto @devversion
 /tools/public_api_guard/material/menu**            @crisbeto
 /tools/public_api_guard/material/paginator**       @andrewseguin

.ng-dev/commit-message.mts

@@ -47,8 +47,8 @@ export const commitMessage: CommitMessageConfig = {
     'material-experimental/mdc-chips',
     'material-experimental/mdc-core',
     'material-experimental/mdc-dialog',
-    'material-experimental/mdc-form-field',
-    'material-experimental/mdc-input',
+    'material/form-field',
+    'material/input',
     'material-experimental/mdc-list',
     'material-experimental/mdc-menu',
     'material-experimental/mdc-paginator',
@@ -83,9 +83,10 @@ export const commitMessage: CommitMessageConfig = {
     'material/divider',
     'material/expansion',
     'material/form-field',
+    'material/legacy-form-field',
     'material/grid-list',
     'material/icon',
-    'material/input',
+    'material/legacy-input',
     'material/list',
     'material/menu',
     'material/paginator',

integration/size-test/material-experimental/mdc-form-field/BUILD.bazel

@@ -4,16 +4,16 @@ size_test(
     name = "basic",
     file = "basic.ts",
     deps = [
-        "//src/material-experimental/mdc-form-field",
-        "//src/material-experimental/mdc-input",
+        "//src/material/form-field",
+        "//src/material/input",
     ],
 )
 
 size_test(
     name = "advanced",
     file = "advanced.ts",
     deps = [
-        "//src/material-experimental/mdc-form-field",
-        "//src/material-experimental/mdc-input",
+        "//src/material/form-field",
+        "//src/material/input",
     ],
 )

integration/size-test/material-experimental/mdc-form-field/advanced.ts

@@ -1,6 +1,6 @@
 import {Component, NgModule} from '@angular/core';
-import {MatFormFieldModule} from '@angular/material-experimental/mdc-form-field';
-import {MatInputModule} from '@angular/material-experimental/mdc-input';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatInputModule} from '@angular/material/input';
 
 /**
  * Advanced component using `MatFormField` and `MatInput` in combination with content

integration/size-test/material-experimental/mdc-form-field/basic.ts

@@ -1,6 +1,6 @@
 import {Component, NgModule} from '@angular/core';
-import {MatFormFieldModule} from '@angular/material-experimental/mdc-form-field';
-import {MatInputModule} from '@angular/material-experimental/mdc-input';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatInputModule} from '@angular/material/input';
 
 /**
  * Basic component using `MatFormField` and `MatInput`. Other parts of the form-field

integration/size-test/material/form-field/BUILD.bazel

@@ -4,16 +4,16 @@ size_test(
     name = "basic",
     file = "basic.ts",
     deps = [
-        "//src/material/form-field",
-        "//src/material/input",
+        "//src/material/legacy-form-field",
+        "//src/material/legacy-input",
     ],
 )
 
 size_test(
     name = "advanced",
     file = "advanced.ts",
     deps = [
-        "//src/material/form-field",
-        "//src/material/input",
+        "//src/material/legacy-form-field",
+        "//src/material/legacy-input",
     ],
 )

integration/size-test/material/form-field/advanced.ts

@@ -1,6 +1,6 @@
 import {Component, NgModule} from '@angular/core';
-import {MatFormFieldModule} from '@angular/material/form-field';
-import {MatInputModule} from '@angular/material/input';
+import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
+import {MatLegacyInputModule} from '@angular/material/legacy-input';
 
 /**
  * Advanced component using `MatFormField` and `MatInput` in combination with content
@@ -20,7 +20,7 @@ import {MatInputModule} from '@angular/material/input';
 export class TestComponent {}
 
 @NgModule({
-  imports: [MatInputModule, MatFormFieldModule],
+  imports: [MatLegacyInputModule, MatLegacyFormFieldModule],
   declarations: [TestComponent],
   bootstrap: [TestComponent],
 })

integration/size-test/material/form-field/basic.ts

@@ -1,6 +1,6 @@
 import {Component, NgModule} from '@angular/core';
-import {MatFormFieldModule} from '@angular/material/form-field';
-import {MatInputModule} from '@angular/material/input';
+import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
+import {MatLegacyInputModule} from '@angular/material/legacy-input';
 
 /**
  * Basic component using `MatFormField` and `MatInput`. Other parts of the form-field
@@ -17,7 +17,7 @@ import {MatInputModule} from '@angular/material/input';
 export class TestComponent {}
 
 @NgModule({
-  imports: [MatInputModule, MatFormFieldModule],
+  imports: [MatLegacyInputModule, MatLegacyFormFieldModule],
   declarations: [TestComponent],
   bootstrap: [TestComponent],
 })

src/components-examples/material-experimental/mdc-form-field/BUILD.bazel

@@ -12,8 +12,8 @@ ng_module(
     deps = [
         "//src/cdk/a11y",
         "//src/cdk/coercion",
-        "//src/material-experimental/mdc-form-field",
-        "//src/material-experimental/mdc-input",
+        "//src/material/form-field",
+        "//src/material/input",
         "//src/material/icon",
         "@npm//@angular/common",
         "@npm//@angular/forms",

src/components-examples/material-experimental/mdc-form-field/index.ts

@@ -1,7 +1,7 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {ReactiveFormsModule} from '@angular/forms';
-import {MatFormFieldModule} from '@angular/material-experimental/mdc-form-field';
+import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatIconModule} from '@angular/material/icon';
 import {
   MdcFormFieldCustomControlExample,

src/components-examples/material-experimental/mdc-form-field/mdc-form-field-custom-control/form-field-custom-control-example.ts

@@ -2,8 +2,7 @@ import {FocusMonitor} from '@angular/cdk/a11y';
 import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
 import {Component, ElementRef, Inject, Input, OnDestroy, Optional, Self} from '@angular/core';
 import {ControlValueAccessor, FormBuilder, NgControl, Validators} from '@angular/forms';
-import {MatFormField, MatFormFieldControl} from '@angular/material-experimental/mdc-form-field';
-import {MAT_FORM_FIELD} from '@angular/material/form-field';
+import {MatFormField, MatFormFieldControl, MAT_FORM_FIELD} from '@angular/material/form-field';
 import {Subject} from 'rxjs';
 
 /** @title Form field with custom telephone number input control. */

src/material-experimental/_index.scss

@@ -35,10 +35,6 @@
   mdc-chips-density, mdc-chips-theme;
 @forward './mdc-dialog/dialog-theme' as mdc-dialog-* show mdc-dialog-color, mdc-dialog-typography,
   mdc-dialog-density, mdc-dialog-theme;
-@forward './mdc-form-field/form-field-theme' as mdc-form-field-* show mdc-form-field-color,
-  mdc-form-field-typography, mdc-form-field-density, mdc-form-field-theme;
-@forward './mdc-input/input-theme' as mdc-input-* show mdc-input-color, mdc-input-typography,
-  mdc-input-density, mdc-input-theme;
 @forward './mdc-list/list-theme' as mdc-list-* show mdc-list-color, mdc-list-typography,
   mdc-list-density, mdc-list-theme;
 @forward './mdc-menu/menu-theme' as mdc-menu-* show mdc-menu-color, mdc-menu-typography,

src/material-experimental/config.bzl

@@ -12,10 +12,6 @@ entryPoints = [
     "mdc-core/testing",
     "mdc-dialog",
     "mdc-dialog/testing",
-    "mdc-form-field",
-    "mdc-form-field/testing",
-    "mdc-input",
-    "mdc-input/testing",
     "mdc-list",
     "mdc-list/testing",
     "mdc-menu",

src/material-experimental/mdc-autocomplete/BUILD.bazel

@@ -59,8 +59,8 @@ ng_test_library(
         "//src/cdk/scrolling",
         "//src/cdk/testing/private",
         "//src/material-experimental/mdc-core",
-        "//src/material-experimental/mdc-form-field",
-        "//src/material-experimental/mdc-input",
+        "//src/material/form-field",
+        "//src/material/input",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",
         "@npm//rxjs",

src/material-experimental/mdc-autocomplete/autocomplete.spec.ts

@@ -37,8 +37,8 @@ import {
 } from '@angular/core/testing';
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatOption, MatOptionSelectionChange} from '@angular/material-experimental/mdc-core';
-import {MatFormField, MatFormFieldModule} from '@angular/material-experimental/mdc-form-field';
-import {MatInputModule} from '@angular/material-experimental/mdc-input';
+import {MatFormField, MatFormFieldModule} from '@angular/material/form-field';
+import {MatInputModule} from '@angular/material/input';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {EMPTY, Observable, Subject, Subscription} from 'rxjs';

src/material-experimental/mdc-chips/BUILD.bazel

@@ -24,7 +24,7 @@ ng_module(
     deps = [
         "//src:dev_mode_types",
         "//src/material-experimental/mdc-core",
-        "//src/material-experimental/mdc-form-field",
+        "//src/material/form-field",
         "@npm//@angular/animations",
         "@npm//@angular/common",
         "@npm//@angular/core",
@@ -78,8 +78,8 @@ ng_test_library(
         "//src/cdk/testing",
         "//src/cdk/testing/private",
         "//src/material-experimental/mdc-core",
-        "//src/material-experimental/mdc-form-field",
-        "//src/material-experimental/mdc-input",
+        "//src/material/form-field",
+        "//src/material/input",
         "@npm//@angular/animations",
         "@npm//@angular/common",
         "@npm//@angular/forms",

src/material-experimental/mdc-chips/chip-grid.spec.ts

@@ -31,8 +31,8 @@ import {
 } from '@angular/core';
 import {ComponentFixture, fakeAsync, flush, TestBed, tick} from '@angular/core/testing';
 import {FormControl, FormsModule, NgForm, ReactiveFormsModule, Validators} from '@angular/forms';
-import {MatFormFieldModule} from '@angular/material-experimental/mdc-form-field';
-import {MatInputModule} from '@angular/material-experimental/mdc-input';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatInputModule} from '@angular/material/input';
 import {By} from '@angular/platform-browser';
 import {BrowserAnimationsModule, NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {MatChipEvent, MatChipGrid, MatChipInputEvent, MatChipRow, MatChipsModule} from './index';

src/material-experimental/mdc-chips/chip-grid.ts

@@ -38,7 +38,7 @@ import {
   ErrorStateMatcher,
   mixinErrorState,
 } from '@angular/material-experimental/mdc-core';
-import {MatFormFieldControl} from '@angular/material-experimental/mdc-form-field';
+import {MatFormFieldControl} from '@angular/material/form-field';
 import {MatChipTextControl} from './chip-text-control';
 import {Observable, Subject, merge} from 'rxjs';
 import {takeUntil} from 'rxjs/operators';

src/material-experimental/mdc-chips/chip-input.spec.ts

@@ -4,7 +4,7 @@ import {PlatformModule} from '@angular/cdk/platform';
 import {dispatchKeyboardEvent} from '../../cdk/testing/private';
 import {Component, DebugElement, ViewChild} from '@angular/core';
 import {waitForAsync, ComponentFixture, fakeAsync, TestBed, flush} from '@angular/core/testing';
-import {MatFormFieldModule} from '@angular/material-experimental/mdc-form-field';
+import {MatFormFieldModule} from '@angular/material/form-field';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {Subject} from 'rxjs';

src/material-experimental/mdc-chips/chip-input.ts

@@ -20,7 +20,7 @@ import {
   Optional,
   Output,
 } from '@angular/core';
-import {MatFormField, MAT_FORM_FIELD} from '@angular/material-experimental/mdc-form-field';
+import {MatFormField, MAT_FORM_FIELD} from '@angular/material/form-field';
 import {MatChipsDefaultOptions, MAT_CHIPS_DEFAULT_OPTIONS} from './tokens';
 import {MatChipGrid} from './chip-grid';
 import {MatChipTextControl} from './chip-text-control';

src/material-experimental/mdc-core/color/_all-color.import.scss

@@ -50,23 +50,6 @@ $mat-mdc-table-mdc-data-table-selected-row-fill-color,
 $mat-mdc-table-mdc-data-table-sort-icon-active-color, $mat-mdc-table-mdc-data-table-sort-icon-color,
 $mat-mdc-table-mdc-data-table-stroke-color, $mat-mdc-table-mdc-data-table-table-divider-color;
 @forward '../../mdc-paginator/paginator-variables' as mat-mdc-paginator-*;
-@forward '../../mdc-form-field/form-field-sizing';
-@forward '../../mdc-form-field/form-field-native-select' hide private-form-field-native-select,
-private-form-field-native-select-color;
-@forward '../../mdc-form-field/form-field-native-select' as mat-mdc-* hide
-$mat-mdc-mat-form-field-select-arrow-height, $mat-mdc-mat-form-field-select-arrow-width,
-$mat-mdc-mat-form-field-select-horizontal-end-padding;
-@forward '../../mdc-form-field/mdc-text-field-theme-variable-refresh' hide
-private-text-field-refresh-theme-variables;
-@forward '../../mdc-form-field/mdc-text-field-theme-variable-refresh' as mat-mdc-* hide
-$mat-mdc-mdc-text-field-background, $mat-mdc-mdc-text-field-bottom-line-hover,
-$mat-mdc-mdc-text-field-bottom-line-idle, $mat-mdc-mdc-text-field-disabled-background,
-$mat-mdc-mdc-text-field-disabled-border, $mat-mdc-mdc-text-field-disabled-border-border,
-$mat-mdc-mdc-text-field-disabled-ink-color, $mat-mdc-mdc-text-field-disabled-label-color,
-$mat-mdc-mdc-text-field-disabled-placeholder-ink-color, $mat-mdc-mdc-text-field-focused-label-color,
-$mat-mdc-mdc-text-field-ink-color, $mat-mdc-mdc-text-field-label,
-$mat-mdc-mdc-text-field-outlined-disabled-border, $mat-mdc-mdc-text-field-outlined-hover-border,
-$mat-mdc-mdc-text-field-outlined-idle-border, $mat-mdc-mdc-text-field-placeholder-ink-color;
 @forward '../core-theme.import';
 @forward '../../mdc-autocomplete/autocomplete-theme' as mat-mdc-autocomplete-*;
 @forward '../../mdc-dialog/dialog-theme' as mat-mdc-dialog-*;
@@ -76,11 +59,6 @@ $mat-mdc-mdc-text-field-outlined-idle-border, $mat-mdc-mdc-text-field-placeholde
 @forward '../../mdc-menu/menu-theme' as mat-mdc-menu-*;
 @forward '../../mdc-paginator/paginator-theme' as mat-mdc-paginator-*;
 @forward '../../mdc-progress-spinner/progress-spinner-theme' as mat-mdc-progress-spinner-*;
-@forward '../../mdc-input/input-theme' as mat-mdc-input-*;
-@forward '../../mdc-form-field/form-field-density' as mat-mdc-*;
-@forward '../../mdc-form-field/form-field-subscript' as mat-mdc-*;
-@forward '../../mdc-form-field/form-field-focus-overlay' as mat-mdc-*;
-@forward '../../mdc-form-field/form-field-theme' as mat-mdc-form-field-*;
 @forward '../theming/all-theme';
 @forward 'all-color' hide all-mdc-component-colors;
 

src/material-experimental/mdc-core/density/_all-density.import.scss

@@ -50,23 +50,6 @@ $mat-mdc-table-mdc-data-table-selected-row-fill-color,
 $mat-mdc-table-mdc-data-table-sort-icon-active-color, $mat-mdc-table-mdc-data-table-sort-icon-color,
 $mat-mdc-table-mdc-data-table-stroke-color, $mat-mdc-table-mdc-data-table-table-divider-color;
 @forward '../../mdc-paginator/paginator-variables' as mat-mdc-paginator-*;
-@forward '../../mdc-form-field/form-field-sizing';
-@forward '../../mdc-form-field/form-field-native-select' hide private-form-field-native-select,
-private-form-field-native-select-color;
-@forward '../../mdc-form-field/form-field-native-select' as mat-mdc-* hide
-$mat-mdc-mat-form-field-select-arrow-height, $mat-mdc-mat-form-field-select-arrow-width,
-$mat-mdc-mat-form-field-select-horizontal-end-padding;
-@forward '../../mdc-form-field/mdc-text-field-theme-variable-refresh' hide
-private-text-field-refresh-theme-variables;
-@forward '../../mdc-form-field/mdc-text-field-theme-variable-refresh' as mat-mdc-* hide
-$mat-mdc-mdc-text-field-background, $mat-mdc-mdc-text-field-bottom-line-hover,
-$mat-mdc-mdc-text-field-bottom-line-idle, $mat-mdc-mdc-text-field-disabled-background,
-$mat-mdc-mdc-text-field-disabled-border, $mat-mdc-mdc-text-field-disabled-border-border,
-$mat-mdc-mdc-text-field-disabled-ink-color, $mat-mdc-mdc-text-field-disabled-label-color,
-$mat-mdc-mdc-text-field-disabled-placeholder-ink-color, $mat-mdc-mdc-text-field-focused-label-color,
-$mat-mdc-mdc-text-field-ink-color, $mat-mdc-mdc-text-field-label,
-$mat-mdc-mdc-text-field-outlined-disabled-border, $mat-mdc-mdc-text-field-outlined-hover-border,
-$mat-mdc-mdc-text-field-outlined-idle-border, $mat-mdc-mdc-text-field-placeholder-ink-color;
 @forward '../core-theme.import';
 @forward '../../mdc-autocomplete/autocomplete-theme' as mat-mdc-autocomplete-*;
 @forward '../../mdc-dialog/dialog-theme' as mat-mdc-dialog-*;
@@ -76,11 +59,6 @@ $mat-mdc-mdc-text-field-outlined-idle-border, $mat-mdc-mdc-text-field-placeholde
 @forward '../../mdc-menu/menu-theme' as mat-mdc-menu-*;
 @forward '../../mdc-paginator/paginator-theme' as mat-mdc-paginator-*;
 @forward '../../mdc-progress-spinner/progress-spinner-theme' as mat-mdc-progress-spinner-*;
-@forward '../../mdc-input/input-theme' as mat-mdc-input-*;
-@forward '../../mdc-form-field/form-field-density' as mat-mdc-*;
-@forward '../../mdc-form-field/form-field-subscript' as mat-mdc-*;
-@forward '../../mdc-form-field/form-field-focus-overlay' as mat-mdc-*;
-@forward '../../mdc-form-field/form-field-theme' as mat-mdc-form-field-*;
 @forward '../theming/all-theme';
 @forward 'all-density' show all-mdc-component-densities;
 

src/material-experimental/mdc-core/theming/BUILD.bazel

@@ -26,8 +26,8 @@ sass_library(
         "//src/material-experimental/mdc-chips:mdc_chips_scss_lib",
         "//src/material-experimental/mdc-core:mdc_core_scss_lib",
         "//src/material-experimental/mdc-dialog:mdc_dialog_scss_lib",
-        "//src/material-experimental/mdc-form-field:mdc_form_field_scss_lib",
-        "//src/material-experimental/mdc-input:mdc_input_scss_lib",
+        "//src/material/form-field:form_field_scss_lib",
+        "//src/material/input:input_scss_lib",
         "//src/material-experimental/mdc-list:mdc_list_scss_lib",
         "//src/material-experimental/mdc-menu:mdc_menu_scss_lib",
         "//src/material-experimental/mdc-paginator:mdc_paginator_scss_lib",