build: switch autocomplete demo use MDC

Switches the demo for the autocomplete to use the MDC implementation.

Author: crisbeto

.github/CODEOWNERS

@@ -198,7 +198,7 @@
 /src/dev-app/legacy-tooltip/**                              @crisbeto
 /src/dev-app/list/**                                        @andrewseguin @crisbeto @devversion
 /src/dev-app/live-announcer/**                              @jelbourn
-/src/dev-app/mdc-autocomplete/**                            @crisbeto
+/src/dev-app/legacy-autocomplete/**                         @crisbeto
 /src/dev-app/mdc-button/**                                  @andrewseguin
 /src/dev-app/legacy-button/**                               @andrewseguin
 /src/dev-app/mdc-chips/**                                   @mmalerba

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

@@ -46,6 +46,7 @@ ng_test_library(
         "//src/cdk/testing/testbed",
         "//src/material/autocomplete",
         "//src/material/autocomplete/testing",
+        "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",
     ],
 )

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

@@ -4,14 +4,15 @@ import {MatAutocompleteHarness} from '@angular/material/autocomplete/testing';
 import {HarnessLoader} from '@angular/cdk/testing';
 import {MatAutocompleteModule} from '@angular/material/autocomplete';
 import {AutocompleteHarnessExample} from './autocomplete-harness-example';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 
 describe('AutocompleteHarnessExample', () => {
   let fixture: ComponentFixture<AutocompleteHarnessExample>;
   let loader: HarnessLoader;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MatAutocompleteModule],
+      imports: [MatAutocompleteModule, NoopAnimationsModule],
       declarations: [AutocompleteHarnessExample],
     }).compileComponents();
     fixture = TestBed.createComponent(AutocompleteHarnessExample);

src/dev-app/BUILD.bazel

@@ -47,6 +47,7 @@ ng_module(
         "//src/dev-app/input",
         "//src/dev-app/input-modality",
         "//src/dev-app/layout",
+        "//src/dev-app/legacy-autocomplete",
         "//src/dev-app/legacy-button",
         "//src/dev-app/legacy-card",
         "//src/dev-app/legacy-checkbox",
@@ -66,7 +67,6 @@ ng_module(
         "//src/dev-app/legacy-tooltip",
         "//src/dev-app/list",
         "//src/dev-app/live-announcer",
-        "//src/dev-app/mdc-autocomplete",
         "//src/dev-app/mdc-chips",
         "//src/dev-app/mdc-slide-toggle",
         "//src/dev-app/menu",

src/dev-app/autocomplete/BUILD.bazel

@@ -10,11 +10,11 @@ ng_module(
         ":autocomplete_demo_scss",
     ],
     deps = [
-        "//src/material/legacy-autocomplete",
-        "//src/material/legacy-button",
-        "//src/material/legacy-card",
-        "//src/material/legacy-form-field",
-        "//src/material/legacy-input",
+        "//src/material/autocomplete",
+        "//src/material/button",
+        "//src/material/card",
+        "//src/material/form-field",
+        "//src/material/input",
         "@npm//@angular/forms",
     ],
 )

src/dev-app/autocomplete/autocomplete-demo.html

@@ -6,7 +6,7 @@
     <div>Reactive value: {{ stateCtrl.value | json }}</div>
     <div>Reactive dirty: {{ stateCtrl.dirty }}</div>
 
-    <mat-form-field floatLabel="never">
+    <mat-form-field>
       <mat-label>State</mat-label>
       <input matInput [matAutocomplete]="reactiveAuto" [formControl]="stateCtrl">
       <mat-autocomplete #reactiveAuto="matAutocomplete" [displayWith]="displayFn">

src/dev-app/autocomplete/autocomplete-demo.scss

@@ -2,12 +2,13 @@
   display: flex;
   flex-flow: row wrap;
 
-  .mat-card {
+  .mat-mdc-card {
     width: 400px;
     margin: 24px;
+    padding: 16px;
   }
 
-  .mat-form-field {
+  .mat-mdc-form-field {
     margin-top: 16px;
     min-width: 200px;
     max-width: 100%;

src/dev-app/autocomplete/autocomplete-demo.ts

@@ -7,13 +7,12 @@
  */
 
 import {Component, ViewChild} from '@angular/core';
+import {FormControl, NgModel, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {CommonModule} from '@angular/common';
-import {FormControl, FormsModule, NgModel, ReactiveFormsModule} from '@angular/forms';
-import {MatLegacyAutocompleteModule} from '@angular/material/legacy-autocomplete';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
-import {MatLegacyCardModule} from '@angular/material/legacy-card';
-import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
-import {MatLegacyInputModule} from '@angular/material/legacy-input';
+import {MatAutocompleteModule} from '@angular/material/autocomplete';
+import {MatButtonModule} from '@angular/material/button';
+import {MatCardModule} from '@angular/material/card';
+import {MatInputModule} from '@angular/material/input';
 import {Observable} from 'rxjs';
 import {map, startWith} from 'rxjs/operators';
 
@@ -35,11 +34,10 @@ export interface StateGroup {
   imports: [
     CommonModule,
     FormsModule,
-    MatLegacyAutocompleteModule,
-    MatLegacyButtonModule,
-    MatLegacyCardModule,
-    MatLegacyFormFieldModule,
-    MatLegacyInputModule,
+    MatAutocompleteModule,
+    MatButtonModule,
+    MatCardModule,
+    MatInputModule,
     ReactiveFormsModule,
   ],
 })

src/dev-app/dev-app/dev-app-layout.ts

@@ -103,11 +103,11 @@ export class DevAppLayout {
     {name: 'Typography', route: '/typography'},
     {name: 'Virtual Scrolling', route: '/virtual-scroll'},
     {name: 'YouTube Player', route: '/youtube-player'},
-    {name: 'MDC Autocomplete', route: '/mdc-autocomplete'},
     {name: 'MDC Chips', route: '/mdc-chips'},
     {name: 'MDC Progress Bar', route: '/mdc-progress-bar'},
     {name: 'MDC Slide Toggle', route: '/mdc-slide-toggle'},
     {name: 'MDC Slider', route: '/mdc-slider'},
+    {name: 'Legacy Autocomplete', route: '/legacy-autocomplete'},
     {name: 'Legacy Tabs', route: '/legacy-tabs'},
     {name: 'Legacy Button', route: '/legacy-button'},
     {name: 'Legacy Card', route: '/legacy-card'},

src/dev-app/legacy-autocomplete/BUILD.bazel

@@ -0,0 +1,25 @@
+load("//tools:defaults.bzl", "ng_module", "sass_binary")
+
+package(default_visibility = ["//visibility:public"])
+
+ng_module(
+    name = "legacy-autocomplete",
+    srcs = glob(["**/*.ts"]),
+    assets = [
+        "legacy-autocomplete-demo.html",
+        ":legacy_autocomplete_demo_scss",
+    ],
+    deps = [
+        "//src/material/legacy-autocomplete",
+        "//src/material/legacy-button",
+        "//src/material/legacy-card",
+        "//src/material/legacy-form-field",
+        "//src/material/legacy-input",
+        "@npm//@angular/forms",
+    ],
+)
+
+sass_binary(
+    name = "legacy_autocomplete_demo_scss",
+    src = "legacy-autocomplete-demo.scss",
+)

src/dev-app/mdc-autocomplete/mdc-autocomplete-demo.html renamed to src/dev-app/legacy-autocomplete/legacy-autocomplete-demo.html

@@ -6,7 +6,7 @@
     <div>Reactive value: {{ stateCtrl.value | json }}</div>
     <div>Reactive dirty: {{ stateCtrl.dirty }}</div>
 
-    <mat-form-field>
+    <mat-form-field floatLabel="never">
       <mat-label>State</mat-label>
       <input matInput [matAutocomplete]="reactiveAuto" [formControl]="stateCtrl">
       <mat-autocomplete #reactiveAuto="matAutocomplete" [displayWith]="displayFn">

src/dev-app/mdc-autocomplete/mdc-autocomplete-demo.scss renamed to src/dev-app/legacy-autocomplete/legacy-autocomplete-demo.scss

@@ -2,13 +2,12 @@
   display: flex;
   flex-flow: row wrap;
 
-  .mat-mdc-card {
+  .mat-card {
     width: 400px;
     margin: 24px;
-    padding: 16px;
   }
 
-  .mat-mdc-form-field {
+  .mat-form-field {
     margin-top: 16px;
     min-width: 200px;
     max-width: 100%;

src/dev-app/mdc-autocomplete/mdc-autocomplete-demo.ts renamed to src/dev-app/legacy-autocomplete/legacy-autocomplete-demo.ts

@@ -7,12 +7,13 @@
  */
 
 import {Component, ViewChild} from '@angular/core';
-import {FormControl, NgModel, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {CommonModule} from '@angular/common';
-import {MatAutocompleteModule} from '@angular/material/autocomplete';
-import {MatButtonModule} from '@angular/material/button';
-import {MatCardModule} from '@angular/material/card';
-import {MatInputModule} from '@angular/material/input';
+import {FormControl, FormsModule, NgModel, ReactiveFormsModule} from '@angular/forms';
+import {MatLegacyAutocompleteModule} from '@angular/material/legacy-autocomplete';
+import {MatLegacyButtonModule} from '@angular/material/legacy-button';
+import {MatLegacyCardModule} from '@angular/material/legacy-card';
+import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
+import {MatLegacyInputModule} from '@angular/material/legacy-input';
 import {Observable} from 'rxjs';
 import {map, startWith} from 'rxjs/operators';
 
@@ -27,21 +28,22 @@ export interface StateGroup {
 }
 
 @Component({
-  selector: 'mdc-autocomplete-demo',
-  templateUrl: 'mdc-autocomplete-demo.html',
-  styleUrls: ['mdc-autocomplete-demo.css'],
+  selector: 'legacy-autocomplete-demo',
+  templateUrl: 'legacy-autocomplete-demo.html',
+  styleUrls: ['legacy-autocomplete-demo.css'],
   standalone: true,
   imports: [
     CommonModule,
     FormsModule,
-    MatAutocompleteModule,
-    MatButtonModule,
-    MatCardModule,
-    MatInputModule,
+    MatLegacyAutocompleteModule,
+    MatLegacyButtonModule,
+    MatLegacyCardModule,
+    MatLegacyFormFieldModule,
+    MatLegacyInputModule,
     ReactiveFormsModule,
   ],
 })
-export class MdcAutocompleteDemo {
+export class LegacyAutocompleteDemo {
   stateCtrl = new FormControl({code: 'CA', name: 'California'});
   currentState = '';
   currentGroupedState = '';

src/dev-app/mdc-autocomplete/BUILD.bazel

@@ -142,9 +142,9 @@ export const DEV_APP_ROUTES: Routes = [
     loadComponent: () => import('./menubar/mat-menubar-demo').then(m => m.MatMenuBarDemo),
   },
   {
-    path: 'mdc-autocomplete',
+    path: 'legacy-autocomplete',
     loadComponent: () =>
-      import('./mdc-autocomplete/mdc-autocomplete-demo').then(m => m.MdcAutocompleteDemo),
+      import('./legacy-autocomplete/legacy-autocomplete-demo').then(m => m.LegacyAutocompleteDemo),
   },
   {
     path: 'legacy-button',