@ng-matero/extensions 12.5.3 → 12.7.1

package/bundles/mtxDatetimepicker.umd.js

@@ -1,37 +1,51 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/cdk/a11y'), require('@angular/cdk/overlay'), require('@angular/common'), require('@angular/core'), require('@angular/material/button'), require('@angular/material/icon'), require('@angular/cdk/keycodes'), require('@angular/cdk/coercion'), require('@angular/material/datepicker'), require('rxjs/operators'), require('@ng-matero/extensions/core'), require('@angular/animations'), require('@angular/cdk/bidi'), require('@angular/cdk/portal'), require('rxjs'), require('@angular/cdk/platform'), require('@angular/forms'), require('@angular/material/input'), require('@angular/material/form-field')) :
-    typeof define === 'function' && define.amd ? define('@ng-matero/extensions/datetimepicker', ['exports', '@angular/cdk/a11y', '@angular/cdk/overlay', '@angular/common', '@angular/core', '@angular/material/button', '@angular/material/icon', '@angular/cdk/keycodes', '@angular/cdk/coercion', '@angular/material/datepicker', 'rxjs/operators', '@ng-matero/extensions/core', '@angular/animations', '@angular/cdk/bidi', '@angular/cdk/portal', 'rxjs', '@angular/cdk/platform', '@angular/forms', '@angular/material/input', '@angular/material/form-field'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["ng-matero"] = global["ng-matero"] || {}, global["ng-matero"].extensions = global["ng-matero"].extensions || {}, global["ng-matero"].extensions.datetimepicker = {}), global.ng.cdk.a11y, global.ng.cdk.overlay, global.ng.common, global.ng.core, global.ng.material.button, global.ng.material.icon, global.ng.cdk.keycodes, global.ng.cdk.coercion, global.ng.material.datepicker, global.rxjs.operators, global["ng-matero"].extensions.core, global.ng.animations, global.ng.cdk.bidi, global.ng.cdk.portal, global.rxjs, global.ng.cdk.platform, global.ng.forms, global.ng.material.input, global.ng.material.formField));
-})(this, (function (exports, a11y, overlay, common, core, button, icon, keycodes, coercion, datepicker, operators, core$1, animations, bidi, portal, rxjs, platform, forms, input, formField) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/cdk/a11y'), require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('@angular/common'), require('@angular/core'), require('@angular/material/button'), require('@angular/cdk/keycodes'), require('@angular/cdk/coercion'), require('@angular/material/datepicker'), require('rxjs/operators'), require('@ng-matero/extensions/core'), require('@angular/animations'), require('@angular/cdk/bidi'), require('@angular/cdk/platform'), require('@angular/material/core'), require('rxjs'), require('@angular/forms'), require('@angular/material/input'), require('@angular/material/form-field')) :
+    typeof define === 'function' && define.amd ? define('@ng-matero/extensions/datetimepicker', ['exports', '@angular/cdk/a11y', '@angular/cdk/overlay', '@angular/cdk/portal', '@angular/common', '@angular/core', '@angular/material/button', '@angular/cdk/keycodes', '@angular/cdk/coercion', '@angular/material/datepicker', 'rxjs/operators', '@ng-matero/extensions/core', '@angular/animations', '@angular/cdk/bidi', '@angular/cdk/platform', '@angular/material/core', 'rxjs', '@angular/forms', '@angular/material/input', '@angular/material/form-field'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["ng-matero"] = global["ng-matero"] || {}, global["ng-matero"].extensions = global["ng-matero"].extensions || {}, global["ng-matero"].extensions.datetimepicker = {}), global.ng.cdk.a11y, global.ng.cdk.overlay, global.ng.cdk.portal, global.ng.common, global.ng.core, global.ng.material.button, global.ng.cdk.keycodes, global.ng.cdk.coercion, global.ng.material.datepicker, global.rxjs.operators, global["ng-matero"].extensions.core, global.ng.animations, global.ng.cdk.bidi, global.ng.cdk.platform, global.ng.material.core, global.rxjs, global.ng.forms, global.ng.material.input, global.ng.material.formField));
+})(this, (function (exports, a11y, overlay, portal, common, core, button, keycodes, coercion, datepicker, operators, core$1, animations, bidi, platform, core$2, rxjs, forms, input, formField) { 'use strict';
 
     /**
-     * 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
      */
-    var fadeInContent = animations.trigger('fadeInContent', [
-        animations.state('showing', animations.style({ opacity: 1 })),
-        animations.transition('void => showing', [
-            animations.style({ opacity: 0 }),
-            animations.animate("150ms 100ms cubic-bezier(0.55, 0, 0.55, 0.2)"),
+    var mtxDatetimepickerAnimations = {
+        /** Transforms the height of the datepicker's calendar. */
+        transformPanel: animations.trigger('transformPanel', [
+            animations.transition('void => enter-dropdown', animations.animate('120ms cubic-bezier(0, 0, 0.2, 1)', animations.keyframes([
+                animations.style({ opacity: 0, transform: 'scale(1, 0.8)' }),
+                animations.style({ opacity: 1, transform: 'scale(1, 1)' }),
+            ]))),
+            animations.transition('void => enter-dialog', animations.animate('150ms cubic-bezier(0, 0, 0.2, 1)', animations.keyframes([
+                animations.style({ opacity: 0, transform: 'scale(0.7)' }),
+                animations.style({ transform: 'none', opacity: 1 }),
+            ]))),
+            animations.transition('* => void', animations.animate('100ms linear', animations.style({ opacity: 0 }))),
         ]),
-    ]);
-    var slideCalendar = animations.trigger('slideCalendar', [
-        animations.transition('* => left', [
-            animations.animate(180, animations.keyframes([
-                animations.style({ transform: 'translateX(100%)', offset: 0.5 }),
-                animations.style({ transform: 'translateX(-100%)', offset: 0.51 }),
-                animations.style({ transform: 'translateX(0)', offset: 1 }),
-            ])),
+        /** Fades in the content of the calendar. */
+        fadeInCalendar: animations.trigger('fadeInCalendar', [
+            animations.state('void', animations.style({ opacity: 0 })),
+            animations.state('enter', animations.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.
+            animations.transition('void => *', animations.animate('120ms 100ms cubic-bezier(0.55, 0, 0.55, 0.2)')),
         ]),
-        animations.transition('* => right', [
-            animations.animate(180, animations.keyframes([
-                animations.style({ transform: 'translateX(-100%)', offset: 0.5 }),
-                animations.style({ transform: 'translateX(100%)', offset: 0.51 }),
-                animations.style({ transform: 'translateX(0)', offset: 1 }),
-            ])),
+        slideCalendar: animations.trigger('slideCalendar', [
+            animations.transition('* => left', [
+                animations.animate(180, animations.keyframes([
+                    animations.style({ transform: 'translateX(100%)', offset: 0.5 }),
+                    animations.style({ transform: 'translateX(-100%)', offset: 0.51 }),
+                    animations.style({ transform: 'translateX(0)', offset: 1 }),
+                ])),
+            ]),
+            animations.transition('* => right', [
+                animations.animate(180, animations.keyframes([
+                    animations.style({ transform: 'translateX(-100%)', offset: 0.5 }),
+                    animations.style({ transform: 'translateX(100%)', offset: 0.51 }),
+                    animations.style({ transform: 'translateX(0)', offset: 1 }),
+                ])),
+            ]),
         ]),
-    ]);
+    };
 
     /** @docs-private */
     function createMissingDateImplError(provider) {
@@ -109,6 +123,7 @@
                     host: {
                         class: 'mtx-calendar-body',
                     },
+                    exportAs: 'mtxCalendarBody',
                     encapsulation: core.ViewEncapsulation.None,
                     changeDetection: core.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"]
@@ -137,10 +152,11 @@
         function MtxMultiYearView(_adapter, _dateFormats) {
             this._adapter = _adapter;
             this._dateFormats = _dateFormats;
-            this._userSelection = new core.EventEmitter();
             this.type = 'date';
             /** Emits when a new month is selected. */
             this.selectedChange = new core.EventEmitter();
+            /** Emits when any date is selected. */
+            this._userSelection = new core.EventEmitter();
             if (!this._adapter) {
                 throw createMissingDateImplError('DatetimeAdapter');
             }
@@ -290,7 +306,8 @@
         { type: core.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: core.ViewEncapsulation.None,
                     changeDetection: core.ChangeDetectionStrategy.OnPush
                 },] }
@@ -308,10 +325,10 @@
     ]; };
     /** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
     MtxMultiYearView.propDecorators = {
-        _userSelection: [{ type: core.Output }],
         type: [{ type: core.Input }],
         dateFilter: [{ type: core.Input }],
         selectedChange: [{ type: core.Output }],
+        _userSelection: [{ type: core.Output }],
         activeDate: [{ type: core.Input }],
         selected: [{ type: core.Input }],
         minDate: [{ type: core.Input }],
@@ -365,25 +382,18 @@
             this._ngZone = _ngZone;
             this._adapter = _adapter;
             this._dateFormats = _dateFormats;
-            this._userSelection = new core.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 core.EventEmitter();
             /** Emits when the view has been changed. */
             this.viewChanged = new core.EventEmitter();
+            this._userSelection = new core.EventEmitter();
             this._clockView = 'hour';
             this._type = 'date';
             /** Date filter for the month and year views. */
@@ -582,11 +592,11 @@
             get: function () {
                 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 '';
                 }
@@ -598,11 +608,11 @@
             get: function () {
                 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 '';
                 }
@@ -985,14 +995,14 @@
     MtxCalendar.decorators = [
         { type: core.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: core.ViewEncapsulation.None,
                     changeDetection: core.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"]
@@ -1015,22 +1025,15 @@
     ]; };
     /** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
     MtxCalendar.propDecorators = {
-        _userSelection: [{ type: core.Output }],
         multiYearSelector: [{ type: core.Input }],
         twelvehour: [{ type: core.Input }],
         startView: [{ type: core.Input }],
         timeInterval: [{ type: core.Input }],
         dateFilter: [{ type: core.Input }],
-        ariaLabel: [{ type: core.Input }],
-        ariaNextMonthLabel: [{ type: core.Input }],
-        ariaPrevMonthLabel: [{ type: core.Input }],
-        ariaNextYearLabel: [{ type: core.Input }],
-        ariaPrevYearLabel: [{ type: core.Input }],
-        ariaNextMultiYearLabel: [{ type: core.Input }],
-        ariaPrevMultiYearLabel: [{ type: core.Input }],
         preventSameDateTimeSelection: [{ type: core.Input }],
         selectedChange: [{ type: core.Output }],
         viewChanged: [{ type: core.Output }],
+        _userSelection: [{ type: core.Output }],
         type: [{ type: core.Input }],
         startAt: [{ type: core.Input }],
         selected: [{ type: core.Input }],
@@ -1051,12 +1054,14 @@
             var _this = this;
             this._element = _element;
             this._adapter = _adapter;
-            this._userSelection = new core.EventEmitter();
             this.interval = 1;
             this.twelvehour = false;
             /** Emits when the currently selected date changes. */
             this.selectedChange = new core.EventEmitter();
+            /** Emits when any date is activated. */
             this.activeDateChange = new core.EventEmitter();
+            /** Emits when any date is selected. */
+            this._userSelection = new core.EventEmitter();
             /** Hours and Minutes representing the clock view. */
             this._hours = [];
             this._minutes = [];
@@ -1170,10 +1175,7 @@
             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. */
         MtxClock.prototype._handleMousedown = function (event) {
             this._timeChanged = false;
             this.setTime(event);
@@ -1314,6 +1316,7 @@
                         'role': 'clock',
                         '(mousedown)': '_handleMousedown($event)',
                     },
+                    exportAs: 'mtxClock',
                     encapsulation: core.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"]
                 },] }
@@ -1331,12 +1334,12 @@
     ]; };
     /** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
     MtxClock.propDecorators = {
-        _userSelection: [{ type: core.Output }],
         dateFilter: [{ type: core.Input }],
         interval: [{ type: core.Input }],
         twelvehour: [{ type: core.Input }],
         selectedChange: [{ type: core.Output }],
         activeDateChange: [{ type: core.Output }],
+        _userSelection: [{ type: core.Output }],
         activeDate: [{ type: core.Input }],
         selected: [{ type: core.Input }],
         minDate: [{ type: core.Input }],
@@ -1344,8 +1347,344 @@
         startView: [{ type: core.Input }]
     };
 
+    /*! *****************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+    /* global Reflect, Promise */
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b)
+                if (Object.prototype.hasOwnProperty.call(b, p))
+                    d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    function __extends(d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    }
+    var __assign = function () {
+        __assign = Object.assign || function __assign(t) {
+            for (var s, i = 1, n = arguments.length; i < n; i++) {
+                s = arguments[i];
+                for (var p in s)
+                    if (Object.prototype.hasOwnProperty.call(s, p))
+                        t[p] = s[p];
+            }
+            return t;
+        };
+        return __assign.apply(this, arguments);
+    };
+    function __rest(s, e) {
+        var t = {};
+        for (var p in s)
+            if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+                t[p] = s[p];
+        if (s != null && typeof Object.getOwnPropertySymbols === "function")
+            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                    t[p[i]] = s[p[i]];
+            }
+        return t;
+    }
+    function __decorate(decorators, target, key, desc) {
+        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+        if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+            r = Reflect.decorate(decorators, target, key, desc);
+        else
+            for (var i = decorators.length - 1; i >= 0; i--)
+                if (d = decorators[i])
+                    r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+        return c > 3 && r && Object.defineProperty(target, key, r), r;
+    }
+    function __param(paramIndex, decorator) {
+        return function (target, key) { decorator(target, key, paramIndex); };
+    }
+    function __metadata(metadataKey, metadataValue) {
+        if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+            return Reflect.metadata(metadataKey, metadataValue);
+    }
+    function __awaiter(thisArg, _arguments, P, generator) {
+        function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+        return new (P || (P = Promise))(function (resolve, reject) {
+            function fulfilled(value) { try {
+                step(generator.next(value));
+            }
+            catch (e) {
+                reject(e);
+            } }
+            function rejected(value) { try {
+                step(generator["throw"](value));
+            }
+            catch (e) {
+                reject(e);
+            } }
+            function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+            step((generator = generator.apply(thisArg, _arguments || [])).next());
+        });
+    }
+    function __generator(thisArg, body) {
+        var _ = { label: 0, sent: function () { if (t[0] & 1)
+                throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+        return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
+        function verb(n) { return function (v) { return step([n, v]); }; }
+        function step(op) {
+            if (f)
+                throw new TypeError("Generator is already executing.");
+            while (_)
+                try {
+                    if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
+                        return t;
+                    if (y = 0, t)
+                        op = [op[0] & 2, t.value];
+                    switch (op[0]) {
+                        case 0:
+                        case 1:
+                            t = op;
+                            break;
+                        case 4:
+                            _.label++;
+                            return { value: op[1], done: false };
+                        case 5:
+                            _.label++;
+                            y = op[1];
+                            op = [0];
+                            continue;
+                        case 7:
+                            op = _.ops.pop();
+                            _.trys.pop();
+                            continue;
+                        default:
+                            if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+                                _ = 0;
+                                continue;
+                            }
+                            if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
+                                _.label = op[1];
+                                break;
+                            }
+                            if (op[0] === 6 && _.label < t[1]) {
+                                _.label = t[1];
+                                t = op;
+                                break;
+                            }
+                            if (t && _.label < t[2]) {
+                                _.label = t[2];
+                                _.ops.push(op);
+                                break;
+                            }
+                            if (t[2])
+                                _.ops.pop();
+                            _.trys.pop();
+                            continue;
+                    }
+                    op = body.call(thisArg, _);
+                }
+                catch (e) {
+                    op = [6, e];
+                    y = 0;
+                }
+                finally {
+                    f = t = 0;
+                }
+            if (op[0] & 5)
+                throw op[1];
+            return { value: op[0] ? op[1] : void 0, done: true };
+        }
+    }
+    var __createBinding = Object.create ? (function (o, m, k, k2) {
+        if (k2 === undefined)
+            k2 = k;
+        Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } });
+    }) : (function (o, m, k, k2) {
+        if (k2 === undefined)
+            k2 = k;
+        o[k2] = m[k];
+    });
+    function __exportStar(m, o) {
+        for (var p in m)
+            if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p))
+                __createBinding(o, m, p);
+    }
+    function __values(o) {
+        var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+        if (m)
+            return m.call(o);
+        if (o && typeof o.length === "number")
+            return {
+                next: function () {
+                    if (o && i >= o.length)
+                        o = void 0;
+                    return { value: o && o[i++], done: !o };
+                }
+            };
+        throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+    }
+    function __read(o, n) {
+        var m = typeof Symbol === "function" && o[Symbol.iterator];
+        if (!m)
+            return o;
+        var i = m.call(o), r, ar = [], e;
+        try {
+            while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
+                ar.push(r.value);
+        }
+        catch (error) {
+            e = { error: error };
+        }
+        finally {
+            try {
+                if (r && !r.done && (m = i["return"]))
+                    m.call(i);
+            }
+            finally {
+                if (e)
+                    throw e.error;
+            }
+        }
+        return ar;
+    }
+    /** @deprecated */
+    function __spread() {
+        for (var ar = [], i = 0; i < arguments.length; i++)
+            ar = ar.concat(__read(arguments[i]));
+        return ar;
+    }
+    /** @deprecated */
+    function __spreadArrays() {
+        for (var s = 0, i = 0, il = arguments.length; i < il; i++)
+            s += arguments[i].length;
+        for (var r = Array(s), k = 0, i = 0; i < il; i++)
+            for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+                r[k] = a[j];
+        return r;
+    }
+    function __spreadArray(to, from, pack) {
+        if (pack || arguments.length === 2)
+            for (var i = 0, l = from.length, ar; i < l; i++) {
+                if (ar || !(i in from)) {
+                    if (!ar)
+                        ar = Array.prototype.slice.call(from, 0, i);
+                    ar[i] = from[i];
+                }
+            }
+        return to.concat(ar || from);
+    }
+    function __await(v) {
+        return this instanceof __await ? (this.v = v, this) : new __await(v);
+    }
+    function __asyncGenerator(thisArg, _arguments, generator) {
+        if (!Symbol.asyncIterator)
+            throw new TypeError("Symbol.asyncIterator is not defined.");
+        var g = generator.apply(thisArg, _arguments || []), i, q = [];
+        return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
+        function verb(n) { if (g[n])
+            i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
+        function resume(n, v) { try {
+            step(g[n](v));
+        }
+        catch (e) {
+            settle(q[0][3], e);
+        } }
+        function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
+        function fulfill(value) { resume("next", value); }
+        function reject(value) { resume("throw", value); }
+        function settle(f, v) { if (f(v), q.shift(), q.length)
+            resume(q[0][0], q[0][1]); }
+    }
+    function __asyncDelegator(o) {
+        var i, p;
+        return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
+        function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
+    }
+    function __asyncValues(o) {
+        if (!Symbol.asyncIterator)
+            throw new TypeError("Symbol.asyncIterator is not defined.");
+        var m = o[Symbol.asyncIterator], i;
+        return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
+        function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
+        function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
+    }
+    function __makeTemplateObject(cooked, raw) {
+        if (Object.defineProperty) {
+            Object.defineProperty(cooked, "raw", { value: raw });
+        }
+        else {
+            cooked.raw = raw;
+        }
+        return cooked;
+    }
+    ;
+    var __setModuleDefault = Object.create ? (function (o, v) {
+        Object.defineProperty(o, "default", { enumerable: true, value: v });
+    }) : function (o, v) {
+        o["default"] = v;
+    };
+    function __importStar(mod) {
+        if (mod && mod.__esModule)
+            return mod;
+        var result = {};
+        if (mod != null)
+            for (var k in mod)
+                if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
+                    __createBinding(result, mod, k);
+        __setModuleDefault(result, mod);
+        return result;
+    }
+    function __importDefault(mod) {
+        return (mod && mod.__esModule) ? mod : { default: mod };
+    }
+    function __classPrivateFieldGet(receiver, state, kind, f) {
+        if (kind === "a" && !f)
+            throw new TypeError("Private accessor was defined without a getter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+            throw new TypeError("Cannot read private member from an object whose class did not declare it");
+        return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+    }
+    function __classPrivateFieldSet(receiver, state, value, kind, f) {
+        if (kind === "m")
+            throw new TypeError("Private method is not writable");
+        if (kind === "a" && !f)
+            throw new TypeError("Private accessor was defined without a setter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+            throw new TypeError("Cannot write private member to an object whose class did not declare it");
+        return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+    }
+
     /** Used to generate a unique ID for each datetimepicker instance. */
     var datetimepickerUid = 0;
+    /** Injection token that determines the scroll handling while the calendar is open. */
+    var MTX_DATETIMEPICKER_SCROLL_STRATEGY = new core.InjectionToken('mtx-datetimepicker-scroll-strategy');
+    function MTX_DATETIMEPICKER_SCROLL_STRATEGY_FACTORY(overlay) {
+        return function () { return overlay.scrollStrategies.reposition(); };
+    }
+    var MTX_DATETIMEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER = {
+        provide: MTX_DATETIMEPICKER_SCROLL_STRATEGY,
+        deps: [overlay.Overlay],
+        useFactory: MTX_DATETIMEPICKER_SCROLL_STRATEGY_FACTORY,
+    };
+    // Boilerplate for applying mixins to MtxDatetimepickerContent.
+    /** @docs-private */
+    var _MtxDatetimepickerContentBase = core$2.mixinColor(/** @class */ (function () {
+        function class_1(_elementRef) {
+            this._elementRef = _elementRef;
+        }
+        return class_1;
+    }()));
     /**
      * 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
@@ -1353,33 +1692,63 @@
      * future. (e.g. confirmation buttons).
      * @docs-private
      */
-    var MtxDatetimepickerContent = /** @class */ (function () {
-        function MtxDatetimepickerContent() {
+    var MtxDatetimepickerContent = /** @class */ (function (_super) {
+        __extends(MtxDatetimepickerContent, _super);
+        function MtxDatetimepickerContent(elementRef, _changeDetectorRef) {
+            var _this = _super.call(this, elementRef) || this;
+            _this._changeDetectorRef = _changeDetectorRef;
+            /** Emits when an animation has finished. */
+            _this._animationDone = new rxjs.Subject();
+            return _this;
         }
+        MtxDatetimepickerContent.prototype.ngOnInit = function () {
+            this._animationState = this.datetimepicker.touchUi ? 'enter-dialog' : 'enter-dropdown';
+        };
         MtxDatetimepickerContent.prototype.ngAfterContentInit = function () {
             this._calendar._focusActiveCell();
         };
-        MtxDatetimepickerContent.prototype.onSelectionChange = function (date) {
-            this.datetimepicker._select(date);
-            this.datetimepicker.close();
+        MtxDatetimepickerContent.prototype._startExitAnimation = function () {
+            this._animationState = 'void';
+            this._changeDetectorRef.markForCheck();
+        };
+        MtxDatetimepickerContent.prototype.ngOnDestroy = function () {
+            this._animationDone.complete();
         };
         return MtxDatetimepickerContent;
-    }());
+    }(_MtxDatetimepickerContentBase));
     /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
     MtxDatetimepickerContent.decorators = [
         { type: core.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: core.ViewEncapsulation.None,
                     changeDetection: core.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 = function () { return [
+        { type: core.ElementRef },
+        { type: core.ChangeDetectorRef }
+    ]; };
     /** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
     MtxDatetimepickerContent.propDecorators = {
         _calendar: [{ type: core.ViewChild, args: [MtxCalendar, { static: true },] }]
@@ -1398,10 +1767,6 @@
             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;
             /**
@@ -1415,8 +1780,7 @@
             this.closedStream = new core.EventEmitter();
             /** Emits when the view has been changed. */
             this.viewChanged = new core.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. */
@@ -1429,6 +1793,11 @@
             this._inputStateChanges = rxjs.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');
             }
@@ -1455,25 +1824,52 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(MtxDatetimepicker.prototype, "startAt", {
-            /** The date to open the calendar to initially. */
+        Object.defineProperty(MtxDatetimepicker.prototype, "panelClass", {
+            /**
+             * Classes to be passed to the date picker panel.
+             * Supports string and string array values, similar to `ngClass`.
+             */
             get: function () {
-                // 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._panelClass;
             },
-            set: function (date) {
-                this._startAt = this._dateAdapter.getValidDateOrNull(date);
+            set: function (value) {
+                this._panelClass = coercion.coerceStringArray(value);
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(MtxDatetimepicker.prototype, "openOnFocus", {
+        Object.defineProperty(MtxDatetimepicker.prototype, "opened", {
+            /** Whether the calendar is open. */
             get: function () {
-                return this._openOnFocus;
+                return this._opened;
             },
             set: function (value) {
-                this._openOnFocus = coercion.coerceBooleanProperty(value);
+                coercion.coerceBooleanProperty(value) ? this.open() : this.close();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(MtxDatetimepicker.prototype, "color", {
+            /** Color palette to use on the datetimepicker's calendar. */
+            get: function () {
+                return (this._color ||
+                    (this.datetimepickerInput ? this.datetimepickerInput.getThemePalette() : undefined));
+            },
+            set: function (value) {
+                this._color = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(MtxDatetimepicker.prototype, "startAt", {
+            /** The date to open the calendar to initially. */
+            get: function () {
+                // 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);
+            },
+            set: function (date) {
+                this._startAt = this._dateAdapter.getValidDateOrNull(date);
             },
             enumerable: false,
             configurable: true
@@ -1505,8 +1901,8 @@
         Object.defineProperty(MtxDatetimepicker.prototype, "disabled", {
             /** Whether the datetimepicker pop-up should be disabled. */
             get: function () {
-                return this._disabled === undefined && this._datetimepickerInput
-                    ? this._datetimepickerInput.disabled
+                return this._disabled === undefined && this.datetimepickerInput
+                    ? this.datetimepickerInput.disabled
                     : !!this._disabled;
             },
             set: function (value) {
@@ -1519,6 +1915,21 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(MtxDatetimepicker.prototype, "restoreFocus", {
+            /**
+             * 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: function () {
+                return this._restoreFocus;
+            },
+            set: function (value) {
+                this._restoreFocus = coercion.coerceBooleanProperty(value);
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(MtxDatetimepicker.prototype, "_selected", {
             /** The currently selected date. */
             get: function () {
@@ -1533,7 +1944,7 @@
         Object.defineProperty(MtxDatetimepicker.prototype, "_minDate", {
             /** The minimum selectable date. */
             get: function () {
-                return this._datetimepickerInput && this._datetimepickerInput.min;
+                return this.datetimepickerInput && this.datetimepickerInput.min;
             },
             enumerable: false,
             configurable: true
@@ -1541,14 +1952,14 @@
         Object.defineProperty(MtxDatetimepicker.prototype, "_maxDate", {
             /** The maximum selectable date. */
             get: function () {
-                return this._datetimepickerInput && this._datetimepickerInput.max;
+                return this.datetimepickerInput && this.datetimepickerInput.max;
             },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(MtxDatetimepicker.prototype, "_dateFilter", {
             get: function () {
-                return this._datetimepickerInput && this._datetimepickerInput._dateFilter;
+                return this.datetimepickerInput && this.datetimepickerInput._dateFilter;
             },
             enumerable: false,
             configurable: true
@@ -1562,10 +1973,7 @@
             this._inputStateChanges.unsubscribe();
             this._disabledChange.complete();
         };
-        /**
-         * TODO: use model
-         * Selects the given date
-         */
+        /** Selects the given date */
         MtxDatetimepicker.prototype._select = function (date) {
             var oldValue = this._selected;
             this._selected = date;
@@ -1579,29 +1987,29 @@
          */
         MtxDatetimepicker.prototype._registerInput = function (input) {
             var _this = this;
-            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(function (value) { return (_this._selected = value); });
+            this.datetimepickerInput = input;
+            this._inputStateChanges = this.datetimepickerInput._valueChange.subscribe(function (value) { return (_this._selected = value); });
         };
         /** Open the calendar. */
         MtxDatetimepicker.prototype.open = function () {
-            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 = platform._getFocusedElementPierceShadowDom();
             this._openOverlay();
-            this.opened = true;
+            this._opened = true;
             this.openedStream.emit();
         };
         /** Close the calendar. */
         MtxDatetimepicker.prototype.close = function () {
             var _this = this;
-            if (!this.opened) {
+            if (!this._opened) {
                 return;
             }
             if (this._componentRef) {
@@ -1610,13 +2018,14 @@
             var completeClose = function () {
                 // 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
@@ -1631,19 +2040,19 @@
             }
         };
         /**
-         * TODO: add datetimepicker color
          * Forwards relevant values from the datetimepicker to the
          * datetimepicker content inside the overlay.
          */
         MtxDatetimepicker.prototype._forwardContentValues = function (instance) {
             instance.datetimepicker = this;
+            instance.color = this.color;
         };
         /** Opens the overlay with the calendar. */
         MtxDatetimepicker.prototype._openOverlay = function () {
             var _this = this;
             this._destroyOverlay();
             var isDialog = this.touchUi;
-            var labelId = this._datetimepickerInput.getOverlayLabelId();
+            var labelId = this.datetimepickerInput.getOverlayLabelId();
             var portal$1 = new portal.ComponentPortal(MtxDatetimepickerContent, this._viewContainerRef);
             var overlayRef = (this._overlayRef = this._overlay.create(new overlay.OverlayConfig({
                 positionStrategy: isDialog ? this._getDialogStrategy() : this._getDropdownStrategy(),
@@ -1692,7 +2101,7 @@
         MtxDatetimepicker.prototype._getDropdownStrategy = function () {
             var strategy = this._overlay
                 .position()
-                .flexibleConnectedTo(this._datetimepickerInput.getConnectedOverlayOrigin())
+                .flexibleConnectedTo(this.datetimepickerInput.getConnectedOverlayOrigin())
                 .withTransformOriginOn('.mtx-datetimepicker-content')
                 .withFlexibleDimensions(false)
                 .withViewportMargin(8)
@@ -1700,34 +2109,37 @@
             return this._setConnectedPositions(strategy);
         };
         /**
-         * TODO: `xPosition` and `yPosition`
          * Sets the positions of the datetimepicker in dropdown mode based on the current configuration.
          */
         MtxDatetimepicker.prototype._setConnectedPositions = function (strategy) {
+            var primaryX = this.xPosition === 'end' ? 'end' : 'start';
+            var secondaryX = primaryX === 'start' ? 'end' : 'start';
+            var primaryY = this.yPosition === 'above' ? 'bottom' : 'top';
+            var 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,
                 },
             ]);
         };
@@ -1737,7 +2149,7 @@
             return rxjs.merge(overlayRef.backdropClick(), overlayRef.detachments(), overlayRef.keydownEvents().pipe(operators.filter(function (event) {
                 // Closing on alt + up is only valid when there's an input associated with the datetimepicker.
                 return ((event.keyCode === keycodes.ESCAPE && !keycodes.hasModifierKey(event)) ||
-                    (_this._datetimepickerInput &&
+                    (_this.datetimepickerInput &&
                         keycodes.hasModifierKey(event, 'altKey') &&
                         event.keyCode === keycodes.UP_ARROW));
             })));
@@ -1766,7 +2178,7 @@
         { type: overlay.Overlay },
         { type: core.NgZone },
         { type: core.ViewContainerRef },
-        { type: undefined, decorators: [{ type: core.Inject, args: [datepicker.MAT_DATEPICKER_SCROLL_STRATEGY,] }] },
+        { type: undefined, decorators: [{ type: core.Inject, args: [MTX_DATETIMEPICKER_SCROLL_STRATEGY,] }] },
         { type: core$1.DatetimeAdapter, decorators: [{ type: core.Optional }] },
         { type: bidi.Directionality, decorators: [{ type: core.Optional }] }
     ]; };
@@ -1777,21 +2189,21 @@
         startView: [{ type: core.Input }],
         mode: [{ type: core.Input }],
         timeInterval: [{ type: core.Input }],
-        ariaNextMonthLabel: [{ type: core.Input }],
-        ariaPrevMonthLabel: [{ type: core.Input }],
-        ariaNextYearLabel: [{ type: core.Input }],
-        ariaPrevYearLabel: [{ type: core.Input }],
         preventSameDateTimeSelection: [{ type: core.Input }],
         selectedChanged: [{ type: core.Output }],
-        panelClass: [{ type: core.Input }],
         openedStream: [{ type: core.Output, args: ['opened',] }],
         closedStream: [{ type: core.Output, args: ['closed',] }],
         viewChanged: [{ type: core.Output }],
+        panelClass: [{ type: core.Input }],
+        opened: [{ type: core.Input }],
+        color: [{ type: core.Input }],
         startAt: [{ type: core.Input }],
-        openOnFocus: [{ type: core.Input }],
         type: [{ type: core.Input }],
         touchUi: [{ type: core.Input }],
-        disabled: [{ type: core.Input }]
+        disabled: [{ type: core.Input }],
+        xPosition: [{ type: core.Input }],
+        yPosition: [{ type: core.Input }],
+        restoreFocus: [{ type: core.Input }]
     };
 
     var MAT_DATETIMEPICKER_VALUE_ACCESSOR = {
@@ -2094,6 +2506,10 @@
                 ? this._dateAdapter.format(value, this.getDisplayFormat())
                 : '';
         };
+        /** Returns the palette used by the input's form field, if any. */
+        MtxDatetimepickerInput.prototype.getThemePalette = function () {
+            return this._formField ? this._formField.color : undefined;
+        };
         return MtxDatetimepickerInput;
     }());
     /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
@@ -2144,6 +2560,18 @@
         disabled: [{ type: core.Input }]
     };
 
+    /** Can be used to override the icon of a `mtxDatetimepickerToggle`. */
+    var MtxDatetimepickerToggleIcon = /** @class */ (function () {
+        function MtxDatetimepickerToggleIcon() {
+        }
+        return MtxDatetimepickerToggleIcon;
+    }());
+    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
+    MtxDatetimepickerToggleIcon.decorators = [
+        { type: core.Directive, args: [{
+                    selector: '[mtxDatetimepickerToggleIcon]',
+                },] }
+    ];
     var MtxDatetimepickerToggle = /** @class */ (function () {
         function MtxDatetimepickerToggle(_intl, _changeDetectorRef) {
             this._intl = _intl;
@@ -2183,8 +2611,8 @@
             var datetimepickerDisabled = this.datetimepicker
                 ? this.datetimepicker._disabledChange
                 : rxjs.of();
-            var inputDisabled = this.datetimepicker && this.datetimepicker._datetimepickerInput
-                ? this.datetimepicker._datetimepickerInput._disabledChange
+            var inputDisabled = this.datetimepicker && this.datetimepicker.datetimepickerInput
+                ? this.datetimepicker.datetimepickerInput._disabledChange
                 : rxjs.of();
             this._stateChanges.unsubscribe();
             this._stateChanges = rxjs.merge([
@@ -2199,14 +2627,22 @@
     MtxDatetimepickerToggle.decorators = [
         { type: core.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: core.ViewEncapsulation.None,
                     preserveWhitespaces: false,
-                    changeDetection: core.ChangeDetectionStrategy.OnPush
+                    changeDetection: core.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"]
                 },] }
     ];
     /**
@@ -2223,7 +2659,11 @@
     /** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
     MtxDatetimepickerToggle.propDecorators = {
         datetimepicker: [{ type: core.Input, args: ['for',] }],
-        disabled: [{ type: core.Input }]
+        tabIndex: [{ type: core.Input }],
+        disabled: [{ type: core.Input }],
+        disableRipple: [{ type: core.Input }],
+        _customIcon: [{ type: core.ContentChild, args: [MtxDatetimepickerToggleIcon,] }],
+        _button: [{ type: core.ViewChild, args: ['button',] }]
     };
 
     var DAYS_PER_WEEK = 7;
@@ -2236,9 +2676,10 @@
             this._adapter = _adapter;
             this._dateFormats = _dateFormats;
             this.type = 'date';
-            this._userSelection = new core.EventEmitter();
             /** Emits when a new date is selected. */
             this.selectedChange = new core.EventEmitter();
+            /** Emits when any date is selected. */
+            this._userSelection = new core.EventEmitter();
             if (!this._adapter) {
                 throw createMissingDateImplError('DatetimeAdapter');
             }
@@ -2352,7 +2793,8 @@
         { type: core.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: core.ViewEncapsulation.None,
                     changeDetection: core.ChangeDetectionStrategy.OnPush
                 },] }
@@ -2371,9 +2813,9 @@
     /** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
     MtxMonthView.propDecorators = {
         type: [{ type: core.Input }],
-        _userSelection: [{ type: core.Output }],
         dateFilter: [{ type: core.Input }],
         selectedChange: [{ type: core.Output }],
+        _userSelection: [{ type: core.Output }],
         activeDate: [{ type: core.Input }],
         selected: [{ type: core.Input }]
     };
@@ -2386,10 +2828,11 @@
         function MtxYearView(_adapter, _dateFormats) {
             this._adapter = _adapter;
             this._dateFormats = _dateFormats;
-            this._userSelection = new core.EventEmitter();
             this.type = 'date';
             /** Emits when a new month is selected. */
             this.selectedChange = new core.EventEmitter();
+            /** Emits when any date is selected. */
+            this._userSelection = new core.EventEmitter();
             if (!this._adapter) {
                 throw createMissingDateImplError('DatetimeAdapter');
             }
@@ -2496,7 +2939,8 @@
         { type: core.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: core.ViewEncapsulation.None,
                     changeDetection: core.ChangeDetectionStrategy.OnPush
                 },] }
@@ -2514,10 +2958,10 @@
     ]; };
     /** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
     MtxYearView.propDecorators = {
-        _userSelection: [{ type: core.Output }],
         type: [{ type: core.Input }],
         dateFilter: [{ type: core.Input }],
         selectedChange: [{ type: core.Output }],
+        _userSelection: [{ type: core.Output }],
         activeDate: [{ type: core.Input }],
         selected: [{ type: core.Input }]
     };
@@ -2530,14 +2974,14 @@
     /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
     MtxDatetimepickerModule.decorators = [
         { type: core.NgModule, args: [{
-                    imports: [common.CommonModule, button.MatButtonModule, icon.MatIconModule, overlay.OverlayModule, a11y.A11yModule],
-                    entryComponents: [MtxDatetimepickerContent],
+                    imports: [common.CommonModule, button.MatButtonModule, overlay.OverlayModule, a11y.A11yModule, portal.PortalModule],
                     declarations: [
                         MtxCalendar,
                         MtxCalendarBody,
                         MtxClock,
                         MtxDatetimepicker,
                         MtxDatetimepickerToggle,
+                        MtxDatetimepickerToggleIcon,
                         MtxDatetimepickerInput,
                         MtxDatetimepickerContent,
                         MtxMonthView,
@@ -2550,12 +2994,15 @@
                         MtxClock,
                         MtxDatetimepicker,
                         MtxDatetimepickerToggle,
+                        MtxDatetimepickerToggleIcon,
                         MtxDatetimepickerInput,
                         MtxDatetimepickerContent,
                         MtxMonthView,
                         MtxYearView,
                         MtxMultiYearView,
                     ],
+                    providers: [MTX_DATETIMEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER],
+                    entryComponents: [MtxDatetimepickerContent],
                 },] }
     ];
 
@@ -2569,6 +3016,9 @@
     exports.CLOCK_TICK_RADIUS = CLOCK_TICK_RADIUS;
     exports.MAT_DATETIMEPICKER_VALIDATORS = MAT_DATETIMEPICKER_VALIDATORS;
     exports.MAT_DATETIMEPICKER_VALUE_ACCESSOR = MAT_DATETIMEPICKER_VALUE_ACCESSOR;
+    exports.MTX_DATETIMEPICKER_SCROLL_STRATEGY = MTX_DATETIMEPICKER_SCROLL_STRATEGY;
+    exports.MTX_DATETIMEPICKER_SCROLL_STRATEGY_FACTORY = MTX_DATETIMEPICKER_SCROLL_STRATEGY_FACTORY;
+    exports.MTX_DATETIMEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER = MTX_DATETIMEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER;
     exports.MtxCalendar = MtxCalendar;
     exports.MtxCalendarBody = MtxCalendarBody;
     exports.MtxCalendarCell = MtxCalendarCell;
@@ -2579,10 +3029,15 @@
     exports.MtxDatetimepickerInputEvent = MtxDatetimepickerInputEvent;
     exports.MtxDatetimepickerModule = MtxDatetimepickerModule;
     exports.MtxDatetimepickerToggle = MtxDatetimepickerToggle;
+    exports.MtxDatetimepickerToggleIcon = MtxDatetimepickerToggleIcon;
     exports.MtxMonthView = MtxMonthView;
+    exports.MtxMultiYearView = MtxMultiYearView;
     exports.MtxYearView = MtxYearView;
-    exports["ɵa"] = slideCalendar;
-    exports["ɵb"] = MtxMultiYearView;
+    exports.getActiveOffset = getActiveOffset;
+    exports.isSameMultiYearView = isSameMultiYearView;
+    exports.mtxDatetimepickerAnimations = mtxDatetimepickerAnimations;
+    exports.yearsPerPage = yearsPerPage;
+    exports.yearsPerRow = yearsPerRow;
 
     Object.defineProperty(exports, '__esModule', { value: true });