@angular/material 11.0.4 → 11.1.2

package/fesm2015/datepicker.js

@@ -1,8 +1,8 @@
 import { A11yModule } from '@angular/cdk/a11y';
 import { Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
-import { ComponentPortal, PortalModule } from '@angular/cdk/portal';
+import { ComponentPortal, TemplatePortal, PortalModule } from '@angular/cdk/portal';
 import { DOCUMENT, CommonModule } from '@angular/common';
-import { ɵɵdefineInjectable, Injectable, EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, ElementRef, NgZone, Input, Output, Directive, Optional, SkipSelf, InjectionToken, ChangeDetectorRef, Inject, ViewChild, forwardRef, ViewContainerRef, Attribute, ContentChild, InjectFlags, Injector, Self, NgModule } from '@angular/core';
+import { ɵɵdefineInjectable, Injectable, EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, ElementRef, NgZone, Input, Output, Directive, Optional, SkipSelf, InjectionToken, ChangeDetectorRef, Inject, ViewChild, forwardRef, ViewContainerRef, Attribute, ContentChild, InjectFlags, Injector, Self, TemplateRef, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { CdkScrollableModule } from '@angular/cdk/scrolling';
@@ -415,6 +415,17 @@ class MatDateSelectionModel {
     _isValidDateInstance(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
+     */
+    clone() {
+        if (typeof ngDevMode === 'undefined' || ngDevMode) {
+            throw Error('Not implemented');
+        }
+        return null;
+    }
 }
 MatDateSelectionModel.decorators = [
     { type: Directive }
@@ -446,6 +457,12 @@ class MatSingleDateSelectionModel extends MatDateSelectionModel {
     isComplete() {
         return this.selection != null;
     }
+    /** Clones the selection model. */
+    clone() {
+        const clone = new MatSingleDateSelectionModel(this._adapter);
+        clone.updateSelection(this.selection, this);
+        return clone;
+    }
 }
 MatSingleDateSelectionModel.decorators = [
     { type: Injectable }
@@ -500,6 +517,12 @@ class MatRangeDateSelectionModel extends MatDateSelectionModel {
     isComplete() {
         return this.selection.start != null && this.selection.end != null;
     }
+    /** Clones the selection model. */
+    clone() {
+        const clone = new MatRangeDateSelectionModel(this._adapter);
+        clone.updateSelection(this.selection, this);
+        return clone;
+    }
 }
 MatRangeDateSelectionModel.decorators = [
     { type: Injectable }
@@ -685,6 +708,8 @@ class MatMonthView {
             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. */
     _handleCalendarBodyKeydown(event) {
@@ -756,8 +781,9 @@ class MatMonthView {
     _init() {
         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();
         let firstOfMonth = this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), this._dateAdapter.getMonth(this.activeDate), 1);
         this._firstWeekOffset =
@@ -1802,7 +1828,7 @@ const _MatDatepickerContentMixinBase = mixinColor(MatDatepickerContentBase);
  * @docs-private
  */
 class MatDatepickerContent extends _MatDatepickerContentMixinBase {
-    constructor(elementRef, _changeDetectorRef, _model, _dateAdapter, _rangeSelectionStrategy, 
+    constructor(elementRef, _changeDetectorRef, _globalModel, _dateAdapter, _rangeSelectionStrategy, 
     /**
      * @deprecated `intl` argument to become required.
      * @breaking-change 12.0.0
@@ -1810,7 +1836,7 @@ class MatDatepickerContent extends _MatDatepickerContentMixinBase {
     intl) {
         super(elementRef);
         this._changeDetectorRef = _changeDetectorRef;
-        this._model = _model;
+        this._globalModel = _globalModel;
         this._dateAdapter = _dateAdapter;
         this._rangeSelectionStrategy = _rangeSelectionStrategy;
         this._subscriptions = new Subscription();
@@ -1818,11 +1844,19 @@ class MatDatepickerContent extends _MatDatepickerContentMixinBase {
         this._animationState = 'enter';
         /** Emits when an animation has finished. */
         this._animationDone = new 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';
     }
+    ngOnInit() {
+        // 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;
+    }
     ngAfterViewInit() {
-        this._subscriptions.add(this.datepicker._stateChanges.subscribe(() => {
+        this._subscriptions.add(this.datepicker.stateChanges.subscribe(() => {
             this._changeDetectorRef.markForCheck();
         }));
         this._calendar.focusActiveCell();
@@ -1848,7 +1882,8 @@ class MatDatepickerContent extends _MatDatepickerContentMixinBase {
             !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();
         }
     }
@@ -1859,11 +1894,17 @@ class MatDatepickerContent extends _MatDatepickerContentMixinBase {
     _getSelected() {
         return this._model.selection;
     }
+    /** Applies the current pending selection to the global model. */
+    _applyPendingSelection() {
+        if (this._model !== this._globalModel) {
+            this._globalModel.updateSelection(this._model.selection, this);
+        }
+    }
 }
 MatDatepickerContent.decorators = [
     { type: 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',
@@ -1878,7 +1919,7 @@ MatDatepickerContent.decorators = [
                 encapsulation: ViewEncapsulation.None,
                 changeDetection: 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 = () => [
@@ -1937,7 +1978,7 @@ class MatDatepickerBase {
         /** 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 Subject();
+        this.stateChanges = new Subject();
         if (!this._dateAdapter && (typeof ngDevMode === 'undefined' || ngDevMode)) {
             throw createMissingDateImplError('DateAdapter');
         }
@@ -1947,7 +1988,7 @@ class MatDatepickerBase {
     get startAt() {
         // 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 startAt(value) {
         this._startAt = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
@@ -1955,7 +1996,7 @@ class MatDatepickerBase {
     /** Color palette to use on the datepicker's calendar. */
     get color() {
         return this._color ||
-            (this._datepickerInput ? this._datepickerInput.getThemePalette() : undefined);
+            (this.datepickerInput ? this.datepickerInput.getThemePalette() : undefined);
     }
     set color(value) {
         this._color = value;
@@ -1970,14 +2011,14 @@ class MatDatepickerBase {
     }
     /** Whether the datepicker pop-up should be disabled. */
     get disabled() {
-        return this._disabled === undefined && this._datepickerInput ?
-            this._datepickerInput.disabled : !!this._disabled;
+        return this._disabled === undefined && this.datepickerInput ?
+            this.datepickerInput.disabled : !!this._disabled;
     }
     set disabled(value) {
         const newValue = coerceBooleanProperty(value);
         if (newValue !== this._disabled) {
             this._disabled = newValue;
-            this._stateChanges.next(undefined);
+            this.stateChanges.next(undefined);
         }
     }
     /**
@@ -1995,14 +2036,14 @@ class MatDatepickerBase {
     }
     /** The minimum selectable date. */
     _getMinDate() {
-        return this._datepickerInput && this._datepickerInput.min;
+        return this.datepickerInput && this.datepickerInput.min;
     }
     /** The maximum selectable date. */
     _getMaxDate() {
-        return this._datepickerInput && this._datepickerInput.max;
+        return this.datepickerInput && this.datepickerInput.max;
     }
     _getDateFilter() {
-        return this._datepickerInput && this._datepickerInput.dateFilter;
+        return this.datepickerInput && this.datepickerInput.dateFilter;
     }
     ngOnChanges(changes) {
         const positionChange = changes['xPosition'] || changes['yPosition'];
@@ -2012,13 +2053,13 @@ class MatDatepickerBase {
                 this._popupRef.updatePosition();
             }
         }
-        this._stateChanges.next(undefined);
+        this.stateChanges.next(undefined);
     }
     ngOnDestroy() {
         this._destroyPopup();
         this.close();
         this._inputStateChanges.unsubscribe();
-        this._stateChanges.complete();
+        this.stateChanges.complete();
     }
     /** Selects the given date */
     select(date) {
@@ -2041,22 +2082,41 @@ class MatDatepickerBase {
      * @param input The datepicker input to register with this datepicker.
      * @returns Selection model that the input should hook itself up to.
      */
-    _registerInput(input) {
-        if (this._datepickerInput && (typeof ngDevMode === 'undefined' || ngDevMode)) {
+    registerInput(input) {
+        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(() => this._stateChanges.next(undefined));
+            input.stateChanges.subscribe(() => this.stateChanges.next(undefined));
         return this._model;
     }
+    /**
+     * Registers a portal containing action buttons with the datepicker.
+     * @param portal Portal to be registered.
+     */
+    registerActions(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.
+     */
+    removeActions(portal) {
+        if (portal === this._actionsPortal) {
+            this._actionsPortal = null;
+        }
+    }
     /** Open the calendar. */
     open() {
         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) {
@@ -2103,6 +2163,12 @@ class MatDatepickerBase {
             completeClose();
         }
     }
+    /** Applies the current pending selection on the popup to the model. */
+    _applyPendingSelection() {
+        var _a, _b;
+        const 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. */
     _openAsDialog() {
         // Usually this would be handled by `open` which ensures that we can only have one overlay
@@ -2158,11 +2224,12 @@ class MatDatepickerBase {
     _forwardContentValues(instance) {
         instance.datepicker = this;
         instance.color = this.color;
+        instance._actionsPortal = this._actionsPortal;
     }
     /** Create the popup. */
     _createPopup() {
         const positionStrategy = this._overlay.position()
-            .flexibleConnectedTo(this._datepickerInput.getConnectedOverlayOrigin())
+            .flexibleConnectedTo(this.datepickerInput.getConnectedOverlayOrigin())
             .withTransformOriginOn('.mat-datepicker-content')
             .withFlexibleDimensions(false)
             .withViewportMargin(8)
@@ -2179,7 +2246,7 @@ class MatDatepickerBase {
         this._popupRef.overlayElement.setAttribute('role', 'dialog');
         merge(this._popupRef.backdropClick(), this._popupRef.detachments(), this._popupRef.keydownEvents().pipe(filter(event => {
             // Closing on alt + up is only valid when there's an input associated with the datepicker.
-            return (event.keyCode === ESCAPE && !hasModifierKey(event)) || (this._datepickerInput &&
+            return (event.keyCode === ESCAPE && !hasModifierKey(event)) || (this.datepickerInput &&
                 hasModifierKey(event, 'altKey') && event.keyCode === UP_ARROW);
         }))).subscribe(event => {
             if (event) {
@@ -2282,7 +2349,10 @@ MatDatepicker.decorators = [
                 exportAs: 'matDatepicker',
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: ViewEncapsulation.None,
-                providers: [MAT_SINGLE_DATE_SELECTION_MODEL_PROVIDER]
+                providers: [
+                    MAT_SINGLE_DATE_SELECTION_MODEL_PROVIDER,
+                    { provide: MatDatepickerBase, useExisting: MatDatepicker },
+                ]
             },] }
 ];
 
@@ -2319,8 +2389,6 @@ class MatDatepickerInputBase {
         this.dateChange = new EventEmitter();
         /** Emits when an `input` event is fired on this `<input>`. */
         this.dateInput = new EventEmitter();
-        /** Emits when the value changes (either due to user input or programmatic change). */
-        this._valueChange = new EventEmitter();
         /** Emits when the internal state has changed */
         this.stateChanges = new Subject();
         this._onTouched = () => { };
@@ -2367,7 +2435,7 @@ class MatDatepickerInputBase {
         }
         // Update the displayed date when the locale changes.
         this._localeSubscription = _dateAdapter.localeChanges.subscribe(() => {
-            this.value = this.value;
+            this._assignValueProgrammatically(this.value);
         });
     }
     /** The value of the input. */
@@ -2375,15 +2443,7 @@ class MatDatepickerInputBase {
         return this._model ? this._getValueFromModel(this._model.selection) : this._pendingValue;
     }
     set value(value) {
-        value = this._dateAdapter.deserialize(value);
-        this._lastValueValid = this._isValidValue(value);
-        value = this._dateAdapter.getValidDateOrNull(value);
-        const oldDate = this.value;
-        this._assignValue(value);
-        this._formatValue(value);
-        if (!this._dateAdapter.sameDate(oldDate, value)) {
-            this._valueChange.emit(value);
-        }
+        this._assignValueProgrammatically(value);
     }
     /** Whether the datepicker-input is disabled. */
     get disabled() { return !!this._disabled || this._parentDisabled(); }
@@ -2417,22 +2477,14 @@ class MatDatepickerInputBase {
             this._assignValue(this._pendingValue);
         }
         this._valueChangesSubscription = this._model.selectionChanged.subscribe(event => {
-            if (event.source !== this) {
+            if (this._shouldHandleChangeEvent(event)) {
                 const 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));
             }
         });
     }
@@ -2447,7 +2499,6 @@ class MatDatepickerInputBase {
     ngOnDestroy() {
         this._valueChangesSubscription.unsubscribe();
         this._localeSubscription.unsubscribe();
-        this._valueChange.complete();
         this.stateChanges.complete();
     }
     /** @docs-private */
@@ -2460,7 +2511,7 @@ class MatDatepickerInputBase {
     }
     // Implemented as part of ControlValueAccessor.
     writeValue(value) {
-        this.value = value;
+        this._assignValueProgrammatically(value);
     }
     // Implemented as part of ControlValueAccessor.
     registerOnChange(fn) {
@@ -2489,7 +2540,6 @@ class MatDatepickerInputBase {
         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 {
@@ -2542,6 +2592,14 @@ class MatDatepickerInputBase {
     _parentDisabled() {
         return false;
     }
+    /** Programmatically assigns a value to the input. */
+    _assignValueProgrammatically(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. */
     _matchesFilter(value) {
         const filter = this._getDateFilter();
@@ -2606,13 +2664,15 @@ class MatDatepickerInput extends MatDatepickerInputBase {
     constructor(elementRef, dateAdapter, dateFormats, _formField) {
         super(elementRef, dateAdapter, dateFormats);
         this._formField = _formField;
+        this._closedSubscription = Subscription.EMPTY;
         this._validator = Validators.compose(super._getValidators());
     }
     /** The datepicker that this input is associated with. */
     set matDatepicker(datepicker) {
         if (datepicker) {
             this._datepicker = datepicker;
-            this._registerModel(datepicker._registerInput(this));
+            this._closedSubscription = datepicker.closedStream.subscribe(() => this._onTouched());
+            this._registerModel(datepicker.registerInput(this));
         }
     }
     /** The minimum valid date. */
@@ -2657,6 +2717,10 @@ class MatDatepickerInput extends MatDatepickerInputBase {
     getStartValue() {
         return this.value;
     }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this._closedSubscription.unsubscribe();
+    }
     /** Opens the associated datepicker. */
     _openPopup() {
         if (this._datepicker) {
@@ -2683,8 +2747,8 @@ class MatDatepickerInput extends MatDatepickerInputBase {
     _getDateFilter() {
         return this._dateFilter;
     }
-    _canEmitChangeEvent() {
-        return true;
+    _shouldHandleChangeEvent(event) {
+        return event.source !== this;
     }
 }
 MatDatepickerInput.decorators = [
@@ -2777,9 +2841,9 @@ class MatDatepickerToggle {
         }
     }
     _watchStateChanges() {
-        const datepickerStateChanged = this.datepicker ? this.datepicker._stateChanges : of();
-        const inputStateChanged = this.datepicker && this.datepicker._datepickerInput ?
-            this.datepicker._datepickerInput.stateChanges : of();
+        const datepickerStateChanged = this.datepicker ? this.datepicker.stateChanges : of();
+        const inputStateChanged = this.datepicker && this.datepicker.datepickerInput ?
+            this.datepicker.datepickerInput.stateChanges : of();
         const datepickerToggled = this.datepicker ?
             merge(this.datepicker.openedStream, this.datepicker.closedStream) :
             of();
@@ -2790,18 +2854,15 @@ class MatDatepickerToggle {
 MatDatepickerToggle.decorators = [
     { type: 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: ViewEncapsulation.None,
@@ -2817,6 +2878,7 @@ MatDatepickerToggle.ctorParameters = () => [
 MatDatepickerToggle.propDecorators = {
     datepicker: [{ type: Input, args: ['for',] }],
     tabIndex: [{ type: Input }],
+    ariaLabel: [{ type: Input, args: ['aria-label',] }],
     disabled: [{ type: Input }],
     disableRipple: [{ type: Input }],
     _customIcon: [{ type: ContentChild, args: [MatDatepickerToggleIcon,] }],
@@ -2846,11 +2908,6 @@ class MatDateRangeInputPartBase extends MatDatepickerInputBase {
         this._injector = _injector;
         this._parentForm = _parentForm;
         this._parentFormGroup = _parentFormGroup;
-        this._outsideValueChanged = () => {
-            // 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();
-        };
     }
     ngOnInit() {
         // We need the date input to provide itself as a `ControlValueAccessor` and a `Validator`, while
@@ -2908,6 +2965,15 @@ class MatDateRangeInputPartBase extends MatDatepickerInputBase {
     _parentDisabled() {
         return this._rangeInput._groupDisabled;
     }
+    _shouldHandleChangeEvent({ source }) {
+        return source !== this._rangeInput._startInput && source !== this._rangeInput._endInput;
+    }
+    _assignValueProgrammatically(value) {
+        super._assignValueProgrammatically(value);
+        const opposite = (this === this._rangeInput._startInput ? this._rangeInput._endInput :
+            this._rangeInput._startInput);
+        opposite === null || opposite === void 0 ? void 0 : opposite._validatorOnChange();
+    }
 }
 MatDateRangeInputPartBase.decorators = [
     { type: Directive }
@@ -2941,9 +3007,6 @@ class MatStartDate extends _MatDateRangeInputBase {
                 null : { 'matStartDateInvalid': { 'end': end, 'actual': start } };
         };
         this._validator = Validators.compose([...super._getValidators(), this._startValidator]);
-        this._canEmitChangeEvent = (event) => {
-            return event.source !== this._rangeInput._endInput;
-        };
     }
     ngOnInit() {
         // Normally this happens automatically, but it seems to break if not added explicitly when all
@@ -2970,7 +3033,6 @@ class MatStartDate extends _MatDateRangeInputBase {
         if (this._model) {
             const range = new DateRange(value, this._model.selection.end);
             this._model.updateSelection(range, this);
-            this._cvaOnChange(value);
         }
     }
     _formatValue(value) {
@@ -3038,9 +3100,6 @@ class MatEndDate extends _MatDateRangeInputBase {
                 null : { 'matEndDateInvalid': { 'start': start, 'actual': end } };
         };
         this._validator = Validators.compose([...super._getValidators(), this._endValidator]);
-        this._canEmitChangeEvent = (event) => {
-            return event.source !== this._rangeInput._startInput;
-        };
     }
     ngOnInit() {
         // Normally this happens automatically, but it seems to break if not added explicitly when all
@@ -3067,7 +3126,6 @@ class MatEndDate extends _MatDateRangeInputBase {
         if (this._model) {
             const range = new DateRange(this._model.selection.start, value);
             this._model.updateSelection(range, this);
-            this._cvaOnChange(value);
         }
     }
     _onKeydown(event) {
@@ -3115,41 +3173,6 @@ MatEndDate.ctorParameters = () => [
     { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [MAT_DATE_FORMATS,] }] }
 ];
 
-/**
- * @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. */
-class MatDateRangePicker extends MatDatepickerBase {
-    _forwardContentValues(instance) {
-        super._forwardContentValues(instance);
-        const input = this._datepickerInput;
-        if (input) {
-            instance.comparisonStart = input.comparisonStart;
-            instance.comparisonEnd = input.comparisonEnd;
-        }
-    }
-}
-MatDateRangePicker.decorators = [
-    { type: Component, args: [{
-                selector: 'mat-date-range-picker',
-                template: '',
-                exportAs: 'matDateRangePicker',
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                encapsulation: ViewEncapsulation.None,
-                providers: [
-                    MAT_RANGE_DATE_SELECTION_MODEL_PROVIDER,
-                    MAT_CALENDAR_RANGE_STRATEGY_PROVIDER,
-                ]
-            },] }
-];
-
 /**
  * @license
  * Copyright Google LLC All Rights Reserved.
@@ -3164,6 +3187,7 @@ class MatDateRangeInput {
         this._elementRef = _elementRef;
         this._dateAdapter = _dateAdapter;
         this._formField = _formField;
+        this._closedSubscription = Subscription.EMPTY;
         /** Unique ID for the input. */
         this.id = `mat-date-range-input-${nextUniqueId++}`;
         /** Whether the control is focused. */
@@ -3210,8 +3234,14 @@ class MatDateRangeInput {
     get rangePicker() { return this._rangePicker; }
     set rangePicker(rangePicker) {
         if (rangePicker) {
-            this._model = rangePicker._registerInput(this);
+            this._model = rangePicker.registerInput(this);
             this._rangePicker = rangePicker;
+            this._closedSubscription.unsubscribe();
+            this._closedSubscription = rangePicker.closedStream.subscribe(() => {
+                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);
         }
     }
@@ -3324,6 +3354,7 @@ class MatDateRangeInput {
         }
     }
     ngOnDestroy() {
+        this._closedSubscription.unsubscribe();
         this.stateChanges.complete();
     }
     /** Gets the date at which the calendar should start. */
@@ -3432,6 +3463,128 @@ MatDateRangeInput.propDecorators = {
     _endInput: [{ type: ContentChild, args: [MatEndDate,] }]
 };
 
+/**
+ * @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. */
+class MatDateRangePicker extends MatDatepickerBase {
+    _forwardContentValues(instance) {
+        super._forwardContentValues(instance);
+        const input = this.datepickerInput;
+        if (input) {
+            instance.comparisonStart = input.comparisonStart;
+            instance.comparisonEnd = input.comparisonEnd;
+        }
+    }
+}
+MatDateRangePicker.decorators = [
+    { type: Component, args: [{
+                selector: 'mat-date-range-picker',
+                template: '',
+                exportAs: 'matDateRangePicker',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                encapsulation: ViewEncapsulation.None,
+                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. */
+class MatDatepickerApply {
+    constructor(_datepicker) {
+        this._datepicker = _datepicker;
+    }
+    _applySelection() {
+        this._datepicker._applyPendingSelection();
+        this._datepicker.close();
+    }
+}
+MatDatepickerApply.decorators = [
+    { type: Directive, args: [{
+                selector: '[matDatepickerApply], [matDateRangePickerApply]',
+                host: { '(click)': '_applySelection()' }
+            },] }
+];
+MatDatepickerApply.ctorParameters = () => [
+    { type: MatDatepickerBase }
+];
+/** Button that will close the datepicker and discard the current selection. */
+class MatDatepickerCancel {
+    constructor(_datepicker) {
+        this._datepicker = _datepicker;
+    }
+}
+MatDatepickerCancel.decorators = [
+    { type: Directive, args: [{
+                selector: '[matDatepickerCancel], [matDateRangePickerCancel]',
+                host: { '(click)': '_datepicker.close()' }
+            },] }
+];
+MatDatepickerCancel.ctorParameters = () => [
+    { type: MatDatepickerBase }
+];
+/**
+ * Container that can be used to project a row of action buttons
+ * to the bottom of a datepicker or date range picker.
+ */
+class MatDatepickerActions {
+    constructor(_datepicker, _viewContainerRef) {
+        this._datepicker = _datepicker;
+        this._viewContainerRef = _viewContainerRef;
+    }
+    ngAfterViewInit() {
+        this._portal = new TemplatePortal(this._template, this._viewContainerRef);
+        this._datepicker.registerActions(this._portal);
+    }
+    ngOnDestroy() {
+        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();
+        }
+    }
+}
+MatDatepickerActions.decorators = [
+    { type: Component, args: [{
+                selector: 'mat-datepicker-actions, mat-date-range-picker-actions',
+                template: `
+    <ng-template>
+      <div class="mat-datepicker-actions">
+        <ng-content></ng-content>
+      </div>
+    </ng-template>
+  `,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                encapsulation: 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 = () => [
+    { type: MatDatepickerBase },
+    { type: ViewContainerRef }
+];
+MatDatepickerActions.propDecorators = {
+    _template: [{ type: ViewChild, args: [TemplateRef,] }]
+};
+
 /**
  * @license
  * Copyright Google LLC All Rights Reserved.
@@ -3469,6 +3622,9 @@ MatDatepickerModule.decorators = [
                     MatStartDate,
                     MatEndDate,
                     MatDateRangePicker,
+                    MatDatepickerActions,
+                    MatDatepickerCancel,
+                    MatDatepickerApply
                 ],
                 declarations: [
                     MatCalendar,
@@ -3486,6 +3642,9 @@ MatDatepickerModule.decorators = [
                     MatStartDate,
                     MatEndDate,
                     MatDateRangePicker,
+                    MatDatepickerActions,
+                    MatDatepickerCancel,
+                    MatDatepickerApply
                 ],
                 providers: [
                     MatDatepickerIntl,
@@ -3510,5 +3669,5 @@ MatDatepickerModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { DateRange, DefaultMatCalendarRangeStrategy, MAT_DATEPICKER_SCROLL_STRATEGY, MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY, MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER, MAT_DATEPICKER_VALIDATORS, MAT_DATEPICKER_VALUE_ACCESSOR, MAT_DATE_RANGE_SELECTION_STRATEGY, MAT_RANGE_DATE_SELECTION_MODEL_FACTORY, MAT_RANGE_DATE_SELECTION_MODEL_PROVIDER, MAT_SINGLE_DATE_SELECTION_MODEL_FACTORY, MAT_SINGLE_DATE_SELECTION_MODEL_PROVIDER, MatCalendar, MatCalendarBody, MatCalendarCell, MatCalendarHeader, MatDateRangeInput, MatDateRangePicker, MatDateSelectionModel, MatDatepicker, MatDatepickerContent, MatDatepickerInput, MatDatepickerInputEvent, MatDatepickerIntl, MatDatepickerModule, MatDatepickerToggle, MatDatepickerToggleIcon, MatEndDate, MatMonthView, MatMultiYearView, MatRangeDateSelectionModel, MatSingleDateSelectionModel, MatStartDate, MatYearView, matDatepickerAnimations, yearsPerPage, yearsPerRow, MAT_CALENDAR_RANGE_STRATEGY_PROVIDER_FACTORY as ɵangular_material_src_material_datepicker_datepicker_a, MAT_CALENDAR_RANGE_STRATEGY_PROVIDER as ɵangular_material_src_material_datepicker_datepicker_b, MatDatepickerBase as ɵangular_material_src_material_datepicker_datepicker_c, MatDatepickerInputBase as ɵangular_material_src_material_datepicker_datepicker_d, MAT_DATE_RANGE_INPUT_PARENT as ɵangular_material_src_material_datepicker_datepicker_e };
+export { DateRange, DefaultMatCalendarRangeStrategy, MAT_DATEPICKER_SCROLL_STRATEGY, MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY, MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER, MAT_DATEPICKER_VALIDATORS, MAT_DATEPICKER_VALUE_ACCESSOR, MAT_DATE_RANGE_SELECTION_STRATEGY, MAT_RANGE_DATE_SELECTION_MODEL_FACTORY, MAT_RANGE_DATE_SELECTION_MODEL_PROVIDER, MAT_SINGLE_DATE_SELECTION_MODEL_FACTORY, MAT_SINGLE_DATE_SELECTION_MODEL_PROVIDER, MatCalendar, MatCalendarBody, MatCalendarCell, MatCalendarHeader, MatDateRangeInput, MatDateRangePicker, MatDateSelectionModel, MatDatepicker, MatDatepickerActions, MatDatepickerApply, MatDatepickerCancel, MatDatepickerContent, MatDatepickerInput, MatDatepickerInputEvent, MatDatepickerIntl, MatDatepickerModule, MatDatepickerToggle, MatDatepickerToggleIcon, MatEndDate, MatMonthView, MatMultiYearView, MatRangeDateSelectionModel, MatSingleDateSelectionModel, MatStartDate, MatYearView, matDatepickerAnimations, yearsPerPage, yearsPerRow, MAT_CALENDAR_RANGE_STRATEGY_PROVIDER_FACTORY as ɵangular_material_src_material_datepicker_datepicker_a, MAT_CALENDAR_RANGE_STRATEGY_PROVIDER as ɵangular_material_src_material_datepicker_datepicker_b, MatDatepickerBase as ɵangular_material_src_material_datepicker_datepicker_c, MatDatepickerInputBase as ɵangular_material_src_material_datepicker_datepicker_d, MAT_DATE_RANGE_INPUT_PARENT as ɵangular_material_src_material_datepicker_datepicker_e };
 //# sourceMappingURL=datepicker.js.map