feat(material/legacy-datepicker): add legacy datepicker

Adds a legacy version of the datepicker that uses the legacy versions of components internally.

.github/CODEOWNERS

@@ -22,6 +22,7 @@
 /src/material/legacy-checkbox/**                            @andrewseguin @devversion
 /src/material/legacy-chips/**                               @andrewseguin
 /src/material/legacy-dialog/**                              @andrewseguin @crisbeto
+/src/material/legacy-datepicker/**                          @crisbeto
 /src/material/legacy-form-field/**                          @mmalerba
 /src/material/legacy-input/**                               @mmalerba
 /src/material/legacy-list/**                                @andrewseguin @crisbeto @devversion
@@ -168,6 +169,7 @@
 /src/dev-app/connected-overlay/**                           @jelbourn @crisbeto
 /src/dev-app/dataset/**                                     @andrewseguin
 /src/dev-app/datepicker/**                                  @mmalerba @crisbeto @zarend
+/src/dev-app/legacy-datepicker/**                           @crisbeto
 /src/dev-app/dev-app/**                                     @mmalerba
 /src/dev-app/dialog/**                                      @andrewseguin @crisbeto
 /src/dev-app/drag-drop/**                                   @crisbeto
@@ -323,6 +325,7 @@
 /tools/public_api_guard/material/chips/testing**            @andrewseguin
 /tools/public_api_guard/material/core**                     @andrewseguin
 /tools/public_api_guard/material/datepicker**               @mmalerba @crisbeto @zarend
+/tools/public_api_guard/material/legacy-datepicker**        @crisbeto
 /tools/public_api_guard/material/divider**                  @andrewseguin @crisbeto
 /tools/public_api_guard/material/expansion**                @andrewseguin
 /tools/public_api_guard/material/form-field**               @mmalerba

.ng-dev/commit-message.mts

@@ -73,6 +73,7 @@ export const commitMessage: CommitMessageConfig = {
     'material/core',
     'material/legacy-core',
     'material/datepicker',
+    'material/legacy-datepicker',
     'material/legacy-dialog',
     'material/divider',
     'material/expansion',

src/dev-app/BUILD.bazel

@@ -51,6 +51,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/dev-app/dev-app-layout.ts

@@ -110,6 +110,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 = [
+        "legacy-datepicker-demo.html",
+        "custom-header.html",
+        ":legacy-datepicker_demo_scss",
+        ":custom_header_scss",
+    ],
+    deps = [
+        "//src/material/icon",
+        "//src/material/legacy-button",
+        "//src/material/legacy-checkbox",
+        "//src/material/legacy-core",
+        "//src/material/legacy-datepicker",
+        "//src/material/legacy-form-field",
+        "//src/material/legacy-input",
+        "//src/material/legacy-select",
+    ],
+)
+
+sass_binary(
+    name = "legacy-datepicker_demo_scss",
+    src = "legacy-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,15 @@
+<div class="demo-calendar-header">
+  <button mat-icon-button (click)="previousClicked('year')">
+    <mat-icon>keyboard_double_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 (click)="nextClicked('year')">
+    <mat-icon>keyboard_double_arrow_right</mat-icon>
+  </button>
+</div>

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

@@ -0,0 +1,12 @@
+.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;
+}