@ng-matero/extensions 12.5.2 → 13.0.0

package/bundles/mtxDatetimepicker.umd.js

@@ -1,2590 +0,0 @@
-(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';
-
-    /**
-     * 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.
-     */
-    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 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) {
-        return Error("MtxDatetimepicker: No provider found for " + provider + ". You must import one of the following " +
-            "modules at your application root: MtxNativeDatetimeModule, MtxMomentDatetimeModule, or provide a " +
-            "custom implementation.");
-    }
-
-    exports.MtxDatetimepickerFilterType = void 0;
-    (function (MtxDatetimepickerFilterType) {
-        MtxDatetimepickerFilterType[MtxDatetimepickerFilterType["DATE"] = 0] = "DATE";
-        MtxDatetimepickerFilterType[MtxDatetimepickerFilterType["HOUR"] = 1] = "HOUR";
-        MtxDatetimepickerFilterType[MtxDatetimepickerFilterType["MINUTE"] = 2] = "MINUTE";
-    })(exports.MtxDatetimepickerFilterType || (exports.MtxDatetimepickerFilterType = {}));
-
-    /**
-     * An internal class that represents the data corresponding to a single calendar cell.
-     * @docs-private
-     */
-    var MtxCalendarCell = /** @class */ (function () {
-        function MtxCalendarCell(value, displayValue, ariaLabel, enabled) {
-            this.value = value;
-            this.displayValue = displayValue;
-            this.ariaLabel = ariaLabel;
-            this.enabled = enabled;
-        }
-        return MtxCalendarCell;
-    }());
-    /**
-     * An internal component used to display calendar data in a table.
-     * @docs-private
-     */
-    var MtxCalendarBody = /** @class */ (function () {
-        function MtxCalendarBody() {
-            /** The number of columns in the table. */
-            this.numCols = 7;
-            /** Whether to allow selection of disabled cells. */
-            this.allowDisabledSelection = false;
-            /** The cell number of the active cell in the table. */
-            this.activeCell = 0;
-            /** Emits when a new value is selected. */
-            this.selectedValueChange = new core.EventEmitter();
-        }
-        Object.defineProperty(MtxCalendarBody.prototype, "_firstRowOffset", {
-            /** The number of blank cells to put at the beginning for the first row. */
-            get: function () {
-                return this.rows && this.rows.length && this.rows[0].length
-                    ? this.numCols - this.rows[0].length
-                    : 0;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        MtxCalendarBody.prototype._cellClicked = function (cell) {
-            if (!this.allowDisabledSelection && !cell.enabled) {
-                return;
-            }
-            this.selectedValueChange.emit(cell.value);
-        };
-        MtxCalendarBody.prototype._isActiveCell = function (rowIndex, colIndex) {
-            var cellNumber = rowIndex * this.numCols + colIndex;
-            // Account for the fact that the first row may not have as many cells.
-            if (rowIndex) {
-                cellNumber -= this._firstRowOffset;
-            }
-            return cellNumber === this.activeCell;
-        };
-        return MtxCalendarBody;
-    }());
-    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
-    MtxCalendarBody.decorators = [
-        { type: core.Component, args: [{
-                    selector: '[mtx-calendar-body]',
-                    template: "<!--\n  If there's not enough space in the first row, create a separate label row. We mark this row as\n  aria-hidden because we don't want it to be read out as one of the weeks in the month.\n-->\n<tr *ngIf=\"_firstRowOffset < labelMinRequiredCells\" aria-hidden=\"true\">\n  <td [attr.colspan]=\"numCols\" class=\"mtx-calendar-body-label\">{{ label }}</td>\n</tr>\n\n<!-- Create the first row separately so we can include a special spacer cell. -->\n<tr *ngFor=\"let row of rows; let rowIndex = index\" role=\"row\">\n  <!--\n    We mark this cell as aria-hidden so it doesn't get read out as one of the days in the week.\n  -->\n  <td *ngIf=\"rowIndex === 0 && _firstRowOffset\"\n      [attr.colspan]=\"_firstRowOffset\"\n      aria-hidden=\"true\"\n      class=\"mtx-calendar-body-label\">\n    {{ _firstRowOffset >= labelMinRequiredCells ? label : '' }}\n  </td>\n  <td *ngFor=\"let item of row; let colIndex = index\"\n      role=\"gridcell\"\n      class=\"mtx-calendar-body-cell\"\n      [tabindex]=\"_isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n      [attr.data-mat-row]=\"rowIndex\"\n      [attr.data-mat-col]=\"colIndex\"\n      [attr.aria-label]=\"item.ariaLabel\"\n      [attr.aria-disabled]=\"!item.enabled || null\"\n      [class.mtx-calendar-body-active]=\"_isActiveCell(rowIndex, colIndex)\"\n      [class.mtx-calendar-body-disabled]=\"!item.enabled\"\n      (click)=\"_cellClicked(item)\">\n    <div [attr.aria-selected]=\"selectedValue === item.value\"\n         [class.mtx-calendar-body-selected]=\"selectedValue === item.value\"\n         [class.mtx-calendar-body-today]=\"todayValue === item.value\"\n         class=\"mtx-calendar-body-cell-content\">\n      {{ item.displayValue }}\n    </div>\n  </td>\n</tr>\n",
-                    host: {
-                        class: 'mtx-calendar-body',
-                    },
-                    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"]
-                },] }
-    ];
-    /** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
-    MtxCalendarBody.propDecorators = {
-        label: [{ type: core.Input }],
-        rows: [{ type: core.Input }],
-        todayValue: [{ type: core.Input }],
-        selectedValue: [{ type: core.Input }],
-        labelMinRequiredCells: [{ type: core.Input }],
-        numCols: [{ type: core.Input }],
-        allowDisabledSelection: [{ type: core.Input }],
-        activeCell: [{ type: core.Input }],
-        selectedValueChange: [{ type: core.Output }]
-    };
-
-    var yearsPerPage = 24;
-    var yearsPerRow = 4;
-    /**
-     * An internal component used to display multiple years in the datetimepicker.
-     * @docs-private
-     */
-    var MtxMultiYearView = /** @class */ (function () {
-        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();
-            if (!this._adapter) {
-                throw createMissingDateImplError('DatetimeAdapter');
-            }
-            if (!this._dateFormats) {
-                throw createMissingDateImplError('MTX_DATETIME_FORMATS');
-            }
-            this._activeDate = this._adapter.today();
-        }
-        Object.defineProperty(MtxMultiYearView.prototype, "activeDate", {
-            /** The date to display in this multi year view */
-            get: function () {
-                return this._activeDate;
-            },
-            set: function (value) {
-                var oldActiveDate = this._activeDate;
-                this._activeDate = value || this._adapter.today();
-                if (oldActiveDate &&
-                    this._activeDate &&
-                    !isSameMultiYearView(this._adapter, oldActiveDate, this._activeDate, this.minDate, this.maxDate)) {
-                    this._init();
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MtxMultiYearView.prototype, "selected", {
-            /** The currently selected date. */
-            get: function () {
-                return this._selected;
-            },
-            set: function (value) {
-                this._selected = value;
-                this._selectedYear = this._selected && this._adapter.getYear(this._selected);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MtxMultiYearView.prototype, "minDate", {
-            /** The minimum selectable date. */
-            get: function () {
-                return this._minDate;
-            },
-            set: function (value) {
-                this._minDate = this._getValidDateOrNull(this._adapter.deserialize(value));
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MtxMultiYearView.prototype, "maxDate", {
-            /** The maximum selectable date. */
-            get: function () {
-                return this._maxDate;
-            },
-            set: function (value) {
-                this._maxDate = this._getValidDateOrNull(this._adapter.deserialize(value));
-            },
-            enumerable: false,
-            configurable: true
-        });
-        MtxMultiYearView.prototype.ngAfterContentInit = function () {
-            this._init();
-        };
-        /** Handles when a new year is selected. */
-        MtxMultiYearView.prototype._yearSelected = function (year) {
-            var month = this._adapter.getMonth(this.activeDate);
-            var normalizedDate = this._adapter.createDatetime(year, month, 1, 0, 0);
-            this.selectedChange.emit(this._adapter.createDatetime(year, month, Math.min(this._adapter.getDate(this.activeDate), this._adapter.getNumDaysInMonth(normalizedDate)), this._adapter.getHour(this.activeDate), this._adapter.getMinute(this.activeDate)));
-            if (this.type === 'year') {
-                this._userSelection.emit();
-            }
-        };
-        MtxMultiYearView.prototype._getActiveCell = function () {
-            return getActiveOffset(this._adapter, this.activeDate, this.minDate, this.maxDate);
-        };
-        MtxMultiYearView.prototype._calendarStateDone = function () {
-            this._calendarState = '';
-        };
-        /** Initializes this year view. */
-        MtxMultiYearView.prototype._init = function () {
-            var _this = this;
-            this._todayYear = this._adapter.getYear(this._adapter.today());
-            this._yearLabel = this._adapter.getYearName(this.activeDate);
-            var activeYear = this._adapter.getYear(this.activeDate);
-            var minYearOfPage = activeYear - getActiveOffset(this._adapter, this.activeDate, this.minDate, this.maxDate);
-            this._years = [];
-            for (var i = 0, row = []; i < yearsPerPage; i++) {
-                row.push(minYearOfPage + i);
-                if (row.length === yearsPerRow) {
-                    this._years.push(row.map(function (year) { return _this._createCellForYear(year); }));
-                    row = [];
-                }
-            }
-        };
-        /** Creates an MtxCalendarCell for the given year. */
-        MtxMultiYearView.prototype._createCellForYear = function (year) {
-            var yearName = this._adapter.getYearName(this._adapter.createDate(year, 0, 1));
-            return new MtxCalendarCell(year, yearName, yearName, this._shouldEnableYear(year));
-        };
-        /** Whether the given year is enabled. */
-        MtxMultiYearView.prototype._shouldEnableYear = function (year) {
-            // disable if the year is greater than maxDate lower than minDate
-            if (year === undefined ||
-                year === null ||
-                (this.maxDate && year > this._adapter.getYear(this.maxDate)) ||
-                (this.minDate && year < this._adapter.getYear(this.minDate))) {
-                return false;
-            }
-            // enable if it reaches here and there's no filter defined
-            if (!this.dateFilter) {
-                return true;
-            }
-            var firstOfYear = this._adapter.createDate(year, 0, 1);
-            // If any date in the year is enabled count the year as enabled.
-            for (var date = firstOfYear; this._adapter.getYear(date) === year; date = this._adapter.addCalendarDays(date, 1)) {
-                if (this.dateFilter(date)) {
-                    return true;
-                }
-            }
-            return false;
-        };
-        /**
-         * Gets the year in this years range that the given Date falls on.
-         * Returns null if the given Date is not in this range.
-         */
-        MtxMultiYearView.prototype._getYearInCurrentRange = function (date) {
-            var year = this._adapter.getYear(date);
-            return this._isInRange(year) ? year : null;
-        };
-        /**
-         * Validate if the current year is in the current range
-         * Returns true if is in range else returns false
-         */
-        MtxMultiYearView.prototype._isInRange = function (year) {
-            return true;
-        };
-        /**
-         * @param obj The object to check.
-         * @returns The given object if it is both a date instance and valid, otherwise null.
-         */
-        MtxMultiYearView.prototype._getValidDateOrNull = function (obj) {
-            return this._adapter.isDateInstance(obj) && this._adapter.isValid(obj) ? obj : null;
-        };
-        return MtxMultiYearView;
-    }());
-    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
-    MtxMultiYearView.decorators = [
-        { 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],
-                    encapsulation: core.ViewEncapsulation.None,
-                    changeDetection: core.ChangeDetectionStrategy.OnPush
-                },] }
-    ];
-    /**
-     * @type {function(): !Array<(null|{
-     *   type: ?,
-     *   decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
-     * })>}
-     * @nocollapse
-     */
-    MtxMultiYearView.ctorParameters = function () { return [
-        { type: core$1.DatetimeAdapter, decorators: [{ type: core.Optional }] },
-        { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [core$1.MTX_DATETIME_FORMATS,] }] }
-    ]; };
-    /** @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 }],
-        activeDate: [{ type: core.Input }],
-        selected: [{ type: core.Input }],
-        minDate: [{ type: core.Input }],
-        maxDate: [{ type: core.Input }]
-    };
-    function isSameMultiYearView(dateAdapter, date1, date2, minDate, maxDate) {
-        var year1 = dateAdapter.getYear(date1);
-        var year2 = dateAdapter.getYear(date2);
-        var startingYear = getStartingYear(dateAdapter, minDate, maxDate);
-        return (Math.floor((year1 - startingYear) / yearsPerPage) ===
-            Math.floor((year2 - startingYear) / yearsPerPage));
-    }
-    /**
-     * When the multi-year view is first opened, the active year will be in view.
-     * So we compute how many years are between the active year and the *slot* where our
-     * "startingYear" will render when paged into view.
-     */
-    function getActiveOffset(dateAdapter, activeDate, minDate, maxDate) {
-        var activeYear = dateAdapter.getYear(activeDate);
-        return euclideanModulo(activeYear - getStartingYear(dateAdapter, minDate, maxDate), yearsPerPage);
-    }
-    /**
-     * We pick a "starting" year such that either the maximum year would be at the end
-     * or the minimum year would be at the beginning of a page.
-     */
-    function getStartingYear(dateAdapter, minDate, maxDate) {
-        var startingYear = 0;
-        if (maxDate) {
-            var maxYear = dateAdapter.getYear(maxDate);
-            startingYear = maxYear - yearsPerPage + 1;
-        }
-        else if (minDate) {
-            startingYear = dateAdapter.getYear(minDate);
-        }
-        return startingYear;
-    }
-    /** Gets remainder that is non-negative, even if first number is negative */
-    function euclideanModulo(a, b) {
-        return ((a % b) + b) % b;
-    }
-
-    /**
-     * A calendar that is used as part of the datetimepicker.
-     * @docs-private
-     */
-    var MtxCalendar = /** @class */ (function () {
-        function MtxCalendar(_elementRef, _intl, _ngZone, _adapter, _dateFormats, changeDetectorRef) {
-            var _this = this;
-            this._elementRef = _elementRef;
-            this._intl = _intl;
-            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._clockView = 'hour';
-            this._type = 'date';
-            /** Date filter for the month and year views. */
-            this._dateFilterForViews = function (date) {
-                return (!!date &&
-                    (!_this.dateFilter || _this.dateFilter(date, exports.MtxDatetimepickerFilterType.DATE)) &&
-                    (!_this.minDate || _this._adapter.compareDate(date, _this.minDate) >= 0) &&
-                    (!_this.maxDate || _this._adapter.compareDate(date, _this.maxDate) <= 0));
-            };
-            if (!this._adapter) {
-                throw createMissingDateImplError('DatetimeAdapter');
-            }
-            if (!this._dateFormats) {
-                throw createMissingDateImplError('MTX_DATETIME_FORMATS');
-            }
-            this._intlChanges = _intl.changes.subscribe(function () { return changeDetectorRef.markForCheck(); });
-        }
-        Object.defineProperty(MtxCalendar.prototype, "multiYearSelector", {
-            get: function () {
-                return this._multiYearSelector;
-            },
-            set: function (value) {
-                this._multiYearSelector = coercion.coerceBooleanProperty(value);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MtxCalendar.prototype, "twelvehour", {
-            /** if true change the clock to 12 hour format. */
-            get: function () {
-                return this._twelvehour;
-            },
-            set: function (value) {
-                this._twelvehour = coercion.coerceBooleanProperty(value);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MtxCalendar.prototype, "type", {
-            get: function () {
-                return this._type;
-            },
-            set: function (value) {
-                this._type = value || 'date';
-                if (this.type === 'year') {
-                    this.multiYearSelector = true;
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MtxCalendar.prototype, "startAt", {
-            /** A date representing the period (month or year) to start the calendar in. */
-            get: function () {
-                return this._startAt;
-            },
-            set: function (value) {
-                this._startAt = this._adapter.getValidDateOrNull(value);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MtxCalendar.prototype, "selected", {
-            /** The currently selected date. */
-            get: function () {
-                return this._selected;
-            },
-            set: function (value) {
-                this._selected = this._adapter.getValidDateOrNull(value);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MtxCalendar.prototype, "minDate", {
-            /** The minimum selectable date. */
-            get: function () {
-                return this._minDate;
-            },
-            set: function (value) {
-                this._minDate = this._adapter.getValidDateOrNull(value);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MtxCalendar.prototype, "maxDate", {
-            /** The maximum selectable date. */
-            get: function () {
-                return this._maxDate;
-            },
-            set: function (value) {
-                this._maxDate = this._adapter.getValidDateOrNull(value);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MtxCalendar.prototype, "_activeDate", {
-            /**
-             * The current active date. This determines which time period is shown and which date is
-             * highlighted when using keyboard navigation.
-             */
-            get: function () {
-                return this._clampedActiveDate;
-            },
-            set: function (value) {
-                var oldActiveDate = this._clampedActiveDate;
-                this._clampedActiveDate = this._adapter.clampDate(value, this.minDate, this.maxDate);
-                if (oldActiveDate &&
-                    this._clampedActiveDate &&
-                    this.currentView === 'month' &&
-                    !this._adapter.sameMonthAndYear(oldActiveDate, this._clampedActiveDate)) {
-                    if (this._adapter.isInNextMonth(oldActiveDate, this._clampedActiveDate)) {
-                        this.calendarState('right');
-                    }
-                    else {
-                        this.calendarState('left');
-                    }
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MtxCalendar.prototype, "currentView", {
-            /** Whether the calendar is in month view. */
-            get: function () {
-                return this._currentView;
-            },
-            set: function (view) {
-                this._currentView = view;
-                this.viewChanged.emit(view);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MtxCalendar.prototype, "_yearLabel", {
-            /** The label for the current calendar view. */
-            get: function () {
-                return this._adapter.getYearName(this._activeDate);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MtxCalendar.prototype, "_monthYearLabel", {
-            get: function () {
-                if (this.currentView === 'multi-year') {
-                    // The offset from the active year to the "slot" for the starting year is the
-                    // *actual* first rendered year in the multi-year view, and the last year is
-                    // just yearsPerPage - 1 away.
-                    var activeYear = this._adapter.getYear(this._activeDate);
-                    var minYearOfPage = activeYear - getActiveOffset(this._adapter, this._activeDate, this.minDate, this.maxDate);
-                    var maxYearOfPage = minYearOfPage + yearsPerPage - 1;
-                    var minYearName = this._adapter.getYearName(this._adapter.createDate(minYearOfPage, 0, 1));
-                    var maxYearName = this._adapter.getYearName(this._adapter.createDate(maxYearOfPage, 0, 1));
-                    return this._intl.formatYearRange(minYearName, maxYearName);
-                }
-                return this.currentView === 'month'
-                    ? this._adapter.getMonthNames('long')[this._adapter.getMonth(this._activeDate)]
-                    : this._adapter.getYearName(this._activeDate);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MtxCalendar.prototype, "_dateLabel", {
-            get: function () {
-                switch (this.type) {
-                    case 'month':
-                        return this._adapter.getMonthNames('long')[this._adapter.getMonth(this._activeDate)];
-                    default:
-                        return this._adapter.format(this._activeDate, this._dateFormats.display.popupHeaderDateLabel);
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MtxCalendar.prototype, "_hoursLabel", {
-            get: function () {
-                var hour = this._adapter.getHour(this._activeDate);
-                if (!!this.twelvehour) {
-                    if (hour === 0) {
-                        hour = 24;
-                    }
-                    hour = hour > 12 ? hour - 12 : hour;
-                }
-                return this._2digit(hour);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MtxCalendar.prototype, "_minutesLabel", {
-            get: function () {
-                return this._2digit(this._adapter.getMinute(this._activeDate));
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MtxCalendar.prototype, "_ariaLabelNext", {
-            get: function () {
-                switch (this._currentView) {
-                    case 'month':
-                        return this.ariaNextMonthLabel;
-                    case 'year':
-                        return this.ariaNextYearLabel;
-                    case 'multi-year':
-                        return this.ariaNextMultiYearLabel;
-                    default:
-                        return '';
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MtxCalendar.prototype, "_ariaLabelPrev", {
-            get: function () {
-                switch (this._currentView) {
-                    case 'month':
-                        return this.ariaPrevMonthLabel;
-                    case 'year':
-                        return this.ariaPrevYearLabel;
-                    case 'multi-year':
-                        return this.ariaPrevMultiYearLabel;
-                    default:
-                        return '';
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        MtxCalendar.prototype._userSelected = function () {
-            this._userSelection.emit();
-        };
-        MtxCalendar.prototype.ngAfterContentInit = function () {
-            this._activeDate = this.startAt || this._adapter.today();
-            this._selectAMPM(this._activeDate);
-            if (this.type === 'year') {
-                this.currentView = 'multi-year';
-            }
-            else if (this.type === 'month') {
-                this.currentView = 'year';
-            }
-            else if (this.type === 'time') {
-                this.currentView = 'clock';
-            }
-            else {
-                this.currentView = this.startView || 'month';
-            }
-        };
-        MtxCalendar.prototype.ngOnDestroy = function () {
-            this._intlChanges.unsubscribe();
-        };
-        /** Handles date selection in the month view. */
-        MtxCalendar.prototype._dateSelected = function (date) {
-            if (this.type === 'date') {
-                if (!this._adapter.sameDate(date, this.selected) || !this.preventSameDateTimeSelection) {
-                    this.selectedChange.emit(date);
-                }
-            }
-            else {
-                this._activeDate = date;
-                this.currentView = 'clock';
-            }
-        };
-        /** Handles month selection in the year view. */
-        MtxCalendar.prototype._monthSelected = function (month) {
-            if (this.type === 'month') {
-                if (!this._adapter.sameMonthAndYear(month, this.selected) ||
-                    !this.preventSameDateTimeSelection) {
-                    this.selectedChange.emit(this._adapter.getFirstDateOfMonth(month));
-                }
-            }
-            else {
-                this._activeDate = month;
-                this.currentView = 'month';
-                this._clockView = 'hour';
-            }
-        };
-        /** Handles year selection in the multi year view. */
-        MtxCalendar.prototype._yearSelected = function (year) {
-            if (this.type === 'year') {
-                if (!this._adapter.sameYear(year, this.selected) || !this.preventSameDateTimeSelection) {
-                    var normalizedDate = this._adapter.createDatetime(this._adapter.getYear(year), 0, 1, 0, 0);
-                    this.selectedChange.emit(normalizedDate);
-                }
-            }
-            else {
-                this._activeDate = year;
-                this.currentView = 'year';
-            }
-        };
-        MtxCalendar.prototype._timeSelected = function (date) {
-            if (this._clockView !== 'minute') {
-                this._activeDate = this._updateDate(date);
-                this._clockView = 'minute';
-            }
-            else {
-                if (!this._adapter.sameDatetime(date, this.selected) || !this.preventSameDateTimeSelection) {
-                    this.selectedChange.emit(date);
-                }
-            }
-        };
-        MtxCalendar.prototype._onActiveDateChange = function (date) {
-            this._activeDate = date;
-        };
-        MtxCalendar.prototype._updateDate = function (date) {
-            if (!!this.twelvehour) {
-                var HOUR = this._adapter.getHour(date);
-                if (HOUR === 12) {
-                    if (this._AMPM === 'AM') {
-                        return this._adapter.addCalendarHours(date, -12);
-                    }
-                }
-                else if (this._AMPM === 'PM') {
-                    return this._adapter.addCalendarHours(date, 12);
-                }
-            }
-            return date;
-        };
-        MtxCalendar.prototype._selectAMPM = function (date) {
-            if (this._adapter.getHour(date) > 11) {
-                this._AMPM = 'PM';
-            }
-            else {
-                this._AMPM = 'AM';
-            }
-        };
-        MtxCalendar.prototype._ampmClicked = function (source) {
-            if (source === this._AMPM) {
-                return;
-            }
-            this._AMPM = source;
-            if (this._AMPM === 'AM') {
-                this._activeDate = this._adapter.addCalendarHours(this._activeDate, -12);
-            }
-            else {
-                this._activeDate = this._adapter.addCalendarHours(this._activeDate, 12);
-            }
-        };
-        MtxCalendar.prototype._yearClicked = function () {
-            if (this.type === 'year' || this.multiYearSelector) {
-                this.currentView = 'multi-year';
-                return;
-            }
-            this.currentView = 'year';
-        };
-        MtxCalendar.prototype._dateClicked = function () {
-            if (this.type !== 'month') {
-                this.currentView = 'month';
-            }
-        };
-        MtxCalendar.prototype._hoursClicked = function () {
-            this.currentView = 'clock';
-            this._clockView = 'hour';
-        };
-        MtxCalendar.prototype._minutesClicked = function () {
-            this.currentView = 'clock';
-            this._clockView = 'minute';
-        };
-        /** Handles user clicks on the previous button. */
-        MtxCalendar.prototype._previousClicked = function () {
-            this._activeDate =
-                this.currentView === 'month'
-                    ? this._adapter.addCalendarMonths(this._activeDate, -1)
-                    : this._adapter.addCalendarYears(this._activeDate, this.currentView === 'year' ? -1 : -yearsPerPage);
-        };
-        /** Handles user clicks on the next button. */
-        MtxCalendar.prototype._nextClicked = function () {
-            this._activeDate =
-                this.currentView === 'month'
-                    ? this._adapter.addCalendarMonths(this._activeDate, 1)
-                    : this._adapter.addCalendarYears(this._activeDate, this.currentView === 'year' ? 1 : yearsPerPage);
-        };
-        /** Whether the previous period button is enabled. */
-        MtxCalendar.prototype._previousEnabled = function () {
-            if (!this.minDate) {
-                return true;
-            }
-            return !this.minDate || !this._isSameView(this._activeDate, this.minDate);
-        };
-        /** Whether the next period button is enabled. */
-        MtxCalendar.prototype._nextEnabled = function () {
-            return !this.maxDate || !this._isSameView(this._activeDate, this.maxDate);
-        };
-        /** Handles keydown events on the calendar body. */
-        MtxCalendar.prototype._handleCalendarBodyKeydown = function (event) {
-            // TODO(mmalerba): We currently allow keyboard navigation to disabled dates, but just prevent
-            // disabled ones from being selected. This may not be ideal, we should look into whether
-            // navigation should skip over disabled dates, and if so, how to implement that efficiently.
-            if (this.currentView === 'month') {
-                this._handleCalendarBodyKeydownInMonthView(event);
-            }
-            else if (this.currentView === 'year') {
-                this._handleCalendarBodyKeydownInYearView(event);
-            }
-            else if (this.currentView === 'multi-year') {
-                this._handleCalendarBodyKeydownInMultiYearView(event);
-            }
-            else {
-                this._handleCalendarBodyKeydownInClockView(event);
-            }
-        };
-        MtxCalendar.prototype._focusActiveCell = function () {
-            var _this = this;
-            this._ngZone.runOutsideAngular(function () {
-                _this._ngZone.onStable
-                    .asObservable()
-                    .pipe(operators.first())
-                    .subscribe(function () {
-                    _this._elementRef.nativeElement.focus();
-                });
-            });
-        };
-        MtxCalendar.prototype._calendarStateDone = function () {
-            this._calendarState = '';
-        };
-        /** Whether the two dates represent the same view in the current view mode (month or year). */
-        MtxCalendar.prototype._isSameView = function (date1, date2) {
-            if (this.currentView === 'month') {
-                return (this._adapter.getYear(date1) === this._adapter.getYear(date2) &&
-                    this._adapter.getMonth(date1) === this._adapter.getMonth(date2));
-            }
-            if (this.currentView === 'year') {
-                return this._adapter.getYear(date1) === this._adapter.getYear(date2);
-            }
-            // Otherwise we are in 'multi-year' view.
-            return isSameMultiYearView(this._adapter, date1, date2, this.minDate, this.maxDate);
-        };
-        /** Handles keydown events on the calendar body when calendar is in month view. */
-        MtxCalendar.prototype._handleCalendarBodyKeydownInMonthView = function (event) {
-            switch (event.keyCode) {
-                case keycodes.LEFT_ARROW:
-                    this._activeDate = this._adapter.addCalendarDays(this._activeDate, -1);
-                    break;
-                case keycodes.RIGHT_ARROW:
-                    this._activeDate = this._adapter.addCalendarDays(this._activeDate, 1);
-                    break;
-                case keycodes.UP_ARROW:
-                    this._activeDate = this._adapter.addCalendarDays(this._activeDate, -7);
-                    break;
-                case keycodes.DOWN_ARROW:
-                    this._activeDate = this._adapter.addCalendarDays(this._activeDate, 7);
-                    break;
-                case keycodes.HOME:
-                    this._activeDate = this._adapter.addCalendarDays(this._activeDate, 1 - this._adapter.getDate(this._activeDate));
-                    break;
-                case keycodes.END:
-                    this._activeDate = this._adapter.addCalendarDays(this._activeDate, this._adapter.getNumDaysInMonth(this._activeDate) -
-                        this._adapter.getDate(this._activeDate));
-                    break;
-                case keycodes.PAGE_UP:
-                    this._activeDate = event.altKey
-                        ? this._adapter.addCalendarYears(this._activeDate, -1)
-                        : this._adapter.addCalendarMonths(this._activeDate, -1);
-                    break;
-                case keycodes.PAGE_DOWN:
-                    this._activeDate = event.altKey
-                        ? this._adapter.addCalendarYears(this._activeDate, 1)
-                        : this._adapter.addCalendarMonths(this._activeDate, 1);
-                    break;
-                case keycodes.ENTER:
-                    if (this._dateFilterForViews(this._activeDate)) {
-                        this._dateSelected(this._activeDate);
-                        // Prevent unexpected default actions such as form submission.
-                        event.preventDefault();
-                    }
-                    return;
-                default:
-                    // Don't prevent default or focus active cell on keys that we don't explicitly handle.
-                    return;
-            }
-            // Prevent unexpected default actions such as form submission.
-            event.preventDefault();
-        };
-        /** Handles keydown events on the calendar body when calendar is in year view. */
-        MtxCalendar.prototype._handleCalendarBodyKeydownInYearView = function (event) {
-            switch (event.keyCode) {
-                case keycodes.LEFT_ARROW:
-                    this._activeDate = this._adapter.addCalendarMonths(this._activeDate, -1);
-                    break;
-                case keycodes.RIGHT_ARROW:
-                    this._activeDate = this._adapter.addCalendarMonths(this._activeDate, 1);
-                    break;
-                case keycodes.UP_ARROW:
-                    this._activeDate = this._prevMonthInSameCol(this._activeDate);
-                    break;
-                case keycodes.DOWN_ARROW:
-                    this._activeDate = this._nextMonthInSameCol(this._activeDate);
-                    break;
-                case keycodes.HOME:
-                    this._activeDate = this._adapter.addCalendarMonths(this._activeDate, -this._adapter.getMonth(this._activeDate));
-                    break;
-                case keycodes.END:
-                    this._activeDate = this._adapter.addCalendarMonths(this._activeDate, 11 - this._adapter.getMonth(this._activeDate));
-                    break;
-                case keycodes.PAGE_UP:
-                    this._activeDate = this._adapter.addCalendarYears(this._activeDate, event.altKey ? -10 : -1);
-                    break;
-                case keycodes.PAGE_DOWN:
-                    this._activeDate = this._adapter.addCalendarYears(this._activeDate, event.altKey ? 10 : 1);
-                    break;
-                case keycodes.ENTER:
-                    this._monthSelected(this._activeDate);
-                    break;
-                default:
-                    // Don't prevent default or focus active cell on keys that we don't explicitly handle.
-                    return;
-            }
-            // Prevent unexpected default actions such as form submission.
-            event.preventDefault();
-        };
-        /** Handles keydown events on the calendar body when calendar is in multi-year view. */
-        MtxCalendar.prototype._handleCalendarBodyKeydownInMultiYearView = function (event) {
-            switch (event.keyCode) {
-                case keycodes.LEFT_ARROW:
-                    this._activeDate = this._adapter.addCalendarYears(this._activeDate, -1);
-                    break;
-                case keycodes.RIGHT_ARROW:
-                    this._activeDate = this._adapter.addCalendarYears(this._activeDate, 1);
-                    break;
-                case keycodes.UP_ARROW:
-                    this._activeDate = this._adapter.addCalendarYears(this._activeDate, -yearsPerRow);
-                    break;
-                case keycodes.DOWN_ARROW:
-                    this._activeDate = this._adapter.addCalendarYears(this._activeDate, yearsPerRow);
-                    break;
-                case keycodes.HOME:
-                    this._activeDate = this._adapter.addCalendarYears(this._activeDate, -getActiveOffset(this._adapter, this._activeDate, this.minDate, this.maxDate));
-                    break;
-                case keycodes.END:
-                    this._activeDate = this._adapter.addCalendarYears(this._activeDate, yearsPerPage -
-                        getActiveOffset(this._adapter, this._activeDate, this.minDate, this.maxDate) -
-                        1);
-                    break;
-                case keycodes.PAGE_UP:
-                    this._activeDate = this._adapter.addCalendarYears(this._activeDate, event.altKey ? -yearsPerPage * 10 : -yearsPerPage);
-                    break;
-                case keycodes.PAGE_DOWN:
-                    this._activeDate = this._adapter.addCalendarYears(this._activeDate, event.altKey ? yearsPerPage * 10 : yearsPerPage);
-                    break;
-                case keycodes.ENTER:
-                    this._yearSelected(this._activeDate);
-                    break;
-                default:
-                    // Don't prevent default or focus active cell on keys that we don't explicitly handle.
-                    return;
-            }
-        };
-        /** Handles keydown events on the calendar body when calendar is in month view. */
-        MtxCalendar.prototype._handleCalendarBodyKeydownInClockView = function (event) {
-            switch (event.keyCode) {
-                case keycodes.UP_ARROW:
-                    this._activeDate =
-                        this._clockView === 'hour'
-                            ? this._adapter.addCalendarHours(this._activeDate, 1)
-                            : this._adapter.addCalendarMinutes(this._activeDate, 1);
-                    break;
-                case keycodes.DOWN_ARROW:
-                    this._activeDate =
-                        this._clockView === 'hour'
-                            ? this._adapter.addCalendarHours(this._activeDate, -1)
-                            : this._adapter.addCalendarMinutes(this._activeDate, -1);
-                    break;
-                case keycodes.ENTER:
-                    this._timeSelected(this._activeDate);
-                    return;
-                default:
-                    // Don't prevent default or focus active cell on keys that we don't explicitly handle.
-                    return;
-            }
-            // Prevent unexpected default actions such as form submission.
-            event.preventDefault();
-        };
-        /**
-         * Determine the date for the month that comes before the given month in the same column in the
-         * calendar table.
-         */
-        MtxCalendar.prototype._prevMonthInSameCol = function (date) {
-            // Determine how many months to jump forward given that there are 2 empty slots at the beginning
-            // of each year.
-            var increment = this._adapter.getMonth(date) <= 4 ? -5 : this._adapter.getMonth(date) >= 7 ? -7 : -12;
-            return this._adapter.addCalendarMonths(date, increment);
-        };
-        /**
-         * Determine the date for the month that comes after the given month in the same column in the
-         * calendar table.
-         */
-        MtxCalendar.prototype._nextMonthInSameCol = function (date) {
-            // Determine how many months to jump forward given that there are 2 empty slots at the beginning
-            // of each year.
-            var increment = this._adapter.getMonth(date) <= 4 ? 7 : this._adapter.getMonth(date) >= 7 ? 5 : 12;
-            return this._adapter.addCalendarMonths(date, increment);
-        };
-        MtxCalendar.prototype.calendarState = function (direction) {
-            this._calendarState = direction;
-        };
-        MtxCalendar.prototype._2digit = function (n) {
-            return ('00' + n).slice(-2);
-        };
-        return MtxCalendar;
-    }());
-    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
-    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",
-                    host: {
-                        'class': 'mtx-calendar',
-                        '[attr.aria-label]': 'ariaLabel',
-                        'tabindex': '0',
-                        '(keydown)': '_handleCalendarBodyKeydown($event)',
-                    },
-                    animations: [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:auto;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(33% / 7 - 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"]
-                },] }
-    ];
-    /**
-     * @type {function(): !Array<(null|{
-     *   type: ?,
-     *   decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
-     * })>}
-     * @nocollapse
-     */
-    MtxCalendar.ctorParameters = function () { return [
-        { type: core.ElementRef },
-        { type: datepicker.MatDatepickerIntl },
-        { type: core.NgZone },
-        { type: core$1.DatetimeAdapter, decorators: [{ type: core.Optional }] },
-        { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [core$1.MTX_DATETIME_FORMATS,] }] },
-        { type: core.ChangeDetectorRef }
-    ]; };
-    /** @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 }],
-        type: [{ type: core.Input }],
-        startAt: [{ type: core.Input }],
-        selected: [{ type: core.Input }],
-        minDate: [{ type: core.Input }],
-        maxDate: [{ type: core.Input }]
-    };
-
-    var CLOCK_RADIUS = 50;
-    var CLOCK_INNER_RADIUS = 27.5;
-    var CLOCK_OUTER_RADIUS = 41.25;
-    var CLOCK_TICK_RADIUS = 7.0833;
-    /**
-     * A clock that is used as part of the datetimepicker.
-     * @docs-private
-     */
-    var MtxClock = /** @class */ (function () {
-        function MtxClock(_element, _adapter) {
-            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();
-            this.activeDateChange = new core.EventEmitter();
-            /** Hours and Minutes representing the clock view. */
-            this._hours = [];
-            this._minutes = [];
-            /** Whether the clock is in hour view. */
-            this._hourView = true;
-            this._timeChanged = false;
-            this.mouseMoveListener = function (event) {
-                _this._handleMousemove(event);
-            };
-            this.mouseUpListener = function () {
-                _this._handleMouseup();
-            };
-        }
-        Object.defineProperty(MtxClock.prototype, "activeDate", {
-            /**
-             * The date to display in this clock view.
-             */
-            get: function () {
-                return this._activeDate;
-            },
-            set: function (value) {
-                var oldActiveDate = this._activeDate;
-                this._activeDate = this._adapter.clampDate(value, this.minDate, this.maxDate);
-                if (!this._adapter.sameMinute(oldActiveDate, this._activeDate)) {
-                    this._init();
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MtxClock.prototype, "selected", {
-            /** The currently selected date. */
-            get: function () {
-                return this._selected;
-            },
-            set: function (value) {
-                this._selected = this._adapter.getValidDateOrNull(this._adapter.deserialize(value));
-                if (this._selected) {
-                    this.activeDate = this._selected;
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MtxClock.prototype, "minDate", {
-            /** The minimum selectable date. */
-            get: function () {
-                return this._minDate;
-            },
-            set: function (value) {
-                this._minDate = this._adapter.getValidDateOrNull(this._adapter.deserialize(value));
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MtxClock.prototype, "maxDate", {
-            /** The maximum selectable date. */
-            get: function () {
-                return this._maxDate;
-            },
-            set: function (value) {
-                this._maxDate = this._adapter.getValidDateOrNull(this._adapter.deserialize(value));
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MtxClock.prototype, "startView", {
-            /** Whether the clock should be started in hour or minute view. */
-            set: function (value) {
-                this._hourView = value !== 'minute';
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MtxClock.prototype, "_hand", {
-            get: function () {
-                var hour = this._adapter.getHour(this.activeDate);
-                if (!!this.twelvehour) {
-                    if (hour === 0) {
-                        hour = 24;
-                    }
-                    this._selectedHour = hour > 12 ? hour - 12 : hour;
-                }
-                else {
-                    this._selectedHour = hour;
-                }
-                this._selectedMinute = this._adapter.getMinute(this.activeDate);
-                var deg = 0;
-                var radius = CLOCK_OUTER_RADIUS;
-                if (this._hourView) {
-                    var outer = this._selectedHour > 0 && this._selectedHour < 13;
-                    radius = outer ? CLOCK_OUTER_RADIUS : CLOCK_INNER_RADIUS;
-                    if (this.twelvehour) {
-                        radius = CLOCK_OUTER_RADIUS;
-                    }
-                    deg = Math.round(this._selectedHour * (360 / (24 / 2)));
-                }
-                else {
-                    deg = Math.round(this._selectedMinute * (360 / 60));
-                }
-                return {
-                    'transform': "rotate(" + deg + "deg)",
-                    'height': radius + "%",
-                    'margin-top': 50 - radius + "%",
-                };
-            },
-            enumerable: false,
-            configurable: true
-        });
-        MtxClock.prototype.ngAfterContentInit = function () {
-            this.activeDate = this._activeDate || this._adapter.today();
-            this._init();
-        };
-        /**
-         * TODO: use `fromEvent` of rxjs.
-         * Handles mousedown events on the clock body.
-         */
-        MtxClock.prototype._handleMousedown = function (event) {
-            this._timeChanged = false;
-            this.setTime(event);
-            document.addEventListener('mousemove', this.mouseMoveListener);
-            document.addEventListener('touchmove', this.mouseMoveListener);
-            document.addEventListener('mouseup', this.mouseUpListener);
-            document.addEventListener('touchend', this.mouseUpListener);
-        };
-        MtxClock.prototype._handleMousemove = function (event) {
-            event.preventDefault();
-            this.setTime(event);
-        };
-        MtxClock.prototype._handleMouseup = function () {
-            document.removeEventListener('mousemove', this.mouseMoveListener);
-            document.removeEventListener('touchmove', this.mouseMoveListener);
-            document.removeEventListener('mouseup', this.mouseUpListener);
-            document.removeEventListener('touchend', this.mouseUpListener);
-            if (this._timeChanged) {
-                this.selectedChange.emit(this.activeDate);
-                if (!this._hourView) {
-                    this._userSelection.emit();
-                }
-            }
-        };
-        /** Initializes this clock view. */
-        MtxClock.prototype._init = function () {
-            this._hours.length = 0;
-            this._minutes.length = 0;
-            var hourNames = this._adapter.getHourNames();
-            var minuteNames = this._adapter.getMinuteNames();
-            if (this.twelvehour) {
-                for (var i = 1; i < hourNames.length / 2 + 1; i++) {
-                    var radian = (i / 6) * Math.PI;
-                    var radius = CLOCK_OUTER_RADIUS;
-                    var date = this._adapter.createDatetime(this._adapter.getYear(this.activeDate), this._adapter.getMonth(this.activeDate), this._adapter.getDate(this.activeDate), i + 1, 0);
-                    var enabled = (!this.minDate || this._adapter.compareDatetime(date, this.minDate) >= 0) &&
-                        (!this.maxDate || this._adapter.compareDatetime(date, this.maxDate) <= 0);
-                    this._hours.push({
-                        value: i,
-                        displayValue: i === 0 ? '00' : hourNames[i],
-                        enabled: enabled,
-                        top: CLOCK_RADIUS - Math.cos(radian) * radius - CLOCK_TICK_RADIUS,
-                        left: CLOCK_RADIUS + Math.sin(radian) * radius - CLOCK_TICK_RADIUS,
-                    });
-                }
-            }
-            else {
-                for (var i = 0; i < hourNames.length; i++) {
-                    var radian = (i / 6) * Math.PI;
-                    var outer = i > 0 && i < 13;
-                    var radius = outer ? CLOCK_OUTER_RADIUS : CLOCK_INNER_RADIUS;
-                    var date = this._adapter.createDatetime(this._adapter.getYear(this.activeDate), this._adapter.getMonth(this.activeDate), this._adapter.getDate(this.activeDate), i, 0);
-                    var enabled = (!this.minDate || this._adapter.compareDatetime(date, this.minDate, false) >= 0) &&
-                        (!this.maxDate || this._adapter.compareDatetime(date, this.maxDate, false) <= 0) &&
-                        (!this.dateFilter || this.dateFilter(date, exports.MtxDatetimepickerFilterType.HOUR));
-                    this._hours.push({
-                        value: i,
-                        displayValue: i === 0 ? '00' : hourNames[i],
-                        enabled: enabled,
-                        top: CLOCK_RADIUS - Math.cos(radian) * radius - CLOCK_TICK_RADIUS,
-                        left: CLOCK_RADIUS + Math.sin(radian) * radius - CLOCK_TICK_RADIUS,
-                        fontSize: i > 0 && i < 13 ? '' : '80%',
-                    });
-                }
-            }
-            for (var i = 0; i < minuteNames.length; i += 5) {
-                var radian = (i / 30) * Math.PI;
-                var date = this._adapter.createDatetime(this._adapter.getYear(this.activeDate), this._adapter.getMonth(this.activeDate), this._adapter.getDate(this.activeDate), this._adapter.getHour(this.activeDate), i);
-                var enabled = (!this.minDate || this._adapter.compareDatetime(date, this.minDate) >= 0) &&
-                    (!this.maxDate || this._adapter.compareDatetime(date, this.maxDate) <= 0) &&
-                    (!this.dateFilter || this.dateFilter(date, exports.MtxDatetimepickerFilterType.MINUTE));
-                this._minutes.push({
-                    value: i,
-                    displayValue: i === 0 ? '00' : minuteNames[i],
-                    enabled: enabled,
-                    top: CLOCK_RADIUS - Math.cos(radian) * CLOCK_OUTER_RADIUS - CLOCK_TICK_RADIUS,
-                    left: CLOCK_RADIUS + Math.sin(radian) * CLOCK_OUTER_RADIUS - CLOCK_TICK_RADIUS,
-                });
-            }
-        };
-        /**
-         * Set Time
-         * @param event
-         */
-        MtxClock.prototype.setTime = function (event) {
-            var trigger = this._element.nativeElement;
-            var triggerRect = trigger.getBoundingClientRect();
-            var width = trigger.offsetWidth;
-            var height = trigger.offsetHeight;
-            var pageX = event.pageX !== undefined ? event.pageX : event.touches[0].pageX;
-            var pageY = event.pageY !== undefined ? event.pageY : event.touches[0].pageY;
-            var x = width / 2 - (pageX - triggerRect.left - window.pageXOffset);
-            var y = height / 2 - (pageY - triggerRect.top - window.pageYOffset);
-            var radian = Math.atan2(-x, y);
-            var unit = Math.PI / (this._hourView ? 6 : this.interval ? 30 / this.interval : 30);
-            var z = Math.sqrt(x * x + y * y);
-            var outer = this._hourView &&
-                z > (width * (CLOCK_OUTER_RADIUS / 100) + width * (CLOCK_INNER_RADIUS / 100)) / 2;
-            if (radian < 0) {
-                radian = Math.PI * 2 + radian;
-            }
-            var value = Math.round(radian / unit);
-            var date;
-            if (this._hourView) {
-                if (this.twelvehour) {
-                    value = value === 0 ? 12 : value;
-                }
-                else {
-                    if (value === 12) {
-                        value = 0;
-                    }
-                    value = outer ? (value === 0 ? 12 : value) : value === 0 ? 0 : value + 12;
-                }
-                date = this._adapter.createDatetime(this._adapter.getYear(this.activeDate), this._adapter.getMonth(this.activeDate), this._adapter.getDate(this.activeDate), value, this._adapter.getMinute(this.activeDate));
-            }
-            else {
-                if (this.interval) {
-                    value *= this.interval;
-                }
-                if (value === 60) {
-                    value = 0;
-                }
-                date = this._adapter.createDatetime(this._adapter.getYear(this.activeDate), this._adapter.getMonth(this.activeDate), this._adapter.getDate(this.activeDate), this._adapter.getHour(this.activeDate), value);
-            }
-            this._timeChanged = true;
-            this.activeDate = date;
-            this.activeDateChange.emit(this.activeDate);
-        };
-        return MtxClock;
-    }());
-    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
-    MtxClock.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'mtx-clock',
-                    template: "<div class=\"mtx-clock-wrapper\">\n  <div class=\"mtx-clock-center\"></div>\n  <div [ngStyle]=\"_hand\" class=\"mtx-clock-hand\"></div>\n  <div [class.active]=\"_hourView\" class=\"mtx-clock-hours\">\n    <div *ngFor=\"let item of _hours\"\n         [class.mtx-clock-cell-disabled]=\"!item.enabled\"\n         [class.mtx-clock-cell-selected]=\"_selectedHour == item.value\"\n         [style.fontSize]=\"item.fontSize\"\n         [style.left]=\"item.left+'%'\"\n         [style.top]=\"item.top+'%'\"\n         class=\"mtx-clock-cell\">{{ item.displayValue }}</div>\n  </div>\n  <div [class.active]=\"!_hourView\" class=\"mtx-clock-minutes\">\n    <div *ngFor=\"let item of _minutes\"\n         [class.mtx-clock-cell-disabled]=\"!item.enabled\"\n         [class.mtx-clock-cell-selected]=\"_selectedMinute == item.value\"\n         [style.left]=\"item.left+'%'\"\n         [style.top]=\"item.top+'%'\"\n         class=\"mtx-clock-cell\">{{ item.displayValue }}</div>\n  </div>\n</div>\n",
-                    host: {
-                        '[class.mtx-clock]': 'true',
-                        'role': 'clock',
-                        '(mousedown)': '_handleMousedown($event)',
-                    },
-                    encapsulation: core.ViewEncapsulation.None,
-                    styles: [".mtx-clock{position:relative;display:block;min-width:224px;margin:8px;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-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"]
-                },] }
-    ];
-    /**
-     * @type {function(): !Array<(null|{
-     *   type: ?,
-     *   decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
-     * })>}
-     * @nocollapse
-     */
-    MtxClock.ctorParameters = function () { return [
-        { type: core.ElementRef },
-        { type: core$1.DatetimeAdapter }
-    ]; };
-    /** @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 }],
-        activeDate: [{ type: core.Input }],
-        selected: [{ type: core.Input }],
-        minDate: [{ type: core.Input }],
-        maxDate: [{ type: core.Input }],
-        startView: [{ type: core.Input }]
-    };
-
-    /** Used to generate a unique ID for each datetimepicker instance. */
-    var datetimepickerUid = 0;
-    /**
-     * 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
-     * a place to put additional features of the popup that are not part of the calendar itself in the
-     * future. (e.g. confirmation buttons).
-     * @docs-private
-     */
-    var MtxDatetimepickerContent = /** @class */ (function () {
-        function MtxDatetimepickerContent() {
-        }
-        MtxDatetimepickerContent.prototype.ngAfterContentInit = function () {
-            this._calendar._focusActiveCell();
-        };
-        MtxDatetimepickerContent.prototype.onSelectionChange = function (date) {
-            this.datetimepicker._select(date);
-            this.datetimepicker.close();
-        };
-        return MtxDatetimepickerContent;
-    }());
-    /** @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",
-                    host: {
-                        'class': 'mtx-datetimepicker-content',
-                        '[class.mtx-datetimepicker-content-touch]': 'datetimepicker?.touchUi',
-                        '[attr.mode]': 'datetimepicker.mode',
-                    },
-                    encapsulation: core.ViewEncapsulation.None,
-                    changeDetection: core.ChangeDetectionStrategy.OnPush,
-                    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 {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
-    MtxDatetimepickerContent.propDecorators = {
-        _calendar: [{ type: core.ViewChild, args: [MtxCalendar, { static: true },] }]
-    };
-    var MtxDatetimepicker = /** @class */ (function () {
-        function MtxDatetimepicker(_overlay, _ngZone, _viewContainerRef, _scrollStrategy, _dateAdapter, _dir) {
-            this._overlay = _overlay;
-            this._ngZone = _ngZone;
-            this._viewContainerRef = _viewContainerRef;
-            this._scrollStrategy = _scrollStrategy;
-            this._dateAdapter = _dateAdapter;
-            this._dir = _dir;
-            this._multiYearSelector = false;
-            this._twelvehour = false;
-            /** The view that the calendar should start in. */
-            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;
-            /**
-             * Emits new selected date when selected date changes.
-             * @deprecated Switch to the `dateChange` and `dateInput` binding on the input element.
-             */
-            this.selectedChanged = new core.EventEmitter();
-            /** Emits when the datetimepicker has been opened. */
-            this.openedStream = new core.EventEmitter();
-            /** Emits when the datetimepicker has been closed. */
-            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;
-            /** The id for the datetimepicker calendar. */
-            this.id = "mtx-datetimepicker-" + datetimepickerUid++;
-            /** Emits when the datetimepicker is disabled. */
-            this._disabledChange = new rxjs.Subject();
-            this._validSelected = null;
-            /** The element that was focused before the datetimepicker was opened. */
-            this._focusedElementBeforeOpen = null;
-            /** Unique class that will be added to the backdrop so that the test harnesses can look it up. */
-            this._backdropHarnessClass = this.id + "-backdrop";
-            this._inputStateChanges = rxjs.Subscription.EMPTY;
-            this._type = 'date';
-            this._touchUi = false;
-            if (!this._dateAdapter) {
-                throw createMissingDateImplError('DateAdapter');
-            }
-        }
-        Object.defineProperty(MtxDatetimepicker.prototype, "multiYearSelector", {
-            /** Active multi year view when click on year. */
-            get: function () {
-                return this._multiYearSelector;
-            },
-            set: function (value) {
-                this._multiYearSelector = coercion.coerceBooleanProperty(value);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MtxDatetimepicker.prototype, "twelvehour", {
-            /** if true change the clock to 12 hour format. */
-            get: function () {
-                return this._twelvehour;
-            },
-            set: function (value) {
-                this._twelvehour = coercion.coerceBooleanProperty(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
-        });
-        Object.defineProperty(MtxDatetimepicker.prototype, "openOnFocus", {
-            get: function () {
-                return this._openOnFocus;
-            },
-            set: function (value) {
-                this._openOnFocus = coercion.coerceBooleanProperty(value);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MtxDatetimepicker.prototype, "type", {
-            get: function () {
-                return this._type;
-            },
-            set: function (value) {
-                this._type = value || 'date';
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MtxDatetimepicker.prototype, "touchUi", {
-            /**
-             * Whether the calendar UI is in touch mode. In touch mode the calendar opens in a dialog rather
-             * than a popup and elements have more padding to allow for bigger touch targets.
-             */
-            get: function () {
-                return this._touchUi;
-            },
-            set: function (value) {
-                this._touchUi = coercion.coerceBooleanProperty(value);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MtxDatetimepicker.prototype, "disabled", {
-            /** Whether the datetimepicker pop-up should be disabled. */
-            get: function () {
-                return this._disabled === undefined && this._datetimepickerInput
-                    ? this._datetimepickerInput.disabled
-                    : !!this._disabled;
-            },
-            set: function (value) {
-                var newValue = coercion.coerceBooleanProperty(value);
-                if (newValue !== this._disabled) {
-                    this._disabled = newValue;
-                    this._disabledChange.next(newValue);
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MtxDatetimepicker.prototype, "_selected", {
-            /** The currently selected date. */
-            get: function () {
-                return this._validSelected;
-            },
-            set: function (value) {
-                this._validSelected = value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MtxDatetimepicker.prototype, "_minDate", {
-            /** The minimum selectable date. */
-            get: function () {
-                return this._datetimepickerInput && this._datetimepickerInput.min;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MtxDatetimepicker.prototype, "_maxDate", {
-            /** The maximum selectable date. */
-            get: function () {
-                return this._datetimepickerInput && this._datetimepickerInput.max;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MtxDatetimepicker.prototype, "_dateFilter", {
-            get: function () {
-                return this._datetimepickerInput && this._datetimepickerInput._dateFilter;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        MtxDatetimepicker.prototype._viewChanged = function (type) {
-            this.viewChanged.emit(type);
-        };
-        MtxDatetimepicker.prototype.ngOnDestroy = function () {
-            this._destroyOverlay();
-            this.close();
-            this._inputStateChanges.unsubscribe();
-            this._disabledChange.complete();
-        };
-        /**
-         * TODO: use model
-         * Selects the given date
-         */
-        MtxDatetimepicker.prototype._select = function (date) {
-            var oldValue = this._selected;
-            this._selected = date;
-            if (!this._dateAdapter.sameDatetime(oldValue, this._selected)) {
-                this.selectedChanged.emit(date);
-            }
-        };
-        /**
-         * Register an input with this datetimepicker.
-         * @param input The datetimepicker input to register with this datetimepicker.
-         */
-        MtxDatetimepicker.prototype._registerInput = function (input) {
-            var _this = this;
-            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); });
-        };
-        /** Open the calendar. */
-        MtxDatetimepicker.prototype.open = function () {
-            if (this.opened || this.disabled) {
-                return;
-            }
-            if (!this._datetimepickerInput) {
-                throw Error('Attempted to open an MtxDatetimepicker with no associated input.');
-            }
-            this._focusedElementBeforeOpen = platform._getFocusedElementPierceShadowDom();
-            this._openOverlay();
-            this.opened = true;
-            this.openedStream.emit();
-        };
-        /** Close the calendar. */
-        MtxDatetimepicker.prototype.close = function () {
-            var _this = this;
-            if (!this.opened) {
-                return;
-            }
-            if (this._componentRef) {
-                this._destroyOverlay();
-            }
-            var completeClose = function () {
-                // The `_opened` could've been reset already if
-                // we got two events in quick succession.
-                if (_this.opened) {
-                    _this.opened = false;
-                    _this.closedStream.emit();
-                    _this._focusedElementBeforeOpen = null;
-                }
-            };
-            if (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
-                // that we're refocusing opens the datetimepicker on focus, the user could be stuck with not
-                // being able to close the calendar at all. We work around it by making the logic, that marks
-                // the datetimepicker as closed, async as well.
-                this._focusedElementBeforeOpen.focus();
-                setTimeout(completeClose);
-            }
-            else {
-                completeClose();
-            }
-        };
-        /**
-         * 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;
-        };
-        /** 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 portal$1 = new portal.ComponentPortal(MtxDatetimepickerContent, this._viewContainerRef);
-            var overlayRef = (this._overlayRef = this._overlay.create(new overlay.OverlayConfig({
-                positionStrategy: isDialog ? this._getDialogStrategy() : this._getDropdownStrategy(),
-                hasBackdrop: true,
-                backdropClass: [
-                    isDialog ? 'cdk-overlay-dark-backdrop' : 'mat-overlay-transparent-backdrop',
-                    this._backdropHarnessClass,
-                ],
-                direction: this._dir,
-                scrollStrategy: isDialog ? this._overlay.scrollStrategies.block() : this._scrollStrategy(),
-                panelClass: "mtx-datetimepicker-" + (isDialog ? 'dialog' : 'popup'),
-            })));
-            var overlayElement = overlayRef.overlayElement;
-            overlayElement.setAttribute('role', 'dialog');
-            if (labelId) {
-                overlayElement.setAttribute('aria-labelledby', labelId);
-            }
-            if (isDialog) {
-                overlayElement.setAttribute('aria-modal', 'true');
-            }
-            this._getCloseStream(overlayRef).subscribe(function (event) {
-                if (event) {
-                    event.preventDefault();
-                }
-                _this.close();
-            });
-            this._componentRef = overlayRef.attach(portal$1);
-            this._forwardContentValues(this._componentRef.instance);
-            // Update the position once the calendar has rendered. Only relevant in dropdown mode.
-            if (!isDialog) {
-                this._ngZone.onStable.pipe(operators.take(1)).subscribe(function () { return overlayRef.updatePosition(); });
-            }
-        };
-        /** Destroys the current overlay. */
-        MtxDatetimepicker.prototype._destroyOverlay = function () {
-            if (this._overlayRef) {
-                this._overlayRef.dispose();
-                this._overlayRef = this._componentRef = null;
-            }
-        };
-        /** Gets a position strategy that will open the calendar as a dropdown. */
-        MtxDatetimepicker.prototype._getDialogStrategy = function () {
-            return this._overlay.position().global().centerHorizontally().centerVertically();
-        };
-        /** Gets a position strategy that will open the calendar as a dropdown. */
-        MtxDatetimepicker.prototype._getDropdownStrategy = function () {
-            var strategy = this._overlay
-                .position()
-                .flexibleConnectedTo(this._datetimepickerInput.getConnectedOverlayOrigin())
-                .withTransformOriginOn('.mtx-datetimepicker-content')
-                .withFlexibleDimensions(false)
-                .withViewportMargin(8)
-                .withLockedPosition();
-            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) {
-            return strategy.withPositions([
-                {
-                    originX: 'start',
-                    originY: 'bottom',
-                    overlayX: 'start',
-                    overlayY: 'top',
-                },
-                {
-                    originX: 'start',
-                    originY: 'top',
-                    overlayX: 'start',
-                    overlayY: 'bottom',
-                },
-                {
-                    originX: 'end',
-                    originY: 'bottom',
-                    overlayX: 'end',
-                    overlayY: 'top',
-                },
-                {
-                    originX: 'end',
-                    originY: 'top',
-                    overlayX: 'end',
-                    overlayY: 'bottom',
-                },
-            ]);
-        };
-        /** Gets an observable that will emit when the overlay is supposed to be closed. */
-        MtxDatetimepicker.prototype._getCloseStream = function (overlayRef) {
-            var _this = this;
-            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 &&
-                        keycodes.hasModifierKey(event, 'altKey') &&
-                        event.keyCode === keycodes.UP_ARROW));
-            })));
-        };
-        return MtxDatetimepicker;
-    }());
-    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
-    MtxDatetimepicker.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'mtx-datetimepicker',
-                    exportAs: 'mtxDatetimepicker',
-                    template: '',
-                    changeDetection: core.ChangeDetectionStrategy.OnPush,
-                    encapsulation: core.ViewEncapsulation.None,
-                    preserveWhitespaces: false
-                },] }
-    ];
-    /**
-     * @type {function(): !Array<(null|{
-     *   type: ?,
-     *   decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
-     * })>}
-     * @nocollapse
-     */
-    MtxDatetimepicker.ctorParameters = function () { return [
-        { type: overlay.Overlay },
-        { type: core.NgZone },
-        { type: core.ViewContainerRef },
-        { type: undefined, decorators: [{ type: core.Inject, args: [datepicker.MAT_DATEPICKER_SCROLL_STRATEGY,] }] },
-        { type: core$1.DatetimeAdapter, decorators: [{ type: core.Optional }] },
-        { type: bidi.Directionality, decorators: [{ type: core.Optional }] }
-    ]; };
-    /** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
-    MtxDatetimepicker.propDecorators = {
-        multiYearSelector: [{ type: core.Input }],
-        twelvehour: [{ type: core.Input }],
-        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 }],
-        startAt: [{ type: core.Input }],
-        openOnFocus: [{ type: core.Input }],
-        type: [{ type: core.Input }],
-        touchUi: [{ type: core.Input }],
-        disabled: [{ type: core.Input }]
-    };
-
-    var MAT_DATETIMEPICKER_VALUE_ACCESSOR = {
-        provide: forms.NG_VALUE_ACCESSOR,
-        useExisting: core.forwardRef(function () { return MtxDatetimepickerInput; }),
-        multi: true,
-    };
-    var MAT_DATETIMEPICKER_VALIDATORS = {
-        provide: forms.NG_VALIDATORS,
-        useExisting: core.forwardRef(function () { return MtxDatetimepickerInput; }),
-        multi: true,
-    };
-    /**
-     * An event used for datetimepicker input and change events. We don't always have access to a native
-     * input or change event because the event may have been triggered by the user clicking on the
-     * calendar popup. For consistency, we always use MtxDatetimepickerInputEvent instead.
-     */
-    var MtxDatetimepickerInputEvent = /** @class */ (function () {
-        function MtxDatetimepickerInputEvent(target, targetElement) {
-            this.target = target;
-            this.targetElement = targetElement;
-            this.value = this.target.value;
-        }
-        return MtxDatetimepickerInputEvent;
-    }());
-    /** Directive used to connect an input to a MtxDatetimepicker. */
-    var MtxDatetimepickerInput = /** @class */ (function () {
-        function MtxDatetimepickerInput(_elementRef, _dateAdapter, _dateFormats, _formField) {
-            var _this = this;
-            this._elementRef = _elementRef;
-            this._dateAdapter = _dateAdapter;
-            this._dateFormats = _dateFormats;
-            this._formField = _formField;
-            /** Emits when a `change` event is fired on this `<input>`. */
-            this.dateChange = new core.EventEmitter();
-            /** Emits when an `input` event is fired on this `<input>`. */
-            this.dateInput = new core.EventEmitter();
-            /** Emits when the value changes (either due to user input or programmatic change). */
-            this._valueChange = new core.EventEmitter();
-            /** Emits when the disabled state has changed */
-            this._disabledChange = new core.EventEmitter();
-            this._datetimepickerSubscription = rxjs.Subscription.EMPTY;
-            this._localeSubscription = rxjs.Subscription.EMPTY;
-            /** Whether the last value set on the input was valid. */
-            this._lastValueValid = false;
-            this._onTouched = function () { };
-            this._cvaOnChange = function () { };
-            this._validatorOnChange = function () { };
-            /** The form control validator for whether the input parses. */
-            this._parseValidator = function () {
-                return _this._lastValueValid
-                    ? null
-                    : { mtxDatetimepickerParse: { text: _this._elementRef.nativeElement.value } };
-            };
-            /** The form control validator for the min date. */
-            this._minValidator = function (control) {
-                var controlValue = _this._dateAdapter.getValidDateOrNull(_this._dateAdapter.deserialize(control.value));
-                return !_this.min ||
-                    !controlValue ||
-                    _this._dateAdapter.compareDatetime(_this.min, controlValue) <= 0
-                    ? null
-                    : { mtxDatetimepickerMin: { min: _this.min, actual: controlValue } };
-            };
-            /** The form control validator for the max date. */
-            this._maxValidator = function (control) {
-                var controlValue = _this._dateAdapter.getValidDateOrNull(_this._dateAdapter.deserialize(control.value));
-                return !_this.max ||
-                    !controlValue ||
-                    _this._dateAdapter.compareDatetime(_this.max, controlValue) >= 0
-                    ? null
-                    : { mtxDatetimepickerMax: { max: _this.max, actual: controlValue } };
-            };
-            /** The form control validator for the date filter. */
-            this._filterValidator = function (control) {
-                var controlValue = _this._dateAdapter.getValidDateOrNull(_this._dateAdapter.deserialize(control.value));
-                return !_this._dateFilter ||
-                    !controlValue ||
-                    _this._dateFilter(controlValue, exports.MtxDatetimepickerFilterType.DATE)
-                    ? null
-                    : { mtxDatetimepickerFilter: true };
-            };
-            /** The combined form control validator for this input. */
-            this._validator = forms.Validators.compose([
-                this._parseValidator,
-                this._minValidator,
-                this._maxValidator,
-                this._filterValidator,
-            ]);
-            if (!this._dateAdapter) {
-                throw createMissingDateImplError('DatetimeAdapter');
-            }
-            if (!this._dateFormats) {
-                throw createMissingDateImplError('MTX_DATETIME_FORMATS');
-            }
-            // Update the displayed date when the locale changes.
-            this._localeSubscription = _dateAdapter.localeChanges.subscribe(function () {
-                _this.value = _this.value;
-            });
-        }
-        Object.defineProperty(MtxDatetimepickerInput.prototype, "mtxDatetimepicker", {
-            /** The datetimepicker that this input is associated with. */
-            set: function (value) {
-                this.registerDatetimepicker(value);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MtxDatetimepickerInput.prototype, "mtxDatetimepickerFilter", {
-            set: function (filter) {
-                this._dateFilter = filter;
-                this._validatorOnChange();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MtxDatetimepickerInput.prototype, "value", {
-            /** The value of the input. */
-            get: function () {
-                return this._value;
-            },
-            set: function (value) {
-                var _this = this;
-                value = this._dateAdapter.deserialize(value);
-                this._lastValueValid = !value || this._dateAdapter.isValid(value);
-                value = this._dateAdapter.getValidDateOrNull(value);
-                var oldDate = this.value;
-                this._value = value;
-                this._formatValue(value);
-                // use timeout to ensure the datetimepicker is instantiated and we get the correct format
-                setTimeout(function () {
-                    if (!_this._dateAdapter.sameDatetime(oldDate, value)) {
-                        _this._valueChange.emit(value);
-                    }
-                });
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MtxDatetimepickerInput.prototype, "min", {
-            /** The minimum valid date. */
-            get: function () {
-                return this._min;
-            },
-            set: function (value) {
-                this._min = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
-                this._validatorOnChange();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MtxDatetimepickerInput.prototype, "max", {
-            /** The maximum valid date. */
-            get: function () {
-                return this._max;
-            },
-            set: function (value) {
-                this._max = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
-                this._validatorOnChange();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MtxDatetimepickerInput.prototype, "disabled", {
-            /** Whether the datetimepicker-input is disabled. */
-            get: function () {
-                return !!this._disabled;
-            },
-            set: function (value) {
-                var newValue = coercion.coerceBooleanProperty(value);
-                if (this._disabled !== newValue) {
-                    this._disabled = newValue;
-                    this._disabledChange.emit(newValue);
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        MtxDatetimepickerInput.prototype.ngAfterContentInit = function () {
-            var _this = this;
-            if (this._datetimepicker) {
-                this._datetimepickerSubscription = this._datetimepicker.selectedChanged.subscribe(function (selected) {
-                    _this.value = selected;
-                    _this._cvaOnChange(selected);
-                    _this._onTouched();
-                    _this.dateInput.emit(new MtxDatetimepickerInputEvent(_this, _this._elementRef.nativeElement));
-                    _this.dateChange.emit(new MtxDatetimepickerInputEvent(_this, _this._elementRef.nativeElement));
-                });
-            }
-        };
-        MtxDatetimepickerInput.prototype.ngOnDestroy = function () {
-            this._datetimepickerSubscription.unsubscribe();
-            this._localeSubscription.unsubscribe();
-            this._valueChange.complete();
-            this._disabledChange.complete();
-        };
-        MtxDatetimepickerInput.prototype.registerOnValidatorChange = function (fn) {
-            this._validatorOnChange = fn;
-        };
-        MtxDatetimepickerInput.prototype.validate = function (c) {
-            return this._validator ? this._validator(c) : null;
-        };
-        /**
-         * Gets the element that the datetimepicker popup should be connected to.
-         * @return The element to connect the popup to.
-         */
-        MtxDatetimepickerInput.prototype.getConnectedOverlayOrigin = function () {
-            return this._formField ? this._formField.getConnectedOverlayOrigin() : this._elementRef;
-        };
-        /** Gets the ID of an element that should be used a description for the calendar overlay. */
-        MtxDatetimepickerInput.prototype.getOverlayLabelId = function () {
-            if (this._formField) {
-                return this._formField.getLabelId();
-            }
-            return this._elementRef.nativeElement.getAttribute('aria-labelledby');
-        };
-        // Implemented as part of ControlValueAccessor
-        MtxDatetimepickerInput.prototype.writeValue = function (value) {
-            this.value = value;
-        };
-        // Implemented as part of ControlValueAccessor
-        MtxDatetimepickerInput.prototype.registerOnChange = function (fn) {
-            this._cvaOnChange = fn;
-        };
-        // Implemented as part of ControlValueAccessor
-        MtxDatetimepickerInput.prototype.registerOnTouched = function (fn) {
-            this._onTouched = fn;
-        };
-        // Implemented as part of ControlValueAccessor
-        MtxDatetimepickerInput.prototype.setDisabledState = function (disabled) {
-            this.disabled = disabled;
-        };
-        MtxDatetimepickerInput.prototype._onKeydown = function (event) {
-            if (event.altKey && event.keyCode === keycodes.DOWN_ARROW) {
-                this._datetimepicker.open();
-                event.preventDefault();
-            }
-        };
-        MtxDatetimepickerInput.prototype._onInput = function (value) {
-            var date = this._dateAdapter.parse(value, this.getParseFormat());
-            this._lastValueValid = !date || this._dateAdapter.isValid(date);
-            date = this._dateAdapter.getValidDateOrNull(date);
-            this._value = date;
-            this._cvaOnChange(date);
-            this._valueChange.emit(date);
-            this.dateInput.emit(new MtxDatetimepickerInputEvent(this, this._elementRef.nativeElement));
-        };
-        MtxDatetimepickerInput.prototype._onChange = function () {
-            this.dateChange.emit(new MtxDatetimepickerInputEvent(this, this._elementRef.nativeElement));
-        };
-        /** Handles blur events on the input. */
-        MtxDatetimepickerInput.prototype._onBlur = function () {
-            // Reformat the input only if we have a valid value.
-            if (this.value) {
-                this._formatValue(this.value);
-            }
-            this._onTouched();
-        };
-        MtxDatetimepickerInput.prototype.registerDatetimepicker = function (value) {
-            if (value) {
-                this._datetimepicker = value;
-                this._datetimepicker._registerInput(this);
-            }
-        };
-        MtxDatetimepickerInput.prototype.getDisplayFormat = function () {
-            switch (this._datetimepicker.type) {
-                case 'date':
-                    return this._dateFormats.display.dateInput;
-                case 'datetime':
-                    return this._dateFormats.display.datetimeInput;
-                case 'time':
-                    return this._dateFormats.display.timeInput;
-                case 'month':
-                    return this._dateFormats.display.monthInput;
-            }
-        };
-        MtxDatetimepickerInput.prototype.getParseFormat = function () {
-            var parseFormat;
-            switch (this._datetimepicker.type) {
-                case 'date':
-                    parseFormat = this._dateFormats.parse.dateInput;
-                    break;
-                case 'datetime':
-                    parseFormat = this._dateFormats.parse.datetimeInput;
-                    break;
-                case 'time':
-                    parseFormat = this._dateFormats.parse.timeInput;
-                    break;
-                case 'month':
-                    parseFormat = this._dateFormats.parse.monthInput;
-                    break;
-            }
-            if (!parseFormat) {
-                parseFormat = this._dateFormats.parse.dateInput;
-            }
-            return parseFormat;
-        };
-        /** Formats a value and sets it on the input element. */
-        MtxDatetimepickerInput.prototype._formatValue = function (value) {
-            this._elementRef.nativeElement.value = value
-                ? this._dateAdapter.format(value, this.getDisplayFormat())
-                : '';
-        };
-        return MtxDatetimepickerInput;
-    }());
-    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
-    MtxDatetimepickerInput.decorators = [
-        { type: core.Directive, args: [{
-                    selector: 'input[mtxDatetimepicker]',
-                    providers: [
-                        MAT_DATETIMEPICKER_VALUE_ACCESSOR,
-                        MAT_DATETIMEPICKER_VALIDATORS,
-                        { provide: input.MAT_INPUT_VALUE_ACCESSOR, useExisting: MtxDatetimepickerInput },
-                    ],
-                    host: {
-                        '[attr.aria-haspopup]': 'true',
-                        '[attr.aria-owns]': '(_datetimepicker?.opened && _datetimepicker.id) || null',
-                        '[attr.min]': 'min ? _dateAdapter.toIso8601(min) : null',
-                        '[attr.max]': 'max ? _dateAdapter.toIso8601(max) : null',
-                        '[disabled]': 'disabled',
-                        '(input)': '_onInput($event.target.value)',
-                        '(change)': '_onChange()',
-                        '(blur)': '_onBlur()',
-                        '(keydown)': '_onKeydown($event)',
-                    },
-                    exportAs: 'mtxDatetimepickerInput',
-                },] }
-    ];
-    /**
-     * @type {function(): !Array<(null|{
-     *   type: ?,
-     *   decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
-     * })>}
-     * @nocollapse
-     */
-    MtxDatetimepickerInput.ctorParameters = function () { return [
-        { type: core.ElementRef },
-        { type: core$1.DatetimeAdapter, decorators: [{ type: core.Optional }] },
-        { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [core$1.MTX_DATETIME_FORMATS,] }] },
-        { type: formField.MatFormField, decorators: [{ type: core.Optional }] }
-    ]; };
-    /** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
-    MtxDatetimepickerInput.propDecorators = {
-        dateChange: [{ type: core.Output }],
-        dateInput: [{ type: core.Output }],
-        mtxDatetimepicker: [{ type: core.Input }],
-        mtxDatetimepickerFilter: [{ type: core.Input }],
-        value: [{ type: core.Input }],
-        min: [{ type: core.Input }],
-        max: [{ type: core.Input }],
-        disabled: [{ type: core.Input }]
-    };
-
-    var MtxDatetimepickerToggle = /** @class */ (function () {
-        function MtxDatetimepickerToggle(_intl, _changeDetectorRef) {
-            this._intl = _intl;
-            this._changeDetectorRef = _changeDetectorRef;
-            this._stateChanges = rxjs.Subscription.EMPTY;
-        }
-        Object.defineProperty(MtxDatetimepickerToggle.prototype, "disabled", {
-            /** Whether the toggle button is disabled. */
-            get: function () {
-                return this._disabled === undefined ? this.datetimepicker.disabled : !!this._disabled;
-            },
-            set: function (value) {
-                this._disabled = coercion.coerceBooleanProperty(value);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        MtxDatetimepickerToggle.prototype.ngOnChanges = function (changes) {
-            if (changes.datetimepicker) {
-                this._watchStateChanges();
-            }
-        };
-        MtxDatetimepickerToggle.prototype.ngOnDestroy = function () {
-            this._stateChanges.unsubscribe();
-        };
-        MtxDatetimepickerToggle.prototype.ngAfterContentInit = function () {
-            this._watchStateChanges();
-        };
-        MtxDatetimepickerToggle.prototype._open = function (event) {
-            if (this.datetimepicker && !this.disabled) {
-                this.datetimepicker.open();
-                event.stopPropagation();
-            }
-        };
-        MtxDatetimepickerToggle.prototype._watchStateChanges = function () {
-            var _this = this;
-            var datetimepickerDisabled = this.datetimepicker
-                ? this.datetimepicker._disabledChange
-                : rxjs.of();
-            var inputDisabled = this.datetimepicker && this.datetimepicker._datetimepickerInput
-                ? this.datetimepicker._datetimepickerInput._disabledChange
-                : rxjs.of();
-            this._stateChanges.unsubscribe();
-            this._stateChanges = rxjs.merge([
-                this._intl.changes,
-                datetimepickerDisabled,
-                inputDisabled,
-            ]).subscribe(function () { return _this._changeDetectorRef.markForCheck(); });
-        };
-        return MtxDatetimepickerToggle;
-    }());
-    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
-    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",
-                    host: {
-                        class: 'mtx-datetimepicker-toggle',
-                    },
-                    exportAs: 'mtxDatetimepickerToggle',
-                    encapsulation: core.ViewEncapsulation.None,
-                    preserveWhitespaces: false,
-                    changeDetection: core.ChangeDetectionStrategy.OnPush
-                },] }
-    ];
-    /**
-     * @type {function(): !Array<(null|{
-     *   type: ?,
-     *   decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
-     * })>}
-     * @nocollapse
-     */
-    MtxDatetimepickerToggle.ctorParameters = function () { return [
-        { type: datepicker.MatDatepickerIntl },
-        { type: core.ChangeDetectorRef }
-    ]; };
-    /** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
-    MtxDatetimepickerToggle.propDecorators = {
-        datetimepicker: [{ type: core.Input, args: ['for',] }],
-        disabled: [{ type: core.Input }]
-    };
-
-    var DAYS_PER_WEEK = 7;
-    /**
-     * An internal component used to display a single month in the datetimepicker.
-     * @docs-private
-     */
-    var MtxMonthView = /** @class */ (function () {
-        function MtxMonthView(_adapter, _dateFormats) {
-            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();
-            if (!this._adapter) {
-                throw createMissingDateImplError('DatetimeAdapter');
-            }
-            if (!this._dateFormats) {
-                throw createMissingDateImplError('MTX_DATETIME_FORMATS');
-            }
-            var firstDayOfWeek = this._adapter.getFirstDayOfWeek();
-            var narrowWeekdays = this._adapter.getDayOfWeekNames('narrow');
-            var longWeekdays = this._adapter.getDayOfWeekNames('long');
-            // Rotate the labels for days of the week based on the configured first day of the week.
-            var weekdays = longWeekdays.map(function (long, i) {
-                return { long: long, narrow: narrowWeekdays[i] };
-            });
-            this._weekdays = weekdays.slice(firstDayOfWeek).concat(weekdays.slice(0, firstDayOfWeek));
-            this._activeDate = this._adapter.today();
-        }
-        Object.defineProperty(MtxMonthView.prototype, "activeDate", {
-            /**
-             * The date to display in this month view (everything other than the month and year is ignored).
-             */
-            get: function () {
-                return this._activeDate;
-            },
-            set: function (value) {
-                var oldActiveDate = this._activeDate;
-                this._activeDate = value || this._adapter.today();
-                if (oldActiveDate &&
-                    this._activeDate &&
-                    !this._adapter.sameMonthAndYear(oldActiveDate, this._activeDate)) {
-                    this._init();
-                    if (this._adapter.isInNextMonth(oldActiveDate, this._activeDate)) {
-                        this.calendarState('right');
-                    }
-                    else {
-                        this.calendarState('left');
-                    }
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MtxMonthView.prototype, "selected", {
-            /** The currently selected date. */
-            get: function () {
-                return this._selected;
-            },
-            set: function (value) {
-                this._selected = value;
-                this._selectedDate = this._getDateInCurrentMonth(this.selected);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        MtxMonthView.prototype.ngAfterContentInit = function () {
-            this._init();
-        };
-        /** Handles when a new date is selected. */
-        MtxMonthView.prototype._dateSelected = function (date) {
-            this.selectedChange.emit(this._adapter.createDatetime(this._adapter.getYear(this.activeDate), this._adapter.getMonth(this.activeDate), date, this._adapter.getHour(this.activeDate), this._adapter.getMinute(this.activeDate)));
-            if (this.type === 'date') {
-                this._userSelection.emit();
-            }
-        };
-        MtxMonthView.prototype._calendarStateDone = function () {
-            this._calendarState = '';
-        };
-        /** Initializes this month view. */
-        MtxMonthView.prototype._init = function () {
-            this._selectedDate = this._getDateInCurrentMonth(this.selected);
-            this._todayDate = this._getDateInCurrentMonth(this._adapter.today());
-            var firstOfMonth = this._adapter.createDatetime(this._adapter.getYear(this.activeDate), this._adapter.getMonth(this.activeDate), 1, this._adapter.getHour(this.activeDate), this._adapter.getMinute(this.activeDate));
-            this._firstWeekOffset =
-                (DAYS_PER_WEEK +
-                    this._adapter.getDayOfWeek(firstOfMonth) -
-                    this._adapter.getFirstDayOfWeek()) %
-                    DAYS_PER_WEEK;
-            this._createWeekCells();
-        };
-        /** Creates MdCalendarCells for the dates in this month. */
-        MtxMonthView.prototype._createWeekCells = function () {
-            var daysInMonth = this._adapter.getNumDaysInMonth(this.activeDate);
-            var dateNames = this._adapter.getDateNames();
-            this._weeks = [[]];
-            for (var i = 0, cell = this._firstWeekOffset; i < daysInMonth; i++, cell++) {
-                if (cell === DAYS_PER_WEEK) {
-                    this._weeks.push([]);
-                    cell = 0;
-                }
-                var date = this._adapter.createDatetime(this._adapter.getYear(this.activeDate), this._adapter.getMonth(this.activeDate), i + 1, this._adapter.getHour(this.activeDate), this._adapter.getMinute(this.activeDate));
-                var enabled = !this.dateFilter || this.dateFilter(date);
-                var ariaLabel = this._adapter.format(date, this._dateFormats.display.dateA11yLabel);
-                this._weeks[this._weeks.length - 1].push(new MtxCalendarCell(i + 1, dateNames[i], ariaLabel, enabled));
-            }
-        };
-        /**
-         * Gets the date in this month that the given Date falls on.
-         * Returns null if the given Date is in another month.
-         */
-        MtxMonthView.prototype._getDateInCurrentMonth = function (date) {
-            return this._adapter.sameMonthAndYear(date, this.activeDate)
-                ? this._adapter.getDate(date)
-                : null;
-        };
-        MtxMonthView.prototype.calendarState = function (direction) {
-            this._calendarState = direction;
-        };
-        return MtxMonthView;
-    }());
-    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
-    MtxMonthView.decorators = [
-        { 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],
-                    encapsulation: core.ViewEncapsulation.None,
-                    changeDetection: core.ChangeDetectionStrategy.OnPush
-                },] }
-    ];
-    /**
-     * @type {function(): !Array<(null|{
-     *   type: ?,
-     *   decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
-     * })>}
-     * @nocollapse
-     */
-    MtxMonthView.ctorParameters = function () { return [
-        { type: core$1.DatetimeAdapter, decorators: [{ type: core.Optional }] },
-        { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [core$1.MTX_DATETIME_FORMATS,] }] }
-    ]; };
-    /** @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 }],
-        activeDate: [{ type: core.Input }],
-        selected: [{ type: core.Input }]
-    };
-
-    /**
-     * An internal component used to display a single year in the datetimepicker.
-     * @docs-private
-     */
-    var MtxYearView = /** @class */ (function () {
-        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();
-            if (!this._adapter) {
-                throw createMissingDateImplError('DatetimeAdapter');
-            }
-            if (!this._dateFormats) {
-                throw createMissingDateImplError('MTX_DATETIME_FORMATS');
-            }
-            this._activeDate = this._adapter.today();
-        }
-        Object.defineProperty(MtxYearView.prototype, "activeDate", {
-            /** The date to display in this year view (everything other than the year is ignored). */
-            get: function () {
-                return this._activeDate;
-            },
-            set: function (value) {
-                var oldActiveDate = this._activeDate;
-                this._activeDate = value || this._adapter.today();
-                if (oldActiveDate &&
-                    this._activeDate &&
-                    !this._adapter.sameYear(oldActiveDate, this._activeDate)) {
-                    this._init();
-                    // if (oldActiveDate < this._activeDate) {
-                    //  this.calendarState('right');
-                    // } else {
-                    //  this.calendarState('left');
-                    // }
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MtxYearView.prototype, "selected", {
-            /** The currently selected date. */
-            get: function () {
-                return this._selected;
-            },
-            set: function (value) {
-                this._selected = value;
-                this._selectedMonth = this._getMonthInCurrentYear(this.selected);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        MtxYearView.prototype.ngAfterContentInit = function () {
-            this._init();
-        };
-        /** Handles when a new month is selected. */
-        MtxYearView.prototype._monthSelected = function (month) {
-            var normalizedDate = this._adapter.createDatetime(this._adapter.getYear(this.activeDate), month, 1, 0, 0);
-            this.selectedChange.emit(this._adapter.createDatetime(this._adapter.getYear(this.activeDate), month, Math.min(this._adapter.getDate(this.activeDate), this._adapter.getNumDaysInMonth(normalizedDate)), this._adapter.getHour(this.activeDate), this._adapter.getMinute(this.activeDate)));
-            if (this.type === 'month') {
-                this._userSelection.emit();
-            }
-        };
-        MtxYearView.prototype._calendarStateDone = function () {
-            this._calendarState = '';
-        };
-        /** Initializes this month view. */
-        MtxYearView.prototype._init = function () {
-            var _this = this;
-            this._selectedMonth = this._getMonthInCurrentYear(this.selected);
-            this._todayMonth = this._getMonthInCurrentYear(this._adapter.today());
-            this._yearLabel = this._adapter.getYearName(this.activeDate);
-            var monthNames = this._adapter.getMonthNames('short');
-            // First row of months only contains 5 elements so we can fit the year label on the same row.
-            this._months = [
-                [0, 1, 2, 3],
-                [4, 5, 6, 7],
-                [8, 9, 10, 11],
-            ].map(function (row) { return row.map(function (month) { return _this._createCellForMonth(month, monthNames[month]); }); });
-        };
-        /**
-         * Gets the month in this year that the given Date falls on.
-         * Returns null if the given Date is in another year.
-         */
-        MtxYearView.prototype._getMonthInCurrentYear = function (date) {
-            return this._adapter.sameYear(date, this.activeDate) ? this._adapter.getMonth(date) : null;
-        };
-        /** Creates an MdCalendarCell for the given month. */
-        MtxYearView.prototype._createCellForMonth = function (month, monthName) {
-            var ariaLabel = this._adapter.format(this._adapter.createDatetime(this._adapter.getYear(this.activeDate), month, 1, this._adapter.getHour(this.activeDate), this._adapter.getMinute(this.activeDate)), this._dateFormats.display.monthYearA11yLabel);
-            return new MtxCalendarCell(month, monthName.toLocaleUpperCase(), ariaLabel, this._isMonthEnabled(month));
-        };
-        // private calendarState(direction: string): void {
-        //   this._calendarState = direction;
-        // }
-        /** Whether the given month is enabled. */
-        MtxYearView.prototype._isMonthEnabled = function (month) {
-            if (!this.dateFilter) {
-                return true;
-            }
-            var firstOfMonth = this._adapter.createDatetime(this._adapter.getYear(this.activeDate), month, 1, this._adapter.getHour(this.activeDate), this._adapter.getMinute(this.activeDate));
-            // If any date in the month is enabled count the month as enabled.
-            for (var date = firstOfMonth; this._adapter.getMonth(date) === month; date = this._adapter.addCalendarDays(date, 1)) {
-                if (this.dateFilter(date)) {
-                    return true;
-                }
-            }
-            return false;
-        };
-        return MtxYearView;
-    }());
-    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
-    MtxYearView.decorators = [
-        { 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],
-                    encapsulation: core.ViewEncapsulation.None,
-                    changeDetection: core.ChangeDetectionStrategy.OnPush
-                },] }
-    ];
-    /**
-     * @type {function(): !Array<(null|{
-     *   type: ?,
-     *   decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
-     * })>}
-     * @nocollapse
-     */
-    MtxYearView.ctorParameters = function () { return [
-        { type: core$1.DatetimeAdapter, decorators: [{ type: core.Optional }] },
-        { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [core$1.MTX_DATETIME_FORMATS,] }] }
-    ]; };
-    /** @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 }],
-        activeDate: [{ type: core.Input }],
-        selected: [{ type: core.Input }]
-    };
-
-    var MtxDatetimepickerModule = /** @class */ (function () {
-        function MtxDatetimepickerModule() {
-        }
-        return MtxDatetimepickerModule;
-    }());
-    /** @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],
-                    declarations: [
-                        MtxCalendar,
-                        MtxCalendarBody,
-                        MtxClock,
-                        MtxDatetimepicker,
-                        MtxDatetimepickerToggle,
-                        MtxDatetimepickerInput,
-                        MtxDatetimepickerContent,
-                        MtxMonthView,
-                        MtxYearView,
-                        MtxMultiYearView,
-                    ],
-                    exports: [
-                        MtxCalendar,
-                        MtxCalendarBody,
-                        MtxClock,
-                        MtxDatetimepicker,
-                        MtxDatetimepickerToggle,
-                        MtxDatetimepickerInput,
-                        MtxDatetimepickerContent,
-                        MtxMonthView,
-                        MtxYearView,
-                        MtxMultiYearView,
-                    ],
-                },] }
-    ];
-
-    /**
-     * Generated bundle index. Do not edit.
-     */
-
-    exports.CLOCK_INNER_RADIUS = CLOCK_INNER_RADIUS;
-    exports.CLOCK_OUTER_RADIUS = CLOCK_OUTER_RADIUS;
-    exports.CLOCK_RADIUS = CLOCK_RADIUS;
-    exports.CLOCK_TICK_RADIUS = CLOCK_TICK_RADIUS;
-    exports.MAT_DATETIMEPICKER_VALIDATORS = MAT_DATETIMEPICKER_VALIDATORS;
-    exports.MAT_DATETIMEPICKER_VALUE_ACCESSOR = MAT_DATETIMEPICKER_VALUE_ACCESSOR;
-    exports.MtxCalendar = MtxCalendar;
-    exports.MtxCalendarBody = MtxCalendarBody;
-    exports.MtxCalendarCell = MtxCalendarCell;
-    exports.MtxClock = MtxClock;
-    exports.MtxDatetimepicker = MtxDatetimepicker;
-    exports.MtxDatetimepickerContent = MtxDatetimepickerContent;
-    exports.MtxDatetimepickerInput = MtxDatetimepickerInput;
-    exports.MtxDatetimepickerInputEvent = MtxDatetimepickerInputEvent;
-    exports.MtxDatetimepickerModule = MtxDatetimepickerModule;
-    exports.MtxDatetimepickerToggle = MtxDatetimepickerToggle;
-    exports.MtxMonthView = MtxMonthView;
-    exports.MtxYearView = MtxYearView;
-    exports.ɵa = slideCalendar;
-    exports.ɵb = MtxMultiYearView;
-
-    Object.defineProperty(exports, '__esModule', { value: true });
-
-})));
-//# sourceMappingURL=mtxDatetimepicker.umd.js.map