@ng-matero/extensions 12.5.3 → 12.7.1

package/fesm2015/mtxDatetimepicker.js

@@ -1,51 +1,65 @@
 import { A11yModule } from '@angular/cdk/a11y';
-import { OverlayConfig, Overlay, OverlayModule } from '@angular/cdk/overlay';
+import { Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
+import { ComponentPortal, PortalModule } from '@angular/cdk/portal';
 import { CommonModule } from '@angular/common';
-import { EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, Optional, Inject, ElementRef, NgZone, ChangeDetectorRef, ViewChild, ViewContainerRef, forwardRef, Directive, NgModule } from '@angular/core';
+import { EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, Optional, Inject, ElementRef, NgZone, ChangeDetectorRef, InjectionToken, ViewChild, ViewContainerRef, forwardRef, Directive, ContentChild, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
 import { ENTER, PAGE_DOWN, PAGE_UP, END, HOME, DOWN_ARROW, UP_ARROW, RIGHT_ARROW, LEFT_ARROW, ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { MatDatepickerIntl, MAT_DATEPICKER_SCROLL_STRATEGY } from '@angular/material/datepicker';
+import { coerceBooleanProperty, coerceStringArray } from '@angular/cdk/coercion';
+import { MatDatepickerIntl } from '@angular/material/datepicker';
 import { first, take, filter } from 'rxjs/operators';
 import { DatetimeAdapter, MTX_DATETIME_FORMATS } from '@ng-matero/extensions/core';
-import { trigger, state, style, transition, animate, keyframes } from '@angular/animations';
+import { trigger, transition, animate, keyframes, style, state } from '@angular/animations';
 import { Directionality } from '@angular/cdk/bidi';
-import { ComponentPortal } from '@angular/cdk/portal';
-import { Subject, Subscription, merge, of } from 'rxjs';
 import { _getFocusedElementPierceShadowDom } from '@angular/cdk/platform';
+import { mixinColor } from '@angular/material/core';
+import { Subject, Subscription, merge, of } from 'rxjs';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, Validators } from '@angular/forms';
 import { MAT_INPUT_VALUE_ACCESSOR } from '@angular/material/input';
 import { MatFormField } from '@angular/material/form-field';
 
 /**
- * This animation fades in the background color and text content of the
- * select's options. It is time delayed to occur 100ms after the overlay
- * panel has transformed in.
+ * Animations used by the Material datepicker.
+ * @docs-private
  */
-const fadeInContent = trigger('fadeInContent', [
-    state('showing', style({ opacity: 1 })),
-    transition('void => showing', [
-        style({ opacity: 0 }),
-        animate(`150ms 100ms cubic-bezier(0.55, 0, 0.55, 0.2)`),
+const mtxDatetimepickerAnimations = {
+    /** Transforms the height of the datepicker's calendar. */
+    transformPanel: trigger('transformPanel', [
+        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 }))),
     ]),
-]);
-const slideCalendar = trigger('slideCalendar', [
-    transition('* => left', [
-        animate(180, keyframes([
-            style({ transform: 'translateX(100%)', offset: 0.5 }),
-            style({ transform: 'translateX(-100%)', offset: 0.51 }),
-            style({ transform: 'translateX(0)', offset: 1 }),
-        ])),
+    /** Fades in the content of the calendar. */
+    fadeInCalendar: trigger('fadeInCalendar', [
+        state('void', style({ opacity: 0 })),
+        state('enter', style({ opacity: 1 })),
+        // TODO(crisbeto): this animation should be removed since it isn't quite on spec, but we
+        // need to keep it until #12440 gets in, otherwise the exit animation will look glitchy.
+        transition('void => *', animate('120ms 100ms cubic-bezier(0.55, 0, 0.55, 0.2)')),
     ]),
-    transition('* => right', [
-        animate(180, keyframes([
-            style({ transform: 'translateX(-100%)', offset: 0.5 }),
-            style({ transform: 'translateX(100%)', offset: 0.51 }),
-            style({ transform: 'translateX(0)', offset: 1 }),
-        ])),
+    slideCalendar: trigger('slideCalendar', [
+        transition('* => left', [
+            animate(180, keyframes([
+                style({ transform: 'translateX(100%)', offset: 0.5 }),
+                style({ transform: 'translateX(-100%)', offset: 0.51 }),
+                style({ transform: 'translateX(0)', offset: 1 }),
+            ])),
+        ]),
+        transition('* => right', [
+            animate(180, keyframes([
+                style({ transform: 'translateX(-100%)', offset: 0.5 }),
+                style({ transform: 'translateX(100%)', offset: 0.51 }),
+                style({ transform: 'translateX(0)', offset: 1 }),
+            ])),
+        ]),
     ]),
-]);
+};
 
 /** @docs-private */
 function createMissingDateImplError(provider) {
@@ -117,6 +131,7 @@ MtxCalendarBody.decorators = [
                 host: {
                     class: 'mtx-calendar-body',
                 },
+                exportAs: 'mtxCalendarBody',
                 encapsulation: ViewEncapsulation.None,
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [".mtx-calendar-body{min-width:224px}.mtx-calendar-body-label{height:0;line-height:0;text-align:left;padding:7.1428571429% 4.7142857143%}[dir=rtl] .mtx-calendar-body-label{text-align:right}.mtx-calendar-body-cell{position:relative;width:14.2857142857%;height:0;line-height:0;padding:7.1428571429% 0;text-align:center;outline:none;cursor:pointer}.mtx-calendar-body-disabled{cursor:default;pointer-events:none}.mtx-calendar-body-cell-content{position:absolute;top:5%;left:5%;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:90%;height:90%;border:1px solid transparent;border-radius:999px}\n"]
@@ -145,10 +160,11 @@ class MtxMultiYearView {
     constructor(_adapter, _dateFormats) {
         this._adapter = _adapter;
         this._dateFormats = _dateFormats;
-        this._userSelection = new EventEmitter();
         this.type = 'date';
         /** Emits when a new month is selected. */
         this.selectedChange = new EventEmitter();
+        /** Emits when any date is selected. */
+        this._userSelection = new EventEmitter();
         if (!this._adapter) {
             throw createMissingDateImplError('DatetimeAdapter');
         }
@@ -280,7 +296,8 @@ MtxMultiYearView.decorators = [
     { type: Component, args: [{
                 selector: 'mtx-multi-year-view',
                 template: "<table class=\"mtx-calendar-table\" role=\"grid\">\n  <thead class=\"mtx-calendar-table-header\"></thead>\n  <tbody mtx-calendar-body\n         (@slideCalendar.done)=\"_calendarStateDone()\"\n         [@slideCalendar]=\"_calendarState\"\n         [todayValue]=\"_todayYear\"\n         [rows]=\"_years\"\n         [numCols]=\"4\"\n         [activeCell]=\"_getActiveCell()\"\n         [allowDisabledSelection]=\"true\"\n         [selectedValue]=\"_selectedYear!\"\n         (selectedValueChange)=\"_yearSelected($event)\"></tbody>\n</table>\n",
-                animations: [slideCalendar],
+                exportAs: 'mtxMultiYearView',
+                animations: [mtxDatetimepickerAnimations.slideCalendar],
                 encapsulation: ViewEncapsulation.None,
                 changeDetection: ChangeDetectionStrategy.OnPush
             },] }
@@ -298,10 +315,10 @@ MtxMultiYearView.ctorParameters = () => [
 ];
 /** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
 MtxMultiYearView.propDecorators = {
-    _userSelection: [{ type: Output }],
     type: [{ type: Input }],
     dateFilter: [{ type: Input }],
     selectedChange: [{ type: Output }],
+    _userSelection: [{ type: Output }],
     activeDate: [{ type: Input }],
     selected: [{ type: Input }],
     minDate: [{ type: Input }],
@@ -354,25 +371,18 @@ class MtxCalendar {
         this._ngZone = _ngZone;
         this._adapter = _adapter;
         this._dateFormats = _dateFormats;
-        this._userSelection = new EventEmitter();
         this._multiYearSelector = false;
         this._twelvehour = false;
         /** Whether the calendar should be started in month or year view. */
         this.startView = 'month';
         this.timeInterval = 1;
-        this.ariaLabel = 'Use arrow keys to navigate';
-        this.ariaNextMonthLabel = 'Next month';
-        this.ariaPrevMonthLabel = 'Previous month';
-        this.ariaNextYearLabel = 'Next year';
-        this.ariaPrevYearLabel = 'Previous year';
-        this.ariaNextMultiYearLabel = 'Next year range';
-        this.ariaPrevMultiYearLabel = 'Previous year range';
         /** Prevent user to select same date time */
         this.preventSameDateTimeSelection = false;
         /** Emits when the currently selected date changes. */
         this.selectedChange = new EventEmitter();
         /** Emits when the view has been changed. */
         this.viewChanged = new EventEmitter();
+        this._userSelection = new EventEmitter();
         this._clockView = 'hour';
         this._type = 'date';
         /** Date filter for the month and year views. */
@@ -514,11 +524,11 @@ class MtxCalendar {
     get _ariaLabelNext() {
         switch (this._currentView) {
             case 'month':
-                return this.ariaNextMonthLabel;
+                return this._intl.nextMonthLabel;
             case 'year':
-                return this.ariaNextYearLabel;
+                return this._intl.nextYearLabel;
             case 'multi-year':
-                return this.ariaNextMultiYearLabel;
+                return this._intl.nextMultiYearLabel;
             default:
                 return '';
         }
@@ -526,11 +536,11 @@ class MtxCalendar {
     get _ariaLabelPrev() {
         switch (this._currentView) {
             case 'month':
-                return this.ariaPrevMonthLabel;
+                return this._intl.prevMonthLabel;
             case 'year':
-                return this.ariaPrevYearLabel;
+                return this._intl.prevYearLabel;
             case 'multi-year':
-                return this.ariaPrevMultiYearLabel;
+                return this._intl.prevMultiYearLabel;
             default:
                 return '';
         }
@@ -908,14 +918,14 @@ class MtxCalendar {
 MtxCalendar.decorators = [
     { type: Component, args: [{
                 selector: 'mtx-calendar',
-                template: "<div class=\"mtx-calendar-header\">\n  <div (click)=\"_yearClicked()\"\n       *ngIf=\"type !== 'time'\"\n       [class.active]=\"currentView === 'year' || currentView === 'multi-year'\"\n       class=\"mtx-calendar-header-year\"\n       role=\"button\">\n    <span>{{ _yearLabel }}</span>\n    <mat-icon *ngIf=\"multiYearSelector || type === 'year'\">arrow_drop_down</mat-icon>\n  </div>\n  <div class=\"mtx-calendar-header-date-time\">\n    <span (click)=\"_dateClicked()\" *ngIf=\"type !== 'time' && type !== 'year'\"\n          [class.active]=\"currentView === 'month'\"\n          [class.not-clickable]=\"type === 'month'\"\n          class=\"mtx-calendar-header-date\"\n          role=\"button\">{{ _dateLabel }}</span>\n    <span *ngIf=\"type.endsWith('time')\"\n          [class.active]=\"currentView === 'clock'\"\n          class=\"mtx-calendar-header-time\">\n      <span (click)=\"_hoursClicked()\"\n            [class.active]=\"_clockView === 'hour'\"\n            class=\"mtx-calendar-header-hours\"\n            role=\"button\">{{ _hoursLabel }}</span>:<span (click)=\"_minutesClicked()\"\n            [class.active]=\"_clockView === 'minute'\"\n            class=\"mtx-calendar-header-minutes\"\n            role=\"button\">{{ _minutesLabel }}</span>\n      <br />\n      <span *ngIf=\"twelvehour\" class=\"mtx-calendar-header-ampm-container\">\n        <span (click)=\"_ampmClicked('AM')\"\n              [class.active]=\"_AMPM === 'AM'\"\n              class=\"mtx-calendar-header-ampm\">AM</span>/<span\n              (click)=\"_ampmClicked('PM')\"\n              [class.active]=\"_AMPM === 'PM'\"\n              class=\"mtx-calendar-header-ampm\">PM</span>\n      </span>\n    </span>\n  </div>\n</div>\n<div class=\"mtx-calendar-content\" [ngSwitch]=\"currentView\">\n  <div *ngIf=\"currentView === 'month' || currentView === 'year' || currentView === 'multi-year'\"\n       class=\"mtx-month-content\">\n    <div class=\"mtx-calendar-controls\">\n      <button mat-icon-button type=\"button\" (click)=\"_previousClicked()\"\n              [attr.aria-disabled]=\"!_previousEnabled()\"\n              [attr.aria-label]=\"_ariaLabelPrev\"\n              [class.disabled]=\"!_previousEnabled()\"\n              class=\"mtx-calendar-previous-button\">\n        <svg height=\"24\" viewBox=\"0 0 24 24\" width=\"24\">\n          <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\"></path>\n        </svg>\n      </button>\n      <div (@slideCalendar.done)=\"_calendarStateDone()\" [@slideCalendar]=\"_calendarState\"\n           class=\"mtx-calendar-period-button\">\n        <strong>{{ _monthYearLabel }}</strong>\n      </div>\n      <button mat-icon-button type=\"button\" (click)=\"_nextClicked()\"\n              [attr.aria-disabled]=\"!_nextEnabled()\"\n              [attr.aria-label]=\"_ariaLabelNext\"\n              [class.disabled]=\"!_nextEnabled()\"\n              class=\"mtx-calendar-next-button\">\n        <svg height=\"24\" viewBox=\"0 0 24 24\" width=\"24\">\n          <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"></path>\n        </svg>\n      </button>\n    </div>\n  </div>\n  <mtx-month-view (_userSelection)=\"_userSelected()\"\n                  (selectedChange)=\"_dateSelected($event)\"\n                  *ngSwitchCase=\"'month'\"\n                  [activeDate]=\"_activeDate\"\n                  [dateFilter]=\"_dateFilterForViews\"\n                  [selected]=\"selected!\"\n                  [type]=\"type\">\n  </mtx-month-view>\n  <mtx-year-view (_userSelection)=\"_userSelected()\"\n                 (selectedChange)=\"_monthSelected($event)\"\n                 *ngSwitchCase=\"'year'\"\n                 [activeDate]=\"_activeDate\"\n                 [dateFilter]=\"_dateFilterForViews\"\n                 [selected]=\"selected!\"\n                 [type]=\"type\">\n  </mtx-year-view>\n  <mtx-multi-year-view (_userSelection)=\"_userSelected()\"\n                       (selectedChange)=\"_yearSelected($event)\"\n                       *ngSwitchCase=\"'multi-year'\"\n                       [activeDate]=\"_activeDate\"\n                       [dateFilter]=\"_dateFilterForViews\"\n                       [maxDate]=\"maxDate\"\n                       [minDate]=\"minDate\"\n                       [selected]=\"selected!\"\n                       [type]=\"type\">\n  </mtx-multi-year-view>\n  <mtx-clock (_userSelection)=\"_userSelected()\"\n             (activeDateChange)=\"_onActiveDateChange($event)\"\n             (selectedChange)=\"_timeSelected($event)\"\n             *ngSwitchDefault\n             [dateFilter]=\"dateFilter\"\n             [interval]=\"timeInterval\"\n             [maxDate]=\"maxDate\"\n             [minDate]=\"minDate\"\n             [selected]=\"_activeDate\"\n             [startView]=\"_clockView\"\n             [twelvehour]=\"twelvehour\">\n  </mtx-clock>\n</div>\n",
+                template: "<div class=\"mtx-calendar-header\">\n  <div (click)=\"_yearClicked()\"\n       *ngIf=\"type !== 'time'\"\n       [class.active]=\"currentView === 'year' || currentView === 'multi-year'\"\n       class=\"mtx-calendar-header-year\"\n       role=\"button\">\n    <span>{{ _yearLabel }}</span>\n    <svg *ngIf=\"multiYearSelector || type === 'year'\"\n         class=\"mtx-calendar-header-year-dropdown\"\n         width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n      <path d=\"M7,10L12,15L17,10H7Z\"></path>\n    </svg>\n  </div>\n  <div class=\"mtx-calendar-header-date-time\">\n    <span (click)=\"_dateClicked()\" *ngIf=\"type !== 'time' && type !== 'year'\"\n          [class.active]=\"currentView === 'month'\"\n          [class.not-clickable]=\"type === 'month'\"\n          class=\"mtx-calendar-header-date\"\n          role=\"button\">{{ _dateLabel }}</span>\n    <span *ngIf=\"type.endsWith('time')\"\n          [class.active]=\"currentView === 'clock'\"\n          class=\"mtx-calendar-header-time\">\n      <span (click)=\"_hoursClicked()\"\n            [class.active]=\"_clockView === 'hour'\"\n            class=\"mtx-calendar-header-hours\"\n            role=\"button\">{{ _hoursLabel }}</span>:<span (click)=\"_minutesClicked()\"\n            [class.active]=\"_clockView === 'minute'\"\n            class=\"mtx-calendar-header-minutes\"\n            role=\"button\">{{ _minutesLabel }}</span>\n      <br />\n      <span *ngIf=\"twelvehour\" class=\"mtx-calendar-header-ampm-container\">\n        <span (click)=\"_ampmClicked('AM')\"\n              [class.active]=\"_AMPM === 'AM'\"\n              class=\"mtx-calendar-header-ampm\">AM</span>/<span\n              (click)=\"_ampmClicked('PM')\"\n              [class.active]=\"_AMPM === 'PM'\"\n              class=\"mtx-calendar-header-ampm\">PM</span>\n      </span>\n    </span>\n  </div>\n</div>\n<div class=\"mtx-calendar-content\" [ngSwitch]=\"currentView\">\n  <div *ngIf=\"currentView === 'month' || currentView === 'year' || currentView === 'multi-year'\"\n       class=\"mtx-month-content\">\n    <div class=\"mtx-calendar-controls\">\n      <button mat-icon-button type=\"button\" (click)=\"_previousClicked()\"\n              [attr.aria-disabled]=\"!_previousEnabled()\"\n              [attr.aria-label]=\"_ariaLabelPrev\"\n              [class.disabled]=\"!_previousEnabled()\"\n              class=\"mtx-calendar-previous-button\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n          <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\"></path>\n        </svg>\n      </button>\n      <div [@slideCalendar]=\"_calendarState\"\n           (@slideCalendar.done)=\"_calendarStateDone()\"\n           class=\"mtx-calendar-period-button\">\n        <strong>{{ _monthYearLabel }}</strong>\n      </div>\n      <button mat-icon-button type=\"button\" (click)=\"_nextClicked()\"\n              [attr.aria-disabled]=\"!_nextEnabled()\"\n              [attr.aria-label]=\"_ariaLabelNext\"\n              [class.disabled]=\"!_nextEnabled()\"\n              class=\"mtx-calendar-next-button\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n          <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"></path>\n        </svg>\n      </button>\n    </div>\n  </div>\n  <mtx-month-view (_userSelection)=\"_userSelected()\"\n                  (selectedChange)=\"_dateSelected($event)\"\n                  *ngSwitchCase=\"'month'\"\n                  [activeDate]=\"_activeDate\"\n                  [dateFilter]=\"_dateFilterForViews\"\n                  [selected]=\"selected!\"\n                  [type]=\"type\">\n  </mtx-month-view>\n  <mtx-year-view (_userSelection)=\"_userSelected()\"\n                 (selectedChange)=\"_monthSelected($event)\"\n                 *ngSwitchCase=\"'year'\"\n                 [activeDate]=\"_activeDate\"\n                 [dateFilter]=\"_dateFilterForViews\"\n                 [selected]=\"selected!\"\n                 [type]=\"type\">\n  </mtx-year-view>\n  <mtx-multi-year-view (_userSelection)=\"_userSelected()\"\n                       (selectedChange)=\"_yearSelected($event)\"\n                       *ngSwitchCase=\"'multi-year'\"\n                       [activeDate]=\"_activeDate\"\n                       [dateFilter]=\"_dateFilterForViews\"\n                       [maxDate]=\"maxDate\"\n                       [minDate]=\"minDate\"\n                       [selected]=\"selected!\"\n                       [type]=\"type\">\n  </mtx-multi-year-view>\n  <mtx-clock (_userSelection)=\"_userSelected()\"\n             (activeDateChange)=\"_onActiveDateChange($event)\"\n             (selectedChange)=\"_timeSelected($event)\"\n             *ngSwitchDefault\n             [dateFilter]=\"dateFilter\"\n             [interval]=\"timeInterval\"\n             [maxDate]=\"maxDate\"\n             [minDate]=\"minDate\"\n             [selected]=\"_activeDate\"\n             [startView]=\"_clockView\"\n             [twelvehour]=\"twelvehour\">\n  </mtx-clock>\n</div>\n",
                 host: {
                     'class': 'mtx-calendar',
-                    '[attr.aria-label]': 'ariaLabel',
                     'tabindex': '0',
                     '(keydown)': '_handleCalendarBodyKeydown($event)',
                 },
-                animations: [slideCalendar],
+                exportAs: 'mtxCalendar',
+                animations: [mtxDatetimepickerAnimations.slideCalendar],
                 encapsulation: ViewEncapsulation.None,
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [".mtx-calendar{display:block;outline:none}.mtx-calendar[mode=landscape]{display:flex}.mtx-calendar-header{padding:16px;box-sizing:border-box;border-radius:4px 4px 0 0}[mode=landscape] .mtx-calendar-header{width:150px;min-width:150px;border-radius:4px 0 0 4px}[dir=rtl] [mode=landscape] .mtx-calendar-header{border-radius:0 4px 4px 0}.mtx-calendar-header-year,.mtx-calendar-header-date-time{width:100%;white-space:nowrap}.mtx-calendar-header-year{height:32px;line-height:32px}.mtx-calendar-header-year>*{vertical-align:middle}.mtx-calendar-header-date-time{line-height:34px}[mode=landscape] .mtx-calendar-header-date-time{white-space:normal;word-wrap:break-word}.mtx-calendar-header-year:not(.active),.mtx-calendar-header-date:not(.active),.mtx-calendar-header-hours:not(.active),.mtx-calendar-header-minutes:not(.active),.mtx-calendar-header-ampm:not(.active){cursor:pointer;opacity:.6}.mtx-calendar-header-year.not-clickable,.mtx-calendar-header-date.not-clickable,.mtx-calendar-header-hours.not-clickable,.mtx-calendar-header-minutes.not-clickable,.mtx-calendar-header-ampm.not-clickable{cursor:initial}.mtx-calendar-header-time{display:inline-block;padding-left:8px}.mtx-calendar-header-time:not(.active){opacity:.6}.mtx-calendar-header-time:not(.active) .mtx-calendar-header-hours,.mtx-calendar-header-time:not(.active) .mtx-calendar-header-minutes,.mtx-calendar-header-time:not(.active) .mtx-calendar-header-ampm{cursor:pointer;opacity:1}[dir=rtl] .mtx-calendar-header-time{padding-right:8px}[mode=landscape] .mtx-calendar-header-time{display:block;padding:0}.mtx-calendar-content{width:100%;padding:8px;outline:none;box-sizing:border-box;overflow:hidden}.mtx-calendar-controls{display:flex;justify-content:space-between;margin:0 calc(4.7142857143% - 16px)}.mtx-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:.04}.mtx-calendar-period-button{display:inline-block;height:40px;line-height:40px;outline:none;border:0;background:transparent;box-sizing:border-box}.mtx-calendar-previous-button.disabled,.mtx-calendar-next-button.disabled{pointer-events:none}.mtx-calendar-previous-button svg,.mtx-calendar-next-button svg{fill:currentColor;vertical-align:top}[dir=rtl] .mtx-calendar-previous-button svg,[dir=rtl] .mtx-calendar-next-button svg{transform:rotate(180deg)}.mtx-calendar-table{border-spacing:0;border-collapse:collapse;width:100%}.mtx-calendar-table-header th{text-align:center;padding:8px 0}@media all and (orientation: landscape){.mtx-calendar[mode=auto]{display:flex}.mtx-calendar[mode=auto] .mtx-calendar-header{width:150px;min-width:150px;border-radius:4px 0 0 4px}[dir=rtl] .mtx-calendar[mode=auto] .mtx-calendar-header{border-radius:0 4px 4px 0}.mtx-calendar[mode=auto] .mtx-calendar-header-date-time{white-space:normal;word-wrap:break-word}.mtx-calendar[mode=auto] .mtx-calendar-header-time{display:block;padding:0}}\n"]
@@ -938,22 +948,15 @@ MtxCalendar.ctorParameters = () => [
 ];
 /** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
 MtxCalendar.propDecorators = {
-    _userSelection: [{ type: Output }],
     multiYearSelector: [{ type: Input }],
     twelvehour: [{ type: Input }],
     startView: [{ type: Input }],
     timeInterval: [{ type: Input }],
     dateFilter: [{ type: Input }],
-    ariaLabel: [{ type: Input }],
-    ariaNextMonthLabel: [{ type: Input }],
-    ariaPrevMonthLabel: [{ type: Input }],
-    ariaNextYearLabel: [{ type: Input }],
-    ariaPrevYearLabel: [{ type: Input }],
-    ariaNextMultiYearLabel: [{ type: Input }],
-    ariaPrevMultiYearLabel: [{ type: Input }],
     preventSameDateTimeSelection: [{ type: Input }],
     selectedChange: [{ type: Output }],
     viewChanged: [{ type: Output }],
+    _userSelection: [{ type: Output }],
     type: [{ type: Input }],
     startAt: [{ type: Input }],
     selected: [{ type: Input }],
@@ -973,12 +976,14 @@ class MtxClock {
     constructor(_element, _adapter) {
         this._element = _element;
         this._adapter = _adapter;
-        this._userSelection = new EventEmitter();
         this.interval = 1;
         this.twelvehour = false;
         /** Emits when the currently selected date changes. */
         this.selectedChange = new EventEmitter();
+        /** Emits when any date is activated. */
         this.activeDateChange = new EventEmitter();
+        /** Emits when any date is selected. */
+        this._userSelection = new EventEmitter();
         /** Hours and Minutes representing the clock view. */
         this._hours = [];
         this._minutes = [];
@@ -1068,10 +1073,7 @@ class MtxClock {
         this.activeDate = this._activeDate || this._adapter.today();
         this._init();
     }
-    /**
-     * TODO: use `fromEvent` of rxjs.
-     * Handles mousedown events on the clock body.
-     */
+    /** Handles mousedown events on the clock body. */
     _handleMousedown(event) {
         this._timeChanged = false;
         this.setTime(event);
@@ -1211,6 +1213,7 @@ MtxClock.decorators = [
                     'role': 'clock',
                     '(mousedown)': '_handleMousedown($event)',
                 },
+                exportAs: 'mtxClock',
                 encapsulation: ViewEncapsulation.None,
                 styles: [".mtx-clock{position:relative;display:block;min-width:224px;margin:8px;box-sizing:border-box;-webkit-user-select:none;user-select:none}.mtx-clock-wrapper{position:relative;width:100%;height:0;padding-top:100%;border-radius:50%}.mtx-clock-center{position:absolute;top:50%;left:50%;width:2%;height:2%;margin:-1%;border-radius:50%}.mtx-clock-hand{position:absolute;top:0;right:0;bottom:0;left:0;width:1px;margin:0 auto;transform-origin:bottom}.mtx-clock-hand:before{content:\"\";position:absolute;top:-4px;left:-4px;width:8px;height:8px;border-radius:50%}.mtx-clock-hours,.mtx-clock-minutes{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;visibility:hidden;transition:.35s;transform:scale(1.2)}.mtx-clock-hours.active,.mtx-clock-minutes.active{opacity:1;visibility:visible;transform:scale(1)}.mtx-clock-minutes{transform:scale(.8)}.mtx-clock-cell{position:absolute;display:flex;width:14.1666%;height:14.1666%;justify-content:center;box-sizing:border-box;border-radius:50%;align-items:center;cursor:pointer}.mtx-clock-cell.mtx-clock-cell-disabled{pointer-events:none}\n"]
             },] }
@@ -1228,12 +1231,12 @@ MtxClock.ctorParameters = () => [
 ];
 /** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
 MtxClock.propDecorators = {
-    _userSelection: [{ type: Output }],
     dateFilter: [{ type: Input }],
     interval: [{ type: Input }],
     twelvehour: [{ type: Input }],
     selectedChange: [{ type: Output }],
     activeDateChange: [{ type: Output }],
+    _userSelection: [{ type: Output }],
     activeDate: [{ type: Input }],
     selected: [{ type: Input }],
     minDate: [{ type: Input }],
@@ -1243,6 +1246,23 @@ MtxClock.propDecorators = {
 
 /** Used to generate a unique ID for each datetimepicker instance. */
 let datetimepickerUid = 0;
+/** Injection token that determines the scroll handling while the calendar is open. */
+const MTX_DATETIMEPICKER_SCROLL_STRATEGY = new InjectionToken('mtx-datetimepicker-scroll-strategy');
+function MTX_DATETIMEPICKER_SCROLL_STRATEGY_FACTORY(overlay) {
+    return () => overlay.scrollStrategies.reposition();
+}
+const MTX_DATETIMEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER = {
+    provide: MTX_DATETIMEPICKER_SCROLL_STRATEGY,
+    deps: [Overlay],
+    useFactory: MTX_DATETIMEPICKER_SCROLL_STRATEGY_FACTORY,
+};
+// Boilerplate for applying mixins to MtxDatetimepickerContent.
+/** @docs-private */
+const _MtxDatetimepickerContentBase = mixinColor(class {
+    constructor(_elementRef) {
+        this._elementRef = _elementRef;
+    }
+});
 /**
  * Component used as the content for the datetimepicker dialog and popup. We use this instead of
  * using MtxCalendar directly as the content so we can control the initial focus. This also gives us
@@ -1250,30 +1270,60 @@ let datetimepickerUid = 0;
  * future. (e.g. confirmation buttons).
  * @docs-private
  */
-class MtxDatetimepickerContent {
+class MtxDatetimepickerContent extends _MtxDatetimepickerContentBase {
+    constructor(elementRef, _changeDetectorRef) {
+        super(elementRef);
+        this._changeDetectorRef = _changeDetectorRef;
+        /** Emits when an animation has finished. */
+        this._animationDone = new Subject();
+    }
+    ngOnInit() {
+        this._animationState = this.datetimepicker.touchUi ? 'enter-dialog' : 'enter-dropdown';
+    }
     ngAfterContentInit() {
         this._calendar._focusActiveCell();
     }
-    onSelectionChange(date) {
-        this.datetimepicker._select(date);
-        this.datetimepicker.close();
+    _startExitAnimation() {
+        this._animationState = 'void';
+        this._changeDetectorRef.markForCheck();
+    }
+    ngOnDestroy() {
+        this._animationDone.complete();
     }
 }
 /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
 MtxDatetimepickerContent.decorators = [
     { type: Component, args: [{
                 selector: 'mtx-datetimepicker-content',
-                template: "<div cdkTrapFocus\n     class=\"mtx-datetimepicker-content-container\"\n     [attr.mode]=\"datetimepicker.mode\">\n  <mtx-calendar (_userSelection)=\"datetimepicker.close()\"\n                (selectedChange)=\"onSelectionChange($event)\"\n                (viewChanged)=\"datetimepicker._viewChanged($event)\"\n                [ariaNextMonthLabel]=\"datetimepicker.ariaNextMonthLabel\"\n                [ariaNextYearLabel]=\"datetimepicker.ariaNextYearLabel\"\n                [ariaPrevMonthLabel]=\"datetimepicker.ariaPrevMonthLabel\"\n                [ariaPrevYearLabel]=\"datetimepicker.ariaPrevYearLabel\"\n                [preventSameDateTimeSelection]=\"datetimepicker.preventSameDateTimeSelection\"\n                [attr.mode]=\"datetimepicker.mode\"\n                [id]=\"datetimepicker.id\"\n                [maxDate]=\"datetimepicker._maxDate\"\n                [minDate]=\"datetimepicker._minDate\"\n                [dateFilter]=\"datetimepicker._dateFilter\"\n                [selected]=\"datetimepicker._selected\"\n                [multiYearSelector]=\"datetimepicker.multiYearSelector\"\n                [startAt]=\"datetimepicker.startAt\"\n                [startView]=\"datetimepicker.startView\"\n                [timeInterval]=\"datetimepicker.timeInterval\"\n                [twelvehour]=\"datetimepicker.twelvehour\"\n                [type]=\"datetimepicker.type\">\n  </mtx-calendar>\n</div>\n",
+                template: "<div cdkTrapFocus\n     class=\"mtx-datetimepicker-content-container\"\n     [attr.mode]=\"datetimepicker.mode\">\n  <mtx-calendar [id]=\"datetimepicker.id\"\n                [ngClass]=\"datetimepicker.panelClass\"\n                [attr.mode]=\"datetimepicker.mode\"\n                [type]=\"datetimepicker.type\"\n                [startAt]=\"datetimepicker.startAt\"\n                [startView]=\"datetimepicker.startView\"\n                [maxDate]=\"datetimepicker._maxDate\"\n                [minDate]=\"datetimepicker._minDate\"\n                [dateFilter]=\"datetimepicker._dateFilter\"\n                [multiYearSelector]=\"datetimepicker.multiYearSelector\"\n                [preventSameDateTimeSelection]=\"datetimepicker.preventSameDateTimeSelection\"\n                [timeInterval]=\"datetimepicker.timeInterval\"\n                [twelvehour]=\"datetimepicker.twelvehour\"\n                [selected]=\"datetimepicker._selected\"\n                [@fadeInCalendar]=\"'enter'\"\n                (selectedChange)=\"datetimepicker._select($event)\"\n                (viewChanged)=\"datetimepicker._viewChanged($event)\"\n                (_userSelection)=\"datetimepicker.close()\">\n  </mtx-calendar>\n</div>\n",
                 host: {
                     'class': 'mtx-datetimepicker-content',
                     '[class.mtx-datetimepicker-content-touch]': 'datetimepicker?.touchUi',
                     '[attr.mode]': 'datetimepicker.mode',
+                    '[@transformPanel]': '_animationState',
+                    '(@transformPanel.done)': '_animationDone.next()',
                 },
+                animations: [
+                    mtxDatetimepickerAnimations.transformPanel,
+                    mtxDatetimepickerAnimations.fadeInCalendar,
+                ],
                 encapsulation: ViewEncapsulation.None,
                 changeDetection: ChangeDetectionStrategy.OnPush,
+                inputs: ['color'],
                 styles: [".mtx-datetimepicker-content{display:block;border-radius:4px}.mtx-datetimepicker-content-container{display:flex;flex-direction:column;justify-content:space-between}.mtx-datetimepicker-content .mtx-calendar{width:296px;height:404px}.mtx-datetimepicker-content .mtx-calendar[mode=landscape]{width:446px;height:328px}@media all and (orientation: landscape){.mtx-datetimepicker-content .mtx-calendar[mode=auto]{width:446px;height:328px}}.mtx-datetimepicker-content-touch{display:block;max-height:80vh;position:relative;overflow:visible}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container{min-height:300px;max-height:850px;min-width:250px;max-width:750px}.mtx-datetimepicker-content-touch .mtx-calendar{width:100%;height:auto}@media all and (orientation: landscape){.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto],.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape]{width:120vh;height:80vh}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto] .mtx-calendar,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape] .mtx-calendar{width:auto;height:100%}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait]{width:64vh;height:90vh}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait] .mtx-calendar{width:100%;height:auto}}@media all and (orientation: portrait){.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto],.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait]{width:80vw;height:120vw}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto] .mtx-calendar,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait] .mtx-calendar{width:100%;height:auto}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape]{width:90vw;height:64vw}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape] .mtx-calendar{width:auto;height:100%}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container-with-actions{height:135vw}}\n"]
             },] }
 ];
+/**
+ * @type {function(): !Array<(null|{
+ *   type: ?,
+ *   decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
+ * })>}
+ * @nocollapse
+ */
+MtxDatetimepickerContent.ctorParameters = () => [
+    { type: ElementRef },
+    { type: ChangeDetectorRef }
+];
 /** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
 MtxDatetimepickerContent.propDecorators = {
     _calendar: [{ type: ViewChild, args: [MtxCalendar, { static: true },] }]
@@ -1292,10 +1342,6 @@ class MtxDatetimepicker {
         this.startView = 'month';
         this.mode = 'auto';
         this.timeInterval = 1;
-        this.ariaNextMonthLabel = 'Next month';
-        this.ariaPrevMonthLabel = 'Previous month';
-        this.ariaNextYearLabel = 'Next year';
-        this.ariaPrevYearLabel = 'Previous year';
         /** Prevent user to select same date time */
         this.preventSameDateTimeSelection = false;
         /**
@@ -1309,8 +1355,7 @@ class MtxDatetimepicker {
         this.closedStream = new EventEmitter();
         /** Emits when the view has been changed. */
         this.viewChanged = new EventEmitter();
-        /** Whether the calendar is open. */
-        this.opened = false;
+        this._opened = false;
         /** The id for the datetimepicker calendar. */
         this.id = `mtx-datetimepicker-${datetimepickerUid++}`;
         /** Emits when the datetimepicker is disabled. */
@@ -1323,6 +1368,11 @@ class MtxDatetimepicker {
         this._inputStateChanges = Subscription.EMPTY;
         this._type = 'date';
         this._touchUi = false;
+        /** Preferred position of the datetimepicker in the X axis. */
+        this.xPosition = 'start';
+        /** Preferred position of the datetimepicker in the Y axis. */
+        this.yPosition = 'below';
+        this._restoreFocus = true;
         if (!this._dateAdapter) {
             throw createMissingDateImplError('DateAdapter');
         }
@@ -1341,21 +1391,40 @@ class MtxDatetimepicker {
     set twelvehour(value) {
         this._twelvehour = coerceBooleanProperty(value);
     }
+    /**
+     * Classes to be passed to the date picker panel.
+     * Supports string and string array values, similar to `ngClass`.
+     */
+    get panelClass() {
+        return this._panelClass;
+    }
+    set panelClass(value) {
+        this._panelClass = coerceStringArray(value);
+    }
+    /** Whether the calendar is open. */
+    get opened() {
+        return this._opened;
+    }
+    set opened(value) {
+        coerceBooleanProperty(value) ? this.open() : this.close();
+    }
+    /** Color palette to use on the datetimepicker's calendar. */
+    get color() {
+        return (this._color ||
+            (this.datetimepickerInput ? this.datetimepickerInput.getThemePalette() : undefined));
+    }
+    set color(value) {
+        this._color = value;
+    }
     /** The date to open the calendar to initially. */
     get startAt() {
         // If an explicit startAt is set we start there, otherwise we start at whatever the currently
         // selected value is.
-        return this._startAt || (this._datetimepickerInput ? this._datetimepickerInput.value : null);
+        return this._startAt || (this.datetimepickerInput ? this.datetimepickerInput.value : null);
     }
     set startAt(date) {
         this._startAt = this._dateAdapter.getValidDateOrNull(date);
     }
-    get openOnFocus() {
-        return this._openOnFocus;
-    }
-    set openOnFocus(value) {
-        this._openOnFocus = coerceBooleanProperty(value);
-    }
     get type() {
         return this._type;
     }
@@ -1374,8 +1443,8 @@ class MtxDatetimepicker {
     }
     /** Whether the datetimepicker pop-up should be disabled. */
     get disabled() {
-        return this._disabled === undefined && this._datetimepickerInput
-            ? this._datetimepickerInput.disabled
+        return this._disabled === undefined && this.datetimepickerInput
+            ? this.datetimepickerInput.disabled
             : !!this._disabled;
     }
     set disabled(value) {
@@ -1385,6 +1454,17 @@ class MtxDatetimepicker {
             this._disabledChange.next(newValue);
         }
     }
+    /**
+     * Whether to restore focus to the previously-focused element when the panel is closed.
+     * Note that automatic focus restoration is an accessibility feature and it is recommended that
+     * you provide your own equivalent, if you decide to turn it off.
+     */
+    get restoreFocus() {
+        return this._restoreFocus;
+    }
+    set restoreFocus(value) {
+        this._restoreFocus = coerceBooleanProperty(value);
+    }
     /** The currently selected date. */
     get _selected() {
         return this._validSelected;
@@ -1394,14 +1474,14 @@ class MtxDatetimepicker {
     }
     /** The minimum selectable date. */
     get _minDate() {
-        return this._datetimepickerInput && this._datetimepickerInput.min;
+        return this.datetimepickerInput && this.datetimepickerInput.min;
     }
     /** The maximum selectable date. */
     get _maxDate() {
-        return this._datetimepickerInput && this._datetimepickerInput.max;
+        return this.datetimepickerInput && this.datetimepickerInput.max;
     }
     get _dateFilter() {
-        return this._datetimepickerInput && this._datetimepickerInput._dateFilter;
+        return this.datetimepickerInput && this.datetimepickerInput._dateFilter;
     }
     _viewChanged(type) {
         this.viewChanged.emit(type);
@@ -1412,10 +1492,7 @@ class MtxDatetimepicker {
         this._inputStateChanges.unsubscribe();
         this._disabledChange.complete();
     }
-    /**
-     * TODO: use model
-     * Selects the given date
-     */
+    /** Selects the given date */
     _select(date) {
         const oldValue = this._selected;
         this._selected = date;
@@ -1428,28 +1505,28 @@ class MtxDatetimepicker {
      * @param input The datetimepicker input to register with this datetimepicker.
      */
     _registerInput(input) {
-        if (this._datetimepickerInput) {
+        if (this.datetimepickerInput) {
             throw Error('A MtxDatetimepicker can only be associated with a single input.');
         }
-        this._datetimepickerInput = input;
-        this._inputStateChanges = this._datetimepickerInput._valueChange.subscribe((value) => (this._selected = value));
+        this.datetimepickerInput = input;
+        this._inputStateChanges = this.datetimepickerInput._valueChange.subscribe((value) => (this._selected = value));
     }
     /** Open the calendar. */
     open() {
-        if (this.opened || this.disabled) {
+        if (this._opened || this.disabled) {
             return;
         }
-        if (!this._datetimepickerInput) {
+        if (!this.datetimepickerInput) {
             throw Error('Attempted to open an MtxDatetimepicker with no associated input.');
         }
         this._focusedElementBeforeOpen = _getFocusedElementPierceShadowDom();
         this._openOverlay();
-        this.opened = true;
+        this._opened = true;
         this.openedStream.emit();
     }
     /** Close the calendar. */
     close() {
-        if (!this.opened) {
+        if (!this._opened) {
             return;
         }
         if (this._componentRef) {
@@ -1458,13 +1535,14 @@ class MtxDatetimepicker {
         const completeClose = () => {
             // The `_opened` could've been reset already if
             // we got two events in quick succession.
-            if (this.opened) {
-                this.opened = false;
+            if (this._opened) {
+                this._opened = false;
                 this.closedStream.emit();
                 this._focusedElementBeforeOpen = null;
             }
         };
-        if (this._focusedElementBeforeOpen &&
+        if (this._restoreFocus &&
+            this._focusedElementBeforeOpen &&
             typeof this._focusedElementBeforeOpen.focus === 'function') {
             // Because IE moves focus asynchronously, we can't count on it being restored before we've
             // marked the datetimepicker as closed. If the event fires out of sequence and the element
@@ -1479,18 +1557,18 @@ class MtxDatetimepicker {
         }
     }
     /**
-     * TODO: add datetimepicker color
      * Forwards relevant values from the datetimepicker to the
      * datetimepicker content inside the overlay.
      */
     _forwardContentValues(instance) {
         instance.datetimepicker = this;
+        instance.color = this.color;
     }
     /** Opens the overlay with the calendar. */
     _openOverlay() {
         this._destroyOverlay();
         const isDialog = this.touchUi;
-        const labelId = this._datetimepickerInput.getOverlayLabelId();
+        const labelId = this.datetimepickerInput.getOverlayLabelId();
         const portal = new ComponentPortal(MtxDatetimepickerContent, this._viewContainerRef);
         const overlayRef = (this._overlayRef = this._overlay.create(new OverlayConfig({
             positionStrategy: isDialog ? this._getDialogStrategy() : this._getDropdownStrategy(),
@@ -1539,7 +1617,7 @@ class MtxDatetimepicker {
     _getDropdownStrategy() {
         const strategy = this._overlay
             .position()
-            .flexibleConnectedTo(this._datetimepickerInput.getConnectedOverlayOrigin())
+            .flexibleConnectedTo(this.datetimepickerInput.getConnectedOverlayOrigin())
             .withTransformOriginOn('.mtx-datetimepicker-content')
             .withFlexibleDimensions(false)
             .withViewportMargin(8)
@@ -1547,34 +1625,37 @@ class MtxDatetimepicker {
         return this._setConnectedPositions(strategy);
     }
     /**
-     * TODO: `xPosition` and `yPosition`
      * Sets the positions of the datetimepicker in dropdown mode based on the current configuration.
      */
     _setConnectedPositions(strategy) {
+        const primaryX = this.xPosition === 'end' ? 'end' : 'start';
+        const secondaryX = primaryX === 'start' ? 'end' : 'start';
+        const primaryY = this.yPosition === 'above' ? 'bottom' : 'top';
+        const secondaryY = primaryY === 'top' ? 'bottom' : 'top';
         return strategy.withPositions([
             {
-                originX: 'start',
-                originY: 'bottom',
-                overlayX: 'start',
-                overlayY: 'top',
+                originX: primaryX,
+                originY: secondaryY,
+                overlayX: primaryX,
+                overlayY: primaryY,
             },
             {
-                originX: 'start',
-                originY: 'top',
-                overlayX: 'start',
-                overlayY: 'bottom',
+                originX: primaryX,
+                originY: primaryY,
+                overlayX: primaryX,
+                overlayY: secondaryY,
             },
             {
-                originX: 'end',
-                originY: 'bottom',
-                overlayX: 'end',
-                overlayY: 'top',
+                originX: secondaryX,
+                originY: secondaryY,
+                overlayX: secondaryX,
+                overlayY: primaryY,
             },
             {
-                originX: 'end',
-                originY: 'top',
-                overlayX: 'end',
-                overlayY: 'bottom',
+                originX: secondaryX,
+                originY: primaryY,
+                overlayX: secondaryX,
+                overlayY: secondaryY,
             },
         ]);
     }
@@ -1583,7 +1664,7 @@ class MtxDatetimepicker {
         return merge(overlayRef.backdropClick(), overlayRef.detachments(), overlayRef.keydownEvents().pipe(filter(event => {
             // Closing on alt + up is only valid when there's an input associated with the datetimepicker.
             return ((event.keyCode === ESCAPE && !hasModifierKey(event)) ||
-                (this._datetimepickerInput &&
+                (this.datetimepickerInput &&
                     hasModifierKey(event, 'altKey') &&
                     event.keyCode === UP_ARROW));
         })));
@@ -1611,7 +1692,7 @@ MtxDatetimepicker.ctorParameters = () => [
     { type: Overlay },
     { type: NgZone },
     { type: ViewContainerRef },
-    { type: undefined, decorators: [{ type: Inject, args: [MAT_DATEPICKER_SCROLL_STRATEGY,] }] },
+    { type: undefined, decorators: [{ type: Inject, args: [MTX_DATETIMEPICKER_SCROLL_STRATEGY,] }] },
     { type: DatetimeAdapter, decorators: [{ type: Optional }] },
     { type: Directionality, decorators: [{ type: Optional }] }
 ];
@@ -1622,21 +1703,21 @@ MtxDatetimepicker.propDecorators = {
     startView: [{ type: Input }],
     mode: [{ type: Input }],
     timeInterval: [{ type: Input }],
-    ariaNextMonthLabel: [{ type: Input }],
-    ariaPrevMonthLabel: [{ type: Input }],
-    ariaNextYearLabel: [{ type: Input }],
-    ariaPrevYearLabel: [{ type: Input }],
     preventSameDateTimeSelection: [{ type: Input }],
     selectedChanged: [{ type: Output }],
-    panelClass: [{ type: Input }],
     openedStream: [{ type: Output, args: ['opened',] }],
     closedStream: [{ type: Output, args: ['closed',] }],
     viewChanged: [{ type: Output }],
+    panelClass: [{ type: Input }],
+    opened: [{ type: Input }],
+    color: [{ type: Input }],
     startAt: [{ type: Input }],
-    openOnFocus: [{ type: Input }],
     type: [{ type: Input }],
     touchUi: [{ type: Input }],
-    disabled: [{ type: Input }]
+    disabled: [{ type: Input }],
+    xPosition: [{ type: Input }],
+    yPosition: [{ type: Input }],
+    restoreFocus: [{ type: Input }]
 };
 
 const MAT_DATETIMEPICKER_VALUE_ACCESSOR = {
@@ -1911,6 +1992,10 @@ class MtxDatetimepickerInput {
             ? this._dateAdapter.format(value, this.getDisplayFormat())
             : '';
     }
+    /** Returns the palette used by the input's form field, if any. */
+    getThemePalette() {
+        return this._formField ? this._formField.color : undefined;
+    }
 }
 /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
 MtxDatetimepickerInput.decorators = [
@@ -1960,6 +2045,15 @@ MtxDatetimepickerInput.propDecorators = {
     disabled: [{ type: Input }]
 };
 
+/** Can be used to override the icon of a `mtxDatetimepickerToggle`. */
+class MtxDatetimepickerToggleIcon {
+}
+/** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
+MtxDatetimepickerToggleIcon.decorators = [
+    { type: Directive, args: [{
+                selector: '[mtxDatetimepickerToggleIcon]',
+            },] }
+];
 class MtxDatetimepickerToggle {
     constructor(_intl, _changeDetectorRef) {
         this._intl = _intl;
@@ -1994,8 +2088,8 @@ class MtxDatetimepickerToggle {
         const datetimepickerDisabled = this.datetimepicker
             ? this.datetimepicker._disabledChange
             : of();
-        const inputDisabled = this.datetimepicker && this.datetimepicker._datetimepickerInput
-            ? this.datetimepicker._datetimepickerInput._disabledChange
+        const inputDisabled = this.datetimepicker && this.datetimepicker.datetimepickerInput
+            ? this.datetimepicker.datetimepickerInput._disabledChange
             : of();
         this._stateChanges.unsubscribe();
         this._stateChanges = merge([
@@ -2009,14 +2103,22 @@ class MtxDatetimepickerToggle {
 MtxDatetimepickerToggle.decorators = [
     { type: Component, args: [{
                 selector: 'mtx-datetimepicker-toggle',
-                template: "<button (click)=\"_open($event)\" [attr.aria-label]=\"_intl.openCalendarLabel\" [disabled]=\"disabled\"\n        mat-icon-button type=\"button\">\n  <mat-icon [ngSwitch]=\"datetimepicker.type\">\n    <svg *ngSwitchCase=\"'time'\" fill=\"currentColor\" focusable=\"false\" height=\"100%\"\n         style=\"vertical-align: top;\"\n         viewBox=\"0 0 24 24\" width=\"100%\">\n      <path d=\"M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z\">\n      </path>\n    </svg>\n    <svg *ngSwitchCase=\"'datetime'\" fill=\"currentColor\" focusable=\"false\" height=\"100%\"\n         style=\"vertical-align: top;\"\n         viewBox=\"0 0 24 24\" width=\"100%\">\n      <path d=\"M15,13H16.5V15.82L18.94,17.23L18.19,18.53L15,16.69V13M19,8H5V19H9.67C9.24,18.09 9,17.07 9,16A7,7 0 0,1 16,9C17.07,9 18.09,9.24 19,9.67V8M5,21C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H6V1H8V3H16V1H18V3H19A2,2 0 0,1 21,5V11.1C22.24,12.36 23,14.09 23,16A7,7 0 0,1 16,23C14.09,23 12.36,22.24 11.1,21H5M16,11.15A4.85,4.85 0 0,0 11.15,16C11.15,18.68 13.32,20.85 16,20.85A4.85,4.85 0 0,0 20.85,16C20.85,13.32 18.68,11.15 16,11.15Z\">\n      </path>\n    </svg>\n    <svg *ngSwitchDefault fill=\"currentColor\" focusable=\"false\" height=\"100%\"\n         style=\"vertical-align: top;\"\n         viewBox=\"0 0 24 24\" width=\"100%\">\n      <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n      <path d=\"M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z\" />\n    </svg>\n  </mat-icon>\n</button>\n",
+                template: "<button #button\n        mat-icon-button\n        type=\"button\"\n        [attr.aria-haspopup]=\"datetimepicker ? 'dialog' : null\"\n        [attr.aria-label]=\"_intl.openCalendarLabel\"\n        [attr.tabindex]=\"disabled ? -1 : tabIndex\"\n        [disabled]=\"disabled\"\n        [disableRipple]=\"disableRipple\"\n        (click)=\"_open($event)\">\n\n  <ng-container *ngIf=\"!_customIcon\" [ngSwitch]=\"datetimepicker.type\">\n    <svg *ngSwitchCase=\"'time'\"\n         class=\"mtx-datetimepicker-toggle-default-icon\"\n         viewBox=\"0 0 24 24\"\n         width=\"24px\"\n         height=\"24px\"\n         fill=\"currentColor\"\n         focusable=\"false\">\n      <path\n            d=\"M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z\">\n      </path>\n    </svg>\n    <svg *ngSwitchCase=\"'datetime'\"\n         class=\"mtx-datetimepicker-toggle-default-icon\"\n         viewBox=\"0 0 24 24\"\n         width=\"24px\"\n         height=\"24px\"\n         fill=\"currentColor\"\n         focusable=\"false\">\n      <path\n            d=\"M15,13H16.5V15.82L18.94,17.23L18.19,18.53L15,16.69V13M19,8H5V19H9.67C9.24,18.09 9,17.07 9,16A7,7 0 0,1 16,9C17.07,9 18.09,9.24 19,9.67V8M5,21C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H6V1H8V3H16V1H18V3H19A2,2 0 0,1 21,5V11.1C22.24,12.36 23,14.09 23,16A7,7 0 0,1 16,23C14.09,23 12.36,22.24 11.1,21H5M16,11.15A4.85,4.85 0 0,0 11.15,16C11.15,18.68 13.32,20.85 16,20.85A4.85,4.85 0 0,0 20.85,16C20.85,13.32 18.68,11.15 16,11.15Z\">\n      </path>\n    </svg>\n    <svg *ngSwitchDefault\n         class=\"mtx-datetimepicker-toggle-default-icon\"\n         viewBox=\"0 0 24 24\"\n         width=\"24px\"\n         height=\"24px\"\n         fill=\"currentColor\"\n         focusable=\"false\">\n      <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n      <path\n            d=\"M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z\" />\n    </svg>\n  </ng-container>\n\n  <ng-content select=\"[mtxDatetimepickerToggleIcon]\"></ng-content>\n</button>\n",
                 host: {
-                    class: 'mtx-datetimepicker-toggle',
+                    'class': 'mtx-datetimepicker-toggle',
+                    // Always set the tabindex to -1 so that it doesn't overlap with any custom tabindex the
+                    // consumer may have provided, while still being able to receive focus.
+                    '[attr.tabindex]': 'disabled ? null : -1',
+                    '[class.mtx-datetimepicker-toggle-active]': 'datetimepicker && datetimepicker.opened',
+                    '[class.mat-accent]': 'datetimepicker && datetimepicker.color === "accent"',
+                    '[class.mat-warn]': 'datetimepicker && datetimepicker.color === "warn"',
+                    '(focus)': '_button.focus()',
                 },
                 exportAs: 'mtxDatetimepickerToggle',
                 encapsulation: ViewEncapsulation.None,
                 preserveWhitespaces: false,
-                changeDetection: ChangeDetectionStrategy.OnPush
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [".mat-form-field-appearance-legacy .mat-form-field-prefix .mtx-datetimepicker-toggle-default-icon,.mat-form-field-appearance-legacy .mat-form-field-suffix .mtx-datetimepicker-toggle-default-icon{width:1em}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mtx-datetimepicker-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mtx-datetimepicker-toggle-default-icon{display:block;width:1.5em;height:1.5em}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button .mtx-datetimepicker-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button .mtx-datetimepicker-toggle-default-icon{margin:auto}\n"]
             },] }
 ];
 /**
@@ -2033,7 +2135,11 @@ MtxDatetimepickerToggle.ctorParameters = () => [
 /** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
 MtxDatetimepickerToggle.propDecorators = {
     datetimepicker: [{ type: Input, args: ['for',] }],
-    disabled: [{ type: Input }]
+    tabIndex: [{ type: Input }],
+    disabled: [{ type: Input }],
+    disableRipple: [{ type: Input }],
+    _customIcon: [{ type: ContentChild, args: [MtxDatetimepickerToggleIcon,] }],
+    _button: [{ type: ViewChild, args: ['button',] }]
 };
 
 const DAYS_PER_WEEK = 7;
@@ -2046,9 +2152,10 @@ class MtxMonthView {
         this._adapter = _adapter;
         this._dateFormats = _dateFormats;
         this.type = 'date';
-        this._userSelection = new EventEmitter();
         /** Emits when a new date is selected. */
         this.selectedChange = new EventEmitter();
+        /** Emits when any date is selected. */
+        this._userSelection = new EventEmitter();
         if (!this._adapter) {
             throw createMissingDateImplError('DatetimeAdapter');
         }
@@ -2153,7 +2260,8 @@ MtxMonthView.decorators = [
     { type: Component, args: [{
                 selector: 'mtx-month-view',
                 template: "<table class=\"mtx-calendar-table\" role=\"grid\">\n  <thead class=\"mtx-calendar-table-header\">\n    <tr>\n      <th *ngFor=\"let day of _weekdays\" [attr.aria-label]=\"day.long\">{{day.narrow}}</th>\n    </tr>\n  </thead>\n  <tbody mtx-calendar-body\n         (@slideCalendar.done)=\"_calendarStateDone()\"\n         [@slideCalendar]=\"_calendarState\"\n         [rows]=\"_weeks\"\n         [todayValue]=\"_todayDate!\"\n         [activeCell]=\"_adapter.getDate(activeDate) - 1\"\n         [selectedValue]=\"_selectedDate!\"\n         (selectedValueChange)=\"_dateSelected($event)\"></tbody>\n</table>\n",
-                animations: [slideCalendar],
+                exportAs: 'mtxMonthView',
+                animations: [mtxDatetimepickerAnimations.slideCalendar],
                 encapsulation: ViewEncapsulation.None,
                 changeDetection: ChangeDetectionStrategy.OnPush
             },] }
@@ -2172,9 +2280,9 @@ MtxMonthView.ctorParameters = () => [
 /** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
 MtxMonthView.propDecorators = {
     type: [{ type: Input }],
-    _userSelection: [{ type: Output }],
     dateFilter: [{ type: Input }],
     selectedChange: [{ type: Output }],
+    _userSelection: [{ type: Output }],
     activeDate: [{ type: Input }],
     selected: [{ type: Input }]
 };
@@ -2187,10 +2295,11 @@ class MtxYearView {
     constructor(_adapter, _dateFormats) {
         this._adapter = _adapter;
         this._dateFormats = _dateFormats;
-        this._userSelection = new EventEmitter();
         this.type = 'date';
         /** Emits when a new month is selected. */
         this.selectedChange = new EventEmitter();
+        /** Emits when any date is selected. */
+        this._userSelection = new EventEmitter();
         if (!this._adapter) {
             throw createMissingDateImplError('DatetimeAdapter');
         }
@@ -2287,7 +2396,8 @@ MtxYearView.decorators = [
     { type: Component, args: [{
                 selector: 'mtx-year-view',
                 template: "<table class=\"mtx-calendar-table\" role=\"grid\">\n  <thead class=\"mtx-calendar-table-header\"></thead>\n  <tbody mtx-calendar-body\n         (@slideCalendar.done)=\"_calendarStateDone()\"\n         [@slideCalendar]=\"_calendarState\"\n         [label]=\"_yearLabel\"\n         [rows]=\"_months\"\n         [todayValue]=\"_todayMonth!\"\n         [labelMinRequiredCells]=\"2\"\n         [numCols]=\"4\"\n         [activeCell]=\"_adapter.getMonth(activeDate)\"\n         [selectedValue]=\"_selectedMonth!\"\n         (selectedValueChange)=\"_monthSelected($event)\"\n         [allowDisabledSelection]=\"true\"></tbody>\n</table>\n",
-                animations: [slideCalendar],
+                exportAs: 'mtxYearView',
+                animations: [mtxDatetimepickerAnimations.slideCalendar],
                 encapsulation: ViewEncapsulation.None,
                 changeDetection: ChangeDetectionStrategy.OnPush
             },] }
@@ -2305,10 +2415,10 @@ MtxYearView.ctorParameters = () => [
 ];
 /** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
 MtxYearView.propDecorators = {
-    _userSelection: [{ type: Output }],
     type: [{ type: Input }],
     dateFilter: [{ type: Input }],
     selectedChange: [{ type: Output }],
+    _userSelection: [{ type: Output }],
     activeDate: [{ type: Input }],
     selected: [{ type: Input }]
 };
@@ -2318,14 +2428,14 @@ class MtxDatetimepickerModule {
 /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
 MtxDatetimepickerModule.decorators = [
     { type: NgModule, args: [{
-                imports: [CommonModule, MatButtonModule, MatIconModule, OverlayModule, A11yModule],
-                entryComponents: [MtxDatetimepickerContent],
+                imports: [CommonModule, MatButtonModule, OverlayModule, A11yModule, PortalModule],
                 declarations: [
                     MtxCalendar,
                     MtxCalendarBody,
                     MtxClock,
                     MtxDatetimepicker,
                     MtxDatetimepickerToggle,
+                    MtxDatetimepickerToggleIcon,
                     MtxDatetimepickerInput,
                     MtxDatetimepickerContent,
                     MtxMonthView,
@@ -2338,12 +2448,15 @@ MtxDatetimepickerModule.decorators = [
                     MtxClock,
                     MtxDatetimepicker,
                     MtxDatetimepickerToggle,
+                    MtxDatetimepickerToggleIcon,
                     MtxDatetimepickerInput,
                     MtxDatetimepickerContent,
                     MtxMonthView,
                     MtxYearView,
                     MtxMultiYearView,
                 ],
+                providers: [MTX_DATETIMEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER],
+                entryComponents: [MtxDatetimepickerContent],
             },] }
 ];
 
@@ -2351,5 +2464,5 @@ MtxDatetimepickerModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { CLOCK_INNER_RADIUS, CLOCK_OUTER_RADIUS, CLOCK_RADIUS, CLOCK_TICK_RADIUS, MAT_DATETIMEPICKER_VALIDATORS, MAT_DATETIMEPICKER_VALUE_ACCESSOR, MtxCalendar, MtxCalendarBody, MtxCalendarCell, MtxClock, MtxDatetimepicker, MtxDatetimepickerContent, MtxDatetimepickerFilterType, MtxDatetimepickerInput, MtxDatetimepickerInputEvent, MtxDatetimepickerModule, MtxDatetimepickerToggle, MtxMonthView, MtxYearView, slideCalendar as ɵa, MtxMultiYearView as ɵb };
+export { CLOCK_INNER_RADIUS, CLOCK_OUTER_RADIUS, CLOCK_RADIUS, CLOCK_TICK_RADIUS, MAT_DATETIMEPICKER_VALIDATORS, MAT_DATETIMEPICKER_VALUE_ACCESSOR, MTX_DATETIMEPICKER_SCROLL_STRATEGY, MTX_DATETIMEPICKER_SCROLL_STRATEGY_FACTORY, MTX_DATETIMEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER, MtxCalendar, MtxCalendarBody, MtxCalendarCell, MtxClock, MtxDatetimepicker, MtxDatetimepickerContent, MtxDatetimepickerFilterType, MtxDatetimepickerInput, MtxDatetimepickerInputEvent, MtxDatetimepickerModule, MtxDatetimepickerToggle, MtxDatetimepickerToggleIcon, MtxMonthView, MtxMultiYearView, MtxYearView, getActiveOffset, isSameMultiYearView, mtxDatetimepickerAnimations, yearsPerPage, yearsPerRow };
 //# sourceMappingURL=mtxDatetimepicker.js.map