feat(material/datepicker): remove dependency on dialog (#22383)

Currently the datepicker has a hard dependency on `MatDialog` due to its touch-specific appearance which makes it difficult to use together with the MDC packages, because they have an alternate dialog module.

These changes resolve the issue by removing the datepicker's dependency on `MatDialog`.  The approach is loosely based on #13019, however I've simplified things a bit to make it more maintainable.

Author: crisbeto

src/material/datepicker/BUILD.bazel

@@ -35,7 +35,6 @@ ng_module(
         "//src/cdk/portal",
         "//src/material/button",
         "//src/material/core",
-        "//src/material/dialog",
         "//src/material/form-field",
         "//src/material/input",
         "@npm//@angular/animations",
@@ -102,7 +101,6 @@ ng_test_library(
         "//src/cdk/scrolling",
         "//src/cdk/testing/private",
         "//src/material/core",
-        "//src/material/dialog",
         "//src/material/form-field",
         "//src/material/input",
         "//src/material/testing",

src/material/datepicker/_datepicker-theme.scss

@@ -162,7 +162,7 @@ $calendar-weekday-table-font-size: 11px !default;
   }
 
   .mat-datepicker-content-touch {
-    @include private.private-theme-elevation(0, $config);
+    @include private.private-theme-elevation(24, $config);
   }
 
   .mat-datepicker-toggle-active {

src/material/datepicker/calendar-body.scss

@@ -192,12 +192,6 @@ $calendar-range-end-body-cell-size:
   }
 }
 
-// Allows for the screen reader close button to be seen in touch UI mode.
-.mat-datepicker-dialog .mat-dialog-container {
-  position: relative;
-  overflow: visible;
-}
-
 @include a11y.high-contrast(active, off) {
   .mat-datepicker-popup:not(:empty),
   .mat-calendar-body-selected {

src/material/datepicker/datepicker-animations.ts

@@ -11,6 +11,7 @@ import {
   style,
   transition,
   trigger,
+  keyframes,
   AnimationTriggerMetadata,
 } from '@angular/animations';
 
@@ -24,14 +25,14 @@ export const matDatepickerAnimations: {
 } = {
   /** Transforms the height of the datepicker's calendar. */
   transformPanel: trigger('transformPanel', [
-    state('void', style({
-      opacity: 0,
-      transform: 'scale(1, 0.8)'
-    })),
-    transition('void => enter',  animate('120ms cubic-bezier(0, 0, 0.2, 1)', style({
-      opacity: 1,
-      transform: 'scale(1, 1)'
-    }))),
+    transition('void => enter-dropdown', animate('120ms cubic-bezier(0, 0, 0.2, 1)', keyframes([
+      style({opacity: 0, transform: 'scale(1, 0.8)'}),
+      style({opacity: 1, transform: 'scale(1, 1)'})
+    ]))),
+    transition('void => enter-dialog', animate('150ms cubic-bezier(0, 0, 0.2, 1)', keyframes([
+      style({opacity: 0, transform: 'scale(0.7)'}),
+      style({transform: 'none', opacity: 1})
+    ]))),
     transition('* => void', animate('100ms linear', style({opacity: 0})))
   ]),