@ng-matero/extensions 12.7.0 → 13.0.2

package/{fesm2015/mtxDatetimepicker.js → fesm2020/mtxDatetimepicker.mjs}

@@ -1,22 +1,28 @@
+import * as i2 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
+import * as i4 from '@angular/cdk/overlay';
 import { Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
 import { ComponentPortal, PortalModule } from '@angular/cdk/portal';
+import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, Optional, Inject, ElementRef, NgZone, ChangeDetectorRef, InjectionToken, ViewChild, ViewContainerRef, forwardRef, Directive, ContentChild, NgModule } from '@angular/core';
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, Optional, Inject, InjectionToken, ViewChild, forwardRef, Directive, ContentChild, NgModule } from '@angular/core';
+import * as i3$1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import { ENTER, PAGE_DOWN, PAGE_UP, END, HOME, DOWN_ARROW, UP_ARROW, RIGHT_ARROW, LEFT_ARROW, ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';
 import { coerceBooleanProperty, coerceStringArray } from '@angular/cdk/coercion';
-import { MatDatepickerIntl } from '@angular/material/datepicker';
 import { first, take, filter } from 'rxjs/operators';
-import { DatetimeAdapter, MTX_DATETIME_FORMATS } from '@ng-matero/extensions/core';
+import * as i1 from '@ng-matero/extensions/core';
+import { MTX_DATETIME_FORMATS } from '@ng-matero/extensions/core';
 import { trigger, transition, animate, keyframes, style, state } from '@angular/animations';
-import { Directionality } from '@angular/cdk/bidi';
+import * as i1$1 from '@angular/material/datepicker';
 import { _getFocusedElementPierceShadowDom } from '@angular/cdk/platform';
 import { mixinColor } from '@angular/material/core';
 import { Subject, Subscription, merge, of } from 'rxjs';
+import * as i6 from '@angular/cdk/bidi';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, Validators } from '@angular/forms';
 import { MAT_INPUT_VALUE_ACCESSOR } from '@angular/material/input';
-import { MatFormField } from '@angular/material/form-field';
+import * as i2$1 from '@angular/material/form-field';
 
 /**
  * Animations used by the Material datepicker.
@@ -123,32 +129,32 @@ class MtxCalendarBody {
         return cellNumber === this.activeCell;
     }
 }
-/** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
-MtxCalendarBody.decorators = [
-    { type: 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',
-                },
-                exportAs: 'mtxCalendarBody',
-                encapsulation: ViewEncapsulation.None,
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".mtx-calendar-body{min-width:224px}.mtx-calendar-body-label{height:0;line-height:0;text-align:left;padding:7.1428571429% 4.7142857143%}[dir=rtl] .mtx-calendar-body-label{text-align:right}.mtx-calendar-body-cell{position:relative;width:14.2857142857%;height:0;line-height:0;padding:7.1428571429% 0;text-align:center;outline:none;cursor:pointer}.mtx-calendar-body-disabled{cursor:default;pointer-events:none}.mtx-calendar-body-cell-content{position:absolute;top:5%;left:5%;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:90%;height:90%;border:1px solid transparent;border-radius:999px}\n"]
-            },] }
-];
-/** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
-MtxCalendarBody.propDecorators = {
-    label: [{ type: Input }],
-    rows: [{ type: Input }],
-    todayValue: [{ type: Input }],
-    selectedValue: [{ type: Input }],
-    labelMinRequiredCells: [{ type: Input }],
-    numCols: [{ type: Input }],
-    allowDisabledSelection: [{ type: Input }],
-    activeCell: [{ type: Input }],
-    selectedValueChange: [{ type: Output }]
-};
+/** @nocollapse */ /** @nocollapse */ MtxCalendarBody.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MtxCalendarBody, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ MtxCalendarBody.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: MtxCalendarBody, selector: "[mtx-calendar-body]", inputs: { label: "label", rows: "rows", todayValue: "todayValue", selectedValue: "selectedValue", labelMinRequiredCells: "labelMinRequiredCells", numCols: "numCols", allowDisabledSelection: "allowDisabledSelection", activeCell: "activeCell" }, outputs: { selectedValueChange: "selectedValueChange" }, host: { classAttribute: "mtx-calendar-body" }, exportAs: ["mtxCalendarBody"], ngImport: i0, 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", 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"], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MtxCalendarBody, decorators: [{
+            type: Component,
+            args: [{ selector: '[mtx-calendar-body]', host: {
+                        class: 'mtx-calendar-body',
+                    }, exportAs: 'mtxCalendarBody', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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", 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"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], todayValue: [{
+                type: Input
+            }], selectedValue: [{
+                type: Input
+            }], labelMinRequiredCells: [{
+                type: Input
+            }], numCols: [{
+                type: Input
+            }], allowDisabledSelection: [{
+                type: Input
+            }], activeCell: [{
+                type: Input
+            }], selectedValueChange: [{
+                type: Output
+            }] } });
 
 const yearsPerPage = 24;
 const yearsPerRow = 4;
@@ -291,39 +297,35 @@ class MtxMultiYearView {
         return this._adapter.isDateInstance(obj) && this._adapter.isValid(obj) ? obj : null;
     }
 }
-/** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
-MtxMultiYearView.decorators = [
-    { type: Component, args: [{
-                selector: 'mtx-multi-year-view',
-                template: "<table class=\"mtx-calendar-table\" role=\"grid\">\n  <thead class=\"mtx-calendar-table-header\"></thead>\n  <tbody mtx-calendar-body\n         (@slideCalendar.done)=\"_calendarStateDone()\"\n         [@slideCalendar]=\"_calendarState\"\n         [todayValue]=\"_todayYear\"\n         [rows]=\"_years\"\n         [numCols]=\"4\"\n         [activeCell]=\"_getActiveCell()\"\n         [allowDisabledSelection]=\"true\"\n         [selectedValue]=\"_selectedYear!\"\n         (selectedValueChange)=\"_yearSelected($event)\"></tbody>\n</table>\n",
-                exportAs: 'mtxMultiYearView',
-                animations: [mtxDatetimepickerAnimations.slideCalendar],
-                encapsulation: ViewEncapsulation.None,
-                changeDetection: ChangeDetectionStrategy.OnPush
-            },] }
-];
-/**
- * @type {function(): !Array<(null|{
- *   type: ?,
- *   decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
- * })>}
- * @nocollapse
- */
-MtxMultiYearView.ctorParameters = () => [
-    { type: DatetimeAdapter, decorators: [{ type: Optional }] },
-    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [MTX_DATETIME_FORMATS,] }] }
-];
-/** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
-MtxMultiYearView.propDecorators = {
-    type: [{ type: Input }],
-    dateFilter: [{ type: Input }],
-    selectedChange: [{ type: Output }],
-    _userSelection: [{ type: Output }],
-    activeDate: [{ type: Input }],
-    selected: [{ type: Input }],
-    minDate: [{ type: Input }],
-    maxDate: [{ type: Input }]
-};
+/** @nocollapse */ /** @nocollapse */ MtxMultiYearView.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MtxMultiYearView, deps: [{ token: i1.DatetimeAdapter, optional: true }, { token: MTX_DATETIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ MtxMultiYearView.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: MtxMultiYearView, selector: "mtx-multi-year-view", inputs: { type: "type", dateFilter: "dateFilter", activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate" }, outputs: { selectedChange: "selectedChange", _userSelection: "_userSelection" }, exportAs: ["mtxMultiYearView"], ngImport: i0, 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", components: [{ type: MtxCalendarBody, selector: "[mtx-calendar-body]", inputs: ["label", "rows", "todayValue", "selectedValue", "labelMinRequiredCells", "numCols", "allowDisabledSelection", "activeCell"], outputs: ["selectedValueChange"], exportAs: ["mtxCalendarBody"] }], animations: [mtxDatetimepickerAnimations.slideCalendar], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MtxMultiYearView, decorators: [{
+            type: Component,
+            args: [{ selector: 'mtx-multi-year-view', exportAs: 'mtxMultiYearView', animations: [mtxDatetimepickerAnimations.slideCalendar], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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" }]
+        }], ctorParameters: function () { return [{ type: i1.DatetimeAdapter, decorators: [{
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MTX_DATETIME_FORMATS]
+                }] }]; }, propDecorators: { type: [{
+                type: Input
+            }], dateFilter: [{
+                type: Input
+            }], selectedChange: [{
+                type: Output
+            }], _userSelection: [{
+                type: Output
+            }], activeDate: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }] } });
 function isSameMultiYearView(dateAdapter, date1, date2, minDate, maxDate) {
     const year1 = dateAdapter.getYear(date1);
     const year2 = dateAdapter.getYear(date2);
@@ -360,111 +362,50 @@ function euclideanModulo(a, b) {
     return ((a % b) + b) % b;
 }
 
+const DAYS_PER_WEEK = 7;
 /**
- * A calendar that is used as part of the datetimepicker.
+ * An internal component used to display a single month in the datetimepicker.
  * @docs-private
  */
-class MtxCalendar {
-    constructor(_elementRef, _intl, _ngZone, _adapter, _dateFormats, changeDetectorRef) {
-        this._elementRef = _elementRef;
-        this._intl = _intl;
-        this._ngZone = _ngZone;
+class MtxMonthView {
+    constructor(_adapter, _dateFormats) {
         this._adapter = _adapter;
         this._dateFormats = _dateFormats;
-        this._multiYearSelector = false;
-        this._twelvehour = false;
-        /** Whether the calendar should be started in month or year view. */
-        this.startView = 'month';
-        this.timeInterval = 1;
-        /** Prevent user to select same date time */
-        this.preventSameDateTimeSelection = false;
-        /** Emits when the currently selected date changes. */
+        this.type = 'date';
+        /** Emits when a new date is selected. */
         this.selectedChange = new EventEmitter();
-        /** Emits when the view has been changed. */
-        this.viewChanged = new EventEmitter();
+        /** Emits when any date is selected. */
         this._userSelection = new EventEmitter();
-        this._clockView = 'hour';
-        this._type = 'date';
-        /** Date filter for the month and year views. */
-        this._dateFilterForViews = (date) => {
-            return (!!date &&
-                (!this.dateFilter || this.dateFilter(date, 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(() => changeDetectorRef.markForCheck());
-    }
-    get multiYearSelector() {
-        return this._multiYearSelector;
-    }
-    set multiYearSelector(value) {
-        this._multiYearSelector = coerceBooleanProperty(value);
-    }
-    /** if true change the clock to 12 hour format. */
-    get twelvehour() {
-        return this._twelvehour;
-    }
-    set twelvehour(value) {
-        this._twelvehour = coerceBooleanProperty(value);
-    }
-    get type() {
-        return this._type;
-    }
-    set type(value) {
-        this._type = value || 'date';
-        if (this.type === 'year') {
-            this.multiYearSelector = true;
-        }
-    }
-    /** A date representing the period (month or year) to start the calendar in. */
-    get startAt() {
-        return this._startAt;
-    }
-    set startAt(value) {
-        this._startAt = this._adapter.getValidDateOrNull(value);
-    }
-    /** The currently selected date. */
-    get selected() {
-        return this._selected;
-    }
-    set selected(value) {
-        this._selected = this._adapter.getValidDateOrNull(value);
-    }
-    /** The minimum selectable date. */
-    get minDate() {
-        return this._minDate;
-    }
-    set minDate(value) {
-        this._minDate = this._adapter.getValidDateOrNull(value);
-    }
-    /** The maximum selectable date. */
-    get maxDate() {
-        return this._maxDate;
-    }
-    set maxDate(value) {
-        this._maxDate = this._adapter.getValidDateOrNull(value);
+        const firstDayOfWeek = this._adapter.getFirstDayOfWeek();
+        const narrowWeekdays = this._adapter.getDayOfWeekNames('narrow');
+        const longWeekdays = this._adapter.getDayOfWeekNames('long');
+        // Rotate the labels for days of the week based on the configured first day of the week.
+        const weekdays = longWeekdays.map((long, i) => {
+            return { long, narrow: narrowWeekdays[i] };
+        });
+        this._weekdays = weekdays.slice(firstDayOfWeek).concat(weekdays.slice(0, firstDayOfWeek));
+        this._activeDate = this._adapter.today();
     }
     /**
-     * The current active date. This determines which time period is shown and which date is
-     * highlighted when using keyboard navigation.
+     * The date to display in this month view (everything other than the month and year is ignored).
      */
-    get _activeDate() {
-        return this._clampedActiveDate;
+    get activeDate() {
+        return this._activeDate;
     }
-    set _activeDate(value) {
-        const oldActiveDate = this._clampedActiveDate;
-        this._clampedActiveDate = this._adapter.clampDate(value, this.minDate, this.maxDate);
+    set activeDate(value) {
+        const oldActiveDate = this._activeDate;
+        this._activeDate = value || this._adapter.today();
         if (oldActiveDate &&
-            this._clampedActiveDate &&
-            this.currentView === 'month' &&
-            !this._adapter.sameMonthAndYear(oldActiveDate, this._clampedActiveDate)) {
-            if (this._adapter.isInNextMonth(oldActiveDate, this._clampedActiveDate)) {
+            this._activeDate &&
+            !this._adapter.sameMonthAndYear(oldActiveDate, this._activeDate)) {
+            this._init();
+            if (this._adapter.isInNextMonth(oldActiveDate, this._activeDate)) {
                 this.calendarState('right');
             }
             else {
@@ -472,777 +413,1095 @@ class MtxCalendar {
             }
         }
     }
-    /** Whether the calendar is in month view. */
-    get currentView() {
-        return this._currentView;
+    /** The currently selected date. */
+    get selected() {
+        return this._selected;
     }
-    set currentView(view) {
-        this._currentView = view;
-        this.viewChanged.emit(view);
+    set selected(value) {
+        this._selected = value;
+        this._selectedDate = this._getDateInCurrentMonth(this.selected);
     }
-    /** The label for the current calendar view. */
-    get _yearLabel() {
-        return this._adapter.getYearName(this._activeDate);
+    ngAfterContentInit() {
+        this._init();
     }
-    get _monthYearLabel() {
-        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.
-            const activeYear = this._adapter.getYear(this._activeDate);
-            const minYearOfPage = activeYear - getActiveOffset(this._adapter, this._activeDate, this.minDate, this.maxDate);
-            const maxYearOfPage = minYearOfPage + yearsPerPage - 1;
-            const minYearName = this._adapter.getYearName(this._adapter.createDate(minYearOfPage, 0, 1));
-            const maxYearName = this._adapter.getYearName(this._adapter.createDate(maxYearOfPage, 0, 1));
-            return this._intl.formatYearRange(minYearName, maxYearName);
+    /** Handles when a new date is selected. */
+    _dateSelected(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();
         }
-        return this.currentView === 'month'
-            ? this._adapter.getMonthNames('long')[this._adapter.getMonth(this._activeDate)]
-            : this._adapter.getYearName(this._activeDate);
     }
-    get _dateLabel() {
-        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);
-        }
+    _calendarStateDone() {
+        this._calendarState = '';
     }
-    get _hoursLabel() {
-        let hour = this._adapter.getHour(this._activeDate);
-        if (this.twelvehour) {
-            if (hour === 0) {
-                hour = 24;
+    /** Initializes this month view. */
+    _init() {
+        this._selectedDate = this._getDateInCurrentMonth(this.selected);
+        this._todayDate = this._getDateInCurrentMonth(this._adapter.today());
+        const 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. */
+    _createWeekCells() {
+        const daysInMonth = this._adapter.getNumDaysInMonth(this.activeDate);
+        const dateNames = this._adapter.getDateNames();
+        this._weeks = [[]];
+        for (let i = 0, cell = this._firstWeekOffset; i < daysInMonth; i++, cell++) {
+            if (cell === DAYS_PER_WEEK) {
+                this._weeks.push([]);
+                cell = 0;
             }
-            hour = hour > 12 ? hour - 12 : hour;
+            const 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));
+            const enabled = !this.dateFilter || this.dateFilter(date);
+            const ariaLabel = this._adapter.format(date, this._dateFormats.display.dateA11yLabel);
+            this._weeks[this._weeks.length - 1].push(new MtxCalendarCell(i + 1, dateNames[i], ariaLabel, enabled));
         }
-        return this._2digit(hour);
     }
-    get _minutesLabel() {
-        return this._2digit(this._adapter.getMinute(this._activeDate));
+    /**
+     * Gets the date in this month that the given Date falls on.
+     * Returns null if the given Date is in another month.
+     */
+    _getDateInCurrentMonth(date) {
+        return this._adapter.sameMonthAndYear(date, this.activeDate)
+            ? this._adapter.getDate(date)
+            : null;
     }
-    get _ariaLabelNext() {
-        switch (this._currentView) {
-            case 'month':
-                return this._intl.nextMonthLabel;
-            case 'year':
-                return this._intl.nextYearLabel;
-            case 'multi-year':
-                return this._intl.nextMultiYearLabel;
-            default:
-                return '';
-        }
+    calendarState(direction) {
+        this._calendarState = direction;
     }
-    get _ariaLabelPrev() {
-        switch (this._currentView) {
-            case 'month':
-                return this._intl.prevMonthLabel;
-            case 'year':
-                return this._intl.prevYearLabel;
-            case 'multi-year':
-                return this._intl.prevMultiYearLabel;
-            default:
-                return '';
+}
+/** @nocollapse */ /** @nocollapse */ MtxMonthView.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MtxMonthView, deps: [{ token: i1.DatetimeAdapter, optional: true }, { token: MTX_DATETIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ MtxMonthView.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: MtxMonthView, selector: "mtx-month-view", inputs: { type: "type", dateFilter: "dateFilter", activeDate: "activeDate", selected: "selected" }, outputs: { selectedChange: "selectedChange", _userSelection: "_userSelection" }, exportAs: ["mtxMonthView"], ngImport: i0, 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", components: [{ type: MtxCalendarBody, selector: "[mtx-calendar-body]", inputs: ["label", "rows", "todayValue", "selectedValue", "labelMinRequiredCells", "numCols", "allowDisabledSelection", "activeCell"], outputs: ["selectedValueChange"], exportAs: ["mtxCalendarBody"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], animations: [mtxDatetimepickerAnimations.slideCalendar], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MtxMonthView, decorators: [{
+            type: Component,
+            args: [{ selector: 'mtx-month-view', exportAs: 'mtxMonthView', animations: [mtxDatetimepickerAnimations.slideCalendar], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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" }]
+        }], ctorParameters: function () { return [{ type: i1.DatetimeAdapter, decorators: [{
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MTX_DATETIME_FORMATS]
+                }] }]; }, propDecorators: { type: [{
+                type: Input
+            }], dateFilter: [{
+                type: Input
+            }], selectedChange: [{
+                type: Output
+            }], _userSelection: [{
+                type: Output
+            }], activeDate: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }] } });
+
+/**
+ * An internal component used to display a single year in the datetimepicker.
+ * @docs-private
+ */
+class MtxYearView {
+    constructor(_adapter, _dateFormats) {
+        this._adapter = _adapter;
+        this._dateFormats = _dateFormats;
+        this.type = 'date';
+        /** Emits when a new month is selected. */
+        this.selectedChange = new EventEmitter();
+        /** Emits when any date is selected. */
+        this._userSelection = new EventEmitter();
+        if (!this._adapter) {
+            throw createMissingDateImplError('DatetimeAdapter');
         }
+        if (!this._dateFormats) {
+            throw createMissingDateImplError('MTX_DATETIME_FORMATS');
+        }
+        this._activeDate = this._adapter.today();
     }
-    _userSelected() {
-        this._userSelection.emit();
+    /** The date to display in this year view (everything other than the year is ignored). */
+    get activeDate() {
+        return this._activeDate;
     }
-    ngAfterContentInit() {
-        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';
+    set activeDate(value) {
+        const 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');
+            // }
         }
     }
-    ngOnDestroy() {
-        this._intlChanges.unsubscribe();
+    /** The currently selected date. */
+    get selected() {
+        return this._selected;
     }
-    /** Handles date selection in the month view. */
-    _dateSelected(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';
-        }
+    set selected(value) {
+        this._selected = value;
+        this._selectedMonth = this._getMonthInCurrentYear(this.selected);
     }
-    /** Handles month selection in the year view. */
+    ngAfterContentInit() {
+        this._init();
+    }
+    /** Handles when a new month is selected. */
     _monthSelected(month) {
+        const 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') {
-            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';
+            this._userSelection.emit();
         }
     }
-    /** Handles year selection in the multi year view. */
-    _yearSelected(year) {
-        if (this.type === 'year') {
-            if (!this._adapter.sameYear(year, this.selected) || !this.preventSameDateTimeSelection) {
-                const normalizedDate = this._adapter.createDatetime(this._adapter.getYear(year), 0, 1, 0, 0);
-                this.selectedChange.emit(normalizedDate);
-            }
-        }
-        else {
-            this._activeDate = year;
-            this.currentView = 'year';
-        }
+    _calendarStateDone() {
+        this._calendarState = '';
     }
-    _timeSelected(date) {
-        if (this._clockView !== 'minute') {
-            this._activeDate = this._updateDate(date);
-            this._clockView = 'minute';
+    /** Initializes this month view. */
+    _init() {
+        this._selectedMonth = this._getMonthInCurrentYear(this.selected);
+        this._todayMonth = this._getMonthInCurrentYear(this._adapter.today());
+        this._yearLabel = this._adapter.getYearName(this.activeDate);
+        const 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(row => row.map(month => 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.
+     */
+    _getMonthInCurrentYear(date) {
+        return this._adapter.sameYear(date, this.activeDate) ? this._adapter.getMonth(date) : null;
+    }
+    /** Creates an MdCalendarCell for the given month. */
+    _createCellForMonth(month, monthName) {
+        const 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. */
+    _isMonthEnabled(month) {
+        if (!this.dateFilter) {
+            return true;
         }
-        else {
-            if (!this._adapter.sameDatetime(date, this.selected) || !this.preventSameDateTimeSelection) {
-                this.selectedChange.emit(date);
+        const 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 (let date = firstOfMonth; this._adapter.getMonth(date) === month; date = this._adapter.addCalendarDays(date, 1)) {
+            if (this.dateFilter(date)) {
+                return true;
             }
         }
+        return false;
     }
-    _onActiveDateChange(date) {
-        this._activeDate = date;
+}
+/** @nocollapse */ /** @nocollapse */ MtxYearView.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MtxYearView, deps: [{ token: i1.DatetimeAdapter, optional: true }, { token: MTX_DATETIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ MtxYearView.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: MtxYearView, selector: "mtx-year-view", inputs: { type: "type", dateFilter: "dateFilter", activeDate: "activeDate", selected: "selected" }, outputs: { selectedChange: "selectedChange", _userSelection: "_userSelection" }, exportAs: ["mtxYearView"], ngImport: i0, 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", components: [{ type: MtxCalendarBody, selector: "[mtx-calendar-body]", inputs: ["label", "rows", "todayValue", "selectedValue", "labelMinRequiredCells", "numCols", "allowDisabledSelection", "activeCell"], outputs: ["selectedValueChange"], exportAs: ["mtxCalendarBody"] }], animations: [mtxDatetimepickerAnimations.slideCalendar], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MtxYearView, decorators: [{
+            type: Component,
+            args: [{ selector: 'mtx-year-view', exportAs: 'mtxYearView', animations: [mtxDatetimepickerAnimations.slideCalendar], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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" }]
+        }], ctorParameters: function () { return [{ type: i1.DatetimeAdapter, decorators: [{
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MTX_DATETIME_FORMATS]
+                }] }]; }, propDecorators: { type: [{
+                type: Input
+            }], dateFilter: [{
+                type: Input
+            }], selectedChange: [{
+                type: Output
+            }], _userSelection: [{
+                type: Output
+            }], activeDate: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }] } });
+
+const CLOCK_RADIUS = 50;
+const CLOCK_INNER_RADIUS = 27.5;
+const CLOCK_OUTER_RADIUS = 41.25;
+const CLOCK_TICK_RADIUS = 7.0833;
+/**
+ * A clock that is used as part of the datetimepicker.
+ * @docs-private
+ */
+class MtxClock {
+    constructor(_element, _adapter) {
+        this._element = _element;
+        this._adapter = _adapter;
+        this.interval = 1;
+        this.twelvehour = false;
+        /** Emits when the currently selected date changes. */
+        this.selectedChange = new EventEmitter();
+        /** Emits when any date is activated. */
+        this.activeDateChange = new EventEmitter();
+        /** Emits when any date is selected. */
+        this._userSelection = new EventEmitter();
+        /** Hours and Minutes representing the clock view. */
+        this._hours = [];
+        this._minutes = [];
+        /** Whether the clock is in hour view. */
+        this._hourView = true;
+        this._timeChanged = false;
+        this.mouseMoveListener = (event) => {
+            this._handleMousemove(event);
+        };
+        this.mouseUpListener = () => {
+            this._handleMouseup();
+        };
     }
-    _updateDate(date) {
-        if (this.twelvehour) {
-            const 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;
+    /**
+     * The date to display in this clock view.
+     */
+    get activeDate() {
+        return this._activeDate;
     }
-    _selectAMPM(date) {
-        if (this._adapter.getHour(date) > 11) {
-            this._AMPM = 'PM';
-        }
-        else {
-            this._AMPM = 'AM';
+    set activeDate(value) {
+        const oldActiveDate = this._activeDate;
+        this._activeDate = this._adapter.clampDate(value, this.minDate, this.maxDate);
+        if (!this._adapter.sameMinute(oldActiveDate, this._activeDate)) {
+            this._init();
         }
     }
-    _ampmClicked(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);
-        }
+    /** The currently selected date. */
+    get selected() {
+        return this._selected;
     }
-    _yearClicked() {
-        if (this.type === 'year' || this.multiYearSelector) {
-            this.currentView = 'multi-year';
-            return;
+    set selected(value) {
+        this._selected = this._adapter.getValidDateOrNull(this._adapter.deserialize(value));
+        if (this._selected) {
+            this.activeDate = this._selected;
         }
-        this.currentView = 'year';
     }
-    _dateClicked() {
-        if (this.type !== 'month') {
-            this.currentView = 'month';
-        }
+    /** The minimum selectable date. */
+    get minDate() {
+        return this._minDate;
     }
-    _hoursClicked() {
-        this.currentView = 'clock';
-        this._clockView = 'hour';
+    set minDate(value) {
+        this._minDate = this._adapter.getValidDateOrNull(this._adapter.deserialize(value));
     }
-    _minutesClicked() {
-        this.currentView = 'clock';
-        this._clockView = 'minute';
+    /** The maximum selectable date. */
+    get maxDate() {
+        return this._maxDate;
     }
-    /** Handles user clicks on the previous button. */
-    _previousClicked() {
-        this._activeDate =
-            this.currentView === 'month'
-                ? this._adapter.addCalendarMonths(this._activeDate, -1)
-                : this._adapter.addCalendarYears(this._activeDate, this.currentView === 'year' ? -1 : -yearsPerPage);
+    set maxDate(value) {
+        this._maxDate = this._adapter.getValidDateOrNull(this._adapter.deserialize(value));
     }
-    /** Handles user clicks on the next button. */
-    _nextClicked() {
-        this._activeDate =
-            this.currentView === 'month'
-                ? this._adapter.addCalendarMonths(this._activeDate, 1)
-                : this._adapter.addCalendarYears(this._activeDate, this.currentView === 'year' ? 1 : yearsPerPage);
+    /** Whether the clock should be started in hour or minute view. */
+    set startView(value) {
+        this._hourView = value !== 'minute';
     }
-    /** Whether the previous period button is enabled. */
-    _previousEnabled() {
-        if (!this.minDate) {
-            return true;
+    get _hand() {
+        let hour = this._adapter.getHour(this.activeDate);
+        if (this.twelvehour) {
+            if (hour === 0) {
+                hour = 24;
+            }
+            this._selectedHour = hour > 12 ? hour - 12 : hour;
         }
-        return !this.minDate || !this._isSameView(this._activeDate, this.minDate);
-    }
-    /** Whether the next period button is enabled. */
-    _nextEnabled() {
-        return !this.maxDate || !this._isSameView(this._activeDate, this.maxDate);
-    }
-    /** Handles keydown events on the calendar body. */
-    _handleCalendarBodyKeydown(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 {
+            this._selectedHour = hour;
         }
-        else if (this.currentView === 'multi-year') {
-            this._handleCalendarBodyKeydownInMultiYearView(event);
+        this._selectedMinute = this._adapter.getMinute(this.activeDate);
+        let deg = 0;
+        let radius = CLOCK_OUTER_RADIUS;
+        if (this._hourView) {
+            const 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 {
-            this._handleCalendarBodyKeydownInClockView(event);
+            deg = Math.round(this._selectedMinute * (360 / 60));
         }
+        return {
+            'transform': `rotate(${deg}deg)`,
+            'height': `${radius}%`,
+            'margin-top': `${50 - radius}%`,
+        };
     }
-    _focusActiveCell() {
-        this._ngZone.runOutsideAngular(() => {
-            this._ngZone.onStable
-                .asObservable()
-                .pipe(first())
-                .subscribe(() => {
-                this._elementRef.nativeElement.focus();
-            });
-        });
+    ngAfterContentInit() {
+        this.activeDate = this._activeDate || this._adapter.today();
+        this._init();
     }
-    _calendarStateDone() {
-        this._calendarState = '';
+    /** Handles mousedown events on the clock body. */
+    _handleMousedown(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);
     }
-    /** Whether the two dates represent the same view in the current view mode (month or year). */
-    _isSameView(date1, date2) {
-        if (this.currentView === 'month') {
-            return (this._adapter.getYear(date1) === this._adapter.getYear(date2) &&
-                this._adapter.getMonth(date1) === this._adapter.getMonth(date2));
+    _handleMousemove(event) {
+        event.preventDefault();
+        this.setTime(event);
+    }
+    _handleMouseup() {
+        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();
+            }
         }
-        if (this.currentView === 'year') {
-            return this._adapter.getYear(date1) === this._adapter.getYear(date2);
+    }
+    /** Initializes this clock view. */
+    _init() {
+        this._hours.length = 0;
+        this._minutes.length = 0;
+        const hourNames = this._adapter.getHourNames();
+        const minuteNames = this._adapter.getMinuteNames();
+        if (this.twelvehour) {
+            for (let i = 1; i < hourNames.length / 2 + 1; i++) {
+                const radian = (i / 6) * Math.PI;
+                const radius = CLOCK_OUTER_RADIUS;
+                const date = this._adapter.createDatetime(this._adapter.getYear(this.activeDate), this._adapter.getMonth(this.activeDate), this._adapter.getDate(this.activeDate), i + 1, 0);
+                const 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,
+                    top: CLOCK_RADIUS - Math.cos(radian) * radius - CLOCK_TICK_RADIUS,
+                    left: CLOCK_RADIUS + Math.sin(radian) * radius - CLOCK_TICK_RADIUS,
+                });
+            }
+        }
+        else {
+            for (let i = 0; i < hourNames.length; i++) {
+                const radian = (i / 6) * Math.PI;
+                const outer = i > 0 && i < 13;
+                const radius = outer ? CLOCK_OUTER_RADIUS : CLOCK_INNER_RADIUS;
+                const date = this._adapter.createDatetime(this._adapter.getYear(this.activeDate), this._adapter.getMonth(this.activeDate), this._adapter.getDate(this.activeDate), i, 0);
+                const 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, MtxDatetimepickerFilterType.HOUR));
+                this._hours.push({
+                    value: i,
+                    displayValue: i === 0 ? '00' : hourNames[i],
+                    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 (let i = 0; i < minuteNames.length; i += 5) {
+            const radian = (i / 30) * Math.PI;
+            const 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);
+            const enabled = (!this.minDate || this._adapter.compareDatetime(date, this.minDate) >= 0) &&
+                (!this.maxDate || this._adapter.compareDatetime(date, this.maxDate) <= 0) &&
+                (!this.dateFilter || this.dateFilter(date, MtxDatetimepickerFilterType.MINUTE));
+            this._minutes.push({
+                value: i,
+                displayValue: i === 0 ? '00' : minuteNames[i],
+                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,
+            });
         }
-        // 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. */
-    _handleCalendarBodyKeydownInMonthView(event) {
-        switch (event.keyCode) {
-            case LEFT_ARROW:
-                this._activeDate = this._adapter.addCalendarDays(this._activeDate, -1);
-                break;
-            case RIGHT_ARROW:
-                this._activeDate = this._adapter.addCalendarDays(this._activeDate, 1);
-                break;
-            case UP_ARROW:
-                this._activeDate = this._adapter.addCalendarDays(this._activeDate, -7);
-                break;
-            case DOWN_ARROW:
-                this._activeDate = this._adapter.addCalendarDays(this._activeDate, 7);
-                break;
-            case HOME:
-                this._activeDate = this._adapter.addCalendarDays(this._activeDate, 1 - this._adapter.getDate(this._activeDate));
-                break;
-            case END:
-                this._activeDate = this._adapter.addCalendarDays(this._activeDate, this._adapter.getNumDaysInMonth(this._activeDate) -
-                    this._adapter.getDate(this._activeDate));
-                break;
-            case PAGE_UP:
-                this._activeDate = event.altKey
-                    ? this._adapter.addCalendarYears(this._activeDate, -1)
-                    : this._adapter.addCalendarMonths(this._activeDate, -1);
-                break;
-            case PAGE_DOWN:
-                this._activeDate = event.altKey
-                    ? this._adapter.addCalendarYears(this._activeDate, 1)
-                    : this._adapter.addCalendarMonths(this._activeDate, 1);
-                break;
-            case ENTER:
-                if (this._dateFilterForViews(this._activeDate)) {
-                    this._dateSelected(this._activeDate);
-                    // Prevent unexpected default actions such as form submission.
-                    event.preventDefault();
+    /**
+     * Set Time
+     * @param event
+     */
+    setTime(event) {
+        const trigger = this._element.nativeElement;
+        const triggerRect = trigger.getBoundingClientRect();
+        const width = trigger.offsetWidth;
+        const height = trigger.offsetHeight;
+        const pageX = event.pageX !== undefined ? event.pageX : event.touches[0].pageX;
+        const pageY = event.pageY !== undefined ? event.pageY : event.touches[0].pageY;
+        const x = width / 2 - (pageX - triggerRect.left - window.pageXOffset);
+        const y = height / 2 - (pageY - triggerRect.top - window.pageYOffset);
+        let radian = Math.atan2(-x, y);
+        const unit = Math.PI / (this._hourView ? 6 : this.interval ? 30 / this.interval : 30);
+        const z = Math.sqrt(x * x + y * y);
+        const outer = this._hourView &&
+            z > (width * (CLOCK_OUTER_RADIUS / 100) + width * (CLOCK_INNER_RADIUS / 100)) / 2;
+        if (radian < 0) {
+            radian = Math.PI * 2 + radian;
+        }
+        let value = Math.round(radian / unit);
+        let date;
+        if (this._hourView) {
+            if (this.twelvehour) {
+                value = value === 0 ? 12 : value;
+            }
+            else {
+                if (value === 12) {
+                    value = 0;
                 }
-                return;
-            default:
-                // Don't prevent default or focus active cell on keys that we don't explicitly handle.
-                return;
+                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));
         }
-        // Prevent unexpected default actions such as form submission.
-        event.preventDefault();
-    }
-    /** Handles keydown events on the calendar body when calendar is in year view. */
-    _handleCalendarBodyKeydownInYearView(event) {
-        switch (event.keyCode) {
-            case LEFT_ARROW:
-                this._activeDate = this._adapter.addCalendarMonths(this._activeDate, -1);
-                break;
-            case RIGHT_ARROW:
-                this._activeDate = this._adapter.addCalendarMonths(this._activeDate, 1);
-                break;
-            case UP_ARROW:
-                this._activeDate = this._prevMonthInSameCol(this._activeDate);
-                break;
-            case DOWN_ARROW:
-                this._activeDate = this._nextMonthInSameCol(this._activeDate);
-                break;
-            case HOME:
-                this._activeDate = this._adapter.addCalendarMonths(this._activeDate, -this._adapter.getMonth(this._activeDate));
-                break;
-            case END:
-                this._activeDate = this._adapter.addCalendarMonths(this._activeDate, 11 - this._adapter.getMonth(this._activeDate));
-                break;
-            case PAGE_UP:
-                this._activeDate = this._adapter.addCalendarYears(this._activeDate, event.altKey ? -10 : -1);
-                break;
-            case PAGE_DOWN:
-                this._activeDate = this._adapter.addCalendarYears(this._activeDate, event.altKey ? 10 : 1);
-                break;
-            case ENTER:
-                this._monthSelected(this._activeDate);
-                break;
-            default:
-                // Don't prevent default or focus active cell on keys that we don't explicitly handle.
-                return;
+        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);
         }
-        // Prevent unexpected default actions such as form submission.
-        event.preventDefault();
-    }
-    /** Handles keydown events on the calendar body when calendar is in multi-year view. */
-    _handleCalendarBodyKeydownInMultiYearView(event) {
-        switch (event.keyCode) {
-            case LEFT_ARROW:
-                this._activeDate = this._adapter.addCalendarYears(this._activeDate, -1);
-                break;
-            case RIGHT_ARROW:
-                this._activeDate = this._adapter.addCalendarYears(this._activeDate, 1);
-                break;
-            case UP_ARROW:
-                this._activeDate = this._adapter.addCalendarYears(this._activeDate, -yearsPerRow);
-                break;
-            case DOWN_ARROW:
-                this._activeDate = this._adapter.addCalendarYears(this._activeDate, yearsPerRow);
-                break;
-            case HOME:
-                this._activeDate = this._adapter.addCalendarYears(this._activeDate, -getActiveOffset(this._adapter, this._activeDate, this.minDate, this.maxDate));
-                break;
-            case END:
-                this._activeDate = this._adapter.addCalendarYears(this._activeDate, yearsPerPage -
-                    getActiveOffset(this._adapter, this._activeDate, this.minDate, this.maxDate) -
-                    1);
-                break;
-            case PAGE_UP:
-                this._activeDate = this._adapter.addCalendarYears(this._activeDate, event.altKey ? -yearsPerPage * 10 : -yearsPerPage);
-                break;
-            case PAGE_DOWN:
-                this._activeDate = this._adapter.addCalendarYears(this._activeDate, event.altKey ? yearsPerPage * 10 : yearsPerPage);
-                break;
-            case 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. */
-    _handleCalendarBodyKeydownInClockView(event) {
-        switch (event.keyCode) {
-            case UP_ARROW:
-                this._activeDate =
-                    this._clockView === 'hour'
-                        ? this._adapter.addCalendarHours(this._activeDate, 1)
-                        : this._adapter.addCalendarMinutes(this._activeDate, 1);
-                break;
-            case DOWN_ARROW:
-                this._activeDate =
-                    this._clockView === 'hour'
-                        ? this._adapter.addCalendarHours(this._activeDate, -1)
-                        : this._adapter.addCalendarMinutes(this._activeDate, -1);
-                break;
-            case 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.
-     */
-    _prevMonthInSameCol(date) {
-        // Determine how many months to jump forward given that there are 2 empty slots at the beginning
-        // of each year.
-        const 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.
-     */
-    _nextMonthInSameCol(date) {
-        // Determine how many months to jump forward given that there are 2 empty slots at the beginning
-        // of each year.
-        const increment = this._adapter.getMonth(date) <= 4 ? 7 : this._adapter.getMonth(date) >= 7 ? 5 : 12;
-        return this._adapter.addCalendarMonths(date, increment);
-    }
-    calendarState(direction) {
-        this._calendarState = direction;
-    }
-    _2digit(n) {
-        return ('00' + n).slice(-2);
+        this._timeChanged = true;
+        this.activeDate = date;
+        this.activeDateChange.emit(this.activeDate);
     }
 }
-/** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
-MtxCalendar.decorators = [
-    { type: Component, args: [{
-                selector: 'mtx-calendar',
-                template: "<div class=\"mtx-calendar-header\">\n  <div (click)=\"_yearClicked()\"\n       *ngIf=\"type !== 'time'\"\n       [class.active]=\"currentView === 'year' || currentView === 'multi-year'\"\n       class=\"mtx-calendar-header-year\"\n       role=\"button\">\n    <span>{{ _yearLabel }}</span>\n    <svg *ngIf=\"multiYearSelector || type === 'year'\"\n         class=\"mtx-calendar-header-year-dropdown\"\n         width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n      <path d=\"M7,10L12,15L17,10H7Z\"></path>\n    </svg>\n  </div>\n  <div class=\"mtx-calendar-header-date-time\">\n    <span (click)=\"_dateClicked()\" *ngIf=\"type !== 'time' && type !== 'year'\"\n          [class.active]=\"currentView === 'month'\"\n          [class.not-clickable]=\"type === 'month'\"\n          class=\"mtx-calendar-header-date\"\n          role=\"button\">{{ _dateLabel }}</span>\n    <span *ngIf=\"type.endsWith('time')\"\n          [class.active]=\"currentView === 'clock'\"\n          class=\"mtx-calendar-header-time\">\n      <span (click)=\"_hoursClicked()\"\n            [class.active]=\"_clockView === 'hour'\"\n            class=\"mtx-calendar-header-hours\"\n            role=\"button\">{{ _hoursLabel }}</span>:<span (click)=\"_minutesClicked()\"\n            [class.active]=\"_clockView === 'minute'\"\n            class=\"mtx-calendar-header-minutes\"\n            role=\"button\">{{ _minutesLabel }}</span>\n      <br />\n      <span *ngIf=\"twelvehour\" class=\"mtx-calendar-header-ampm-container\">\n        <span (click)=\"_ampmClicked('AM')\"\n              [class.active]=\"_AMPM === 'AM'\"\n              class=\"mtx-calendar-header-ampm\">AM</span>/<span\n              (click)=\"_ampmClicked('PM')\"\n              [class.active]=\"_AMPM === 'PM'\"\n              class=\"mtx-calendar-header-ampm\">PM</span>\n      </span>\n    </span>\n  </div>\n</div>\n<div class=\"mtx-calendar-content\" [ngSwitch]=\"currentView\">\n  <div *ngIf=\"currentView === 'month' || currentView === 'year' || currentView === 'multi-year'\"\n       class=\"mtx-month-content\">\n    <div class=\"mtx-calendar-controls\">\n      <button mat-icon-button type=\"button\" (click)=\"_previousClicked()\"\n              [attr.aria-disabled]=\"!_previousEnabled()\"\n              [attr.aria-label]=\"_ariaLabelPrev\"\n              [class.disabled]=\"!_previousEnabled()\"\n              class=\"mtx-calendar-previous-button\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n          <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\"></path>\n        </svg>\n      </button>\n      <div [@slideCalendar]=\"_calendarState\"\n           (@slideCalendar.done)=\"_calendarStateDone()\"\n           class=\"mtx-calendar-period-button\">\n        <strong>{{ _monthYearLabel }}</strong>\n      </div>\n      <button mat-icon-button type=\"button\" (click)=\"_nextClicked()\"\n              [attr.aria-disabled]=\"!_nextEnabled()\"\n              [attr.aria-label]=\"_ariaLabelNext\"\n              [class.disabled]=\"!_nextEnabled()\"\n              class=\"mtx-calendar-next-button\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n          <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"></path>\n        </svg>\n      </button>\n    </div>\n  </div>\n  <mtx-month-view (_userSelection)=\"_userSelected()\"\n                  (selectedChange)=\"_dateSelected($event)\"\n                  *ngSwitchCase=\"'month'\"\n                  [activeDate]=\"_activeDate\"\n                  [dateFilter]=\"_dateFilterForViews\"\n                  [selected]=\"selected!\"\n                  [type]=\"type\">\n  </mtx-month-view>\n  <mtx-year-view (_userSelection)=\"_userSelected()\"\n                 (selectedChange)=\"_monthSelected($event)\"\n                 *ngSwitchCase=\"'year'\"\n                 [activeDate]=\"_activeDate\"\n                 [dateFilter]=\"_dateFilterForViews\"\n                 [selected]=\"selected!\"\n                 [type]=\"type\">\n  </mtx-year-view>\n  <mtx-multi-year-view (_userSelection)=\"_userSelected()\"\n                       (selectedChange)=\"_yearSelected($event)\"\n                       *ngSwitchCase=\"'multi-year'\"\n                       [activeDate]=\"_activeDate\"\n                       [dateFilter]=\"_dateFilterForViews\"\n                       [maxDate]=\"maxDate\"\n                       [minDate]=\"minDate\"\n                       [selected]=\"selected!\"\n                       [type]=\"type\">\n  </mtx-multi-year-view>\n  <mtx-clock (_userSelection)=\"_userSelected()\"\n             (activeDateChange)=\"_onActiveDateChange($event)\"\n             (selectedChange)=\"_timeSelected($event)\"\n             *ngSwitchDefault\n             [dateFilter]=\"dateFilter\"\n             [interval]=\"timeInterval\"\n             [maxDate]=\"maxDate\"\n             [minDate]=\"minDate\"\n             [selected]=\"_activeDate\"\n             [startView]=\"_clockView\"\n             [twelvehour]=\"twelvehour\">\n  </mtx-clock>\n</div>\n",
-                host: {
-                    'class': 'mtx-calendar',
-                    'tabindex': '0',
-                    '(keydown)': '_handleCalendarBodyKeydown($event)',
-                },
-                exportAs: 'mtxCalendar',
-                animations: [mtxDatetimepickerAnimations.slideCalendar],
-                encapsulation: ViewEncapsulation.None,
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".mtx-calendar{display:block;outline:none}.mtx-calendar[mode=landscape]{display:flex}.mtx-calendar-header{padding:16px;box-sizing:border-box;border-radius:4px 4px 0 0}[mode=landscape] .mtx-calendar-header{width:150px;min-width:150px;border-radius:4px 0 0 4px}[dir=rtl] [mode=landscape] .mtx-calendar-header{border-radius:0 4px 4px 0}.mtx-calendar-header-year,.mtx-calendar-header-date-time{width:100%;white-space:nowrap}.mtx-calendar-header-year{height:32px;line-height:32px}.mtx-calendar-header-year>*{vertical-align:middle}.mtx-calendar-header-date-time{line-height:34px}[mode=landscape] .mtx-calendar-header-date-time{white-space:normal;word-wrap:break-word}.mtx-calendar-header-year:not(.active),.mtx-calendar-header-date:not(.active),.mtx-calendar-header-hours:not(.active),.mtx-calendar-header-minutes:not(.active),.mtx-calendar-header-ampm:not(.active){cursor:pointer;opacity:.6}.mtx-calendar-header-year.not-clickable,.mtx-calendar-header-date.not-clickable,.mtx-calendar-header-hours.not-clickable,.mtx-calendar-header-minutes.not-clickable,.mtx-calendar-header-ampm.not-clickable{cursor:initial}.mtx-calendar-header-time{display:inline-block;padding-left:8px}.mtx-calendar-header-time:not(.active){opacity:.6}.mtx-calendar-header-time:not(.active) .mtx-calendar-header-hours,.mtx-calendar-header-time:not(.active) .mtx-calendar-header-minutes,.mtx-calendar-header-time:not(.active) .mtx-calendar-header-ampm{cursor:pointer;opacity:1}[dir=rtl] .mtx-calendar-header-time{padding-right:8px}[mode=landscape] .mtx-calendar-header-time{display:block;padding:0}.mtx-calendar-content{width:100%;padding:8px;outline:none;box-sizing:border-box;overflow:hidden}.mtx-calendar-controls{display:flex;justify-content:space-between;margin:0 calc(4.7142857143% - 16px)}.mtx-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:.04}.mtx-calendar-period-button{display:inline-block;height:40px;line-height:40px;outline:none;border:0;background:transparent;box-sizing:border-box}.mtx-calendar-previous-button.disabled,.mtx-calendar-next-button.disabled{pointer-events:none}.mtx-calendar-previous-button svg,.mtx-calendar-next-button svg{fill:currentColor;vertical-align:top}[dir=rtl] .mtx-calendar-previous-button svg,[dir=rtl] .mtx-calendar-next-button svg{transform:rotate(180deg)}.mtx-calendar-table{border-spacing:0;border-collapse:collapse;width:100%}.mtx-calendar-table-header th{text-align:center;padding:8px 0}@media all and (orientation: landscape){.mtx-calendar[mode=auto]{display:flex}.mtx-calendar[mode=auto] .mtx-calendar-header{width:150px;min-width:150px;border-radius:4px 0 0 4px}[dir=rtl] .mtx-calendar[mode=auto] .mtx-calendar-header{border-radius:0 4px 4px 0}.mtx-calendar[mode=auto] .mtx-calendar-header-date-time{white-space:normal;word-wrap:break-word}.mtx-calendar[mode=auto] .mtx-calendar-header-time{display:block;padding:0}}\n"]
-            },] }
-];
-/**
- * @type {function(): !Array<(null|{
- *   type: ?,
- *   decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
- * })>}
- * @nocollapse
- */
-MtxCalendar.ctorParameters = () => [
-    { type: ElementRef },
-    { type: MatDatepickerIntl },
-    { type: NgZone },
-    { type: DatetimeAdapter, decorators: [{ type: Optional }] },
-    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [MTX_DATETIME_FORMATS,] }] },
-    { type: ChangeDetectorRef }
-];
-/** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
-MtxCalendar.propDecorators = {
-    multiYearSelector: [{ type: Input }],
-    twelvehour: [{ type: Input }],
-    startView: [{ type: Input }],
-    timeInterval: [{ type: Input }],
-    dateFilter: [{ type: Input }],
-    preventSameDateTimeSelection: [{ type: Input }],
-    selectedChange: [{ type: Output }],
-    viewChanged: [{ type: Output }],
-    _userSelection: [{ type: Output }],
-    type: [{ type: Input }],
-    startAt: [{ type: Input }],
-    selected: [{ type: Input }],
-    minDate: [{ type: Input }],
-    maxDate: [{ type: Input }]
-};
+/** @nocollapse */ /** @nocollapse */ MtxClock.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MtxClock, deps: [{ token: i0.ElementRef }, { token: i1.DatetimeAdapter }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ MtxClock.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: MtxClock, selector: "mtx-clock", inputs: { dateFilter: "dateFilter", interval: "interval", twelvehour: "twelvehour", activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate", startView: "startView" }, outputs: { selectedChange: "selectedChange", activeDateChange: "activeDateChange", _userSelection: "_userSelection" }, host: { attributes: { "role": "clock" }, listeners: { "mousedown": "_handleMousedown($event)" }, properties: { "class.mtx-clock": "true" } }, exportAs: ["mtxClock"], ngImport: i0, 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", styles: [".mtx-clock{position:relative;display:block;min-width:224px;margin:8px;box-sizing:border-box;-webkit-user-select:none;user-select:none}.mtx-clock-wrapper{position:relative;width:100%;height:0;padding-top:100%;border-radius:50%}.mtx-clock-center{position:absolute;top:50%;left:50%;width:2%;height:2%;margin:-1%;border-radius:50%}.mtx-clock-hand{position:absolute;top:0;right:0;bottom:0;left:0;width:1px;margin:0 auto;transform-origin:bottom}.mtx-clock-hand:before{content:\"\";position:absolute;top:-4px;left:-4px;width:8px;height:8px;border-radius:50%}.mtx-clock-hours,.mtx-clock-minutes{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;visibility:hidden;transition:.35s;transform:scale(1.2)}.mtx-clock-hours.active,.mtx-clock-minutes.active{opacity:1;visibility:visible;transform:scale(1)}.mtx-clock-minutes{transform:scale(.8)}.mtx-clock-cell{position:absolute;display:flex;width:14.1666%;height:14.1666%;justify-content:center;box-sizing:border-box;border-radius:50%;align-items:center;cursor:pointer}.mtx-clock-cell.mtx-clock-cell-disabled{pointer-events:none}\n"], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MtxClock, decorators: [{
+            type: Component,
+            args: [{ selector: 'mtx-clock', host: {
+                        '[class.mtx-clock]': 'true',
+                        'role': 'clock',
+                        '(mousedown)': '_handleMousedown($event)',
+                    }, exportAs: 'mtxClock', encapsulation: ViewEncapsulation.None, 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", styles: [".mtx-clock{position:relative;display:block;min-width:224px;margin:8px;box-sizing:border-box;-webkit-user-select:none;user-select:none}.mtx-clock-wrapper{position:relative;width:100%;height:0;padding-top:100%;border-radius:50%}.mtx-clock-center{position:absolute;top:50%;left:50%;width:2%;height:2%;margin:-1%;border-radius:50%}.mtx-clock-hand{position:absolute;top:0;right:0;bottom:0;left:0;width:1px;margin:0 auto;transform-origin:bottom}.mtx-clock-hand:before{content:\"\";position:absolute;top:-4px;left:-4px;width:8px;height:8px;border-radius:50%}.mtx-clock-hours,.mtx-clock-minutes{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;visibility:hidden;transition:.35s;transform:scale(1.2)}.mtx-clock-hours.active,.mtx-clock-minutes.active{opacity:1;visibility:visible;transform:scale(1)}.mtx-clock-minutes{transform:scale(.8)}.mtx-clock-cell{position:absolute;display:flex;width:14.1666%;height:14.1666%;justify-content:center;box-sizing:border-box;border-radius:50%;align-items:center;cursor:pointer}.mtx-clock-cell.mtx-clock-cell-disabled{pointer-events:none}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.DatetimeAdapter }]; }, propDecorators: { dateFilter: [{
+                type: Input
+            }], interval: [{
+                type: Input
+            }], twelvehour: [{
+                type: Input
+            }], selectedChange: [{
+                type: Output
+            }], activeDateChange: [{
+                type: Output
+            }], _userSelection: [{
+                type: Output
+            }], activeDate: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], startView: [{
+                type: Input
+            }] } });
 
-const CLOCK_RADIUS = 50;
-const CLOCK_INNER_RADIUS = 27.5;
-const CLOCK_OUTER_RADIUS = 41.25;
-const CLOCK_TICK_RADIUS = 7.0833;
 /**
- * A clock that is used as part of the datetimepicker.
+ * A calendar that is used as part of the datetimepicker.
  * @docs-private
  */
-class MtxClock {
-    constructor(_element, _adapter) {
-        this._element = _element;
+class MtxCalendar {
+    constructor(_elementRef, _intl, _ngZone, _adapter, _dateFormats, changeDetectorRef) {
+        this._elementRef = _elementRef;
+        this._intl = _intl;
+        this._ngZone = _ngZone;
         this._adapter = _adapter;
-        this.interval = 1;
-        this.twelvehour = false;
+        this._dateFormats = _dateFormats;
+        this._multiYearSelector = false;
+        this._twelvehour = false;
+        /** Whether the calendar should be started in month or year view. */
+        this.startView = 'month';
+        this.timeInterval = 1;
+        /** Prevent user to select same date time */
+        this.preventSameDateTimeSelection = false;
         /** Emits when the currently selected date changes. */
         this.selectedChange = new EventEmitter();
-        /** Emits when any date is activated. */
-        this.activeDateChange = new EventEmitter();
-        /** Emits when any date is selected. */
+        /** Emits when the view has been changed. */
+        this.viewChanged = new EventEmitter();
         this._userSelection = new 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 = (event) => {
-            this._handleMousemove(event);
-        };
-        this.mouseUpListener = () => {
-            this._handleMouseup();
+        this._clockView = 'hour';
+        this._type = 'date';
+        /** Date filter for the month and year views. */
+        this._dateFilterForViews = (date) => {
+            return (!!date &&
+                (!this.dateFilter || this.dateFilter(date, 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(() => changeDetectorRef.markForCheck());
     }
-    /**
-     * The date to display in this clock view.
-     */
-    get activeDate() {
-        return this._activeDate;
+    get multiYearSelector() {
+        return this._multiYearSelector;
     }
-    set activeDate(value) {
-        const oldActiveDate = this._activeDate;
-        this._activeDate = this._adapter.clampDate(value, this.minDate, this.maxDate);
-        if (!this._adapter.sameMinute(oldActiveDate, this._activeDate)) {
-            this._init();
+    set multiYearSelector(value) {
+        this._multiYearSelector = coerceBooleanProperty(value);
+    }
+    /** if true change the clock to 12 hour format. */
+    get twelvehour() {
+        return this._twelvehour;
+    }
+    set twelvehour(value) {
+        this._twelvehour = coerceBooleanProperty(value);
+    }
+    get type() {
+        return this._type;
+    }
+    set type(value) {
+        this._type = value || 'date';
+        if (this.type === 'year') {
+            this.multiYearSelector = true;
         }
     }
+    /** A date representing the period (month or year) to start the calendar in. */
+    get startAt() {
+        return this._startAt;
+    }
+    set startAt(value) {
+        this._startAt = this._adapter.getValidDateOrNull(value);
+    }
     /** The currently selected date. */
     get selected() {
         return this._selected;
     }
     set selected(value) {
-        this._selected = this._adapter.getValidDateOrNull(this._adapter.deserialize(value));
-        if (this._selected) {
-            this.activeDate = this._selected;
-        }
+        this._selected = this._adapter.getValidDateOrNull(value);
     }
     /** The minimum selectable date. */
     get minDate() {
         return this._minDate;
     }
     set minDate(value) {
-        this._minDate = this._adapter.getValidDateOrNull(this._adapter.deserialize(value));
+        this._minDate = this._adapter.getValidDateOrNull(value);
     }
     /** The maximum selectable date. */
     get maxDate() {
         return this._maxDate;
     }
     set maxDate(value) {
-        this._maxDate = this._adapter.getValidDateOrNull(this._adapter.deserialize(value));
+        this._maxDate = this._adapter.getValidDateOrNull(value);
     }
-    /** Whether the clock should be started in hour or minute view. */
-    set startView(value) {
-        this._hourView = value !== 'minute';
+    /**
+     * The current active date. This determines which time period is shown and which date is
+     * highlighted when using keyboard navigation.
+     */
+    get _activeDate() {
+        return this._clampedActiveDate;
     }
-    get _hand() {
-        let hour = this._adapter.getHour(this.activeDate);
-        if (this.twelvehour) {
-            if (hour === 0) {
-                hour = 24;
+    set _activeDate(value) {
+        const 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');
             }
-            this._selectedHour = hour > 12 ? hour - 12 : hour;
-        }
-        else {
-            this._selectedHour = hour;
-        }
-        this._selectedMinute = this._adapter.getMinute(this.activeDate);
-        let deg = 0;
-        let radius = CLOCK_OUTER_RADIUS;
-        if (this._hourView) {
-            const outer = this._selectedHour > 0 && this._selectedHour < 13;
-            radius = outer ? CLOCK_OUTER_RADIUS : CLOCK_INNER_RADIUS;
-            if (this.twelvehour) {
-                radius = CLOCK_OUTER_RADIUS;
+            else {
+                this.calendarState('left');
             }
-            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}%`,
-        };
     }
-    ngAfterContentInit() {
-        this.activeDate = this._activeDate || this._adapter.today();
-        this._init();
+    /** Whether the calendar is in month view. */
+    get currentView() {
+        return this._currentView;
     }
-    /** Handles mousedown events on the clock body. */
-    _handleMousedown(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);
+    set currentView(view) {
+        this._currentView = view;
+        this.viewChanged.emit(view);
     }
-    _handleMousemove(event) {
-        event.preventDefault();
-        this.setTime(event);
+    /** The label for the current calendar view. */
+    get _yearLabel() {
+        return this._adapter.getYearName(this._activeDate);
     }
-    _handleMouseup() {
-        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();
-            }
+    get _monthYearLabel() {
+        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.
+            const activeYear = this._adapter.getYear(this._activeDate);
+            const minYearOfPage = activeYear - getActiveOffset(this._adapter, this._activeDate, this.minDate, this.maxDate);
+            const maxYearOfPage = minYearOfPage + yearsPerPage - 1;
+            const minYearName = this._adapter.getYearName(this._adapter.createDate(minYearOfPage, 0, 1));
+            const 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);
     }
-    /** Initializes this clock view. */
-    _init() {
-        this._hours.length = 0;
-        this._minutes.length = 0;
-        const hourNames = this._adapter.getHourNames();
-        const minuteNames = this._adapter.getMinuteNames();
+    get _dateLabel() {
+        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);
+        }
+    }
+    get _hoursLabel() {
+        let hour = this._adapter.getHour(this._activeDate);
         if (this.twelvehour) {
-            for (let i = 1; i < hourNames.length / 2 + 1; i++) {
-                const radian = (i / 6) * Math.PI;
-                const radius = CLOCK_OUTER_RADIUS;
-                const date = this._adapter.createDatetime(this._adapter.getYear(this.activeDate), this._adapter.getMonth(this.activeDate), this._adapter.getDate(this.activeDate), i + 1, 0);
-                const 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,
-                    top: CLOCK_RADIUS - Math.cos(radian) * radius - CLOCK_TICK_RADIUS,
-                    left: CLOCK_RADIUS + Math.sin(radian) * radius - CLOCK_TICK_RADIUS,
-                });
+            if (hour === 0) {
+                hour = 24;
             }
+            hour = hour > 12 ? hour - 12 : hour;
+        }
+        return this._2digit(hour);
+    }
+    get _minutesLabel() {
+        return this._2digit(this._adapter.getMinute(this._activeDate));
+    }
+    get _ariaLabelNext() {
+        switch (this._currentView) {
+            case 'month':
+                return this._intl.nextMonthLabel;
+            case 'year':
+                return this._intl.nextYearLabel;
+            case 'multi-year':
+                return this._intl.nextMultiYearLabel;
+            default:
+                return '';
+        }
+    }
+    get _ariaLabelPrev() {
+        switch (this._currentView) {
+            case 'month':
+                return this._intl.prevMonthLabel;
+            case 'year':
+                return this._intl.prevYearLabel;
+            case 'multi-year':
+                return this._intl.prevMultiYearLabel;
+            default:
+                return '';
+        }
+    }
+    _userSelected() {
+        this._userSelection.emit();
+    }
+    ngAfterContentInit() {
+        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 {
-            for (let i = 0; i < hourNames.length; i++) {
-                const radian = (i / 6) * Math.PI;
-                const outer = i > 0 && i < 13;
-                const radius = outer ? CLOCK_OUTER_RADIUS : CLOCK_INNER_RADIUS;
-                const date = this._adapter.createDatetime(this._adapter.getYear(this.activeDate), this._adapter.getMonth(this.activeDate), this._adapter.getDate(this.activeDate), i, 0);
-                const 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, MtxDatetimepickerFilterType.HOUR));
-                this._hours.push({
-                    value: i,
-                    displayValue: i === 0 ? '00' : hourNames[i],
-                    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%',
-                });
+            this.currentView = this.startView || 'month';
+        }
+    }
+    ngOnDestroy() {
+        this._intlChanges.unsubscribe();
+    }
+    /** Handles date selection in the month view. */
+    _dateSelected(date) {
+        if (this.type === 'date') {
+            if (!this._adapter.sameDate(date, this.selected) || !this.preventSameDateTimeSelection) {
+                this.selectedChange.emit(date);
             }
         }
-        for (let i = 0; i < minuteNames.length; i += 5) {
-            const radian = (i / 30) * Math.PI;
-            const 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);
-            const enabled = (!this.minDate || this._adapter.compareDatetime(date, this.minDate) >= 0) &&
-                (!this.maxDate || this._adapter.compareDatetime(date, this.maxDate) <= 0) &&
-                (!this.dateFilter || this.dateFilter(date, MtxDatetimepickerFilterType.MINUTE));
-            this._minutes.push({
-                value: i,
-                displayValue: i === 0 ? '00' : minuteNames[i],
-                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,
-            });
+        else {
+            this._activeDate = date;
+            this.currentView = 'clock';
         }
     }
-    /**
-     * Set Time
-     * @param event
-     */
-    setTime(event) {
-        const trigger = this._element.nativeElement;
-        const triggerRect = trigger.getBoundingClientRect();
-        const width = trigger.offsetWidth;
-        const height = trigger.offsetHeight;
-        const pageX = event.pageX !== undefined ? event.pageX : event.touches[0].pageX;
-        const pageY = event.pageY !== undefined ? event.pageY : event.touches[0].pageY;
-        const x = width / 2 - (pageX - triggerRect.left - window.pageXOffset);
-        const y = height / 2 - (pageY - triggerRect.top - window.pageYOffset);
-        let radian = Math.atan2(-x, y);
-        const unit = Math.PI / (this._hourView ? 6 : this.interval ? 30 / this.interval : 30);
-        const z = Math.sqrt(x * x + y * y);
-        const outer = this._hourView &&
-            z > (width * (CLOCK_OUTER_RADIUS / 100) + width * (CLOCK_INNER_RADIUS / 100)) / 2;
-        if (radian < 0) {
-            radian = Math.PI * 2 + radian;
-        }
-        let value = Math.round(radian / unit);
-        let date;
-        if (this._hourView) {
-            if (this.twelvehour) {
-                value = value === 0 ? 12 : value;
+    /** Handles month selection in the year view. */
+    _monthSelected(month) {
+        if (this.type === 'month') {
+            if (!this._adapter.sameMonthAndYear(month, this.selected) ||
+                !this.preventSameDateTimeSelection) {
+                this.selectedChange.emit(this._adapter.getFirstDateOfMonth(month));
             }
-            else {
-                if (value === 12) {
-                    value = 0;
-                }
-                value = outer ? (value === 0 ? 12 : value) : value === 0 ? 0 : value + 12;
+        }
+        else {
+            this._activeDate = month;
+            this.currentView = 'month';
+            this._clockView = 'hour';
+        }
+    }
+    /** Handles year selection in the multi year view. */
+    _yearSelected(year) {
+        if (this.type === 'year') {
+            if (!this._adapter.sameYear(year, this.selected) || !this.preventSameDateTimeSelection) {
+                const normalizedDate = this._adapter.createDatetime(this._adapter.getYear(year), 0, 1, 0, 0);
+                this.selectedChange.emit(normalizedDate);
             }
-            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;
+            this._activeDate = year;
+            this.currentView = 'year';
+        }
+    }
+    _timeSelected(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);
             }
-            if (value === 60) {
-                value = 0;
+        }
+    }
+    _onActiveDateChange(date) {
+        this._activeDate = date;
+    }
+    _updateDate(date) {
+        if (this.twelvehour) {
+            const 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);
             }
-            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 date;
+    }
+    _selectAMPM(date) {
+        if (this._adapter.getHour(date) > 11) {
+            this._AMPM = 'PM';
+        }
+        else {
+            this._AMPM = 'AM';
+        }
+    }
+    _ampmClicked(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);
+        }
+    }
+    _yearClicked() {
+        if (this.type === 'year' || this.multiYearSelector) {
+            this.currentView = 'multi-year';
+            return;
+        }
+        this.currentView = 'year';
+    }
+    _dateClicked() {
+        if (this.type !== 'month') {
+            this.currentView = 'month';
+        }
+    }
+    _hoursClicked() {
+        this.currentView = 'clock';
+        this._clockView = 'hour';
+    }
+    _minutesClicked() {
+        this.currentView = 'clock';
+        this._clockView = 'minute';
+    }
+    /** Handles user clicks on the previous button. */
+    _previousClicked() {
+        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. */
+    _nextClicked() {
+        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. */
+    _previousEnabled() {
+        if (!this.minDate) {
+            return true;
+        }
+        return !this.minDate || !this._isSameView(this._activeDate, this.minDate);
+    }
+    /** Whether the next period button is enabled. */
+    _nextEnabled() {
+        return !this.maxDate || !this._isSameView(this._activeDate, this.maxDate);
+    }
+    /** Handles keydown events on the calendar body. */
+    _handleCalendarBodyKeydown(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);
+        }
+    }
+    _focusActiveCell() {
+        this._ngZone.runOutsideAngular(() => {
+            this._ngZone.onStable
+                .asObservable()
+                .pipe(first())
+                .subscribe(() => {
+                this._elementRef.nativeElement.focus();
+            });
+        });
+    }
+    _calendarStateDone() {
+        this._calendarState = '';
+    }
+    /** Whether the two dates represent the same view in the current view mode (month or year). */
+    _isSameView(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. */
+    _handleCalendarBodyKeydownInMonthView(event) {
+        switch (event.keyCode) {
+            case LEFT_ARROW:
+                this._activeDate = this._adapter.addCalendarDays(this._activeDate, -1);
+                break;
+            case RIGHT_ARROW:
+                this._activeDate = this._adapter.addCalendarDays(this._activeDate, 1);
+                break;
+            case UP_ARROW:
+                this._activeDate = this._adapter.addCalendarDays(this._activeDate, -7);
+                break;
+            case DOWN_ARROW:
+                this._activeDate = this._adapter.addCalendarDays(this._activeDate, 7);
+                break;
+            case HOME:
+                this._activeDate = this._adapter.addCalendarDays(this._activeDate, 1 - this._adapter.getDate(this._activeDate));
+                break;
+            case END:
+                this._activeDate = this._adapter.addCalendarDays(this._activeDate, this._adapter.getNumDaysInMonth(this._activeDate) -
+                    this._adapter.getDate(this._activeDate));
+                break;
+            case PAGE_UP:
+                this._activeDate = event.altKey
+                    ? this._adapter.addCalendarYears(this._activeDate, -1)
+                    : this._adapter.addCalendarMonths(this._activeDate, -1);
+                break;
+            case PAGE_DOWN:
+                this._activeDate = event.altKey
+                    ? this._adapter.addCalendarYears(this._activeDate, 1)
+                    : this._adapter.addCalendarMonths(this._activeDate, 1);
+                break;
+            case 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. */
+    _handleCalendarBodyKeydownInYearView(event) {
+        switch (event.keyCode) {
+            case LEFT_ARROW:
+                this._activeDate = this._adapter.addCalendarMonths(this._activeDate, -1);
+                break;
+            case RIGHT_ARROW:
+                this._activeDate = this._adapter.addCalendarMonths(this._activeDate, 1);
+                break;
+            case UP_ARROW:
+                this._activeDate = this._prevMonthInSameCol(this._activeDate);
+                break;
+            case DOWN_ARROW:
+                this._activeDate = this._nextMonthInSameCol(this._activeDate);
+                break;
+            case HOME:
+                this._activeDate = this._adapter.addCalendarMonths(this._activeDate, -this._adapter.getMonth(this._activeDate));
+                break;
+            case END:
+                this._activeDate = this._adapter.addCalendarMonths(this._activeDate, 11 - this._adapter.getMonth(this._activeDate));
+                break;
+            case PAGE_UP:
+                this._activeDate = this._adapter.addCalendarYears(this._activeDate, event.altKey ? -10 : -1);
+                break;
+            case PAGE_DOWN:
+                this._activeDate = this._adapter.addCalendarYears(this._activeDate, event.altKey ? 10 : 1);
+                break;
+            case 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. */
+    _handleCalendarBodyKeydownInMultiYearView(event) {
+        switch (event.keyCode) {
+            case LEFT_ARROW:
+                this._activeDate = this._adapter.addCalendarYears(this._activeDate, -1);
+                break;
+            case RIGHT_ARROW:
+                this._activeDate = this._adapter.addCalendarYears(this._activeDate, 1);
+                break;
+            case UP_ARROW:
+                this._activeDate = this._adapter.addCalendarYears(this._activeDate, -yearsPerRow);
+                break;
+            case DOWN_ARROW:
+                this._activeDate = this._adapter.addCalendarYears(this._activeDate, yearsPerRow);
+                break;
+            case HOME:
+                this._activeDate = this._adapter.addCalendarYears(this._activeDate, -getActiveOffset(this._adapter, this._activeDate, this.minDate, this.maxDate));
+                break;
+            case END:
+                this._activeDate = this._adapter.addCalendarYears(this._activeDate, yearsPerPage -
+                    getActiveOffset(this._adapter, this._activeDate, this.minDate, this.maxDate) -
+                    1);
+                break;
+            case PAGE_UP:
+                this._activeDate = this._adapter.addCalendarYears(this._activeDate, event.altKey ? -yearsPerPage * 10 : -yearsPerPage);
+                break;
+            case PAGE_DOWN:
+                this._activeDate = this._adapter.addCalendarYears(this._activeDate, event.altKey ? yearsPerPage * 10 : yearsPerPage);
+                break;
+            case 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. */
+    _handleCalendarBodyKeydownInClockView(event) {
+        switch (event.keyCode) {
+            case UP_ARROW:
+                this._activeDate =
+                    this._clockView === 'hour'
+                        ? this._adapter.addCalendarHours(this._activeDate, 1)
+                        : this._adapter.addCalendarMinutes(this._activeDate, 1);
+                break;
+            case DOWN_ARROW:
+                this._activeDate =
+                    this._clockView === 'hour'
+                        ? this._adapter.addCalendarHours(this._activeDate, -1)
+                        : this._adapter.addCalendarMinutes(this._activeDate, -1);
+                break;
+            case 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.
+     */
+    _prevMonthInSameCol(date) {
+        // Determine how many months to jump forward given that there are 2 empty slots at the beginning
+        // of each year.
+        const 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.
+     */
+    _nextMonthInSameCol(date) {
+        // Determine how many months to jump forward given that there are 2 empty slots at the beginning
+        // of each year.
+        const increment = this._adapter.getMonth(date) <= 4 ? 7 : this._adapter.getMonth(date) >= 7 ? 5 : 12;
+        return this._adapter.addCalendarMonths(date, increment);
+    }
+    calendarState(direction) {
+        this._calendarState = direction;
+    }
+    _2digit(n) {
+        return ('00' + n).slice(-2);
     }
 }
-/** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
-MtxClock.decorators = [
-    { type: 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)',
-                },
-                exportAs: 'mtxClock',
-                encapsulation: ViewEncapsulation.None,
-                styles: [".mtx-clock{position:relative;display:block;min-width:224px;margin:8px;box-sizing:border-box;-webkit-user-select:none;user-select:none}.mtx-clock-wrapper{position:relative;width:100%;height:0;padding-top:100%;border-radius:50%}.mtx-clock-center{position:absolute;top:50%;left:50%;width:2%;height:2%;margin:-1%;border-radius:50%}.mtx-clock-hand{position:absolute;top:0;right:0;bottom:0;left:0;width:1px;margin:0 auto;transform-origin:bottom}.mtx-clock-hand:before{content:\"\";position:absolute;top:-4px;left:-4px;width:8px;height:8px;border-radius:50%}.mtx-clock-hours,.mtx-clock-minutes{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;visibility:hidden;transition:.35s;transform:scale(1.2)}.mtx-clock-hours.active,.mtx-clock-minutes.active{opacity:1;visibility:visible;transform:scale(1)}.mtx-clock-minutes{transform:scale(.8)}.mtx-clock-cell{position:absolute;display:flex;width:14.1666%;height:14.1666%;justify-content:center;box-sizing:border-box;border-radius:50%;align-items:center;cursor:pointer}.mtx-clock-cell.mtx-clock-cell-disabled{pointer-events:none}\n"]
-            },] }
-];
-/**
- * @type {function(): !Array<(null|{
- *   type: ?,
- *   decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
- * })>}
- * @nocollapse
- */
-MtxClock.ctorParameters = () => [
-    { type: ElementRef },
-    { type: DatetimeAdapter }
-];
-/** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
-MtxClock.propDecorators = {
-    dateFilter: [{ type: Input }],
-    interval: [{ type: Input }],
-    twelvehour: [{ type: Input }],
-    selectedChange: [{ type: Output }],
-    activeDateChange: [{ type: Output }],
-    _userSelection: [{ type: Output }],
-    activeDate: [{ type: Input }],
-    selected: [{ type: Input }],
-    minDate: [{ type: Input }],
-    maxDate: [{ type: Input }],
-    startView: [{ type: Input }]
-};
+/** @nocollapse */ /** @nocollapse */ MtxCalendar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MtxCalendar, deps: [{ token: i0.ElementRef }, { token: i1$1.MatDatepickerIntl }, { token: i0.NgZone }, { token: i1.DatetimeAdapter, optional: true }, { token: MTX_DATETIME_FORMATS, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ MtxCalendar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: MtxCalendar, selector: "mtx-calendar", inputs: { multiYearSelector: "multiYearSelector", twelvehour: "twelvehour", startView: "startView", timeInterval: "timeInterval", dateFilter: "dateFilter", preventSameDateTimeSelection: "preventSameDateTimeSelection", type: "type", startAt: "startAt", selected: "selected", minDate: "minDate", maxDate: "maxDate" }, outputs: { selectedChange: "selectedChange", viewChanged: "viewChanged", _userSelection: "_userSelection" }, host: { attributes: { "tabindex": "0" }, listeners: { "keydown": "_handleCalendarBodyKeydown($event)" }, classAttribute: "mtx-calendar" }, exportAs: ["mtxCalendar"], ngImport: i0, template: "<div class=\"mtx-calendar-header\">\n  <div (click)=\"_yearClicked()\"\n       *ngIf=\"type !== 'time'\"\n       [class.active]=\"currentView === 'year' || currentView === 'multi-year'\"\n       class=\"mtx-calendar-header-year\"\n       role=\"button\">\n    <span>{{ _yearLabel }}</span>\n    <svg *ngIf=\"multiYearSelector || type === 'year'\"\n         class=\"mtx-calendar-header-year-dropdown\"\n         width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n      <path d=\"M7,10L12,15L17,10H7Z\"></path>\n    </svg>\n  </div>\n  <div class=\"mtx-calendar-header-date-time\">\n    <span (click)=\"_dateClicked()\" *ngIf=\"type !== 'time' && type !== 'year'\"\n          [class.active]=\"currentView === 'month'\"\n          [class.not-clickable]=\"type === 'month'\"\n          class=\"mtx-calendar-header-date\"\n          role=\"button\">{{ _dateLabel }}</span>\n    <span *ngIf=\"type.endsWith('time')\"\n          [class.active]=\"currentView === 'clock'\"\n          class=\"mtx-calendar-header-time\">\n      <span (click)=\"_hoursClicked()\"\n            [class.active]=\"_clockView === 'hour'\"\n            class=\"mtx-calendar-header-hours\"\n            role=\"button\">{{ _hoursLabel }}</span>:<span (click)=\"_minutesClicked()\"\n            [class.active]=\"_clockView === 'minute'\"\n            class=\"mtx-calendar-header-minutes\"\n            role=\"button\">{{ _minutesLabel }}</span>\n      <br />\n      <span *ngIf=\"twelvehour\" class=\"mtx-calendar-header-ampm-container\">\n        <span (click)=\"_ampmClicked('AM')\"\n              [class.active]=\"_AMPM === 'AM'\"\n              class=\"mtx-calendar-header-ampm\">AM</span>/<span\n              (click)=\"_ampmClicked('PM')\"\n              [class.active]=\"_AMPM === 'PM'\"\n              class=\"mtx-calendar-header-ampm\">PM</span>\n      </span>\n    </span>\n  </div>\n</div>\n<div class=\"mtx-calendar-content\" [ngSwitch]=\"currentView\">\n  <div *ngIf=\"currentView === 'month' || currentView === 'year' || currentView === 'multi-year'\"\n       class=\"mtx-month-content\">\n    <div class=\"mtx-calendar-controls\">\n      <button mat-icon-button type=\"button\" (click)=\"_previousClicked()\"\n              [attr.aria-disabled]=\"!_previousEnabled()\"\n              [attr.aria-label]=\"_ariaLabelPrev\"\n              [class.disabled]=\"!_previousEnabled()\"\n              class=\"mtx-calendar-previous-button\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n          <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\"></path>\n        </svg>\n      </button>\n      <div [@slideCalendar]=\"_calendarState\"\n           (@slideCalendar.done)=\"_calendarStateDone()\"\n           class=\"mtx-calendar-period-button\">\n        <strong>{{ _monthYearLabel }}</strong>\n      </div>\n      <button mat-icon-button type=\"button\" (click)=\"_nextClicked()\"\n              [attr.aria-disabled]=\"!_nextEnabled()\"\n              [attr.aria-label]=\"_ariaLabelNext\"\n              [class.disabled]=\"!_nextEnabled()\"\n              class=\"mtx-calendar-next-button\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n          <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"></path>\n        </svg>\n      </button>\n    </div>\n  </div>\n  <mtx-month-view (_userSelection)=\"_userSelected()\"\n                  (selectedChange)=\"_dateSelected($event)\"\n                  *ngSwitchCase=\"'month'\"\n                  [activeDate]=\"_activeDate\"\n                  [dateFilter]=\"_dateFilterForViews\"\n                  [selected]=\"selected!\"\n                  [type]=\"type\">\n  </mtx-month-view>\n  <mtx-year-view (_userSelection)=\"_userSelected()\"\n                 (selectedChange)=\"_monthSelected($event)\"\n                 *ngSwitchCase=\"'year'\"\n                 [activeDate]=\"_activeDate\"\n                 [dateFilter]=\"_dateFilterForViews\"\n                 [selected]=\"selected!\"\n                 [type]=\"type\">\n  </mtx-year-view>\n  <mtx-multi-year-view (_userSelection)=\"_userSelected()\"\n                       (selectedChange)=\"_yearSelected($event)\"\n                       *ngSwitchCase=\"'multi-year'\"\n                       [activeDate]=\"_activeDate\"\n                       [dateFilter]=\"_dateFilterForViews\"\n                       [maxDate]=\"maxDate\"\n                       [minDate]=\"minDate\"\n                       [selected]=\"selected!\"\n                       [type]=\"type\">\n  </mtx-multi-year-view>\n  <mtx-clock (_userSelection)=\"_userSelected()\"\n             (activeDateChange)=\"_onActiveDateChange($event)\"\n             (selectedChange)=\"_timeSelected($event)\"\n             *ngSwitchDefault\n             [dateFilter]=\"dateFilter\"\n             [interval]=\"timeInterval\"\n             [maxDate]=\"maxDate\"\n             [minDate]=\"minDate\"\n             [selected]=\"_activeDate\"\n             [startView]=\"_clockView\"\n             [twelvehour]=\"twelvehour\">\n  </mtx-clock>\n</div>\n", styles: [".mtx-calendar{display:block;outline:none}.mtx-calendar[mode=landscape]{display:flex}.mtx-calendar-header{padding:16px;box-sizing:border-box;border-radius:4px 4px 0 0}[mode=landscape] .mtx-calendar-header{width:150px;min-width:150px;border-radius:4px 0 0 4px}[dir=rtl] [mode=landscape] .mtx-calendar-header{border-radius:0 4px 4px 0}.mtx-calendar-header-year,.mtx-calendar-header-date-time{width:100%;white-space:nowrap}.mtx-calendar-header-year{height:32px;line-height:32px}.mtx-calendar-header-year>*{vertical-align:middle}.mtx-calendar-header-date-time{line-height:34px}[mode=landscape] .mtx-calendar-header-date-time{white-space:normal;word-wrap:break-word}.mtx-calendar-header-year:not(.active),.mtx-calendar-header-date:not(.active),.mtx-calendar-header-hours:not(.active),.mtx-calendar-header-minutes:not(.active),.mtx-calendar-header-ampm:not(.active){cursor:pointer;opacity:.6}.mtx-calendar-header-year.not-clickable,.mtx-calendar-header-date.not-clickable,.mtx-calendar-header-hours.not-clickable,.mtx-calendar-header-minutes.not-clickable,.mtx-calendar-header-ampm.not-clickable{cursor:initial}.mtx-calendar-header-time{display:inline-block;padding-left:8px}.mtx-calendar-header-time:not(.active){opacity:.6}.mtx-calendar-header-time:not(.active) .mtx-calendar-header-hours,.mtx-calendar-header-time:not(.active) .mtx-calendar-header-minutes,.mtx-calendar-header-time:not(.active) .mtx-calendar-header-ampm{cursor:pointer;opacity:1}[dir=rtl] .mtx-calendar-header-time{padding-right:8px}[mode=landscape] .mtx-calendar-header-time{display:block;padding:0}.mtx-calendar-content{width:100%;padding:8px;outline:none;box-sizing:border-box;overflow:hidden}.mtx-calendar-controls{display:flex;justify-content:space-between;margin:0 calc(4.7142857143% - 16px)}.mtx-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:.04}.mtx-calendar-period-button{display:inline-block;height:40px;line-height:40px;outline:none;border:0;background:transparent;box-sizing:border-box}.mtx-calendar-previous-button.disabled,.mtx-calendar-next-button.disabled{pointer-events:none}.mtx-calendar-previous-button svg,.mtx-calendar-next-button svg{fill:currentColor;vertical-align:top}[dir=rtl] .mtx-calendar-previous-button svg,[dir=rtl] .mtx-calendar-next-button svg{transform:rotate(180deg)}.mtx-calendar-table{border-spacing:0;border-collapse:collapse;width:100%}.mtx-calendar-table-header th{text-align:center;padding:8px 0}@media all and (orientation: landscape){.mtx-calendar[mode=auto]{display:flex}.mtx-calendar[mode=auto] .mtx-calendar-header{width:150px;min-width:150px;border-radius:4px 0 0 4px}[dir=rtl] .mtx-calendar[mode=auto] .mtx-calendar-header{border-radius:0 4px 4px 0}.mtx-calendar[mode=auto] .mtx-calendar-header-date-time{white-space:normal;word-wrap:break-word}.mtx-calendar[mode=auto] .mtx-calendar-header-time{display:block;padding:0}}\n"], components: [{ type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: MtxMonthView, selector: "mtx-month-view", inputs: ["type", "dateFilter", "activeDate", "selected"], outputs: ["selectedChange", "_userSelection"], exportAs: ["mtxMonthView"] }, { type: MtxYearView, selector: "mtx-year-view", inputs: ["type", "dateFilter", "activeDate", "selected"], outputs: ["selectedChange", "_userSelection"], exportAs: ["mtxYearView"] }, { type: MtxMultiYearView, selector: "mtx-multi-year-view", inputs: ["type", "dateFilter", "activeDate", "selected", "minDate", "maxDate"], outputs: ["selectedChange", "_userSelection"], exportAs: ["mtxMultiYearView"] }, { type: MtxClock, selector: "mtx-clock", inputs: ["dateFilter", "interval", "twelvehour", "activeDate", "selected", "minDate", "maxDate", "startView"], outputs: ["selectedChange", "activeDateChange", "_userSelection"], exportAs: ["mtxClock"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }], animations: [mtxDatetimepickerAnimations.slideCalendar], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MtxCalendar, decorators: [{
+            type: Component,
+            args: [{ selector: 'mtx-calendar', host: {
+                        'class': 'mtx-calendar',
+                        'tabindex': '0',
+                        '(keydown)': '_handleCalendarBodyKeydown($event)',
+                    }, exportAs: 'mtxCalendar', animations: [mtxDatetimepickerAnimations.slideCalendar], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mtx-calendar-header\">\n  <div (click)=\"_yearClicked()\"\n       *ngIf=\"type !== 'time'\"\n       [class.active]=\"currentView === 'year' || currentView === 'multi-year'\"\n       class=\"mtx-calendar-header-year\"\n       role=\"button\">\n    <span>{{ _yearLabel }}</span>\n    <svg *ngIf=\"multiYearSelector || type === 'year'\"\n         class=\"mtx-calendar-header-year-dropdown\"\n         width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n      <path d=\"M7,10L12,15L17,10H7Z\"></path>\n    </svg>\n  </div>\n  <div class=\"mtx-calendar-header-date-time\">\n    <span (click)=\"_dateClicked()\" *ngIf=\"type !== 'time' && type !== 'year'\"\n          [class.active]=\"currentView === 'month'\"\n          [class.not-clickable]=\"type === 'month'\"\n          class=\"mtx-calendar-header-date\"\n          role=\"button\">{{ _dateLabel }}</span>\n    <span *ngIf=\"type.endsWith('time')\"\n          [class.active]=\"currentView === 'clock'\"\n          class=\"mtx-calendar-header-time\">\n      <span (click)=\"_hoursClicked()\"\n            [class.active]=\"_clockView === 'hour'\"\n            class=\"mtx-calendar-header-hours\"\n            role=\"button\">{{ _hoursLabel }}</span>:<span (click)=\"_minutesClicked()\"\n            [class.active]=\"_clockView === 'minute'\"\n            class=\"mtx-calendar-header-minutes\"\n            role=\"button\">{{ _minutesLabel }}</span>\n      <br />\n      <span *ngIf=\"twelvehour\" class=\"mtx-calendar-header-ampm-container\">\n        <span (click)=\"_ampmClicked('AM')\"\n              [class.active]=\"_AMPM === 'AM'\"\n              class=\"mtx-calendar-header-ampm\">AM</span>/<span\n              (click)=\"_ampmClicked('PM')\"\n              [class.active]=\"_AMPM === 'PM'\"\n              class=\"mtx-calendar-header-ampm\">PM</span>\n      </span>\n    </span>\n  </div>\n</div>\n<div class=\"mtx-calendar-content\" [ngSwitch]=\"currentView\">\n  <div *ngIf=\"currentView === 'month' || currentView === 'year' || currentView === 'multi-year'\"\n       class=\"mtx-month-content\">\n    <div class=\"mtx-calendar-controls\">\n      <button mat-icon-button type=\"button\" (click)=\"_previousClicked()\"\n              [attr.aria-disabled]=\"!_previousEnabled()\"\n              [attr.aria-label]=\"_ariaLabelPrev\"\n              [class.disabled]=\"!_previousEnabled()\"\n              class=\"mtx-calendar-previous-button\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n          <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\"></path>\n        </svg>\n      </button>\n      <div [@slideCalendar]=\"_calendarState\"\n           (@slideCalendar.done)=\"_calendarStateDone()\"\n           class=\"mtx-calendar-period-button\">\n        <strong>{{ _monthYearLabel }}</strong>\n      </div>\n      <button mat-icon-button type=\"button\" (click)=\"_nextClicked()\"\n              [attr.aria-disabled]=\"!_nextEnabled()\"\n              [attr.aria-label]=\"_ariaLabelNext\"\n              [class.disabled]=\"!_nextEnabled()\"\n              class=\"mtx-calendar-next-button\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n          <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"></path>\n        </svg>\n      </button>\n    </div>\n  </div>\n  <mtx-month-view (_userSelection)=\"_userSelected()\"\n                  (selectedChange)=\"_dateSelected($event)\"\n                  *ngSwitchCase=\"'month'\"\n                  [activeDate]=\"_activeDate\"\n                  [dateFilter]=\"_dateFilterForViews\"\n                  [selected]=\"selected!\"\n                  [type]=\"type\">\n  </mtx-month-view>\n  <mtx-year-view (_userSelection)=\"_userSelected()\"\n                 (selectedChange)=\"_monthSelected($event)\"\n                 *ngSwitchCase=\"'year'\"\n                 [activeDate]=\"_activeDate\"\n                 [dateFilter]=\"_dateFilterForViews\"\n                 [selected]=\"selected!\"\n                 [type]=\"type\">\n  </mtx-year-view>\n  <mtx-multi-year-view (_userSelection)=\"_userSelected()\"\n                       (selectedChange)=\"_yearSelected($event)\"\n                       *ngSwitchCase=\"'multi-year'\"\n                       [activeDate]=\"_activeDate\"\n                       [dateFilter]=\"_dateFilterForViews\"\n                       [maxDate]=\"maxDate\"\n                       [minDate]=\"minDate\"\n                       [selected]=\"selected!\"\n                       [type]=\"type\">\n  </mtx-multi-year-view>\n  <mtx-clock (_userSelection)=\"_userSelected()\"\n             (activeDateChange)=\"_onActiveDateChange($event)\"\n             (selectedChange)=\"_timeSelected($event)\"\n             *ngSwitchDefault\n             [dateFilter]=\"dateFilter\"\n             [interval]=\"timeInterval\"\n             [maxDate]=\"maxDate\"\n             [minDate]=\"minDate\"\n             [selected]=\"_activeDate\"\n             [startView]=\"_clockView\"\n             [twelvehour]=\"twelvehour\">\n  </mtx-clock>\n</div>\n", styles: [".mtx-calendar{display:block;outline:none}.mtx-calendar[mode=landscape]{display:flex}.mtx-calendar-header{padding:16px;box-sizing:border-box;border-radius:4px 4px 0 0}[mode=landscape] .mtx-calendar-header{width:150px;min-width:150px;border-radius:4px 0 0 4px}[dir=rtl] [mode=landscape] .mtx-calendar-header{border-radius:0 4px 4px 0}.mtx-calendar-header-year,.mtx-calendar-header-date-time{width:100%;white-space:nowrap}.mtx-calendar-header-year{height:32px;line-height:32px}.mtx-calendar-header-year>*{vertical-align:middle}.mtx-calendar-header-date-time{line-height:34px}[mode=landscape] .mtx-calendar-header-date-time{white-space:normal;word-wrap:break-word}.mtx-calendar-header-year:not(.active),.mtx-calendar-header-date:not(.active),.mtx-calendar-header-hours:not(.active),.mtx-calendar-header-minutes:not(.active),.mtx-calendar-header-ampm:not(.active){cursor:pointer;opacity:.6}.mtx-calendar-header-year.not-clickable,.mtx-calendar-header-date.not-clickable,.mtx-calendar-header-hours.not-clickable,.mtx-calendar-header-minutes.not-clickable,.mtx-calendar-header-ampm.not-clickable{cursor:initial}.mtx-calendar-header-time{display:inline-block;padding-left:8px}.mtx-calendar-header-time:not(.active){opacity:.6}.mtx-calendar-header-time:not(.active) .mtx-calendar-header-hours,.mtx-calendar-header-time:not(.active) .mtx-calendar-header-minutes,.mtx-calendar-header-time:not(.active) .mtx-calendar-header-ampm{cursor:pointer;opacity:1}[dir=rtl] .mtx-calendar-header-time{padding-right:8px}[mode=landscape] .mtx-calendar-header-time{display:block;padding:0}.mtx-calendar-content{width:100%;padding:8px;outline:none;box-sizing:border-box;overflow:hidden}.mtx-calendar-controls{display:flex;justify-content:space-between;margin:0 calc(4.7142857143% - 16px)}.mtx-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:.04}.mtx-calendar-period-button{display:inline-block;height:40px;line-height:40px;outline:none;border:0;background:transparent;box-sizing:border-box}.mtx-calendar-previous-button.disabled,.mtx-calendar-next-button.disabled{pointer-events:none}.mtx-calendar-previous-button svg,.mtx-calendar-next-button svg{fill:currentColor;vertical-align:top}[dir=rtl] .mtx-calendar-previous-button svg,[dir=rtl] .mtx-calendar-next-button svg{transform:rotate(180deg)}.mtx-calendar-table{border-spacing:0;border-collapse:collapse;width:100%}.mtx-calendar-table-header th{text-align:center;padding:8px 0}@media all and (orientation: landscape){.mtx-calendar[mode=auto]{display:flex}.mtx-calendar[mode=auto] .mtx-calendar-header{width:150px;min-width:150px;border-radius:4px 0 0 4px}[dir=rtl] .mtx-calendar[mode=auto] .mtx-calendar-header{border-radius:0 4px 4px 0}.mtx-calendar[mode=auto] .mtx-calendar-header-date-time{white-space:normal;word-wrap:break-word}.mtx-calendar[mode=auto] .mtx-calendar-header-time{display:block;padding:0}}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.MatDatepickerIntl }, { type: i0.NgZone }, { type: i1.DatetimeAdapter, decorators: [{
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MTX_DATETIME_FORMATS]
+                }] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { multiYearSelector: [{
+                type: Input
+            }], twelvehour: [{
+                type: Input
+            }], startView: [{
+                type: Input
+            }], timeInterval: [{
+                type: Input
+            }], dateFilter: [{
+                type: Input
+            }], preventSameDateTimeSelection: [{
+                type: Input
+            }], selectedChange: [{
+                type: Output
+            }], viewChanged: [{
+                type: Output
+            }], _userSelection: [{
+                type: Output
+            }], type: [{
+                type: Input
+            }], startAt: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }] } });
 
 /** Used to generate a unique ID for each datetimepicker instance. */
 let datetimepickerUid = 0;
@@ -1291,43 +1550,27 @@ class MtxDatetimepickerContent extends _MtxDatetimepickerContentBase {
         this._animationDone.complete();
     }
 }
-/** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
-MtxDatetimepickerContent.decorators = [
-    { type: Component, args: [{
-                selector: 'mtx-datetimepicker-content',
-                template: "<div cdkTrapFocus\n     class=\"mtx-datetimepicker-content-container\"\n     [attr.mode]=\"datetimepicker.mode\">\n  <mtx-calendar [id]=\"datetimepicker.id\"\n                [ngClass]=\"datetimepicker.panelClass\"\n                [attr.mode]=\"datetimepicker.mode\"\n                [type]=\"datetimepicker.type\"\n                [startAt]=\"datetimepicker.startAt\"\n                [startView]=\"datetimepicker.startView\"\n                [maxDate]=\"datetimepicker._maxDate\"\n                [minDate]=\"datetimepicker._minDate\"\n                [dateFilter]=\"datetimepicker._dateFilter\"\n                [multiYearSelector]=\"datetimepicker.multiYearSelector\"\n                [preventSameDateTimeSelection]=\"datetimepicker.preventSameDateTimeSelection\"\n                [timeInterval]=\"datetimepicker.timeInterval\"\n                [twelvehour]=\"datetimepicker.twelvehour\"\n                [selected]=\"datetimepicker._selected\"\n                [@fadeInCalendar]=\"'enter'\"\n                (selectedChange)=\"datetimepicker._select($event)\"\n                (viewChanged)=\"datetimepicker._viewChanged($event)\"\n                (_userSelection)=\"datetimepicker.close()\">\n  </mtx-calendar>\n</div>\n",
-                host: {
-                    'class': 'mtx-datetimepicker-content',
-                    '[class.mtx-datetimepicker-content-touch]': 'datetimepicker?.touchUi',
-                    '[attr.mode]': 'datetimepicker.mode',
-                    '[@transformPanel]': '_animationState',
-                    '(@transformPanel.done)': '_animationDone.next()',
-                },
-                animations: [
-                    mtxDatetimepickerAnimations.transformPanel,
-                    mtxDatetimepickerAnimations.fadeInCalendar,
-                ],
-                encapsulation: ViewEncapsulation.None,
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                inputs: ['color'],
-                styles: [".mtx-datetimepicker-content{display:block;border-radius:4px}.mtx-datetimepicker-content-container{display:flex;flex-direction:column;justify-content:space-between}.mtx-datetimepicker-content .mtx-calendar{width:296px;height:404px}.mtx-datetimepicker-content .mtx-calendar[mode=landscape]{width:446px;height:328px}@media all and (orientation: landscape){.mtx-datetimepicker-content .mtx-calendar[mode=auto]{width:446px;height:328px}}.mtx-datetimepicker-content-touch{display:block;max-height:80vh;position:relative;overflow:visible}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container{min-height:300px;max-height:850px;min-width:250px;max-width:750px}.mtx-datetimepicker-content-touch .mtx-calendar{width:100%;height:auto}@media all and (orientation: landscape){.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto],.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape]{width:120vh;height:80vh}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto] .mtx-calendar,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape] .mtx-calendar{width:auto;height:100%}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait]{width:64vh;height:90vh}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait] .mtx-calendar{width:100%;height:auto}}@media all and (orientation: portrait){.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto],.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait]{width:80vw;height:120vw}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto] .mtx-calendar,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait] .mtx-calendar{width:100%;height:auto}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape]{width:90vw;height:64vw}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape] .mtx-calendar{width:auto;height:100%}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container-with-actions{height:135vw}}\n"]
-            },] }
-];
-/**
- * @type {function(): !Array<(null|{
- *   type: ?,
- *   decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
- * })>}
- * @nocollapse
- */
-MtxDatetimepickerContent.ctorParameters = () => [
-    { type: ElementRef },
-    { type: ChangeDetectorRef }
-];
-/** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
-MtxDatetimepickerContent.propDecorators = {
-    _calendar: [{ type: ViewChild, args: [MtxCalendar, { static: true },] }]
-};
+/** @nocollapse */ /** @nocollapse */ MtxDatetimepickerContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MtxDatetimepickerContent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ MtxDatetimepickerContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: MtxDatetimepickerContent, selector: "mtx-datetimepicker-content", inputs: { color: "color" }, host: { listeners: { "@transformPanel.done": "_animationDone.next()" }, properties: { "class.mtx-datetimepicker-content-touch": "datetimepicker?.touchUi", "attr.mode": "datetimepicker.mode", "@transformPanel": "_animationState" }, classAttribute: "mtx-datetimepicker-content" }, viewQueries: [{ propertyName: "_calendar", first: true, predicate: MtxCalendar, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div cdkTrapFocus\n     class=\"mtx-datetimepicker-content-container\"\n     [attr.mode]=\"datetimepicker.mode\">\n  <mtx-calendar [id]=\"datetimepicker.id\"\n                [ngClass]=\"datetimepicker.panelClass\"\n                [attr.mode]=\"datetimepicker.mode\"\n                [type]=\"datetimepicker.type\"\n                [startAt]=\"datetimepicker.startAt\"\n                [startView]=\"datetimepicker.startView\"\n                [maxDate]=\"datetimepicker._maxDate\"\n                [minDate]=\"datetimepicker._minDate\"\n                [dateFilter]=\"datetimepicker._dateFilter\"\n                [multiYearSelector]=\"datetimepicker.multiYearSelector\"\n                [preventSameDateTimeSelection]=\"datetimepicker.preventSameDateTimeSelection\"\n                [timeInterval]=\"datetimepicker.timeInterval\"\n                [twelvehour]=\"datetimepicker.twelvehour\"\n                [selected]=\"datetimepicker._selected\"\n                [@fadeInCalendar]=\"'enter'\"\n                (selectedChange)=\"datetimepicker._select($event)\"\n                (viewChanged)=\"datetimepicker._viewChanged($event)\"\n                (_userSelection)=\"datetimepicker.close()\">\n  </mtx-calendar>\n</div>\n", 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"], components: [{ type: MtxCalendar, selector: "mtx-calendar", inputs: ["multiYearSelector", "twelvehour", "startView", "timeInterval", "dateFilter", "preventSameDateTimeSelection", "type", "startAt", "selected", "minDate", "maxDate"], outputs: ["selectedChange", "viewChanged", "_userSelection"], exportAs: ["mtxCalendar"] }], directives: [{ type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
+        mtxDatetimepickerAnimations.transformPanel,
+        mtxDatetimepickerAnimations.fadeInCalendar,
+    ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MtxDatetimepickerContent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mtx-datetimepicker-content', host: {
+                        'class': 'mtx-datetimepicker-content',
+                        '[class.mtx-datetimepicker-content-touch]': 'datetimepicker?.touchUi',
+                        '[attr.mode]': 'datetimepicker.mode',
+                        '[@transformPanel]': '_animationState',
+                        '(@transformPanel.done)': '_animationDone.next()',
+                    }, animations: [
+                        mtxDatetimepickerAnimations.transformPanel,
+                        mtxDatetimepickerAnimations.fadeInCalendar,
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, inputs: ['color'], template: "<div cdkTrapFocus\n     class=\"mtx-datetimepicker-content-container\"\n     [attr.mode]=\"datetimepicker.mode\">\n  <mtx-calendar [id]=\"datetimepicker.id\"\n                [ngClass]=\"datetimepicker.panelClass\"\n                [attr.mode]=\"datetimepicker.mode\"\n                [type]=\"datetimepicker.type\"\n                [startAt]=\"datetimepicker.startAt\"\n                [startView]=\"datetimepicker.startView\"\n                [maxDate]=\"datetimepicker._maxDate\"\n                [minDate]=\"datetimepicker._minDate\"\n                [dateFilter]=\"datetimepicker._dateFilter\"\n                [multiYearSelector]=\"datetimepicker.multiYearSelector\"\n                [preventSameDateTimeSelection]=\"datetimepicker.preventSameDateTimeSelection\"\n                [timeInterval]=\"datetimepicker.timeInterval\"\n                [twelvehour]=\"datetimepicker.twelvehour\"\n                [selected]=\"datetimepicker._selected\"\n                [@fadeInCalendar]=\"'enter'\"\n                (selectedChange)=\"datetimepicker._select($event)\"\n                (viewChanged)=\"datetimepicker._viewChanged($event)\"\n                (_userSelection)=\"datetimepicker.close()\">\n  </mtx-calendar>\n</div>\n", 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"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { _calendar: [{
+                type: ViewChild,
+                args: [MtxCalendar, { static: true }]
+            }] } });
 class MtxDatetimepicker {
     constructor(_overlay, _ngZone, _viewContainerRef, _scrollStrategy, _dateAdapter, _dir) {
         this._overlay = _overlay;
@@ -1670,55 +1913,68 @@ class MtxDatetimepicker {
         })));
     }
 }
-/** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
-MtxDatetimepicker.decorators = [
-    { type: Component, args: [{
-                selector: 'mtx-datetimepicker',
-                exportAs: 'mtxDatetimepicker',
-                template: '',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                encapsulation: ViewEncapsulation.None,
-                preserveWhitespaces: false
-            },] }
-];
-/**
- * @type {function(): !Array<(null|{
- *   type: ?,
- *   decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
- * })>}
- * @nocollapse
- */
-MtxDatetimepicker.ctorParameters = () => [
-    { type: Overlay },
-    { type: NgZone },
-    { type: ViewContainerRef },
-    { type: undefined, decorators: [{ type: Inject, args: [MTX_DATETIMEPICKER_SCROLL_STRATEGY,] }] },
-    { type: DatetimeAdapter, decorators: [{ type: Optional }] },
-    { type: Directionality, decorators: [{ type: Optional }] }
-];
-/** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
-MtxDatetimepicker.propDecorators = {
-    multiYearSelector: [{ type: Input }],
-    twelvehour: [{ type: Input }],
-    startView: [{ type: Input }],
-    mode: [{ type: Input }],
-    timeInterval: [{ type: Input }],
-    preventSameDateTimeSelection: [{ type: Input }],
-    selectedChanged: [{ type: Output }],
-    openedStream: [{ type: Output, args: ['opened',] }],
-    closedStream: [{ type: Output, args: ['closed',] }],
-    viewChanged: [{ type: Output }],
-    panelClass: [{ type: Input }],
-    opened: [{ type: Input }],
-    color: [{ type: Input }],
-    startAt: [{ type: Input }],
-    type: [{ type: Input }],
-    touchUi: [{ type: Input }],
-    disabled: [{ type: Input }],
-    xPosition: [{ type: Input }],
-    yPosition: [{ type: Input }],
-    restoreFocus: [{ type: Input }]
-};
+/** @nocollapse */ /** @nocollapse */ MtxDatetimepicker.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MtxDatetimepicker, deps: [{ token: i4.Overlay }, { token: i0.NgZone }, { token: i0.ViewContainerRef }, { token: MTX_DATETIMEPICKER_SCROLL_STRATEGY }, { token: i1.DatetimeAdapter, optional: true }, { token: i6.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ MtxDatetimepicker.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: MtxDatetimepicker, selector: "mtx-datetimepicker", inputs: { multiYearSelector: "multiYearSelector", twelvehour: "twelvehour", startView: "startView", mode: "mode", timeInterval: "timeInterval", preventSameDateTimeSelection: "preventSameDateTimeSelection", panelClass: "panelClass", opened: "opened", color: "color", startAt: "startAt", type: "type", touchUi: "touchUi", disabled: "disabled", xPosition: "xPosition", yPosition: "yPosition", restoreFocus: "restoreFocus" }, outputs: { selectedChanged: "selectedChanged", openedStream: "opened", closedStream: "closed", viewChanged: "viewChanged" }, exportAs: ["mtxDatetimepicker"], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MtxDatetimepicker, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mtx-datetimepicker',
+                    exportAs: 'mtxDatetimepicker',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    preserveWhitespaces: false,
+                }]
+        }], ctorParameters: function () { return [{ type: i4.Overlay }, { type: i0.NgZone }, { type: i0.ViewContainerRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MTX_DATETIMEPICKER_SCROLL_STRATEGY]
+                }] }, { type: i1.DatetimeAdapter, decorators: [{
+                    type: Optional
+                }] }, { type: i6.Directionality, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { multiYearSelector: [{
+                type: Input
+            }], twelvehour: [{
+                type: Input
+            }], startView: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], timeInterval: [{
+                type: Input
+            }], preventSameDateTimeSelection: [{
+                type: Input
+            }], selectedChanged: [{
+                type: Output
+            }], openedStream: [{
+                type: Output,
+                args: ['opened']
+            }], closedStream: [{
+                type: Output,
+                args: ['closed']
+            }], viewChanged: [{
+                type: Output
+            }], panelClass: [{
+                type: Input
+            }], opened: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], startAt: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], touchUi: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], xPosition: [{
+                type: Input
+            }], yPosition: [{
+                type: Input
+            }], restoreFocus: [{
+                type: Input
+            }] } });
 
 const MAT_DATETIMEPICKER_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
@@ -1997,63 +2253,72 @@ class MtxDatetimepickerInput {
         return this._formField ? this._formField.color : undefined;
     }
 }
-/** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
-MtxDatetimepickerInput.decorators = [
-    { type: Directive, args: [{
-                selector: 'input[mtxDatetimepicker]',
-                providers: [
-                    MAT_DATETIMEPICKER_VALUE_ACCESSOR,
-                    MAT_DATETIMEPICKER_VALIDATORS,
-                    { provide: 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 = () => [
-    { type: ElementRef },
-    { type: DatetimeAdapter, decorators: [{ type: Optional }] },
-    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [MTX_DATETIME_FORMATS,] }] },
-    { type: MatFormField, decorators: [{ type: Optional }] }
-];
-/** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
-MtxDatetimepickerInput.propDecorators = {
-    dateChange: [{ type: Output }],
-    dateInput: [{ type: Output }],
-    mtxDatetimepicker: [{ type: Input }],
-    mtxDatetimepickerFilter: [{ type: Input }],
-    value: [{ type: Input }],
-    min: [{ type: Input }],
-    max: [{ type: Input }],
-    disabled: [{ type: Input }]
-};
+/** @nocollapse */ /** @nocollapse */ MtxDatetimepickerInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MtxDatetimepickerInput, deps: [{ token: i0.ElementRef }, { token: i1.DatetimeAdapter, optional: true }, { token: MTX_DATETIME_FORMATS, optional: true }, { token: i2$1.MatFormField, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ MtxDatetimepickerInput.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0", type: MtxDatetimepickerInput, selector: "input[mtxDatetimepicker]", inputs: { mtxDatetimepicker: "mtxDatetimepicker", mtxDatetimepickerFilter: "mtxDatetimepickerFilter", value: "value", min: "min", max: "max", disabled: "disabled" }, outputs: { dateChange: "dateChange", dateInput: "dateInput" }, host: { listeners: { "input": "_onInput($event.target.value)", "change": "_onChange()", "blur": "_onBlur()", "keydown": "_onKeydown($event)" }, properties: { "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" } }, providers: [
+        MAT_DATETIMEPICKER_VALUE_ACCESSOR,
+        MAT_DATETIMEPICKER_VALIDATORS,
+        { provide: MAT_INPUT_VALUE_ACCESSOR, useExisting: MtxDatetimepickerInput },
+    ], exportAs: ["mtxDatetimepickerInput"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MtxDatetimepickerInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[mtxDatetimepicker]',
+                    providers: [
+                        MAT_DATETIMEPICKER_VALUE_ACCESSOR,
+                        MAT_DATETIMEPICKER_VALIDATORS,
+                        { provide: 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',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.DatetimeAdapter, decorators: [{
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MTX_DATETIME_FORMATS]
+                }] }, { type: i2$1.MatFormField, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { dateChange: [{
+                type: Output
+            }], dateInput: [{
+                type: Output
+            }], mtxDatetimepicker: [{
+                type: Input
+            }], mtxDatetimepickerFilter: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
 
 /** Can be used to override the icon of a `mtxDatetimepickerToggle`. */
 class MtxDatetimepickerToggleIcon {
 }
-/** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
-MtxDatetimepickerToggleIcon.decorators = [
-    { type: Directive, args: [{
-                selector: '[mtxDatetimepickerToggleIcon]',
-            },] }
-];
+/** @nocollapse */ /** @nocollapse */ MtxDatetimepickerToggleIcon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MtxDatetimepickerToggleIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ MtxDatetimepickerToggleIcon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0", type: MtxDatetimepickerToggleIcon, selector: "[mtxDatetimepickerToggleIcon]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MtxDatetimepickerToggleIcon, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mtxDatetimepickerToggleIcon]',
+                }]
+        }] });
 class MtxDatetimepickerToggle {
     constructor(_intl, _changeDetectorRef) {
         this._intl = _intl;
@@ -2099,370 +2364,99 @@ class MtxDatetimepickerToggle {
         ]).subscribe(() => this._changeDetectorRef.markForCheck());
     }
 }
-/** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
-MtxDatetimepickerToggle.decorators = [
-    { type: Component, args: [{
-                selector: 'mtx-datetimepicker-toggle',
-                template: "<button #button\n        mat-icon-button\n        type=\"button\"\n        [attr.aria-haspopup]=\"datetimepicker ? 'dialog' : null\"\n        [attr.aria-label]=\"_intl.openCalendarLabel\"\n        [attr.tabindex]=\"disabled ? -1 : tabIndex\"\n        [disabled]=\"disabled\"\n        [disableRipple]=\"disableRipple\"\n        (click)=\"_open($event)\">\n\n  <ng-container *ngIf=\"!_customIcon\" [ngSwitch]=\"datetimepicker.type\">\n    <svg *ngSwitchCase=\"'time'\"\n         class=\"mtx-datetimepicker-toggle-default-icon\"\n         viewBox=\"0 0 24 24\"\n         width=\"24px\"\n         height=\"24px\"\n         fill=\"currentColor\"\n         focusable=\"false\">\n      <path\n            d=\"M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z\">\n      </path>\n    </svg>\n    <svg *ngSwitchCase=\"'datetime'\"\n         class=\"mtx-datetimepicker-toggle-default-icon\"\n         viewBox=\"0 0 24 24\"\n         width=\"24px\"\n         height=\"24px\"\n         fill=\"currentColor\"\n         focusable=\"false\">\n      <path\n            d=\"M15,13H16.5V15.82L18.94,17.23L18.19,18.53L15,16.69V13M19,8H5V19H9.67C9.24,18.09 9,17.07 9,16A7,7 0 0,1 16,9C17.07,9 18.09,9.24 19,9.67V8M5,21C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H6V1H8V3H16V1H18V3H19A2,2 0 0,1 21,5V11.1C22.24,12.36 23,14.09 23,16A7,7 0 0,1 16,23C14.09,23 12.36,22.24 11.1,21H5M16,11.15A4.85,4.85 0 0,0 11.15,16C11.15,18.68 13.32,20.85 16,20.85A4.85,4.85 0 0,0 20.85,16C20.85,13.32 18.68,11.15 16,11.15Z\">\n      </path>\n    </svg>\n    <svg *ngSwitchDefault\n         class=\"mtx-datetimepicker-toggle-default-icon\"\n         viewBox=\"0 0 24 24\"\n         width=\"24px\"\n         height=\"24px\"\n         fill=\"currentColor\"\n         focusable=\"false\">\n      <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n      <path\n            d=\"M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z\" />\n    </svg>\n  </ng-container>\n\n  <ng-content select=\"[mtxDatetimepickerToggleIcon]\"></ng-content>\n</button>\n",
-                host: {
-                    'class': 'mtx-datetimepicker-toggle',
-                    // Always set the tabindex to -1 so that it doesn't overlap with any custom tabindex the
-                    // consumer may have provided, while still being able to receive focus.
-                    '[attr.tabindex]': 'disabled ? null : -1',
-                    '[class.mtx-datetimepicker-toggle-active]': 'datetimepicker && datetimepicker.opened',
-                    '[class.mat-accent]': 'datetimepicker && datetimepicker.color === "accent"',
-                    '[class.mat-warn]': 'datetimepicker && datetimepicker.color === "warn"',
-                    '(focus)': '_button.focus()',
-                },
-                exportAs: 'mtxDatetimepickerToggle',
-                encapsulation: ViewEncapsulation.None,
-                preserveWhitespaces: false,
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".mat-form-field-appearance-legacy .mat-form-field-prefix .mtx-datetimepicker-toggle-default-icon,.mat-form-field-appearance-legacy .mat-form-field-suffix .mtx-datetimepicker-toggle-default-icon{width:1em}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mtx-datetimepicker-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mtx-datetimepicker-toggle-default-icon{display:block;width:1.5em;height:1.5em}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button .mtx-datetimepicker-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button .mtx-datetimepicker-toggle-default-icon{margin:auto}\n"]
-            },] }
-];
-/**
- * @type {function(): !Array<(null|{
- *   type: ?,
- *   decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
- * })>}
- * @nocollapse
- */
-MtxDatetimepickerToggle.ctorParameters = () => [
-    { type: MatDatepickerIntl },
-    { type: ChangeDetectorRef }
-];
-/** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
-MtxDatetimepickerToggle.propDecorators = {
-    datetimepicker: [{ type: Input, args: ['for',] }],
-    tabIndex: [{ type: Input }],
-    disabled: [{ type: Input }],
-    disableRipple: [{ type: Input }],
-    _customIcon: [{ type: ContentChild, args: [MtxDatetimepickerToggleIcon,] }],
-    _button: [{ type: ViewChild, args: ['button',] }]
-};
-
-const DAYS_PER_WEEK = 7;
-/**
- * An internal component used to display a single month in the datetimepicker.
- * @docs-private
- */
-class MtxMonthView {
-    constructor(_adapter, _dateFormats) {
-        this._adapter = _adapter;
-        this._dateFormats = _dateFormats;
-        this.type = 'date';
-        /** Emits when a new date is selected. */
-        this.selectedChange = new EventEmitter();
-        /** Emits when any date is selected. */
-        this._userSelection = new EventEmitter();
-        if (!this._adapter) {
-            throw createMissingDateImplError('DatetimeAdapter');
-        }
-        if (!this._dateFormats) {
-            throw createMissingDateImplError('MTX_DATETIME_FORMATS');
-        }
-        const firstDayOfWeek = this._adapter.getFirstDayOfWeek();
-        const narrowWeekdays = this._adapter.getDayOfWeekNames('narrow');
-        const longWeekdays = this._adapter.getDayOfWeekNames('long');
-        // Rotate the labels for days of the week based on the configured first day of the week.
-        const weekdays = longWeekdays.map((long, i) => {
-            return { long, narrow: narrowWeekdays[i] };
-        });
-        this._weekdays = weekdays.slice(firstDayOfWeek).concat(weekdays.slice(0, firstDayOfWeek));
-        this._activeDate = this._adapter.today();
-    }
-    /**
-     * The date to display in this month view (everything other than the month and year is ignored).
-     */
-    get activeDate() {
-        return this._activeDate;
-    }
-    set activeDate(value) {
-        const 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');
-            }
-        }
-    }
-    /** The currently selected date. */
-    get selected() {
-        return this._selected;
-    }
-    set selected(value) {
-        this._selected = value;
-        this._selectedDate = this._getDateInCurrentMonth(this.selected);
-    }
-    ngAfterContentInit() {
-        this._init();
-    }
-    /** Handles when a new date is selected. */
-    _dateSelected(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();
-        }
-    }
-    _calendarStateDone() {
-        this._calendarState = '';
-    }
-    /** Initializes this month view. */
-    _init() {
-        this._selectedDate = this._getDateInCurrentMonth(this.selected);
-        this._todayDate = this._getDateInCurrentMonth(this._adapter.today());
-        const 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. */
-    _createWeekCells() {
-        const daysInMonth = this._adapter.getNumDaysInMonth(this.activeDate);
-        const dateNames = this._adapter.getDateNames();
-        this._weeks = [[]];
-        for (let i = 0, cell = this._firstWeekOffset; i < daysInMonth; i++, cell++) {
-            if (cell === DAYS_PER_WEEK) {
-                this._weeks.push([]);
-                cell = 0;
-            }
-            const 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));
-            const enabled = !this.dateFilter || this.dateFilter(date);
-            const 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.
-     */
-    _getDateInCurrentMonth(date) {
-        return this._adapter.sameMonthAndYear(date, this.activeDate)
-            ? this._adapter.getDate(date)
-            : null;
-    }
-    calendarState(direction) {
-        this._calendarState = direction;
-    }
-}
-/** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
-MtxMonthView.decorators = [
-    { type: Component, args: [{
-                selector: 'mtx-month-view',
-                template: "<table class=\"mtx-calendar-table\" role=\"grid\">\n  <thead class=\"mtx-calendar-table-header\">\n    <tr>\n      <th *ngFor=\"let day of _weekdays\" [attr.aria-label]=\"day.long\">{{day.narrow}}</th>\n    </tr>\n  </thead>\n  <tbody mtx-calendar-body\n         (@slideCalendar.done)=\"_calendarStateDone()\"\n         [@slideCalendar]=\"_calendarState\"\n         [rows]=\"_weeks\"\n         [todayValue]=\"_todayDate!\"\n         [activeCell]=\"_adapter.getDate(activeDate) - 1\"\n         [selectedValue]=\"_selectedDate!\"\n         (selectedValueChange)=\"_dateSelected($event)\"></tbody>\n</table>\n",
-                exportAs: 'mtxMonthView',
-                animations: [mtxDatetimepickerAnimations.slideCalendar],
-                encapsulation: ViewEncapsulation.None,
-                changeDetection: ChangeDetectionStrategy.OnPush
-            },] }
-];
-/**
- * @type {function(): !Array<(null|{
- *   type: ?,
- *   decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
- * })>}
- * @nocollapse
- */
-MtxMonthView.ctorParameters = () => [
-    { type: DatetimeAdapter, decorators: [{ type: Optional }] },
-    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [MTX_DATETIME_FORMATS,] }] }
-];
-/** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
-MtxMonthView.propDecorators = {
-    type: [{ type: Input }],
-    dateFilter: [{ type: Input }],
-    selectedChange: [{ type: Output }],
-    _userSelection: [{ type: Output }],
-    activeDate: [{ type: Input }],
-    selected: [{ type: Input }]
-};
-
-/**
- * An internal component used to display a single year in the datetimepicker.
- * @docs-private
- */
-class MtxYearView {
-    constructor(_adapter, _dateFormats) {
-        this._adapter = _adapter;
-        this._dateFormats = _dateFormats;
-        this.type = 'date';
-        /** Emits when a new month is selected. */
-        this.selectedChange = new EventEmitter();
-        /** Emits when any date is selected. */
-        this._userSelection = new EventEmitter();
-        if (!this._adapter) {
-            throw createMissingDateImplError('DatetimeAdapter');
-        }
-        if (!this._dateFormats) {
-            throw createMissingDateImplError('MTX_DATETIME_FORMATS');
-        }
-        this._activeDate = this._adapter.today();
-    }
-    /** The date to display in this year view (everything other than the year is ignored). */
-    get activeDate() {
-        return this._activeDate;
-    }
-    set activeDate(value) {
-        const 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');
-            // }
-        }
-    }
-    /** The currently selected date. */
-    get selected() {
-        return this._selected;
-    }
-    set selected(value) {
-        this._selected = value;
-        this._selectedMonth = this._getMonthInCurrentYear(this.selected);
-    }
-    ngAfterContentInit() {
-        this._init();
-    }
-    /** Handles when a new month is selected. */
-    _monthSelected(month) {
-        const 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();
-        }
-    }
-    _calendarStateDone() {
-        this._calendarState = '';
-    }
-    /** Initializes this month view. */
-    _init() {
-        this._selectedMonth = this._getMonthInCurrentYear(this.selected);
-        this._todayMonth = this._getMonthInCurrentYear(this._adapter.today());
-        this._yearLabel = this._adapter.getYearName(this.activeDate);
-        const 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(row => row.map(month => 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.
-     */
-    _getMonthInCurrentYear(date) {
-        return this._adapter.sameYear(date, this.activeDate) ? this._adapter.getMonth(date) : null;
-    }
-    /** Creates an MdCalendarCell for the given month. */
-    _createCellForMonth(month, monthName) {
-        const 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. */
-    _isMonthEnabled(month) {
-        if (!this.dateFilter) {
-            return true;
-        }
-        const 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 (let date = firstOfMonth; this._adapter.getMonth(date) === month; date = this._adapter.addCalendarDays(date, 1)) {
-            if (this.dateFilter(date)) {
-                return true;
-            }
-        }
-        return false;
-    }
-}
-/** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
-MtxYearView.decorators = [
-    { type: Component, args: [{
-                selector: 'mtx-year-view',
-                template: "<table class=\"mtx-calendar-table\" role=\"grid\">\n  <thead class=\"mtx-calendar-table-header\"></thead>\n  <tbody mtx-calendar-body\n         (@slideCalendar.done)=\"_calendarStateDone()\"\n         [@slideCalendar]=\"_calendarState\"\n         [label]=\"_yearLabel\"\n         [rows]=\"_months\"\n         [todayValue]=\"_todayMonth!\"\n         [labelMinRequiredCells]=\"2\"\n         [numCols]=\"4\"\n         [activeCell]=\"_adapter.getMonth(activeDate)\"\n         [selectedValue]=\"_selectedMonth!\"\n         (selectedValueChange)=\"_monthSelected($event)\"\n         [allowDisabledSelection]=\"true\"></tbody>\n</table>\n",
-                exportAs: 'mtxYearView',
-                animations: [mtxDatetimepickerAnimations.slideCalendar],
-                encapsulation: ViewEncapsulation.None,
-                changeDetection: ChangeDetectionStrategy.OnPush
-            },] }
-];
-/**
- * @type {function(): !Array<(null|{
- *   type: ?,
- *   decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
- * })>}
- * @nocollapse
- */
-MtxYearView.ctorParameters = () => [
-    { type: DatetimeAdapter, decorators: [{ type: Optional }] },
-    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [MTX_DATETIME_FORMATS,] }] }
-];
-/** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
-MtxYearView.propDecorators = {
-    type: [{ type: Input }],
-    dateFilter: [{ type: Input }],
-    selectedChange: [{ type: Output }],
-    _userSelection: [{ type: Output }],
-    activeDate: [{ type: Input }],
-    selected: [{ type: Input }]
-};
+/** @nocollapse */ /** @nocollapse */ MtxDatetimepickerToggle.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MtxDatetimepickerToggle, deps: [{ token: i1$1.MatDatepickerIntl }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ MtxDatetimepickerToggle.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: MtxDatetimepickerToggle, selector: "mtx-datetimepicker-toggle", inputs: { datetimepicker: ["for", "datetimepicker"], tabIndex: "tabIndex", disabled: "disabled", disableRipple: "disableRipple" }, host: { listeners: { "focus": "_button.focus()" }, properties: { "attr.tabindex": "disabled ? null : -1", "class.mtx-datetimepicker-toggle-active": "datetimepicker && datetimepicker.opened", "class.mat-accent": "datetimepicker && datetimepicker.color === \"accent\"", "class.mat-warn": "datetimepicker && datetimepicker.color === \"warn\"" }, classAttribute: "mtx-datetimepicker-toggle" }, queries: [{ propertyName: "_customIcon", first: true, predicate: MtxDatetimepickerToggleIcon, descendants: true }], viewQueries: [{ propertyName: "_button", first: true, predicate: ["button"], descendants: true }], exportAs: ["mtxDatetimepickerToggle"], usesOnChanges: true, ngImport: i0, template: "<button #button\n        mat-icon-button\n        type=\"button\"\n        [attr.aria-haspopup]=\"datetimepicker ? 'dialog' : null\"\n        [attr.aria-label]=\"_intl.openCalendarLabel\"\n        [attr.tabindex]=\"disabled ? -1 : tabIndex\"\n        [disabled]=\"disabled\"\n        [disableRipple]=\"disableRipple\"\n        (click)=\"_open($event)\">\n\n  <ng-container *ngIf=\"!_customIcon\" [ngSwitch]=\"datetimepicker.type\">\n    <svg *ngSwitchCase=\"'time'\"\n         class=\"mtx-datetimepicker-toggle-default-icon\"\n         viewBox=\"0 0 24 24\"\n         width=\"24px\"\n         height=\"24px\"\n         fill=\"currentColor\"\n         focusable=\"false\">\n      <path\n            d=\"M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z\">\n      </path>\n    </svg>\n    <svg *ngSwitchCase=\"'datetime'\"\n         class=\"mtx-datetimepicker-toggle-default-icon\"\n         viewBox=\"0 0 24 24\"\n         width=\"24px\"\n         height=\"24px\"\n         fill=\"currentColor\"\n         focusable=\"false\">\n      <path\n            d=\"M15,13H16.5V15.82L18.94,17.23L18.19,18.53L15,16.69V13M19,8H5V19H9.67C9.24,18.09 9,17.07 9,16A7,7 0 0,1 16,9C17.07,9 18.09,9.24 19,9.67V8M5,21C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H6V1H8V3H16V1H18V3H19A2,2 0 0,1 21,5V11.1C22.24,12.36 23,14.09 23,16A7,7 0 0,1 16,23C14.09,23 12.36,22.24 11.1,21H5M16,11.15A4.85,4.85 0 0,0 11.15,16C11.15,18.68 13.32,20.85 16,20.85A4.85,4.85 0 0,0 20.85,16C20.85,13.32 18.68,11.15 16,11.15Z\">\n      </path>\n    </svg>\n    <svg *ngSwitchDefault\n         class=\"mtx-datetimepicker-toggle-default-icon\"\n         viewBox=\"0 0 24 24\"\n         width=\"24px\"\n         height=\"24px\"\n         fill=\"currentColor\"\n         focusable=\"false\">\n      <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n      <path\n            d=\"M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z\" />\n    </svg>\n  </ng-container>\n\n  <ng-content select=\"[mtxDatetimepickerToggleIcon]\"></ng-content>\n</button>\n", styles: [".mat-form-field-appearance-legacy .mat-form-field-prefix .mtx-datetimepicker-toggle-default-icon,.mat-form-field-appearance-legacy .mat-form-field-suffix .mtx-datetimepicker-toggle-default-icon{width:1em}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mtx-datetimepicker-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mtx-datetimepicker-toggle-default-icon{display:block;width:1.5em;height:1.5em}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button .mtx-datetimepicker-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button .mtx-datetimepicker-toggle-default-icon{margin:auto}\n"], components: [{ type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MtxDatetimepickerToggle, decorators: [{
+            type: Component,
+            args: [{ selector: 'mtx-datetimepicker-toggle', host: {
+                        'class': 'mtx-datetimepicker-toggle',
+                        // Always set the tabindex to -1 so that it doesn't overlap with any custom tabindex the
+                        // consumer may have provided, while still being able to receive focus.
+                        '[attr.tabindex]': 'disabled ? null : -1',
+                        '[class.mtx-datetimepicker-toggle-active]': 'datetimepicker && datetimepicker.opened',
+                        '[class.mat-accent]': 'datetimepicker && datetimepicker.color === "accent"',
+                        '[class.mat-warn]': 'datetimepicker && datetimepicker.color === "warn"',
+                        '(focus)': '_button.focus()',
+                    }, exportAs: 'mtxDatetimepickerToggle', encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button #button\n        mat-icon-button\n        type=\"button\"\n        [attr.aria-haspopup]=\"datetimepicker ? 'dialog' : null\"\n        [attr.aria-label]=\"_intl.openCalendarLabel\"\n        [attr.tabindex]=\"disabled ? -1 : tabIndex\"\n        [disabled]=\"disabled\"\n        [disableRipple]=\"disableRipple\"\n        (click)=\"_open($event)\">\n\n  <ng-container *ngIf=\"!_customIcon\" [ngSwitch]=\"datetimepicker.type\">\n    <svg *ngSwitchCase=\"'time'\"\n         class=\"mtx-datetimepicker-toggle-default-icon\"\n         viewBox=\"0 0 24 24\"\n         width=\"24px\"\n         height=\"24px\"\n         fill=\"currentColor\"\n         focusable=\"false\">\n      <path\n            d=\"M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z\">\n      </path>\n    </svg>\n    <svg *ngSwitchCase=\"'datetime'\"\n         class=\"mtx-datetimepicker-toggle-default-icon\"\n         viewBox=\"0 0 24 24\"\n         width=\"24px\"\n         height=\"24px\"\n         fill=\"currentColor\"\n         focusable=\"false\">\n      <path\n            d=\"M15,13H16.5V15.82L18.94,17.23L18.19,18.53L15,16.69V13M19,8H5V19H9.67C9.24,18.09 9,17.07 9,16A7,7 0 0,1 16,9C17.07,9 18.09,9.24 19,9.67V8M5,21C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H6V1H8V3H16V1H18V3H19A2,2 0 0,1 21,5V11.1C22.24,12.36 23,14.09 23,16A7,7 0 0,1 16,23C14.09,23 12.36,22.24 11.1,21H5M16,11.15A4.85,4.85 0 0,0 11.15,16C11.15,18.68 13.32,20.85 16,20.85A4.85,4.85 0 0,0 20.85,16C20.85,13.32 18.68,11.15 16,11.15Z\">\n      </path>\n    </svg>\n    <svg *ngSwitchDefault\n         class=\"mtx-datetimepicker-toggle-default-icon\"\n         viewBox=\"0 0 24 24\"\n         width=\"24px\"\n         height=\"24px\"\n         fill=\"currentColor\"\n         focusable=\"false\">\n      <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n      <path\n            d=\"M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z\" />\n    </svg>\n  </ng-container>\n\n  <ng-content select=\"[mtxDatetimepickerToggleIcon]\"></ng-content>\n</button>\n", styles: [".mat-form-field-appearance-legacy .mat-form-field-prefix .mtx-datetimepicker-toggle-default-icon,.mat-form-field-appearance-legacy .mat-form-field-suffix .mtx-datetimepicker-toggle-default-icon{width:1em}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mtx-datetimepicker-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mtx-datetimepicker-toggle-default-icon{display:block;width:1.5em;height:1.5em}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button .mtx-datetimepicker-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button .mtx-datetimepicker-toggle-default-icon{margin:auto}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.MatDatepickerIntl }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { datetimepicker: [{
+                type: Input,
+                args: ['for']
+            }], tabIndex: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], disableRipple: [{
+                type: Input
+            }], _customIcon: [{
+                type: ContentChild,
+                args: [MtxDatetimepickerToggleIcon]
+            }], _button: [{
+                type: ViewChild,
+                args: ['button']
+            }] } });
 
 class MtxDatetimepickerModule {
 }
-/** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
-MtxDatetimepickerModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [CommonModule, MatButtonModule, OverlayModule, A11yModule, PortalModule],
-                declarations: [
-                    MtxCalendar,
-                    MtxCalendarBody,
-                    MtxClock,
-                    MtxDatetimepicker,
-                    MtxDatetimepickerToggle,
-                    MtxDatetimepickerToggleIcon,
-                    MtxDatetimepickerInput,
-                    MtxDatetimepickerContent,
-                    MtxMonthView,
-                    MtxYearView,
-                    MtxMultiYearView,
-                ],
-                exports: [
-                    MtxCalendar,
-                    MtxCalendarBody,
-                    MtxClock,
-                    MtxDatetimepicker,
-                    MtxDatetimepickerToggle,
-                    MtxDatetimepickerToggleIcon,
-                    MtxDatetimepickerInput,
-                    MtxDatetimepickerContent,
-                    MtxMonthView,
-                    MtxYearView,
-                    MtxMultiYearView,
-                ],
-                providers: [MTX_DATETIMEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER],
-                entryComponents: [MtxDatetimepickerContent],
-            },] }
-];
+/** @nocollapse */ /** @nocollapse */ MtxDatetimepickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MtxDatetimepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ /** @nocollapse */ MtxDatetimepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MtxDatetimepickerModule, declarations: [MtxCalendar,
+        MtxCalendarBody,
+        MtxClock,
+        MtxDatetimepicker,
+        MtxDatetimepickerToggle,
+        MtxDatetimepickerToggleIcon,
+        MtxDatetimepickerInput,
+        MtxDatetimepickerContent,
+        MtxMonthView,
+        MtxYearView,
+        MtxMultiYearView], imports: [CommonModule, MatButtonModule, OverlayModule, A11yModule, PortalModule], exports: [MtxCalendar,
+        MtxCalendarBody,
+        MtxClock,
+        MtxDatetimepicker,
+        MtxDatetimepickerToggle,
+        MtxDatetimepickerToggleIcon,
+        MtxDatetimepickerInput,
+        MtxDatetimepickerContent,
+        MtxMonthView,
+        MtxYearView,
+        MtxMultiYearView] });
+/** @nocollapse */ /** @nocollapse */ MtxDatetimepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MtxDatetimepickerModule, providers: [MTX_DATETIMEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER], imports: [[CommonModule, MatButtonModule, OverlayModule, A11yModule, PortalModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MtxDatetimepickerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, MatButtonModule, OverlayModule, A11yModule, PortalModule],
+                    declarations: [
+                        MtxCalendar,
+                        MtxCalendarBody,
+                        MtxClock,
+                        MtxDatetimepicker,
+                        MtxDatetimepickerToggle,
+                        MtxDatetimepickerToggleIcon,
+                        MtxDatetimepickerInput,
+                        MtxDatetimepickerContent,
+                        MtxMonthView,
+                        MtxYearView,
+                        MtxMultiYearView,
+                    ],
+                    exports: [
+                        MtxCalendar,
+                        MtxCalendarBody,
+                        MtxClock,
+                        MtxDatetimepicker,
+                        MtxDatetimepickerToggle,
+                        MtxDatetimepickerToggleIcon,
+                        MtxDatetimepickerInput,
+                        MtxDatetimepickerContent,
+                        MtxMonthView,
+                        MtxYearView,
+                        MtxMultiYearView,
+                    ],
+                    providers: [MTX_DATETIMEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER],
+                }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
 export { CLOCK_INNER_RADIUS, CLOCK_OUTER_RADIUS, CLOCK_RADIUS, CLOCK_TICK_RADIUS, MAT_DATETIMEPICKER_VALIDATORS, MAT_DATETIMEPICKER_VALUE_ACCESSOR, MTX_DATETIMEPICKER_SCROLL_STRATEGY, MTX_DATETIMEPICKER_SCROLL_STRATEGY_FACTORY, MTX_DATETIMEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER, MtxCalendar, MtxCalendarBody, MtxCalendarCell, MtxClock, MtxDatetimepicker, MtxDatetimepickerContent, MtxDatetimepickerFilterType, MtxDatetimepickerInput, MtxDatetimepickerInputEvent, MtxDatetimepickerModule, MtxDatetimepickerToggle, MtxDatetimepickerToggleIcon, MtxMonthView, MtxMultiYearView, MtxYearView, getActiveOffset, isSameMultiYearView, mtxDatetimepickerAnimations, yearsPerPage, yearsPerRow };
-//# sourceMappingURL=mtxDatetimepicker.js.map
+//# sourceMappingURL=mtxDatetimepicker.mjs.map