@angular/material 10.1.1 → 10.2.0

package/bundles/material-datepicker.umd.js

@@ -58,12 +58,12 @@
         MatDatepickerIntl.prototype.formatYearRange = function (start, end) {
             return start + " \u2013 " + end;
         };
-        MatDatepickerIntl.ɵprov = i0.ɵɵdefineInjectable({ factory: function MatDatepickerIntl_Factory() { return new MatDatepickerIntl(); }, token: MatDatepickerIntl, providedIn: "root" });
-        MatDatepickerIntl.decorators = [
-            { type: i0.Injectable, args: [{ providedIn: 'root' },] }
-        ];
         return MatDatepickerIntl;
     }());
+    MatDatepickerIntl.ɵprov = i0.ɵɵdefineInjectable({ factory: function MatDatepickerIntl_Factory() { return new MatDatepickerIntl(); }, token: MatDatepickerIntl, providedIn: "root" });
+    MatDatepickerIntl.decorators = [
+        { type: i0.Injectable, args: [{ providedIn: 'root' },] }
+    ];
 
     /**
      * @license
@@ -165,8 +165,8 @@
             }
         };
         /** Returns whether a cell should be marked as selected. */
-        MatCalendarBody.prototype._isSelected = function (cell) {
-            return this.startValue === cell.compareValue || this.endValue === cell.compareValue;
+        MatCalendarBody.prototype._isSelected = function (value) {
+            return this.startValue === value || this.endValue === value;
         };
         MatCalendarBody.prototype.ngOnChanges = function (changes) {
             var columnChanges = changes['numCols'];
@@ -202,7 +202,7 @@
             var _this = this;
             if (movePreview === void 0) { movePreview = true; }
             this._ngZone.runOutsideAngular(function () {
-                _this._ngZone.onStable.asObservable().pipe(operators.take(1)).subscribe(function () {
+                _this._ngZone.onStable.pipe(operators.take(1)).subscribe(function () {
                     var activeCell = _this._elementRef.nativeElement.querySelector('.mat-calendar-body-active');
                     if (activeCell) {
                         if (!movePreview) {
@@ -261,6 +261,21 @@
         MatCalendarBody.prototype._isInComparisonRange = function (value) {
             return isInRange(value, this.comparisonStart, this.comparisonEnd, this.isRange);
         };
+        /**
+         * Gets whether a value is the same as the start and end of the comparison range.
+         * For context, the functions that we use to determine whether something is the start/end of
+         * a range don't allow for the start and end to be on the same day, because we'd have to use
+         * much more specific CSS selectors to style them correctly in all scenarios. This is fine for
+         * the regular range, because when it happens, the selected styles take over and still show where
+         * the range would've been, however we don't have these selected styles for a comparison range.
+         * This function is used to apply a class that serves the same purpose as the one for selected
+         * dates, but it only applies in the context of a comparison range.
+         */
+        MatCalendarBody.prototype._isComparisonIdentical = function (value) {
+            // Note that we don't need to null check the start/end
+            // here, because the `value` will always be defined.
+            return this.comparisonStart === this.comparisonEnd && value === this.comparisonStart;
+        };
         /** Gets whether a value is the start of the preview range. */
         MatCalendarBody.prototype._isPreviewStart = function (value) {
             return isStart(value, this.previewStart, this.previewEnd);
@@ -291,45 +306,45 @@
             }
             return null;
         };
-        MatCalendarBody.decorators = [
-            { type: i0.Component, args: [{
-                        selector: '[mat-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 class=\"mat-calendar-body-label\"\n      [attr.colspan]=\"numCols\"\n      [style.paddingTop]=\"_cellPadding\"\n      [style.paddingBottom]=\"_cellPadding\">\n    {{label}}\n  </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    The aspect ratio of the table cells is maintained by setting the top and bottom padding as a\n    percentage of the width (a variant of the trick described here:\n    https://www.w3schools.com/howto/howto_css_aspect_ratio.asp).\n  -->\n  <td *ngIf=\"rowIndex === 0 && _firstRowOffset\"\n      aria-hidden=\"true\"\n      class=\"mat-calendar-body-label\"\n      [attr.colspan]=\"_firstRowOffset\"\n      [style.paddingTop]=\"_cellPadding\"\n      [style.paddingBottom]=\"_cellPadding\">\n    {{_firstRowOffset >= labelMinRequiredCells ? label : ''}}\n  </td>\n  <td *ngFor=\"let item of row; let colIndex = index\"\n      role=\"gridcell\"\n      class=\"mat-calendar-body-cell\"\n      [ngClass]=\"item.cssClasses\"\n      [tabindex]=\"_isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n      [attr.data-mat-row]=\"rowIndex\"\n      [attr.data-mat-col]=\"colIndex\"\n      [class.mat-calendar-body-disabled]=\"!item.enabled\"\n      [class.mat-calendar-body-active]=\"_isActiveCell(rowIndex, colIndex)\"\n      [class.mat-calendar-body-range-start]=\"_isRangeStart(item.compareValue)\"\n      [class.mat-calendar-body-range-end]=\"_isRangeEnd(item.compareValue)\"\n      [class.mat-calendar-body-in-range]=\"_isInRange(item.compareValue)\"\n      [class.mat-calendar-body-comparison-bridge-start]=\"_isComparisonBridgeStart(item.compareValue, rowIndex, colIndex)\"\n      [class.mat-calendar-body-comparison-bridge-end]=\"_isComparisonBridgeEnd(item.compareValue, rowIndex, colIndex)\"\n      [class.mat-calendar-body-comparison-start]=\"_isComparisonStart(item.compareValue)\"\n      [class.mat-calendar-body-comparison-end]=\"_isComparisonEnd(item.compareValue)\"\n      [class.mat-calendar-body-in-comparison-range]=\"_isInComparisonRange(item.compareValue)\"\n      [class.mat-calendar-body-preview-start]=\"_isPreviewStart(item.compareValue)\"\n      [class.mat-calendar-body-preview-end]=\"_isPreviewEnd(item.compareValue)\"\n      [class.mat-calendar-body-in-preview]=\"_isInPreview(item.compareValue)\"\n      [attr.aria-label]=\"item.ariaLabel\"\n      [attr.aria-disabled]=\"!item.enabled || null\"\n      [attr.aria-selected]=\"_isSelected(item)\"\n      (click)=\"_cellClicked(item, $event)\"\n      [style.width]=\"_cellWidth\"\n      [style.paddingTop]=\"_cellPadding\"\n      [style.paddingBottom]=\"_cellPadding\">\n      <div class=\"mat-calendar-body-cell-content mat-focus-indicator\"\n        [class.mat-calendar-body-selected]=\"_isSelected(item)\"\n        [class.mat-calendar-body-today]=\"todayValue === item.compareValue\">\n        {{item.displayValue}}\n      </div>\n      <div class=\"mat-calendar-body-cell-preview\"></div>\n  </td>\n</tr>\n",
-                        host: {
-                            'class': 'mat-calendar-body',
-                            'role': 'grid',
-                            'aria-readonly': 'true'
-                        },
-                        exportAs: 'matCalendarBody',
-                        encapsulation: i0.ViewEncapsulation.None,
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                        styles: [".mat-calendar-body{min-width:224px}.mat-calendar-body-label{height:0;line-height:0;text-align:left;padding-left:4.7142857143%;padding-right:4.7142857143%}.mat-calendar-body-cell{position:relative;height:0;line-height:0;text-align:center;outline:none;cursor:pointer}.mat-calendar-body-cell::before,.mat-calendar-body-cell::after,.mat-calendar-body-cell-preview{content:\"\";position:absolute;top:5%;left:0;z-index:0;box-sizing:border-box;height:90%;width:100%}.mat-calendar-body-range-start:not(.mat-calendar-body-in-comparison-range)::before,.mat-calendar-body-range-start::after,.mat-calendar-body-comparison-start:not(.mat-calendar-body-comparison-bridge-start)::before,.mat-calendar-body-comparison-start::after,.mat-calendar-body-preview-start .mat-calendar-body-cell-preview{left:5%;width:95%;border-top-left-radius:999px;border-bottom-left-radius:999px}[dir=rtl] .mat-calendar-body-range-start:not(.mat-calendar-body-in-comparison-range)::before,[dir=rtl] .mat-calendar-body-range-start::after,[dir=rtl] .mat-calendar-body-comparison-start:not(.mat-calendar-body-comparison-bridge-start)::before,[dir=rtl] .mat-calendar-body-comparison-start::after,[dir=rtl] .mat-calendar-body-preview-start .mat-calendar-body-cell-preview{left:0;border-radius:0;border-top-right-radius:999px;border-bottom-right-radius:999px}.mat-calendar-body-range-end:not(.mat-calendar-body-in-comparison-range)::before,.mat-calendar-body-range-end::after,.mat-calendar-body-comparison-end:not(.mat-calendar-body-comparison-bridge-end)::before,.mat-calendar-body-comparison-end::after,.mat-calendar-body-preview-end .mat-calendar-body-cell-preview{width:95%;border-top-right-radius:999px;border-bottom-right-radius:999px}[dir=rtl] .mat-calendar-body-range-end:not(.mat-calendar-body-in-comparison-range)::before,[dir=rtl] .mat-calendar-body-range-end::after,[dir=rtl] .mat-calendar-body-comparison-end:not(.mat-calendar-body-comparison-bridge-end)::before,[dir=rtl] .mat-calendar-body-comparison-end::after,[dir=rtl] .mat-calendar-body-preview-end .mat-calendar-body-cell-preview{left:5%;border-radius:0;border-top-left-radius:999px;border-bottom-left-radius:999px}[dir=rtl] .mat-calendar-body-comparison-bridge-start.mat-calendar-body-range-end::after,[dir=rtl] .mat-calendar-body-comparison-bridge-end.mat-calendar-body-range-start::after{width:95%;border-top-right-radius:999px;border-bottom-right-radius:999px}.mat-calendar-body-comparison-start.mat-calendar-body-range-end::after,[dir=rtl] .mat-calendar-body-comparison-start.mat-calendar-body-range-end::after,.mat-calendar-body-comparison-end.mat-calendar-body-range-start::after,[dir=rtl] .mat-calendar-body-comparison-end.mat-calendar-body-range-start::after{width:90%}.mat-calendar-body-in-preview .mat-calendar-body-cell-preview{border-top:dashed 1px;border-bottom:dashed 1px}.mat-calendar-body-preview-start .mat-calendar-body-cell-preview{border-left:dashed 1px}[dir=rtl] .mat-calendar-body-preview-start .mat-calendar-body-cell-preview{border-left:0;border-right:dashed 1px}.mat-calendar-body-preview-end .mat-calendar-body-cell-preview{border-right:dashed 1px}[dir=rtl] .mat-calendar-body-preview-end .mat-calendar-body-cell-preview{border-right:0;border-left:dashed 1px}.mat-calendar-body-disabled{cursor:default}.mat-calendar-body-cell-content{top:5%;left:5%;z-index:1;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}.mat-calendar-body-cell-content.mat-focus-indicator{position:absolute}.cdk-high-contrast-active .mat-calendar-body-cell-content{border:none}.cdk-high-contrast-active .mat-datepicker-popup:not(:empty),.cdk-high-contrast-active .mat-calendar-body-selected{outline:solid 1px}.cdk-high-contrast-active .mat-calendar-body-today{outline:dotted 1px}.cdk-high-contrast-active .cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected),.cdk-high-contrast-active .cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected){outline:dotted 2px}[dir=rtl] .mat-calendar-body-label{text-align:right}@media(hover: none){.mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected){background-color:transparent}}\n"]
-                    },] }
-        ];
-        MatCalendarBody.ctorParameters = function () { return [
-            { type: i0.ElementRef },
-            { type: i0.NgZone }
-        ]; };
-        MatCalendarBody.propDecorators = {
-            label: [{ type: i0.Input }],
-            rows: [{ type: i0.Input }],
-            todayValue: [{ type: i0.Input }],
-            startValue: [{ type: i0.Input }],
-            endValue: [{ type: i0.Input }],
-            labelMinRequiredCells: [{ type: i0.Input }],
-            numCols: [{ type: i0.Input }],
-            activeCell: [{ type: i0.Input }],
-            isRange: [{ type: i0.Input }],
-            cellAspectRatio: [{ type: i0.Input }],
-            comparisonStart: [{ type: i0.Input }],
-            comparisonEnd: [{ type: i0.Input }],
-            previewStart: [{ type: i0.Input }],
-            previewEnd: [{ type: i0.Input }],
-            selectedValueChange: [{ type: i0.Output }],
-            previewChange: [{ type: i0.Output }]
-        };
         return MatCalendarBody;
     }());
+    MatCalendarBody.decorators = [
+        { type: i0.Component, args: [{
+                    selector: '[mat-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 class=\"mat-calendar-body-label\"\n      [attr.colspan]=\"numCols\"\n      [style.paddingTop]=\"_cellPadding\"\n      [style.paddingBottom]=\"_cellPadding\">\n    {{label}}\n  </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    The aspect ratio of the table cells is maintained by setting the top and bottom padding as a\n    percentage of the width (a variant of the trick described here:\n    https://www.w3schools.com/howto/howto_css_aspect_ratio.asp).\n  -->\n  <td *ngIf=\"rowIndex === 0 && _firstRowOffset\"\n      aria-hidden=\"true\"\n      class=\"mat-calendar-body-label\"\n      [attr.colspan]=\"_firstRowOffset\"\n      [style.paddingTop]=\"_cellPadding\"\n      [style.paddingBottom]=\"_cellPadding\">\n    {{_firstRowOffset >= labelMinRequiredCells ? label : ''}}\n  </td>\n  <td *ngFor=\"let item of row; let colIndex = index\"\n      role=\"gridcell\"\n      class=\"mat-calendar-body-cell\"\n      [ngClass]=\"item.cssClasses\"\n      [tabindex]=\"_isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n      [attr.data-mat-row]=\"rowIndex\"\n      [attr.data-mat-col]=\"colIndex\"\n      [class.mat-calendar-body-disabled]=\"!item.enabled\"\n      [class.mat-calendar-body-active]=\"_isActiveCell(rowIndex, colIndex)\"\n      [class.mat-calendar-body-range-start]=\"_isRangeStart(item.compareValue)\"\n      [class.mat-calendar-body-range-end]=\"_isRangeEnd(item.compareValue)\"\n      [class.mat-calendar-body-in-range]=\"_isInRange(item.compareValue)\"\n      [class.mat-calendar-body-comparison-bridge-start]=\"_isComparisonBridgeStart(item.compareValue, rowIndex, colIndex)\"\n      [class.mat-calendar-body-comparison-bridge-end]=\"_isComparisonBridgeEnd(item.compareValue, rowIndex, colIndex)\"\n      [class.mat-calendar-body-comparison-start]=\"_isComparisonStart(item.compareValue)\"\n      [class.mat-calendar-body-comparison-end]=\"_isComparisonEnd(item.compareValue)\"\n      [class.mat-calendar-body-in-comparison-range]=\"_isInComparisonRange(item.compareValue)\"\n      [class.mat-calendar-body-preview-start]=\"_isPreviewStart(item.compareValue)\"\n      [class.mat-calendar-body-preview-end]=\"_isPreviewEnd(item.compareValue)\"\n      [class.mat-calendar-body-in-preview]=\"_isInPreview(item.compareValue)\"\n      [attr.aria-label]=\"item.ariaLabel\"\n      [attr.aria-disabled]=\"!item.enabled || null\"\n      [attr.aria-selected]=\"_isSelected(item.compareValue)\"\n      (click)=\"_cellClicked(item, $event)\"\n      [style.width]=\"_cellWidth\"\n      [style.paddingTop]=\"_cellPadding\"\n      [style.paddingBottom]=\"_cellPadding\">\n      <div class=\"mat-calendar-body-cell-content mat-focus-indicator\"\n        [class.mat-calendar-body-selected]=\"_isSelected(item.compareValue)\"\n        [class.mat-calendar-body-comparison-identical]=\"_isComparisonIdentical(item.compareValue)\"\n        [class.mat-calendar-body-today]=\"todayValue === item.compareValue\">\n        {{item.displayValue}}\n      </div>\n      <div class=\"mat-calendar-body-cell-preview\"></div>\n  </td>\n</tr>\n",
+                    host: {
+                        'class': 'mat-calendar-body',
+                        'role': 'grid',
+                        'aria-readonly': 'true'
+                    },
+                    exportAs: 'matCalendarBody',
+                    encapsulation: i0.ViewEncapsulation.None,
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [".mat-calendar-body{min-width:224px}.mat-calendar-body-label{height:0;line-height:0;text-align:left;padding-left:4.7142857143%;padding-right:4.7142857143%}.mat-calendar-body-cell{position:relative;height:0;line-height:0;text-align:center;outline:none;cursor:pointer}.mat-calendar-body-cell::before,.mat-calendar-body-cell::after,.mat-calendar-body-cell-preview{content:\"\";position:absolute;top:5%;left:0;z-index:0;box-sizing:border-box;height:90%;width:100%}.mat-calendar-body-range-start:not(.mat-calendar-body-in-comparison-range)::before,.mat-calendar-body-range-start::after,.mat-calendar-body-comparison-start:not(.mat-calendar-body-comparison-bridge-start)::before,.mat-calendar-body-comparison-start::after,.mat-calendar-body-preview-start .mat-calendar-body-cell-preview{left:5%;width:95%;border-top-left-radius:999px;border-bottom-left-radius:999px}[dir=rtl] .mat-calendar-body-range-start:not(.mat-calendar-body-in-comparison-range)::before,[dir=rtl] .mat-calendar-body-range-start::after,[dir=rtl] .mat-calendar-body-comparison-start:not(.mat-calendar-body-comparison-bridge-start)::before,[dir=rtl] .mat-calendar-body-comparison-start::after,[dir=rtl] .mat-calendar-body-preview-start .mat-calendar-body-cell-preview{left:0;border-radius:0;border-top-right-radius:999px;border-bottom-right-radius:999px}.mat-calendar-body-range-end:not(.mat-calendar-body-in-comparison-range)::before,.mat-calendar-body-range-end::after,.mat-calendar-body-comparison-end:not(.mat-calendar-body-comparison-bridge-end)::before,.mat-calendar-body-comparison-end::after,.mat-calendar-body-preview-end .mat-calendar-body-cell-preview{width:95%;border-top-right-radius:999px;border-bottom-right-radius:999px}[dir=rtl] .mat-calendar-body-range-end:not(.mat-calendar-body-in-comparison-range)::before,[dir=rtl] .mat-calendar-body-range-end::after,[dir=rtl] .mat-calendar-body-comparison-end:not(.mat-calendar-body-comparison-bridge-end)::before,[dir=rtl] .mat-calendar-body-comparison-end::after,[dir=rtl] .mat-calendar-body-preview-end .mat-calendar-body-cell-preview{left:5%;border-radius:0;border-top-left-radius:999px;border-bottom-left-radius:999px}[dir=rtl] .mat-calendar-body-comparison-bridge-start.mat-calendar-body-range-end::after,[dir=rtl] .mat-calendar-body-comparison-bridge-end.mat-calendar-body-range-start::after{width:95%;border-top-right-radius:999px;border-bottom-right-radius:999px}.mat-calendar-body-comparison-start.mat-calendar-body-range-end::after,[dir=rtl] .mat-calendar-body-comparison-start.mat-calendar-body-range-end::after,.mat-calendar-body-comparison-end.mat-calendar-body-range-start::after,[dir=rtl] .mat-calendar-body-comparison-end.mat-calendar-body-range-start::after{width:90%}.mat-calendar-body-in-preview .mat-calendar-body-cell-preview{border-top:dashed 1px;border-bottom:dashed 1px}.mat-calendar-body-preview-start .mat-calendar-body-cell-preview{border-left:dashed 1px}[dir=rtl] .mat-calendar-body-preview-start .mat-calendar-body-cell-preview{border-left:0;border-right:dashed 1px}.mat-calendar-body-preview-end .mat-calendar-body-cell-preview{border-right:dashed 1px}[dir=rtl] .mat-calendar-body-preview-end .mat-calendar-body-cell-preview{border-right:0;border-left:dashed 1px}.mat-calendar-body-disabled{cursor:default}.mat-calendar-body-cell-content{top:5%;left:5%;z-index:1;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}.mat-calendar-body-cell-content.mat-focus-indicator{position:absolute}.cdk-high-contrast-active .mat-calendar-body-cell-content{border:none}.cdk-high-contrast-active .mat-datepicker-popup:not(:empty),.cdk-high-contrast-active .mat-calendar-body-selected{outline:solid 1px}.cdk-high-contrast-active .mat-calendar-body-today{outline:dotted 1px}.cdk-high-contrast-active .cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected),.cdk-high-contrast-active .cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected){outline:dotted 2px}[dir=rtl] .mat-calendar-body-label{text-align:right}@media(hover: none){.mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected){background-color:transparent}}\n"]
+                },] }
+    ];
+    MatCalendarBody.ctorParameters = function () { return [
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+    MatCalendarBody.propDecorators = {
+        label: [{ type: i0.Input }],
+        rows: [{ type: i0.Input }],
+        todayValue: [{ type: i0.Input }],
+        startValue: [{ type: i0.Input }],
+        endValue: [{ type: i0.Input }],
+        labelMinRequiredCells: [{ type: i0.Input }],
+        numCols: [{ type: i0.Input }],
+        activeCell: [{ type: i0.Input }],
+        isRange: [{ type: i0.Input }],
+        cellAspectRatio: [{ type: i0.Input }],
+        comparisonStart: [{ type: i0.Input }],
+        comparisonEnd: [{ type: i0.Input }],
+        previewStart: [{ type: i0.Input }],
+        previewEnd: [{ type: i0.Input }],
+        selectedValueChange: [{ type: i0.Output }],
+        previewChange: [{ type: i0.Output }]
+    };
     /** Checks whether a node is a table cell element. */
     function isTableCell(node) {
         return node.nodeName === 'TD';
@@ -348,241 +363,307 @@
             value >= start && value <= end;
     }
 
-    /*! *****************************************************************************
-    Copyright (c) Microsoft Corporation.
-
-    Permission to use, copy, modify, and/or distribute this software for any
-    purpose with or without fee is hereby granted.
-
-    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-    PERFORMANCE OF THIS SOFTWARE.
-    ***************************************************************************** */
-    /* global Reflect, Promise */
-
-    var extendStatics = function(d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-
-    function __extends(d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    }
-
-    var __assign = function() {
-        __assign = Object.assign || function __assign(t) {
-            for (var s, i = 1, n = arguments.length; i < n; i++) {
-                s = arguments[i];
-                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-            }
-            return t;
-        };
-        return __assign.apply(this, arguments);
-    };
-
-    function __rest(s, e) {
-        var t = {};
-        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-            t[p] = s[p];
-        if (s != null && typeof Object.getOwnPropertySymbols === "function")
-            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                    t[p[i]] = s[p[i]];
-            }
-        return t;
-    }
-
-    function __decorate(decorators, target, key, desc) {
-        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-        return c > 3 && r && Object.defineProperty(target, key, r), r;
-    }
-
-    function __param(paramIndex, decorator) {
-        return function (target, key) { decorator(target, key, paramIndex); }
-    }
-
-    function __metadata(metadataKey, metadataValue) {
-        if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
-    }
-
-    function __awaiter(thisArg, _arguments, P, generator) {
-        function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-        return new (P || (P = Promise))(function (resolve, reject) {
-            function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-            function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-            function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-            step((generator = generator.apply(thisArg, _arguments || [])).next());
-        });
-    }
-
-    function __generator(thisArg, body) {
-        var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-        return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-        function verb(n) { return function (v) { return step([n, v]); }; }
-        function step(op) {
-            if (f) throw new TypeError("Generator is already executing.");
-            while (_) try {
-                if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-                if (y = 0, t) op = [op[0] & 2, t.value];
-                switch (op[0]) {
-                    case 0: case 1: t = op; break;
-                    case 4: _.label++; return { value: op[1], done: false };
-                    case 5: _.label++; y = op[1]; op = [0]; continue;
-                    case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                    default:
-                        if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                        if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                        if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                        if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                        if (t[2]) _.ops.pop();
-                        _.trys.pop(); continue;
-                }
-                op = body.call(thisArg, _);
-            } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-            if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-        }
-    }
-
-    var __createBinding = Object.create ? (function(o, m, k, k2) {
-        if (k2 === undefined) k2 = k;
-        Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-    }) : (function(o, m, k, k2) {
-        if (k2 === undefined) k2 = k;
-        o[k2] = m[k];
-    });
-
-    function __exportStar(m, exports) {
-        for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
-    }
-
-    function __values(o) {
-        var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
-        if (m) return m.call(o);
-        if (o && typeof o.length === "number") return {
-            next: function () {
-                if (o && i >= o.length) o = void 0;
-                return { value: o && o[i++], done: !o };
-            }
-        };
-        throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
-    }
-
-    function __read(o, n) {
-        var m = typeof Symbol === "function" && o[Symbol.iterator];
-        if (!m) return o;
-        var i = m.call(o), r, ar = [], e;
-        try {
-            while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-        }
-        catch (error) { e = { error: error }; }
-        finally {
-            try {
-                if (r && !r.done && (m = i["return"])) m.call(i);
-            }
-            finally { if (e) throw e.error; }
-        }
-        return ar;
-    }
-
-    function __spread() {
-        for (var ar = [], i = 0; i < arguments.length; i++)
-            ar = ar.concat(__read(arguments[i]));
-        return ar;
-    }
-
-    function __spreadArrays() {
-        for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
-        for (var r = Array(s), k = 0, i = 0; i < il; i++)
-            for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-                r[k] = a[j];
-        return r;
-    };
-
-    function __await(v) {
-        return this instanceof __await ? (this.v = v, this) : new __await(v);
-    }
-
-    function __asyncGenerator(thisArg, _arguments, generator) {
-        if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
-        var g = generator.apply(thisArg, _arguments || []), i, q = [];
-        return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
-        function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
-        function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }
-        function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
-        function fulfill(value) { resume("next", value); }
-        function reject(value) { resume("throw", value); }
-        function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }
-    }
-
-    function __asyncDelegator(o) {
-        var i, p;
-        return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
-        function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
-    }
-
-    function __asyncValues(o) {
-        if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
-        var m = o[Symbol.asyncIterator], i;
-        return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
-        function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
-        function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }
-    }
-
-    function __makeTemplateObject(cooked, raw) {
-        if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-        return cooked;
-    };
-
-    var __setModuleDefault = Object.create ? (function(o, v) {
-        Object.defineProperty(o, "default", { enumerable: true, value: v });
-    }) : function(o, v) {
-        o["default"] = v;
-    };
-
-    function __importStar(mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-        __setModuleDefault(result, mod);
-        return result;
-    }
-
-    function __importDefault(mod) {
-        return (mod && mod.__esModule) ? mod : { default: mod };
-    }
-
-    function __classPrivateFieldGet(receiver, privateMap) {
-        if (!privateMap.has(receiver)) {
-            throw new TypeError("attempted to get private field on non-instance");
-        }
-        return privateMap.get(receiver);
-    }
-
-    function __classPrivateFieldSet(receiver, privateMap, value) {
-        if (!privateMap.has(receiver)) {
-            throw new TypeError("attempted to set private field on non-instance");
-        }
-        privateMap.set(receiver, value);
-        return value;
+    /*! *****************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+    /* global Reflect, Promise */
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b)
+                if (b.hasOwnProperty(p))
+                    d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    function __extends(d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    }
+    var __assign = function () {
+        __assign = Object.assign || function __assign(t) {
+            for (var s, i = 1, n = arguments.length; i < n; i++) {
+                s = arguments[i];
+                for (var p in s)
+                    if (Object.prototype.hasOwnProperty.call(s, p))
+                        t[p] = s[p];
+            }
+            return t;
+        };
+        return __assign.apply(this, arguments);
+    };
+    function __rest(s, e) {
+        var t = {};
+        for (var p in s)
+            if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+                t[p] = s[p];
+        if (s != null && typeof Object.getOwnPropertySymbols === "function")
+            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                    t[p[i]] = s[p[i]];
+            }
+        return t;
+    }
+    function __decorate(decorators, target, key, desc) {
+        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+        if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+            r = Reflect.decorate(decorators, target, key, desc);
+        else
+            for (var i = decorators.length - 1; i >= 0; i--)
+                if (d = decorators[i])
+                    r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+        return c > 3 && r && Object.defineProperty(target, key, r), r;
+    }
+    function __param(paramIndex, decorator) {
+        return function (target, key) { decorator(target, key, paramIndex); };
+    }
+    function __metadata(metadataKey, metadataValue) {
+        if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+            return Reflect.metadata(metadataKey, metadataValue);
+    }
+    function __awaiter(thisArg, _arguments, P, generator) {
+        function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+        return new (P || (P = Promise))(function (resolve, reject) {
+            function fulfilled(value) { try {
+                step(generator.next(value));
+            }
+            catch (e) {
+                reject(e);
+            } }
+            function rejected(value) { try {
+                step(generator["throw"](value));
+            }
+            catch (e) {
+                reject(e);
+            } }
+            function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+            step((generator = generator.apply(thisArg, _arguments || [])).next());
+        });
+    }
+    function __generator(thisArg, body) {
+        var _ = { label: 0, sent: function () { if (t[0] & 1)
+                throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+        return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
+        function verb(n) { return function (v) { return step([n, v]); }; }
+        function step(op) {
+            if (f)
+                throw new TypeError("Generator is already executing.");
+            while (_)
+                try {
+                    if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
+                        return t;
+                    if (y = 0, t)
+                        op = [op[0] & 2, t.value];
+                    switch (op[0]) {
+                        case 0:
+                        case 1:
+                            t = op;
+                            break;
+                        case 4:
+                            _.label++;
+                            return { value: op[1], done: false };
+                        case 5:
+                            _.label++;
+                            y = op[1];
+                            op = [0];
+                            continue;
+                        case 7:
+                            op = _.ops.pop();
+                            _.trys.pop();
+                            continue;
+                        default:
+                            if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+                                _ = 0;
+                                continue;
+                            }
+                            if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
+                                _.label = op[1];
+                                break;
+                            }
+                            if (op[0] === 6 && _.label < t[1]) {
+                                _.label = t[1];
+                                t = op;
+                                break;
+                            }
+                            if (t && _.label < t[2]) {
+                                _.label = t[2];
+                                _.ops.push(op);
+                                break;
+                            }
+                            if (t[2])
+                                _.ops.pop();
+                            _.trys.pop();
+                            continue;
+                    }
+                    op = body.call(thisArg, _);
+                }
+                catch (e) {
+                    op = [6, e];
+                    y = 0;
+                }
+                finally {
+                    f = t = 0;
+                }
+            if (op[0] & 5)
+                throw op[1];
+            return { value: op[0] ? op[1] : void 0, done: true };
+        }
+    }
+    var __createBinding = Object.create ? (function (o, m, k, k2) {
+        if (k2 === undefined)
+            k2 = k;
+        Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } });
+    }) : (function (o, m, k, k2) {
+        if (k2 === undefined)
+            k2 = k;
+        o[k2] = m[k];
+    });
+    function __exportStar(m, exports) {
+        for (var p in m)
+            if (p !== "default" && !exports.hasOwnProperty(p))
+                __createBinding(exports, m, p);
+    }
+    function __values(o) {
+        var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+        if (m)
+            return m.call(o);
+        if (o && typeof o.length === "number")
+            return {
+                next: function () {
+                    if (o && i >= o.length)
+                        o = void 0;
+                    return { value: o && o[i++], done: !o };
+                }
+            };
+        throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+    }
+    function __read(o, n) {
+        var m = typeof Symbol === "function" && o[Symbol.iterator];
+        if (!m)
+            return o;
+        var i = m.call(o), r, ar = [], e;
+        try {
+            while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
+                ar.push(r.value);
+        }
+        catch (error) {
+            e = { error: error };
+        }
+        finally {
+            try {
+                if (r && !r.done && (m = i["return"]))
+                    m.call(i);
+            }
+            finally {
+                if (e)
+                    throw e.error;
+            }
+        }
+        return ar;
+    }
+    function __spread() {
+        for (var ar = [], i = 0; i < arguments.length; i++)
+            ar = ar.concat(__read(arguments[i]));
+        return ar;
+    }
+    function __spreadArrays() {
+        for (var s = 0, i = 0, il = arguments.length; i < il; i++)
+            s += arguments[i].length;
+        for (var r = Array(s), k = 0, i = 0; i < il; i++)
+            for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+                r[k] = a[j];
+        return r;
+    }
+    ;
+    function __await(v) {
+        return this instanceof __await ? (this.v = v, this) : new __await(v);
+    }
+    function __asyncGenerator(thisArg, _arguments, generator) {
+        if (!Symbol.asyncIterator)
+            throw new TypeError("Symbol.asyncIterator is not defined.");
+        var g = generator.apply(thisArg, _arguments || []), i, q = [];
+        return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
+        function verb(n) { if (g[n])
+            i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
+        function resume(n, v) { try {
+            step(g[n](v));
+        }
+        catch (e) {
+            settle(q[0][3], e);
+        } }
+        function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
+        function fulfill(value) { resume("next", value); }
+        function reject(value) { resume("throw", value); }
+        function settle(f, v) { if (f(v), q.shift(), q.length)
+            resume(q[0][0], q[0][1]); }
+    }
+    function __asyncDelegator(o) {
+        var i, p;
+        return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
+        function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
+    }
+    function __asyncValues(o) {
+        if (!Symbol.asyncIterator)
+            throw new TypeError("Symbol.asyncIterator is not defined.");
+        var m = o[Symbol.asyncIterator], i;
+        return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
+        function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
+        function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
+    }
+    function __makeTemplateObject(cooked, raw) {
+        if (Object.defineProperty) {
+            Object.defineProperty(cooked, "raw", { value: raw });
+        }
+        else {
+            cooked.raw = raw;
+        }
+        return cooked;
+    }
+    ;
+    var __setModuleDefault = Object.create ? (function (o, v) {
+        Object.defineProperty(o, "default", { enumerable: true, value: v });
+    }) : function (o, v) {
+        o["default"] = v;
+    };
+    function __importStar(mod) {
+        if (mod && mod.__esModule)
+            return mod;
+        var result = {};
+        if (mod != null)
+            for (var k in mod)
+                if (Object.hasOwnProperty.call(mod, k))
+                    __createBinding(result, mod, k);
+        __setModuleDefault(result, mod);
+        return result;
+    }
+    function __importDefault(mod) {
+        return (mod && mod.__esModule) ? mod : { default: mod };
+    }
+    function __classPrivateFieldGet(receiver, privateMap) {
+        if (!privateMap.has(receiver)) {
+            throw new TypeError("attempted to get private field on non-instance");
+        }
+        return privateMap.get(receiver);
+    }
+    function __classPrivateFieldSet(receiver, privateMap, value) {
+        if (!privateMap.has(receiver)) {
+            throw new TypeError("attempted to set private field on non-instance");
+        }
+        privateMap.set(receiver, value);
+        return value;
     }
 
-    /**
-     * @license
-     * Copyright Google LLC All Rights Reserved.
-     *
-     * Use of this source code is governed by an MIT-style license that can be
-     * found in the LICENSE file at https://angular.io/license
-     */
     /** A class representing a range of dates. */
     var DateRange = /** @class */ (function () {
         function DateRange(
@@ -604,7 +685,7 @@
             this._adapter = _adapter;
             this._selectionChanged = new rxjs.Subject();
             /** Emits when the selection has changed. */
-            this.selectionChanged = this._selectionChanged.asObservable();
+            this.selectionChanged = this._selectionChanged;
             this.selection = selection;
         }
         /**
@@ -622,15 +703,15 @@
         MatDateSelectionModel.prototype._isValidDateInstance = function (date) {
             return this._adapter.isDateInstance(date) && this._adapter.isValid(date);
         };
-        MatDateSelectionModel.decorators = [
-            { type: i0.Directive }
-        ];
-        MatDateSelectionModel.ctorParameters = function () { return [
-            { type: undefined },
-            { type: core.DateAdapter }
-        ]; };
         return MatDateSelectionModel;
     }());
+    MatDateSelectionModel.decorators = [
+        { type: i0.Directive }
+    ];
+    MatDateSelectionModel.ctorParameters = function () { return [
+        { type: undefined },
+        { type: core.DateAdapter }
+    ]; };
     /**  A selection model that contains a single date. */
     var MatSingleDateSelectionModel = /** @class */ (function (_super) {
         __extends(MatSingleDateSelectionModel, _super);
@@ -655,14 +736,14 @@
         MatSingleDateSelectionModel.prototype.isComplete = function () {
             return this.selection != null;
         };
-        MatSingleDateSelectionModel.decorators = [
-            { type: i0.Injectable }
-        ];
-        MatSingleDateSelectionModel.ctorParameters = function () { return [
-            { type: core.DateAdapter }
-        ]; };
         return MatSingleDateSelectionModel;
     }(MatDateSelectionModel));
+    MatSingleDateSelectionModel.decorators = [
+        { type: i0.Injectable }
+    ];
+    MatSingleDateSelectionModel.ctorParameters = function () { return [
+        { type: core.DateAdapter }
+    ]; };
     /**  A selection model that contains a date range. */
     var MatRangeDateSelectionModel = /** @class */ (function (_super) {
         __extends(MatRangeDateSelectionModel, _super);
@@ -711,14 +792,14 @@
         MatRangeDateSelectionModel.prototype.isComplete = function () {
             return this.selection.start != null && this.selection.end != null;
         };
-        MatRangeDateSelectionModel.decorators = [
-            { type: i0.Injectable }
-        ];
-        MatRangeDateSelectionModel.ctorParameters = function () { return [
-            { type: core.DateAdapter }
-        ]; };
         return MatRangeDateSelectionModel;
     }(MatDateSelectionModel));
+    MatRangeDateSelectionModel.decorators = [
+        { type: i0.Injectable }
+    ];
+    MatRangeDateSelectionModel.ctorParameters = function () { return [
+        { type: core.DateAdapter }
+    ]; };
     /** @docs-private */
     function MAT_SINGLE_DATE_SELECTION_MODEL_FACTORY(parent, adapter) {
         return parent || new MatSingleDateSelectionModel(adapter);
@@ -777,14 +858,24 @@
             }
             return new DateRange(start, end);
         };
-        DefaultMatCalendarRangeStrategy.decorators = [
-            { type: i0.Injectable }
-        ];
-        DefaultMatCalendarRangeStrategy.ctorParameters = function () { return [
-            { type: core.DateAdapter }
-        ]; };
         return DefaultMatCalendarRangeStrategy;
     }());
+    DefaultMatCalendarRangeStrategy.decorators = [
+        { type: i0.Injectable }
+    ];
+    DefaultMatCalendarRangeStrategy.ctorParameters = function () { return [
+        { type: core.DateAdapter }
+    ]; };
+    /** @docs-private */
+    function MAT_CALENDAR_RANGE_STRATEGY_PROVIDER_FACTORY(parent, adapter) {
+        return parent || new DefaultMatCalendarRangeStrategy(adapter);
+    }
+    /** @docs-private */
+    var MAT_CALENDAR_RANGE_STRATEGY_PROVIDER = {
+        provide: MAT_DATE_RANGE_SELECTION_STRATEGY,
+        deps: [[new i0.Optional(), new i0.SkipSelf(), MAT_DATE_RANGE_SELECTION_STRATEGY], core.DateAdapter],
+        useFactory: MAT_CALENDAR_RANGE_STRATEGY_PROVIDER_FACTORY,
+    };
 
     /**
      * @license
@@ -812,11 +903,13 @@
             this._userSelection = new i0.EventEmitter();
             /** Emits when any date is activated. */
             this.activeDateChange = new i0.EventEmitter();
-            if (!this._dateAdapter) {
-                throw createMissingDateImplError('DateAdapter');
-            }
-            if (!this._dateFormats) {
-                throw createMissingDateImplError('MAT_DATE_FORMATS');
+            if (typeof ngDevMode === 'undefined' || ngDevMode) {
+                if (!this._dateAdapter) {
+                    throw createMissingDateImplError('DateAdapter');
+                }
+                if (!this._dateFormats) {
+                    throw createMissingDateImplError('MAT_DATE_FORMATS');
+                }
             }
             this._activeDate = this._dateAdapter.today();
         }
@@ -827,7 +920,7 @@
             get: function () { return this._activeDate; },
             set: function (value) {
                 var oldActiveDate = this._activeDate;
-                var validDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value)) || this._dateAdapter.today();
+                var validDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value)) || this._dateAdapter.today();
                 this._activeDate = this._dateAdapter.clampDate(validDate, this.minDate, this.maxDate);
                 if (!this._hasSameMonthAndYear(oldActiveDate, this._activeDate)) {
                     this._init();
@@ -844,7 +937,7 @@
                     this._selected = value;
                 }
                 else {
-                    this._selected = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
+                    this._selected = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
                 }
                 this._setRanges(this._selected);
             },
@@ -855,7 +948,7 @@
             /** The minimum selectable date. */
             get: function () { return this._minDate; },
             set: function (value) {
-                this._minDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
+                this._minDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
             },
             enumerable: false,
             configurable: true
@@ -864,7 +957,7 @@
             /** The maximum selectable date. */
             get: function () { return this._maxDate; },
             set: function (value) {
-                this._maxDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
+                this._maxDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
             },
             enumerable: false,
             configurable: true
@@ -875,6 +968,12 @@
                 .pipe(operators.startWith(null))
                 .subscribe(function () { return _this._init(); });
         };
+        MatMonthView.prototype.ngOnChanges = function (changes) {
+            var comparisonChange = changes['comparisonStart'] || changes['comparisonEnd'];
+            if (comparisonChange && !comparisonChange.firstChange) {
+                this._setRanges(this.selected);
+            }
+        };
         MatMonthView.prototype.ngOnDestroy = function () {
             this._rerenderSubscription.unsubscribe();
         };
@@ -1024,7 +1123,7 @@
                 var date = this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), this._dateAdapter.getMonth(this.activeDate), i + 1);
                 var enabled = this._shouldEnableDate(date);
                 var ariaLabel = this._dateAdapter.format(date, this._dateFormats.display.dateA11yLabel);
-                var cellClasses = this.dateClass ? this.dateClass(date) : undefined;
+                var cellClasses = this.dateClass ? this.dateClass(date, 'month') : undefined;
                 this._weeks[this._weeks.length - 1].push(new MatCalendarCell(i + 1, dateNames[i], ariaLabel, enabled, cellClasses, this._getCellCompareValue(date), date));
             }
         };
@@ -1060,13 +1159,6 @@
             }
             return null;
         };
-        /**
-         * @param obj The object to check.
-         * @returns The given object if it is both a date instance and valid, otherwise null.
-         */
-        MatMonthView.prototype._getValidDateOrNull = function (obj) {
-            return (this._dateAdapter.isDateInstance(obj) && this._dateAdapter.isValid(obj)) ? obj : null;
-        };
         /** Determines whether the user has the RTL layout direction. */
         MatMonthView.prototype._isRtl = function () {
             return this._dir && this._dir.value === 'rtl';
@@ -1085,38 +1177,38 @@
             this._comparisonRangeStart = this._getCellCompareValue(this.comparisonStart);
             this._comparisonRangeEnd = this._getCellCompareValue(this.comparisonEnd);
         };
-        MatMonthView.decorators = [
-            { type: i0.Component, args: [{
-                        selector: 'mat-month-view',
-                        template: "<table class=\"mat-calendar-table\" role=\"presentation\">\n  <thead class=\"mat-calendar-table-header\">\n    <tr>\n      <th scope=\"col\" *ngFor=\"let day of _weekdays\" [attr.aria-label]=\"day.long\">{{day.narrow}}</th>\n    </tr>\n    <tr><th class=\"mat-calendar-table-header-divider\" colspan=\"7\" aria-hidden=\"true\"></th></tr>\n  </thead>\n  <tbody mat-calendar-body\n         [label]=\"_monthLabel\"\n         [rows]=\"_weeks\"\n         [todayValue]=\"_todayDate!\"\n         [startValue]=\"_rangeStart!\"\n         [endValue]=\"_rangeEnd!\"\n         [comparisonStart]=\"_comparisonRangeStart\"\n         [comparisonEnd]=\"_comparisonRangeEnd\"\n         [previewStart]=\"_previewStart\"\n         [previewEnd]=\"_previewEnd\"\n         [isRange]=\"_isRange\"\n         [labelMinRequiredCells]=\"3\"\n         [activeCell]=\"_dateAdapter.getDate(activeDate) - 1\"\n         (selectedValueChange)=\"_dateSelected($event)\"\n         (previewChange)=\"_previewChanged($event)\"\n         (keydown)=\"_handleCalendarBodyKeydown($event)\">\n  </tbody>\n</table>\n",
-                        exportAs: 'matMonthView',
-                        encapsulation: i0.ViewEncapsulation.None,
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush
-                    },] }
-        ];
-        MatMonthView.ctorParameters = function () { return [
-            { type: i0.ChangeDetectorRef },
-            { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [core.MAT_DATE_FORMATS,] }] },
-            { type: core.DateAdapter, decorators: [{ type: i0.Optional }] },
-            { type: bidi.Directionality, decorators: [{ type: i0.Optional }] },
-            { type: undefined, decorators: [{ type: i0.Inject, args: [MAT_DATE_RANGE_SELECTION_STRATEGY,] }, { type: i0.Optional }] }
-        ]; };
-        MatMonthView.propDecorators = {
-            activeDate: [{ type: i0.Input }],
-            selected: [{ type: i0.Input }],
-            minDate: [{ type: i0.Input }],
-            maxDate: [{ type: i0.Input }],
-            dateFilter: [{ type: i0.Input }],
-            dateClass: [{ type: i0.Input }],
-            comparisonStart: [{ type: i0.Input }],
-            comparisonEnd: [{ type: i0.Input }],
-            selectedChange: [{ type: i0.Output }],
-            _userSelection: [{ type: i0.Output }],
-            activeDateChange: [{ type: i0.Output }],
-            _matCalendarBody: [{ type: i0.ViewChild, args: [MatCalendarBody,] }]
-        };
         return MatMonthView;
     }());
+    MatMonthView.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'mat-month-view',
+                    template: "<table class=\"mat-calendar-table\" role=\"presentation\">\n  <thead class=\"mat-calendar-table-header\">\n    <tr>\n      <th scope=\"col\" *ngFor=\"let day of _weekdays\" [attr.aria-label]=\"day.long\">{{day.narrow}}</th>\n    </tr>\n    <tr><th class=\"mat-calendar-table-header-divider\" colspan=\"7\" aria-hidden=\"true\"></th></tr>\n  </thead>\n  <tbody mat-calendar-body\n         [label]=\"_monthLabel\"\n         [rows]=\"_weeks\"\n         [todayValue]=\"_todayDate!\"\n         [startValue]=\"_rangeStart!\"\n         [endValue]=\"_rangeEnd!\"\n         [comparisonStart]=\"_comparisonRangeStart\"\n         [comparisonEnd]=\"_comparisonRangeEnd\"\n         [previewStart]=\"_previewStart\"\n         [previewEnd]=\"_previewEnd\"\n         [isRange]=\"_isRange\"\n         [labelMinRequiredCells]=\"3\"\n         [activeCell]=\"_dateAdapter.getDate(activeDate) - 1\"\n         (selectedValueChange)=\"_dateSelected($event)\"\n         (previewChange)=\"_previewChanged($event)\"\n         (keydown)=\"_handleCalendarBodyKeydown($event)\">\n  </tbody>\n</table>\n",
+                    exportAs: 'matMonthView',
+                    encapsulation: i0.ViewEncapsulation.None,
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush
+                },] }
+    ];
+    MatMonthView.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [core.MAT_DATE_FORMATS,] }] },
+        { type: core.DateAdapter, decorators: [{ type: i0.Optional }] },
+        { type: bidi.Directionality, decorators: [{ type: i0.Optional }] },
+        { type: undefined, decorators: [{ type: i0.Inject, args: [MAT_DATE_RANGE_SELECTION_STRATEGY,] }, { type: i0.Optional }] }
+    ]; };
+    MatMonthView.propDecorators = {
+        activeDate: [{ type: i0.Input }],
+        selected: [{ type: i0.Input }],
+        minDate: [{ type: i0.Input }],
+        maxDate: [{ type: i0.Input }],
+        dateFilter: [{ type: i0.Input }],
+        dateClass: [{ type: i0.Input }],
+        comparisonStart: [{ type: i0.Input }],
+        comparisonEnd: [{ type: i0.Input }],
+        selectedChange: [{ type: i0.Output }],
+        _userSelection: [{ type: i0.Output }],
+        activeDateChange: [{ type: i0.Output }],
+        _matCalendarBody: [{ type: i0.ViewChild, args: [MatCalendarBody,] }]
+    };
 
     /**
      * @license
@@ -1143,7 +1235,7 @@
             this.yearSelected = new i0.EventEmitter();
             /** Emits when any date is activated. */
             this.activeDateChange = new i0.EventEmitter();
-            if (!this._dateAdapter) {
+            if (!this._dateAdapter && (typeof ngDevMode === 'undefined' || ngDevMode)) {
                 throw createMissingDateImplError('DateAdapter');
             }
             this._activeDate = this._dateAdapter.today();
@@ -1153,7 +1245,7 @@
             get: function () { return this._activeDate; },
             set: function (value) {
                 var oldActiveDate = this._activeDate;
-                var validDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value)) || this._dateAdapter.today();
+                var validDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value)) || this._dateAdapter.today();
                 this._activeDate = this._dateAdapter.clampDate(validDate, this.minDate, this.maxDate);
                 if (!isSameMultiYearView(this._dateAdapter, oldActiveDate, this._activeDate, this.minDate, this.maxDate)) {
                     this._init();
@@ -1170,7 +1262,7 @@
                     this._selected = value;
                 }
                 else {
-                    this._selected = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
+                    this._selected = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
                 }
                 this._setSelectedYear(value);
             },
@@ -1181,7 +1273,7 @@
             /** The minimum selectable date. */
             get: function () { return this._minDate; },
             set: function (value) {
-                this._minDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
+                this._minDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
             },
             enumerable: false,
             configurable: true
@@ -1190,7 +1282,7 @@
             /** The maximum selectable date. */
             get: function () { return this._maxDate; },
             set: function (value) {
-                this._maxDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
+                this._maxDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
             },
             enumerable: false,
             configurable: true
@@ -1288,8 +1380,10 @@
         };
         /** Creates an MatCalendarCell for the given year. */
         MatMultiYearView.prototype._createCellForYear = function (year) {
-            var yearName = this._dateAdapter.getYearName(this._dateAdapter.createDate(year, 0, 1));
-            return new MatCalendarCell(year, yearName, yearName, this._shouldEnableYear(year));
+            var date = this._dateAdapter.createDate(year, 0, 1);
+            var yearName = this._dateAdapter.getYearName(date);
+            var cellClasses = this.dateClass ? this.dateClass(date, 'multi-year') : undefined;
+            return new MatCalendarCell(year, yearName, yearName, this._shouldEnableYear(year), cellClasses);
         };
         /** Whether the given year is enabled. */
         MatMultiYearView.prototype._shouldEnableYear = function (year) {
@@ -1312,13 +1406,6 @@
             }
             return false;
         };
-        /**
-         * @param obj The object to check.
-         * @returns The given object if it is both a date instance and valid, otherwise null.
-         */
-        MatMultiYearView.prototype._getValidDateOrNull = function (obj) {
-            return (this._dateAdapter.isDateInstance(obj) && this._dateAdapter.isValid(obj)) ? obj : null;
-        };
         /** Determines whether the user has the RTL layout direction. */
         MatMultiYearView.prototype._isRtl = function () {
             return this._dir && this._dir.value === 'rtl';
@@ -1336,33 +1423,34 @@
                 this._selectedYear = this._dateAdapter.getYear(value);
             }
         };
-        MatMultiYearView.decorators = [
-            { type: i0.Component, args: [{
-                        selector: 'mat-multi-year-view',
-                        template: "<table class=\"mat-calendar-table\" role=\"presentation\">\n  <thead class=\"mat-calendar-table-header\">\n    <tr><th class=\"mat-calendar-table-header-divider\" colspan=\"4\"></th></tr>\n  </thead>\n  <tbody mat-calendar-body\n         [rows]=\"_years\"\n         [todayValue]=\"_todayYear\"\n         [startValue]=\"_selectedYear!\"\n         [endValue]=\"_selectedYear!\"\n         [numCols]=\"4\"\n         [cellAspectRatio]=\"4 / 7\"\n         [activeCell]=\"_getActiveCell()\"\n         (selectedValueChange)=\"_yearSelected($event)\"\n         (keydown)=\"_handleCalendarBodyKeydown($event)\">\n  </tbody>\n</table>\n",
-                        exportAs: 'matMultiYearView',
-                        encapsulation: i0.ViewEncapsulation.None,
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush
-                    },] }
-        ];
-        MatMultiYearView.ctorParameters = function () { return [
-            { type: i0.ChangeDetectorRef },
-            { type: core.DateAdapter, decorators: [{ type: i0.Optional }] },
-            { type: bidi.Directionality, decorators: [{ type: i0.Optional }] }
-        ]; };
-        MatMultiYearView.propDecorators = {
-            activeDate: [{ type: i0.Input }],
-            selected: [{ type: i0.Input }],
-            minDate: [{ type: i0.Input }],
-            maxDate: [{ type: i0.Input }],
-            dateFilter: [{ type: i0.Input }],
-            selectedChange: [{ type: i0.Output }],
-            yearSelected: [{ type: i0.Output }],
-            activeDateChange: [{ type: i0.Output }],
-            _matCalendarBody: [{ type: i0.ViewChild, args: [MatCalendarBody,] }]
-        };
         return MatMultiYearView;
     }());
+    MatMultiYearView.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'mat-multi-year-view',
+                    template: "<table class=\"mat-calendar-table\" role=\"presentation\">\n  <thead class=\"mat-calendar-table-header\">\n    <tr><th class=\"mat-calendar-table-header-divider\" colspan=\"4\"></th></tr>\n  </thead>\n  <tbody mat-calendar-body\n         [rows]=\"_years\"\n         [todayValue]=\"_todayYear\"\n         [startValue]=\"_selectedYear!\"\n         [endValue]=\"_selectedYear!\"\n         [numCols]=\"4\"\n         [cellAspectRatio]=\"4 / 7\"\n         [activeCell]=\"_getActiveCell()\"\n         (selectedValueChange)=\"_yearSelected($event)\"\n         (keydown)=\"_handleCalendarBodyKeydown($event)\">\n  </tbody>\n</table>\n",
+                    exportAs: 'matMultiYearView',
+                    encapsulation: i0.ViewEncapsulation.None,
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush
+                },] }
+    ];
+    MatMultiYearView.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: core.DateAdapter, decorators: [{ type: i0.Optional }] },
+        { type: bidi.Directionality, decorators: [{ type: i0.Optional }] }
+    ]; };
+    MatMultiYearView.propDecorators = {
+        activeDate: [{ type: i0.Input }],
+        selected: [{ type: i0.Input }],
+        minDate: [{ type: i0.Input }],
+        maxDate: [{ type: i0.Input }],
+        dateFilter: [{ type: i0.Input }],
+        dateClass: [{ type: i0.Input }],
+        selectedChange: [{ type: i0.Output }],
+        yearSelected: [{ type: i0.Output }],
+        activeDateChange: [{ type: i0.Output }],
+        _matCalendarBody: [{ type: i0.ViewChild, args: [MatCalendarBody,] }]
+    };
     function isSameMultiYearView(dateAdapter, date1, date2, minDate, maxDate) {
         var year1 = dateAdapter.getYear(date1);
         var year2 = dateAdapter.getYear(date2);
@@ -1423,11 +1511,13 @@
             this.monthSelected = new i0.EventEmitter();
             /** Emits when any date is activated. */
             this.activeDateChange = new i0.EventEmitter();
-            if (!this._dateAdapter) {
-                throw createMissingDateImplError('DateAdapter');
-            }
-            if (!this._dateFormats) {
-                throw createMissingDateImplError('MAT_DATE_FORMATS');
+            if (typeof ngDevMode === 'undefined' || ngDevMode) {
+                if (!this._dateAdapter) {
+                    throw createMissingDateImplError('DateAdapter');
+                }
+                if (!this._dateFormats) {
+                    throw createMissingDateImplError('MAT_DATE_FORMATS');
+                }
             }
             this._activeDate = this._dateAdapter.today();
         }
@@ -1436,7 +1526,7 @@
             get: function () { return this._activeDate; },
             set: function (value) {
                 var oldActiveDate = this._activeDate;
-                var validDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value)) || this._dateAdapter.today();
+                var validDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value)) || this._dateAdapter.today();
                 this._activeDate = this._dateAdapter.clampDate(validDate, this.minDate, this.maxDate);
                 if (this._dateAdapter.getYear(oldActiveDate) !== this._dateAdapter.getYear(this._activeDate)) {
                     this._init();
@@ -1453,7 +1543,7 @@
                     this._selected = value;
                 }
                 else {
-                    this._selected = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
+                    this._selected = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
                 }
                 this._setSelectedMonth(value);
             },
@@ -1464,7 +1554,7 @@
             /** The minimum selectable date. */
             get: function () { return this._minDate; },
             set: function (value) {
-                this._minDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
+                this._minDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
             },
             enumerable: false,
             configurable: true
@@ -1473,7 +1563,7 @@
             /** The maximum selectable date. */
             get: function () { return this._maxDate; },
             set: function (value) {
-                this._maxDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
+                this._maxDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
             },
             enumerable: false,
             configurable: true
@@ -1569,8 +1659,10 @@
         };
         /** Creates an MatCalendarCell for the given month. */
         MatYearView.prototype._createCellForMonth = function (month, monthName) {
-            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));
+            var date = this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), month, 1);
+            var ariaLabel = this._dateAdapter.format(date, this._dateFormats.display.monthYearA11yLabel);
+            var cellClasses = this.dateClass ? this.dateClass(date, 'year') : undefined;
+            return new MatCalendarCell(month, monthName.toLocaleUpperCase(), ariaLabel, this._shouldEnableMonth(month), cellClasses);
         };
         /** Whether the given month is enabled. */
         MatYearView.prototype._shouldEnableMonth = function (month) {
@@ -1616,13 +1708,6 @@
             }
             return false;
         };
-        /**
-         * @param obj The object to check.
-         * @returns The given object if it is both a date instance and valid, otherwise null.
-         */
-        MatYearView.prototype._getValidDateOrNull = function (obj) {
-            return (this._dateAdapter.isDateInstance(obj) && this._dateAdapter.isValid(obj)) ? obj : null;
-        };
         /** Determines whether the user has the RTL layout direction. */
         MatYearView.prototype._isRtl = function () {
             return this._dir && this._dir.value === 'rtl';
@@ -1637,34 +1722,35 @@
                 this._selectedMonth = this._getMonthInCurrentYear(value);
             }
         };
-        MatYearView.decorators = [
-            { type: i0.Component, args: [{
-                        selector: 'mat-year-view',
-                        template: "<table class=\"mat-calendar-table\" role=\"presentation\">\n  <thead class=\"mat-calendar-table-header\">\n    <tr><th class=\"mat-calendar-table-header-divider\" colspan=\"4\"></th></tr>\n  </thead>\n  <tbody mat-calendar-body\n         [label]=\"_yearLabel\"\n         [rows]=\"_months\"\n         [todayValue]=\"_todayMonth!\"\n         [startValue]=\"_selectedMonth!\"\n         [endValue]=\"_selectedMonth!\"\n         [labelMinRequiredCells]=\"2\"\n         [numCols]=\"4\"\n         [cellAspectRatio]=\"4 / 7\"\n         [activeCell]=\"_dateAdapter.getMonth(activeDate)\"\n         (selectedValueChange)=\"_monthSelected($event)\"\n         (keydown)=\"_handleCalendarBodyKeydown($event)\">\n  </tbody>\n</table>\n",
-                        exportAs: 'matYearView',
-                        encapsulation: i0.ViewEncapsulation.None,
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush
-                    },] }
-        ];
-        MatYearView.ctorParameters = function () { return [
-            { type: i0.ChangeDetectorRef },
-            { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [core.MAT_DATE_FORMATS,] }] },
-            { type: core.DateAdapter, decorators: [{ type: i0.Optional }] },
-            { type: bidi.Directionality, decorators: [{ type: i0.Optional }] }
-        ]; };
-        MatYearView.propDecorators = {
-            activeDate: [{ type: i0.Input }],
-            selected: [{ type: i0.Input }],
-            minDate: [{ type: i0.Input }],
-            maxDate: [{ type: i0.Input }],
-            dateFilter: [{ type: i0.Input }],
-            selectedChange: [{ type: i0.Output }],
-            monthSelected: [{ type: i0.Output }],
-            activeDateChange: [{ type: i0.Output }],
-            _matCalendarBody: [{ type: i0.ViewChild, args: [MatCalendarBody,] }]
-        };
         return MatYearView;
     }());
+    MatYearView.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'mat-year-view',
+                    template: "<table class=\"mat-calendar-table\" role=\"presentation\">\n  <thead class=\"mat-calendar-table-header\">\n    <tr><th class=\"mat-calendar-table-header-divider\" colspan=\"4\"></th></tr>\n  </thead>\n  <tbody mat-calendar-body\n         [label]=\"_yearLabel\"\n         [rows]=\"_months\"\n         [todayValue]=\"_todayMonth!\"\n         [startValue]=\"_selectedMonth!\"\n         [endValue]=\"_selectedMonth!\"\n         [labelMinRequiredCells]=\"2\"\n         [numCols]=\"4\"\n         [cellAspectRatio]=\"4 / 7\"\n         [activeCell]=\"_dateAdapter.getMonth(activeDate)\"\n         (selectedValueChange)=\"_monthSelected($event)\"\n         (keydown)=\"_handleCalendarBodyKeydown($event)\">\n  </tbody>\n</table>\n",
+                    exportAs: 'matYearView',
+                    encapsulation: i0.ViewEncapsulation.None,
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush
+                },] }
+    ];
+    MatYearView.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [core.MAT_DATE_FORMATS,] }] },
+        { type: core.DateAdapter, decorators: [{ type: i0.Optional }] },
+        { type: bidi.Directionality, decorators: [{ type: i0.Optional }] }
+    ]; };
+    MatYearView.propDecorators = {
+        activeDate: [{ type: i0.Input }],
+        selected: [{ type: i0.Input }],
+        minDate: [{ type: i0.Input }],
+        maxDate: [{ type: i0.Input }],
+        dateFilter: [{ type: i0.Input }],
+        dateClass: [{ type: i0.Input }],
+        selectedChange: [{ type: i0.Output }],
+        monthSelected: [{ type: i0.Output }],
+        activeDateChange: [{ type: i0.Output }],
+        _matCalendarBody: [{ type: i0.ViewChild, args: [MatCalendarBody,] }]
+    };
 
     /**
      * @license
@@ -1779,24 +1865,24 @@
             // Otherwise we are in 'multi-year' view.
             return isSameMultiYearView(this._dateAdapter, date1, date2, this.calendar.minDate, this.calendar.maxDate);
         };
-        MatCalendarHeader.decorators = [
-            { type: i0.Component, args: [{
-                        selector: 'mat-calendar-header',
-                        template: "<div class=\"mat-calendar-header\">\n  <div class=\"mat-calendar-controls\">\n    <button mat-button type=\"button\" class=\"mat-calendar-period-button\"\n            (click)=\"currentPeriodClicked()\" [attr.aria-label]=\"periodButtonLabel\"\n            cdkAriaLive=\"polite\">\n      {{periodButtonText}}\n      <div class=\"mat-calendar-arrow\"\n           [class.mat-calendar-invert]=\"calendar.currentView != 'month'\"></div>\n    </button>\n\n    <div class=\"mat-calendar-spacer\"></div>\n\n    <ng-content></ng-content>\n\n    <button mat-icon-button type=\"button\" class=\"mat-calendar-previous-button\"\n            [disabled]=\"!previousEnabled()\" (click)=\"previousClicked()\"\n            [attr.aria-label]=\"prevButtonLabel\">\n    </button>\n\n    <button mat-icon-button type=\"button\" class=\"mat-calendar-next-button\"\n            [disabled]=\"!nextEnabled()\" (click)=\"nextClicked()\"\n            [attr.aria-label]=\"nextButtonLabel\">\n    </button>\n  </div>\n</div>\n",
-                        exportAs: 'matCalendarHeader',
-                        encapsulation: i0.ViewEncapsulation.None,
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush
-                    },] }
-        ];
-        MatCalendarHeader.ctorParameters = function () { return [
-            { type: MatDatepickerIntl },
-            { type: MatCalendar, decorators: [{ type: i0.Inject, args: [i0.forwardRef(function () { return MatCalendar; }),] }] },
-            { type: core.DateAdapter, decorators: [{ type: i0.Optional }] },
-            { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [core.MAT_DATE_FORMATS,] }] },
-            { type: i0.ChangeDetectorRef }
-        ]; };
         return MatCalendarHeader;
     }());
+    MatCalendarHeader.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'mat-calendar-header',
+                    template: "<div class=\"mat-calendar-header\">\n  <div class=\"mat-calendar-controls\">\n    <button mat-button type=\"button\" class=\"mat-calendar-period-button\"\n            (click)=\"currentPeriodClicked()\" [attr.aria-label]=\"periodButtonLabel\"\n            cdkAriaLive=\"polite\">\n      {{periodButtonText}}\n      <div class=\"mat-calendar-arrow\"\n           [class.mat-calendar-invert]=\"calendar.currentView != 'month'\"></div>\n    </button>\n\n    <div class=\"mat-calendar-spacer\"></div>\n\n    <ng-content></ng-content>\n\n    <button mat-icon-button type=\"button\" class=\"mat-calendar-previous-button\"\n            [disabled]=\"!previousEnabled()\" (click)=\"previousClicked()\"\n            [attr.aria-label]=\"prevButtonLabel\">\n    </button>\n\n    <button mat-icon-button type=\"button\" class=\"mat-calendar-next-button\"\n            [disabled]=\"!nextEnabled()\" (click)=\"nextClicked()\"\n            [attr.aria-label]=\"nextButtonLabel\">\n    </button>\n  </div>\n</div>\n",
+                    exportAs: 'matCalendarHeader',
+                    encapsulation: i0.ViewEncapsulation.None,
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush
+                },] }
+    ];
+    MatCalendarHeader.ctorParameters = function () { return [
+        { type: MatDatepickerIntl },
+        { type: MatCalendar, decorators: [{ type: i0.Inject, args: [i0.forwardRef(function () { return MatCalendar; }),] }] },
+        { type: core.DateAdapter, decorators: [{ type: i0.Optional }] },
+        { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [core.MAT_DATE_FORMATS,] }] },
+        { type: i0.ChangeDetectorRef }
+    ]; };
     /**
      * A calendar that is used as part of the datepicker.
      * @docs-private
@@ -1836,11 +1922,13 @@
              * Emits whenever there is a state change that the header may need to respond to.
              */
             this.stateChanges = new rxjs.Subject();
-            if (!this._dateAdapter) {
-                throw createMissingDateImplError('DateAdapter');
-            }
-            if (!this._dateFormats) {
-                throw createMissingDateImplError('MAT_DATE_FORMATS');
+            if (typeof ngDevMode === 'undefined' || ngDevMode) {
+                if (!this._dateAdapter) {
+                    throw createMissingDateImplError('DateAdapter');
+                }
+                if (!this._dateFormats) {
+                    throw createMissingDateImplError('MAT_DATE_FORMATS');
+                }
             }
             this._intlChanges = _intl.changes.subscribe(function () {
                 _changeDetectorRef.markForCheck();
@@ -1851,7 +1939,7 @@
             /** A date representing the period (month or year) to start the calendar in. */
             get: function () { return this._startAt; },
             set: function (value) {
-                this._startAt = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
+                this._startAt = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
             },
             enumerable: false,
             configurable: true
@@ -1864,7 +1952,7 @@
                     this._selected = value;
                 }
                 else {
-                    this._selected = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
+                    this._selected = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
                 }
             },
             enumerable: false,
@@ -1874,7 +1962,7 @@
             /** The minimum selectable date. */
             get: function () { return this._minDate; },
             set: function (value) {
-                this._minDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
+                this._minDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
             },
             enumerable: false,
             configurable: true
@@ -1883,7 +1971,7 @@
             /** The maximum selectable date. */
             get: function () { return this._maxDate; },
             set: function (value) {
-                this._maxDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
+                this._maxDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
             },
             enumerable: false,
             configurable: true
@@ -1984,58 +2072,51 @@
             this.activeDate = date;
             this.currentView = view;
         };
-        /**
-         * @param obj The object to check.
-         * @returns The given object if it is both a date instance and valid, otherwise null.
-         */
-        MatCalendar.prototype._getValidDateOrNull = function (obj) {
-            return (this._dateAdapter.isDateInstance(obj) && this._dateAdapter.isValid(obj)) ? obj : null;
-        };
         /** Returns the component instance that corresponds to the current calendar view. */
         MatCalendar.prototype._getCurrentViewComponent = function () {
             return this.monthView || this.yearView || this.multiYearView;
         };
-        MatCalendar.decorators = [
-            { type: i0.Component, args: [{
-                        selector: 'mat-calendar',
-                        template: "<ng-template [cdkPortalOutlet]=\"_calendarHeaderPortal\"></ng-template>\n\n<div class=\"mat-calendar-content\" [ngSwitch]=\"currentView\" cdkMonitorSubtreeFocus tabindex=\"-1\">\n  <mat-month-view\n      *ngSwitchCase=\"'month'\"\n      [(activeDate)]=\"activeDate\"\n      [selected]=\"selected\"\n      [dateFilter]=\"dateFilter\"\n      [maxDate]=\"maxDate\"\n      [minDate]=\"minDate\"\n      [dateClass]=\"dateClass\"\n      [comparisonStart]=\"comparisonStart\"\n      [comparisonEnd]=\"comparisonEnd\"\n      (_userSelection)=\"_dateSelected($event)\">\n  </mat-month-view>\n\n  <mat-year-view\n      *ngSwitchCase=\"'year'\"\n      [(activeDate)]=\"activeDate\"\n      [selected]=\"selected\"\n      [dateFilter]=\"dateFilter\"\n      [maxDate]=\"maxDate\"\n      [minDate]=\"minDate\"\n      (monthSelected)=\"_monthSelectedInYearView($event)\"\n      (selectedChange)=\"_goToDateInView($event, 'month')\">\n  </mat-year-view>\n\n  <mat-multi-year-view\n      *ngSwitchCase=\"'multi-year'\"\n      [(activeDate)]=\"activeDate\"\n      [selected]=\"selected\"\n      [dateFilter]=\"dateFilter\"\n      [maxDate]=\"maxDate\"\n      [minDate]=\"minDate\"\n      (yearSelected)=\"_yearSelectedInMultiYearView($event)\"\n      (selectedChange)=\"_goToDateInView($event, 'year')\">\n  </mat-multi-year-view>\n</div>\n",
-                        host: {
-                            'class': 'mat-calendar',
-                        },
-                        exportAs: 'matCalendar',
-                        encapsulation: i0.ViewEncapsulation.None,
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                        providers: [MAT_SINGLE_DATE_SELECTION_MODEL_PROVIDER],
-                        styles: [".mat-calendar{display:block}.mat-calendar-header{padding:8px 8px 0 8px}.mat-calendar-content{padding:0 8px 8px 8px;outline:none}.mat-calendar-controls{display:flex;margin:5% calc(33% / 7 - 16px)}.mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:.04}.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-previous-button,.mat-calendar-next-button{position:relative}.mat-calendar-previous-button::after,.mat-calendar-next-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-previous-button,[dir=rtl] .mat-calendar-next-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}\n"]
-                    },] }
-        ];
-        MatCalendar.ctorParameters = function () { return [
-            { type: MatDatepickerIntl },
-            { type: core.DateAdapter, decorators: [{ type: i0.Optional }] },
-            { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [core.MAT_DATE_FORMATS,] }] },
-            { type: i0.ChangeDetectorRef }
-        ]; };
-        MatCalendar.propDecorators = {
-            headerComponent: [{ type: i0.Input }],
-            startAt: [{ type: i0.Input }],
-            startView: [{ type: i0.Input }],
-            selected: [{ type: i0.Input }],
-            minDate: [{ type: i0.Input }],
-            maxDate: [{ type: i0.Input }],
-            dateFilter: [{ type: i0.Input }],
-            dateClass: [{ type: i0.Input }],
-            comparisonStart: [{ type: i0.Input }],
-            comparisonEnd: [{ type: i0.Input }],
-            selectedChange: [{ type: i0.Output }],
-            yearSelected: [{ type: i0.Output }],
-            monthSelected: [{ type: i0.Output }],
-            _userSelection: [{ type: i0.Output }],
-            monthView: [{ type: i0.ViewChild, args: [MatMonthView,] }],
-            yearView: [{ type: i0.ViewChild, args: [MatYearView,] }],
-            multiYearView: [{ type: i0.ViewChild, args: [MatMultiYearView,] }]
-        };
         return MatCalendar;
     }());
+    MatCalendar.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'mat-calendar',
+                    template: "<ng-template [cdkPortalOutlet]=\"_calendarHeaderPortal\"></ng-template>\n\n<div class=\"mat-calendar-content\" [ngSwitch]=\"currentView\" cdkMonitorSubtreeFocus tabindex=\"-1\">\n  <mat-month-view\n      *ngSwitchCase=\"'month'\"\n      [(activeDate)]=\"activeDate\"\n      [selected]=\"selected\"\n      [dateFilter]=\"dateFilter\"\n      [maxDate]=\"maxDate\"\n      [minDate]=\"minDate\"\n      [dateClass]=\"dateClass\"\n      [comparisonStart]=\"comparisonStart\"\n      [comparisonEnd]=\"comparisonEnd\"\n      (_userSelection)=\"_dateSelected($event)\">\n  </mat-month-view>\n\n  <mat-year-view\n      *ngSwitchCase=\"'year'\"\n      [(activeDate)]=\"activeDate\"\n      [selected]=\"selected\"\n      [dateFilter]=\"dateFilter\"\n      [maxDate]=\"maxDate\"\n      [minDate]=\"minDate\"\n      [dateClass]=\"dateClass\"\n      (monthSelected)=\"_monthSelectedInYearView($event)\"\n      (selectedChange)=\"_goToDateInView($event, 'month')\">\n  </mat-year-view>\n\n  <mat-multi-year-view\n      *ngSwitchCase=\"'multi-year'\"\n      [(activeDate)]=\"activeDate\"\n      [selected]=\"selected\"\n      [dateFilter]=\"dateFilter\"\n      [maxDate]=\"maxDate\"\n      [minDate]=\"minDate\"\n      [dateClass]=\"dateClass\"\n      (yearSelected)=\"_yearSelectedInMultiYearView($event)\"\n      (selectedChange)=\"_goToDateInView($event, 'year')\">\n  </mat-multi-year-view>\n</div>\n",
+                    host: {
+                        'class': 'mat-calendar',
+                    },
+                    exportAs: 'matCalendar',
+                    encapsulation: i0.ViewEncapsulation.None,
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    providers: [MAT_SINGLE_DATE_SELECTION_MODEL_PROVIDER],
+                    styles: [".mat-calendar{display:block}.mat-calendar-header{padding:8px 8px 0 8px}.mat-calendar-content{padding:0 8px 8px 8px;outline:none}.mat-calendar-controls{display:flex;margin:5% calc(33% / 7 - 16px)}.mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:.04}.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-previous-button,.mat-calendar-next-button{position:relative}.mat-calendar-previous-button::after,.mat-calendar-next-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-previous-button,[dir=rtl] .mat-calendar-next-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}\n"]
+                },] }
+    ];
+    MatCalendar.ctorParameters = function () { return [
+        { type: MatDatepickerIntl },
+        { type: core.DateAdapter, decorators: [{ type: i0.Optional }] },
+        { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [core.MAT_DATE_FORMATS,] }] },
+        { type: i0.ChangeDetectorRef }
+    ]; };
+    MatCalendar.propDecorators = {
+        headerComponent: [{ type: i0.Input }],
+        startAt: [{ type: i0.Input }],
+        startView: [{ type: i0.Input }],
+        selected: [{ type: i0.Input }],
+        minDate: [{ type: i0.Input }],
+        maxDate: [{ type: i0.Input }],
+        dateFilter: [{ type: i0.Input }],
+        dateClass: [{ type: i0.Input }],
+        comparisonStart: [{ type: i0.Input }],
+        comparisonEnd: [{ type: i0.Input }],
+        selectedChange: [{ type: i0.Output }],
+        yearSelected: [{ type: i0.Output }],
+        monthSelected: [{ type: i0.Output }],
+        _userSelection: [{ type: i0.Output }],
+        monthView: [{ type: i0.ViewChild, args: [MatMonthView,] }],
+        yearView: [{ type: i0.ViewChild, args: [MatYearView,] }],
+        multiYearView: [{ type: i0.ViewChild, args: [MatMultiYearView,] }]
+    };
 
     /**
      * @license
@@ -2071,13 +2152,6 @@
         ])
     };
 
-    /**
-     * @license
-     * Copyright Google LLC All Rights Reserved.
-     *
-     * Use of this source code is governed by an MIT-style license that can be
-     * found in the LICENSE file at https://angular.io/license
-     */
     /** Used to generate a unique ID for each datepicker instance. */
     var datepickerUid = 0;
     /** Injection token that determines the scroll handling while the calendar is open. */
@@ -2179,39 +2253,39 @@
             // @breaking-change 11.0.0 Remove null check for `_model`.
             return this._model ? this._model.selection : null;
         };
-        MatDatepickerContent.decorators = [
-            { type: i0.Component, args: [{
-                        selector: 'mat-datepicker-content',
-                        template: "<mat-calendar cdkTrapFocus\n    [id]=\"datepicker.id\"\n    [ngClass]=\"datepicker.panelClass\"\n    [startAt]=\"datepicker.startAt\"\n    [startView]=\"datepicker.startView\"\n    [minDate]=\"datepicker._minDate\"\n    [maxDate]=\"datepicker._maxDate\"\n    [dateFilter]=\"datepicker._dateFilter\"\n    [headerComponent]=\"datepicker.calendarHeaderComponent\"\n    [selected]=\"_getSelected()\"\n    [dateClass]=\"datepicker.dateClass\"\n    [comparisonStart]=\"comparisonStart\"\n    [comparisonEnd]=\"comparisonEnd\"\n    [@fadeInCalendar]=\"'enter'\"\n    (yearSelected)=\"datepicker._selectYear($event)\"\n    (monthSelected)=\"datepicker._selectMonth($event)\"\n    (_userSelection)=\"_handleUserSelection($event)\">\n</mat-calendar>\n",
-                        host: {
-                            'class': 'mat-datepicker-content',
-                            '[@transformPanel]': '_animationState',
-                            '(@transformPanel.done)': '_animationDone.next()',
-                            '[class.mat-datepicker-content-touch]': 'datepicker.touchUi',
-                        },
-                        animations: [
-                            matDatepickerAnimations.transformPanel,
-                            matDatepickerAnimations.fadeInCalendar,
-                        ],
-                        exportAs: 'matDatepickerContent',
-                        encapsulation: i0.ViewEncapsulation.None,
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                        inputs: ['color'],
-                        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}}\n"]
-                    },] }
-        ];
-        MatDatepickerContent.ctorParameters = function () { return [
-            { type: i0.ElementRef },
-            { type: i0.ChangeDetectorRef },
-            { type: MatDateSelectionModel },
-            { type: core.DateAdapter },
-            { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [MAT_DATE_RANGE_SELECTION_STRATEGY,] }] }
-        ]; };
-        MatDatepickerContent.propDecorators = {
-            _calendar: [{ type: i0.ViewChild, args: [MatCalendar,] }]
-        };
         return MatDatepickerContent;
     }(_MatDatepickerContentMixinBase));
+    MatDatepickerContent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'mat-datepicker-content',
+                    template: "<mat-calendar cdkTrapFocus\n    [id]=\"datepicker.id\"\n    [ngClass]=\"datepicker.panelClass\"\n    [startAt]=\"datepicker.startAt\"\n    [startView]=\"datepicker.startView\"\n    [minDate]=\"datepicker._getMinDate()\"\n    [maxDate]=\"datepicker._getMaxDate()\"\n    [dateFilter]=\"datepicker._getDateFilter()\"\n    [headerComponent]=\"datepicker.calendarHeaderComponent\"\n    [selected]=\"_getSelected()\"\n    [dateClass]=\"datepicker.dateClass\"\n    [comparisonStart]=\"comparisonStart\"\n    [comparisonEnd]=\"comparisonEnd\"\n    [@fadeInCalendar]=\"'enter'\"\n    (yearSelected)=\"datepicker._selectYear($event)\"\n    (monthSelected)=\"datepicker._selectMonth($event)\"\n    (_userSelection)=\"_handleUserSelection($event)\">\n</mat-calendar>\n",
+                    host: {
+                        'class': 'mat-datepicker-content',
+                        '[@transformPanel]': '_animationState',
+                        '(@transformPanel.done)': '_animationDone.next()',
+                        '[class.mat-datepicker-content-touch]': 'datepicker.touchUi',
+                    },
+                    animations: [
+                        matDatepickerAnimations.transformPanel,
+                        matDatepickerAnimations.fadeInCalendar,
+                    ],
+                    exportAs: 'matDatepickerContent',
+                    encapsulation: i0.ViewEncapsulation.None,
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    inputs: ['color'],
+                    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}}\n"]
+                },] }
+    ];
+    MatDatepickerContent.ctorParameters = function () { return [
+        { type: i0.ElementRef },
+        { type: i0.ChangeDetectorRef },
+        { type: MatDateSelectionModel },
+        { type: core.DateAdapter },
+        { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [MAT_DATE_RANGE_SELECTION_STRATEGY,] }] }
+    ]; };
+    MatDatepickerContent.propDecorators = {
+        _calendar: [{ type: i0.ViewChild, args: [MatCalendar,] }]
+    };
     /** Base class for a datepicker. */
     var MatDatepickerBase = /** @class */ (function () {
         function MatDatepickerBase(_dialog, _overlay, _ngZone, _viewContainerRef, scrollStrategy, _dateAdapter, _dir, _document, _model) {
@@ -2250,9 +2324,11 @@
             this.id = "mat-datepicker-" + datepickerUid++;
             /** The element that was focused before the datepicker was opened. */
             this._focusedElementBeforeOpen = null;
+            /** Unique class that will be added to the backdrop so that the test harnesses can look it up. */
+            this._backdropHarnessClass = this.id + "-backdrop";
             /** Emits when the datepicker's state changes. */
             this._stateChanges = new rxjs.Subject();
-            if (!this._dateAdapter) {
+            if (!this._dateAdapter && (typeof ngDevMode === 'undefined' || ngDevMode)) {
                 throw createMissingDateImplError('DateAdapter');
             }
             this._scrollStrategy = scrollStrategy;
@@ -2265,7 +2341,7 @@
                 return this._startAt || (this._datepickerInput ? this._datepickerInput.getStartValue() : null);
             },
             set: function (value) {
-                this._startAt = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
+                this._startAt = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
             },
             enumerable: false,
             configurable: true
@@ -2313,33 +2389,23 @@
         Object.defineProperty(MatDatepickerBase.prototype, "opened", {
             /** Whether the calendar is open. */
             get: function () { return this._opened; },
-            set: function (value) { value ? this.open() : this.close(); },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MatDatepickerBase.prototype, "_minDate", {
-            /** The minimum selectable date. */
-            get: function () {
-                return this._datepickerInput && this._datepickerInput.min;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MatDatepickerBase.prototype, "_maxDate", {
-            /** The maximum selectable date. */
-            get: function () {
-                return this._datepickerInput && this._datepickerInput.max;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MatDatepickerBase.prototype, "_dateFilter", {
-            get: function () {
-                return this._datepickerInput && this._datepickerInput.dateFilter;
+            set: function (value) {
+                coercion.coerceBooleanProperty(value) ? this.open() : this.close();
             },
             enumerable: false,
             configurable: true
         });
+        /** The minimum selectable date. */
+        MatDatepickerBase.prototype._getMinDate = function () {
+            return this._datepickerInput && this._datepickerInput.min;
+        };
+        /** The maximum selectable date. */
+        MatDatepickerBase.prototype._getMaxDate = function () {
+            return this._datepickerInput && this._datepickerInput.max;
+        };
+        MatDatepickerBase.prototype._getDateFilter = function () {
+            return this._datepickerInput && this._datepickerInput.dateFilter;
+        };
         MatDatepickerBase.prototype.ngOnChanges = function (changes) {
             var positionChange = changes['xPosition'] || changes['yPosition'];
             if (positionChange && !positionChange.firstChange && this._popupRef) {
@@ -2375,7 +2441,7 @@
          */
         MatDatepickerBase.prototype._registerInput = function (input) {
             var _this = this;
-            if (this._datepickerInput) {
+            if (this._datepickerInput && (typeof ngDevMode === 'undefined' || ngDevMode)) {
                 throw Error('A MatDatepicker can only be associated with a single input.');
             }
             this._inputStateChanges.unsubscribe();
@@ -2389,7 +2455,7 @@
             if (this._opened || this.disabled) {
                 return;
             }
-            if (!this._datepickerInput) {
+            if (!this._datepickerInput && (typeof ngDevMode === 'undefined' || ngDevMode)) {
                 throw Error('Attempted to open an MatDatepicker with no associated input.');
             }
             if (this._document) {
@@ -2455,6 +2521,7 @@
                 // datepicker dialog behaves consistently even if the user changed the defaults.
                 hasBackdrop: true,
                 disableClose: false,
+                backdropClass: ['cdk-overlay-dark-backdrop', this._backdropHarnessClass],
                 width: '',
                 height: '',
                 minWidth: '',
@@ -2483,7 +2550,7 @@
             this._popupComponentRef = this._popupRef.attach(portal$1);
             this._forwardContentValues(this._popupComponentRef.instance);
             // Update the position once the calendar has rendered.
-            this._ngZone.onStable.asObservable().pipe(operators.take(1)).subscribe(function () {
+            this._ngZone.onStable.pipe(operators.take(1)).subscribe(function () {
                 _this._popupRef.updatePosition();
             });
         };
@@ -2504,7 +2571,7 @@
             var overlayConfig = new overlay.OverlayConfig({
                 positionStrategy: this._setConnectedPositions(positionStrategy),
                 hasBackdrop: true,
-                backdropClass: 'mat-overlay-transparent-backdrop',
+                backdropClass: ['mat-overlay-transparent-backdrop', this._backdropHarnessClass],
                 direction: this._dir,
                 scrollStrategy: this._scrollStrategy(),
                 panelClass: 'mat-datepicker-popup',
@@ -2562,54 +2629,40 @@
                 }
             ]);
         };
-        /**
-         * @param obj The object to check.
-         * @returns The given object if it is both a date instance and valid, otherwise null.
-         */
-        MatDatepickerBase.prototype._getValidDateOrNull = function (obj) {
-            return (this._dateAdapter.isDateInstance(obj) && this._dateAdapter.isValid(obj)) ? obj : null;
-        };
-        MatDatepickerBase.decorators = [
-            { type: i0.Directive }
-        ];
-        MatDatepickerBase.ctorParameters = function () { return [
-            { type: dialog.MatDialog },
-            { type: overlay.Overlay },
-            { type: i0.NgZone },
-            { type: i0.ViewContainerRef },
-            { type: undefined, decorators: [{ type: i0.Inject, args: [MAT_DATEPICKER_SCROLL_STRATEGY,] }] },
-            { type: core.DateAdapter, decorators: [{ type: i0.Optional }] },
-            { type: bidi.Directionality, decorators: [{ type: i0.Optional }] },
-            { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [common.DOCUMENT,] }] },
-            { type: MatDateSelectionModel }
-        ]; };
-        MatDatepickerBase.propDecorators = {
-            calendarHeaderComponent: [{ type: i0.Input }],
-            startAt: [{ type: i0.Input }],
-            startView: [{ type: i0.Input }],
-            color: [{ type: i0.Input }],
-            touchUi: [{ type: i0.Input }],
-            disabled: [{ type: i0.Input }],
-            xPosition: [{ type: i0.Input }],
-            yPosition: [{ type: i0.Input }],
-            yearSelected: [{ type: i0.Output }],
-            monthSelected: [{ type: i0.Output }],
-            panelClass: [{ type: i0.Input }],
-            dateClass: [{ type: i0.Input }],
-            openedStream: [{ type: i0.Output, args: ['opened',] }],
-            closedStream: [{ type: i0.Output, args: ['closed',] }],
-            opened: [{ type: i0.Input }]
-        };
         return MatDatepickerBase;
     }());
+    MatDatepickerBase.decorators = [
+        { type: i0.Directive }
+    ];
+    MatDatepickerBase.ctorParameters = function () { return [
+        { type: dialog.MatDialog },
+        { type: overlay.Overlay },
+        { type: i0.NgZone },
+        { type: i0.ViewContainerRef },
+        { type: undefined, decorators: [{ type: i0.Inject, args: [MAT_DATEPICKER_SCROLL_STRATEGY,] }] },
+        { type: core.DateAdapter, decorators: [{ type: i0.Optional }] },
+        { type: bidi.Directionality, decorators: [{ type: i0.Optional }] },
+        { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [common.DOCUMENT,] }] },
+        { type: MatDateSelectionModel }
+    ]; };
+    MatDatepickerBase.propDecorators = {
+        calendarHeaderComponent: [{ type: i0.Input }],
+        startAt: [{ type: i0.Input }],
+        startView: [{ type: i0.Input }],
+        color: [{ type: i0.Input }],
+        touchUi: [{ type: i0.Input }],
+        disabled: [{ type: i0.Input }],
+        xPosition: [{ type: i0.Input }],
+        yPosition: [{ type: i0.Input }],
+        yearSelected: [{ type: i0.Output }],
+        monthSelected: [{ type: i0.Output }],
+        panelClass: [{ type: i0.Input }],
+        dateClass: [{ type: i0.Input }],
+        openedStream: [{ type: i0.Output, args: ['opened',] }],
+        closedStream: [{ type: i0.Output, args: ['closed',] }],
+        opened: [{ type: i0.Input }]
+    };
 
-    /**
-     * @license
-     * Copyright Google LLC All Rights Reserved.
-     *
-     * Use of this source code is governed by an MIT-style license that can be
-     * found in the LICENSE file at https://angular.io/license
-     */
     // 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.
@@ -2619,18 +2672,18 @@
         function MatDatepicker() {
             return _super !== null && _super.apply(this, arguments) || this;
         }
-        MatDatepicker.decorators = [
-            { type: i0.Component, args: [{
-                        selector: 'mat-datepicker',
-                        template: '',
-                        exportAs: 'matDatepicker',
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                        encapsulation: i0.ViewEncapsulation.None,
-                        providers: [MAT_SINGLE_DATE_SELECTION_MODEL_PROVIDER]
-                    },] }
-        ];
         return MatDatepicker;
     }(MatDatepickerBase));
+    MatDatepicker.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'mat-datepicker',
+                    template: '',
+                    exportAs: 'matDatepicker',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    encapsulation: i0.ViewEncapsulation.None,
+                    providers: [MAT_SINGLE_DATE_SELECTION_MODEL_PROVIDER]
+                },] }
+    ];
 
     /**
      * @license
@@ -2683,14 +2736,14 @@
             };
             /** The form control validator for the date filter. */
             this._filterValidator = function (control) {
-                var controlValue = _this._getValidDateOrNull(_this._dateAdapter.deserialize(control.value));
+                var controlValue = _this._dateAdapter.getValidDateOrNull(_this._dateAdapter.deserialize(control.value));
                 var dateFilter = _this._getDateFilter();
                 return !dateFilter || !controlValue || dateFilter(controlValue) ?
                     null : { 'matDatepickerFilter': true };
             };
             /** The form control validator for the min date. */
             this._minValidator = function (control) {
-                var controlValue = _this._getValidDateOrNull(_this._dateAdapter.deserialize(control.value));
+                var controlValue = _this._dateAdapter.getValidDateOrNull(_this._dateAdapter.deserialize(control.value));
                 var min = _this._getMinDate();
                 return (!min || !controlValue ||
                     _this._dateAdapter.compareDate(min, controlValue) <= 0) ?
@@ -2698,7 +2751,7 @@
             };
             /** The form control validator for the max date. */
             this._maxValidator = function (control) {
-                var controlValue = _this._getValidDateOrNull(_this._dateAdapter.deserialize(control.value));
+                var controlValue = _this._dateAdapter.getValidDateOrNull(_this._dateAdapter.deserialize(control.value));
                 var max = _this._getMaxDate();
                 return (!max || !controlValue ||
                     _this._dateAdapter.compareDate(max, controlValue) >= 0) ?
@@ -2706,11 +2759,13 @@
             };
             /** Whether the last value set on the input was valid. */
             this._lastValueValid = false;
-            if (!this._dateAdapter) {
-                throw createMissingDateImplError('DateAdapter');
-            }
-            if (!this._dateFormats) {
-                throw createMissingDateImplError('MAT_DATE_FORMATS');
+            if (typeof ngDevMode === 'undefined' || ngDevMode) {
+                if (!this._dateAdapter) {
+                    throw createMissingDateImplError('DateAdapter');
+                }
+                if (!this._dateFormats) {
+                    throw createMissingDateImplError('MAT_DATE_FORMATS');
+                }
             }
             // Update the displayed date when the locale changes.
             this._localeSubscription = _dateAdapter.localeChanges.subscribe(function () {
@@ -2725,7 +2780,7 @@
             set: function (value) {
                 value = this._dateAdapter.deserialize(value);
                 this._lastValueValid = this._isValidValue(value);
-                value = this._getValidDateOrNull(value);
+                value = this._dateAdapter.getValidDateOrNull(value);
                 var oldDate = this.value;
                 this._assignValue(value);
                 this._formatValue(value);
@@ -2839,7 +2894,7 @@
             var lastValueWasValid = this._lastValueValid;
             var date = this._dateAdapter.parse(value, this._dateFormats.parse.dateInput);
             this._lastValueValid = this._isValidValue(date);
-            date = this._getValidDateOrNull(date);
+            date = this._dateAdapter.getValidDateOrNull(date);
             if (!this._dateAdapter.sameDate(date, this.value)) {
                 this._assignValue(date);
                 this._cvaOnChange(date);
@@ -2873,13 +2928,6 @@
             this._elementRef.nativeElement.value =
                 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.
-         */
-        MatDatepickerInputBase.prototype._getValidDateOrNull = function (obj) {
-            return (this._dateAdapter.isDateInstance(obj) && this._dateAdapter.isValid(obj)) ? obj : null;
-        };
         /** Assigns a value to the model. */
         MatDatepickerInputBase.prototype._assignValue = function (value) {
             // We may get some incoming values before the model was
@@ -2903,30 +2951,23 @@
         MatDatepickerInputBase.prototype._parentDisabled = function () {
             return false;
         };
-        MatDatepickerInputBase.decorators = [
-            { type: i0.Directive }
-        ];
-        MatDatepickerInputBase.ctorParameters = function () { return [
-            { type: i0.ElementRef },
-            { type: core.DateAdapter, decorators: [{ type: i0.Optional }] },
-            { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [core.MAT_DATE_FORMATS,] }] }
-        ]; };
-        MatDatepickerInputBase.propDecorators = {
-            value: [{ type: i0.Input }],
-            disabled: [{ type: i0.Input }],
-            dateChange: [{ type: i0.Output }],
-            dateInput: [{ type: i0.Output }]
-        };
         return MatDatepickerInputBase;
     }());
+    MatDatepickerInputBase.decorators = [
+        { type: i0.Directive }
+    ];
+    MatDatepickerInputBase.ctorParameters = function () { return [
+        { type: i0.ElementRef },
+        { type: core.DateAdapter, decorators: [{ type: i0.Optional }] },
+        { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [core.MAT_DATE_FORMATS,] }] }
+    ]; };
+    MatDatepickerInputBase.propDecorators = {
+        value: [{ type: i0.Input }],
+        disabled: [{ type: i0.Input }],
+        dateChange: [{ type: i0.Output }],
+        dateInput: [{ type: i0.Output }]
+    };
 
-    /**
-     * @license
-     * Copyright Google LLC All Rights Reserved.
-     *
-     * Use of this source code is governed by an MIT-style license that can be
-     * found in the LICENSE file at https://angular.io/license
-     */
     /** @docs-private */
     var MAT_DATEPICKER_VALUE_ACCESSOR = {
         provide: forms.NG_VALUE_ACCESSOR,
@@ -2963,7 +3004,7 @@
             /** The minimum valid date. */
             get: function () { return this._min; },
             set: function (value) {
-                this._min = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
+                this._min = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
                 this._validatorOnChange();
             },
             enumerable: false,
@@ -2973,7 +3014,7 @@
             /** The maximum valid date. */
             get: function () { return this._max; },
             set: function (value) {
-                this._max = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
+                this._max = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
                 this._validatorOnChange();
             },
             enumerable: false,
@@ -3040,42 +3081,46 @@
         MatDatepickerInput.prototype._canEmitChangeEvent = function () {
             return true;
         };
-        MatDatepickerInput.decorators = [
-            { type: i0.Directive, args: [{
-                        selector: 'input[matDatepicker]',
-                        providers: [
-                            MAT_DATEPICKER_VALUE_ACCESSOR,
-                            MAT_DATEPICKER_VALIDATORS,
-                            { provide: input.MAT_INPUT_VALUE_ACCESSOR, useExisting: MatDatepickerInput },
-                        ],
-                        host: {
-                            '[attr.aria-haspopup]': '_datepicker ? "dialog" : null',
-                            '[attr.aria-owns]': '(_datepicker?.opened && _datepicker.id) || null',
-                            '[attr.min]': 'min ? _dateAdapter.toIso8601(min) : null',
-                            '[attr.max]': 'max ? _dateAdapter.toIso8601(max) : null',
-                            '[disabled]': 'disabled',
-                            '(input)': '_onInput($event.target.value)',
-                            '(change)': '_onChange()',
-                            '(blur)': '_onBlur()',
-                            '(keydown)': '_onKeydown($event)',
-                        },
-                        exportAs: 'matDatepickerInput',
-                    },] }
-        ];
-        MatDatepickerInput.ctorParameters = function () { return [
-            { type: i0.ElementRef },
-            { type: core.DateAdapter, decorators: [{ type: i0.Optional }] },
-            { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [core.MAT_DATE_FORMATS,] }] },
-            { type: formField.MatFormField, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [formField.MAT_FORM_FIELD,] }] }
-        ]; };
-        MatDatepickerInput.propDecorators = {
-            matDatepicker: [{ type: i0.Input }],
-            min: [{ type: i0.Input }],
-            max: [{ type: i0.Input }],
-            dateFilter: [{ type: i0.Input, args: ['matDatepickerFilter',] }]
-        };
         return MatDatepickerInput;
     }(MatDatepickerInputBase));
+    MatDatepickerInput.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: 'input[matDatepicker]',
+                    providers: [
+                        MAT_DATEPICKER_VALUE_ACCESSOR,
+                        MAT_DATEPICKER_VALIDATORS,
+                        { provide: input.MAT_INPUT_VALUE_ACCESSOR, useExisting: MatDatepickerInput },
+                    ],
+                    host: {
+                        'class': 'mat-datepicker-input',
+                        '[attr.aria-haspopup]': '_datepicker ? "dialog" : null',
+                        '[attr.aria-owns]': '(_datepicker?.opened && _datepicker.id) || null',
+                        '[attr.min]': 'min ? _dateAdapter.toIso8601(min) : null',
+                        '[attr.max]': 'max ? _dateAdapter.toIso8601(max) : null',
+                        // Used by the test harness to tie this input to its calendar. We can't depend on
+                        // `aria-owns` for this, because it's only defined while the calendar is open.
+                        '[attr.data-mat-calendar]': '_datepicker ? _datepicker.id : null',
+                        '[disabled]': 'disabled',
+                        '(input)': '_onInput($event.target.value)',
+                        '(change)': '_onChange()',
+                        '(blur)': '_onBlur()',
+                        '(keydown)': '_onKeydown($event)',
+                    },
+                    exportAs: 'matDatepickerInput',
+                },] }
+    ];
+    MatDatepickerInput.ctorParameters = function () { return [
+        { type: i0.ElementRef },
+        { type: core.DateAdapter, decorators: [{ type: i0.Optional }] },
+        { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [core.MAT_DATE_FORMATS,] }] },
+        { type: formField.MatFormField, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [formField.MAT_FORM_FIELD,] }] }
+    ]; };
+    MatDatepickerInput.propDecorators = {
+        matDatepicker: [{ type: i0.Input }],
+        min: [{ type: i0.Input }],
+        max: [{ type: i0.Input }],
+        dateFilter: [{ type: i0.Input, args: ['matDatepickerFilter',] }]
+    };
 
     /**
      * @license
@@ -3088,13 +3133,13 @@
     var MatDatepickerToggleIcon = /** @class */ (function () {
         function MatDatepickerToggleIcon() {
         }
-        MatDatepickerToggleIcon.decorators = [
-            { type: i0.Directive, args: [{
-                        selector: '[matDatepickerToggleIcon]'
-                    },] }
-        ];
         return MatDatepickerToggleIcon;
     }());
+    MatDatepickerToggleIcon.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[matDatepickerToggleIcon]'
+                },] }
+    ];
     var MatDatepickerToggle = /** @class */ (function () {
         function MatDatepickerToggle(_intl, _changeDetectorRef, defaultTabIndex) {
             this._intl = _intl;
@@ -3145,49 +3190,44 @@
             this._stateChanges.unsubscribe();
             this._stateChanges = rxjs.merge(this._intl.changes, datepickerStateChanged, inputStateChanged, datepickerToggled).subscribe(function () { return _this._changeDetectorRef.markForCheck(); });
         };
-        MatDatepickerToggle.decorators = [
-            { type: i0.Component, args: [{
-                        selector: 'mat-datepicker-toggle',
-                        template: "<button\n  #button\n  mat-icon-button\n  type=\"button\"\n  [attr.aria-haspopup]=\"datepicker ? 'dialog' : null\"\n  [attr.aria-label]=\"_intl.openCalendarLabel\"\n  [attr.tabindex]=\"disabled ? -1 : tabIndex\"\n  [disabled]=\"disabled\"\n  [disableRipple]=\"disableRipple\"\n  (click)=\"_open($event)\">\n\n  <svg\n    *ngIf=\"!_customIcon\"\n    class=\"mat-datepicker-toggle-default-icon\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    height=\"24px\"\n    fill=\"currentColor\"\n    focusable=\"false\">\n    <path d=\"M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z\"/>\n  </svg>\n\n  <ng-content select=\"[matDatepickerToggleIcon]\"></ng-content>\n</button>\n",
-                        host: {
-                            'class': 'mat-datepicker-toggle',
-                            // Always set the tabindex to -1 so that it doesn't overlap with any custom tabindex the
-                            // consumer may have provided, while still being able to receive focus.
-                            '[attr.tabindex]': 'disabled ? null : -1',
-                            '[class.mat-datepicker-toggle-active]': 'datepicker && datepicker.opened',
-                            '[class.mat-accent]': 'datepicker && datepicker.color === "accent"',
-                            '[class.mat-warn]': 'datepicker && datepicker.color === "warn"',
-                            '(focus)': '_button.focus()',
-                        },
-                        exportAs: 'matDatepickerToggle',
-                        encapsulation: i0.ViewEncapsulation.None,
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                        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}\n"]
-                    },] }
-        ];
-        MatDatepickerToggle.ctorParameters = function () { return [
-            { type: MatDatepickerIntl },
-            { type: i0.ChangeDetectorRef },
-            { type: String, decorators: [{ type: i0.Attribute, args: ['tabindex',] }] }
-        ]; };
-        MatDatepickerToggle.propDecorators = {
-            datepicker: [{ type: i0.Input, args: ['for',] }],
-            tabIndex: [{ type: i0.Input }],
-            disabled: [{ type: i0.Input }],
-            disableRipple: [{ type: i0.Input }],
-            _customIcon: [{ type: i0.ContentChild, args: [MatDatepickerToggleIcon,] }],
-            _button: [{ type: i0.ViewChild, args: ['button',] }]
-        };
         return MatDatepickerToggle;
     }());
+    MatDatepickerToggle.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'mat-datepicker-toggle',
+                    template: "<button\n  #button\n  mat-icon-button\n  type=\"button\"\n  [attr.aria-haspopup]=\"datepicker ? 'dialog' : null\"\n  [attr.aria-label]=\"_intl.openCalendarLabel\"\n  [attr.tabindex]=\"disabled ? -1 : tabIndex\"\n  [disabled]=\"disabled\"\n  [disableRipple]=\"disableRipple\"\n  (click)=\"_open($event)\">\n\n  <svg\n    *ngIf=\"!_customIcon\"\n    class=\"mat-datepicker-toggle-default-icon\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    height=\"24px\"\n    fill=\"currentColor\"\n    focusable=\"false\">\n    <path d=\"M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z\"/>\n  </svg>\n\n  <ng-content select=\"[matDatepickerToggleIcon]\"></ng-content>\n</button>\n",
+                    host: {
+                        'class': 'mat-datepicker-toggle',
+                        // Always set the tabindex to -1 so that it doesn't overlap with any custom tabindex the
+                        // consumer may have provided, while still being able to receive focus.
+                        '[attr.tabindex]': 'disabled ? null : -1',
+                        '[class.mat-datepicker-toggle-active]': 'datepicker && datepicker.opened',
+                        '[class.mat-accent]': 'datepicker && datepicker.color === "accent"',
+                        '[class.mat-warn]': 'datepicker && datepicker.color === "warn"',
+                        // Used by the test harness to tie this toggle to its datepicker.
+                        '[attr.data-mat-calendar]': 'datepicker ? datepicker.id : null',
+                        '(focus)': '_button.focus()',
+                    },
+                    exportAs: 'matDatepickerToggle',
+                    encapsulation: i0.ViewEncapsulation.None,
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    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}\n"]
+                },] }
+    ];
+    MatDatepickerToggle.ctorParameters = function () { return [
+        { type: MatDatepickerIntl },
+        { type: i0.ChangeDetectorRef },
+        { type: String, decorators: [{ type: i0.Attribute, args: ['tabindex',] }] }
+    ]; };
+    MatDatepickerToggle.propDecorators = {
+        datepicker: [{ type: i0.Input, args: ['for',] }],
+        tabIndex: [{ type: i0.Input }],
+        disabled: [{ type: i0.Input }],
+        disableRipple: [{ type: i0.Input }],
+        _customIcon: [{ type: i0.ContentChild, args: [MatDatepickerToggleIcon,] }],
+        _button: [{ type: i0.ViewChild, args: ['button',] }]
+    };
 
-    /**
-     * @license
-     * Copyright Google LLC All Rights Reserved.
-     *
-     * Use of this source code is governed by an MIT-style license that can be
-     * found in the LICENSE file at https://angular.io/license
-     */
     /**
      * Used to provide the date range input wrapper component
      * to the parts without circular dependencies.
@@ -3268,21 +3308,21 @@
         MatDateRangeInputPartBase.prototype._parentDisabled = function () {
             return this._rangeInput._groupDisabled;
         };
-        MatDateRangeInputPartBase.decorators = [
-            { type: i0.Directive }
-        ];
-        MatDateRangeInputPartBase.ctorParameters = function () { return [
-            { type: undefined, decorators: [{ type: i0.Inject, args: [MAT_DATE_RANGE_INPUT_PARENT,] }] },
-            { type: i0.ElementRef },
-            { type: core.ErrorStateMatcher },
-            { type: i0.Injector },
-            { type: forms.NgForm, decorators: [{ type: i0.Optional }] },
-            { type: forms.FormGroupDirective, decorators: [{ type: i0.Optional }] },
-            { type: core.DateAdapter, decorators: [{ type: i0.Optional }] },
-            { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [core.MAT_DATE_FORMATS,] }] }
-        ]; };
         return MatDateRangeInputPartBase;
     }(MatDatepickerInputBase));
+    MatDateRangeInputPartBase.decorators = [
+        { type: i0.Directive }
+    ];
+    MatDateRangeInputPartBase.ctorParameters = function () { return [
+        { type: undefined, decorators: [{ type: i0.Inject, args: [MAT_DATE_RANGE_INPUT_PARENT,] }] },
+        { type: i0.ElementRef },
+        { type: core.ErrorStateMatcher },
+        { type: i0.Injector },
+        { type: forms.NgForm, decorators: [{ type: i0.Optional }] },
+        { type: forms.FormGroupDirective, decorators: [{ type: i0.Optional }] },
+        { type: core.DateAdapter, decorators: [{ type: i0.Optional }] },
+        { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [core.MAT_DATE_FORMATS,] }] }
+    ]; };
     var _MatDateRangeInputBase = 
     // Needs to be `as any`, because the base class is abstract.
     core.mixinErrorState(MatDateRangeInputPartBase);
@@ -3297,7 +3337,7 @@
             _super.call(this, rangeInput, elementRef, defaultErrorStateMatcher, injector, parentForm, parentFormGroup, dateAdapter, dateFormats) || this;
             /** Validator that checks that the start date isn't after the end date. */
             _this._startValidator = function (control) {
-                var start = _this._getValidDateOrNull(_this._dateAdapter.deserialize(control.value));
+                var start = _this._dateAdapter.getValidDateOrNull(_this._dateAdapter.deserialize(control.value));
                 var end = _this._model ? _this._model.selection.end : null;
                 return (!start || !end ||
                     _this._dateAdapter.compareDate(start, end) <= 0) ?
@@ -3330,41 +3370,41 @@
             var value = element.value;
             return value.length > 0 ? value : element.placeholder;
         };
-        MatStartDate.decorators = [
-            { type: i0.Directive, args: [{
-                        selector: 'input[matStartDate]',
-                        host: {
-                            'class': 'mat-date-range-input-inner',
-                            '[disabled]': 'disabled',
-                            '(input)': '_onInput($event.target.value)',
-                            '(change)': '_onChange()',
-                            '(keydown)': '_onKeydown($event)',
-                            '[attr.id]': '_rangeInput.id',
-                            '[attr.aria-haspopup]': '_rangeInput.rangePicker ? "dialog" : null',
-                            '[attr.aria-owns]': '(_rangeInput.rangePicker?.opened && _rangeInput.rangePicker.id) || null',
-                            '[attr.min]': '_getMinDate() ? _dateAdapter.toIso8601(_getMinDate()) : null',
-                            '[attr.max]': '_getMaxDate() ? _dateAdapter.toIso8601(_getMaxDate()) : null',
-                            '(blur)': '_onBlur()',
-                            'type': 'text',
-                        },
-                        providers: [
-                            { provide: forms.NG_VALUE_ACCESSOR, useExisting: MatStartDate, multi: true },
-                            { provide: forms.NG_VALIDATORS, useExisting: MatStartDate, multi: true }
-                        ]
-                    },] }
-        ];
-        MatStartDate.ctorParameters = function () { return [
-            { type: undefined, decorators: [{ type: i0.Inject, args: [MAT_DATE_RANGE_INPUT_PARENT,] }] },
-            { type: i0.ElementRef },
-            { type: core.ErrorStateMatcher },
-            { type: i0.Injector },
-            { type: forms.NgForm, decorators: [{ type: i0.Optional }] },
-            { type: forms.FormGroupDirective, decorators: [{ type: i0.Optional }] },
-            { type: core.DateAdapter, decorators: [{ type: i0.Optional }] },
-            { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [core.MAT_DATE_FORMATS,] }] }
-        ]; };
         return MatStartDate;
     }(_MatDateRangeInputBase));
+    MatStartDate.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: 'input[matStartDate]',
+                    host: {
+                        'class': 'mat-start-date mat-date-range-input-inner',
+                        '[disabled]': 'disabled',
+                        '(input)': '_onInput($event.target.value)',
+                        '(change)': '_onChange()',
+                        '(keydown)': '_onKeydown($event)',
+                        '[attr.id]': '_rangeInput.id',
+                        '[attr.aria-haspopup]': '_rangeInput.rangePicker ? "dialog" : null',
+                        '[attr.aria-owns]': '(_rangeInput.rangePicker?.opened && _rangeInput.rangePicker.id) || null',
+                        '[attr.min]': '_getMinDate() ? _dateAdapter.toIso8601(_getMinDate()) : null',
+                        '[attr.max]': '_getMaxDate() ? _dateAdapter.toIso8601(_getMaxDate()) : null',
+                        '(blur)': '_onBlur()',
+                        'type': 'text',
+                    },
+                    providers: [
+                        { provide: forms.NG_VALUE_ACCESSOR, useExisting: MatStartDate, multi: true },
+                        { provide: forms.NG_VALIDATORS, useExisting: MatStartDate, multi: true }
+                    ]
+                },] }
+    ];
+    MatStartDate.ctorParameters = function () { return [
+        { type: undefined, decorators: [{ type: i0.Inject, args: [MAT_DATE_RANGE_INPUT_PARENT,] }] },
+        { type: i0.ElementRef },
+        { type: core.ErrorStateMatcher },
+        { type: i0.Injector },
+        { type: forms.NgForm, decorators: [{ type: i0.Optional }] },
+        { type: forms.FormGroupDirective, decorators: [{ type: i0.Optional }] },
+        { type: core.DateAdapter, decorators: [{ type: i0.Optional }] },
+        { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [core.MAT_DATE_FORMATS,] }] }
+    ]; };
     /** Input for entering the end date in a `mat-date-range-input`. */
     var MatEndDate = /** @class */ (function (_super) {
         __extends(MatEndDate, _super);
@@ -3376,7 +3416,7 @@
             _super.call(this, rangeInput, elementRef, defaultErrorStateMatcher, injector, parentForm, parentFormGroup, dateAdapter, dateFormats) || this;
             /** Validator that checks that the end date isn't before the start date. */
             _this._endValidator = function (control) {
-                var end = _this._getValidDateOrNull(_this._dateAdapter.deserialize(control.value));
+                var end = _this._dateAdapter.getValidDateOrNull(_this._dateAdapter.deserialize(control.value));
                 var start = _this._model ? _this._model.selection.start : null;
                 return (!end || !start ||
                     _this._dateAdapter.compareDate(end, start) >= 0) ?
@@ -3405,77 +3445,40 @@
             }
             _super.prototype._onKeydown.call(this, event);
         };
-        MatEndDate.decorators = [
-            { type: i0.Directive, args: [{
-                        selector: 'input[matEndDate]',
-                        host: {
-                            'class': 'mat-date-range-input-inner',
-                            '[disabled]': 'disabled',
-                            '(input)': '_onInput($event.target.value)',
-                            '(change)': '_onChange()',
-                            '(keydown)': '_onKeydown($event)',
-                            '[attr.aria-haspopup]': '_rangeInput.rangePicker ? "dialog" : null',
-                            '[attr.aria-owns]': '(_rangeInput.rangePicker?.opened && _rangeInput.rangePicker.id) || null',
-                            '[attr.min]': '_getMinDate() ? _dateAdapter.toIso8601(_getMinDate()) : null',
-                            '[attr.max]': '_getMaxDate() ? _dateAdapter.toIso8601(_getMaxDate()) : null',
-                            '(blur)': '_onBlur()',
-                            'type': 'text',
-                        },
-                        providers: [
-                            { provide: forms.NG_VALUE_ACCESSOR, useExisting: MatEndDate, multi: true },
-                            { provide: forms.NG_VALIDATORS, useExisting: MatEndDate, multi: true }
-                        ]
-                    },] }
-        ];
-        MatEndDate.ctorParameters = function () { return [
-            { type: undefined, decorators: [{ type: i0.Inject, args: [MAT_DATE_RANGE_INPUT_PARENT,] }] },
-            { type: i0.ElementRef },
-            { type: core.ErrorStateMatcher },
-            { type: i0.Injector },
-            { type: forms.NgForm, decorators: [{ type: i0.Optional }] },
-            { type: forms.FormGroupDirective, decorators: [{ type: i0.Optional }] },
-            { type: core.DateAdapter, decorators: [{ type: i0.Optional }] },
-            { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [core.MAT_DATE_FORMATS,] }] }
-        ]; };
         return MatEndDate;
     }(_MatDateRangeInputBase));
-
-    /**
-     * @license
-     * Copyright Google LLC All Rights Reserved.
-     *
-     * Use of this source code is governed by an MIT-style license that can be
-     * found in the LICENSE file at https://angular.io/license
-     */
-    // 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="matDateRangePicker"). We can change this to a
-    // directive if angular adds support for `exportAs: '$implicit'` on directives.
-    /** Component responsible for managing the date range picker popup/dialog. */
-    var MatDateRangePicker = /** @class */ (function (_super) {
-        __extends(MatDateRangePicker, _super);
-        function MatDateRangePicker() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        MatDateRangePicker.prototype._forwardContentValues = function (instance) {
-            _super.prototype._forwardContentValues.call(this, instance);
-            var input = this._datepickerInput;
-            if (input) {
-                instance.comparisonStart = input.comparisonStart;
-                instance.comparisonEnd = input.comparisonEnd;
-            }
-        };
-        MatDateRangePicker.decorators = [
-            { type: i0.Component, args: [{
-                        selector: 'mat-date-range-picker',
-                        template: '',
-                        exportAs: 'matDateRangePicker',
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                        encapsulation: i0.ViewEncapsulation.None,
-                        providers: [MAT_RANGE_DATE_SELECTION_MODEL_PROVIDER]
-                    },] }
-        ];
-        return MatDateRangePicker;
-    }(MatDatepickerBase));
+    MatEndDate.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: 'input[matEndDate]',
+                    host: {
+                        'class': 'mat-end-date mat-date-range-input-inner',
+                        '[disabled]': 'disabled',
+                        '(input)': '_onInput($event.target.value)',
+                        '(change)': '_onChange()',
+                        '(keydown)': '_onKeydown($event)',
+                        '[attr.aria-haspopup]': '_rangeInput.rangePicker ? "dialog" : null',
+                        '[attr.aria-owns]': '(_rangeInput.rangePicker?.opened && _rangeInput.rangePicker.id) || null',
+                        '[attr.min]': '_getMinDate() ? _dateAdapter.toIso8601(_getMinDate()) : null',
+                        '[attr.max]': '_getMaxDate() ? _dateAdapter.toIso8601(_getMaxDate()) : null',
+                        '(blur)': '_onBlur()',
+                        'type': 'text',
+                    },
+                    providers: [
+                        { provide: forms.NG_VALUE_ACCESSOR, useExisting: MatEndDate, multi: true },
+                        { provide: forms.NG_VALIDATORS, useExisting: MatEndDate, multi: true }
+                    ]
+                },] }
+    ];
+    MatEndDate.ctorParameters = function () { return [
+        { type: undefined, decorators: [{ type: i0.Inject, args: [MAT_DATE_RANGE_INPUT_PARENT,] }] },
+        { type: i0.ElementRef },
+        { type: core.ErrorStateMatcher },
+        { type: i0.Injector },
+        { type: forms.NgForm, decorators: [{ type: i0.Optional }] },
+        { type: forms.FormGroupDirective, decorators: [{ type: i0.Optional }] },
+        { type: core.DateAdapter, decorators: [{ type: i0.Optional }] },
+        { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [core.MAT_DATE_FORMATS,] }] }
+    ]; };
 
     /**
      * @license
@@ -3510,7 +3513,7 @@
             this.comparisonEnd = null;
             /** Emits when the input's state changes. */
             this._stateChanges = new rxjs.Subject();
-            if (!_dateAdapter) {
+            if (!_dateAdapter && (typeof ngDevMode === 'undefined' || ngDevMode)) {
                 throw createMissingDateImplError('DateAdapter');
             }
             // TODO(crisbeto): remove `as any` after #18206 lands.
@@ -3583,7 +3586,7 @@
             /** The minimum valid date. */
             get: function () { return this._min; },
             set: function (value) {
-                this._min = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
+                this._min = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
                 this._revalidate();
             },
             enumerable: false,
@@ -3593,7 +3596,7 @@
             /** The maximum valid date. */
             get: function () { return this._max; },
             set: function (value) {
-                this._max = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
+                this._max = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
                 this._revalidate();
             },
             enumerable: false,
@@ -3660,11 +3663,13 @@
         };
         MatDateRangeInput.prototype.ngAfterContentInit = function () {
             var _this = this;
-            if (!this._startInput) {
-                throw Error('mat-date-range-input must contain a matStartDate input');
-            }
-            if (!this._endInput) {
-                throw Error('mat-date-range-input must contain a matEndDate input');
+            if (typeof ngDevMode === 'undefined' || ngDevMode) {
+                if (!this._startInput) {
+                    throw Error('mat-date-range-input must contain a matStartDate input');
+                }
+                if (!this._endInput) {
+                    throw Error('mat-date-range-input must contain a matEndDate input');
+                }
             }
             if (this._model) {
                 this._registerModel(this._model);
@@ -3722,13 +3727,6 @@
             var formField = this._formField;
             return formField && formField._hasFloatingLabel() ? formField._labelId : null;
         };
-        /**
-         * @param obj The object to check.
-         * @returns The given object if it is both a date instance and valid, otherwise null.
-         */
-        MatDateRangeInput.prototype._getValidDateOrNull = function (obj) {
-            return (this._dateAdapter.isDateInstance(obj) && this._dateAdapter.isValid(obj)) ? obj : null;
-        };
         /** Re-runs the validators on the start/end inputs. */
         MatDateRangeInput.prototype._revalidate = function () {
             if (this._startInput) {
@@ -3747,50 +3745,87 @@
                 this._endInput._registerModel(model);
             }
         };
-        MatDateRangeInput.decorators = [
-            { type: i0.Component, args: [{
-                        selector: 'mat-date-range-input',
-                        template: "<div\n  class=\"mat-date-range-input-container\"\n  cdkMonitorSubtreeFocus\n  (cdkFocusChange)=\"focused = $event !== null\">\n  <div class=\"mat-date-range-input-start-wrapper\">\n    <ng-content select=\"input[matStartDate]\"></ng-content>\n    <span\n      class=\"mat-date-range-input-mirror\"\n      aria-hidden=\"true\">{{_getInputMirrorValue()}}</span>\n  </div>\n\n  <span\n    class=\"mat-date-range-input-separator\"\n    [class.mat-date-range-input-separator-hidden]=\"_shouldHideSeparator()\">{{separator}}</span>\n\n  <div class=\"mat-date-range-input-end-wrapper\">\n    <ng-content select=\"input[matEndDate]\"></ng-content>\n  </div>\n</div>\n\n",
-                        exportAs: 'matDateRangeInput',
-                        host: {
-                            'class': 'mat-date-range-input',
-                            '[class.mat-date-range-input-hide-placeholders]': '_shouldHidePlaceholders()',
-                            '[attr.id]': 'null',
-                            'role': 'group',
-                            '[attr.aria-labelledby]': '_getAriaLabelledby()',
-                            '[attr.aria-describedby]': '_ariaDescribedBy',
-                        },
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                        encapsulation: i0.ViewEncapsulation.None,
-                        providers: [
-                            { provide: formField.MatFormFieldControl, useExisting: MatDateRangeInput },
-                            { provide: MAT_DATE_RANGE_INPUT_PARENT, useExisting: MatDateRangeInput },
-                        ],
-                        styles: [".mat-date-range-input{display:block;width:100%}.mat-date-range-input-container{display:flex;align-items:center}.mat-date-range-input-separator{transition:opacity 400ms 133.3333333333ms cubic-bezier(0.25, 0.8, 0.25, 1);margin:0 4px}.mat-date-range-input-separator-hidden{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:0;transition:none}.mat-date-range-input-inner{font:inherit;background:transparent;color:currentColor;border:none;outline:none;padding:0;margin:0;vertical-align:bottom;text-align:inherit;-webkit-appearance:none;width:100%}.mat-date-range-input-inner::-ms-clear,.mat-date-range-input-inner::-ms-reveal{display:none}.mat-date-range-input-inner::placeholder{transition:color 400ms 133.3333333333ms cubic-bezier(0.25, 0.8, 0.25, 1)}.mat-date-range-input-inner::-moz-placeholder{transition:color 400ms 133.3333333333ms cubic-bezier(0.25, 0.8, 0.25, 1)}.mat-date-range-input-inner::-webkit-input-placeholder{transition:color 400ms 133.3333333333ms cubic-bezier(0.25, 0.8, 0.25, 1)}.mat-date-range-input-inner:-ms-input-placeholder{transition:color 400ms 133.3333333333ms cubic-bezier(0.25, 0.8, 0.25, 1)}.mat-form-field-hide-placeholder .mat-date-range-input-inner::placeholder,.mat-date-range-input-hide-placeholders .mat-date-range-input-inner::placeholder{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:transparent !important;-webkit-text-fill-color:transparent;transition:none}.mat-form-field-hide-placeholder .mat-date-range-input-inner::-moz-placeholder,.mat-date-range-input-hide-placeholders .mat-date-range-input-inner::-moz-placeholder{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:transparent !important;-webkit-text-fill-color:transparent;transition:none}.mat-form-field-hide-placeholder .mat-date-range-input-inner::-webkit-input-placeholder,.mat-date-range-input-hide-placeholders .mat-date-range-input-inner::-webkit-input-placeholder{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:transparent !important;-webkit-text-fill-color:transparent;transition:none}.mat-form-field-hide-placeholder .mat-date-range-input-inner:-ms-input-placeholder,.mat-date-range-input-hide-placeholders .mat-date-range-input-inner:-ms-input-placeholder{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:transparent !important;-webkit-text-fill-color:transparent;transition:none}.mat-date-range-input-mirror{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;visibility:hidden;white-space:nowrap;display:inline-block;min-width:2px}.mat-date-range-input-start-wrapper{position:relative;overflow:hidden;max-width:calc(50% - 4px)}.mat-date-range-input-start-wrapper .mat-date-range-input-inner{position:absolute;top:0;left:0}.mat-date-range-input-end-wrapper{flex-grow:1;max-width:calc(50% - 4px)}.mat-form-field-type-mat-date-range-input .mat-form-field-infix{width:200px}\n"]
-                    },] }
-        ];
-        MatDateRangeInput.ctorParameters = function () { return [
-            { type: i0.ChangeDetectorRef },
-            { type: i0.ElementRef },
-            { type: forms.ControlContainer, decorators: [{ type: i0.Optional }, { type: i0.Self }] },
-            { type: core.DateAdapter, decorators: [{ type: i0.Optional }] },
-            { type: formField.MatFormField, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [formField.MAT_FORM_FIELD,] }] }
-        ]; };
-        MatDateRangeInput.propDecorators = {
-            rangePicker: [{ type: i0.Input }],
-            required: [{ type: i0.Input }],
-            dateFilter: [{ type: i0.Input }],
-            min: [{ type: i0.Input }],
-            max: [{ type: i0.Input }],
-            disabled: [{ type: i0.Input }],
-            separator: [{ type: i0.Input }],
-            comparisonStart: [{ type: i0.Input }],
-            comparisonEnd: [{ type: i0.Input }],
-            _startInput: [{ type: i0.ContentChild, args: [MatStartDate,] }],
-            _endInput: [{ type: i0.ContentChild, args: [MatEndDate,] }]
-        };
         return MatDateRangeInput;
     }());
+    MatDateRangeInput.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'mat-date-range-input',
+                    template: "<div\n  class=\"mat-date-range-input-container\"\n  cdkMonitorSubtreeFocus\n  (cdkFocusChange)=\"focused = $event !== null\">\n  <div class=\"mat-date-range-input-start-wrapper\">\n    <ng-content select=\"input[matStartDate]\"></ng-content>\n    <span\n      class=\"mat-date-range-input-mirror\"\n      aria-hidden=\"true\">{{_getInputMirrorValue()}}</span>\n  </div>\n\n  <span\n    class=\"mat-date-range-input-separator\"\n    [class.mat-date-range-input-separator-hidden]=\"_shouldHideSeparator()\">{{separator}}</span>\n\n  <div class=\"mat-date-range-input-end-wrapper\">\n    <ng-content select=\"input[matEndDate]\"></ng-content>\n  </div>\n</div>\n\n",
+                    exportAs: 'matDateRangeInput',
+                    host: {
+                        'class': 'mat-date-range-input',
+                        '[class.mat-date-range-input-hide-placeholders]': '_shouldHidePlaceholders()',
+                        '[class.mat-date-range-input-required]': 'required',
+                        '[attr.id]': 'null',
+                        'role': 'group',
+                        '[attr.aria-labelledby]': '_getAriaLabelledby()',
+                        '[attr.aria-describedby]': '_ariaDescribedBy',
+                        // Used by the test harness to tie this input to its calendar. We can't depend on
+                        // `aria-owns` for this, because it's only defined while the calendar is open.
+                        '[attr.data-mat-calendar]': 'rangePicker ? rangePicker.id : null',
+                    },
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    encapsulation: i0.ViewEncapsulation.None,
+                    providers: [
+                        { provide: formField.MatFormFieldControl, useExisting: MatDateRangeInput },
+                        { provide: MAT_DATE_RANGE_INPUT_PARENT, useExisting: MatDateRangeInput },
+                    ],
+                    styles: [".mat-date-range-input{display:block;width:100%}.mat-date-range-input-container{display:flex;align-items:center}.mat-date-range-input-separator{transition:opacity 400ms 133.3333333333ms cubic-bezier(0.25, 0.8, 0.25, 1);margin:0 4px}.mat-date-range-input-separator-hidden{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:0;transition:none}.mat-date-range-input-inner{font:inherit;background:transparent;color:currentColor;border:none;outline:none;padding:0;margin:0;vertical-align:bottom;text-align:inherit;-webkit-appearance:none;width:100%}.mat-date-range-input-inner::-ms-clear,.mat-date-range-input-inner::-ms-reveal{display:none}.mat-date-range-input-inner::placeholder{transition:color 400ms 133.3333333333ms cubic-bezier(0.25, 0.8, 0.25, 1)}.mat-date-range-input-inner::-moz-placeholder{transition:color 400ms 133.3333333333ms cubic-bezier(0.25, 0.8, 0.25, 1)}.mat-date-range-input-inner::-webkit-input-placeholder{transition:color 400ms 133.3333333333ms cubic-bezier(0.25, 0.8, 0.25, 1)}.mat-date-range-input-inner:-ms-input-placeholder{transition:color 400ms 133.3333333333ms cubic-bezier(0.25, 0.8, 0.25, 1)}.mat-form-field-hide-placeholder .mat-date-range-input-inner::placeholder,.mat-date-range-input-hide-placeholders .mat-date-range-input-inner::placeholder{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:transparent !important;-webkit-text-fill-color:transparent;transition:none}.mat-form-field-hide-placeholder .mat-date-range-input-inner::-moz-placeholder,.mat-date-range-input-hide-placeholders .mat-date-range-input-inner::-moz-placeholder{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:transparent !important;-webkit-text-fill-color:transparent;transition:none}.mat-form-field-hide-placeholder .mat-date-range-input-inner::-webkit-input-placeholder,.mat-date-range-input-hide-placeholders .mat-date-range-input-inner::-webkit-input-placeholder{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:transparent !important;-webkit-text-fill-color:transparent;transition:none}.mat-form-field-hide-placeholder .mat-date-range-input-inner:-ms-input-placeholder,.mat-date-range-input-hide-placeholders .mat-date-range-input-inner:-ms-input-placeholder{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:transparent !important;-webkit-text-fill-color:transparent;transition:none}.mat-date-range-input-mirror{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;visibility:hidden;white-space:nowrap;display:inline-block;min-width:2px}.mat-date-range-input-start-wrapper{position:relative;overflow:hidden;max-width:calc(50% - 4px)}.mat-date-range-input-start-wrapper .mat-date-range-input-inner{position:absolute;top:0;left:0}.mat-date-range-input-end-wrapper{flex-grow:1;max-width:calc(50% - 4px)}.mat-form-field-type-mat-date-range-input .mat-form-field-infix{width:200px}\n"]
+                },] }
+    ];
+    MatDateRangeInput.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef },
+        { type: forms.ControlContainer, decorators: [{ type: i0.Optional }, { type: i0.Self }] },
+        { type: core.DateAdapter, decorators: [{ type: i0.Optional }] },
+        { type: formField.MatFormField, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [formField.MAT_FORM_FIELD,] }] }
+    ]; };
+    MatDateRangeInput.propDecorators = {
+        rangePicker: [{ type: i0.Input }],
+        required: [{ type: i0.Input }],
+        dateFilter: [{ type: i0.Input }],
+        min: [{ type: i0.Input }],
+        max: [{ type: i0.Input }],
+        disabled: [{ type: i0.Input }],
+        separator: [{ type: i0.Input }],
+        comparisonStart: [{ type: i0.Input }],
+        comparisonEnd: [{ type: i0.Input }],
+        _startInput: [{ type: i0.ContentChild, args: [MatStartDate,] }],
+        _endInput: [{ type: i0.ContentChild, args: [MatEndDate,] }]
+    };
+
+    // 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="matDateRangePicker"). We can change this to a
+    // directive if angular adds support for `exportAs: '$implicit'` on directives.
+    /** Component responsible for managing the date range picker popup/dialog. */
+    var MatDateRangePicker = /** @class */ (function (_super) {
+        __extends(MatDateRangePicker, _super);
+        function MatDateRangePicker() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        MatDateRangePicker.prototype._forwardContentValues = function (instance) {
+            _super.prototype._forwardContentValues.call(this, instance);
+            var input = this._datepickerInput;
+            if (input) {
+                instance.comparisonStart = input.comparisonStart;
+                instance.comparisonEnd = input.comparisonEnd;
+            }
+        };
+        return MatDateRangePicker;
+    }(MatDatepickerBase));
+    MatDateRangePicker.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'mat-date-range-picker',
+                    template: '',
+                    exportAs: 'matDateRangePicker',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    encapsulation: i0.ViewEncapsulation.None,
+                    providers: [
+                        MAT_RANGE_DATE_SELECTION_MODEL_PROVIDER,
+                        MAT_CALENDAR_RANGE_STRATEGY_PROVIDER,
+                    ]
+                },] }
+    ];
 
     /**
      * @license
@@ -3802,67 +3837,63 @@
     var MatDatepickerModule = /** @class */ (function () {
         function MatDatepickerModule() {
         }
-        MatDatepickerModule.decorators = [
-            { type: i0.NgModule, args: [{
-                        imports: [
-                            common.CommonModule,
-                            button.MatButtonModule,
-                            dialog.MatDialogModule,
-                            overlay.OverlayModule,
-                            a11y.A11yModule,
-                            portal.PortalModule,
-                        ],
-                        exports: [
-                            scrolling.CdkScrollableModule,
-                            MatCalendar,
-                            MatCalendarBody,
-                            MatDatepicker,
-                            MatDatepickerContent,
-                            MatDatepickerInput,
-                            MatDatepickerToggle,
-                            MatDatepickerToggleIcon,
-                            MatMonthView,
-                            MatYearView,
-                            MatMultiYearView,
-                            MatCalendarHeader,
-                            MatDateRangeInput,
-                            MatStartDate,
-                            MatEndDate,
-                            MatDateRangePicker,
-                        ],
-                        declarations: [
-                            MatCalendar,
-                            MatCalendarBody,
-                            MatDatepicker,
-                            MatDatepickerContent,
-                            MatDatepickerInput,
-                            MatDatepickerToggle,
-                            MatDatepickerToggleIcon,
-                            MatMonthView,
-                            MatYearView,
-                            MatMultiYearView,
-                            MatCalendarHeader,
-                            MatDateRangeInput,
-                            MatStartDate,
-                            MatEndDate,
-                            MatDateRangePicker,
-                        ],
-                        providers: [
-                            MatDatepickerIntl,
-                            MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER,
-                            {
-                                provide: MAT_DATE_RANGE_SELECTION_STRATEGY,
-                                useClass: DefaultMatCalendarRangeStrategy
-                            }
-                        ],
-                        entryComponents: [
-                            MatDatepickerContent,
-                            MatCalendarHeader,
-                        ]
-                    },] }
-        ];
         return MatDatepickerModule;
     }());
+    MatDatepickerModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        button.MatButtonModule,
+                        dialog.MatDialogModule,
+                        overlay.OverlayModule,
+                        a11y.A11yModule,
+                        portal.PortalModule,
+                    ],
+                    exports: [
+                        scrolling.CdkScrollableModule,
+                        MatCalendar,
+                        MatCalendarBody,
+                        MatDatepicker,
+                        MatDatepickerContent,
+                        MatDatepickerInput,
+                        MatDatepickerToggle,
+                        MatDatepickerToggleIcon,
+                        MatMonthView,
+                        MatYearView,
+                        MatMultiYearView,
+                        MatCalendarHeader,
+                        MatDateRangeInput,
+                        MatStartDate,
+                        MatEndDate,
+                        MatDateRangePicker,
+                    ],
+                    declarations: [
+                        MatCalendar,
+                        MatCalendarBody,
+                        MatDatepicker,
+                        MatDatepickerContent,
+                        MatDatepickerInput,
+                        MatDatepickerToggle,
+                        MatDatepickerToggleIcon,
+                        MatMonthView,
+                        MatYearView,
+                        MatMultiYearView,
+                        MatCalendarHeader,
+                        MatDateRangeInput,
+                        MatStartDate,
+                        MatEndDate,
+                        MatDateRangePicker,
+                    ],
+                    providers: [
+                        MatDatepickerIntl,
+                        MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER
+                    ],
+                    entryComponents: [
+                        MatDatepickerContent,
+                        MatCalendarHeader,
+                    ]
+                },] }
+    ];
 
     /**
      * @license
@@ -3913,9 +3944,11 @@
     exports.matDatepickerAnimations = matDatepickerAnimations;
     exports.yearsPerPage = yearsPerPage;
     exports.yearsPerRow = yearsPerRow;
-    exports.ɵangular_material_src_material_datepicker_datepicker_a = MatDatepickerBase;
-    exports.ɵangular_material_src_material_datepicker_datepicker_b = MatDatepickerInputBase;
-    exports.ɵangular_material_src_material_datepicker_datepicker_c = MAT_DATE_RANGE_INPUT_PARENT;
+    exports.ɵangular_material_src_material_datepicker_datepicker_a = MAT_CALENDAR_RANGE_STRATEGY_PROVIDER_FACTORY;
+    exports.ɵangular_material_src_material_datepicker_datepicker_b = MAT_CALENDAR_RANGE_STRATEGY_PROVIDER;
+    exports.ɵangular_material_src_material_datepicker_datepicker_c = MatDatepickerBase;
+    exports.ɵangular_material_src_material_datepicker_datepicker_d = MatDatepickerInputBase;
+    exports.ɵangular_material_src_material_datepicker_datepicker_e = MAT_DATE_RANGE_INPUT_PARENT;
 
     Object.defineProperty(exports, '__esModule', { value: true });