docs(material/input): switch to MDC

Finishes switching the input docs and demo app to MDC. The docs examples themselves were switched already, but these changes finish it up by:
* Fixing some imports that were still pointing to legacy components.
* Removing the explicit `appearance` since it's not longer necessary.
* Deleting the MDC-specific custom form control example since it wasn't being used anywhere and the one for the legacy component still applies.
* Using `matNativeControl` instead of `matInput`.

Author: crisbeto

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

@@ -15,14 +15,14 @@ ng_module(
     deps = [
         "//src/cdk/testing",
         "//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-button",
-        "//src/material/legacy-checkbox",
-        "//src/material/legacy-radio",
+        "//src/material/radio",
         "//src/material/select",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",

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

@@ -1,12 +1,12 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {ReactiveFormsModule} from '@angular/forms';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
-import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
+import {MatButtonModule} from '@angular/material/button';
+import {MatCheckboxModule} from '@angular/material/checkbox';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatIconModule} from '@angular/material/icon';
 import {MatInputModule} from '@angular/material/input';
-import {MatLegacyRadioModule} from '@angular/material/legacy-radio';
+import {MatRadioModule} from '@angular/material/radio';
 import {MatSelectModule} from '@angular/material/select';
 import {FormFieldAppearanceExample} from './form-field-appearance/form-field-appearance-example';
 import {
@@ -49,12 +49,12 @@ const EXAMPLES = [
 @NgModule({
   imports: [
     CommonModule,
-    MatLegacyButtonModule,
-    MatLegacyCheckboxModule,
+    MatButtonModule,
+    MatCheckboxModule,
     MatFormFieldModule,
     MatIconModule,
     MatInputModule,
-    MatLegacyRadioModule,
+    MatRadioModule,
     MatSelectModule,
     ReactiveFormsModule,
   ],

src/components-examples/material-experimental/mdc-form-field/mdc-form-field-custom-control/example-tel-input-example.css

@@ -15,10 +15,10 @@ ng_module(
     deps = [
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
+        "//src/material/button",
         "//src/material/icon",
-        "//src/material/legacy-button",
-        "//src/material/legacy-input",
-        "//src/material/legacy-input/testing",
+        "//src/material/input",
+        "//src/material/input/testing",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",
@@ -42,8 +42,8 @@ ng_test_library(
         ":input",
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
-        "//src/material/legacy-input",
-        "//src/material/legacy-input/testing",
+        "//src/material/input",
+        "//src/material/input/testing",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",

src/components-examples/material-experimental/mdc-form-field/mdc-form-field-custom-control/example-tel-input-example.html

@@ -1,9 +1,9 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
+import {MatButtonModule} from '@angular/material/button';
 import {MatIconModule} from '@angular/material/icon';
-import {MatLegacyInputModule} from '@angular/material/legacy-input';
+import {MatInputModule} from '@angular/material/input';
 import {InputClearableExample} from './input-clearable/input-clearable-example';
 import {InputErrorStateMatcherExample} from './input-error-state-matcher/input-error-state-matcher-example';
 import {InputErrorsExample} from './input-errors/input-errors-example';
@@ -38,9 +38,9 @@ const EXAMPLES = [
 @NgModule({
   imports: [
     CommonModule,
-    MatLegacyButtonModule,
+    MatButtonModule,
     MatIconModule,
-    MatLegacyInputModule,
+    MatInputModule,
     FormsModule,
     ReactiveFormsModule,
   ],

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

@@ -1,4 +1,4 @@
-<mat-form-field class="example-form-field" appearance="fill">
+<mat-form-field class="example-form-field">
   <mat-label>Clearable input</mat-label>
   <input matInput type="text" [(ngModel)]="value">
   <button *ngIf="value" matSuffix mat-icon-button aria-label="Clear" (click)="value=''">

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

@@ -1,5 +1,5 @@
 <form class="example-form">
-  <mat-form-field class="example-full-width" appearance="fill">
+  <mat-form-field class="example-full-width">
     <mat-label>Email</mat-label>
     <input type="email" matInput [formControl]="emailFormControl" [errorStateMatcher]="matcher"
            placeholder="Ex. [email protected]">

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

@@ -1,5 +1,5 @@
 <form class="example-form">
-  <mat-form-field class="example-full-width" appearance="fill">
+  <mat-form-field class="example-full-width">
     <mat-label>Email</mat-label>
     <input type="email" matInput [formControl]="emailFormControl" placeholder="Ex. [email protected]">
     <mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">