@angular/material 11.0.4 → 11.1.2

package/bundles/material-datepicker.umd.js

@@ -389,6 +389,8 @@
         return extendStatics(d, b);
     };
     function __extends(d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -574,11 +576,13 @@
         }
         return ar;
     }
+    /** @deprecated */
     function __spread() {
         for (var ar = [], i = 0; i < arguments.length; i++)
             ar = ar.concat(__read(arguments[i]));
         return ar;
     }
+    /** @deprecated */
     function __spreadArrays() {
         for (var s = 0, i = 0, il = arguments.length; i < il; i++)
             s += arguments[i].length;
@@ -587,7 +591,11 @@
                 r[k] = a[j];
         return r;
     }
-    ;
+    function __spreadArray(to, from) {
+        for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
+            to[j] = from[i];
+        return to;
+    }
     function __await(v) {
         return this instanceof __await ? (this.v = v, this) : new __await(v);
     }
@@ -705,6 +713,17 @@
         MatDateSelectionModel.prototype._isValidDateInstance = function (date) {
             return this._adapter.isDateInstance(date) && this._adapter.isValid(date);
         };
+        /**
+         * Clones the selection model.
+         * @deprecated To be turned into an abstract method.
+         * @breaking-change 12.0.0
+         */
+        MatDateSelectionModel.prototype.clone = function () {
+            if (typeof ngDevMode === 'undefined' || ngDevMode) {
+                throw Error('Not implemented');
+            }
+            return null;
+        };
         return MatDateSelectionModel;
     }());
     MatDateSelectionModel.decorators = [
@@ -738,6 +757,12 @@
         MatSingleDateSelectionModel.prototype.isComplete = function () {
             return this.selection != null;
         };
+        /** Clones the selection model. */
+        MatSingleDateSelectionModel.prototype.clone = function () {
+            var clone = new MatSingleDateSelectionModel(this._adapter);
+            clone.updateSelection(this.selection, this);
+            return clone;
+        };
         return MatSingleDateSelectionModel;
     }(MatDateSelectionModel));
     MatSingleDateSelectionModel.decorators = [
@@ -794,6 +819,12 @@
         MatRangeDateSelectionModel.prototype.isComplete = function () {
             return this.selection.start != null && this.selection.end != null;
         };
+        /** Clones the selection model. */
+        MatRangeDateSelectionModel.prototype.clone = function () {
+            var clone = new MatRangeDateSelectionModel(this._adapter);
+            clone.updateSelection(this.selection, this);
+            return clone;
+        };
         return MatRangeDateSelectionModel;
     }(MatDateSelectionModel));
     MatRangeDateSelectionModel.decorators = [
@@ -998,6 +1029,8 @@
                 this.selectedChange.emit(selectedDate);
             }
             this._userSelection.emit({ value: selectedDate, event: event.event });
+            this._previewStart = this._previewEnd = null;
+            this._changeDetectorRef.markForCheck();
         };
         /** Handles keydown events on the calendar body when calendar is in month view. */
         MatMonthView.prototype._handleCalendarBodyKeydown = function (event) {
@@ -1069,8 +1102,9 @@
         MatMonthView.prototype._init = function () {
             this._setRanges(this.selected);
             this._todayDate = this._getCellCompareValue(this._dateAdapter.today());
-            this._monthLabel =
-                this._dateAdapter.getMonthNames('short')[this._dateAdapter.getMonth(this.activeDate)]
+            this._monthLabel = this._dateFormats.display.monthLabel
+                ? this._dateAdapter.format(this.activeDate, this._dateFormats.display.monthLabel)
+                : this._dateAdapter.getMonthNames('short')[this._dateAdapter.getMonth(this.activeDate)]
                     .toLocaleUpperCase();
             var firstOfMonth = this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), this._dateAdapter.getMonth(this.activeDate), 1);
             this._firstWeekOffset =
@@ -2193,7 +2227,7 @@
      */
     var MatDatepickerContent = /** @class */ (function (_super) {
         __extends(MatDatepickerContent, _super);
-        function MatDatepickerContent(elementRef, _changeDetectorRef, _model, _dateAdapter, _rangeSelectionStrategy, 
+        function MatDatepickerContent(elementRef, _changeDetectorRef, _globalModel, _dateAdapter, _rangeSelectionStrategy, 
         /**
          * @deprecated `intl` argument to become required.
          * @breaking-change 12.0.0
@@ -2201,7 +2235,7 @@
         intl) {
             var _this = _super.call(this, elementRef) || this;
             _this._changeDetectorRef = _changeDetectorRef;
-            _this._model = _model;
+            _this._globalModel = _globalModel;
             _this._dateAdapter = _dateAdapter;
             _this._rangeSelectionStrategy = _rangeSelectionStrategy;
             _this._subscriptions = new rxjs.Subscription();
@@ -2209,13 +2243,21 @@
             _this._animationState = 'enter';
             /** Emits when an animation has finished. */
             _this._animationDone = new rxjs.Subject();
+            /** Portal with projected action buttons. */
+            _this._actionsPortal = null;
             // @breaking-change 12.0.0 Remove fallback for `intl`.
             _this._closeButtonText = (intl === null || intl === void 0 ? void 0 : intl.closeCalendarLabel) || 'Close calendar';
             return _this;
         }
+        MatDatepickerContent.prototype.ngOnInit = function () {
+            // If we have actions, clone the model so that we have the ability to cancel the selection,
+            // otherwise update the global model directly. Note that we want to assign this as soon as
+            // possible, but `_actionsPortal` isn't available in the constructor so we do it in `ngOnInit`.
+            this._model = this._actionsPortal ? this._globalModel.clone() : this._globalModel;
+        };
         MatDatepickerContent.prototype.ngAfterViewInit = function () {
             var _this = this;
-            this._subscriptions.add(this.datepicker._stateChanges.subscribe(function () {
+            this._subscriptions.add(this.datepicker.stateChanges.subscribe(function () {
                 _this._changeDetectorRef.markForCheck();
             }));
             this._calendar.focusActiveCell();
@@ -2241,7 +2283,8 @@
                 !this._dateAdapter.sameDate(value, selection))) {
                 this._model.add(value);
             }
-            if (!this._model || this._model.isComplete()) {
+            // Delegate closing the popup to the actions.
+            if ((!this._model || this._model.isComplete()) && !this._actionsPortal) {
                 this.datepicker.close();
             }
         };
@@ -2252,12 +2295,18 @@
         MatDatepickerContent.prototype._getSelected = function () {
             return this._model.selection;
         };
+        /** Applies the current pending selection to the global model. */
+        MatDatepickerContent.prototype._applyPendingSelection = function () {
+            if (this._model !== this._globalModel) {
+                this._globalModel.updateSelection(this._model.selection, this);
+            }
+        };
         return MatDatepickerContent;
     }(_MatDatepickerContentMixinBase));
     MatDatepickerContent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'mat-datepicker-content',
-                    template: "<div cdkTrapFocus>\n  <mat-calendar\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    (viewChanged)=\"datepicker._viewChanged($event)\"\n    (_userSelection)=\"_handleUserSelection($event)\"></mat-calendar>\n\n  <!-- Invisible close button for screen reader users. -->\n  <button\n    type=\"button\"\n    mat-raised-button\n    [color]=\"color || 'primary'\"\n    class=\"mat-datepicker-close-button\"\n    [class.cdk-visually-hidden]=\"!_closeButtonFocused\"\n    (focus)=\"_closeButtonFocused = true\"\n    (blur)=\"_closeButtonFocused = false\"\n    (click)=\"datepicker.close()\">{{ _closeButtonText }}</button>\n</div>\n",
+                    template: "<div\n  cdkTrapFocus\n  class=\"mat-datepicker-content-container\"\n  [class.mat-datepicker-content-container-with-actions]=\"_actionsPortal\">\n  <mat-calendar\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    (viewChanged)=\"datepicker._viewChanged($event)\"\n    (_userSelection)=\"_handleUserSelection($event)\"></mat-calendar>\n\n  <ng-template [cdkPortalOutlet]=\"_actionsPortal\"></ng-template>\n\n  <!-- Invisible close button for screen reader users. -->\n  <button\n    type=\"button\"\n    mat-raised-button\n    [color]=\"color || 'primary'\"\n    class=\"mat-datepicker-close-button\"\n    [class.cdk-visually-hidden]=\"!_closeButtonFocused\"\n    (focus)=\"_closeButtonFocused = true\"\n    (blur)=\"_closeButtonFocused = false\"\n    (click)=\"datepicker.close()\">{{ _closeButtonText }}</button>\n</div>\n",
                     host: {
                         'class': 'mat-datepicker-content',
                         '[@transformPanel]': '_animationState',
@@ -2272,7 +2321,7 @@
                     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 .mat-datepicker-close-button{position:absolute;top:100%;left:0;margin-top:8px}.ng-animating .mat-datepicker-content .mat-datepicker-close-button{display:none}.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"]
+                    styles: [".mat-datepicker-content{display:block;border-radius:4px}.mat-datepicker-content .mat-calendar{width:296px;height:354px}.mat-datepicker-content .mat-datepicker-close-button{position:absolute;top:100%;left:0;margin-top:8px}.ng-animating .mat-datepicker-content .mat-datepicker-close-button{display:none}.mat-datepicker-content-container{display:flex;flex-direction:column;justify-content:space-between}.mat-datepicker-content-touch{display:block;max-height:80vh;overflow:auto;margin:-24px}.mat-datepicker-content-touch .mat-datepicker-content-container{min-height:312px;max-height:788px;min-width:250px;max-width:750px}.mat-datepicker-content-touch .mat-calendar{width:100%;height:auto}@media all and (orientation: landscape){.mat-datepicker-content-touch .mat-datepicker-content-container{width:64vh;height:80vh}}@media all and (orientation: portrait){.mat-datepicker-content-touch .mat-datepicker-content-container{width:80vw;height:100vw}.mat-datepicker-content-touch .mat-datepicker-content-container-with-actions{height:115vw}}\n"]
                 },] }
     ];
     MatDatepickerContent.ctorParameters = function () { return [
@@ -2331,7 +2380,7 @@
             /** 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();
+            this.stateChanges = new rxjs.Subject();
             if (!this._dateAdapter && (typeof ngDevMode === 'undefined' || ngDevMode)) {
                 throw createMissingDateImplError('DateAdapter');
             }
@@ -2342,7 +2391,7 @@
             get: function () {
                 // If an explicit startAt is set we start there, otherwise we start at whatever the currently
                 // selected value is.
-                return this._startAt || (this._datepickerInput ? this._datepickerInput.getStartValue() : null);
+                return this._startAt || (this.datepickerInput ? this.datepickerInput.getStartValue() : null);
             },
             set: function (value) {
                 this._startAt = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
@@ -2354,7 +2403,7 @@
             /** Color palette to use on the datepicker's calendar. */
             get: function () {
                 return this._color ||
-                    (this._datepickerInput ? this._datepickerInput.getThemePalette() : undefined);
+                    (this.datepickerInput ? this.datepickerInput.getThemePalette() : undefined);
             },
             set: function (value) {
                 this._color = value;
@@ -2377,14 +2426,14 @@
         Object.defineProperty(MatDatepickerBase.prototype, "disabled", {
             /** Whether the datepicker pop-up should be disabled. */
             get: function () {
-                return this._disabled === undefined && this._datepickerInput ?
-                    this._datepickerInput.disabled : !!this._disabled;
+                return this._disabled === undefined && this.datepickerInput ?
+                    this.datepickerInput.disabled : !!this._disabled;
             },
             set: function (value) {
                 var newValue = coercion.coerceBooleanProperty(value);
                 if (newValue !== this._disabled) {
                     this._disabled = newValue;
-                    this._stateChanges.next(undefined);
+                    this.stateChanges.next(undefined);
                 }
             },
             enumerable: false,
@@ -2413,14 +2462,14 @@
         });
         /** The minimum selectable date. */
         MatDatepickerBase.prototype._getMinDate = function () {
-            return this._datepickerInput && this._datepickerInput.min;
+            return this.datepickerInput && this.datepickerInput.min;
         };
         /** The maximum selectable date. */
         MatDatepickerBase.prototype._getMaxDate = function () {
-            return this._datepickerInput && this._datepickerInput.max;
+            return this.datepickerInput && this.datepickerInput.max;
         };
         MatDatepickerBase.prototype._getDateFilter = function () {
-            return this._datepickerInput && this._datepickerInput.dateFilter;
+            return this.datepickerInput && this.datepickerInput.dateFilter;
         };
         MatDatepickerBase.prototype.ngOnChanges = function (changes) {
             var positionChange = changes['xPosition'] || changes['yPosition'];
@@ -2430,13 +2479,13 @@
                     this._popupRef.updatePosition();
                 }
             }
-            this._stateChanges.next(undefined);
+            this.stateChanges.next(undefined);
         };
         MatDatepickerBase.prototype.ngOnDestroy = function () {
             this._destroyPopup();
             this.close();
             this._inputStateChanges.unsubscribe();
-            this._stateChanges.complete();
+            this.stateChanges.complete();
         };
         /** Selects the given date */
         MatDatepickerBase.prototype.select = function (date) {
@@ -2459,23 +2508,42 @@
          * @param input The datepicker input to register with this datepicker.
          * @returns Selection model that the input should hook itself up to.
          */
-        MatDatepickerBase.prototype._registerInput = function (input) {
+        MatDatepickerBase.prototype.registerInput = function (input) {
             var _this = this;
-            if (this._datepickerInput && (typeof ngDevMode === 'undefined' || ngDevMode)) {
+            if (this.datepickerInput && (typeof ngDevMode === 'undefined' || ngDevMode)) {
                 throw Error('A MatDatepicker can only be associated with a single input.');
             }
             this._inputStateChanges.unsubscribe();
-            this._datepickerInput = input;
+            this.datepickerInput = input;
             this._inputStateChanges =
-                input.stateChanges.subscribe(function () { return _this._stateChanges.next(undefined); });
+                input.stateChanges.subscribe(function () { return _this.stateChanges.next(undefined); });
             return this._model;
         };
+        /**
+         * Registers a portal containing action buttons with the datepicker.
+         * @param portal Portal to be registered.
+         */
+        MatDatepickerBase.prototype.registerActions = function (portal) {
+            if (this._actionsPortal && (typeof ngDevMode === 'undefined' || ngDevMode)) {
+                throw Error('A MatDatepicker can only be associated with a single actions row.');
+            }
+            this._actionsPortal = portal;
+        };
+        /**
+         * Removes a portal containing action buttons from the datepicker.
+         * @param portal Portal to be removed.
+         */
+        MatDatepickerBase.prototype.removeActions = function (portal) {
+            if (portal === this._actionsPortal) {
+                this._actionsPortal = null;
+            }
+        };
         /** Open the calendar. */
         MatDatepickerBase.prototype.open = function () {
             if (this._opened || this.disabled) {
                 return;
             }
-            if (!this._datepickerInput && (typeof ngDevMode === 'undefined' || ngDevMode)) {
+            if (!this.datepickerInput && (typeof ngDevMode === 'undefined' || ngDevMode)) {
                 throw Error('Attempted to open an MatDatepicker with no associated input.');
             }
             if (this._document) {
@@ -2523,6 +2591,12 @@
                 completeClose();
             }
         };
+        /** Applies the current pending selection on the popup to the model. */
+        MatDatepickerBase.prototype._applyPendingSelection = function () {
+            var _a, _b;
+            var instance = ((_a = this._popupComponentRef) === null || _a === void 0 ? void 0 : _a.instance) || ((_b = this._dialogRef) === null || _b === void 0 ? void 0 : _b.componentInstance);
+            instance === null || instance === void 0 ? void 0 : instance._applyPendingSelection();
+        };
         /** Open the calendar as a dialog. */
         MatDatepickerBase.prototype._openAsDialog = function () {
             var _this = this;
@@ -2580,12 +2654,13 @@
         MatDatepickerBase.prototype._forwardContentValues = function (instance) {
             instance.datepicker = this;
             instance.color = this.color;
+            instance._actionsPortal = this._actionsPortal;
         };
         /** Create the popup. */
         MatDatepickerBase.prototype._createPopup = function () {
             var _this = this;
             var positionStrategy = this._overlay.position()
-                .flexibleConnectedTo(this._datepickerInput.getConnectedOverlayOrigin())
+                .flexibleConnectedTo(this.datepickerInput.getConnectedOverlayOrigin())
                 .withTransformOriginOn('.mat-datepicker-content')
                 .withFlexibleDimensions(false)
                 .withViewportMargin(8)
@@ -2602,7 +2677,7 @@
             this._popupRef.overlayElement.setAttribute('role', 'dialog');
             rxjs.merge(this._popupRef.backdropClick(), this._popupRef.detachments(), this._popupRef.keydownEvents().pipe(operators.filter(function (event) {
                 // Closing on alt + up is only valid when there's an input associated with the datepicker.
-                return (event.keyCode === keycodes.ESCAPE && !keycodes.hasModifierKey(event)) || (_this._datepickerInput &&
+                return (event.keyCode === keycodes.ESCAPE && !keycodes.hasModifierKey(event)) || (_this.datepickerInput &&
                     keycodes.hasModifierKey(event, 'altKey') && event.keyCode === keycodes.UP_ARROW);
             }))).subscribe(function (event) {
                 if (event) {
@@ -2704,7 +2779,10 @@
                     exportAs: 'matDatepicker',
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None,
-                    providers: [MAT_SINGLE_DATE_SELECTION_MODEL_PROVIDER]
+                    providers: [
+                        MAT_SINGLE_DATE_SELECTION_MODEL_PROVIDER,
+                        { provide: MatDatepickerBase, useExisting: MatDatepicker },
+                    ]
                 },] }
     ];
 
@@ -2736,8 +2814,6 @@
             this.dateChange = new i0.EventEmitter();
             /** Emits when an `input` event is fired on this `<input>`. */
             this.dateInput = new i0.EventEmitter();
-            /** Emits when the value changes (either due to user input or programmatic change). */
-            this._valueChange = new i0.EventEmitter();
             /** Emits when the internal state has changed */
             this.stateChanges = new rxjs.Subject();
             this._onTouched = function () { };
@@ -2784,7 +2860,7 @@
             }
             // Update the displayed date when the locale changes.
             this._localeSubscription = _dateAdapter.localeChanges.subscribe(function () {
-                _this.value = _this.value;
+                _this._assignValueProgrammatically(_this.value);
             });
         }
         Object.defineProperty(MatDatepickerInputBase.prototype, "value", {
@@ -2793,15 +2869,7 @@
                 return this._model ? this._getValueFromModel(this._model.selection) : this._pendingValue;
             },
             set: function (value) {
-                value = this._dateAdapter.deserialize(value);
-                this._lastValueValid = this._isValidValue(value);
-                value = this._dateAdapter.getValidDateOrNull(value);
-                var oldDate = this.value;
-                this._assignValue(value);
-                this._formatValue(value);
-                if (!this._dateAdapter.sameDate(oldDate, value)) {
-                    this._valueChange.emit(value);
-                }
+                this._assignValueProgrammatically(value);
             },
             enumerable: false,
             configurable: true
@@ -2843,22 +2911,14 @@
                 this._assignValue(this._pendingValue);
             }
             this._valueChangesSubscription = this._model.selectionChanged.subscribe(function (event) {
-                if (event.source !== _this) {
+                if (_this._shouldHandleChangeEvent(event)) {
                     var value = _this._getValueFromModel(event.selection);
                     _this._lastValueValid = _this._isValidValue(value);
                     _this._cvaOnChange(value);
                     _this._onTouched();
                     _this._formatValue(value);
-                    // Note that we can't wrap the entire block with this logic, because for the range inputs
-                    // we want to revalidate whenever either one of the inputs changes and we don't have a
-                    // good way of distinguishing it at the moment.
-                    if (_this._canEmitChangeEvent(event)) {
-                        _this.dateInput.emit(new MatDatepickerInputEvent(_this, _this._elementRef.nativeElement));
-                        _this.dateChange.emit(new MatDatepickerInputEvent(_this, _this._elementRef.nativeElement));
-                    }
-                    if (_this._outsideValueChanged) {
-                        _this._outsideValueChanged();
-                    }
+                    _this.dateInput.emit(new MatDatepickerInputEvent(_this, _this._elementRef.nativeElement));
+                    _this.dateChange.emit(new MatDatepickerInputEvent(_this, _this._elementRef.nativeElement));
                 }
             });
         };
@@ -2873,7 +2933,6 @@
         MatDatepickerInputBase.prototype.ngOnDestroy = function () {
             this._valueChangesSubscription.unsubscribe();
             this._localeSubscription.unsubscribe();
-            this._valueChange.complete();
             this.stateChanges.complete();
         };
         /** @docs-private */
@@ -2886,7 +2945,7 @@
         };
         // Implemented as part of ControlValueAccessor.
         MatDatepickerInputBase.prototype.writeValue = function (value) {
-            this.value = value;
+            this._assignValueProgrammatically(value);
         };
         // Implemented as part of ControlValueAccessor.
         MatDatepickerInputBase.prototype.registerOnChange = function (fn) {
@@ -2915,7 +2974,6 @@
             if (!this._dateAdapter.sameDate(date, this.value)) {
                 this._assignValue(date);
                 this._cvaOnChange(date);
-                this._valueChange.emit(date);
                 this.dateInput.emit(new MatDatepickerInputEvent(this, this._elementRef.nativeElement));
             }
             else {
@@ -2968,6 +3026,14 @@
         MatDatepickerInputBase.prototype._parentDisabled = function () {
             return false;
         };
+        /** Programmatically assigns a value to the input. */
+        MatDatepickerInputBase.prototype._assignValueProgrammatically = function (value) {
+            value = this._dateAdapter.deserialize(value);
+            this._lastValueValid = this._isValidValue(value);
+            value = this._dateAdapter.getValidDateOrNull(value);
+            this._assignValue(value);
+            this._formatValue(value);
+        };
         /** Gets whether a value matches the current date filter. */
         MatDatepickerInputBase.prototype._matchesFilter = function (value) {
             var filter = this._getDateFilter();
@@ -3038,15 +3104,18 @@
         function MatDatepickerInput(elementRef, dateAdapter, dateFormats, _formField) {
             var _this = _super.call(this, elementRef, dateAdapter, dateFormats) || this;
             _this._formField = _formField;
+            _this._closedSubscription = rxjs.Subscription.EMPTY;
             _this._validator = forms.Validators.compose(_super.prototype._getValidators.call(_this));
             return _this;
         }
         Object.defineProperty(MatDatepickerInput.prototype, "matDatepicker", {
             /** The datepicker that this input is associated with. */
             set: function (datepicker) {
+                var _this = this;
                 if (datepicker) {
                     this._datepicker = datepicker;
-                    this._registerModel(datepicker._registerInput(this));
+                    this._closedSubscription = datepicker.closedStream.subscribe(function () { return _this._onTouched(); });
+                    this._registerModel(datepicker.registerInput(this));
                 }
             },
             enumerable: false,
@@ -3106,6 +3175,10 @@
         MatDatepickerInput.prototype.getStartValue = function () {
             return this.value;
         };
+        MatDatepickerInput.prototype.ngOnDestroy = function () {
+            _super.prototype.ngOnDestroy.call(this);
+            this._closedSubscription.unsubscribe();
+        };
         /** Opens the associated datepicker. */
         MatDatepickerInput.prototype._openPopup = function () {
             if (this._datepicker) {
@@ -3132,8 +3205,8 @@
         MatDatepickerInput.prototype._getDateFilter = function () {
             return this._dateFilter;
         };
-        MatDatepickerInput.prototype._canEmitChangeEvent = function () {
-            return true;
+        MatDatepickerInput.prototype._shouldHandleChangeEvent = function (event) {
+            return event.source !== this;
         };
         return MatDatepickerInput;
     }(MatDatepickerInputBase));
@@ -3235,9 +3308,9 @@
         };
         MatDatepickerToggle.prototype._watchStateChanges = function () {
             var _this = this;
-            var datepickerStateChanged = this.datepicker ? this.datepicker._stateChanges : rxjs.of();
-            var inputStateChanged = this.datepicker && this.datepicker._datepickerInput ?
-                this.datepicker._datepickerInput.stateChanges : rxjs.of();
+            var datepickerStateChanged = this.datepicker ? this.datepicker.stateChanges : rxjs.of();
+            var inputStateChanged = this.datepicker && this.datepicker.datepickerInput ?
+                this.datepicker.datepickerInput.stateChanges : rxjs.of();
             var datepickerToggled = this.datepicker ?
                 rxjs.merge(this.datepicker.openedStream, this.datepicker.closedStream) :
                 rxjs.of();
@@ -3249,18 +3322,15 @@
     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",
+                    template: "<button\n  #button\n  mat-icon-button\n  type=\"button\"\n  [attr.aria-haspopup]=\"datepicker ? 'dialog' : null\"\n  [attr.aria-label]=\"ariaLabel || _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',
+                        '[attr.tabindex]': 'null',
                         '[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,
@@ -3276,6 +3346,7 @@
     MatDatepickerToggle.propDecorators = {
         datepicker: [{ type: i0.Input, args: ['for',] }],
         tabIndex: [{ type: i0.Input }],
+        ariaLabel: [{ type: i0.Input, args: ['aria-label',] }],
         disabled: [{ type: i0.Input }],
         disableRipple: [{ type: i0.Input }],
         _customIcon: [{ type: i0.ContentChild, args: [MatDatepickerToggleIcon,] }],
@@ -3299,11 +3370,6 @@
             _this._injector = _injector;
             _this._parentForm = _parentForm;
             _this._parentFormGroup = _parentFormGroup;
-            _this._outsideValueChanged = function () {
-                // Whenever the value changes outside the input we need to revalidate, because
-                // the validation state of each of the inputs depends on the other one.
-                _this._validatorOnChange();
-            };
             return _this;
         }
         MatDateRangeInputPartBase.prototype.ngOnInit = function () {
@@ -3362,6 +3428,16 @@
         MatDateRangeInputPartBase.prototype._parentDisabled = function () {
             return this._rangeInput._groupDisabled;
         };
+        MatDateRangeInputPartBase.prototype._shouldHandleChangeEvent = function (_a) {
+            var source = _a.source;
+            return source !== this._rangeInput._startInput && source !== this._rangeInput._endInput;
+        };
+        MatDateRangeInputPartBase.prototype._assignValueProgrammatically = function (value) {
+            _super.prototype._assignValueProgrammatically.call(this, value);
+            var opposite = (this === this._rangeInput._startInput ? this._rangeInput._endInput :
+                this._rangeInput._startInput);
+            opposite === null || opposite === void 0 ? void 0 : opposite._validatorOnChange();
+        };
         return MatDateRangeInputPartBase;
     }(MatDatepickerInputBase));
     MatDateRangeInputPartBase.decorators = [
@@ -3398,9 +3474,6 @@
                     null : { 'matStartDateInvalid': { 'end': end, 'actual': start } };
             };
             _this._validator = forms.Validators.compose(__spread(_super.prototype._getValidators.call(_this), [_this._startValidator]));
-            _this._canEmitChangeEvent = function (event) {
-                return event.source !== _this._rangeInput._endInput;
-            };
             return _this;
         }
         MatStartDate.prototype.ngOnInit = function () {
@@ -3428,7 +3501,6 @@
             if (this._model) {
                 var range = new DateRange(value, this._model.selection.end);
                 this._model.updateSelection(range, this);
-                this._cvaOnChange(value);
             }
         };
         MatStartDate.prototype._formatValue = function (value) {
@@ -3499,9 +3571,6 @@
                     null : { 'matEndDateInvalid': { 'start': start, 'actual': end } };
             };
             _this._validator = forms.Validators.compose(__spread(_super.prototype._getValidators.call(_this), [_this._endValidator]));
-            _this._canEmitChangeEvent = function (event) {
-                return event.source !== _this._rangeInput._startInput;
-            };
             return _this;
         }
         MatEndDate.prototype.ngOnInit = function () {
@@ -3529,7 +3598,6 @@
             if (this._model) {
                 var range = new DateRange(this._model.selection.start, value);
                 this._model.updateSelection(range, this);
-                this._cvaOnChange(value);
             }
         };
         MatEndDate.prototype._onKeydown = function (event) {
@@ -3592,6 +3660,7 @@
             this._elementRef = _elementRef;
             this._dateAdapter = _dateAdapter;
             this._formField = _formField;
+            this._closedSubscription = rxjs.Subscription.EMPTY;
             /** Unique ID for the input. */
             this.id = "mat-date-range-input-" + nextUniqueId++;
             /** Whether the control is focused. */
@@ -3650,9 +3719,16 @@
             /** The range picker that this input is associated with. */
             get: function () { return this._rangePicker; },
             set: function (rangePicker) {
+                var _this = this;
                 if (rangePicker) {
-                    this._model = rangePicker._registerInput(this);
+                    this._model = rangePicker.registerInput(this);
                     this._rangePicker = rangePicker;
+                    this._closedSubscription.unsubscribe();
+                    this._closedSubscription = rangePicker.closedStream.subscribe(function () {
+                        var _a, _b;
+                        (_a = _this._startInput) === null || _a === void 0 ? void 0 : _a._onTouched();
+                        (_b = _this._endInput) === null || _b === void 0 ? void 0 : _b._onTouched();
+                    });
                     this._registerModel(this._model);
                 }
             },
@@ -3797,6 +3873,7 @@
             }
         };
         MatDateRangeInput.prototype.ngOnDestroy = function () {
+            this._closedSubscription.unsubscribe();
             this.stateChanges.complete();
         };
         /** Gets the date at which the calendar should start. */
@@ -3917,7 +3994,7 @@
         }
         MatDateRangePicker.prototype._forwardContentValues = function (instance) {
             _super.prototype._forwardContentValues.call(this, instance);
-            var input = this._datepickerInput;
+            var input = this.datepickerInput;
             if (input) {
                 instance.comparisonStart = input.comparisonStart;
                 instance.comparisonEnd = input.comparisonEnd;
@@ -3935,10 +4012,94 @@
                     providers: [
                         MAT_RANGE_DATE_SELECTION_MODEL_PROVIDER,
                         MAT_CALENDAR_RANGE_STRATEGY_PROVIDER,
+                        { provide: MatDatepickerBase, useExisting: MatDateRangePicker },
                     ]
                 },] }
     ];
 
+    /**
+     * @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
+     */
+    /** Button that will close the datepicker and assign the current selection to the data model. */
+    var MatDatepickerApply = /** @class */ (function () {
+        function MatDatepickerApply(_datepicker) {
+            this._datepicker = _datepicker;
+        }
+        MatDatepickerApply.prototype._applySelection = function () {
+            this._datepicker._applyPendingSelection();
+            this._datepicker.close();
+        };
+        return MatDatepickerApply;
+    }());
+    MatDatepickerApply.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[matDatepickerApply], [matDateRangePickerApply]',
+                    host: { '(click)': '_applySelection()' }
+                },] }
+    ];
+    MatDatepickerApply.ctorParameters = function () { return [
+        { type: MatDatepickerBase }
+    ]; };
+    /** Button that will close the datepicker and discard the current selection. */
+    var MatDatepickerCancel = /** @class */ (function () {
+        function MatDatepickerCancel(_datepicker) {
+            this._datepicker = _datepicker;
+        }
+        return MatDatepickerCancel;
+    }());
+    MatDatepickerCancel.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[matDatepickerCancel], [matDateRangePickerCancel]',
+                    host: { '(click)': '_datepicker.close()' }
+                },] }
+    ];
+    MatDatepickerCancel.ctorParameters = function () { return [
+        { type: MatDatepickerBase }
+    ]; };
+    /**
+     * Container that can be used to project a row of action buttons
+     * to the bottom of a datepicker or date range picker.
+     */
+    var MatDatepickerActions = /** @class */ (function () {
+        function MatDatepickerActions(_datepicker, _viewContainerRef) {
+            this._datepicker = _datepicker;
+            this._viewContainerRef = _viewContainerRef;
+        }
+        MatDatepickerActions.prototype.ngAfterViewInit = function () {
+            this._portal = new portal.TemplatePortal(this._template, this._viewContainerRef);
+            this._datepicker.registerActions(this._portal);
+        };
+        MatDatepickerActions.prototype.ngOnDestroy = function () {
+            var _a;
+            this._datepicker.removeActions(this._portal);
+            // Needs to be null checked since we initialize it in `ngAfterViewInit`.
+            if (this._portal && this._portal.isAttached) {
+                (_a = this._portal) === null || _a === void 0 ? void 0 : _a.detach();
+            }
+        };
+        return MatDatepickerActions;
+    }());
+    MatDatepickerActions.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'mat-datepicker-actions, mat-date-range-picker-actions',
+                    template: "\n    <ng-template>\n      <div class=\"mat-datepicker-actions\">\n        <ng-content></ng-content>\n      </div>\n    </ng-template>\n  ",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    encapsulation: i0.ViewEncapsulation.None,
+                    styles: [".mat-datepicker-actions{display:flex;justify-content:flex-end;align-items:center;padding:0 8px 8px 8px}.mat-datepicker-actions .mat-button-base+.mat-button-base{margin-left:8px}[dir=rtl] .mat-datepicker-actions .mat-button-base+.mat-button-base{margin-left:0;margin-right:8px}\n"]
+                },] }
+    ];
+    MatDatepickerActions.ctorParameters = function () { return [
+        { type: MatDatepickerBase },
+        { type: i0.ViewContainerRef }
+    ]; };
+    MatDatepickerActions.propDecorators = {
+        _template: [{ type: i0.ViewChild, args: [i0.TemplateRef,] }]
+    };
+
     /**
      * @license
      * Copyright Google LLC All Rights Reserved.
@@ -3979,6 +4140,9 @@
                         MatStartDate,
                         MatEndDate,
                         MatDateRangePicker,
+                        MatDatepickerActions,
+                        MatDatepickerCancel,
+                        MatDatepickerApply
                     ],
                     declarations: [
                         MatCalendar,
@@ -3996,6 +4160,9 @@
                         MatStartDate,
                         MatEndDate,
                         MatDateRangePicker,
+                        MatDatepickerActions,
+                        MatDatepickerCancel,
+                        MatDatepickerApply
                     ],
                     providers: [
                         MatDatepickerIntl,
@@ -4040,6 +4207,9 @@
     exports.MatDateRangePicker = MatDateRangePicker;
     exports.MatDateSelectionModel = MatDateSelectionModel;
     exports.MatDatepicker = MatDatepicker;
+    exports.MatDatepickerActions = MatDatepickerActions;
+    exports.MatDatepickerApply = MatDatepickerApply;
+    exports.MatDatepickerCancel = MatDatepickerCancel;
     exports.MatDatepickerContent = MatDatepickerContent;
     exports.MatDatepickerInput = MatDatepickerInput;
     exports.MatDatepickerInputEvent = MatDatepickerInputEvent;