@angular/material 11.0.3 → 11.1.1

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';
@@ -327,7 +327,7 @@ MatCalendarBody.decorators = [
                 exportAs: 'matCalendarBody',
                 encapsulation: ViewEncapsulation.None,
                 changeDetection: 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"]
+                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}.cdk-high-contrast-active .mat-calendar-body-disabled{opacity:.5}.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}.mat-datepicker-dialog .mat-dialog-container{position:relative;overflow:visible}.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 = () => [
@@ -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 }
@@ -756,8 +779,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 +1826,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 +1834,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 +1842,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 +1880,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 +1892,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=\"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 +1917,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}.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 +1976,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 +1986,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 +1994,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 +2009,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 +2034,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 +2051,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 +2080,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 +2161,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
@@ -2128,7 +2192,9 @@ class MatDatepickerBase {
             maxWidth: '80vw',
             maxHeight: '',
             position: {},
-            autoFocus: true,
+            // Disable the dialog's automatic focus capturing, because it'll go to the close button
+            // automatically. The calendar will move focus on its own once it renders.
+            autoFocus: false,
             // `MatDialog` has focus restoration built in, however we want to disable it since the
             // datepicker also has focus restoration for dropdown mode. We want to do this, in order
             // to ensure that the timing is consistent between dropdown and dialog modes since `MatDialog`
@@ -2156,11 +2222,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)
@@ -2177,7 +2244,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) {
@@ -2280,7 +2347,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 },
+                ]
             },] }
 ];
 
@@ -2317,8 +2387,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 = () => { };
@@ -2365,7 +2433,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. */
@@ -2373,15 +2441,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(); }
@@ -2415,22 +2475,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));
             }
         });
     }
@@ -2445,7 +2497,6 @@ class MatDatepickerInputBase {
     ngOnDestroy() {
         this._valueChangesSubscription.unsubscribe();
         this._localeSubscription.unsubscribe();
-        this._valueChange.complete();
         this.stateChanges.complete();
     }
     /** @docs-private */
@@ -2458,7 +2509,7 @@ class MatDatepickerInputBase {
     }
     // Implemented as part of ControlValueAccessor.
     writeValue(value) {
-        this.value = value;
+        this._assignValueProgrammatically(value);
     }
     // Implemented as part of ControlValueAccessor.
     registerOnChange(fn) {
@@ -2487,7 +2538,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 {
@@ -2540,6 +2590,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();
@@ -2604,13 +2662,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. */
@@ -2655,6 +2715,10 @@ class MatDatepickerInput extends MatDatepickerInputBase {
     getStartValue() {
         return this.value;
     }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this._closedSubscription.unsubscribe();
+    }
     /** Opens the associated datepicker. */
     _openPopup() {
         if (this._datepicker) {
@@ -2681,8 +2745,8 @@ class MatDatepickerInput extends MatDatepickerInputBase {
     _getDateFilter() {
         return this._dateFilter;
     }
-    _canEmitChangeEvent() {
-        return true;
+    _shouldHandleChangeEvent(event) {
+        return event.source !== this;
     }
 }
 MatDatepickerInput.decorators = [
@@ -2775,9 +2839,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();
@@ -2788,18 +2852,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,
@@ -2815,6 +2876,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,] }],
@@ -2844,11 +2906,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
@@ -2906,6 +2963,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 }
@@ -2939,9 +3005,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
@@ -2968,7 +3031,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) {
@@ -3006,7 +3068,8 @@ MatStartDate.decorators = [
                 ],
                 // These need to be specified explicitly, because some tooling doesn't
                 // seem to pick them up from the base class. See #20932.
-                outputs: ['dateChange', 'dateInput']
+                outputs: ['dateChange', 'dateInput'],
+                inputs: ['errorStateMatcher']
             },] }
 ];
 MatStartDate.ctorParameters = () => [
@@ -3035,9 +3098,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
@@ -3064,7 +3124,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) {
@@ -3097,7 +3156,8 @@ MatEndDate.decorators = [
                 ],
                 // These need to be specified explicitly, because some tooling doesn't
                 // seem to pick them up from the base class. See #20932.
-                outputs: ['dateChange', 'dateInput']
+                outputs: ['dateChange', 'dateInput'],
+                inputs: ['errorStateMatcher']
             },] }
 ];
 MatEndDate.ctorParameters = () => [
@@ -3111,41 +3171,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.
@@ -3160,6 +3185,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. */
@@ -3206,8 +3232,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);
         }
     }
@@ -3320,6 +3352,7 @@ class MatDateRangeInput {
         }
     }
     ngOnDestroy() {
+        this._closedSubscription.unsubscribe();
         this.stateChanges.complete();
     }
     /** Gets the date at which the calendar should start. */
@@ -3428,6 +3461,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.
@@ -3465,6 +3620,9 @@ MatDatepickerModule.decorators = [
                     MatStartDate,
                     MatEndDate,
                     MatDateRangePicker,
+                    MatDatepickerActions,
+                    MatDatepickerCancel,
+                    MatDatepickerApply
                 ],
                 declarations: [
                     MatCalendar,
@@ -3482,6 +3640,9 @@ MatDatepickerModule.decorators = [
                     MatStartDate,
                     MatEndDate,
                     MatDateRangePicker,
+                    MatDatepickerActions,
+                    MatDatepickerCancel,
+                    MatDatepickerApply
                 ],
                 providers: [
                     MatDatepickerIntl,
@@ -3506,5 +3667,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