docs(material/autocomplete): switch docs to use MDC

Changes the docs for the autocomplete to use MDC implementation.

Author: crisbeto

src/components-examples/material/autocomplete/BUILD.bazel

@@ -16,11 +16,11 @@ ng_module(
         "//src/cdk/overlay",
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
-        "//src/material/legacy-autocomplete",
-        "//src/material/legacy-autocomplete/testing",
-        "//src/material/legacy-form-field",
-        "//src/material/legacy-input",
-        "//src/material/legacy-slide-toggle",
+        "//src/material/autocomplete",
+        "//src/material/autocomplete/testing",
+        "//src/material/form-field",
+        "//src/material/input",
+        "//src/material/slide-toggle",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",
@@ -44,8 +44,8 @@ ng_test_library(
         ":autocomplete",
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
-        "//src/material/legacy-autocomplete",
-        "//src/material/legacy-autocomplete/testing",
+        "//src/material/autocomplete",
+        "//src/material/autocomplete/testing",
         "@npm//@angular/platform-browser-dynamic",
     ],
 )

src/components-examples/material/autocomplete/autocomplete-harness/autocomplete-harness-example.spec.ts

@@ -1,8 +1,8 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
-import {MatLegacyAutocompleteHarness} from '@angular/material/legacy-autocomplete/testing';
+import {MatAutocompleteHarness} from '@angular/material/autocomplete/testing';
 import {HarnessLoader} from '@angular/cdk/testing';
-import {MatLegacyAutocompleteModule} from '@angular/material/legacy-autocomplete';
+import {MatAutocompleteModule} from '@angular/material/autocomplete';
 import {AutocompleteHarnessExample} from './autocomplete-harness-example';
 
 describe('AutocompleteHarnessExample', () => {
@@ -11,7 +11,7 @@ describe('AutocompleteHarnessExample', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MatLegacyAutocompleteModule],
+      imports: [MatAutocompleteModule],
       declarations: [AutocompleteHarnessExample],
     }).compileComponents();
     fixture = TestBed.createComponent(AutocompleteHarnessExample);
@@ -20,24 +20,20 @@ describe('AutocompleteHarnessExample', () => {
   });
 
   it('should load all autocomplete harnesses', async () => {
-    const autocompletes = await loader.getAllHarnesses(MatLegacyAutocompleteHarness);
+    const autocompletes = await loader.getAllHarnesses(MatAutocompleteHarness);
     expect(autocompletes.length).toBe(2);
   });
 
   it('should get disabled state', async () => {
-    const enabled = await loader.getHarness(
-      MatLegacyAutocompleteHarness.with({selector: '#plain'}),
-    );
-    const disabled = await loader.getHarness(
-      MatLegacyAutocompleteHarness.with({selector: '#disabled'}),
-    );
+    const enabled = await loader.getHarness(MatAutocompleteHarness.with({selector: '#plain'}));
+    const disabled = await loader.getHarness(MatAutocompleteHarness.with({selector: '#disabled'}));
 
     expect(await enabled.isDisabled()).toBe(false);
     expect(await disabled.isDisabled()).toBe(true);
   });
 
   it('should focus and blur an input', async () => {
-    const input = await loader.getHarness(MatLegacyAutocompleteHarness.with({selector: '#plain'}));
+    const input = await loader.getHarness(MatAutocompleteHarness.with({selector: '#plain'}));
     expect(await input.isFocused()).toBe(false);
     await input.focus();
     expect(await input.isFocused()).toBe(true);
@@ -46,13 +42,13 @@ describe('AutocompleteHarnessExample', () => {
   });
 
   it('should be able to type in an input', async () => {
-    const input = await loader.getHarness(MatLegacyAutocompleteHarness.with({selector: '#plain'}));
+    const input = await loader.getHarness(MatAutocompleteHarness.with({selector: '#plain'}));
     await input.enterText('Hello there');
     expect(await input.getValue()).toBe('Hello there');
   });
 
   it('should be able to get filtered options', async () => {
-    const input = await loader.getHarness(MatLegacyAutocompleteHarness.with({selector: '#plain'}));
+    const input = await loader.getHarness(MatAutocompleteHarness.with({selector: '#plain'}));
     await input.focus();
     const options = await input.getOptions({text: /New/});
 

src/components-examples/material/autocomplete/autocomplete-plain-input/autocomplete-plain-input-example.css

@@ -7,3 +7,8 @@
 .example-full-width {
   width: 100%;
 }
+
+.example-input {
+  max-width: 100%;
+  width: 300px;
+}

src/components-examples/material/autocomplete/autocomplete-plain-input/autocomplete-plain-input-example.html

@@ -2,7 +2,8 @@
   <input type="text"
          placeholder="Search for a street"
          [formControl]="control"
-         [matAutocomplete]="auto">
+         [matAutocomplete]="auto"
+         class="example-input">
   <mat-autocomplete #auto="matAutocomplete">
     <mat-option *ngFor="let street of filteredStreets | async" [value]="street">
       {{street}}

src/components-examples/material/autocomplete/index.ts

@@ -1,10 +1,10 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {MatLegacyAutocompleteModule} from '@angular/material/legacy-autocomplete';
-import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
-import {MatLegacyInputModule} from '@angular/material/legacy-input';
-import {MatLegacySlideToggleModule} from '@angular/material/legacy-slide-toggle';
+import {MatAutocompleteModule} from '@angular/material/autocomplete';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatInputModule} from '@angular/material/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';
 import {AutocompleteFilterExample} from './autocomplete-filter/autocomplete-filter-example';
@@ -39,10 +39,10 @@ const EXAMPLES = [
 @NgModule({
   imports: [
     CommonModule,
-    MatLegacyAutocompleteModule,
-    MatLegacyFormFieldModule,
-    MatLegacyInputModule,
-    MatLegacySlideToggleModule,
+    MatAutocompleteModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatSlideToggleModule,
     FormsModule,
     ReactiveFormsModule,
   ],