refactor(datepicker): move keyboard events handlers into the views (#9775)

Author: julianobrasil

src/lib/datepicker/calendar-body.ts

@@ -9,12 +9,14 @@
 import {
   ChangeDetectionStrategy,
   Component,
+  ElementRef,
   EventEmitter,
   Input,
   Output,
-  ViewEncapsulation
+  ViewEncapsulation,
+  NgZone,
 } from '@angular/core';
-
+import {take} from 'rxjs/operators/take';
 
 /**
  * An internal class that represents the data corresponding to a single calendar cell.
@@ -81,6 +83,8 @@ export class MatCalendarBody {
   /** Emits when a new value is selected. */
   @Output() readonly selectedValueChange: EventEmitter<number> = new EventEmitter<number>();
 
+  constructor(private _elementRef: ElementRef, private _ngZone: NgZone) { }
+
   _cellClicked(cell: MatCalendarCell): void {
     if (!this.allowDisabledSelection && !cell.enabled) {
       return;
@@ -104,4 +108,13 @@ export class MatCalendarBody {
 
     return cellNumber == this.activeCell;
   }
+
+  /** Focuses the active cell after the microtask queue is empty. */
+  _focusActiveCell() {
+    this._ngZone.runOutsideAngular(() => {
+      this._ngZone.onStable.asObservable().pipe(take(1)).subscribe(() => {
+        this._elementRef.nativeElement.querySelector('.mat-calendar-body-active').focus();
+      });
+    });
+  }
 }

src/lib/datepicker/calendar.html

@@ -20,11 +20,10 @@
   </div>
 </div>
 
-<div class="mat-calendar-content" (keydown)="_handleCalendarBodyKeydown($event)"
-    [ngSwitch]="_currentView" cdkMonitorSubtreeFocus tabindex="-1">
+<div class="mat-calendar-content" [ngSwitch]="_currentView" cdkMonitorSubtreeFocus tabindex="-1">
   <mat-month-view
       *ngSwitchCase="'month'"
-      [activeDate]="_activeDate"
+      [(activeDate)]="_activeDate"
       [selected]="selected"
       [dateFilter]="dateFilter"
       [maxDate]="maxDate"