@angular/material 7.0.4 → 7.2.1

package/bundles/material-datepicker.umd.js

@@ -42,7 +42,7 @@ function __extends(d, b) {
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 
 /**
@@ -58,7 +58,7 @@ function createMissingDateImplError(provider) {
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /**
  * Datepicker data that requires internationalization.
@@ -120,7 +120,7 @@ var MatDatepickerIntl = /** @class */ (function () {
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /**
  * An internal class that represents the data corresponding to a single calendar cell.
@@ -131,11 +131,12 @@ var   /**
  * \@docs-private
  */
 MatCalendarCell = /** @class */ (function () {
-    function MatCalendarCell(value, displayValue, ariaLabel, enabled) {
+    function MatCalendarCell(value, displayValue, ariaLabel, enabled, cssClasses) {
         this.value = value;
         this.displayValue = displayValue;
         this.ariaLabel = ariaLabel;
         this.enabled = enabled;
+        this.cssClasses = cssClasses;
     }
     return MatCalendarCell;
 }());
@@ -178,19 +179,28 @@ var MatCalendarBody = /** @class */ (function () {
             this.selectedValueChange.emit(cell.value);
         }
     };
-    Object.defineProperty(MatCalendarBody.prototype, "_firstRowOffset", {
-        /** The number of blank cells to put at the beginning for the first row. */
-        get: /**
-         * The number of blank cells to put at the beginning for the first row.
-         * @return {?}
-         */
-        function () {
-            return this.rows && this.rows.length && this.rows[0].length ?
-                this.numCols - this.rows[0].length : 0;
-        },
-        enumerable: true,
-        configurable: true
-    });
+    /**
+     * @param {?} changes
+     * @return {?}
+     */
+    MatCalendarBody.prototype.ngOnChanges = /**
+     * @param {?} changes
+     * @return {?}
+     */
+    function (changes) {
+        /** @type {?} */
+        var columnChanges = changes.numCols;
+        var _a = this, rows = _a.rows, numCols = _a.numCols;
+        if (changes.rows || columnChanges) {
+            this._firstRowOffset = rows && rows.length && rows[0].length ? numCols - rows[0].length : 0;
+        }
+        if (changes.cellAspectRatio || columnChanges || !this._cellPadding) {
+            this._cellPadding = 50 * this.cellAspectRatio / numCols + "%";
+        }
+        if (columnChanges || !this._cellWidth) {
+            this._cellWidth = 100 / numCols + "%";
+        }
+    };
     /**
      * @param {?} rowIndex
      * @param {?} colIndex
@@ -233,8 +243,8 @@ var MatCalendarBody = /** @class */ (function () {
     };
     MatCalendarBody.decorators = [
         { type: core.Component, args: [{selector: '[mat-calendar-body]',
-                    template: "<tr *ngIf=\"_firstRowOffset < labelMinRequiredCells\" aria-hidden=\"true\"><td class=\"mat-calendar-body-label\" [attr.colspan]=\"numCols\" [style.paddingTop.%]=\"50 * cellAspectRatio / numCols\" [style.paddingBottom.%]=\"50 * cellAspectRatio / numCols\">{{label}}</td></tr><tr *ngFor=\"let row of rows; let rowIndex = index\" role=\"row\"><td *ngIf=\"rowIndex === 0 && _firstRowOffset\" aria-hidden=\"true\" class=\"mat-calendar-body-label\" [attr.colspan]=\"_firstRowOffset\" [style.paddingTop.%]=\"50 * cellAspectRatio / numCols\" [style.paddingBottom.%]=\"50 * cellAspectRatio / numCols\">{{_firstRowOffset >= labelMinRequiredCells ? label : ''}}</td><td *ngFor=\"let item of row; let colIndex = index\" role=\"gridcell\" class=\"mat-calendar-body-cell\" [tabindex]=\"_isActiveCell(rowIndex, colIndex) ? 0 : -1\" [class.mat-calendar-body-disabled]=\"!item.enabled\" [class.mat-calendar-body-active]=\"_isActiveCell(rowIndex, colIndex)\" [attr.aria-label]=\"item.ariaLabel\" [attr.aria-disabled]=\"!item.enabled || null\" [attr.aria-selected]=\"selectedValue === item.value\" (click)=\"_cellClicked(item)\" [style.width.%]=\"100 / numCols\" [style.paddingTop.%]=\"50 * cellAspectRatio / numCols\" [style.paddingBottom.%]=\"50 * cellAspectRatio / numCols\"><div class=\"mat-calendar-body-cell-content\" [class.mat-calendar-body-selected]=\"selectedValue === item.value\" [class.mat-calendar-body-today]=\"todayValue === item.value\">{{item.displayValue}}</div></td></tr>",
-                    styles: [".mat-calendar-body{min-width:224px}.mat-calendar-body-label{height:0;line-height:0;text-align:left;padding-left:4.71429%;padding-right:4.71429%}.mat-calendar-body-cell{position:relative;height:0;line-height:0;text-align:center;outline:0;cursor:pointer}.mat-calendar-body-disabled{cursor:default}.mat-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%;line-height:1;border-width:1px;border-style:solid;border-radius:999px}@media screen and (-ms-high-contrast:active){.mat-calendar-body-cell-content{border:none}}@media screen and (-ms-high-contrast:active){.mat-calendar-body-selected,.mat-datepicker-popup:not(:empty){outline:solid 1px}.mat-calendar-body-today{outline:dotted 1px}}[dir=rtl] .mat-calendar-body-label{text-align:right}"],
+                    template: "<tr *ngIf=\"_firstRowOffset < labelMinRequiredCells\" aria-hidden=\"true\"><td class=\"mat-calendar-body-label\" [attr.colspan]=\"numCols\" [style.paddingTop]=\"_cellPadding\" [style.paddingBottom]=\"_cellPadding\">{{label}}</td></tr><tr *ngFor=\"let row of rows; let rowIndex = index\" role=\"row\"><td *ngIf=\"rowIndex === 0 && _firstRowOffset\" aria-hidden=\"true\" class=\"mat-calendar-body-label\" [attr.colspan]=\"_firstRowOffset\" [style.paddingTop]=\"_cellPadding\" [style.paddingBottom]=\"_cellPadding\">{{_firstRowOffset >= labelMinRequiredCells ? label : ''}}</td><td *ngFor=\"let item of row; let colIndex = index\" role=\"gridcell\" class=\"mat-calendar-body-cell\" [ngClass]=\"item.cssClasses\" [tabindex]=\"_isActiveCell(rowIndex, colIndex) ? 0 : -1\" [class.mat-calendar-body-disabled]=\"!item.enabled\" [class.mat-calendar-body-active]=\"_isActiveCell(rowIndex, colIndex)\" [attr.aria-label]=\"item.ariaLabel\" [attr.aria-disabled]=\"!item.enabled || null\" [attr.aria-selected]=\"selectedValue === item.value\" (click)=\"_cellClicked(item)\" [style.width]=\"_cellWidth\" [style.paddingTop]=\"_cellPadding\" [style.paddingBottom]=\"_cellPadding\"><div class=\"mat-calendar-body-cell-content\" [class.mat-calendar-body-selected]=\"selectedValue === item.value\" [class.mat-calendar-body-today]=\"todayValue === item.value\">{{item.displayValue}}</div></td></tr>",
+                    styles: [".mat-calendar-body{min-width:224px}.mat-calendar-body-label{height:0;line-height:0;text-align:left;padding-left:4.71429%;padding-right:4.71429%}.mat-calendar-body-cell{position:relative;height:0;line-height:0;text-align:center;outline:0;cursor:pointer}.mat-calendar-body-disabled{cursor:default}.mat-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%;line-height:1;border-width:1px;border-style:solid;border-radius:999px}@media (-ms-high-contrast:active){.mat-calendar-body-cell-content{border:none}}@media (-ms-high-contrast:active){.mat-calendar-body-selected,.mat-datepicker-popup:not(:empty){outline:solid 1px}.mat-calendar-body-today{outline:dotted 1px}}[dir=rtl] .mat-calendar-body-label{text-align:right}"],
                     host: {
                         'class': 'mat-calendar-body',
                         'role': 'grid',
@@ -266,7 +276,7 @@ var MatCalendarBody = /** @class */ (function () {
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /** @type {?} */
 var DAYS_PER_WEEK = 7;
@@ -305,6 +315,7 @@ var MatMonthView = /** @class */ (function () {
         var narrowWeekdays = this._dateAdapter.getDayOfWeekNames('narrow');
         /** @type {?} */
         var longWeekdays = this._dateAdapter.getDayOfWeekNames('long');
+        // Rotate the labels for days of the week based on the configured first day of the week.
         /** @type {?} */
         var weekdays = longWeekdays.map(function (long, i) {
             return { long: long, narrow: narrowWeekdays[i] };
@@ -434,6 +445,12 @@ var MatMonthView = /** @class */ (function () {
      * @return {?}
      */
     function (event) {
+        // TODO(mmalerba): We currently allow keyboard navigation to disabled dates, but just prevent
+        // disabled ones from being selected. This may not be ideal, we should look into whether
+        // navigation should skip over disabled dates, and if so, how to implement that efficiently.
+        // 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.
         /** @type {?} */
         var oldActiveDate = this._activeDate;
         /** @type {?} */
@@ -523,12 +540,15 @@ var MatMonthView = /** @class */ (function () {
     function () {
         this._matCalendarBody._focusActiveCell();
     };
+    /** Creates MatCalendarCells for the dates in this month. */
     /**
      * Creates MatCalendarCells for the dates in this month.
+     * @private
      * @return {?}
      */
     MatMonthView.prototype._createWeekCells = /**
      * Creates MatCalendarCells for the dates in this month.
+     * @private
      * @return {?}
      */
     function () {
@@ -548,17 +568,22 @@ var MatMonthView = /** @class */ (function () {
             var enabled = this._shouldEnableDate(date);
             /** @type {?} */
             var ariaLabel = this._dateAdapter.format(date, this._dateFormats.display.dateA11yLabel);
+            /** @type {?} */
+            var cellClasses = this.dateClass ? this.dateClass(date) : undefined;
             this._weeks[this._weeks.length - 1]
-                .push(new MatCalendarCell(i + 1, dateNames[i], ariaLabel, enabled));
+                .push(new MatCalendarCell(i + 1, dateNames[i], ariaLabel, enabled, cellClasses));
         }
     };
+    /** Date filter for the month */
     /**
      * Date filter for the month
+     * @private
      * @param {?} date
      * @return {?}
      */
     MatMonthView.prototype._shouldEnableDate = /**
      * Date filter for the month
+     * @private
      * @param {?} date
      * @return {?}
      */
@@ -571,12 +596,18 @@ var MatMonthView = /** @class */ (function () {
     /**
      * Gets the date in this month that the given Date falls on.
      * Returns null if the given Date is in another month.
+     */
+    /**
+     * Gets the date in this month that the given Date falls on.
+     * Returns null if the given Date is in another month.
+     * @private
      * @param {?} date
      * @return {?}
      */
     MatMonthView.prototype._getDateInCurrentMonth = /**
      * Gets the date in this month that the given Date falls on.
      * Returns null if the given Date is in another month.
+     * @private
      * @param {?} date
      * @return {?}
      */
@@ -584,14 +615,17 @@ var MatMonthView = /** @class */ (function () {
         return date && this._hasSameMonthAndYear(date, this.activeDate) ?
             this._dateAdapter.getDate(date) : null;
     };
+    /** Checks whether the 2 dates are non-null and fall within the same month of the same year. */
     /**
      * Checks whether the 2 dates are non-null and fall within the same month of the same year.
+     * @private
      * @param {?} d1
      * @param {?} d2
      * @return {?}
      */
     MatMonthView.prototype._hasSameMonthAndYear = /**
      * Checks whether the 2 dates are non-null and fall within the same month of the same year.
+     * @private
      * @param {?} d1
      * @param {?} d2
      * @return {?}
@@ -601,22 +635,31 @@ var MatMonthView = /** @class */ (function () {
             this._dateAdapter.getYear(d1) == this._dateAdapter.getYear(d2));
     };
     /**
+     * @param obj The object to check.
+     * @returns The given object if it is both a date instance and valid, otherwise null.
+     */
+    /**
+     * @private
      * @param {?} obj The object to check.
      * @return {?} The given object if it is both a date instance and valid, otherwise null.
      */
     MatMonthView.prototype._getValidDateOrNull = /**
+     * @private
      * @param {?} obj The object to check.
      * @return {?} The given object if it is both a date instance and valid, otherwise null.
      */
     function (obj) {
         return (this._dateAdapter.isDateInstance(obj) && this._dateAdapter.isValid(obj)) ? obj : null;
     };
+    /** Determines whether the user has the RTL layout direction. */
     /**
      * Determines whether the user has the RTL layout direction.
+     * @private
      * @return {?}
      */
     MatMonthView.prototype._isRtl = /**
      * Determines whether the user has the RTL layout direction.
+     * @private
      * @return {?}
      */
     function () {
@@ -643,6 +686,7 @@ var MatMonthView = /** @class */ (function () {
         minDate: [{ type: core.Input }],
         maxDate: [{ type: core.Input }],
         dateFilter: [{ type: core.Input }],
+        dateClass: [{ type: core.Input }],
         selectedChange: [{ type: core.Output }],
         _userSelection: [{ type: core.Output }],
         activeDateChange: [{ type: core.Output }],
@@ -653,7 +697,7 @@ var MatMonthView = /** @class */ (function () {
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /** @type {?} */
 var yearsPerPage = 24;
@@ -829,6 +873,12 @@ var MatMultiYearView = /** @class */ (function () {
      * @return {?}
      */
     function (event) {
+        // TODO(mmalerba): We currently allow keyboard navigation to disabled dates, but just prevent
+        // disabled ones from being selected. This may not be ideal, we should look into whether
+        // navigation should skip over disabled dates, and if so, how to implement that efficiently.
+        // 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.
         /** @type {?} */
         var oldActiveDate = this._activeDate;
         /** @type {?} */
@@ -896,13 +946,16 @@ var MatMultiYearView = /** @class */ (function () {
     function () {
         this._matCalendarBody._focusActiveCell();
     };
+    /** Creates an MatCalendarCell for the given year. */
     /**
      * Creates an MatCalendarCell for the given year.
+     * @private
      * @param {?} year
      * @return {?}
      */
     MatMultiYearView.prototype._createCellForYear = /**
      * Creates an MatCalendarCell for the given year.
+     * @private
      * @param {?} year
      * @return {?}
      */
@@ -911,13 +964,16 @@ var MatMultiYearView = /** @class */ (function () {
         var yearName = this._dateAdapter.getYearName(this._dateAdapter.createDate(year, 0, 1));
         return new MatCalendarCell(year, yearName, yearName, this._shouldEnableYear(year));
     };
+    /** Whether the given year is enabled. */
     /**
      * Whether the given year is enabled.
+     * @private
      * @param {?} year
      * @return {?}
      */
     MatMultiYearView.prototype._shouldEnableYear = /**
      * Whether the given year is enabled.
+     * @private
      * @param {?} year
      * @return {?}
      */
@@ -943,22 +999,31 @@ var MatMultiYearView = /** @class */ (function () {
         return false;
     };
     /**
+     * @param obj The object to check.
+     * @returns The given object if it is both a date instance and valid, otherwise null.
+     */
+    /**
+     * @private
      * @param {?} obj The object to check.
      * @return {?} The given object if it is both a date instance and valid, otherwise null.
      */
     MatMultiYearView.prototype._getValidDateOrNull = /**
+     * @private
      * @param {?} obj The object to check.
      * @return {?} The given object if it is both a date instance and valid, otherwise null.
      */
     function (obj) {
         return (this._dateAdapter.isDateInstance(obj) && this._dateAdapter.isValid(obj)) ? obj : null;
     };
+    /** Determines whether the user has the RTL layout direction. */
     /**
      * Determines whether the user has the RTL layout direction.
+     * @private
      * @return {?}
      */
     MatMultiYearView.prototype._isRtl = /**
      * Determines whether the user has the RTL layout direction.
+     * @private
      * @return {?}
      */
     function () {
@@ -994,7 +1059,7 @@ var MatMultiYearView = /** @class */ (function () {
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /**
  * An internal component used to display a single year in the datepicker.
@@ -1143,6 +1208,12 @@ var MatYearView = /** @class */ (function () {
      * @return {?}
      */
     function (event) {
+        // TODO(mmalerba): We currently allow keyboard navigation to disabled dates, but just prevent
+        // disabled ones from being selected. This may not be ideal, we should look into whether
+        // navigation should skip over disabled dates, and if so, how to implement that efficiently.
+        // 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.
         /** @type {?} */
         var oldActiveDate = this._activeDate;
         /** @type {?} */
@@ -1224,12 +1295,18 @@ var MatYearView = /** @class */ (function () {
     /**
      * Gets the month in this year that the given Date falls on.
      * Returns null if the given Date is in another year.
+     */
+    /**
+     * Gets the month in this year that the given Date falls on.
+     * Returns null if the given Date is in another year.
+     * @private
      * @param {?} date
      * @return {?}
      */
     MatYearView.prototype._getMonthInCurrentYear = /**
      * Gets the month in this year that the given Date falls on.
      * Returns null if the given Date is in another year.
+     * @private
      * @param {?} date
      * @return {?}
      */
@@ -1237,14 +1314,17 @@ var MatYearView = /** @class */ (function () {
         return date && this._dateAdapter.getYear(date) == this._dateAdapter.getYear(this.activeDate) ?
             this._dateAdapter.getMonth(date) : null;
     };
+    /** Creates an MatCalendarCell for the given month. */
     /**
      * Creates an MatCalendarCell for the given month.
+     * @private
      * @param {?} month
      * @param {?} monthName
      * @return {?}
      */
     MatYearView.prototype._createCellForMonth = /**
      * Creates an MatCalendarCell for the given month.
+     * @private
      * @param {?} month
      * @param {?} monthName
      * @return {?}
@@ -1254,13 +1334,16 @@ var MatYearView = /** @class */ (function () {
         var ariaLabel = this._dateAdapter.format(this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), month, 1), this._dateFormats.display.monthYearA11yLabel);
         return new MatCalendarCell(month, monthName.toLocaleUpperCase(), ariaLabel, this._shouldEnableMonth(month));
     };
+    /** Whether the given month is enabled. */
     /**
      * Whether the given month is enabled.
+     * @private
      * @param {?} month
      * @return {?}
      */
     MatYearView.prototype._shouldEnableMonth = /**
      * Whether the given month is enabled.
+     * @private
      * @param {?} month
      * @return {?}
      */
@@ -1288,6 +1371,11 @@ var MatYearView = /** @class */ (function () {
     /**
      * Tests whether the combination month/year is after this.maxDate, considering
      * just the month and year of this.maxDate
+     */
+    /**
+     * Tests whether the combination month/year is after this.maxDate, considering
+     * just the month and year of this.maxDate
+     * @private
      * @param {?} year
      * @param {?} month
      * @return {?}
@@ -1295,6 +1383,7 @@ var MatYearView = /** @class */ (function () {
     MatYearView.prototype._isYearAndMonthAfterMaxDate = /**
      * Tests whether the combination month/year is after this.maxDate, considering
      * just the month and year of this.maxDate
+     * @private
      * @param {?} year
      * @param {?} month
      * @return {?}
@@ -1312,6 +1401,11 @@ var MatYearView = /** @class */ (function () {
     /**
      * Tests whether the combination month/year is before this.minDate, considering
      * just the month and year of this.minDate
+     */
+    /**
+     * Tests whether the combination month/year is before this.minDate, considering
+     * just the month and year of this.minDate
+     * @private
      * @param {?} year
      * @param {?} month
      * @return {?}
@@ -1319,6 +1413,7 @@ var MatYearView = /** @class */ (function () {
     MatYearView.prototype._isYearAndMonthBeforeMinDate = /**
      * Tests whether the combination month/year is before this.minDate, considering
      * just the month and year of this.minDate
+     * @private
      * @param {?} year
      * @param {?} month
      * @return {?}
@@ -1334,22 +1429,31 @@ var MatYearView = /** @class */ (function () {
         return false;
     };
     /**
+     * @param obj The object to check.
+     * @returns The given object if it is both a date instance and valid, otherwise null.
+     */
+    /**
+     * @private
      * @param {?} obj The object to check.
      * @return {?} The given object if it is both a date instance and valid, otherwise null.
      */
     MatYearView.prototype._getValidDateOrNull = /**
+     * @private
      * @param {?} obj The object to check.
      * @return {?} The given object if it is both a date instance and valid, otherwise null.
      */
     function (obj) {
         return (this._dateAdapter.isDateInstance(obj) && this._dateAdapter.isValid(obj)) ? obj : null;
     };
+    /** Determines whether the user has the RTL layout direction. */
     /**
      * Determines whether the user has the RTL layout direction.
+     * @private
      * @return {?}
      */
     MatYearView.prototype._isRtl = /**
      * Determines whether the user has the RTL layout direction.
+     * @private
      * @return {?}
      */
     function () {
@@ -1386,7 +1490,7 @@ var MatYearView = /** @class */ (function () {
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /**
  * Default header for MatCalendar
@@ -1538,14 +1642,17 @@ var MatCalendarHeader = /** @class */ (function () {
         return !this.calendar.maxDate ||
             !this._isSameView(this.calendar.activeDate, this.calendar.maxDate);
     };
+    /** Whether the two dates represent the same view in the current view mode (month or year). */
     /**
      * Whether the two dates represent the same view in the current view mode (month or year).
+     * @private
      * @param {?} date1
      * @param {?} date2
      * @return {?}
      */
     MatCalendarHeader.prototype._isSameView = /**
      * Whether the two dates represent the same view in the current view mode (month or year).
+     * @private
      * @param {?} date1
      * @param {?} date2
      * @return {?}
@@ -1786,7 +1893,7 @@ var MatCalendar = /** @class */ (function () {
      */
     function (changes) {
         /** @type {?} */
-        var change = changes["minDate"] || changes["maxDate"] || changes["dateFilter"];
+        var change = changes.minDate || changes.maxDate || changes.dateFilter;
         if (change && !change.firstChange) {
             /** @type {?} */
             var view = this._getCurrentViewComponent();
@@ -1894,22 +2001,31 @@ var MatCalendar = /** @class */ (function () {
         this.currentView = view;
     };
     /**
+     * @param obj The object to check.
+     * @returns The given object if it is both a date instance and valid, otherwise null.
+     */
+    /**
+     * @private
      * @param {?} obj The object to check.
      * @return {?} The given object if it is both a date instance and valid, otherwise null.
      */
     MatCalendar.prototype._getValidDateOrNull = /**
+     * @private
      * @param {?} obj The object to check.
      * @return {?} The given object if it is both a date instance and valid, otherwise null.
      */
     function (obj) {
         return (this._dateAdapter.isDateInstance(obj) && this._dateAdapter.isValid(obj)) ? obj : null;
     };
+    /** Returns the component instance that corresponds to the current calendar view. */
     /**
      * Returns the component instance that corresponds to the current calendar view.
+     * @private
      * @return {?}
      */
     MatCalendar.prototype._getCurrentViewComponent = /**
      * Returns the component instance that corresponds to the current calendar view.
+     * @private
      * @return {?}
      */
     function () {
@@ -1917,7 +2033,7 @@ var MatCalendar = /** @class */ (function () {
     };
     MatCalendar.decorators = [
         { type: core.Component, args: [{selector: 'mat-calendar',
-                    template: "<ng-template [cdkPortalOutlet]=\"_calendarHeaderPortal\"></ng-template><div class=\"mat-calendar-content\" [ngSwitch]=\"currentView\" cdkMonitorSubtreeFocus tabindex=\"-1\"><mat-month-view *ngSwitchCase=\"'month'\" [(activeDate)]=\"activeDate\" [selected]=\"selected\" [dateFilter]=\"dateFilter\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" (selectedChange)=\"_dateSelected($event)\" (_userSelection)=\"_userSelected()\"></mat-month-view><mat-year-view *ngSwitchCase=\"'year'\" [(activeDate)]=\"activeDate\" [selected]=\"selected\" [dateFilter]=\"dateFilter\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" (monthSelected)=\"_monthSelectedInYearView($event)\" (selectedChange)=\"_goToDateInView($event, 'month')\"></mat-year-view><mat-multi-year-view *ngSwitchCase=\"'multi-year'\" [(activeDate)]=\"activeDate\" [selected]=\"selected\" [dateFilter]=\"dateFilter\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" (yearSelected)=\"_yearSelectedInMultiYearView($event)\" (selectedChange)=\"_goToDateInView($event, 'year')\"></mat-multi-year-view></div>",
+                    template: "<ng-template [cdkPortalOutlet]=\"_calendarHeaderPortal\"></ng-template><div class=\"mat-calendar-content\" [ngSwitch]=\"currentView\" cdkMonitorSubtreeFocus tabindex=\"-1\"><mat-month-view *ngSwitchCase=\"'month'\" [(activeDate)]=\"activeDate\" [selected]=\"selected\" [dateFilter]=\"dateFilter\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" [dateClass]=\"dateClass\" (selectedChange)=\"_dateSelected($event)\" (_userSelection)=\"_userSelected()\"></mat-month-view><mat-year-view *ngSwitchCase=\"'year'\" [(activeDate)]=\"activeDate\" [selected]=\"selected\" [dateFilter]=\"dateFilter\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" (monthSelected)=\"_monthSelectedInYearView($event)\" (selectedChange)=\"_goToDateInView($event, 'month')\"></mat-year-view><mat-multi-year-view *ngSwitchCase=\"'multi-year'\" [(activeDate)]=\"activeDate\" [selected]=\"selected\" [dateFilter]=\"dateFilter\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" (yearSelected)=\"_yearSelectedInMultiYearView($event)\" (selectedChange)=\"_goToDateInView($event, 'year')\"></mat-multi-year-view></div>",
                     styles: [".mat-calendar{display:block}.mat-calendar-header{padding:8px 8px 0 8px}.mat-calendar-content{padding:0 8px 8px 8px;outline:0}.mat-calendar-controls{display:flex;margin:5% calc(33% / 7 - 16px)}.mat-calendar-spacer{flex:1 1 auto}.mat-calendar-period-button{min-width:0}.mat-calendar-arrow{display:inline-block;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top-width:5px;border-top-style:solid;margin:0 0 0 5px;vertical-align:middle}.mat-calendar-arrow.mat-calendar-invert{transform:rotate(180deg)}[dir=rtl] .mat-calendar-arrow{margin:0 5px 0 0}.mat-calendar-next-button,.mat-calendar-previous-button{position:relative}.mat-calendar-next-button::after,.mat-calendar-previous-button::after{top:0;left:0;right:0;bottom:0;position:absolute;content:'';margin:15.5px;border:0 solid currentColor;border-top-width:2px}[dir=rtl] .mat-calendar-next-button,[dir=rtl] .mat-calendar-previous-button{transform:rotate(180deg)}.mat-calendar-previous-button::after{border-left-width:2px;transform:translateX(2px) rotate(-45deg)}.mat-calendar-next-button::after{border-right-width:2px;transform:translateX(-2px) rotate(45deg)}.mat-calendar-table{border-spacing:0;border-collapse:collapse;width:100%}.mat-calendar-table-header th{text-align:center;padding:0 0 8px 0}.mat-calendar-table-header-divider{position:relative;height:1px}.mat-calendar-table-header-divider::after{content:'';position:absolute;top:0;left:-8px;right:-8px;height:1px}"],
                     host: {
                         'class': 'mat-calendar',
@@ -1942,6 +2058,7 @@ var MatCalendar = /** @class */ (function () {
         minDate: [{ type: core.Input }],
         maxDate: [{ type: core.Input }],
         dateFilter: [{ type: core.Input }],
+        dateClass: [{ type: core.Input }],
         selectedChange: [{ type: core.Output }],
         yearSelected: [{ type: core.Output }],
         monthSelected: [{ type: core.Output }],
@@ -1955,14 +2072,17 @@ var MatCalendar = /** @class */ (function () {
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-/** *
+/**
  * Animations used by the Material datepicker.
  * \@docs-private
-  @type {?} */
+ * @type {?}
+ */
 var matDatepickerAnimations = {
-    /** Transforms the height of the datepicker's calendar. */
+    /**
+     * Transforms the height of the datepicker's calendar.
+     */
     transformPanel: animations.trigger('transformPanel', [
         animations.state('void', animations.style({
             opacity: 0,
@@ -1974,7 +2094,9 @@ var matDatepickerAnimations = {
         }))),
         animations.transition('* => void', animations.animate('100ms linear', animations.style({ opacity: 0 })))
     ]),
-    /** Fades in the content of the calendar. */
+    /**
+     * Fades in the content of the calendar.
+     */
     fadeInCalendar: animations.trigger('fadeInCalendar', [
         animations.state('void', animations.style({ opacity: 0 })),
         animations.state('enter', animations.style({ opacity: 1 })),
@@ -1986,15 +2108,17 @@ var matDatepickerAnimations = {
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-/** *
+/**
  * Used to generate a unique ID for each datepicker instance.
-  @type {?} */
+ * @type {?}
+ */
 var datepickerUid = 0;
-/** *
+/**
  * Injection token that determines the scroll handling while the calendar is open.
-  @type {?} */
+ * @type {?}
+ */
 var MAT_DATEPICKER_SCROLL_STRATEGY = new core.InjectionToken('mat-datepicker-scroll-strategy');
 /**
  * \@docs-private
@@ -2004,18 +2128,22 @@ var MAT_DATEPICKER_SCROLL_STRATEGY = new core.InjectionToken('mat-datepicker-scr
 function MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY(overlay$$1) {
     return function () { return overlay$$1.scrollStrategies.reposition(); };
 }
-/** *
+/**
  * \@docs-private
-  @type {?} */
+ * @type {?}
+ */
 var MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER = {
     provide: MAT_DATEPICKER_SCROLL_STRATEGY,
     deps: [overlay.Overlay],
     useFactory: MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY,
 };
+// Boilerplate for applying mixins to MatDatepickerContent.
 /**
  * \@docs-private
  */
-var   /**
+var   
+// Boilerplate for applying mixins to MatDatepickerContent.
+/**
  * \@docs-private
  */
 MatDatepickerContentBase = /** @class */ (function () {
@@ -2050,7 +2178,7 @@ var MatDatepickerContent = /** @class */ (function (_super) {
     };
     MatDatepickerContent.decorators = [
         { type: core.Component, args: [{selector: 'mat-datepicker-content',
-                    template: "<mat-calendar cdkTrapFocus [id]=\"datepicker.id\" [ngClass]=\"datepicker.panelClass\" [startAt]=\"datepicker.startAt\" [startView]=\"datepicker.startView\" [minDate]=\"datepicker._minDate\" [maxDate]=\"datepicker._maxDate\" [dateFilter]=\"datepicker._dateFilter\" [headerComponent]=\"datepicker.calendarHeaderComponent\" [selected]=\"datepicker._selected\" [@fadeInCalendar]=\"'enter'\" (selectedChange)=\"datepicker.select($event)\" (yearSelected)=\"datepicker._selectYear($event)\" (monthSelected)=\"datepicker._selectMonth($event)\" (_userSelection)=\"datepicker.close()\"></mat-calendar>",
+                    template: "<mat-calendar cdkTrapFocus [id]=\"datepicker.id\" [ngClass]=\"datepicker.panelClass\" [startAt]=\"datepicker.startAt\" [startView]=\"datepicker.startView\" [minDate]=\"datepicker._minDate\" [maxDate]=\"datepicker._maxDate\" [dateFilter]=\"datepicker._dateFilter\" [headerComponent]=\"datepicker.calendarHeaderComponent\" [selected]=\"datepicker._selected\" [dateClass]=\"datepicker.dateClass\" [@fadeInCalendar]=\"'enter'\" (selectedChange)=\"datepicker.select($event)\" (yearSelected)=\"datepicker._selectYear($event)\" (monthSelected)=\"datepicker._selectMonth($event)\" (_userSelection)=\"datepicker.close()\"></mat-calendar>",
                     styles: [".mat-datepicker-content{display:block;border-radius:4px}.mat-datepicker-content .mat-calendar{width:296px;height:354px}.mat-datepicker-content-touch{display:block;max-height:80vh;overflow:auto;margin:-24px}.mat-datepicker-content-touch .mat-calendar{min-width:250px;min-height:312px;max-width:750px;max-height:788px}@media all and (orientation:landscape){.mat-datepicker-content-touch .mat-calendar{width:64vh;height:80vh}}@media all and (orientation:portrait){.mat-datepicker-content-touch .mat-calendar{width:80vw;height:100vw}}"],
                     host: {
                         'class': 'mat-datepicker-content',
@@ -2076,6 +2204,9 @@ var MatDatepickerContent = /** @class */ (function (_super) {
     };
     return MatDatepickerContent;
 }(_MatDatepickerContentMixinBase));
+// TODO(mmalerba): We use a component instead of a directive here so the user can use implicit
+// template reference variables (e.g. #d vs #d="matDatepicker"). We can change this to a directive
+// if angular adds support for `exportAs: '$implicit'` on directives.
 /**
  * Component responsible for managing the datepicker popup/dialog.
  * @template D
@@ -2446,12 +2577,15 @@ var MatDatepicker = /** @class */ (function () {
             completeClose();
         }
     };
+    /** Open the calendar as a dialog. */
     /**
      * Open the calendar as a dialog.
+     * @private
      * @return {?}
      */
     MatDatepicker.prototype._openAsDialog = /**
      * Open the calendar as a dialog.
+     * @private
      * @return {?}
      */
     function () {
@@ -2472,12 +2606,15 @@ var MatDatepicker = /** @class */ (function () {
         this._dialogRef.componentInstance.datepicker = this;
         this._setColor();
     };
+    /** Open the calendar as a popup. */
     /**
      * Open the calendar as a popup.
+     * @private
      * @return {?}
      */
     MatDatepicker.prototype._openAsPopup = /**
      * Open the calendar as a popup.
+     * @private
      * @return {?}
      */
     function () {
@@ -2498,12 +2635,15 @@ var MatDatepicker = /** @class */ (function () {
             });
         }
     };
+    /** Create the popup. */
     /**
      * Create the popup.
+     * @private
      * @return {?}
      */
     MatDatepicker.prototype._createPopup = /**
      * Create the popup.
+     * @private
      * @return {?}
      */
     function () {
@@ -2525,12 +2665,15 @@ var MatDatepicker = /** @class */ (function () {
                 (_this._datepickerInput && event.altKey && event.keyCode === keycodes.UP_ARROW);
         }))).subscribe(function () { return _this.close(); });
     };
+    /** Create the popup PositionStrategy. */
     /**
      * Create the popup PositionStrategy.
+     * @private
      * @return {?}
      */
     MatDatepicker.prototype._createPopupPositionStrategy = /**
      * Create the popup PositionStrategy.
+     * @private
      * @return {?}
      */
     function () {
@@ -2568,22 +2711,31 @@ var MatDatepicker = /** @class */ (function () {
         ]);
     };
     /**
+     * @param obj The object to check.
+     * @returns The given object if it is both a date instance and valid, otherwise null.
+     */
+    /**
+     * @private
      * @param {?} obj The object to check.
      * @return {?} The given object if it is both a date instance and valid, otherwise null.
      */
     MatDatepicker.prototype._getValidDateOrNull = /**
+     * @private
      * @param {?} obj The object to check.
      * @return {?} The given object if it is both a date instance and valid, otherwise null.
      */
     function (obj) {
         return (this._dateAdapter.isDateInstance(obj) && this._dateAdapter.isValid(obj)) ? obj : null;
     };
+    /** Passes the current theme color along to the calendar overlay. */
     /**
      * Passes the current theme color along to the calendar overlay.
+     * @private
      * @return {?}
      */
     MatDatepicker.prototype._setColor = /**
      * Passes the current theme color along to the calendar overlay.
+     * @private
      * @return {?}
      */
     function () {
@@ -2625,6 +2777,7 @@ var MatDatepicker = /** @class */ (function () {
         yearSelected: [{ type: core.Output }],
         monthSelected: [{ type: core.Output }],
         panelClass: [{ type: core.Input }],
+        dateClass: [{ type: core.Input }],
         openedStream: [{ type: core.Output, args: ['opened',] }],
         closedStream: [{ type: core.Output, args: ['closed',] }],
         opened: [{ type: core.Input }]
@@ -2634,19 +2787,21 @@ var MatDatepicker = /** @class */ (function () {
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-/** *
+/**
  * \@docs-private
-  @type {?} */
+ * @type {?}
+ */
 var MAT_DATEPICKER_VALUE_ACCESSOR = {
     provide: forms.NG_VALUE_ACCESSOR,
     useExisting: core.forwardRef(function () { return MatDatepickerInput; }),
     multi: true
 };
-/** *
+/**
  * \@docs-private
-  @type {?} */
+ * @type {?}
+ */
 var MAT_DATEPICKER_VALIDATORS = {
     provide: forms.NG_VALIDATORS,
     useExisting: core.forwardRef(function () { return MatDatepickerInput; }),
@@ -2965,11 +3120,14 @@ var MatDatepickerInput = /** @class */ (function () {
         return this._formField ? this._formField.getConnectedOverlayOrigin() : this._elementRef;
     };
     // Implemented as part of ControlValueAccessor.
+    // Implemented as part of ControlValueAccessor.
     /**
      * @param {?} value
      * @return {?}
      */
-    MatDatepickerInput.prototype.writeValue = /**
+    MatDatepickerInput.prototype.writeValue = 
+    // Implemented as part of ControlValueAccessor.
+    /**
      * @param {?} value
      * @return {?}
      */
@@ -2977,11 +3135,14 @@ var MatDatepickerInput = /** @class */ (function () {
         this.value = value;
     };
     // Implemented as part of ControlValueAccessor.
+    // Implemented as part of ControlValueAccessor.
     /**
      * @param {?} fn
      * @return {?}
      */
-    MatDatepickerInput.prototype.registerOnChange = /**
+    MatDatepickerInput.prototype.registerOnChange = 
+    // Implemented as part of ControlValueAccessor.
+    /**
      * @param {?} fn
      * @return {?}
      */
@@ -2989,11 +3150,14 @@ var MatDatepickerInput = /** @class */ (function () {
         this._cvaOnChange = fn;
     };
     // Implemented as part of ControlValueAccessor.
+    // Implemented as part of ControlValueAccessor.
     /**
      * @param {?} fn
      * @return {?}
      */
-    MatDatepickerInput.prototype.registerOnTouched = /**
+    MatDatepickerInput.prototype.registerOnTouched = 
+    // Implemented as part of ControlValueAccessor.
+    /**
      * @param {?} fn
      * @return {?}
      */
@@ -3001,11 +3165,14 @@ var MatDatepickerInput = /** @class */ (function () {
         this._onTouched = fn;
     };
     // Implemented as part of ControlValueAccessor.
+    // Implemented as part of ControlValueAccessor.
     /**
      * @param {?} isDisabled
      * @return {?}
      */
-    MatDatepickerInput.prototype.setDisabledState = /**
+    MatDatepickerInput.prototype.setDisabledState = 
+    // Implemented as part of ControlValueAccessor.
+    /**
      * @param {?} isDisabled
      * @return {?}
      */
@@ -3085,13 +3252,16 @@ var MatDatepickerInput = /** @class */ (function () {
         }
         this._onTouched();
     };
+    /** Formats a value and sets it on the input element. */
     /**
      * Formats a value and sets it on the input element.
+     * @private
      * @param {?} value
      * @return {?}
      */
     MatDatepickerInput.prototype._formatValue = /**
      * Formats a value and sets it on the input element.
+     * @private
      * @param {?} value
      * @return {?}
      */
@@ -3100,10 +3270,16 @@ var MatDatepickerInput = /** @class */ (function () {
             value ? this._dateAdapter.format(value, this._dateFormats.display.dateInput) : '';
     };
     /**
+     * @param obj The object to check.
+     * @returns The given object if it is both a date instance and valid, otherwise null.
+     */
+    /**
+     * @private
      * @param {?} obj The object to check.
      * @return {?} The given object if it is both a date instance and valid, otherwise null.
      */
     MatDatepickerInput.prototype._getValidDateOrNull = /**
+     * @private
      * @param {?} obj The object to check.
      * @return {?} The given object if it is both a date instance and valid, otherwise null.
      */
@@ -3154,7 +3330,7 @@ var MatDatepickerInput = /** @class */ (function () {
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /**
  * Can be used to override the icon of a `matDatepickerToggle`.
@@ -3209,7 +3385,7 @@ var MatDatepickerToggle = /** @class */ (function () {
      * @return {?}
      */
     function (changes) {
-        if (changes["datepicker"]) {
+        if (changes.datepicker) {
             this._watchStateChanges();
         }
     };
@@ -3246,9 +3422,11 @@ var MatDatepickerToggle = /** @class */ (function () {
         }
     };
     /**
+     * @private
      * @return {?}
      */
     MatDatepickerToggle.prototype._watchStateChanges = /**
+     * @private
      * @return {?}
      */
     function () {
@@ -3267,7 +3445,7 @@ var MatDatepickerToggle = /** @class */ (function () {
     };
     MatDatepickerToggle.decorators = [
         { type: core.Component, args: [{selector: 'mat-datepicker-toggle',
-                    template: "<button #button mat-icon-button type=\"button\" aria-haspopup=\"true\" [attr.aria-label]=\"_intl.openCalendarLabel\" [attr.tabindex]=\"disabled ? -1 : tabIndex\" [disabled]=\"disabled\" [disableRipple]=\"disableRipple\" (click)=\"_open($event)\"><svg *ngIf=\"!_customIcon\" class=\"mat-datepicker-toggle-default-icon\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z\"/></svg><ng-content select=\"[matDatepickerToggleIcon]\"></ng-content></button>",
+                    template: "<button #button mat-icon-button type=\"button\" aria-haspopup=\"true\" [attr.aria-label]=\"_intl.openCalendarLabel\" [attr.tabindex]=\"disabled ? -1 : tabIndex\" [disabled]=\"disabled\" [disableRipple]=\"disableRipple\" (click)=\"_open($event)\"><svg *ngIf=\"!_customIcon\" class=\"mat-datepicker-toggle-default-icon\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\"><path d=\"M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z\"/></svg><ng-content select=\"[matDatepickerToggleIcon]\"></ng-content></button>",
                     styles: [".mat-form-field-appearance-legacy .mat-form-field-prefix .mat-datepicker-toggle-default-icon,.mat-form-field-appearance-legacy .mat-form-field-suffix .mat-datepicker-toggle-default-icon{width:1em}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-datepicker-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-datepicker-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 .mat-datepicker-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button .mat-datepicker-toggle-default-icon{margin:auto}"],
                     host: {
                         'class': 'mat-datepicker-toggle',
@@ -3303,7 +3481,7 @@ var MatDatepickerToggle = /** @class */ (function () {
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var MatDatepickerModule = /** @class */ (function () {
     function MatDatepickerModule() {