@angular/material 16.0.0-next.4 → 16.0.0-next.5

package/core/mdc-helpers/_mdc-helpers.scss

@@ -84,13 +84,13 @@ $mat-typography-mdc-level-mappings: (
 }
 
 // Converts an MDC typography level config to an Angular Material one.
-@function typography-config-level-from-mdc($mdc-level) {
+@function typography-config-level-from-mdc($mdc-level, $font-family: null) {
   $mdc-level-config: map.get(mdc-typography.$styles, $mdc-level);
 
-  // Explicitly set the font family to null since we'll apply it globally
+  // Explicitly default the font family to null since we'll apply it globally
   // through the `define-typgraphy-config`/`define-legacy-typography-config`.
   @return typography.define-typography-level(
-    $font-family: null,
+    $font-family: $font-family,
     $font-size: map.get($mdc-level-config, font-size),
     $line-height: map.get($mdc-level-config, line-height),
     $font-weight: map.get($mdc-level-config, font-weight),
@@ -226,6 +226,34 @@ $mat-typography-mdc-level-mappings: (
   mdc-typography.$styles: $orig-mdc-typography-styles;
 }
 
+// Function to create an Angular Material typography config from MDC's predefined typography levels.
+// This is used for components where we accidentally ended up supporting null typography configs
+// that were silently falling back to MDC's typography. At the moment of writing this includes
+// `dialog`, `slider` and `tooltip`.
+// Important! We shouldn't introduce any new usages of this pattern and we should eventually clean
+// up any existing usages.
+@function private-fallback-typography-from-mdc() {
+  // This is very close to what we have in `define-typography-config`, but we can't use it here,
+  // because it would cause a circular import and moving it here doesn't make sense.
+  $font-family: mdc-typography.$font-family;
+  @return (
+    font-family: $font-family,
+    headline-1: typography-config-level-from-mdc(headline1, $font-family),
+    headline-2: typography-config-level-from-mdc(headline2, $font-family),
+    headline-3: typography-config-level-from-mdc(headline3, $font-family),
+    headline-4: typography-config-level-from-mdc(headline4, $font-family),
+    headline-5: typography-config-level-from-mdc(headline5, $font-family),
+    headline-6: typography-config-level-from-mdc(headline6, $font-family),
+    subtitle-1: typography-config-level-from-mdc(subtitle1, $font-family),
+    subtitle-2: typography-config-level-from-mdc(subtitle2, $font-family),
+    body-1: typography-config-level-from-mdc(body1, $font-family),
+    body-2: typography-config-level-from-mdc(body2, $font-family),
+    caption: typography-config-level-from-mdc(caption, $font-family),
+    button: typography-config-level-from-mdc(button, $font-family),
+    overline: typography-config-level-from-mdc(overline, $font-family),
+  );
+}
+
 // Disables MDC's CSS custom property fallbacks for the specified mixin content.
 @mixin disable-mdc-fallback-declarations {
   $previous-value: mdc-theme-css.$enable-fallback-declarations;

package/core/tokens/_token-utils.scss

@@ -25,7 +25,7 @@ $_placeholder-typography-level-config: mdc-helpers.typography-config-level-from-
 // Placeholder typography config that can be passed to token getter functions when generating token
 // slots.
 $placeholder-typography-config: (
-  font-family: Roboto,
+  font-family: 'Roboto, sans-serif',
   headline-1: $_placeholder-typography-level-config,
   headline-2: $_placeholder-typography-level-config,
   headline-3: $_placeholder-typography-level-config,

package/core/tokens/m2/{mdc/_table.scss → mat/_radio.scss}

@@ -1,23 +1,27 @@
 @use 'sass:map';
-@use '../../../theming/theming';
 @use '../../token-utils';
+@use '../../../theming/theming';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, table);
+$prefix: (mat, radio);
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
-//
-// Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`.
-// `null` indicates that we are intentionally choosing not to emit a slot or value for the token in
-// our CSS.
 @function get-unthemable-tokens() {
   @return ();
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($config) {
-  @return ();
+  $foreground: map.get($config, foreground);
+  $is-dark: map.get($config, is-dark);
+  $accent: map.get($config, accent);
+
+  @return (
+    ripple-color: if($is-dark, #fff, #000),
+    checked-ripple-color: theming.get-color-from-palette($accent, default),
+    disabled-label-color: theming.get-color-from-palette($foreground, disabled-text),
+  );
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
@@ -33,14 +37,10 @@ $prefix: (mdc, table);
 // Combines the tokens generated by the above functions into a single map with placeholder values.
 // This is used to create token slots.
 @function get-token-slots() {
-  @return map.merge(
-      get-unthemable-tokens(),
-      map.merge(
+  @return token-utils.merge-all(
+          get-unthemable-tokens(),
           get-color-tokens(token-utils.$placeholder-color-config),
-          map.merge(
-              get-typography-tokens(token-utils.$placeholder-typography-config),
-              get-density-tokens(token-utils.$placeholder-density-config)
-          )
-      )
+          get-typography-tokens(token-utils.$placeholder-typography-config),
+          get-density-tokens(token-utils.$placeholder-density-config)
   );
 }

package/core/tokens/m2/mdc/_dialog.scss

@@ -0,0 +1,115 @@
+@use 'sass:map';
+@use '../../../theming/theming';
+@use '../../../typography/typography-utils';
+@use '../../../mdc-helpers/mdc-helpers';
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mdc, dialog);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+//
+// Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`.
+// `null` indicates that we are intentionally choosing not to emit a slot or value for the token in
+// our CSS.
+@function get-unthemable-tokens() {
+  @return (
+    // Height of the container's elevation.
+    container-elevation: 24,
+    // Color of the elevation shadow.
+    container-shadow-color: #000,
+    // Border radius of the container.
+    container-shape: 4px,
+
+    // =============================================================================================
+    // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
+    // =============================================================================================
+    with-divider-divider-height: null,
+    with-divider-divider-color: null,
+    with-icon-icon-size: null,
+    with-icon-icon-color: null,
+    action-label-text-font: null,
+    action-label-text-line-height: null,
+    action-label-text-size: null,
+    action-label-text-weight: null,
+    action-label-text-tracking: null,
+    action-label-text-color: null,
+    action-hover-state-layer-color: null,
+    action-hover-state-layer-opacity: null,
+    action-hover-label-text-color: null,
+    action-focus-state-layer-color: null,
+    action-focus-state-layer-opacity: null,
+    action-focus-label-text-color: null,
+    action-pressed-state-layer-color: null,
+    action-pressed-state-layer-opacity: null,
+    action-pressed-label-text-color: null,
+    headline-color: null,
+    headline-font: null,
+    headline-line-height: null,
+    headline-size: null,
+    headline-tracking: null,
+    headline-weight: null,
+  );
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($config) {
+  $is-dark: map.get($config, 'is-dark');
+  $background: map.get($config, background);
+  $on-surface: if($is-dark, #fff, #000);
+
+  @return (
+    // Background color of the container.
+    container-color: theming.get-color-from-palette($background, dialog),
+    // Color of the dialog header.
+    subhead-color: rgba($on-surface, 0.87),
+    // Color of the dialog body text.
+    supporting-text-color: rgba($on-surface, 0.6),
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($config) {
+  // TODO(crisbeto): The earlier implementation of the dialog used MDC's APIs to create the
+  // typography tokens. As a result, we unintentionally allowed `null` typography configs to be
+  // passed in. Since there a lot of apps that now depend on this pattern, we need this temporary
+  // fallback.
+  @if ($config == null) {
+    $config: mdc-helpers.private-fallback-typography-from-mdc();
+  }
+
+  @return (
+    // Typography of the dialog header.
+    subhead-font: typography-utils.font-family($config, headline-6)
+      or typography-utils.font-family($config),
+    subhead-line-height: typography-utils.line-height($config, headline-6),
+    subhead-size: typography-utils.font-size($config, headline-6),
+    subhead-weight: typography-utils.font-weight($config, headline-6),
+    subhead-tracking: typography-utils.letter-spacing($config, headline-6),
+
+    // Typography of the dialog body text.
+    supporting-text-font: typography-utils.font-family($config, body-1)
+      or typography-utils.font-family($config),
+    supporting-text-line-height: typography-utils.line-height($config, body-1),
+    supporting-text-size: typography-utils.font-size($config, body-1),
+    supporting-text-weight: typography-utils.font-weight($config, body-1),
+    supporting-text-tracking: typography-utils.letter-spacing($config, body-1),
+  );
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($config) {
+  @return ();
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+  @return token-utils.merge-all(
+          get-unthemable-tokens(),
+          get-color-tokens(token-utils.$placeholder-color-config),
+          get-typography-tokens(token-utils.$placeholder-typography-config),
+          get-density-tokens(token-utils.$placeholder-density-config)
+  );
+}

package/core/tokens/m2/mdc/_icon-button.scss

@@ -0,0 +1,79 @@
+@use 'sass:map';
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mdc, icon-button);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+//
+// Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`.
+// `null` indicates that we are intentionally choosing not to emit a slot or value for the token in
+// our CSS.
+@function get-unthemable-tokens() {
+  @return (
+    // =============================================================================================
+    // = TOKENS THAT SHOULD NOT BE CUSTOMIZABLE                                                    =
+    // =============================================================================================
+    // Determines the size of the icon. Name is inaccurate - applies to the whole component,
+    // not just the state layer.
+    state-layer-size: 48px,
+
+    // MDC's icon size applied to svg and img elements inside the component
+    icon-size: 24px,
+
+    // Only applies to :disabled icons, but Angular Components uses [disabled] since :disabled
+    // wouldn't work on <a> tags.
+    disabled-icon-color: black,
+
+    // Angular version applies an opacity 1 with a color change, and this only applies with
+    // :disabled anyways.
+    disabled-icon-opacity: 0.38,
+
+    // =============================================================================================
+    // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
+    // =============================================================================================
+    // State layer is unused
+    focus-icon-color: null,
+    focus-state-layer-color: null,
+    focus-state-layer-opacity: null,
+    hover-icon-color: null,
+    hover-state-layer-color: null,
+    hover-state-layer-opacity: null,
+    pressed-icon-color: null,
+    pressed-state-layer-color: null,
+    pressed-state-layer-opacity: null,
+  );
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($config) {
+  @return (
+    icon-color: inherit,
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($config) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($config) {
+  @return ();
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+  @return map.merge(
+      get-unthemable-tokens(),
+      map.merge(
+          get-color-tokens(token-utils.$placeholder-color-config),
+          map.merge(
+              get-typography-tokens(token-utils.$placeholder-typography-config),
+              get-density-tokens(token-utils.$placeholder-density-config)
+          )
+      )
+  );
+}

package/core/tokens/m2/mdc/_linear-progress.scss

@@ -0,0 +1,60 @@
+@use '../../../theming/theming';
+@use '../../token-utils';
+@use 'sass:color';
+@use 'sass:map';
+@use 'sass:meta';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mdc, linear-progress);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+//
+// Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`.
+// `null` indicates that we are intentionally choosing not to emit a slot or value for the token in
+// our CSS.
+@function get-unthemable-tokens() {
+  @return (
+    // The height of the progress bar track.
+    track-height: 4px
+  );
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($config) {
+  $primary: theming.get-color-from-palette(map.get($config, primary));
+  @return (
+    // The color of the progress bar's active section.
+    active-indicator-color: $primary,
+    track-color: if(
+      meta.type-of($primary) == color,
+      color.adjust($primary, $alpha: -0.75),
+      $primary
+    )
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($config) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($config) {
+  @return ();
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+  @return map.merge(
+    get-unthemable-tokens(),
+    map.merge(
+      get-color-tokens(token-utils.$placeholder-color-config),
+      map.merge(
+        get-typography-tokens(token-utils.$placeholder-typography-config),
+        get-density-tokens(token-utils.$placeholder-density-config)
+      )
+    )
+  );
+}

package/core/tokens/m2/mdc/_radio.scss

@@ -0,0 +1,94 @@
+@use 'sass:map';
+@use '../../../theming/palette';
+@use '../../../theming/theming';
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mdc, radio);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+//
+// Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`.
+// `null` indicates that we are intentionally choosing not to emit a slot or value for the token in
+// our CSS.
+@function get-unthemable-tokens() {
+  @return (
+    disabled-selected-icon-opacity: 0.38,
+    disabled-unselected-icon-opacity: 0.38,
+
+    // This is specified both here and in the density tokens, because it
+    // determines the size of the radio button itself and there are internal
+    // tests who don't configure the theme correctly.
+    state-layer-size: 40px,
+
+    // =============================================================================================
+    // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
+    // =============================================================================================
+    selected-focus-state-layer-color: null,
+    selected-focus-state-layer-opacity: null,
+    selected-hover-state-layer-color: null,
+    selected-hover-state-layer-opacity: null,
+    selected-pressed-state-layer-color: null,
+    selected-pressed-state-layer-opacity: null,
+    unselected-focus-icon-color: null,
+    unselected-focus-state-layer-color: null,
+    unselected-focus-state-layer-opacity: null,
+    unselected-hover-state-layer-color: null,
+    unselected-hover-state-layer-opacity: null,
+    unselected-pressed-state-layer-color: null,
+    unselected-pressed-state-layer-opacity: null,
+  );
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($config) {
+  $accent: map.get($config, accent);
+  $is-dark: map.get($config, is-dark);
+  $accent-color: theming.get-color-from-palette($accent, default);
+  $on-surface: if($is-dark, #fff, #000);
+  $icon-color: theming.get-color-from-palette(palette.$gray-palette, if($is-dark, 200, 900));
+
+  @return (
+    disabled-selected-icon-color: $on-surface,
+    disabled-unselected-icon-color: $on-surface,
+    unselected-hover-icon-color: $icon-color,
+    unselected-icon-color: rgba($on-surface, 0.54),
+    unselected-pressed-icon-color: rgba($on-surface, 0.54),
+    selected-focus-icon-color: $accent-color,
+    selected-hover-icon-color: $accent-color,
+    selected-icon-color: $accent-color,
+    selected-pressed-icon-color: $accent-color,
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($config) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($config) {
+  $scale: theming.clamp-density($config, -3);
+
+  @return (
+    // The diameter of the radio's ripple.
+    state-layer-size: map.get((
+      0: 40px,
+      -1: 36px,
+      -2: 32px,
+      -3: 28px,
+    ), $scale)
+  );
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+  @return token-utils.merge-all(
+          get-unthemable-tokens(),
+          get-color-tokens(token-utils.$placeholder-color-config),
+          get-typography-tokens(token-utils.$placeholder-typography-config),
+          get-density-tokens(token-utils.$placeholder-density-config)
+  );
+}

package/core/typography/_typography-utils.scss

@@ -86,12 +86,14 @@
 /// @param {Map} $config A typography config.
 /// @param {Map} $level A typography level.
 @mixin typography-level($config, $level) {
-  $font-size: font-size($config, $level);
-  $font-weight: font-weight($config, $level);
-  $line-height: line-height($config, $level);
-  $font-family: font-family($config, $level);
+  // we deliberately do not use the font shorthand here because it overrides
+  // certain font properties that can't be configured in the current typography
+  // config, e.g. the font-variant-caps or font-feature-settings property
+  font-size: font-size($config, $level);
+  font-weight: font-weight($config, $level);
+  line-height: line-height($config, $level);
+  font-family: font-family($config, $level);
 
-  @include font-shorthand($font-size, $font-weight, $line-height, $font-family);
   letter-spacing: letter-spacing($config, $level);
 }
 

package/datepicker/index.d.ts

@@ -388,7 +388,7 @@ export declare class MatCalendar<D> implements AfterContentInit, AfterViewChecke
     /** Returns the component instance that corresponds to the current calendar view. */
     private _getCurrentViewComponent;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatCalendar<any>, [null, { optional: true; }, { optional: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatCalendar<any>, "mat-calendar", ["matCalendar"], { "headerComponent": "headerComponent"; "startAt": "startAt"; "startView": "startView"; "selected": "selected"; "minDate": "minDate"; "maxDate": "maxDate"; "dateFilter": "dateFilter"; "dateClass": "dateClass"; "comparisonStart": "comparisonStart"; "comparisonEnd": "comparisonEnd"; "startDateAccessibleName": "startDateAccessibleName"; "endDateAccessibleName": "endDateAccessibleName"; }, { "selectedChange": "selectedChange"; "yearSelected": "yearSelected"; "monthSelected": "monthSelected"; "viewChanged": "viewChanged"; "_userSelection": "_userSelection"; "_userDragDrop": "_userDragDrop"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatCalendar<any>, "mat-calendar", ["matCalendar"], { "headerComponent": { "alias": "headerComponent"; "required": false; }; "startAt": { "alias": "startAt"; "required": false; }; "startView": { "alias": "startView"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; "dateClass": { "alias": "dateClass"; "required": false; }; "comparisonStart": { "alias": "comparisonStart"; "required": false; }; "comparisonEnd": { "alias": "comparisonEnd"; "required": false; }; "startDateAccessibleName": { "alias": "startDateAccessibleName"; "required": false; }; "endDateAccessibleName": { "alias": "endDateAccessibleName"; "required": false; }; }, { "selectedChange": "selectedChange"; "yearSelected": "yearSelected"; "monthSelected": "monthSelected"; "viewChanged": "viewChanged"; "_userSelection": "_userSelection"; "_userDragDrop": "_userDragDrop"; }, never, never, false, never>;
 }
 
 /**
@@ -556,7 +556,7 @@ export declare class MatCalendarBody<D = any> implements OnChanges, OnDestroy, A
     _startDateLabelId: string;
     _endDateLabelId: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatCalendarBody<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatCalendarBody<any>, "[mat-calendar-body]", ["matCalendarBody"], { "label": "label"; "rows": "rows"; "todayValue": "todayValue"; "startValue": "startValue"; "endValue": "endValue"; "labelMinRequiredCells": "labelMinRequiredCells"; "numCols": "numCols"; "activeCell": "activeCell"; "isRange": "isRange"; "cellAspectRatio": "cellAspectRatio"; "comparisonStart": "comparisonStart"; "comparisonEnd": "comparisonEnd"; "previewStart": "previewStart"; "previewEnd": "previewEnd"; "startDateAccessibleName": "startDateAccessibleName"; "endDateAccessibleName": "endDateAccessibleName"; }, { "selectedValueChange": "selectedValueChange"; "previewChange": "previewChange"; "activeDateChange": "activeDateChange"; "dragStarted": "dragStarted"; "dragEnded": "dragEnded"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatCalendarBody<any>, "[mat-calendar-body]", ["matCalendarBody"], { "label": { "alias": "label"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "todayValue": { "alias": "todayValue"; "required": false; }; "startValue": { "alias": "startValue"; "required": false; }; "endValue": { "alias": "endValue"; "required": false; }; "labelMinRequiredCells": { "alias": "labelMinRequiredCells"; "required": false; }; "numCols": { "alias": "numCols"; "required": false; }; "activeCell": { "alias": "activeCell"; "required": false; }; "isRange": { "alias": "isRange"; "required": false; }; "cellAspectRatio": { "alias": "cellAspectRatio"; "required": false; }; "comparisonStart": { "alias": "comparisonStart"; "required": false; }; "comparisonEnd": { "alias": "comparisonEnd"; "required": false; }; "previewStart": { "alias": "previewStart"; "required": false; }; "previewEnd": { "alias": "previewEnd"; "required": false; }; "startDateAccessibleName": { "alias": "startDateAccessibleName"; "required": false; }; "endDateAccessibleName": { "alias": "endDateAccessibleName"; "required": false; }; }, { "selectedValueChange": "selectedValueChange"; "previewChange": "previewChange"; "activeDateChange": "activeDateChange"; "dragStarted": "dragStarted"; "dragEnded": "dragEnded"; }, never, never, false, never>;
 }
 
 /**
@@ -821,7 +821,7 @@ declare abstract class MatDatepickerBase<C extends MatDatepickerControl<D>, S, D
     /** Gets an observable that will emit when the overlay is supposed to be closed. */
     private _getCloseStream;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatDatepickerBase<any, any, any>, [null, null, null, null, { optional: true; }, { optional: true; }, null]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatDatepickerBase<any, any, any>, never, never, { "calendarHeaderComponent": "calendarHeaderComponent"; "startAt": "startAt"; "startView": "startView"; "color": "color"; "touchUi": "touchUi"; "disabled": "disabled"; "xPosition": "xPosition"; "yPosition": "yPosition"; "restoreFocus": "restoreFocus"; "dateClass": "dateClass"; "panelClass": "panelClass"; "opened": "opened"; }, { "yearSelected": "yearSelected"; "monthSelected": "monthSelected"; "viewChanged": "viewChanged"; "openedStream": "opened"; "closedStream": "closed"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatDatepickerBase<any, any, any>, never, never, { "calendarHeaderComponent": { "alias": "calendarHeaderComponent"; "required": false; }; "startAt": { "alias": "startAt"; "required": false; }; "startView": { "alias": "startView"; "required": false; }; "color": { "alias": "color"; "required": false; }; "touchUi": { "alias": "touchUi"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "xPosition": { "alias": "xPosition"; "required": false; }; "yPosition": { "alias": "yPosition"; "required": false; }; "restoreFocus": { "alias": "restoreFocus"; "required": false; }; "dateClass": { "alias": "dateClass"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "opened": { "alias": "opened"; "required": false; }; }, { "yearSelected": "yearSelected"; "monthSelected": "monthSelected"; "viewChanged": "viewChanged"; "openedStream": "opened"; "closedStream": "closed"; }, never, never, false, never>;
 }
 
 /** Button that will close the datepicker and discard the current selection. */
@@ -894,7 +894,7 @@ export declare class MatDatepickerContent<S, D = ExtractDateTypeFromSelection<S>
      */
     _assignActions(portal: TemplatePortal<any> | null, forceRerender: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatDatepickerContent<any, any>, [null, null, null, null, { optional: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatDatepickerContent<any, any>, "mat-datepicker-content", ["matDatepickerContent"], { "color": "color"; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatDatepickerContent<any, any>, "mat-datepicker-content", ["matDatepickerContent"], { "color": { "alias": "color"; "required": false; }; }, {}, never, never, false, never>;
 }
 
 /** @docs-private */
@@ -963,7 +963,7 @@ export declare class MatDatepickerInput<D> extends MatDatepickerInputBase<D | nu
     protected _getDateFilter(): DateFilterFn<D | null>;
     protected _shouldHandleChangeEvent(event: DateSelectionModelChange<D>): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatDatepickerInput<any>, [null, { optional: true; }, { optional: true; }, { optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatDatepickerInput<any>, "input[matDatepicker]", ["matDatepickerInput"], { "matDatepicker": "matDatepicker"; "min": "min"; "max": "max"; "dateFilter": "matDatepickerFilter"; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatDatepickerInput<any>, "input[matDatepicker]", ["matDatepickerInput"], { "matDatepicker": { "alias": "matDatepicker"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "dateFilter": { "alias": "matDatepickerFilter"; "required": false; }; }, {}, never, never, false, never>;
 }
 
 /** Base class for datepicker inputs. */
@@ -1061,7 +1061,7 @@ declare abstract class MatDatepickerInputBase<S, D = ExtractDateTypeFromSelectio
     /** Gets whether a value matches the current date filter. */
     _matchesFilter(value: D | null): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatDatepickerInputBase<any, any>, [null, { optional: true; }, { optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatDatepickerInputBase<any, any>, never, never, { "value": "value"; "disabled": "disabled"; }, { "dateChange": "dateChange"; "dateInput": "dateInput"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatDatepickerInputBase<any, any>, never, never, { "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "dateChange": "dateChange"; "dateInput": "dateInput"; }, never, never, false, never>;
 }
 
 /**
@@ -1189,7 +1189,7 @@ export declare class MatDatepickerToggle<D> implements AfterContentInit, OnChang
     _open(event: Event): void;
     private _watchStateChanges;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatDatepickerToggle<any>, [null, null, { attribute: "tabindex"; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatDatepickerToggle<any>, "mat-datepicker-toggle", ["matDatepickerToggle"], { "datepicker": "for"; "tabIndex": "tabIndex"; "ariaLabel": "aria-label"; "disabled": "disabled"; "disableRipple": "disableRipple"; }, {}, ["_customIcon"], ["[matDatepickerToggleIcon]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatDatepickerToggle<any>, "mat-datepicker-toggle", ["matDatepickerToggle"], { "datepicker": { "alias": "for"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; }, {}, ["_customIcon"], ["[matDatepickerToggleIcon]"], false, never>;
 }
 
 /** Can be used to override the icon of a `matDatepickerToggle`. */
@@ -1313,7 +1313,7 @@ export declare class MatDateRangeInput<D> implements MatFormFieldControl<DateRan
     /** Checks whether a specific range input directive is required. */
     private _isTargetRequired;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatDateRangeInput<any>, [null, null, { optional: true; self: true; }, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatDateRangeInput<any>, "mat-date-range-input", ["matDateRangeInput"], { "rangePicker": "rangePicker"; "required": "required"; "dateFilter": "dateFilter"; "min": "min"; "max": "max"; "disabled": "disabled"; "separator": "separator"; "comparisonStart": "comparisonStart"; "comparisonEnd": "comparisonEnd"; }, {}, ["_startInput", "_endInput"], ["input[matStartDate]", "input[matEndDate]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatDateRangeInput<any>, "mat-date-range-input", ["matDateRangeInput"], { "rangePicker": { "alias": "rangePicker"; "required": false; }; "required": { "alias": "required"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "separator": { "alias": "separator"; "required": false; }; "comparisonStart": { "alias": "comparisonStart"; "required": false; }; "comparisonEnd": { "alias": "comparisonEnd"; "required": false; }; }, {}, ["_startInput", "_endInput"], ["input[matStartDate]", "input[matEndDate]"], false, never>;
 }
 
 declare const _MatDateRangeInputBase: _Constructor<CanUpdateErrorState> & _AbstractConstructor<CanUpdateErrorState> & typeof MatDateRangeInputPartBase;
@@ -1483,7 +1483,7 @@ export declare class MatEndDate<D> extends _MatDateRangeInputBase<D> implements
     protected _assignValueToModel(value: D | null): void;
     _onKeydown(event: KeyboardEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatEndDate<any>, [null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatEndDate<any>, "input[matEndDate]", never, { "errorStateMatcher": "errorStateMatcher"; }, { "dateChange": "dateChange"; "dateInput": "dateInput"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatEndDate<any>, "input[matEndDate]", never, { "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; }, { "dateChange": "dateChange"; "dateInput": "dateInput"; }, never, never, false, never>;
 }
 
 /**
@@ -1650,7 +1650,7 @@ export declare class MatMonthView<D> implements AfterContentInit, OnChanges, OnD
     /** Clears out preview state. */
     private _clearPreview;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatMonthView<any>, [null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatMonthView<any>, "mat-month-view", ["matMonthView"], { "activeDate": "activeDate"; "selected": "selected"; "minDate": "minDate"; "maxDate": "maxDate"; "dateFilter": "dateFilter"; "dateClass": "dateClass"; "comparisonStart": "comparisonStart"; "comparisonEnd": "comparisonEnd"; "startDateAccessibleName": "startDateAccessibleName"; "endDateAccessibleName": "endDateAccessibleName"; "activeDrag": "activeDrag"; }, { "selectedChange": "selectedChange"; "_userSelection": "_userSelection"; "dragStarted": "dragStarted"; "dragEnded": "dragEnded"; "activeDateChange": "activeDateChange"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatMonthView<any>, "mat-month-view", ["matMonthView"], { "activeDate": { "alias": "activeDate"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; "dateClass": { "alias": "dateClass"; "required": false; }; "comparisonStart": { "alias": "comparisonStart"; "required": false; }; "comparisonEnd": { "alias": "comparisonEnd"; "required": false; }; "startDateAccessibleName": { "alias": "startDateAccessibleName"; "required": false; }; "endDateAccessibleName": { "alias": "endDateAccessibleName"; "required": false; }; "activeDrag": { "alias": "activeDrag"; "required": false; }; }, { "selectedChange": "selectedChange"; "_userSelection": "_userSelection"; "dragStarted": "dragStarted"; "dragEnded": "dragEnded"; "activeDateChange": "activeDateChange"; }, never, never, false, never>;
 }
 
 /**
@@ -1739,7 +1739,7 @@ export declare class MatMultiYearView<D> implements AfterContentInit, OnDestroy
     /** Sets the currently-highlighted year based on a model value. */
     private _setSelectedYear;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatMultiYearView<any>, [null, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatMultiYearView<any>, "mat-multi-year-view", ["matMultiYearView"], { "activeDate": "activeDate"; "selected": "selected"; "minDate": "minDate"; "maxDate": "maxDate"; "dateFilter": "dateFilter"; "dateClass": "dateClass"; }, { "selectedChange": "selectedChange"; "yearSelected": "yearSelected"; "activeDateChange": "activeDateChange"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatMultiYearView<any>, "mat-multi-year-view", ["matMultiYearView"], { "activeDate": { "alias": "activeDate"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; "dateClass": { "alias": "dateClass"; "required": false; }; }, { "selectedChange": "selectedChange"; "yearSelected": "yearSelected"; "activeDateChange": "activeDateChange"; }, never, never, false, never>;
 }
 
 /**
@@ -1803,7 +1803,7 @@ export declare class MatStartDate<D> extends _MatDateRangeInputBase<D> implement
     protected _formatValue(value: D | null): void;
     _onKeydown(event: KeyboardEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatStartDate<any>, [null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatStartDate<any>, "input[matStartDate]", never, { "errorStateMatcher": "errorStateMatcher"; }, { "dateChange": "dateChange"; "dateInput": "dateInput"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatStartDate<any>, "input[matStartDate]", never, { "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; }, { "dateChange": "dateChange"; "dateInput": "dateInput"; }, never, never, false, never>;
 }
 
 /**
@@ -1912,7 +1912,7 @@ export declare class MatYearView<D> implements AfterContentInit, OnDestroy {
     /** Sets the currently-selected month based on a model value. */
     private _setSelectedMonth;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatYearView<any>, [null, { optional: true; }, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatYearView<any>, "mat-year-view", ["matYearView"], { "activeDate": "activeDate"; "selected": "selected"; "minDate": "minDate"; "maxDate": "maxDate"; "dateFilter": "dateFilter"; "dateClass": "dateClass"; }, { "selectedChange": "selectedChange"; "monthSelected": "monthSelected"; "activeDateChange": "activeDateChange"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatYearView<any>, "mat-year-view", ["matYearView"], { "activeDate": { "alias": "activeDate"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; "dateClass": { "alias": "dateClass"; "required": false; }; }, { "selectedChange": "selectedChange"; "monthSelected": "monthSelected"; "activeDateChange": "activeDateChange"; }, never, never, false, never>;
 }
 
 export declare const yearsPerPage = 24;