@ng-matero/extensions 12.3.0 → 12.5.1

package/bundles/mtxDatetimepicker.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/cdk/a11y'), require('@angular/cdk/overlay'), require('@angular/common'), require('@angular/core'), require('@angular/material/button'), require('@angular/material/icon'), require('@angular/cdk/keycodes'), require('@angular/material/datepicker'), require('rxjs/operators'), require('@ng-matero/extensions/core'), require('@angular/animations'), require('@angular/cdk/bidi'), require('@angular/cdk/coercion'), require('@angular/cdk/portal'), require('rxjs'), require('@angular/cdk/platform'), require('@angular/forms'), require('@angular/material/input'), require('@angular/material/form-field')) :
-    typeof define === 'function' && define.amd ? define('@ng-matero/extensions/datetimepicker', ['exports', '@angular/cdk/a11y', '@angular/cdk/overlay', '@angular/common', '@angular/core', '@angular/material/button', '@angular/material/icon', '@angular/cdk/keycodes', '@angular/material/datepicker', 'rxjs/operators', '@ng-matero/extensions/core', '@angular/animations', '@angular/cdk/bidi', '@angular/cdk/coercion', '@angular/cdk/portal', 'rxjs', '@angular/cdk/platform', '@angular/forms', '@angular/material/input', '@angular/material/form-field'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['ng-matero'] = global['ng-matero'] || {}, global['ng-matero'].extensions = global['ng-matero'].extensions || {}, global['ng-matero'].extensions.datetimepicker = {}), global.ng.cdk.a11y, global.ng.cdk.overlay, global.ng.common, global.ng.core, global.ng.material.button, global.ng.material.icon, global.ng.cdk.keycodes, global.ng.material.datepicker, global.rxjs.operators, global['ng-matero'].extensions.core, global.ng.animations, global.ng.cdk.bidi, global.ng.cdk.coercion, global.ng.cdk.portal, global.rxjs, global.ng.cdk.platform, global.ng.forms, global.ng.material.input, global.ng.material.formField));
-}(this, (function (exports, a11y, overlay, common, core, button, icon, keycodes, datepicker, operators, core$1, animations, bidi, coercion, portal, rxjs, platform, forms, input, formField) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/cdk/a11y'), require('@angular/cdk/overlay'), require('@angular/common'), require('@angular/core'), require('@angular/material/button'), require('@angular/material/icon'), require('@angular/cdk/keycodes'), require('@angular/cdk/coercion'), require('@angular/material/datepicker'), require('rxjs/operators'), require('@ng-matero/extensions/core'), require('@angular/animations'), require('@angular/cdk/bidi'), require('@angular/cdk/portal'), require('rxjs'), require('@angular/cdk/platform'), require('@angular/forms'), require('@angular/material/input'), require('@angular/material/form-field')) :
+    typeof define === 'function' && define.amd ? define('@ng-matero/extensions/datetimepicker', ['exports', '@angular/cdk/a11y', '@angular/cdk/overlay', '@angular/common', '@angular/core', '@angular/material/button', '@angular/material/icon', '@angular/cdk/keycodes', '@angular/cdk/coercion', '@angular/material/datepicker', 'rxjs/operators', '@ng-matero/extensions/core', '@angular/animations', '@angular/cdk/bidi', '@angular/cdk/portal', 'rxjs', '@angular/cdk/platform', '@angular/forms', '@angular/material/input', '@angular/material/form-field'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['ng-matero'] = global['ng-matero'] || {}, global['ng-matero'].extensions = global['ng-matero'].extensions || {}, global['ng-matero'].extensions.datetimepicker = {}), global.ng.cdk.a11y, global.ng.cdk.overlay, global.ng.common, global.ng.core, global.ng.material.button, global.ng.material.icon, global.ng.cdk.keycodes, global.ng.cdk.coercion, global.ng.material.datepicker, global.rxjs.operators, global['ng-matero'].extensions.core, global.ng.animations, global.ng.cdk.bidi, global.ng.cdk.portal, global.rxjs, global.ng.cdk.platform, global.ng.forms, global.ng.material.input, global.ng.material.formField));
+}(this, (function (exports, a11y, overlay, common, core, button, icon, keycodes, coercion, datepicker, operators, core$1, animations, bidi, portal, rxjs, platform, forms, input, formField) { 'use strict';
 
     /**
      * This animation fades in the background color and text content of the
@@ -101,18 +101,20 @@
         };
         return MtxCalendarBody;
     }());
+    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
     MtxCalendarBody.decorators = [
         { type: core.Component, args: [{
                     selector: '[mtx-calendar-body]',
-                    template: "<!--\n  If there's not enough space in the first row, create a separate label row. We mark this row as\n  aria-hidden because we don't want it to be read out as one of the weeks in the month.\n-->\n<tr *ngIf=\"_firstRowOffset < labelMinRequiredCells\" aria-hidden=\"true\">\n  <td [attr.colspan]=\"numCols\" class=\"mtx-calendar-body-label\">{{ label }}</td>\n</tr>\n\n<!-- Create the first row separately so we can include a special spacer cell. -->\n<tr *ngFor=\"let row of rows; let rowIndex = index\" role=\"row\">\n  <!--\n    We mark this cell as aria-hidden so it doesn't get read out as one of the days in the week.\n  -->\n  <td *ngIf=\"rowIndex === 0 && _firstRowOffset\"\n      [attr.colspan]=\"_firstRowOffset\"\n      aria-hidden=\"true\"\n      class=\"mtx-calendar-body-label\">\n    {{ _firstRowOffset >= labelMinRequiredCells ? label : '' }}\n  </td>\n  <td (click)=\"_cellClicked(item)\"\n      *ngFor=\"let item of row; let colIndex = index\"\n      [attr.aria-disabled]=\"!item.enabled || null\"\n      [attr.aria-label]=\"item.ariaLabel\"\n      [class.mtx-calendar-body-active]=\"_isActiveCell(rowIndex, colIndex)\"\n      [class.mtx-calendar-body-disabled]=\"!item.enabled\"\n      class=\"mtx-calendar-body-cell\"\n      role=\"button\">\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",
+                    template: "<!--\n  If there's not enough space in the first row, create a separate label row. We mark this row as\n  aria-hidden because we don't want it to be read out as one of the weeks in the month.\n-->\n<tr *ngIf=\"_firstRowOffset < labelMinRequiredCells\" aria-hidden=\"true\">\n  <td [attr.colspan]=\"numCols\" class=\"mtx-calendar-body-label\">{{ label }}</td>\n</tr>\n\n<!-- Create the first row separately so we can include a special spacer cell. -->\n<tr *ngFor=\"let row of rows; let rowIndex = index\" role=\"row\">\n  <!--\n    We mark this cell as aria-hidden so it doesn't get read out as one of the days in the week.\n  -->\n  <td *ngIf=\"rowIndex === 0 && _firstRowOffset\"\n      [attr.colspan]=\"_firstRowOffset\"\n      aria-hidden=\"true\"\n      class=\"mtx-calendar-body-label\">\n    {{ _firstRowOffset >= labelMinRequiredCells ? label : '' }}\n  </td>\n  <td *ngFor=\"let item of row; let colIndex = index\"\n      role=\"gridcell\"\n      class=\"mtx-calendar-body-cell\"\n      [tabindex]=\"_isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n      [attr.data-mat-row]=\"rowIndex\"\n      [attr.data-mat-col]=\"colIndex\"\n      [attr.aria-label]=\"item.ariaLabel\"\n      [attr.aria-disabled]=\"!item.enabled || null\"\n      [class.mtx-calendar-body-active]=\"_isActiveCell(rowIndex, colIndex)\"\n      [class.mtx-calendar-body-disabled]=\"!item.enabled\"\n      (click)=\"_cellClicked(item)\">\n    <div [attr.aria-selected]=\"selectedValue === item.value\"\n         [class.mtx-calendar-body-selected]=\"selectedValue === item.value\"\n         [class.mtx-calendar-body-today]=\"todayValue === item.value\"\n         class=\"mtx-calendar-body-cell-content\">\n      {{ item.displayValue }}\n    </div>\n  </td>\n</tr>\n",
                     host: {
                         class: 'mtx-calendar-body',
                     },
                     encapsulation: core.ViewEncapsulation.None,
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
-                    styles: [".mtx-calendar-body{font-size:13px;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"]
+                    styles: [".mtx-calendar-body{min-width:224px}.mtx-calendar-body-label{height:0;line-height:0;text-align:left;padding:7.1428571429% 4.7142857143%}[dir=rtl] .mtx-calendar-body-label{text-align:right}.mtx-calendar-body-cell{position:relative;width:14.2857142857%;height:0;line-height:0;padding:7.1428571429% 0;text-align:center;outline:none;cursor:pointer}.mtx-calendar-body-disabled{cursor:default;pointer-events:none}.mtx-calendar-body-cell-content{position:absolute;top:5%;left:5%;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:90%;height:90%;border:1px solid transparent;border-radius:999px}\n"]
                 },] }
     ];
+    /** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
     MtxCalendarBody.propDecorators = {
         label: [{ type: core.Input }],
         rows: [{ type: core.Input }],
@@ -283,20 +285,28 @@
         };
         return MtxMultiYearView;
     }());
+    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
     MtxMultiYearView.decorators = [
         { type: core.Component, args: [{
                     selector: 'mtx-multi-year-view',
-                    template: "<table class=\"mtx-calendar-table\">\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)\"\n         role=\"grid\"></tbody>\n</table>\n",
+                    template: "<table class=\"mtx-calendar-table\" role=\"grid\">\n  <thead class=\"mtx-calendar-table-header\"></thead>\n  <tbody mtx-calendar-body\n         (@slideCalendar.done)=\"_calendarStateDone()\"\n         [@slideCalendar]=\"_calendarState\"\n         [todayValue]=\"_todayYear\"\n         [rows]=\"_years\"\n         [numCols]=\"4\"\n         [activeCell]=\"_getActiveCell()\"\n         [allowDisabledSelection]=\"true\"\n         [selectedValue]=\"_selectedYear!\"\n         (selectedValueChange)=\"_yearSelected($event)\"></tbody>\n</table>\n",
                     animations: [slideCalendar],
                     encapsulation: core.ViewEncapsulation.None,
                     changeDetection: core.ChangeDetectionStrategy.OnPush
                 },] }
     ];
-    /** @nocollapse */
+    /**
+     * @type {function(): !Array<(null|{
+     *   type: ?,
+     *   decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
+     * })>}
+     * @nocollapse
+     */
     MtxMultiYearView.ctorParameters = function () { return [
         { type: core$1.DatetimeAdapter, decorators: [{ type: core.Optional }] },
         { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [core$1.MTX_DATETIME_FORMATS,] }] }
     ]; };
+    /** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
     MtxMultiYearView.propDecorators = {
         _userSelection: [{ type: core.Output }],
         type: [{ type: core.Input }],
@@ -356,11 +366,10 @@
             this._adapter = _adapter;
             this._dateFormats = _dateFormats;
             this._userSelection = new core.EventEmitter();
-            /** Active multi year view when click on year. */
-            this.multiYearSelector = false;
+            this._multiYearSelector = false;
+            this._twelvehour = false;
             /** Whether the calendar should be started in month or year view. */
             this.startView = 'month';
-            this.twelvehour = false;
             this.timeInterval = 1;
             this.ariaLabel = 'Use arrow keys to navigate';
             this.ariaNextMonthLabel = 'Next month';
@@ -392,6 +401,27 @@
             }
             this._intlChanges = _intl.changes.subscribe(function () { return changeDetectorRef.markForCheck(); });
         }
+        Object.defineProperty(MtxCalendar.prototype, "multiYearSelector", {
+            get: function () {
+                return this._multiYearSelector;
+            },
+            set: function (value) {
+                this._multiYearSelector = coercion.coerceBooleanProperty(value);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(MtxCalendar.prototype, "twelvehour", {
+            /** if true change the clock to 12 hour format. */
+            get: function () {
+                return this._twelvehour;
+            },
+            set: function (value) {
+                this._twelvehour = coercion.coerceBooleanProperty(value);
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(MtxCalendar.prototype, "type", {
             get: function () {
                 return this._type;
@@ -586,7 +616,6 @@
         MtxCalendar.prototype.ngAfterContentInit = function () {
             this._activeDate = this.startAt || this._adapter.today();
             this._selectAMPM(this._activeDate);
-            this._focusActiveCell();
             if (this.type === 'year') {
                 this.currentView = 'multi-year';
             }
@@ -952,24 +981,30 @@
         };
         return MtxCalendar;
     }());
+    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
     MtxCalendar.decorators = [
         { type: core.Component, args: [{
                     selector: 'mtx-calendar',
-                    template: "<div class=\"mtx-calendar-header\">\n  <div (click)=\"_yearClicked()\"\n       *ngIf=\"type !== 'time'\"\n       [class.active]=\"currentView === 'year' || currentView === 'multi-year'\"\n       class=\"mtx-calendar-header-year\"\n       role=\"button\">{{ _yearLabel }}\n    <mat-icon *ngIf=\"multiYearSelector || type === 'year'\">arrow_drop_down</mat-icon>\n  </div>\n  <div class=\"mtx-calendar-header-date-time\">\n    <span (click)=\"_dateClicked()\" *ngIf=\"type !== 'time' && type !== 'year'\"\n          [class.active]=\"currentView === 'month'\"\n          [class.not-clickable]=\"type === 'month'\"\n          class=\"mtx-calendar-header-date\"\n          role=\"button\">{{ _dateLabel }}</span>\n    <span *ngIf=\"type.endsWith('time')\"\n          [class.active]=\"currentView === 'clock'\"\n          class=\"mtx-calendar-header-time\">\n      <span (click)=\"_hoursClicked()\"\n            [class.active]=\"_clockView == 'hour'\"\n            class=\"mtx-calendar-header-hours\"\n            role=\"button\">{{ _hoursLabel }}</span>:<span (click)=\"_minutesClicked()\"\n            [class.active]=\"_clockView == 'minute'\"\n            class=\"mtx-calendar-header-minutes\"\n            role=\"button\">{{ _minutesLabel }}</span>\n      <br />\n      <span *ngIf=\"twelvehour\" class=\"mtx-calendar-header-ampm-container\">\n        <span (click)=\"_ampmClicked('AM')\"\n              [class.active]=\"_AMPM === 'AM'\"\n              class=\"mtx-calendar-header-ampm\">AM</span>/<span\n              (click)=\"_ampmClicked('PM')\"\n              [class.active]=\"_AMPM === 'PM'\"\n              class=\"mtx-calendar-header-ampm\">PM</span>\n      </span>\n    </span>\n  </div>\n</div>\n<div [ngSwitch]=\"currentView\" class=\"mtx-calendar-content\">\n  <div *ngIf=\"currentView === 'month' || currentView === 'year' || currentView === 'multi-year'\"\n       class=\"mtx-month-content\">\n    <div class=\"mtx-calendar-controls\">\n      <button mat-icon-button type=\"button\" (click)=\"_previousClicked()\"\n              [attr.aria-disabled]=\"!_previousEnabled()\"\n              [attr.aria-label]=\"_ariaLabelPrev\"\n              [class.disabled]=\"!_previousEnabled()\"\n              class=\"mtx-calendar-previous-button\">\n        <svg height=\"24\" viewBox=\"0 0 24 24\" width=\"24\">\n          <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\"></path>\n        </svg>\n      </button>\n      <div (@slideCalendar.done)=\"_calendarStateDone()\" [@slideCalendar]=\"_calendarState\"\n           class=\"mtx-calendar-period-button\">\n        <strong>{{ _monthYearLabel }}</strong>\n      </div>\n      <button mat-icon-button type=\"button\" (click)=\"_nextClicked()\"\n              [attr.aria-disabled]=\"!_nextEnabled()\"\n              [attr.aria-label]=\"_ariaLabelNext\"\n              [class.disabled]=\"!_nextEnabled()\"\n              class=\"mtx-calendar-next-button\">\n        <svg height=\"24\" viewBox=\"0 0 24 24\" width=\"24\">\n          <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"></path>\n        </svg>\n      </button>\n    </div>\n  </div>\n  <mtx-month-view (_userSelection)=\"_userSelected()\"\n                  (selectedChange)=\"_dateSelected($event)\"\n                  *ngSwitchCase=\"'month'\"\n                  [activeDate]=\"_activeDate\"\n                  [dateFilter]=\"_dateFilterForViews\"\n                  [selected]=\"selected!\"\n                  [type]=\"type\">\n  </mtx-month-view>\n  <mtx-year-view (_userSelection)=\"_userSelected()\"\n                 (selectedChange)=\"_monthSelected($event)\"\n                 *ngSwitchCase=\"'year'\"\n                 [activeDate]=\"_activeDate\"\n                 [dateFilter]=\"_dateFilterForViews\"\n                 [selected]=\"selected!\"\n                 [type]=\"type\">\n  </mtx-year-view>\n  <mtx-multi-year-view (_userSelection)=\"_userSelected()\"\n                       (selectedChange)=\"_yearSelected($event)\"\n                       *ngSwitchCase=\"'multi-year'\"\n                       [activeDate]=\"_activeDate\"\n                       [dateFilter]=\"_dateFilterForViews\"\n                       [maxDate]=\"maxDate\"\n                       [minDate]=\"minDate\"\n                       [selected]=\"selected!\"\n                       [type]=\"type\">\n  </mtx-multi-year-view>\n  <mtx-clock (_userSelection)=\"_userSelected()\"\n             (activeDateChange)=\"_onActiveDateChange($event)\"\n             (selectedChange)=\"_timeSelected($event)\"\n             *ngSwitchDefault\n             [dateFilter]=\"dateFilter\"\n             [interval]=\"timeInterval\"\n             [maxDate]=\"maxDate\"\n             [minDate]=\"minDate\"\n             [selected]=\"_activeDate\"\n             [startView]=\"_clockView\"\n             [twelvehour]=\"twelvehour\">\n  </mtx-clock>\n</div>\n",
+                    template: "<div class=\"mtx-calendar-header\">\n  <div (click)=\"_yearClicked()\"\n       *ngIf=\"type !== 'time'\"\n       [class.active]=\"currentView === 'year' || currentView === 'multi-year'\"\n       class=\"mtx-calendar-header-year\"\n       role=\"button\">\n    <span>{{ _yearLabel }}</span>\n    <mat-icon *ngIf=\"multiYearSelector || type === 'year'\">arrow_drop_down</mat-icon>\n  </div>\n  <div class=\"mtx-calendar-header-date-time\">\n    <span (click)=\"_dateClicked()\" *ngIf=\"type !== 'time' && type !== 'year'\"\n          [class.active]=\"currentView === 'month'\"\n          [class.not-clickable]=\"type === 'month'\"\n          class=\"mtx-calendar-header-date\"\n          role=\"button\">{{ _dateLabel }}</span>\n    <span *ngIf=\"type.endsWith('time')\"\n          [class.active]=\"currentView === 'clock'\"\n          class=\"mtx-calendar-header-time\">\n      <span (click)=\"_hoursClicked()\"\n            [class.active]=\"_clockView == 'hour'\"\n            class=\"mtx-calendar-header-hours\"\n            role=\"button\">{{ _hoursLabel }}</span>:<span (click)=\"_minutesClicked()\"\n            [class.active]=\"_clockView == 'minute'\"\n            class=\"mtx-calendar-header-minutes\"\n            role=\"button\">{{ _minutesLabel }}</span>\n      <br />\n      <span *ngIf=\"twelvehour\" class=\"mtx-calendar-header-ampm-container\">\n        <span (click)=\"_ampmClicked('AM')\"\n              [class.active]=\"_AMPM === 'AM'\"\n              class=\"mtx-calendar-header-ampm\">AM</span>/<span\n              (click)=\"_ampmClicked('PM')\"\n              [class.active]=\"_AMPM === 'PM'\"\n              class=\"mtx-calendar-header-ampm\">PM</span>\n      </span>\n    </span>\n  </div>\n</div>\n<div class=\"mtx-calendar-content\" [ngSwitch]=\"currentView\">\n  <div *ngIf=\"currentView === 'month' || currentView === 'year' || currentView === 'multi-year'\"\n       class=\"mtx-month-content\">\n    <div class=\"mtx-calendar-controls\">\n      <button mat-icon-button type=\"button\" (click)=\"_previousClicked()\"\n              [attr.aria-disabled]=\"!_previousEnabled()\"\n              [attr.aria-label]=\"_ariaLabelPrev\"\n              [class.disabled]=\"!_previousEnabled()\"\n              class=\"mtx-calendar-previous-button\">\n        <svg height=\"24\" viewBox=\"0 0 24 24\" width=\"24\">\n          <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\"></path>\n        </svg>\n      </button>\n      <div (@slideCalendar.done)=\"_calendarStateDone()\" [@slideCalendar]=\"_calendarState\"\n           class=\"mtx-calendar-period-button\">\n        <strong>{{ _monthYearLabel }}</strong>\n      </div>\n      <button mat-icon-button type=\"button\" (click)=\"_nextClicked()\"\n              [attr.aria-disabled]=\"!_nextEnabled()\"\n              [attr.aria-label]=\"_ariaLabelNext\"\n              [class.disabled]=\"!_nextEnabled()\"\n              class=\"mtx-calendar-next-button\">\n        <svg height=\"24\" viewBox=\"0 0 24 24\" width=\"24\">\n          <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"></path>\n        </svg>\n      </button>\n    </div>\n  </div>\n  <mtx-month-view (_userSelection)=\"_userSelected()\"\n                  (selectedChange)=\"_dateSelected($event)\"\n                  *ngSwitchCase=\"'month'\"\n                  [activeDate]=\"_activeDate\"\n                  [dateFilter]=\"_dateFilterForViews\"\n                  [selected]=\"selected!\"\n                  [type]=\"type\">\n  </mtx-month-view>\n  <mtx-year-view (_userSelection)=\"_userSelected()\"\n                 (selectedChange)=\"_monthSelected($event)\"\n                 *ngSwitchCase=\"'year'\"\n                 [activeDate]=\"_activeDate\"\n                 [dateFilter]=\"_dateFilterForViews\"\n                 [selected]=\"selected!\"\n                 [type]=\"type\">\n  </mtx-year-view>\n  <mtx-multi-year-view (_userSelection)=\"_userSelected()\"\n                       (selectedChange)=\"_yearSelected($event)\"\n                       *ngSwitchCase=\"'multi-year'\"\n                       [activeDate]=\"_activeDate\"\n                       [dateFilter]=\"_dateFilterForViews\"\n                       [maxDate]=\"maxDate\"\n                       [minDate]=\"minDate\"\n                       [selected]=\"selected!\"\n                       [type]=\"type\">\n  </mtx-multi-year-view>\n  <mtx-clock (_userSelection)=\"_userSelected()\"\n             (activeDateChange)=\"_onActiveDateChange($event)\"\n             (selectedChange)=\"_timeSelected($event)\"\n             *ngSwitchDefault\n             [dateFilter]=\"dateFilter\"\n             [interval]=\"timeInterval\"\n             [maxDate]=\"maxDate\"\n             [minDate]=\"minDate\"\n             [selected]=\"_activeDate\"\n             [startView]=\"_clockView\"\n             [twelvehour]=\"twelvehour\">\n  </mtx-clock>\n</div>\n",
                     host: {
-                        '[class.mtx-calendar]': 'true',
+                        'class': 'mtx-calendar',
                         '[attr.aria-label]': 'ariaLabel',
-                        'role': 'dialog',
                         'tabindex': '0',
                         '(keydown)': '_handleCalendarBodyKeydown($event)',
                     },
                     animations: [slideCalendar],
                     encapsulation: core.ViewEncapsulation.None,
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
-                    styles: [".mtx-calendar{display:block}.mtx-calendar[mode=landscape]{display:flex}.mtx-calendar-header{padding:16px;font-size:14px;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%;font-weight:400;white-space:nowrap}.mtx-calendar-header-year{height:32px;line-height:32px;font-size:16px}.mtx-calendar-header-year .mat-icon{vertical-align:middle}.mtx-calendar-header-date-time{font-size:30px;line-height:34px}[mode=landscape] .mtx-calendar-header-date-time{white-space:normal;word-wrap:break-word}.mtx-calendar-header-ampm-container{font-size:.77em}.mtx-calendar-header-year:not(.active),.mtx-calendar-header-date:not(.active),.mtx-calendar-header-hours:not(.active),.mtx-calendar-header-minutes:not(.active),.mtx-calendar-header-ampm:not(.active){cursor:pointer;opacity:.6}.mtx-calendar-header-year.not-clickable,.mtx-calendar-header-date.not-clickable,.mtx-calendar-header-hours.not-clickable,.mtx-calendar-header-minutes.not-clickable,.mtx-calendar-header-ampm.not-clickable{cursor:auto;cursor:initial}.mtx-calendar-header-time{display:inline-block;padding-left:8px}.mtx-calendar-header-time:not(.active){opacity:.6}.mtx-calendar-header-time:not(.active) .mtx-calendar-header-hours,.mtx-calendar-header-time:not(.active) .mtx-calendar-header-minutes,.mtx-calendar-header-time:not(.active) .mtx-calendar-header-ampm{cursor:pointer;opacity:1}[dir=rtl] .mtx-calendar-header-time{padding-right:8px}[mode=landscape] .mtx-calendar-header-time{display:block;padding:0}.mtx-calendar-content{width:100%;padding:8px;outline:none;box-sizing:border-box;overflow:hidden}.mtx-calendar-controls{display:flex;justify-content:space-between;margin:0 calc(33% / 7 - 16px)}.mtx-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:.04}.mtx-calendar-period-button{display:inline-block;height:40px;line-height:40px;font-size:14px;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;font-size:11px;font-weight:400;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}.mtx-calendar[mode=auto] .mtx-calendar-content{padding-top:8px}}\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:auto;cursor:initial}.mtx-calendar-header-time{display:inline-block;padding-left:8px}.mtx-calendar-header-time:not(.active){opacity:.6}.mtx-calendar-header-time:not(.active) .mtx-calendar-header-hours,.mtx-calendar-header-time:not(.active) .mtx-calendar-header-minutes,.mtx-calendar-header-time:not(.active) .mtx-calendar-header-ampm{cursor:pointer;opacity:1}[dir=rtl] .mtx-calendar-header-time{padding-right:8px}[mode=landscape] .mtx-calendar-header-time{display:block;padding:0}.mtx-calendar-content{width:100%;padding:8px;outline:none;box-sizing:border-box;overflow:hidden}.mtx-calendar-controls{display:flex;justify-content:space-between;margin:0 calc(33% / 7 - 16px)}.mtx-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:.04}.mtx-calendar-period-button{display:inline-block;height:40px;line-height:40px;outline:none;border:0;background:transparent;box-sizing:border-box}.mtx-calendar-previous-button.disabled,.mtx-calendar-next-button.disabled{pointer-events:none}.mtx-calendar-previous-button svg,.mtx-calendar-next-button svg{fill:currentColor;vertical-align:top}[dir=rtl] .mtx-calendar-previous-button svg,[dir=rtl] .mtx-calendar-next-button svg{transform:rotate(180deg)}.mtx-calendar-table{border-spacing:0;border-collapse:collapse;width:100%}.mtx-calendar-table-header th{text-align:center;padding:8px 0}@media all and (orientation: landscape){.mtx-calendar[mode=auto]{display:flex}.mtx-calendar[mode=auto] .mtx-calendar-header{width:150px;min-width:150px;border-radius:4px 0 0 4px}[dir=rtl] .mtx-calendar[mode=auto] .mtx-calendar-header{border-radius:0 4px 4px 0}.mtx-calendar[mode=auto] .mtx-calendar-header-date-time{white-space:normal;word-wrap:break-word}.mtx-calendar[mode=auto] .mtx-calendar-header-time{display:block;padding:0}}\n"]
                 },] }
     ];
-    /** @nocollapse */
+    /**
+     * @type {function(): !Array<(null|{
+     *   type: ?,
+     *   decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
+     * })>}
+     * @nocollapse
+     */
     MtxCalendar.ctorParameters = function () { return [
         { type: core.ElementRef },
         { type: datepicker.MatDatepickerIntl },
@@ -978,11 +1013,12 @@
         { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [core$1.MTX_DATETIME_FORMATS,] }] },
         { type: core.ChangeDetectorRef }
     ]; };
+    /** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
     MtxCalendar.propDecorators = {
         _userSelection: [{ type: core.Output }],
         multiYearSelector: [{ type: core.Input }],
-        startView: [{ type: core.Input }],
         twelvehour: [{ type: core.Input }],
+        startView: [{ type: core.Input }],
         timeInterval: [{ type: core.Input }],
         dateFilter: [{ type: core.Input }],
         ariaLabel: [{ type: core.Input }],
@@ -1268,6 +1304,7 @@
         };
         return MtxClock;
     }());
+    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
     MtxClock.decorators = [
         { type: core.Component, args: [{
                     selector: 'mtx-clock',
@@ -1278,14 +1315,21 @@
                         '(mousedown)': '_handleMousedown($event)',
                     },
                     encapsulation: core.ViewEncapsulation.None,
-                    styles: [".mtx-clock{position:relative;display:block;min-width:224px;margin:8px;font-size:14px;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mtx-clock-wrapper{position:relative;width:100%;height:0;padding-top:100%;border-radius:50%}.mtx-clock-center{position:absolute;top:50%;left:50%;width:2%;height:2%;margin:-1%;border-radius:50%}.mtx-clock-hand{position:absolute;top:0;right:0;bottom:0;left:0;width:1px;margin:0 auto;transform-origin:bottom}.mtx-clock-hand:before{content:\"\";position:absolute;top:-4px;left:-4px;width:8px;height:8px;border-radius:50%}.mtx-clock-hours,.mtx-clock-minutes{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;visibility:hidden;transition:.35s;transform:scale(1.2)}.mtx-clock-hours.active,.mtx-clock-minutes.active{opacity:1;visibility:visible;transform:scale(1)}.mtx-clock-minutes{transform:scale(.8)}.mtx-clock-cell{position:absolute;display:flex;width:14.1666%;height:14.1666%;justify-content:center;box-sizing:border-box;border-radius:50%;align-items:center;cursor:pointer}.mtx-clock-cell.mtx-clock-cell-disabled{pointer-events:none}\n"]
+                    styles: [".mtx-clock{position:relative;display:block;min-width:224px;margin:8px;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mtx-clock-wrapper{position:relative;width:100%;height:0;padding-top:100%;border-radius:50%}.mtx-clock-center{position:absolute;top:50%;left:50%;width:2%;height:2%;margin:-1%;border-radius:50%}.mtx-clock-hand{position:absolute;top:0;right:0;bottom:0;left:0;width:1px;margin:0 auto;transform-origin:bottom}.mtx-clock-hand:before{content:\"\";position:absolute;top:-4px;left:-4px;width:8px;height:8px;border-radius:50%}.mtx-clock-hours,.mtx-clock-minutes{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;visibility:hidden;transition:.35s;transform:scale(1.2)}.mtx-clock-hours.active,.mtx-clock-minutes.active{opacity:1;visibility:visible;transform:scale(1)}.mtx-clock-minutes{transform:scale(.8)}.mtx-clock-cell{position:absolute;display:flex;width:14.1666%;height:14.1666%;justify-content:center;box-sizing:border-box;border-radius:50%;align-items:center;cursor:pointer}.mtx-clock-cell.mtx-clock-cell-disabled{pointer-events:none}\n"]
                 },] }
     ];
-    /** @nocollapse */
+    /**
+     * @type {function(): !Array<(null|{
+     *   type: ?,
+     *   decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
+     * })>}
+     * @nocollapse
+     */
     MtxClock.ctorParameters = function () { return [
         { type: core.ElementRef },
         { type: core$1.DatetimeAdapter }
     ]; };
+    /** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
     MtxClock.propDecorators = {
         _userSelection: [{ type: core.Output }],
         dateFilter: [{ type: core.Input }],
@@ -1321,6 +1365,7 @@
         };
         return MtxDatetimepickerContent;
     }());
+    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
     MtxDatetimepickerContent.decorators = [
         { type: core.Component, args: [{
                     selector: 'mtx-datetimepicker-content',
@@ -1332,9 +1377,10 @@
                     },
                     encapsulation: core.ViewEncapsulation.None,
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
-                    styles: [".mtx-datetimepicker-content{display:block;border-radius:4px}.mtx-datetimepicker-content-container{display:flex;flex-direction:column;justify-content:space-between}.mtx-calendar{width:296px;height:404px}.mtx-calendar[mode=landscape]{width:446px;height:328px}@media all and (orientation: landscape){.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"]
+                    styles: [".mtx-datetimepicker-content{display:block;border-radius:4px}.mtx-datetimepicker-content-container{display:flex;flex-direction:column;justify-content:space-between}.mtx-datetimepicker-content .mtx-calendar{width:296px;height:404px}.mtx-datetimepicker-content .mtx-calendar[mode=landscape]{width:446px;height:328px}@media all and (orientation: landscape){.mtx-datetimepicker-content .mtx-calendar[mode=auto]{width:446px;height:328px}}.mtx-datetimepicker-content-touch{display:block;max-height:80vh;position:relative;overflow:visible}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container{min-height:300px;max-height:850px;min-width:250px;max-width:750px}.mtx-datetimepicker-content-touch .mtx-calendar{width:100%;height:auto}@media all and (orientation: landscape){.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto],.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape]{width:120vh;height:80vh}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto] .mtx-calendar,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape] .mtx-calendar{width:auto;height:100%}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait]{width:64vh;height:90vh}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait] .mtx-calendar{width:100%;height:auto}}@media all and (orientation: portrait){.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto],.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait]{width:80vw;height:120vw}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto] .mtx-calendar,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait] .mtx-calendar{width:100%;height:auto}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape]{width:90vw;height:64vw}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape] .mtx-calendar{width:auto;height:100%}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container-with-actions{height:135vw}}\n"]
                 },] }
     ];
+    /** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
     MtxDatetimepickerContent.propDecorators = {
         _calendar: [{ type: core.ViewChild, args: [MtxCalendar, { static: true },] }]
     };
@@ -1346,10 +1392,8 @@
             this._scrollStrategy = _scrollStrategy;
             this._dateAdapter = _dateAdapter;
             this._dir = _dir;
-            /** Active multi year view when click on year. */
-            this.multiYearSelector = false;
-            /** if true change the clock to 12 hour format. */
-            this.twelvehour = false;
+            this._multiYearSelector = false;
+            this._twelvehour = false;
             /** The view that the calendar should start in. */
             this.startView = 'month';
             this.mode = 'auto';
@@ -1389,6 +1433,28 @@
                 throw createMissingDateImplError('DateAdapter');
             }
         }
+        Object.defineProperty(MtxDatetimepicker.prototype, "multiYearSelector", {
+            /** Active multi year view when click on year. */
+            get: function () {
+                return this._multiYearSelector;
+            },
+            set: function (value) {
+                this._multiYearSelector = coercion.coerceBooleanProperty(value);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(MtxDatetimepicker.prototype, "twelvehour", {
+            /** if true change the clock to 12 hour format. */
+            get: function () {
+                return this._twelvehour;
+            },
+            set: function (value) {
+                this._twelvehour = coercion.coerceBooleanProperty(value);
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(MtxDatetimepicker.prototype, "startAt", {
             /** The date to open the calendar to initially. */
             get: function () {
@@ -1678,6 +1744,7 @@
         };
         return MtxDatetimepicker;
     }());
+    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
     MtxDatetimepicker.decorators = [
         { type: core.Component, args: [{
                     selector: 'mtx-datetimepicker',
@@ -1688,7 +1755,13 @@
                     preserveWhitespaces: false
                 },] }
     ];
-    /** @nocollapse */
+    /**
+     * @type {function(): !Array<(null|{
+     *   type: ?,
+     *   decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
+     * })>}
+     * @nocollapse
+     */
     MtxDatetimepicker.ctorParameters = function () { return [
         { type: overlay.Overlay },
         { type: core.NgZone },
@@ -1697,6 +1770,7 @@
         { type: core$1.DatetimeAdapter, decorators: [{ type: core.Optional }] },
         { type: bidi.Directionality, decorators: [{ type: core.Optional }] }
     ]; };
+    /** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
     MtxDatetimepicker.propDecorators = {
         multiYearSelector: [{ type: core.Input }],
         twelvehour: [{ type: core.Input }],
@@ -2022,6 +2096,7 @@
         };
         return MtxDatetimepickerInput;
     }());
+    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
     MtxDatetimepickerInput.decorators = [
         { type: core.Directive, args: [{
                     selector: 'input[mtxDatetimepicker]',
@@ -2044,13 +2119,20 @@
                     exportAs: 'mtxDatetimepickerInput',
                 },] }
     ];
-    /** @nocollapse */
+    /**
+     * @type {function(): !Array<(null|{
+     *   type: ?,
+     *   decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
+     * })>}
+     * @nocollapse
+     */
     MtxDatetimepickerInput.ctorParameters = function () { return [
         { type: core.ElementRef },
         { type: core$1.DatetimeAdapter, decorators: [{ type: core.Optional }] },
         { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [core$1.MTX_DATETIME_FORMATS,] }] },
         { type: formField.MatFormField, decorators: [{ type: core.Optional }] }
     ]; };
+    /** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
     MtxDatetimepickerInput.propDecorators = {
         dateChange: [{ type: core.Output }],
         dateInput: [{ type: core.Output }],
@@ -2113,6 +2195,7 @@
         };
         return MtxDatetimepickerToggle;
     }());
+    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
     MtxDatetimepickerToggle.decorators = [
         { type: core.Component, args: [{
                     selector: 'mtx-datetimepicker-toggle',
@@ -2126,11 +2209,18 @@
                     changeDetection: core.ChangeDetectionStrategy.OnPush
                 },] }
     ];
-    /** @nocollapse */
+    /**
+     * @type {function(): !Array<(null|{
+     *   type: ?,
+     *   decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
+     * })>}
+     * @nocollapse
+     */
     MtxDatetimepickerToggle.ctorParameters = function () { return [
         { type: datepicker.MatDatepickerIntl },
         { type: core.ChangeDetectorRef }
     ]; };
+    /** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
     MtxDatetimepickerToggle.propDecorators = {
         datetimepicker: [{ type: core.Input, args: ['for',] }],
         disabled: [{ type: core.Input }]
@@ -2257,20 +2347,28 @@
         };
         return MtxMonthView;
     }());
+    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
     MtxMonthView.decorators = [
         { type: core.Component, args: [{
                     selector: 'mtx-month-view',
-                    template: "<table class=\"mtx-calendar-table\">\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)\"\n         role=\"grid\"></tbody>\n</table>\n",
+                    template: "<table class=\"mtx-calendar-table\" role=\"grid\">\n  <thead class=\"mtx-calendar-table-header\">\n    <tr>\n      <th *ngFor=\"let day of _weekdays\" [attr.aria-label]=\"day.long\">{{day.narrow}}</th>\n    </tr>\n  </thead>\n  <tbody mtx-calendar-body\n         (@slideCalendar.done)=\"_calendarStateDone()\"\n         [@slideCalendar]=\"_calendarState\"\n         [rows]=\"_weeks\"\n         [todayValue]=\"_todayDate!\"\n         [activeCell]=\"_adapter.getDate(activeDate) - 1\"\n         [selectedValue]=\"_selectedDate!\"\n         (selectedValueChange)=\"_dateSelected($event)\"></tbody>\n</table>\n",
                     animations: [slideCalendar],
                     encapsulation: core.ViewEncapsulation.None,
                     changeDetection: core.ChangeDetectionStrategy.OnPush
                 },] }
     ];
-    /** @nocollapse */
+    /**
+     * @type {function(): !Array<(null|{
+     *   type: ?,
+     *   decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
+     * })>}
+     * @nocollapse
+     */
     MtxMonthView.ctorParameters = function () { return [
         { type: core$1.DatetimeAdapter, decorators: [{ type: core.Optional }] },
         { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [core$1.MTX_DATETIME_FORMATS,] }] }
     ]; };
+    /** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
     MtxMonthView.propDecorators = {
         type: [{ type: core.Input }],
         _userSelection: [{ type: core.Output }],
@@ -2393,20 +2491,28 @@
         };
         return MtxYearView;
     }());
+    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
     MtxYearView.decorators = [
         { type: core.Component, args: [{
                     selector: 'mtx-year-view',
-                    template: "<table class=\"mtx-calendar-table\">\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\"\n         role=\"grid\"></tbody>\n</table>\n",
+                    template: "<table class=\"mtx-calendar-table\" role=\"grid\">\n  <thead class=\"mtx-calendar-table-header\"></thead>\n  <tbody mtx-calendar-body\n         (@slideCalendar.done)=\"_calendarStateDone()\"\n         [@slideCalendar]=\"_calendarState\"\n         [label]=\"_yearLabel\"\n         [rows]=\"_months\"\n         [todayValue]=\"_todayMonth!\"\n         [labelMinRequiredCells]=\"2\"\n         [numCols]=\"4\"\n         [activeCell]=\"_adapter.getMonth(activeDate)\"\n         [selectedValue]=\"_selectedMonth!\"\n         (selectedValueChange)=\"_monthSelected($event)\"\n         [allowDisabledSelection]=\"true\"></tbody>\n</table>\n",
                     animations: [slideCalendar],
                     encapsulation: core.ViewEncapsulation.None,
                     changeDetection: core.ChangeDetectionStrategy.OnPush
                 },] }
     ];
-    /** @nocollapse */
+    /**
+     * @type {function(): !Array<(null|{
+     *   type: ?,
+     *   decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
+     * })>}
+     * @nocollapse
+     */
     MtxYearView.ctorParameters = function () { return [
         { type: core$1.DatetimeAdapter, decorators: [{ type: core.Optional }] },
         { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [core$1.MTX_DATETIME_FORMATS,] }] }
     ]; };
+    /** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
     MtxYearView.propDecorators = {
         _userSelection: [{ type: core.Output }],
         type: [{ type: core.Input }],
@@ -2421,6 +2527,7 @@
         }
         return MtxDatetimepickerModule;
     }());
+    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
     MtxDatetimepickerModule.decorators = [
         { type: core.NgModule, args: [{
                     imports: [common.CommonModule, button.MatButtonModule, icon.MatIconModule, overlay.OverlayModule, a11y.A11yModule],