feat(material-experimental/mdc-select): implement MDC-based mat-select (#20502)

Implements `mat-select` on top of MDC Web's styles. The new select is functionally
identical to the current one since both are implemented on top of the same base
class, but they have the following differences:
* The logic that tries to position the selected option on top of the trigger has
been removed from the MDC version. Now we only position the panel above or below,
depending on the available space.
* Since we don't have to deal with the panel positioning logic anymore, we can now
 allow the text of `mat-option` to wrap to multiple lines inside the MDC version.
* The animations of the MDC version are simplified to mimic the ones from `mat-menu`,
because the previous animations where tightly coupled to the old overlay positioning logic.

Aside from the new select, this PR includes the following fixes:
* The `MatOptionSelectionChange.source` is now typed to the generic `_MatOptionBase` rather
than the non-MDC implementation. This was an oversight when the base class was first implemented.
* Uses `min-height` instead of `height` for the MDC `mat-option` in order to handle multi-line
text better.
* Adds the `mat-form-field-hide-placeholder`, `mat-form-field-appearance-outline` and
`mat-form-field-appearance-fill` classes which were missing from the MDC form field. They're
necessary so that the select can be styled to look correctly across all supported use cases.
* The dev app for the select has been reorganized to emphasize `mat-select`, instead of
`mat-form-field` with a native `select`. I've also cleaned up the styles so everything aligns
better and nicer to look at.

Author: crisbeto

.github/CODEOWNERS

@@ -186,6 +186,7 @@
 /src/dev-app/mdc-progress-bar/**                   @crisbeto
 /src/dev-app/mdc-progress-spinner/**               @annieyw @mmalerba
 /src/dev-app/mdc-radio/**                          @mmalerba
+/src/dev-app/mdc-select/**                         @crisbeto
 /src/dev-app/mdc-snack-bar/**                      @andrewseguin
 /src/dev-app/mdc-sidenav/**                        @crisbeto
 /src/dev-app/mdc-snack-bar/**                      @andrewseguin

src/dev-app/BUILD.bazel

@@ -59,6 +59,7 @@ ng_module(
         "//src/dev-app/mdc-progress-bar",
         "//src/dev-app/mdc-progress-spinner",
         "//src/dev-app/mdc-radio",
+        "//src/dev-app/mdc-select",
         "//src/dev-app/mdc-sidenav",
         "//src/dev-app/mdc-slide-toggle",
         "//src/dev-app/mdc-slider",

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

@@ -94,6 +94,7 @@ export class DevAppLayout {
     {name: 'MDC Progress Bar', route: '/mdc-progress-bar'},
     {name: 'MDC Progress Spinner', route: '/mdc-progress-spinner'},
     {name: 'MDC Tabs', route: '/mdc-tabs'},
+    {name: 'MDC Select', route: '/mdc-select'},
     {name: 'MDC Sidenav', route: '/mdc-sidenav'},
     {name: 'MDC Slide Toggle', route: '/mdc-slide-toggle'},
     {name: 'MDC Slider', route: '/mdc-slider'},

src/dev-app/dev-app/routes.ts

@@ -95,6 +95,7 @@ export const DEV_APP_ROUTES: Routes = [
       'mdc-progress-spinner/mdc-progress-spinner-demo-module#MdcProgressSpinnerDemoModule'
   },
   {path: 'mdc-radio', loadChildren: 'mdc-radio/mdc-radio-demo-module#MdcRadioDemoModule'},
+  {path: 'mdc-select', loadChildren: 'mdc-select/mdc-select-demo-module#MdcSelectDemoModule'},
   {path: 'mdc-sidenav', loadChildren: 'mdc-sidenav/mdc-sidenav-demo-module#MdcSidenavDemoModule'},
   {
     path: 'mdc-snack-bar',

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

@@ -0,0 +1,28 @@
+load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
+load("//tools:defaults.bzl", "ng_module")
+
+package(default_visibility = ["//visibility:public"])
+
+ng_module(
+    name = "mdc-select",
+    srcs = glob(["**/*.ts"]),
+    assets = [
+        "mdc-select-demo.html",
+        ":mdc_select_demo_scss",
+    ],
+    deps = [
+        "//src/material-experimental/mdc-button",
+        "//src/material-experimental/mdc-card",
+        "//src/material-experimental/mdc-form-field",
+        "//src/material-experimental/mdc-input",
+        "//src/material-experimental/mdc-select",
+        "//src/material/icon",
+        "@npm//@angular/forms",
+        "@npm//@angular/router",
+    ],
+)
+
+sass_binary(
+    name = "mdc_select_demo_scss",
+    src = "mdc-select-demo.scss",
+)

src/dev-app/mdc-select/mdc-select-demo-module.ts

@@ -0,0 +1,37 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {NgModule} from '@angular/core';
+import {MatFormFieldModule} from '@angular/material-experimental/mdc-form-field';
+import {MatSelectModule} from '@angular/material-experimental/mdc-select';
+import {RouterModule} from '@angular/router';
+import {CommonModule} from '@angular/common';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {MatCardModule} from '@angular/material-experimental/mdc-card';
+import {MatIconModule} from '@angular/material/icon';
+import {MatButtonModule} from '@angular/material-experimental/mdc-button';
+import {MatInputModule} from '@angular/material-experimental/mdc-input';
+import {MdcSelectDemo} from './mdc-select-demo';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatButtonModule,
+    MatCardModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatInputModule,
+    MatSelectModule,
+    ReactiveFormsModule,
+    RouterModule.forChild([{path: '', component: MdcSelectDemo}]),
+  ],
+  declarations: [MdcSelectDemo],
+})
+export class MdcSelectDemoModule {
+}