feat(material/autocomplete): switch implementation to use MDC (#25386)

Switches `mat-autocomplete` to use MDC by default.

BREAKING CHANGE:

* DOM and CSS classes for `mat-autocomplete` have changes.
* TypeScript API is largely the same but may have minor differences.

.github/CODEOWNERS

@@ -1,6 +1,6 @@
 # Angular Material components
 /src/material/*                                    @andrewseguin
-/src/material/autocomplete/**                      @crisbeto
+/src/material/legacy-autocomplete/**               @crisbeto
 /src/material/badge/**                             @jelbourn
 /src/material/bottom-sheet/**                      @jelbourn @crisbeto
 /src/material/button-toggle/**                     @andrewseguin
@@ -110,7 +110,7 @@
 # Material experimental package
 /src/material-experimental/*                           @andrewseguin
 /src/material-experimental/column-resize/**            @andrewseguin
-/src/material-experimental/mdc-autocomplete/**         @crisbeto
+/src/material/autocomplete/**                          @crisbeto
 /src/material-experimental/mdc-button/**               @andrewseguin
 /src/material/card/**                                  @mmalerba
 /src/material-experimental/mdc-checkbox/**             @mmalerba

.ng-dev/commit-message.mts

@@ -40,7 +40,6 @@ export const commitMessage: CommitMessageConfig = {
     'cdk/tree',
     'google-maps',
     'material-experimental/column-resize',
-    'material-experimental/mdc-autocomplete',
     'material-experimental/mdc-button',
     'material/card',
     'material-experimental/mdc-checkbox',
@@ -68,6 +67,7 @@ export const commitMessage: CommitMessageConfig = {
     'material-date-fns-adapter',
     'material-luxon-adapter',
     'material/autocomplete',
+    'material/legacy-autocomplete',
     'material/badge',
     'material/bottom-sheet',
     'material/button',

integration/size-test/material/autocomplete/BUILD.bazel

@@ -3,5 +3,5 @@ load("//integration/size-test:index.bzl", "size_test")
 size_test(
     name = "without-optgroup",
     file = "without-optgroup.ts",
-    deps = ["//src/material/autocomplete"],
+    deps = ["//src/material/legacy-autocomplete"],
 )

integration/size-test/material/autocomplete/without-optgroup.ts

@@ -1,5 +1,5 @@
 import {Component, NgModule} from '@angular/core';
-import {MatAutocompleteModule} from '@angular/material/autocomplete';
+import {MatLegacyAutocompleteModule} from '@angular/material/legacy-autocomplete';
 
 /**
  * Basic component using `MatAutocomplete` and `MatOption`. Other supported parts of the
@@ -16,7 +16,7 @@ import {MatAutocompleteModule} from '@angular/material/autocomplete';
 export class TestComponent {}
 
 @NgModule({
-  imports: [MatAutocompleteModule],
+  imports: [MatLegacyAutocompleteModule],
   declarations: [TestComponent],
   bootstrap: [TestComponent],
 })

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

@@ -16,8 +16,8 @@ ng_module(
         "//src/cdk/overlay",
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
-        "//src/material/autocomplete",
-        "//src/material/autocomplete/testing",
+        "//src/material/legacy-autocomplete",
+        "//src/material/legacy-autocomplete/testing",
         "//src/material/legacy-form-field",
         "//src/material/legacy-input",
         "//src/material/slide-toggle",
@@ -44,8 +44,8 @@ ng_test_library(
         ":autocomplete",
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
-        "//src/material/autocomplete",
-        "//src/material/autocomplete/testing",
+        "//src/material/legacy-autocomplete",
+        "//src/material/legacy-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 {MatAutocompleteHarness} from '@angular/material/autocomplete/testing';
+import {MatLegacyAutocompleteHarness} from '@angular/material/legacy-autocomplete/testing';
 import {HarnessLoader} from '@angular/cdk/testing';
-import {MatAutocompleteModule} from '@angular/material/autocomplete';
+import {MatLegacyAutocompleteModule} from '@angular/material/legacy-autocomplete';
 import {AutocompleteHarnessExample} from './autocomplete-harness-example';
 
 describe('AutocompleteHarnessExample', () => {
@@ -11,7 +11,7 @@ describe('AutocompleteHarnessExample', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MatAutocompleteModule],
+      imports: [MatLegacyAutocompleteModule],
       declarations: [AutocompleteHarnessExample],
     }).compileComponents();
     fixture = TestBed.createComponent(AutocompleteHarnessExample);
@@ -20,20 +20,24 @@ describe('AutocompleteHarnessExample', () => {
   });
 
   it('should load all autocomplete harnesses', async () => {
-    const autocompletes = await loader.getAllHarnesses(MatAutocompleteHarness);
+    const autocompletes = await loader.getAllHarnesses(MatLegacyAutocompleteHarness);
     expect(autocompletes.length).toBe(2);
   });
 
   it('should get disabled state', async () => {
-    const enabled = await loader.getHarness(MatAutocompleteHarness.with({selector: '#plain'}));
-    const disabled = await loader.getHarness(MatAutocompleteHarness.with({selector: '#disabled'}));
+    const enabled = await loader.getHarness(
+      MatLegacyAutocompleteHarness.with({selector: '#plain'}),
+    );
+    const disabled = await loader.getHarness(
+      MatLegacyAutocompleteHarness.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(MatAutocompleteHarness.with({selector: '#plain'}));
+    const input = await loader.getHarness(MatLegacyAutocompleteHarness.with({selector: '#plain'}));
     expect(await input.isFocused()).toBe(false);
     await input.focus();
     expect(await input.isFocused()).toBe(true);
@@ -42,13 +46,13 @@ describe('AutocompleteHarnessExample', () => {
   });
 
   it('should be able to type in an input', async () => {
-    const input = await loader.getHarness(MatAutocompleteHarness.with({selector: '#plain'}));
+    const input = await loader.getHarness(MatLegacyAutocompleteHarness.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(MatAutocompleteHarness.with({selector: '#plain'}));
+    const input = await loader.getHarness(MatLegacyAutocompleteHarness.with({selector: '#plain'}));
     await input.focus();
     const options = await input.getOptions({text: /New/});
 

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

@@ -1,7 +1,7 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {MatAutocompleteModule} from '@angular/material/autocomplete';
+import {MatLegacyAutocompleteModule} from '@angular/material/legacy-autocomplete';
 import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
 import {MatLegacyInputModule} from '@angular/material/legacy-input';
 import {MatSlideToggleModule} from '@angular/material/slide-toggle';
@@ -39,7 +39,7 @@ const EXAMPLES = [
 @NgModule({
   imports: [
     CommonModule,
-    MatAutocompleteModule,
+    MatLegacyAutocompleteModule,
     MatLegacyFormFieldModule,
     MatLegacyInputModule,
     MatSlideToggleModule,

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

@@ -16,11 +16,11 @@ ng_module(
         "//src/cdk/drag-drop",
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
-        "//src/material/autocomplete",
         "//src/material/button",
         "//src/material/chips",
         "//src/material/chips/testing",
         "//src/material/icon",
+        "//src/material/legacy-autocomplete",
         "//src/material/legacy-form-field",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",

src/components-examples/material/chips/chips-autocomplete/chips-autocomplete-example.ts

@@ -1,7 +1,7 @@
 import {COMMA, ENTER} from '@angular/cdk/keycodes';
 import {Component, ElementRef, ViewChild} from '@angular/core';
 import {FormControl} from '@angular/forms';
-import {MatAutocompleteSelectedEvent} from '@angular/material/autocomplete';
+import {MatAutocompleteSelectedEvent} from '@angular/material/legacy-autocomplete';
 import {MatChipInputEvent} from '@angular/material/chips';
 import {Observable} from 'rxjs';
 import {map, startWith} from 'rxjs/operators';

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

@@ -2,7 +2,7 @@ import {DragDropModule} from '@angular/cdk/drag-drop';
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {ReactiveFormsModule} from '@angular/forms';
-import {MatAutocompleteModule} from '@angular/material/autocomplete';
+import {MatLegacyAutocompleteModule} from '@angular/material/legacy-autocomplete';
 import {MatChipsModule} from '@angular/material/chips';
 import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
 import {MatIconModule} from '@angular/material/icon';
@@ -42,7 +42,7 @@ const EXAMPLES = [
   imports: [
     CommonModule,
     DragDropModule,
-    MatAutocompleteModule,
+    MatLegacyAutocompleteModule,
     MatButtonModule,
     MatChipsModule,
     MatIconModule,

src/dev-app/autocomplete/BUILD.bazel

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

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

@@ -9,7 +9,7 @@
 import {Component, ViewChild} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {FormControl, FormsModule, NgModel, ReactiveFormsModule} from '@angular/forms';
-import {MatAutocompleteModule} from '@angular/material/autocomplete';
+import {MatLegacyAutocompleteModule} from '@angular/material/legacy-autocomplete';
 import {MatButtonModule} from '@angular/material/button';
 import {MatLegacyCardModule} from '@angular/material/legacy-card';
 import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
@@ -35,7 +35,7 @@ export interface StateGroup {
   imports: [
     CommonModule,
     FormsModule,
-    MatAutocompleteModule,
+    MatLegacyAutocompleteModule,
     MatButtonModule,
     MatLegacyCardModule,
     MatLegacyFormFieldModule,

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

@@ -10,8 +10,8 @@ ng_module(
         ":mdc_autocomplete_demo_scss",
     ],
     deps = [
-        "//src/material-experimental/mdc-autocomplete",
         "//src/material-experimental/mdc-button",
+        "//src/material/autocomplete",
         "//src/material/card",
         "//src/material/form-field",
         "//src/material/input",

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

@@ -9,7 +9,7 @@
 import {Component, ViewChild} from '@angular/core';
 import {FormControl, NgModel, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {CommonModule} from '@angular/common';
-import {MatAutocompleteModule} from '@angular/material-experimental/mdc-autocomplete';
+import {MatAutocompleteModule} from '@angular/material/autocomplete';
 import {MatButtonModule} from '@angular/material-experimental/mdc-button';
 import {MatCardModule} from '@angular/material/card';
 import {MatInputModule} from '@angular/material/input';

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

@@ -11,10 +11,10 @@ ng_module(
     ],
     deps = [
         "//src/components-examples/material-experimental/mdc-form-field",
-        "//src/material-experimental/mdc-autocomplete",
         "//src/material-experimental/mdc-button",
         "//src/material-experimental/mdc-checkbox",
         "//src/material-experimental/mdc-tabs",
+        "//src/material/autocomplete",
         "//src/material/button-toggle",
         "//src/material/card",
         "//src/material/form-field",

src/dev-app/mdc-input/mdc-input-demo.ts

@@ -17,7 +17,7 @@ import {ErrorStateMatcher, ThemePalette} from '@angular/material/core';
 import {CommonModule} from '@angular/common';
 import {MdcFormFieldExamplesModule} from '@angular/components-examples/material-experimental/mdc-form-field';
 import {MatInputModule} from '@angular/material/input';
-import {MatAutocompleteModule} from '@angular/material-experimental/mdc-autocomplete';
+import {MatAutocompleteModule} from '@angular/material/autocomplete';
 import {MatButtonModule} from '@angular/material-experimental/mdc-button';
 import {MatButtonToggleModule} from '@angular/material/button-toggle';
 import {MatCardModule} from '@angular/material/card';

src/material-experimental/_index.scss

@@ -17,8 +17,6 @@
 // MDC-related themes
 @forward './mdc-core/core-theme' as mdc-core-* show mdc-core-theme, mdc-core-color,
   mdc-core-density, mdc-core-typography;
-@forward './mdc-autocomplete/autocomplete-theme' as mdc-autocomplete-* show mdc-autocomplete-color,
-  mdc-autocomplete-typography, mdc-autocomplete-density, mdc-autocomplete-theme;
 @forward './mdc-button/button-theme' as mdc-button-* show mdc-button-color, mdc-button-typography,
   mdc-button-density, mdc-button-theme;
 @forward './mdc-button/fab-theme' as mdc-fab-* show mdc-fab-color, mdc-fab-typography,

src/material-experimental/config.bzl

@@ -1,7 +1,5 @@
 entryPoints = [
     "column-resize",
-    "mdc-autocomplete",
-    "mdc-autocomplete/testing",
     "mdc-button",
     "mdc-button/testing",
     "mdc-checkbox",