@angular/material 11.0.4 → 11.1.2

package/core/theming/_theming.scss

@@ -1,8 +1,21 @@
 @import 'palette';
 
+// Whether duplication warnings should be disabled. Warnings enabled by default.
+$mat-theme-ignore-duplication-warnings: false !default;
+
 // Whether density should be generated by default.
 $_mat-theme-generate-default-density: true !default;
 
+// Warning that will be printed if duplicated styles are generated by a theme.
+$_mat-theme-duplicate-warning: 'Read more about how style duplication can be avoided in a ' +
+  'dedicated guide. https://github.com/angular/components/blob/master/guides/duplicate-theming-styles.md';
+
+// These variable are not intended to be overridden externally. They use `!default` to
+// avoid being reset every time this file is imported.
+$_mat-theme-emitted-color: () !default;
+$_mat-theme-emitted-typography: () !default;
+$_mat-theme-emitted-density: () !default;
+
 // For a given hue in a palette, return the contrast color from the map of contrast palettes.
 // @param $color-map
 // @param $hue
@@ -84,31 +97,6 @@ $_mat-theme-generate-default-density: true !default;
   @return $theme;
 }
 
-// Creates a backwards compatible theme. Previously in Angular Material, theme objects
-// contained the color configuration directly. With the recent refactoring of the theming
-// system to allow for density and typography configurations, this is no longer the case.
-// To ensure that constructed themes which will be passed to custom theme mixins do not break,
-// we copy the color configuration and put its properties at the top-level of the theme object.
-// Here is an example of a pattern that should still work until it's officially marked as a
-// breaking change:
-//
-//    @mixin my-custom-component-theme($theme) {
-//      .my-comp {
-//        background-color: mat-color(map-get($theme, primary));
-//      }
-//    }
-//
-// Note that the `$theme.primary` key does usually not exist since the color configuration
-// is stored in `$theme.color` which contains a property for `primary`. This method copies
-// the map from `$theme.color` to `$theme` for backwards compatibility.
-@function _mat-create-backwards-compatibility-theme($theme) {
-  @if not map-get($theme, color) {
-    @return $theme;
-  }
-  $color: map-get($theme, color);
-  @return map-merge($theme, $color);
-}
-
 // Creates a light-themed color configuration from the specified
 // primary, accent and warn palettes.
 @function _mat-create-light-color-config($primary, $accent, $warn: null) {
@@ -153,7 +141,7 @@ $_mat-theme-generate-default-density: true !default;
   // If the legacy pattern is used, we generate a container object only with a light-themed
   // configuration for the `color` theming part.
   @if $accent != null {
-    @return _mat-create-backwards-compatibility-theme(_mat-validate-theme((
+    @return mat-private-create-backwards-compatibility-theme(_mat-validate-theme((
       _is-legacy-theme: true,
       color: _mat-create-light-color-config($primary, $accent, $warn),
     )));
@@ -169,7 +157,7 @@ $_mat-theme-generate-default-density: true !default;
     $warn: map-get($color-settings, warn);
     $result: map-merge($result, (color: _mat-create-light-color-config($primary, $accent, $warn)));
   }
-  @return _mat-create-backwards-compatibility-theme(_mat-validate-theme($result));
+  @return mat-private-create-backwards-compatibility-theme(_mat-validate-theme($result));
 }
 
 // Creates a container object for a dark theme to be given to individual component theme mixins.
@@ -190,7 +178,7 @@ $_mat-theme-generate-default-density: true !default;
   // If the legacy pattern is used, we generate a container object only with a dark-themed
   // configuration for the `color` theming part.
   @if $accent != null {
-    @return _mat-create-backwards-compatibility-theme(_mat-validate-theme((
+    @return mat-private-create-backwards-compatibility-theme(_mat-validate-theme((
       _is-legacy-theme: true,
       color: _mat-create-dark-color-config($primary, $accent, $warn),
     )));
@@ -206,13 +194,13 @@ $_mat-theme-generate-default-density: true !default;
     $warn: map-get($color-settings, warn);
     $result: map-merge($result, (color: _mat-create-dark-color-config($primary, $accent, $warn)));
   }
-  @return _mat-create-backwards-compatibility-theme(_mat-validate-theme($result));
+  @return mat-private-create-backwards-compatibility-theme(_mat-validate-theme($result));
 }
 
 /// Gets the color configuration from the given theme or configuration.
 @function mat-get-color-config($theme, $default: null) {
   // If a configuration has been passed, return the config directly.
-  @if not _mat-is-theme-object($theme) {
+  @if not mat-private-is-theme-object($theme) {
     @return $theme;
   }
   // If the theme has been constructed through the legacy theming API, we use the theme object
@@ -220,7 +208,7 @@ $_mat-theme-generate-default-density: true !default;
   // backwards compatibility, we copied the color configuration from `$theme.color` to `$theme`.
   // Hence developers could customize the colors at top-level and want to respect these changes
   // TODO: Remove when legacy theming API is removed.
-  @if _mat-is-legacy-constructed-theme($theme) {
+  @if mat-private-is-legacy-constructed-theme($theme) {
     @return $theme;
   }
   @if map-has-key($theme, color) {
@@ -232,7 +220,7 @@ $_mat-theme-generate-default-density: true !default;
 /// Gets the density configuration from the given theme or configuration.
 @function mat-get-density-config($theme-or-config, $default: 0) {
   // If a configuration has been passed, return the config directly.
-  @if not _mat-is-theme-object($theme-or-config) {
+  @if not mat-private-is-theme-object($theme-or-config) {
     @return $theme-or-config;
   }
   // In case a theme has been passed, extract the configuration if present,
@@ -247,7 +235,7 @@ $_mat-theme-generate-default-density: true !default;
 /// For backwards compatibility, typography is not included by default.
 @function mat-get-typography-config($theme-or-config, $default: null) {
   // If a configuration has been passed, return the config directly.
-  @if not _mat-is-theme-object($theme-or-config) {
+  @if not mat-private-is-theme-object($theme-or-config) {
     @return $theme-or-config;
   }
   // In case a theme has been passed, extract the configuration if present,
@@ -258,9 +246,106 @@ $_mat-theme-generate-default-density: true !default;
   @return $default;
 }
 
+
+//
+// Private APIs
+//
+
+// Checks if configurations that have been declared in the given theme have been generated
+// before. If so, warnings will be reported. This should notify developers in case duplicate
+// styles are accidentally generated due to wrong usage of the all-theme mixins.
+//
+// Additionally, this mixin controls the default value for the density configuration. By
+// default, density styles are generated at scale zero. If the same density styles would be
+// generated a second time though, the default value will change to avoid duplicate styles.
+//
+// The mixin keeps track of all configurations in a list that is scoped to the specified
+// id. This is necessary because a given theme can be passed to multiple disjoint theme mixins
+// (e.g. `angular-material-theme` and `angular-material-mdc-theme`) without causing any
+// style duplication.
+@mixin mat-private-check-duplicate-theme-styles($theme-or-color-config, $id) {
+  $theme: mat-private-legacy-get-theme($theme-or-color-config);
+  $color-config: mat-get-color-config($theme);
+  $density-config: mat-get-density-config($theme);
+  $typography-config: mat-get-typography-config($theme);
+  // Lists of previous `color`, `density` and `typography` configurations.
+  $previous-color: map-get($_mat-theme-emitted-color, $id) or ();
+  $previous-typography: map-get($_mat-theme-emitted-typography, $id) or ();
+  $previous-density: map-get($_mat-theme-emitted-density, $id) or ();
+  // Whether duplicate legacy density styles would be generated.
+  $duplicate-legacy-density: false;
+
+  // Check if the color configuration has been generated before.
+  @if $color-config != null {
+    @if index($previous-color, $color-config) != null and
+        not $mat-theme-ignore-duplication-warnings {
+      @warn 'The same color styles are generated multiple times. ' +
+          $_mat-theme-duplicate-warning;
+    }
+    $previous-color: append($previous-color, $color-config);
+  }
+
+  // Check if the typography configuration has been generated before.
+  @if $typography-config != null {
+    @if index($previous-typography, $typography-config) != null and
+        not $mat-theme-ignore-duplication-warnings {
+      @warn 'The same typography styles are generated multiple times. ' +
+          $_mat-theme-duplicate-warning;
+    }
+    $previous-typography: append($previous-typography, $typography-config);
+  }
+
+  // Check if the density configuration has been generated before.
+  @if $density-config != null {
+    @if index($previous-density, $density-config) != null {
+      // Only report a warning if density styles would be duplicated for non-legacy theme
+      // definitions. For legacy themes, we have compatibility logic that avoids duplication
+      // of default density styles. We don't want to report a warning in those cases.
+      @if mat-private-is-legacy-constructed-theme($theme) {
+        $duplicate-legacy-density: true;
+      }
+      @else if not $mat-theme-ignore-duplication-warnings {
+        @warn 'The same density styles are generated multiple times. ' +
+           $_mat-theme-duplicate-warning;
+      }
+    }
+    $previous-density: append($previous-density, $density-config);
+  }
+
+  $_mat-theme-emitted-color: map-merge(
+      $_mat-theme-emitted-color, ($id: $previous-color)) !global;
+  $_mat-theme-emitted-density: map-merge(
+      $_mat-theme-emitted-density, ($id: $previous-density)) !global;
+  $_mat-theme-emitted-typography: map-merge(
+      $_mat-theme-emitted-typography, ($id: $previous-typography)) !global;
+
+  // Optionally, consumers of this mixin can wrap contents inside so that nested
+  // duplicate style checks do not report another warning. e.g. if developers include
+  // the `angular-material-theme` mixin twice, only the top-level duplicate styles check
+  // should report a warning. Not all individual components should report a warning too.
+  $orig-mat-theme-ignore-duplication-warnings: $mat-theme-ignore-duplication-warnings;
+  $mat-theme-ignore-duplication-warnings: true !global;
+
+  // If duplicate default density styles would be generated for a legacy constructed theme,
+  // we adjust the density generation so that no density styles are generated by default.
+  // If no default density styles have been generated yet, we ensure that the styles
+  // are generated at root. For legacy themes our goal is to generate default density
+  // styles **once** and at root. This matches the old behavior where density styles were
+  // part of the base component styles (that did not use view encapsulation).
+  // TODO: Remove this compatibility logic when the legacy theming API is removed.
+  $mat-private-density-generate-at-root: mat-private-is-legacy-constructed-theme($theme) !global;
+  $mat-private-density-generate-styles: not $duplicate-legacy-density !global;
+
+  @content;
+  $mat-theme-ignore-duplication-warnings: $orig-mat-theme-ignore-duplication-warnings !global;
+
+  $mat-private-density-generate-at-root: false !global;
+  $mat-private-density-generate-styles: true !global;
+}
+
 // Checks whether the given value resolves to a theme object. Theme objects are always
 // of type `map` and can optionally only specify `color`, `density` or `typography`.
-@function _mat-is-theme-object($value) {
+@function mat-private-is-theme-object($value) {
   @return type-of($value) == 'map' and (
     map-has-key($value, color) or
     map-has-key($value, density) or
@@ -270,10 +355,35 @@ $_mat-theme-generate-default-density: true !default;
 }
 
 // Checks whether a given value corresponds to a legacy constructed theme.
-@function _mat-is-legacy-constructed-theme($value) {
+@function mat-private-is-legacy-constructed-theme($value) {
   @return type-of($value) == 'map' and map-get($value, '_is-legacy-theme');
 }
 
+// Creates a backwards compatible theme. Previously in Angular Material, theme objects
+// contained the color configuration directly. With the recent refactoring of the theming
+// system to allow for density and typography configurations, this is no longer the case.
+// To ensure that constructed themes which will be passed to custom theme mixins do not break,
+// we copy the color configuration and put its properties at the top-level of the theme object.
+// Here is an example of a pattern that should still work until it's officially marked as a
+// breaking change:
+//
+//    @mixin my-custom-component-theme($theme) {
+//      .my-comp {
+//        background-color: mat-color(map-get($theme, primary));
+//      }
+//    }
+//
+// Note that the `$theme.primary` key does usually not exist since the color configuration
+// is stored in `$theme.color` which contains a property for `primary`. This method copies
+// the map from `$theme.color` to `$theme` for backwards compatibility.
+@function mat-private-create-backwards-compatibility-theme($theme) {
+  @if not map-get($theme, color) {
+    @return $theme;
+  }
+  $color: map-get($theme, color);
+  @return map-merge($theme, $color);
+}
+
 // Gets the theme from the given value that is either already a theme, or a color configuration.
 // This handles the legacy case where developers pass a color configuration directly to the
 // theme mixin. Before we introduced the new pattern for constructing a theme, developers passed
@@ -281,11 +391,11 @@ $_mat-theme-generate-default-density: true !default;
 // construct a theme manually and pass it to a theme. We support this for backwards compatibility.
 // TODO(devversion): remove this in the future. Constructing themes manually is rare,
 // and the code can be easily updated to the new API.
-@function _mat-legacy-get-theme($theme-or-color-config) {
-  @if _mat-is-theme-object($theme-or-color-config) {
+@function mat-private-legacy-get-theme($theme-or-color-config) {
+  @if mat-private-is-theme-object($theme-or-color-config) {
     @return $theme-or-color-config;
   }
-  @return _mat-create-backwards-compatibility-theme((
+  @return mat-private-create-backwards-compatibility-theme((
     _is-legacy-theme: true,
     color: $theme-or-color-config
   ));

package/core/typography/_all-typography.scss

@@ -39,7 +39,7 @@
 
 // Includes all of the typographic styles.
 @mixin angular-material-typography($config-or-theme: null) {
-  $config: if(_mat-is-theme-object($config-or-theme),
+  $config: if(mat-private-is-theme-object($config-or-theme),
       mat-get-typography-config($config-or-theme), $config-or-theme);
 
   // If no actual color configuration has been specified, create a default one.

package/datepicker/_datepicker-theme.scss

@@ -1,7 +1,6 @@
-@import '../core/style/elevation';
+@import '../core/style/private';
 @import '../core/theming/palette';
 @import '../core/theming/theming';
-@import '../core/theming/check-duplicate-styles';
 @import '../core/typography/typography-utils';
 
 
@@ -145,7 +144,7 @@ $mat-calendar-weekday-table-font-size: 11px !default;
   @include _mat-datepicker-color(map-get($config, primary));
 
   .mat-datepicker-content {
-    @include _mat-theme-elevation(4, $config);
+    @include mat-private-theme-elevation(4, $config);
     background-color: mat-color($background, card);
     color: mat-color($foreground, text);
 
@@ -159,7 +158,7 @@ $mat-calendar-weekday-table-font-size: 11px !default;
   }
 
   .mat-datepicker-content-touch {
-    @include _mat-theme-elevation(0, $config);
+    @include mat-private-theme-elevation(0, $config);
   }
 
   .mat-datepicker-toggle-active {
@@ -244,8 +243,8 @@ $mat-calendar-weekday-table-font-size: 11px !default;
 @mixin _mat-datepicker-density($config-or-theme) {}
 
 @mixin mat-datepicker-theme($theme-or-color-config) {
-  $theme: _mat-legacy-get-theme($theme-or-color-config);
-  @include _mat-check-duplicate-theme-styles($theme, 'mat-datepicker') {
+  $theme: mat-private-legacy-get-theme($theme-or-color-config);
+  @include mat-private-check-duplicate-theme-styles($theme, 'mat-datepicker') {
     $color: mat-get-color-config($theme);
     $density: mat-get-density-config($theme);
     $typography: mat-get-typography-config($theme);

package/datepicker/date-range-input-parts.d.ts

@@ -67,8 +67,9 @@ declare abstract class MatDateRangeInputPartBase<D> extends MatDatepickerInputBa
     _getMaxDate(): D | null;
     /** Gets the date filter function from the range input. */
     protected _getDateFilter(): DateFilterFn<D>;
-    protected _outsideValueChanged: () => void;
     protected _parentDisabled(): boolean;
+    protected _shouldHandleChangeEvent({ source }: DateSelectionModelChange<DateRange<D>>): boolean;
+    protected _assignValueProgrammatically(value: D | null): void;
 }
 declare const _MatDateRangeInputBase: CanUpdateErrorStateCtor & typeof MatDateRangeInputPartBase;
 /** Input for entering the start date in a `mat-date-range-input`. */
@@ -81,7 +82,6 @@ export declare class MatStartDate<D> extends _MatDateRangeInputBase<D> implement
     protected _validator: ValidatorFn | null;
     protected _getValueFromModel(modelValue: DateRange<D>): D | null;
     protected _assignValueToModel(value: D | null): void;
-    protected _canEmitChangeEvent: (event: DateSelectionModelChange<DateRange<D>>) => boolean;
     protected _formatValue(value: D | null): void;
     /** Gets the value that should be used when mirroring the input's size. */
     getMirrorValue(): string;
@@ -97,7 +97,6 @@ export declare class MatEndDate<D> extends _MatDateRangeInputBase<D> implements
     protected _validator: ValidatorFn | null;
     protected _getValueFromModel(modelValue: DateRange<D>): D | null;
     protected _assignValueToModel(value: D | null): void;
-    protected _canEmitChangeEvent: (event: DateSelectionModelChange<DateRange<D>>) => boolean;
     _onKeydown(event: KeyboardEvent): void;
     static ngAcceptInputType_disabled: BooleanInput;
 }

package/datepicker/date-range-input.d.ts

@@ -12,15 +12,16 @@ import { NgControl, ControlContainer } from '@angular/forms';
 import { Subject } from 'rxjs';
 import { BooleanInput } from '@angular/cdk/coercion';
 import { MatStartDate, MatEndDate, MatDateRangeInputParent } from './date-range-input-parts';
-import { MatDatepickerControl } from './datepicker-base';
+import { MatDatepickerControl, MatDatepickerPanel } from './datepicker-base';
 import { DateFilterFn } from './datepicker-input-base';
-import { MatDateRangePicker, MatDateRangePickerInput } from './date-range-picker';
+import { MatDateRangePickerInput } from './date-range-picker';
 import { DateRange } from './date-selection-model';
 export declare class MatDateRangeInput<D> implements MatFormFieldControl<DateRange<D>>, MatDatepickerControl<D>, MatDateRangeInputParent<D>, MatDateRangePickerInput<D>, AfterContentInit, OnChanges, OnDestroy {
     private _changeDetectorRef;
     private _elementRef;
     private _dateAdapter;
     private _formField?;
+    private _closedSubscription;
     /** Current value of the range input. */
     get value(): DateRange<D> | null;
     /** Unique ID for the input. */
@@ -38,8 +39,8 @@ export declare class MatDateRangeInput<D> implements MatFormFieldControl<DateRan
      */
     get placeholder(): string;
     /** The range picker that this input is associated with. */
-    get rangePicker(): MatDateRangePicker<D>;
-    set rangePicker(rangePicker: MatDateRangePicker<D>);
+    get rangePicker(): MatDatepickerPanel<MatDatepickerControl<D>, DateRange<D>, D>;
+    set rangePicker(rangePicker: MatDatepickerPanel<MatDatepickerControl<D>, DateRange<D>, D>);
     private _rangePicker;
     /** Whether the input is required. */
     get required(): boolean;

package/datepicker/date-selection-model.d.ts

@@ -62,6 +62,12 @@ export declare abstract class MatDateSelectionModel<S, D = ExtractDateTypeFromSe
     abstract isValid(): boolean;
     /** Checks whether the current selection is complete. */
     abstract isComplete(): boolean;
+    /**
+     * Clones the selection model.
+     * @deprecated To be turned into an abstract method.
+     * @breaking-change 12.0.0
+     */
+    clone(): MatDateSelectionModel<S, D>;
 }
 /**  A selection model that contains a single date. */
 export declare class MatSingleDateSelectionModel<D> extends MatDateSelectionModel<D | null, D> {
@@ -78,6 +84,8 @@ export declare class MatSingleDateSelectionModel<D> extends MatDateSelectionMode
      * is true if the current selection is not null.
      */
     isComplete(): boolean;
+    /** Clones the selection model. */
+    clone(): MatSingleDateSelectionModel<D>;
 }
 /**  A selection model that contains a date range. */
 export declare class MatRangeDateSelectionModel<D> extends MatDateSelectionModel<DateRange<D>, D> {
@@ -95,6 +103,8 @@ export declare class MatRangeDateSelectionModel<D> extends MatDateSelectionModel
      * is true if the current selection has a non-null `start` and `end`.
      */
     isComplete(): boolean;
+    /** Clones the selection model. */
+    clone(): MatRangeDateSelectionModel<D>;
 }
 /** @docs-private */
 export declare function MAT_SINGLE_DATE_SELECTION_MODEL_FACTORY(parent: MatSingleDateSelectionModel<unknown>, adapter: DateAdapter<unknown>): MatSingleDateSelectionModel<unknown>;

package/datepicker/datepicker-actions.d.ts

@@ -0,0 +1,33 @@
+/**
+ * @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
+ */
+import { AfterViewInit, OnDestroy, TemplateRef, ViewContainerRef } from '@angular/core';
+import { MatDatepickerBase, MatDatepickerControl } from './datepicker-base';
+/** Button that will close the datepicker and assign the current selection to the data model. */
+export declare class MatDatepickerApply {
+    private _datepicker;
+    constructor(_datepicker: MatDatepickerBase<MatDatepickerControl<unknown>, unknown>);
+    _applySelection(): void;
+}
+/** Button that will close the datepicker and discard the current selection. */
+export declare class MatDatepickerCancel {
+    _datepicker: MatDatepickerBase<MatDatepickerControl<unknown>, unknown>;
+    constructor(_datepicker: MatDatepickerBase<MatDatepickerControl<unknown>, unknown>);
+}
+/**
+ * Container that can be used to project a row of action buttons
+ * to the bottom of a datepicker or date range picker.
+ */
+export declare class MatDatepickerActions implements AfterViewInit, OnDestroy {
+    private _datepicker;
+    private _viewContainerRef;
+    _template: TemplateRef<unknown>;
+    private _portal;
+    constructor(_datepicker: MatDatepickerBase<MatDatepickerControl<unknown>, unknown>, _viewContainerRef: ViewContainerRef);
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+}

package/datepicker/datepicker-base.d.ts

@@ -8,8 +8,8 @@
 import { Directionality } from '@angular/cdk/bidi';
 import { BooleanInput } from '@angular/cdk/coercion';
 import { Overlay, ScrollStrategy } from '@angular/cdk/overlay';
-import { ComponentType } from '@angular/cdk/portal';
-import { AfterViewInit, ElementRef, EventEmitter, InjectionToken, NgZone, OnDestroy, ViewContainerRef, ChangeDetectorRef, OnChanges, SimpleChanges } from '@angular/core';
+import { ComponentType, TemplatePortal } from '@angular/cdk/portal';
+import { AfterViewInit, ElementRef, EventEmitter, InjectionToken, NgZone, OnDestroy, ViewContainerRef, ChangeDetectorRef, OnChanges, SimpleChanges, OnInit } from '@angular/core';
 import { CanColor, CanColorCtor, DateAdapter, ThemePalette } from '@angular/material/core';
 import { MatDialog } from '@angular/material/dialog';
 import { Subject, Observable } from 'rxjs';
@@ -46,12 +46,13 @@ declare const _MatDatepickerContentMixinBase: CanColorCtor & typeof MatDatepicke
  * future. (e.g. confirmation buttons).
  * @docs-private
  */
-export declare class MatDatepickerContent<S, D = ExtractDateTypeFromSelection<S>> extends _MatDatepickerContentMixinBase implements AfterViewInit, OnDestroy, CanColor {
+export declare class MatDatepickerContent<S, D = ExtractDateTypeFromSelection<S>> extends _MatDatepickerContentMixinBase implements OnInit, AfterViewInit, OnDestroy, CanColor {
     private _changeDetectorRef;
-    private _model;
+    private _globalModel;
     private _dateAdapter;
     private _rangeSelectionStrategy;
     private _subscriptions;
+    private _model;
     /** Reference to the internal calendar component. */
     _calendar: MatCalendar<D>;
     /** Reference to the datepicker that created the overlay. */
@@ -70,17 +71,22 @@ export declare class MatDatepickerContent<S, D = ExtractDateTypeFromSelection<S>
     _closeButtonText: string;
     /** Whether the close button currently has focus. */
     _closeButtonFocused: boolean;
-    constructor(elementRef: ElementRef, _changeDetectorRef: ChangeDetectorRef, _model: MatDateSelectionModel<S, D>, _dateAdapter: DateAdapter<D>, _rangeSelectionStrategy: MatDateRangeSelectionStrategy<D>, 
+    /** Portal with projected action buttons. */
+    _actionsPortal: TemplatePortal | null;
+    constructor(elementRef: ElementRef, _changeDetectorRef: ChangeDetectorRef, _globalModel: MatDateSelectionModel<S, D>, _dateAdapter: DateAdapter<D>, _rangeSelectionStrategy: MatDateRangeSelectionStrategy<D>, 
     /**
      * @deprecated `intl` argument to become required.
      * @breaking-change 12.0.0
      */
     intl?: MatDatepickerIntl);
+    ngOnInit(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     _handleUserSelection(event: MatCalendarUserEvent<D | null>): void;
     _startExitAnimation(): void;
     _getSelected(): D | DateRange<D> | null;
+    /** Applies the current pending selection to the global model. */
+    _applyPendingSelection(): void;
 }
 /** Form control that can be associated with a datepicker. */
 export interface MatDatepickerControl<D> {
@@ -93,8 +99,31 @@ export interface MatDatepickerControl<D> {
     getConnectedOverlayOrigin(): ElementRef;
     stateChanges: Observable<void>;
 }
+/** A datepicker that can be attached to a {@link MatDatepickerControl}. */
+export interface MatDatepickerPanel<C extends MatDatepickerControl<D>, S, D = ExtractDateTypeFromSelection<S>> {
+    /** Stream that emits whenever the date picker is closed. */
+    closedStream: EventEmitter<void>;
+    /** Color palette to use on the datepicker's calendar. */
+    color: ThemePalette;
+    /** The input element the datepicker is associated with. */
+    datepickerInput: C;
+    /** Whether the datepicker pop-up should be disabled. */
+    disabled: boolean;
+    /** The id for the datepicker's calendar. */
+    id: string;
+    /** Whether the datepicker is open. */
+    opened: boolean;
+    /** Stream that emits whenever the date picker is opened. */
+    openedStream: EventEmitter<void>;
+    /** Emits when the datepicker's state changes. */
+    stateChanges: Subject<void>;
+    /** Opens the datepicker. */
+    open(): void;
+    /** Register an input with the datepicker. */
+    registerInput(input: C): MatDateSelectionModel<S, D>;
+}
 /** Base class for a datepicker. */
-export declare abstract class MatDatepickerBase<C extends MatDatepickerControl<D>, S, D = ExtractDateTypeFromSelection<S>> implements OnDestroy, OnChanges {
+export declare abstract class MatDatepickerBase<C extends MatDatepickerControl<D>, S, D = ExtractDateTypeFromSelection<S>> implements MatDatepickerPanel<C, S, D>, OnDestroy, OnChanges {
     private _dialog;
     private _overlay;
     private _ngZone;
@@ -180,10 +209,12 @@ export declare abstract class MatDatepickerBase<C extends MatDatepickerControl<D
     private _focusedElementBeforeOpen;
     /** Unique class that will be added to the backdrop so that the test harnesses can look it up. */
     private _backdropHarnessClass;
+    /** Currently-registered actions portal. */
+    private _actionsPortal;
     /** The input element this datepicker is associated with. */
-    _datepickerInput: C;
+    datepickerInput: C;
     /** Emits when the datepicker's state changes. */
-    readonly _stateChanges: Subject<void>;
+    readonly stateChanges: Subject<void>;
     constructor(_dialog: MatDialog, _overlay: Overlay, _ngZone: NgZone, _viewContainerRef: ViewContainerRef, scrollStrategy: any, _dateAdapter: DateAdapter<D>, _dir: Directionality, _document: any, _model: MatDateSelectionModel<S, D>);
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
@@ -200,11 +231,23 @@ export declare abstract class MatDatepickerBase<C extends MatDatepickerControl<D
      * @param input The datepicker input to register with this datepicker.
      * @returns Selection model that the input should hook itself up to.
      */
-    _registerInput(input: C): MatDateSelectionModel<S, D>;
+    registerInput(input: C): MatDateSelectionModel<S, D>;
+    /**
+     * Registers a portal containing action buttons with the datepicker.
+     * @param portal Portal to be registered.
+     */
+    registerActions(portal: TemplatePortal): void;
+    /**
+     * Removes a portal containing action buttons from the datepicker.
+     * @param portal Portal to be removed.
+     */
+    removeActions(portal: TemplatePortal): void;
     /** Open the calendar. */
     open(): void;
     /** Close the calendar. */
     close(): void;
+    /** Applies the current pending selection on the popup to the model. */
+    _applyPendingSelection(): void;
     /** Open the calendar as a dialog. */
     private _openAsDialog;
     /** Open the calendar as a popup. */

package/datepicker/datepicker-input-base.d.ts

@@ -50,13 +50,11 @@ export declare abstract class MatDatepickerInputBase<S, D = ExtractDateTypeFromS
     readonly dateChange: EventEmitter<MatDatepickerInputEvent<D, S>>;
     /** Emits when an `input` event is fired on this `<input>`. */
     readonly dateInput: EventEmitter<MatDatepickerInputEvent<D, S>>;
-    /** Emits when the value changes (either due to user input or programmatic change). */
-    _valueChange: EventEmitter<D | null>;
     /** Emits when the internal state has changed */
     stateChanges: Subject<void>;
     _onTouched: () => void;
     _validatorOnChange: () => void;
-    protected _cvaOnChange: (value: any) => void;
+    private _cvaOnChange;
     private _valueChangesSubscription;
     private _localeSubscription;
     /**
@@ -91,13 +89,8 @@ export declare abstract class MatDatepickerInputBase<S, D = ExtractDateTypeFromS
     protected abstract _getValueFromModel(modelValue: S): D | null;
     /** Combined form control validator for this input. */
     protected abstract _validator: ValidatorFn | null;
-    /**
-     * Callback that'll be invoked when the selection model is changed
-     * from somewhere that's not the current datepicker input.
-     */
-    protected abstract _outsideValueChanged?: () => void;
-    /** Predicate that determines whether we're allowed to emit a particular change event. */
-    protected abstract _canEmitChangeEvent(event: DateSelectionModelChange<S>): boolean;
+    /** Predicate that determines whether the input should handle a particular change event. */
+    protected abstract _shouldHandleChangeEvent(event: DateSelectionModelChange<S>): boolean;
     /** Whether the last value set on the input was valid. */
     protected _lastValueValid: boolean;
     constructor(_elementRef: ElementRef<HTMLInputElement>, _dateAdapter: DateAdapter<D>, _dateFormats: MatDateFormats);
@@ -128,6 +121,8 @@ export declare abstract class MatDatepickerInputBase<S, D = ExtractDateTypeFromS
      * by inputs extending this one which can be placed inside of a group that can be disabled.
      */
     protected _parentDisabled(): boolean;
+    /** Programmatically assigns a value to the input. */
+    protected _assignValueProgrammatically(value: D | null): void;
     /** Gets whether a value matches the current date filter. */
     _matchesFilter(value: D | null): boolean;
     static ngAcceptInputType_value: any;