feat(material/datepicker): make compatible with MDC & legacy components (#25648)

BREAKING CHANGE:
Buttons inside the datepicker popup and datepicker toggle now use the
MDC-based button implementation. They have different CSS classes and
styles, so custom style overrides may need to be updated

Author: mmalerba

.github/CODEOWNERS

@@ -186,6 +186,7 @@
 /src/dev-app/layout/**                                      @andrewseguin
 /src/dev-app/legacy-card/**                                 @mmalerba
 /src/dev-app/legacy-checkbox/**                             @mmalerba
+/src/dev-app/legacy-datepicker/**                           @mmalerba
 /src/dev-app/legacy-dialog/**                               @devversion
 /src/dev-app/legacy-input/**                                @mmalerba
 /src/dev-app/legacy-list/**                                 @mmalerba

src/dev-app/BUILD.bazel

@@ -52,6 +52,7 @@ ng_module(
         "//src/dev-app/legacy-button",
         "//src/dev-app/legacy-card",
         "//src/dev-app/legacy-checkbox",
+        "//src/dev-app/legacy-datepicker",
         "//src/dev-app/legacy-dialog",
         "//src/dev-app/legacy-input",
         "//src/dev-app/legacy-list",

src/dev-app/datepicker/BUILD.bazel

@@ -12,14 +12,14 @@ ng_module(
         ":custom_header_scss",
     ],
     deps = [
+        "//src/material/button",
+        "//src/material/checkbox",
         "//src/material/core",
         "//src/material/datepicker",
+        "//src/material/form-field",
         "//src/material/icon",
-        "//src/material/legacy-button",
-        "//src/material/legacy-checkbox",
-        "//src/material/legacy-form-field",
-        "//src/material/legacy-input",
-        "//src/material/legacy-select",
+        "//src/material/input",
+        "//src/material/select",
     ],
 )
 

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

@@ -302,3 +302,33 @@ <h2>Range picker with custom selection strategy</h2>
     </mat-date-range-picker>
   </mat-form-field>
 </div>
+
+<h2>With custom icon</h2>
+<p>
+  <mat-form-field appearance="fill">
+    <mat-label>Custom icon</mat-label>
+    <input matInput [matDatepicker]="ci1">
+    <mat-datepicker-toggle matSuffix [for]="ci1">
+      <mat-icon matDatepickerToggleIcon>add</mat-icon>
+    </mat-datepicker-toggle>
+    <mat-datepicker #ci1></mat-datepicker>
+  </mat-form-field>
+  <br>
+  <mat-form-field appearance="outline">
+    <mat-label>Custom icon</mat-label>
+    <input matInput [matDatepicker]="ci2">
+    <mat-datepicker-toggle matSuffix [for]="ci2">
+      <mat-icon matDatepickerToggleIcon>add</mat-icon>
+    </mat-datepicker-toggle>
+    <mat-datepicker #ci2></mat-datepicker>
+  </mat-form-field>
+  <br>
+  <mat-form-field>
+    <mat-label>Custom icon</mat-label>
+    <input matInput [matDatepicker]="ci3">
+    <mat-datepicker #ci3></mat-datepicker>
+  </mat-form-field>
+  <mat-datepicker-toggle matSuffix [for]="ci3">
+    <mat-icon matDatepickerToggleIcon>add</mat-icon>
+  </mat-datepicker-toggle>
+</p>

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

@@ -20,8 +20,8 @@ import {
 } from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {FormControl, FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
-import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
+import {MatButtonModule} from '@angular/material/button';
+import {MatCheckboxModule} from '@angular/material/checkbox';
 import {
   DateAdapter,
   MAT_DATE_FORMATS,
@@ -38,10 +38,10 @@ import {
   DateRange,
   MatDatepickerModule,
 } from '@angular/material/datepicker';
-import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
+import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatIconModule} from '@angular/material/icon';
-import {MatLegacyInputModule} from '@angular/material/legacy-input';
-import {MatLegacySelectModule} from '@angular/material/legacy-select';
+import {MatInputModule} from '@angular/material/input';
+import {MatSelectModule} from '@angular/material/select';
 import {Subject} from 'rxjs';
 import {takeUntil} from 'rxjs/operators';
 
@@ -185,14 +185,14 @@ export class CustomHeaderNgContent<D> {
   imports: [
     CommonModule,
     FormsModule,
-    MatLegacyButtonModule,
-    MatLegacyCheckboxModule,
+    MatButtonModule,
+    MatCheckboxModule,
     MatDatepickerModule,
-    MatLegacyFormFieldModule,
+    MatFormFieldModule,
     MatIconModule,
-    MatLegacyInputModule,
+    MatInputModule,
     MatNativeDateModule,
-    MatLegacySelectModule,
+    MatSelectModule,
     ReactiveFormsModule,
     CustomHeader,
     CustomHeaderNgContent,

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

@@ -109,6 +109,7 @@ export class DevAppLayout {
     {name: 'Legacy Button', route: '/legacy-button'},
     {name: 'Legacy Card', route: '/legacy-card'},
     {name: 'Legacy Checkbox', route: '/legacy-checkbox'},
+    {name: 'Legacy Datepicker', route: '/legacy-datepicker'},
     {name: 'Legacy Dialog', route: '/legacy-dialog'},
     {name: 'Legacy Input', route: '/legacy-input'},
     {name: 'Legacy List', route: '/legacy-list'},

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

@@ -0,0 +1,38 @@
+load("//tools:defaults.bzl", "ng_module", "sass_binary")
+
+package(default_visibility = ["//visibility:public"])
+
+ng_module(
+    name = "legacy-datepicker",
+    srcs = glob(["**/*.ts"]),
+    assets = [
+        "datepicker-demo.html",
+        "custom-header.html",
+        ":datepicker_demo_scss",
+        ":custom_header_scss",
+    ],
+    deps = [
+        "//src/material/core",
+        "//src/material/datepicker",
+        "//src/material/icon",
+        "//src/material/legacy-button",
+        "//src/material/legacy-checkbox",
+        "//src/material/legacy-form-field",
+        "//src/material/legacy-input",
+        "//src/material/legacy-select",
+    ],
+)
+
+sass_binary(
+    name = "datepicker_demo_scss",
+    src = "datepicker-demo.scss",
+    deps = [
+        "//:mdc_sass_lib",
+        "//src/material:sass_lib",
+    ],
+)
+
+sass_binary(
+    name = "custom_header_scss",
+    src = "custom-header.scss",
+)

src/dev-app/legacy-datepicker/custom-header.html

@@ -0,0 +1,17 @@
+<div class="demo-calendar-header">
+  <button mat-icon-button class="demo-double-arrow" (click)="previousClicked('year')">
+    <mat-icon>keyboard_arrow_left</mat-icon>
+    <mat-icon>keyboard_arrow_left</mat-icon>
+  </button>
+  <button mat-icon-button (click)="previousClicked('month')">
+    <mat-icon>keyboard_arrow_left</mat-icon>
+  </button>
+  <span class="demo-calendar-header-label">{{periodLabel}}</span>
+  <button mat-icon-button (click)="nextClicked('month')">
+    <mat-icon>keyboard_arrow_right</mat-icon>
+  </button>
+  <button mat-icon-button class="demo-double-arrow" (click)="nextClicked('year')">
+    <mat-icon>keyboard_arrow_right</mat-icon>
+    <mat-icon>keyboard_arrow_right</mat-icon>
+  </button>
+</div>

src/dev-app/legacy-datepicker/custom-header.scss

@@ -0,0 +1,16 @@
+.demo-calendar-header {
+  display: flex;
+  align-items: center;
+  padding: 0.5em;
+}
+
+.demo-calendar-header-label {
+  flex: 1;
+  height: 1em;
+  font-weight: bold;
+  text-align: center;
+}
+
+.demo-double-arrow .mat-icon {
+  margin: -22%;
+}