@angular/material 17.0.0-next.1 → 17.0.0-next.3

package/core/typography/_all-typography.scss

@@ -35,17 +35,14 @@
 @use '../../snack-bar/snack-bar-theme';
 @use '../../form-field/form-field-theme';
 @use '../../tree/tree-theme';
-@use '../theming/theming';
+@use '../theming/inspection';
 @use '../core-theme';
 
 // Includes all of the typographic styles.
-@mixin all-component-typographies($config-or-theme: null) {
-  $config: if(theming.private-is-theme-object($config-or-theme),
-      theming.get-typography-config($config-or-theme), $config-or-theme);
-
+@mixin all-component-typographies($theme: null) {
   // If no actual color configuration has been specified, create a default one.
-  @if not $config {
-    $config: typography.define-typography-config();
+  @if not inspection.theme-has($theme, typography) {
+    $theme: typography.define-typography-config();
   }
 
   // TODO: COMP-309: Do not use individual mixins. Instead, use the all-theme mixin and only
@@ -53,47 +50,47 @@
   // not possible as it would introduce a circular dependency for typography because the `mat-core`
   // mixin that is transitively loaded by the `all-theme` file, imports `all-typography` which
   // would then load `all-theme` again. This ultimately results a circular dependency.
-  @include badge-theme.typography($config);
-  @include typography.typography-hierarchy($config);
-  @include bottom-sheet-theme.typography($config);
-  @include button-toggle-theme.typography($config);
-  @include divider-theme.typography($config);
-  @include datepicker-theme.typography($config);
-  @include expansion-theme.typography($config);
-  @include grid-list-theme.typography($config);
-  @include icon-theme.typography($config);
-  @include progress-spinner-theme.typography($config);
-  @include sidenav-theme.typography($config);
-  @include stepper-theme.typography($config);
-  @include sort-theme.typography($config);
-  @include toolbar-theme.typography($config);
-  @include tree-theme.typography($config);
-  @include core-theme.typography($config);
-  @include card-theme.typography($config);
-  @include progress-bar-theme.typography($config);
-  @include tooltip-theme.typography($config);
-  @include form-field-theme.typography($config);
-  @include input-theme.typography($config);
-  @include select-theme.typography($config);
-  @include autocomplete-theme.typography($config);
-  @include dialog-theme.typography($config);
-  @include chips-theme.typography($config);
-  @include slide-toggle-theme.typography($config);
-  @include radio-theme.typography($config);
-  @include slider-theme.typography($config);
-  @include menu-theme.typography($config);
-  @include list-theme.typography($config);
-  @include paginator-theme.typography($config);
-  @include tabs-theme.typography($config);
-  @include checkbox-theme.typography($config);
-  @include button-theme.typography($config);
-  @include icon-button-theme.typography($config);
-  @include fab-theme.typography($config);
-  @include snack-bar-theme.typography($config);
-  @include table-theme.typography($config);
+  @include badge-theme.typography($theme);
+  @include typography.typography-hierarchy($theme);
+  @include bottom-sheet-theme.typography($theme);
+  @include button-toggle-theme.typography($theme);
+  @include divider-theme.typography($theme);
+  @include datepicker-theme.typography($theme);
+  @include expansion-theme.typography($theme);
+  @include grid-list-theme.typography($theme);
+  @include icon-theme.typography($theme);
+  @include progress-spinner-theme.typography($theme);
+  @include sidenav-theme.typography($theme);
+  @include stepper-theme.typography($theme);
+  @include sort-theme.typography($theme);
+  @include toolbar-theme.typography($theme);
+  @include tree-theme.typography($theme);
+  @include core-theme.typography($theme);
+  @include card-theme.typography($theme);
+  @include progress-bar-theme.typography($theme);
+  @include tooltip-theme.typography($theme);
+  @include form-field-theme.typography($theme);
+  @include input-theme.typography($theme);
+  @include select-theme.typography($theme);
+  @include autocomplete-theme.typography($theme);
+  @include dialog-theme.typography($theme);
+  @include chips-theme.typography($theme);
+  @include slide-toggle-theme.typography($theme);
+  @include radio-theme.typography($theme);
+  @include slider-theme.typography($theme);
+  @include menu-theme.typography($theme);
+  @include list-theme.typography($theme);
+  @include paginator-theme.typography($theme);
+  @include tabs-theme.typography($theme);
+  @include checkbox-theme.typography($theme);
+  @include button-theme.typography($theme);
+  @include icon-button-theme.typography($theme);
+  @include fab-theme.typography($theme);
+  @include snack-bar-theme.typography($theme);
+  @include table-theme.typography($theme);
 }
 
 // @deprecated Use `all-component-typographies`.
-@mixin angular-material-typography($config-or-theme: null) {
-  @include all-component-typographies($config-or-theme);
+@mixin angular-material-typography($theme: null) {
+  @include all-component-typographies($theme);
 }

package/core/typography/_typography.scss

@@ -1,5 +1,5 @@
 @use 'typography-utils';
-@use '../theming/theming';
+@use '../theming/inspection';
 @use './versioning';
 
 // Definition and versioning functions live in their own files to avoid circular dependencies, but
@@ -12,10 +12,7 @@
 /// @param {Map} $config-or-theme A typography config for an entire theme.
 /// @param {String} $selector Ancestor selector under which native elements, such as h1, will
 ///     be styled.
-@mixin typography-hierarchy($config-or-theme, $selector: '.mat-typography') {
-  $config: versioning.private-typography-to-2018-config(
-      theming.get-typography-config($config-or-theme));
-
+@mixin typography-hierarchy($theme, $selector: '.mat-typography') {
   // Note that it seems redundant to prefix the class rules with the `$selector`, however it's
   // necessary if we want to allow people to overwrite the tag selectors. This is due to
   // selectors like `#{$selector} h1` being more specific than ones like `.mat-title`.
@@ -24,7 +21,8 @@
   #{$selector} .mat-h1,
   #{$selector} .mat-headline-5,
   #{$selector} h1 {
-    @include typography-utils.typography-level($config, headline-5);
+    font: inspection.get-theme-typography($theme, headline-5, font);
+    letter-spacing: inspection.get-theme-typography($theme, headline-5, letter-spacing);
     margin: 0 0 16px;
   }
 
@@ -33,7 +31,8 @@
   #{$selector} .mat-h2,
   #{$selector} .mat-headline-6,
   #{$selector} h2 {
-    @include typography-utils.typography-level($config, headline-6);
+    font: inspection.get-theme-typography($theme, headline-6, font);
+    letter-spacing: inspection.get-theme-typography($theme, headline-6, letter-spacing);
     margin: 0 0 16px;
   }
 
@@ -42,7 +41,8 @@
   #{$selector} .mat-h3,
   #{$selector} .mat-subtitle-1,
   #{$selector} h3 {
-    @include typography-utils.typography-level($config, subtitle-1);
+    font: inspection.get-theme-typography($theme, subtitle-1, font);
+    letter-spacing: inspection.get-theme-typography($theme, subtitle-1, letter-spacing);
     margin: 0 0 16px;
   }
 
@@ -51,7 +51,8 @@
   #{$selector} .mat-h4,
   #{$selector} .mat-body-1,
   #{$selector} h4 {
-    @include typography-utils.typography-level($config, body-1);
+    font: inspection.get-theme-typography($theme, body-1, font);
+    letter-spacing: inspection.get-theme-typography($theme, body-1, letter-spacing);
     margin: 0 0 16px;
   }
 
@@ -63,10 +64,10 @@
   #{$selector} h5 {
     @include typography-utils.font-shorthand(
        // calc is used here to support css variables
-      calc(#{typography-utils.font-size($config, body-2)} * 0.83),
-      typography-utils.font-weight($config, body-2),
-      typography-utils.line-height($config, body-2),
-      typography-utils.font-family($config, body-2)
+      calc(#{inspection.get-theme-typography($theme, body-2, font-size)} * 0.83),
+      inspection.get-theme-typography($theme, body-2, font-weight),
+      inspection.get-theme-typography($theme, body-2, line-height),
+      inspection.get-theme-typography($theme, body-2, font-family)
     );
 
     margin: 0 0 12px;
@@ -77,10 +78,10 @@
   #{$selector} h6 {
     @include typography-utils.font-shorthand(
        // calc is used here to support css variables
-      calc(#{typography-utils.font-size($config, body-2)} * 0.67),
-      typography-utils.font-weight($config, body-2),
-      typography-utils.line-height($config, body-2),
-      typography-utils.font-family($config, body-2)
+      calc(#{inspection.get-theme-typography($theme, body-2, font-size)} * 0.67),
+      inspection.get-theme-typography($theme, body-2, font-weight),
+      inspection.get-theme-typography($theme, body-2, line-height),
+      inspection.get-theme-typography($theme, body-2, font-family)
     );
 
     margin: 0 0 12px;
@@ -90,7 +91,8 @@
   .mat-subtitle-2,
   #{$selector} .mat-body-strong,
   #{$selector} .mat-subtitle-2 {
-    @include typography-utils.typography-level($config, subtitle-2);
+    font: inspection.get-theme-typography($theme, subtitle-2, font);
+    letter-spacing: inspection.get-theme-typography($theme, subtitle-2, letter-spacing);
   }
 
   .mat-body,
@@ -98,7 +100,8 @@
   #{$selector} .mat-body,
   #{$selector} .mat-body-2,
   #{$selector} {
-    @include typography-utils.typography-level($config, body-2);
+    font: inspection.get-theme-typography($theme, body-2, font);
+    letter-spacing: inspection.get-theme-typography($theme, body-2, letter-spacing);
 
     p {
       margin: 0 0 12px;
@@ -109,161 +112,35 @@
   .mat-caption,
   #{$selector} .mat-small,
   #{$selector} .mat-caption {
-    @include typography-utils.typography-level($config, caption);
+    font: inspection.get-theme-typography($theme, caption, font);
+    letter-spacing: inspection.get-theme-typography($theme, caption, letter-spacing);
   }
 
   .mat-headline-1,
   #{$selector} .mat-headline-1 {
-    @include typography-utils.typography-level($config, headline-1);
+    font: inspection.get-theme-typography($theme, headline-1, font);
+    letter-spacing: inspection.get-theme-typography($theme, headline-1, letter-spacing);
     margin: 0 0 56px;
   }
 
   .mat-headline-2,
   #{$selector} .mat-headline-2 {
-    @include typography-utils.typography-level($config, headline-2);
+    font: inspection.get-theme-typography($theme, headline-2, font);
+    letter-spacing: inspection.get-theme-typography($theme, headline-2, letter-spacing);
     margin: 0 0 64px;
   }
 
   .mat-headline-3,
   #{$selector} .mat-headline-3 {
-    @include typography-utils.typography-level($config, headline-3);
+    font: inspection.get-theme-typography($theme, headline-3, font);
+    letter-spacing: inspection.get-theme-typography($theme, headline-3, letter-spacing);
     margin: 0 0 64px;
   }
 
   .mat-headline-4,
   #{$selector} .mat-headline-4 {
-    @include typography-utils.typography-level($config, headline-4);
-    margin: 0 0 64px;
-  }
-}
-
-/// Emits baseline typographic styles based on a given config.
-/// @param {Map} $config-or-theme A typography config for an entire theme.
-/// @param {String} $selector Ancestor selector under which native elements, such as h1, will
-///     be styled.
-/// @deprecated Use `mat.typography-hierarchy` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
-/// @breaking-change 17.0.0
-@mixin legacy-typography-hierarchy($config-or-theme, $selector: '.mat-typography') {
-  $config: versioning.private-typography-to-2014-config(
-      theming.get-typography-config($config-or-theme));
-
-  // Note that it seems redundant to prefix the class rules with the `$selector`, however it's
-  // necessary if we want to allow people to overwrite the tag selectors. This is due to
-  // selectors like `#{$selector} h1` being more specific than ones like `.mat-title`.
-  .mat-h1,
-  .mat-headline,
-  #{$selector} .mat-h1,
-  #{$selector} .mat-headline,
-  #{$selector} h1 {
-    @include typography-utils.typography-level($config, headline);
-    margin: 0 0 16px;
-  }
-
-  .mat-h2,
-  .mat-title,
-  #{$selector} .mat-h2,
-  #{$selector} .mat-title,
-  #{$selector} h2 {
-    @include typography-utils.typography-level($config, title);
-    margin: 0 0 16px;
-  }
-
-  .mat-h3,
-  .mat-subheading-2,
-  #{$selector} .mat-h3,
-  #{$selector} .mat-subheading-2,
-  #{$selector} h3 {
-    @include typography-utils.typography-level($config, subheading-2);
-    margin: 0 0 16px;
-  }
-
-  .mat-h4,
-  .mat-subheading-1,
-  #{$selector} .mat-h4,
-  #{$selector} .mat-subheading-1,
-  #{$selector} h4 {
-    @include typography-utils.typography-level($config, subheading-1);
-    margin: 0 0 16px;
-  }
-
-  // Note: the spec doesn't have anything that would correspond to h5 and h6, but we add these for
-  // consistency. The font sizes come from the Chrome user agent styles which have h5 at 0.83em
-  // and h6 at 0.67em.
-  .mat-h5,
-  #{$selector} .mat-h5,
-  #{$selector} h5 {
-    @include typography-utils.font-shorthand(
-       // calc is used here to support css variables
-      calc(#{typography-utils.font-size($config, body-1)} * 0.83),
-      typography-utils.font-weight($config, body-1),
-      typography-utils.line-height($config, body-1),
-      typography-utils.font-family($config, body-1)
-    );
-
-    margin: 0 0 12px;
-  }
-
-  .mat-h6,
-  #{$selector} .mat-h6,
-  #{$selector} h6 {
-    @include typography-utils.font-shorthand(
-       // calc is used here to support css variables
-      calc(#{typography-utils.font-size($config, body-1)} * 0.67),
-      typography-utils.font-weight($config, body-1),
-      typography-utils.line-height($config, body-1),
-      typography-utils.font-family($config, body-1)
-    );
-
-    margin: 0 0 12px;
-  }
-
-  .mat-body-strong,
-  .mat-body-2,
-  #{$selector} .mat-body-strong,
-  #{$selector} .mat-body-2 {
-    @include typography-utils.typography-level($config, body-2);
-  }
-
-  .mat-body,
-  .mat-body-1,
-  #{$selector} .mat-body,
-  #{$selector} .mat-body-1,
-  #{$selector} {
-    @include typography-utils.typography-level($config, body-1);
-
-    p {
-      margin: 0 0 12px;
-    }
-  }
-
-  .mat-small,
-  .mat-caption,
-  #{$selector} .mat-small,
-  #{$selector} .mat-caption {
-    @include typography-utils.typography-level($config, caption);
-  }
-
-  .mat-display-4,
-  #{$selector} .mat-display-4 {
-    @include typography-utils.typography-level($config, display-4);
-    margin: 0 0 56px;
-  }
-
-  .mat-display-3,
-  #{$selector} .mat-display-3 {
-    @include typography-utils.typography-level($config, display-3);
-    margin: 0 0 64px;
-  }
-
-  .mat-display-2,
-  #{$selector} .mat-display-2 {
-    @include typography-utils.typography-level($config, display-2);
-    margin: 0 0 64px;
-  }
-
-  .mat-display-1,
-  #{$selector} .mat-display-1 {
-    @include typography-utils.typography-level($config, display-1);
+    font: inspection.get-theme-typography($theme, headline-4, font);
+    letter-spacing: inspection.get-theme-typography($theme, headline-4, letter-spacing);
     margin: 0 0 64px;
   }
 }

package/core/typography/_versioning.scss

@@ -53,11 +53,16 @@
 // produces a normalized typography config for the 2018 Material Design typography system.
 // 2014 - https://material.io/archive/guidelines/style/typography.html#typography-styles
 // 2018 - https://material.io/design/typography/the-type-system.html#type-scale
-@function private-typography-to-2018-config($config) {
+//
+// The $force option is used to allow components to specify that they want to re-map the keys, even
+// if the 2018 keys are already present. This allows those components to preserve the (incorrect)
+// behavior they had previously, when they called `private-typography-to-2014-config`. Eventually we
+// should clean this up, remove the $force option, and reconcile any screen diffs.
+@function private-typography-to-2018-config($config, $force: false) {
   @if $config == null {
     @return null;
   }
-  @if not private-typography-is-2018-config($config) {
+  @if $force or not private-typography-is-2018-config($config) {
     @return (
       headline-1: map.get($config, display-4),
       headline-2: map.get($config, display-3),

package/datepicker/_datepicker-theme.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 @use '../core/tokens/m2/mat/datepicker' as tokens-mat-datepicker;
 @use '../core/theming/theming';
+@use '../core/theming/inspection';
 @use '../core/tokens/token-utils';
 @use '../core/style/sass-utils';
 @use '../core/typography/typography';
@@ -15,60 +16,52 @@ $today-fade-amount: 0.2;
 $calendar-body-font-size: 13px !default;
 $calendar-weekday-table-font-size: 11px !default;
 
-@mixin _calendar-color($config, $palette) {
-  $palette-color: theming.get-color-from-palette(map.get($config, $palette));
+@mixin _calendar-color($theme, $palette-name) {
+  $palette-color: inspection.get-theme-color($theme, $palette-name);
   $range-color: tokens-mat-datepicker.private-get-range-background-color($palette-color);
   $range-tokens: tokens-mat-datepicker.get-range-color-tokens($range-color);
   $calendar-tokens:
-    tokens-mat-datepicker.private-get-calendar-color-palette-color-tokens($config, $palette);
+    tokens-mat-datepicker.private-get-calendar-color-palette-color-tokens($theme, $palette-name);
 
   @include token-utils.create-token-values(tokens-mat-datepicker.$prefix,
     map.merge($calendar-tokens, $range-tokens));
 }
 
-@mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
-  $foreground: map.get($config, foreground);
-  $background: map.get($config, background);
-  $disabled-color: theming.get-color-from-palette($foreground, disabled-text);
-
+@mixin color($theme) {
   @include sass-utils.current-selector-or-root() {
     @include token-utils.create-token-values(tokens-mat-datepicker.$prefix,
-      tokens-mat-datepicker.get-color-tokens($config));
+      tokens-mat-datepicker.get-color-tokens($theme));
   }
 
   .mat-datepicker-content {
     &.mat-accent {
-      @include _calendar-color($config, accent);
+      @include _calendar-color($theme, accent);
     }
 
     &.mat-warn {
-      @include _calendar-color($config, warn);
+      @include _calendar-color($theme, warn);
     }
   }
 
   .mat-datepicker-toggle-active {
     &.mat-accent {
       $accent-tokens:
-        tokens-mat-datepicker.private-get-toggle-color-palette-color-tokens($config, accent);
+        tokens-mat-datepicker.private-get-toggle-color-palette-color-tokens($theme, accent);
       @include token-utils.create-token-values(tokens-mat-datepicker.$prefix, $accent-tokens);
     }
 
     &.mat-warn {
       $warn-tokens:
-        tokens-mat-datepicker.private-get-toggle-color-palette-color-tokens($config, warn);
+        tokens-mat-datepicker.private-get-toggle-color-palette-color-tokens($theme, warn);
       @include token-utils.create-token-values(tokens-mat-datepicker.$prefix, $warn-tokens);
     }
   }
 }
 
-@mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2014-config(
-      theming.get-typography-config($config-or-theme));
-
+@mixin typography($theme) {
   @include sass-utils.current-selector-or-root() {
     @include token-utils.create-token-values(tokens-mat-datepicker.$prefix,
-      tokens-mat-datepicker.get-typography-tokens($config));
+      tokens-mat-datepicker.get-typography-tokens($theme));
   }
 }
 
@@ -90,9 +83,7 @@ $calendar-weekday-table-font-size: 11px !default;
   }
 }
 
-@mixin density($config-or-theme) {
-  $density-scale: theming.get-density-config($config-or-theme);
-
+@mixin density($theme) {
   // TODO(crisbeto): move this into the structural styles
   // once the icon button density is switched to tokens.
 
@@ -103,21 +94,16 @@ $calendar-weekday-table-font-size: 11px !default;
   }
 }
 
-@mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
+@mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-datepicker') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
-
-    @if $color != null {
-      @include color($color);
+    @if inspection.theme-has($theme, color) {
+      @include color($theme);
     }
-    @if $density != null {
-      @include density($density);
+    @if inspection.theme-has($theme, density) {
+      @include density($theme);
     }
-    @if $typography != null {
-      @include typography($typography);
+    @if inspection.theme-has($theme, typography) {
+      @include typography($theme);
     }
   }
 }

package/dialog/_dialog-theme.scss

@@ -2,53 +2,42 @@
 @use '../core/style/sass-utils';
 @use '../core/tokens/m2/mdc/dialog' as tokens-mdc-dialog;
 @use '../core/theming/theming';
+@use '../core/theming/inspection';
 @use '../core/typography/typography';
 
 
-@mixin base($config-or-theme) {
+@mixin base($theme) {
   // Add default values for tokens not related to color, typography, or density.
   @include sass-utils.current-selector-or-root() {
     @include mdc-dialog-theme.theme(tokens-mdc-dialog.get-unthemable-tokens());
   }
 }
 
-@mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
-
+@mixin color($theme) {
   .mat-mdc-dialog-container {
-    @include mdc-dialog-theme.theme(tokens-mdc-dialog.get-color-tokens($config));
+    @include mdc-dialog-theme.theme(tokens-mdc-dialog.get-color-tokens($theme));
   }
 }
 
-@mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2018-config(
-      theming.get-typography-config($config-or-theme));
-
+@mixin typography($theme) {
   .mat-mdc-dialog-container {
-    @include mdc-dialog-theme.theme(tokens-mdc-dialog.get-typography-tokens($config));
+    @include mdc-dialog-theme.theme(tokens-mdc-dialog.get-typography-tokens($theme));
   }
 }
 
-@mixin density($config-or-theme) {
-  $density-scale: theming.get-density-config($config-or-theme);
-}
+@mixin density($theme) {}
 
-@mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
+@mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-dialog') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
-
     @include base($theme);
-    @if $color != null {
-      @include color($color);
+    @if inspection.theme-has($theme, color) {
+      @include color($theme);
     }
-    @if $density != null {
-      @include density($density);
+    @if inspection.theme-has($theme, density) {
+      @include density($theme);
     }
-    @if $typography != null {
-      @include typography($typography);
+    @if inspection.theme-has($theme, typography) {
+      @include typography($theme);
     }
   }
 }

package/dialog/_mdc-dialog-structure-overrides.scss

@@ -38,19 +38,21 @@
       max-width: inherit;
     }
 
-    // MDC by default sets the `surface` to `display: flex`. MDC does this in order to
-    // be able to make the content scrollable while locking the title and actions. This
-    // does not work in our dialog anyway because due to the content projection, arbitrary
-    // components can be immediate children of the surface and make this a noop. If only
-    // templates or DOM elements are projected, the flex display could cause unexpected
-    // alignment issues as explained in our coding standards (see `CODING_STANDARDS.md`).
-    // Additionally, the surface by default should expand based on the parent overlay
-    // boundaries (so that boundaries for the overlay config are respected). The surface
-    // by default would only expand based on its content.
     .mdc-dialog__surface {
-      display: block;
       width: 100%;
       height: 100%;
     }
   }
+
+  // When a component is passed into the dialog, the host element interrupts
+  // the `display:flex` from affecting the dialog title, content, and
+  // actions. To fix this, we make the component host `display: contents` by
+  // marking its host with the `mat-mdc-dialog-component-host` class.
+  //
+  // Note that this problem does not exist when a template ref is used since
+  // the title, contents, and actions are then nested directly under the
+  // dialog surface.
+  .mat-mdc-dialog-component-host {
+    display: contents;
+  }
 }

package/dialog/index.d.ts

@@ -1,6 +1,7 @@
 import { AnimationTriggerMetadata } from '@angular/animations';
 import { CdkDialogContainer } from '@angular/cdk/dialog';
 import { ComponentFactoryResolver } from '@angular/core';
+import { ComponentPortal } from '@angular/cdk/portal';
 import { ComponentRef } from '@angular/core';
 import { ComponentType } from '@angular/cdk/overlay';
 import { DialogRef } from '@angular/cdk/dialog';
@@ -365,6 +366,7 @@ export declare class MatDialogContainer extends CdkDialogContainer<MatDialogConf
      */
     protected _openAnimationDone(totalTime: number): void;
     ngOnDestroy(): void;
+    attachComponentPortal<T>(portal: ComponentPortal<T>): ComponentRef<T>;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatDialogContainer, [null, null, { optional: true; }, null, null, null, null, { optional: true; }, null]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatDialogContainer, "mat-dialog-container", never, {}, {}, never, never, false, never>;
 }