feat(material/select): switch implementation to use MDC (#25360)

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

BREAKING CHANGE:

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

Author: crisbeto

.github/CODEOWNERS

@@ -25,6 +25,7 @@
 /src/material/progress-spinner/**                  @andrewseguin @crisbeto
 /src/material/radio/**                             @andrewseguin @devversion
 /src/material/schematics/**                        @devversion @andrewseguin
+/src/material/legacy-select/**                     @crisbeto
 /src/material/select/**                            @crisbeto
 /src/material/sidenav/**                           @mmalerba
 /src/material/slide-toggle/**                      @devversion
@@ -119,7 +120,7 @@
 /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
+/src/material/select/**                                @crisbeto
 /src/material-experimental/mdc-paginator/**            @crisbeto
 /src/material-experimental/mdc-progress-spinner/**     @andrewseguin
 /src/material/progress-bar/**         @andrewseguin
@@ -338,7 +339,7 @@
 /tools/public_api_guard/material/legacy-progress-bar**    @andrewseguin @crisbeto
 /tools/public_api_guard/material/progress-spinner**@andrewseguin @crisbeto
 /tools/public_api_guard/material/radio**           @andrewseguin @devversion
-/tools/public_api_guard/material/select**          @crisbeto
+/tools/public_api_guard/material/legacy-select**   @crisbeto
 /tools/public_api_guard/material/sidenav**         @mmalerba
 /tools/public_api_guard/material/slide-toggle**    @devversion
 /tools/public_api_guard/material/slider**          @mmalerba

.ng-dev/commit-message.mts

@@ -55,7 +55,6 @@ export const commitMessage: CommitMessageConfig = {
     'material/progress-bar',
     'material-experimental/mdc-progress-spinner',
     'material-experimental/mdc-radio',
-    'material-experimental/mdc-select',
     'material-experimental/mdc-slide-toggle',
     'material-experimental/mdc-slider',
     'material-experimental/mdc-snack-bar',
@@ -97,6 +96,7 @@ export const commitMessage: CommitMessageConfig = {
     'material/radio',
     'material/schematics',
     'material/select',
+    'material/legacy-select',
     'material/sidenav',
     'material/slide-toggle',
     'material/slider',

integration/size-test/material/select/basic.ts

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

src/components-examples/cdk/a11y/BUILD.bazel

@@ -11,7 +11,7 @@ ng_module(
     ]),
     deps = [
         "//src/cdk/a11y",
-        "//src/material/select",
+        "//src/material/legacy-select",
     ],
 )
 

src/components-examples/cdk/a11y/index.ts

@@ -1,6 +1,6 @@
 import {A11yModule} from '@angular/cdk/a11y';
 import {NgModule} from '@angular/core';
-import {MatSelectModule} from '@angular/material/select';
+import {MatLegacySelectModule} from '@angular/material/legacy-select';
 import {FocusMonitorDirectivesExample} from './focus-monitor-directives/focus-monitor-directives-example';
 import {FocusMonitorFocusViaExample} from './focus-monitor-focus-via/focus-monitor-focus-via-example';
 import {FocusMonitorOverviewExample} from './focus-monitor-overview/focus-monitor-overview-example';
@@ -14,7 +14,7 @@ const EXAMPLES = [
 ];
 
 @NgModule({
-  imports: [A11yModule, MatSelectModule],
+  imports: [A11yModule, MatLegacySelectModule],
   declarations: EXAMPLES,
   exports: EXAMPLES,
 })

src/components-examples/cdk/text-field/BUILD.bazel

@@ -13,7 +13,7 @@ ng_module(
         "//src/cdk/text-field",
         "//src/material/button",
         "//src/material/legacy-input",
-        "//src/material/select",
+        "//src/material/legacy-select",
     ],
 )
 

src/components-examples/cdk/text-field/index.ts

@@ -3,7 +3,7 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatButtonModule} from '@angular/material/button';
 import {MatLegacyInputModule} from '@angular/material/legacy-input';
-import {MatSelectModule} from '@angular/material/select';
+import {MatLegacySelectModule} from '@angular/material/legacy-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';
 import {TextFieldAutosizeTextareaExample} from './text-field-autosize-textarea/text-field-autosize-textarea-example';
@@ -21,7 +21,13 @@ const EXAMPLES = [
 ];
 
 @NgModule({
-  imports: [CommonModule, TextFieldModule, MatButtonModule, MatLegacyInputModule, MatSelectModule],
+  imports: [
+    CommonModule,
+    TextFieldModule,
+    MatButtonModule,
+    MatLegacyInputModule,
+    MatLegacySelectModule,
+  ],
   declarations: EXAMPLES,
   exports: EXAMPLES,
 })

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

@@ -22,8 +22,8 @@ ng_module(
         "//src/material/legacy-form-field/testing",
         "//src/material/legacy-input",
         "//src/material/legacy-input/testing",
+        "//src/material/legacy-select",
         "//src/material/radio",
-        "//src/material/select",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",

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

@@ -7,7 +7,7 @@ import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
 import {MatIconModule} from '@angular/material/icon';
 import {MatLegacyInputModule} from '@angular/material/legacy-input';
 import {MatRadioModule} from '@angular/material/radio';
-import {MatSelectModule} from '@angular/material/select';
+import {MatLegacySelectModule} from '@angular/material/legacy-select';
 import {FormFieldAppearanceExample} from './form-field-appearance/form-field-appearance-example';
 import {
   FormFieldCustomControlExample,
@@ -55,7 +55,7 @@ const EXAMPLES = [
     MatIconModule,
     MatLegacyInputModule,
     MatRadioModule,
-    MatSelectModule,
+    MatLegacySelectModule,
     ReactiveFormsModule,
   ],
   declarations: [...EXAMPLES, MyTelInput],

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

@@ -18,8 +18,8 @@ ng_module(
         "//src/material/checkbox",
         "//src/material/legacy-form-field",
         "//src/material/legacy-input",
-        "//src/material/select",
-        "//src/material/select/testing",
+        "//src/material/legacy-select",
+        "//src/material/legacy-select/testing",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",
@@ -43,8 +43,8 @@ ng_test_library(
         ":select",
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
-        "//src/material/select",
-        "//src/material/select/testing",
+        "//src/material/legacy-select",
+        "//src/material/legacy-select/testing",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",
     ],

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

@@ -3,7 +3,7 @@ import {NgModule} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatCheckboxModule} from '@angular/material/checkbox';
 import {MatLegacyInputModule} from '@angular/material/legacy-input';
-import {MatSelectModule} from '@angular/material/select';
+import {MatLegacySelectModule} from '@angular/material/legacy-select';
 import {SelectCustomTriggerExample} from './select-custom-trigger/select-custom-trigger-example';
 import {SelectDisabledExample} from './select-disabled/select-disabled-example';
 import {SelectErrorStateMatcherExample} from './select-error-state-matcher/select-error-state-matcher-example';
@@ -63,7 +63,7 @@ const EXAMPLES = [
     FormsModule,
     MatCheckboxModule,
     MatLegacyInputModule,
-    MatSelectModule,
+    MatLegacySelectModule,
     ReactiveFormsModule,
     MatLegacyFormFieldModule,
   ],

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

@@ -1,8 +1,8 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
-import {MatSelectHarness} from '@angular/material/select/testing';
+import {MatLegacySelectHarness} from '@angular/material/legacy-select/testing';
 import {HarnessLoader} from '@angular/cdk/testing';
-import {MatSelectModule} from '@angular/material/select';
+import {MatLegacySelectModule} from '@angular/material/legacy-select';
 import {SelectHarnessExample} from './select-harness-example';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 
@@ -12,7 +12,7 @@ describe('SelectHarnessExample', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MatSelectModule, NoopAnimationsModule],
+      imports: [MatLegacySelectModule, NoopAnimationsModule],
       declarations: [SelectHarnessExample],
     }).compileComponents();
     fixture = TestBed.createComponent(SelectHarnessExample);
@@ -21,18 +21,18 @@ describe('SelectHarnessExample', () => {
   });
 
   it('should load all select harnesses', async () => {
-    const selects = await loader.getAllHarnesses(MatSelectHarness);
+    const selects = await loader.getAllHarnesses(MatLegacySelectHarness);
     expect(selects.length).toBe(1);
   });
 
   it('should be able to check whether a select is in multi-selection mode', async () => {
-    const select = await loader.getHarness(MatSelectHarness);
+    const select = await loader.getHarness(MatLegacySelectHarness);
 
     expect(await select.isMultiple()).toBe(false);
   });
 
   it('should be able to open and close a select', async () => {
-    const select = await loader.getHarness(MatSelectHarness);
+    const select = await loader.getHarness(MatLegacySelectHarness);
 
     expect(await select.isOpen()).toBe(false);
 
@@ -44,7 +44,7 @@ describe('SelectHarnessExample', () => {
   });
 
   it('should be able to get the value text from a select', async () => {
-    const select = await loader.getHarness(MatSelectHarness);
+    const select = await loader.getHarness(MatLegacySelectHarness);
     await select.open();
     const options = await select.getOptions();
 

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

@@ -19,9 +19,9 @@ ng_module(
         "//src/material/button",
         "//src/material/checkbox",
         "//src/material/icon",
+        "//src/material/legacy-select",
         "//src/material/list",
         "//src/material/radio",
-        "//src/material/select",
         "//src/material/sidenav",
         "//src/material/toolbar",
         "@npm//@angular/forms",

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

@@ -6,7 +6,7 @@ import {MatCheckboxModule} from '@angular/material/checkbox';
 import {MatIconModule} from '@angular/material/icon';
 import {MatListModule} from '@angular/material/list';
 import {MatRadioModule} from '@angular/material/radio';
-import {MatSelectModule} from '@angular/material/select';
+import {MatLegacySelectModule} from '@angular/material/legacy-select';
 import {MatSidenavModule} from '@angular/material/sidenav';
 import {MatToolbarModule} from '@angular/material/toolbar';
 import {SidenavAutosizeExample} from './sidenav-autosize/sidenav-autosize-example';
@@ -59,7 +59,7 @@ const EXAMPLES = [
     MatListModule,
     MatRadioModule,
     MatSidenavModule,
-    MatSelectModule,
+    MatLegacySelectModule,
     MatToolbarModule,
     ReactiveFormsModule,
   ],

src/components-examples/material/snack-bar/BUILD.bazel

@@ -17,7 +17,7 @@ ng_module(
         "//src/cdk/testing/testbed",
         "//src/material/button",
         "//src/material/legacy-input",
-        "//src/material/select",
+        "//src/material/legacy-select",
         "//src/material/snack-bar",
         "//src/material/snack-bar/testing",
         "@npm//@angular/forms",

src/components-examples/material/snack-bar/index.ts

@@ -2,7 +2,7 @@ import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
 import {MatLegacyInputModule} from '@angular/material/legacy-input';
-import {MatSelectModule} from '@angular/material/select';
+import {MatLegacySelectModule} from '@angular/material/legacy-select';
 import {MatSnackBarModule} from '@angular/material/snack-bar';
 import {
   PizzaPartyComponent,
@@ -28,7 +28,13 @@ const EXAMPLES = [
 ];
 
 @NgModule({
-  imports: [FormsModule, MatButtonModule, MatLegacyInputModule, MatSelectModule, MatSnackBarModule],
+  imports: [
+    FormsModule,
+    MatButtonModule,
+    MatLegacyInputModule,
+    MatLegacySelectModule,
+    MatSnackBarModule,
+  ],
   declarations: [...EXAMPLES, PizzaPartyComponent],
   exports: EXAMPLES,
 })

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

@@ -19,9 +19,9 @@ ng_module(
         "//src/material/button",
         "//src/material/checkbox",
         "//src/material/legacy-input",
+        "//src/material/legacy-select",
         "//src/material/legacy-tooltip",
         "//src/material/legacy-tooltip/testing",
-        "//src/material/select",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",

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

@@ -5,7 +5,7 @@ import {ScrollingModule} from '@angular/cdk/scrolling';
 import {MatButtonModule} from '@angular/material/button';
 import {MatCheckboxModule} from '@angular/material/checkbox';
 import {MatLegacyInputModule} from '@angular/material/legacy-input';
-import {MatSelectModule} from '@angular/material/select';
+import {MatLegacySelectModule} from '@angular/material/legacy-select';
 import {MatLegacyTooltipModule} from '@angular/material/legacy-tooltip';
 import {TooltipAutoHideExample} from './tooltip-auto-hide/tooltip-auto-hide-example';
 import {TooltipCustomClassExample} from './tooltip-custom-class/tooltip-custom-class-example';
@@ -50,7 +50,7 @@ const EXAMPLES = [
     MatButtonModule,
     MatCheckboxModule,
     MatLegacyInputModule,
-    MatSelectModule,
+    MatLegacySelectModule,
     MatLegacyTooltipModule,
     ReactiveFormsModule,
     ScrollingModule, // Required for the auto-scrolling example

src/dev-app/baseline/BUILD.bazel

@@ -14,8 +14,8 @@ ng_module(
         "//src/material/legacy-card",
         "//src/material/legacy-form-field",
         "//src/material/legacy-input",
+        "//src/material/legacy-select",
         "//src/material/radio",
-        "//src/material/select",
         "//src/material/toolbar",
     ],
 )

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

@@ -13,7 +13,7 @@ import {MatCheckboxModule} from '@angular/material/checkbox';
 import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
 import {MatLegacyInputModule} from '@angular/material/legacy-input';
 import {MatRadioModule} from '@angular/material/radio';
-import {MatSelectModule} from '@angular/material/select';
+import {MatLegacySelectModule} from '@angular/material/legacy-select';
 import {MatToolbarModule} from '@angular/material/toolbar';
 
 @Component({
@@ -28,7 +28,7 @@ import {MatToolbarModule} from '@angular/material/toolbar';
     MatLegacyFormFieldModule,
     MatLegacyInputModule,
     MatRadioModule,
-    MatSelectModule,
+    MatLegacySelectModule,
     MatToolbarModule,
   ],
 })

src/dev-app/bottom-sheet/BUILD.bazel

@@ -17,8 +17,8 @@ ng_module(
         "//src/material/legacy-card",
         "//src/material/legacy-form-field",
         "//src/material/legacy-input",
+        "//src/material/legacy-select",
         "//src/material/list",
-        "//src/material/select",
         "@npm//@angular/forms",
     ],
 )

src/dev-app/bottom-sheet/bottom-sheet-demo.ts

@@ -22,7 +22,7 @@ import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
 import {MatIconModule} from '@angular/material/icon';
 import {MatLegacyInputModule} from '@angular/material/legacy-input';
 import {MatListModule} from '@angular/material/list';
-import {MatSelectModule} from '@angular/material/select';
+import {MatLegacySelectModule} from '@angular/material/legacy-select';
 
 const defaultConfig = new MatBottomSheetConfig();
 
@@ -41,7 +41,7 @@ const defaultConfig = new MatBottomSheetConfig();
     MatLegacyFormFieldModule,
     MatIconModule,
     MatLegacyInputModule,
-    MatSelectModule,
+    MatLegacySelectModule,
     MatListModule,
   ],
 })

src/dev-app/cdk-experimental-listbox/BUILD.bazel

@@ -11,6 +11,6 @@ ng_module(
     ],
     deps = [
         "//src/cdk-experimental/listbox",
-        "//src/material/select",
+        "//src/material/legacy-select",
     ],
 )