feat(material/input): switch implementation to use MDC

Moves the MDC-based input to stable and renames the old form field to `@angular/material/legacy-input`.
angular · Jul 25, 2022 · 6883100 · 6883100
1 parent 3db6b1d
commit 6883100
Show file tree

Hide file tree

Showing 170 changed files with 2,125 additions and 1,984 deletions.
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -114,7 +114,7 @@
 /src/material-experimental/mdc-chips/**                @mmalerba
 /src/material-experimental/mdc-core/**                 @crisbeto
 /src/material-experimental/mdc-dialog/**               @devversion
-/src/material-experimental/mdc-form-field/**           @devversion @mmalerba
+/src/material/form-field/**                            @devversion @mmalerba
 /src/material-experimental/mdc-list/**                 @mmalerba @devversion
 /src/material-experimental/mdc-menu/**                 @crisbeto
 /src/material-experimental/mdc-select/**               @crisbeto

diff --git a/src/components-examples/cdk/text-field/BUILD.bazel b/src/components-examples/cdk/text-field/BUILD.bazel
@@ -12,7 +12,7 @@ ng_module(
     deps = [
         "//src/cdk/text-field",
         "//src/material/button",
-        "//src/material/input",
+        "//src/material/legacy-input",
         "//src/material/select",
     ],
 )

diff --git a/src/components-examples/cdk/text-field/index.ts b/src/components-examples/cdk/text-field/index.ts
@@ -2,7 +2,7 @@ import {TextFieldModule} from '@angular/cdk/text-field';
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatButtonModule} from '@angular/material/button';
-import {MatInputModule} from '@angular/material/input';
+import {MatLegacyInputModule} from '@angular/material/legacy-input';
 import {MatSelectModule} from '@angular/material/select';
 import {TextFieldAutofillDirectiveExample} from './text-field-autofill-directive/text-field-autofill-directive-example';
 import {TextFieldAutofillMonitorExample} from './text-field-autofill-monitor/text-field-autofill-monitor-example';
@@ -21,7 +21,7 @@ const EXAMPLES = [
 ];
 
 @NgModule({
-  imports: [CommonModule, TextFieldModule, MatButtonModule, MatInputModule, MatSelectModule],
+  imports: [CommonModule, TextFieldModule, MatButtonModule, MatLegacyInputModule, MatSelectModule],
   declarations: EXAMPLES,
   exports: EXAMPLES,
 })

diff --git a/src/components-examples/material-experimental/mdc-form-field/BUILD.bazel b/src/components-examples/material-experimental/mdc-form-field/BUILD.bazel
@@ -13,8 +13,8 @@ ng_module(
         "//src/cdk/a11y",
         "//src/cdk/coercion",
         "//src/material/form-field",
-        "//src/material/input",
         "//src/material/icon",
+        "//src/material/input",
         "@npm//@angular/common",
         "@npm//@angular/forms",
         "@npm//rxjs",

diff --git a/src/components-examples/material-experimental/mdc-table/BUILD.bazel b/src/components-examples/material-experimental/mdc-table/BUILD.bazel
@@ -23,7 +23,7 @@ ng_module(
         "//src/material/checkbox",
         "//src/material/core",
         "//src/material/icon",
-        "//src/material/input",
+        "//src/material/legacy-input",
         "//src/material/paginator",
         "//src/material/progress-spinner",
         "//src/material/sort",

diff --git a/src/components-examples/material-experimental/mdc-table/index.ts b/src/components-examples/material-experimental/mdc-table/index.ts
@@ -5,7 +5,7 @@ import {MatButtonModule} from '@angular/material/button';
 import {MatButtonToggleModule} from '@angular/material/button-toggle';
 import {MatCheckboxModule} from '@angular/material/checkbox';
 import {MatIconModule} from '@angular/material/icon';
-import {MatInputModule} from '@angular/material/input';
+import {MatLegacyInputModule} from '@angular/material/legacy-input';
 import {MatPaginatorModule} from '@angular/material/paginator';
 import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 import {MatSortModule} from '@angular/material/sort';
@@ -122,7 +122,7 @@ const EXAMPLES = [
     MatButtonToggleModule,
     MatCheckboxModule,
     MatIconModule,
-    MatInputModule,
+    MatLegacyInputModule,
     MatPaginatorModule,
     MatProgressSpinnerModule,
     MatRippleModule,

diff --git a/src/components-examples/material-experimental/popover-edit/BUILD.bazel b/src/components-examples/material-experimental/popover-edit/BUILD.bazel
@@ -14,7 +14,7 @@ ng_module(
         "//src/material/button",
         "//src/material/checkbox",
         "//src/material/icon",
-        "//src/material/input",
+        "//src/material/legacy-input",
         "//src/material/list",
         "//src/material/snack-bar",
         "//src/material/table",

diff --git a/src/components-examples/material-experimental/popover-edit/index.ts b/src/components-examples/material-experimental/popover-edit/index.ts
@@ -5,7 +5,7 @@ import {MatPopoverEditModule} from '@angular/material-experimental/popover-edit'
 import {MatButtonModule} from '@angular/material/button';
 import {MatCheckboxModule} from '@angular/material/checkbox';
 import {MatIconModule} from '@angular/material/icon';
-import {MatInputModule} from '@angular/material/input';
+import {MatLegacyInputModule} from '@angular/material/legacy-input';
 import {MatListModule} from '@angular/material/list';
 import {MatSnackBarModule} from '@angular/material/snack-bar';
 import {MatTableModule} from '@angular/material/table';
@@ -34,7 +34,7 @@ const EXAMPLES = [
     MatButtonModule,
     MatCheckboxModule,
     MatIconModule,
-    MatInputModule,
+    MatLegacyInputModule,
     MatListModule,
     MatPopoverEditModule,
     MatSnackBarModule,

diff --git a/src/components-examples/material/autocomplete/BUILD.bazel b/src/components-examples/material/autocomplete/BUILD.bazel
@@ -18,8 +18,8 @@ ng_module(
         "//src/cdk/testing/testbed",
         "//src/material/autocomplete",
         "//src/material/autocomplete/testing",
-        "//src/material/form-field",
-        "//src/material/input",
+        "//src/material/legacy-form-field",
+        "//src/material/legacy-input",
         "//src/material/slide-toggle",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",

diff --git a/src/components-examples/material/autocomplete/index.ts b/src/components-examples/material/autocomplete/index.ts
@@ -2,8 +2,8 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatAutocompleteModule} from '@angular/material/autocomplete';
-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';
 import {MatSlideToggleModule} from '@angular/material/slide-toggle';
 import {AutocompleteAutoActiveFirstOptionExample} from './autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example';
 import {AutocompleteDisplayExample} from './autocomplete-display/autocomplete-display-example';
@@ -40,8 +40,8 @@ const EXAMPLES = [
   imports: [
     CommonModule,
     MatAutocompleteModule,
-    MatFormFieldModule,
-    MatInputModule,
+    MatLegacyFormFieldModule,
+    MatLegacyInputModule,
     MatSlideToggleModule,
     FormsModule,
     ReactiveFormsModule,

diff --git a/src/components-examples/material/chips/BUILD.bazel b/src/components-examples/material/chips/BUILD.bazel
@@ -20,8 +20,8 @@ ng_module(
         "//src/material/button",
         "//src/material/chips",
         "//src/material/chips/testing",
-        "//src/material/form-field",
         "//src/material/icon",
+        "//src/material/legacy-form-field",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",

diff --git a/src/components-examples/material/chips/index.ts b/src/components-examples/material/chips/index.ts
@@ -4,7 +4,7 @@ import {NgModule} from '@angular/core';
 import {ReactiveFormsModule} from '@angular/forms';
 import {MatAutocompleteModule} from '@angular/material/autocomplete';
 import {MatChipsModule} from '@angular/material/chips';
-import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
 import {MatIconModule} from '@angular/material/icon';
 import {ChipsAutocompleteExample} from './chips-autocomplete/chips-autocomplete-example';
 import {ChipsDragDropExample} from './chips-drag-drop/chips-drag-drop-example';
@@ -46,7 +46,7 @@ const EXAMPLES = [
     MatButtonModule,
     MatChipsModule,
     MatIconModule,
-    MatFormFieldModule,
+    MatLegacyFormFieldModule,
     ReactiveFormsModule,
   ],
   declarations: EXAMPLES,

diff --git a/src/components-examples/material/core/BUILD.bazel b/src/components-examples/material/core/BUILD.bazel
@@ -13,7 +13,7 @@ ng_module(
         "//src/material/button",
         "//src/material/checkbox",
         "//src/material/core",
-        "//src/material/input",
+        "//src/material/legacy-input",
         "@npm//@angular/forms",
     ],
 )

diff --git a/src/components-examples/material/core/index.ts b/src/components-examples/material/core/index.ts
@@ -3,7 +3,7 @@ import {FormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
 import {MatCheckboxModule} from '@angular/material/checkbox';
 import {MatRippleModule} from '@angular/material/core';
-import {MatInputModule} from '@angular/material/input';
+import {MatLegacyInputModule} from '@angular/material/legacy-input';
 import {ElevationOverviewExample} from './elevation-overview/elevation-overview-example';
 import {RippleOverviewExample} from './ripple-overview/ripple-overview-example';
 
@@ -12,7 +12,7 @@ export {ElevationOverviewExample, RippleOverviewExample};
 const EXAMPLES = [ElevationOverviewExample, RippleOverviewExample];
 
 @NgModule({
-  imports: [MatButtonModule, MatCheckboxModule, MatInputModule, MatRippleModule, FormsModule],
+  imports: [MatButtonModule, MatCheckboxModule, MatLegacyInputModule, MatRippleModule, FormsModule],
   declarations: EXAMPLES,
   exports: EXAMPLES,
 })

diff --git a/src/components-examples/material/datepicker/BUILD.bazel b/src/components-examples/material/datepicker/BUILD.bazel
@@ -21,8 +21,8 @@ ng_module(
         "//src/material/datepicker",
         "//src/material/datepicker/testing",
         "//src/material/icon",
-        "//src/material/input",
         "//src/material/legacy-card",
+        "//src/material/legacy-input",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",

diff --git a/src/components-examples/material/datepicker/index.ts b/src/components-examples/material/datepicker/index.ts
@@ -6,7 +6,7 @@ import {MatLegacyCardModule} from '@angular/material/legacy-card';
 import {MatNativeDateModule, MAT_DATE_LOCALE} from '@angular/material/core';
 import {MatDatepickerModule} from '@angular/material/datepicker';
 import {MatIconModule} from '@angular/material/icon';
-import {MatInputModule} from '@angular/material/input';
+import {MatLegacyInputModule} from '@angular/material/legacy-input';
 import {DateRangePickerComparisonExample} from './date-range-picker-comparison/date-range-picker-comparison-example';
 import {DateRangePickerFormsExample} from './date-range-picker-forms/date-range-picker-forms-example';
 import {DateRangePickerOverviewExample} from './date-range-picker-overview/date-range-picker-overview-example';
@@ -98,7 +98,7 @@ const EXAMPLES = [
     MatButtonModule,
     MatLegacyCardModule,
     MatDatepickerModule,
-    MatInputModule,
+    MatLegacyInputModule,
     MatIconModule,
     MatNativeDateModule,
     ReactiveFormsModule,

diff --git a/src/components-examples/material/dialog/BUILD.bazel b/src/components-examples/material/dialog/BUILD.bazel
@@ -18,7 +18,7 @@ ng_module(
         "//src/material/button",
         "//src/material/dialog",
         "//src/material/dialog/testing",
-        "//src/material/input",
+        "//src/material/legacy-input",
         "//src/material/menu",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",

diff --git a/src/components-examples/material/dialog/index.ts b/src/components-examples/material/dialog/index.ts
@@ -3,7 +3,7 @@ import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
 import {MatDialogModule} from '@angular/material/dialog';
-import {MatInputModule} from '@angular/material/input';
+import {MatLegacyInputModule} from '@angular/material/legacy-input';
 import {MatMenuModule} from '@angular/material/menu';
 import {
   DialogContentExample,
@@ -65,7 +65,7 @@ const EXAMPLES = [
     CommonModule,
     MatButtonModule,
     MatDialogModule,
-    MatInputModule,
+    MatLegacyInputModule,
     MatMenuModule,
     FormsModule,
   ],

diff --git a/src/components-examples/material/expansion/BUILD.bazel b/src/components-examples/material/expansion/BUILD.bazel
@@ -20,7 +20,7 @@ ng_module(
         "//src/material/expansion",
         "//src/material/expansion/testing",
         "//src/material/icon",
-        "//src/material/input",
+        "//src/material/legacy-input",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",
         "@npm//@types/jasmine",

diff --git a/src/components-examples/material/expansion/index.ts b/src/components-examples/material/expansion/index.ts
@@ -4,7 +4,7 @@ import {MatDatepickerModule} from '@angular/material/datepicker';
 import {MatNativeDateModule} from '@angular/material/core';
 import {MatExpansionModule} from '@angular/material/expansion';
 import {MatIconModule} from '@angular/material/icon';
-import {MatInputModule} from '@angular/material/input';
+import {MatLegacyInputModule} from '@angular/material/legacy-input';
 import {ExpansionExpandCollapseAllExample} from './expansion-expand-collapse-all/expansion-expand-collapse-all-example';
 import {ExpansionOverviewExample} from './expansion-overview/expansion-overview-example';
 import {ExpansionStepsExample} from './expansion-steps/expansion-steps-example';
@@ -31,7 +31,7 @@ const EXAMPLES = [
     MatNativeDateModule,
     MatExpansionModule,
     MatIconModule,
-    MatInputModule,
+    MatLegacyInputModule,
   ],
   declarations: EXAMPLES,
   exports: EXAMPLES,

diff --git a/src/components-examples/material/form-field/BUILD.bazel b/src/components-examples/material/form-field/BUILD.bazel
@@ -17,11 +17,11 @@ ng_module(
         "//src/cdk/testing/testbed",
         "//src/material/button",
         "//src/material/checkbox",
-        "//src/material/form-field",
-        "//src/material/form-field/testing",
         "//src/material/icon",
-        "//src/material/input",
-        "//src/material/input/testing",
+        "//src/material/legacy-form-field",
+        "//src/material/legacy-form-field/testing",
+        "//src/material/legacy-input",
+        "//src/material/legacy-input/testing",
         "//src/material/radio",
         "//src/material/select",
         "@npm//@angular/forms",
@@ -47,10 +47,10 @@ ng_test_library(
         ":form-field",
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
-        "//src/material/form-field",
-        "//src/material/form-field/testing",
-        "//src/material/input",
-        "//src/material/input/testing",
+        "//src/material/legacy-form-field",
+        "//src/material/legacy-form-field/testing",
+        "//src/material/legacy-input",
+        "//src/material/legacy-input/testing",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",

diff --git a/...amples/material/form-field/form-field-custom-control/form-field-custom-control-example.ts b/...amples/material/form-field/form-field-custom-control/form-field-custom-control-example.ts
@@ -19,7 +19,11 @@ import {
   NgControl,
   Validators,
 } from '@angular/forms';
-import {MAT_FORM_FIELD, MatFormField, MatFormFieldControl} from '@angular/material/form-field';
+import {
+  MAT_FORM_FIELD,
+  MatLegacyFormField,
+  MatLegacyFormFieldControl,
+} from '@angular/material/legacy-form-field';
 import {Subject} from 'rxjs';
 
 /** @title Form field with custom telephone number input control. */
@@ -43,13 +47,15 @@ export class MyTel {
   selector: 'example-tel-input',
   templateUrl: 'example-tel-input-example.html',
   styleUrls: ['example-tel-input-example.css'],
-  providers: [{provide: MatFormFieldControl, useExisting: MyTelInput}],
+  providers: [{provide: MatLegacyFormFieldControl, useExisting: MyTelInput}],
   host: {
     '[class.example-floating]': 'shouldLabelFloat',
     '[id]': 'id',
   },
 })
-export class MyTelInput implements ControlValueAccessor, MatFormFieldControl<MyTel>, OnDestroy {
+export class MyTelInput
+  implements ControlValueAccessor, MatLegacyFormFieldControl<MyTel>, OnDestroy
+{
   static nextId = 0;
   @ViewChild('area') areaInput: HTMLInputElement;
   @ViewChild('exchange') exchangeInput: HTMLInputElement;
@@ -137,7 +143,7 @@ export class MyTelInput implements ControlValueAccessor, MatFormFieldControl<MyT
     private _formBuilder: FormBuilder,
     private _focusMonitor: FocusMonitor,
     private _elementRef: ElementRef<HTMLElement>,
-    @Optional() @Inject(MAT_FORM_FIELD) public _formField: MatFormField,
+    @Optional() @Inject(MAT_FORM_FIELD) public _formField: MatLegacyFormField,
     @Optional() @Self() public ngControl: NgControl,
   ) {
     if (this.ngControl != null) {