@angular/material 18.0.2 → 18.0.4

package/_index.scss

@@ -127,7 +127,7 @@
 @forward './slider/slider-theme' as slider-* show slider-theme, slider-color, slider-typography,
   slider-density, slider-base, slider-overrides;
 @forward './snack-bar/snack-bar-theme' as snack-bar-* show snack-bar-theme, snack-bar-color,
-  snack-bar-typography, snack-bar-density, snack-bar-base, bar-overrides;
+  snack-bar-typography, snack-bar-density, snack-bar-base, snack-bar-overrides;
 @forward './sort/sort-theme' as sort-* show sort-theme, sort-color, sort-typography, sort-density,
   sort-base, sort-overrides;
 @forward './stepper/stepper-theme' as stepper-* show stepper-theme, stepper-color,

package/autocomplete/index.d.ts

@@ -289,6 +289,9 @@ export declare class MatAutocompleteTrigger implements ControlValueAccessor, Aft
     private _closingActionsSubscription;
     /** Subscription to viewport size changes. */
     private _viewportSubscription;
+    /** Implements BreakpointObserver to be used to detect handset landscape */
+    private _breakpointObserver;
+    private _handsetLandscapeSubscription;
     /**
      * Whether the autocomplete can open the next time it is focused. Used to prevent a focused,
      * closed autocomplete from being reopened if the user switches to another browser tab and then

package/badge/index.d.ts

@@ -25,7 +25,10 @@ export declare class MatBadge implements OnInit, OnDestroy {
     private _ariaDescriber;
     private _renderer;
     private _animationMode?;
-    /** The color of the badge. Can be `primary`, `accent`, or `warn`. */
+    /**
+     * The color of the badge. Can be `primary`, `accent`, or `warn`.
+     * Not recommended in M3, for more information see https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants.
+     */
     get color(): ThemePalette;
     set color(value: ThemePalette);
     private _color;

package/bottom-sheet/index.d.ts

@@ -148,7 +148,6 @@ export declare class MatBottomSheetContainer extends CdkDialogContainer implemen
     _onAnimationDone(event: AnimationEvent_2): void;
     _onAnimationStart(event: AnimationEvent_2): void;
     protected _captureInitialFocus(): void;
-    private _toggleClass;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatBottomSheetContainer, [null, null, { optional: true; }, null, null, null, null, null, null]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatBottomSheetContainer, "mat-bottom-sheet-container", never, {}, {}, never, never, true, never>;
 }

package/button/index.d.ts

@@ -114,7 +114,13 @@ declare class MatButtonBase implements AfterViewInit, OnDestroy {
      */
     get ripple(): MatRipple;
     set ripple(v: MatRipple);
-    /** Theme color palette of the button */
+    /**
+     * Theme color of the button. This API is supported in M2 themes only, it has
+     * no effect in M3 themes.
+     *
+     * For information on applying color variants in M3, see
+     * https://material.angular.io/guide/theming#using-component-color-variants.
+     */
     color?: string | null;
     /** Whether the ripple effect is disabled or not. */
     get disableRipple(): boolean;

package/checkbox/index.d.ts

@@ -109,7 +109,13 @@ export declare class MatCheckbox implements AfterViewInit, OnChanges, ControlVal
     _labelElement: ElementRef<HTMLInputElement>;
     /** Tabindex for the checkbox. */
     tabIndex: number;
-    /** Palette color of the checkbox. */
+    /**
+     * Theme color of the checkbox. This API is supported in M2 themes only, it
+     * has no effect in M3 themes.
+     *
+     * For information on applying color variants in M3, see
+     * https://material.angular.io/guide/theming#using-component-color-variants.
+     */
     color: string | undefined;
     /**
      * Reference to the MatRipple instance of the checkbox.
@@ -211,7 +217,11 @@ export declare type MatCheckboxClickAction = 'noop' | 'check' | 'check-indetermi
 
 /** Default `mat-checkbox` options that can be overridden. */
 export declare interface MatCheckboxDefaultOptions {
-    /** Default theme color palette to be used for checkboxes. */
+    /**
+     * Default theme color palette to be used for checkboxes. This API is supported in M2 themes
+     * only, it has no effect in M3 themes. For information on applying color variants in M3, see
+     * https://material.angular.io/guide/theming#using-component-color-variants
+     */
     color?: ThemePalette;
     /** Default checkbox click action for checkboxes. */
     clickAction?: MatCheckboxClickAction;

package/chips/index.d.ts

@@ -13,6 +13,7 @@ import { FormGroupDirective } from '@angular/forms';
 import * as i0 from '@angular/core';
 import * as i1 from '@angular/material/core';
 import { InjectionToken } from '@angular/core';
+import { Injector } from '@angular/core';
 import { MatFormField } from '@angular/material/form-field';
 import { MatFormFieldControl } from '@angular/material/form-field';
 import { MatRipple } from '@angular/material/core';
@@ -184,7 +185,13 @@ export declare class MatChip implements OnInit, AfterViewInit, AfterContentInit,
     get value(): any;
     set value(value: any);
     protected _value: any;
-    /** Theme color palette of the chip. */
+    /**
+     * Theme color of the chip. This API is supported in M2 themes only, it has no
+     * effect in M3 themes.
+     *
+     * For information on applying color variants in M3, see
+     * https://material.angular.io/guide/theming#using-component-color-variants.
+     */
     color?: string | null;
     /**
      * Determines whether or not the chip displays the remove styling and emits (removed) events.
@@ -226,7 +233,7 @@ export declare class MatChip implements OnInit, AfterViewInit, AfterContentInit,
      * Used to improve initial load time of large applications.
      */
     _rippleLoader: MatRippleLoader;
-    private _injector;
+    protected _injector: Injector;
     constructor(_changeDetectorRef: ChangeDetectorRef, _elementRef: ElementRef<HTMLElement>, _ngZone: NgZone, _focusMonitor: FocusMonitor, _document: any, animationMode?: string, _globalRippleOptions?: RippleGlobalOptions | undefined, tabIndex?: string);
     ngOnInit(): void;
     ngAfterViewInit(): void;
@@ -354,7 +361,7 @@ export declare interface MatChipEvent {
  * An extension of the MatChipSet component used with MatChipRow chips and
  * the matChipInputFor directive.
  */
-export declare class MatChipGrid extends MatChipSet implements AfterContentInit, AfterViewInit, ControlValueAccessor, DoCheck, MatFormFieldControl<any>, OnDestroy {
+export declare class MatChipGrid extends MatChipSet implements AfterContentInit, AfterViewInit, ControlValueAccessor, DoCheck, MatFormFieldControl<any>, OnDestroy, OnInit {
     ngControl: NgControl;
     /**
      * Implemented as part of MatFormFieldControl.
@@ -447,6 +454,7 @@ export declare class MatChipGrid extends MatChipSet implements AfterContentInit,
     get errorState(): boolean;
     set errorState(value: boolean);
     constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, dir: Directionality, parentForm: NgForm, parentFormGroup: FormGroupDirective, defaultErrorStateMatcher: ErrorStateMatcher, ngControl: NgControl);
+    ngOnInit(): void;
     ngAfterContentInit(): void;
     ngAfterViewInit(): void;
     ngDoCheck(): void;

package/core/_core-theme.scss

@@ -1,18 +1,17 @@
 @use './theming/theming';
 @use './theming/inspection';
 @use './theming/validation';
-@use './style/private';
 @use './ripple/ripple-theme';
 @use './option/option-theme';
 @use './option/optgroup-theme';
 @use './selection/pseudo-checkbox/pseudo-checkbox-theme';
-@use './style/elevation';
 @use './style/sass-utils';
 @use './typography/typography';
 @use './tokens/token-utils';
 @use './tokens/m2/mat/app' as tokens-mat-app;
 @use './tokens/m2/mat/ripple' as tokens-mat-ripple;
 @use './tokens/m2/mat/option' as tokens-mat-option;
+@use './tokens/m2/mat/optgroup' as tokens-mat-optgroup;
 @use './tokens/m2/mat/full-pseudo-checkbox' as tokens-mat-full-pseudo-checkbox;
 @use './tokens/m2/mat/minimal-pseudo-checkbox' as tokens-mat-minimal-pseudo-checkbox;
 
@@ -41,6 +40,10 @@ $_has-inserted-loaded-marker: false;
     @include option-theme.base($theme);
     @include optgroup-theme.base($theme);
     @include pseudo-checkbox-theme.base($theme);
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-app.$prefix,
+        tokens-mat-app.get-unthemable-tokens());
+    }
   }
 
   // The marker is a concrete style no matter which Material version we're targeting.
@@ -60,18 +63,6 @@ $_has-inserted-loaded-marker: false;
       @include token-utils.create-token-values(tokens-mat-app.$prefix,
         tokens-mat-app.get-color-tokens($theme));
     }
-
-    // Provides external CSS classes for each elevation value. Each CSS class is formatted as
-    // `mat-elevation-z$zValue` where `$zValue` corresponds to the z-space to which the element is
-    // elevated.
-    @for $zValue from 0 through 24 {
-      $selector: elevation.$prefix + $zValue;
-      // We need the `mat-mdc-elevation-specific`, because some MDC mixins
-      // come with elevation baked in and we don't have a way of removing it.
-      .#{$selector}, .mat-mdc-elevation-specific.#{$selector} {
-        @include private.private-theme-elevation($zValue, $theme);
-      }
-    }
   }
 }
 
@@ -149,6 +140,8 @@ $_has-inserted-loaded-marker: false;
   $mat-app-tokens: token-utils.get-tokens-for($tokens, tokens-mat-app.$prefix, $options...);
   $mat-ripple-tokens: token-utils.get-tokens-for($tokens, tokens-mat-ripple.$prefix, $options...);
   $mat-option-tokens: token-utils.get-tokens-for($tokens, tokens-mat-option.$prefix, $options...);
+  $mat-optgroup-tokens:
+    token-utils.get-tokens-for($tokens, tokens-mat-optgroup.$prefix, $options...);
   $mat-full-pseudo-checkbox-tokens: token-utils.get-tokens-for($tokens,
     tokens-mat-full-pseudo-checkbox.$prefix, $options...);
   $mat-minimal-pseudo-checkbox-tokens: token-utils.get-tokens-for($tokens,
@@ -157,6 +150,7 @@ $_has-inserted-loaded-marker: false;
   @include token-utils.create-token-values(tokens-mat-app.$prefix, $mat-app-tokens);
   @include token-utils.create-token-values(tokens-mat-ripple.$prefix, $mat-ripple-tokens);
   @include token-utils.create-token-values(tokens-mat-option.$prefix, $mat-option-tokens);
+  @include token-utils.create-token-values(tokens-mat-optgroup.$prefix, $mat-optgroup-tokens);
   @include token-utils.create-token-values(tokens-mat-full-pseudo-checkbox.$prefix,
     $mat-full-pseudo-checkbox-tokens);
   @include token-utils.create-token-values(tokens-mat-minimal-pseudo-checkbox.$prefix,

package/core/_core.scss

@@ -2,6 +2,7 @@
 @use './tokens/m2/mat/app' as tokens-mat-app;
 @use './tokens/token-utils';
 @use './ripple/ripple';
+@use './style/elevation';
 @use './focus-indicators/private';
 @use './mdc-helpers/mdc-helpers';
 
@@ -18,13 +19,26 @@
   // Wrapper element that provides the theme background when the
   // user's content isn't inside of a `mat-sidenav-container`.
   @at-root {
-    .mat-app-background {
-      @include mdc-helpers.disable-mdc-fallback-declarations {
-        @include token-utils.use-tokens(tokens-mat-app.$prefix, tokens-mat-app.get-token-slots()) {
-          // Note: we need to emit fallback values here to avoid errors in internal builds.
+    // Note: we need to emit fallback values here to avoid errors in internal builds.
+    @include mdc-helpers.disable-mdc-fallback-declarations {
+      @include token-utils.use-tokens(tokens-mat-app.$prefix, tokens-mat-app.get-token-slots()) {
+        .mat-app-background {
           @include token-utils.create-token-slot(background-color, background-color, transparent);
           @include token-utils.create-token-slot(color, text-color, inherit);
         }
+
+        // Provides external CSS classes for each elevation value. Each CSS class is formatted as
+        // `mat-elevation-z$zValue` where `$zValue` corresponds to the z-space to which the element
+        // is elevated.
+        @for $zValue from 0 through 24 {
+          $selector: elevation.$prefix + $zValue;
+          // We need the `mat-mdc-elevation-specific`, because some MDC mixins
+          // come with elevation baked in and we don't have a way of removing it.
+          .#{$selector}, .mat-mdc-elevation-specific.#{$selector} {
+            @include token-utils.create-token-slot(box-shadow, 'elevation-shadow-level-#{$zValue}',
+              none);
+          }
+        }
       }
     }
   }

package/core/m2/_typography.scss

@@ -48,7 +48,7 @@
 /// @param {Map} $input Configuration for the "input" typographic level.
 /// @returns {Map} A typography config for the application.
 ///
-/// @deprecated Use `mat.m2-define-typography-config` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
+/// @deprecated Use `mat.m2-define-typography-config` instead. See https://v17.material.angular.io/guide/mdc-migration for information about migrating.
 /// @breaking-change 17.0.0
 @function define-legacy-typography-config(
   $font-family:   'Roboto, "Helvetica Neue", sans-serif',

package/core/theming/_palettes.scss

@@ -12,6 +12,8 @@
 /// The Material Design spec references some neutral hues that are not generated by
 /// https://m3.material.io/theme-builder. For now we use this function to estimate the missing hues
 /// by blending the nearest hues that are generated.
+/// Note: when updating, the corresponding logic in the theme generation schematic should be
+/// updated as well. See `src/material/schematics/ng-generate/m3-theme/index.ts#patchMissingHues`
 @function _patch-missing-hues($palette) {
   $neutral: map.get($palette, neutral);
   $palette: map.set($palette, neutral, 4, _estimate-hue($neutral, 4, 0, 10));

package/core/tokens/_density.scss

@@ -120,6 +120,7 @@ $_density-tokens: (
     container-size: (56px, 52px, 48px, 40px),
     form-field-container-height: (40px, 40px, 40px, 40px, 40px, 36px),
     form-field-container-vertical-padding: (8px, 8px, 8px, 8px, 8px, 6px),
+    touch-target-display: (block, block, none, none),
   ),
   (mat, radio): (
     touch-target-display: (block, block, none, none),

package/core/tokens/m2/mat/_app.scss

@@ -1,6 +1,9 @@
+@use '@material/elevation/elevation-theme' as mdc-elevation;
+@use 'sass:map';
 @use '../../token-utils';
 @use '../../../theming/inspection';
 @use '../../../style/sass-utils';
+@use '../../../style/elevation';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, app);
@@ -13,10 +16,19 @@ $prefix: (mat, app);
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
-  @return (
+  $tokens: (
     background-color: inspection.get-theme-color($theme, background, background),
     text-color: inspection.get-theme-color($theme, foreground, text),
   );
+
+  @for $zValue from 0 through 24 {
+    $elevation-color: inspection.get-theme-color($theme, foreground, elevation);
+    $shadow: mdc-elevation.elevation-box-shadow($zValue,
+      if($elevation-color == null, elevation.$color, $elevation-color));
+    $tokens: map.set($tokens, 'elevation-shadow-level-#{$zValue}', $shadow);
+  }
+
+  @return $tokens;
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.

package/core/tokens/m2/mat/_menu.scss

@@ -18,6 +18,9 @@ $prefix: (mat, menu);
     item-trailing-spacing: 16px,
     item-with-icon-leading-spacing: 16px,
     item-with-icon-trailing-spacing: 16px,
+    // Note that this uses a value, rather than a computed box-shadow, because we use
+    // the value at runtime to determine which shadow to set based on the menu's depth.
+    base-elevation-level: 8,
   );
 }
 

package/core/tokens/m2/mat/_paginator.scss

@@ -69,6 +69,7 @@ $prefix: (mat, paginator);
     container-size: map.get($size-scale, $density-scale),
     form-field-container-height: $form-field-height,
     form-field-container-vertical-padding: $form-field-vertical-padding,
+    touch-target-display: if($density-scale < -2, none, block),
   );
 }
 

package/core/tokens/m3/mat/_app.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use '@material/elevation' as mdc-elevation;
 @use '../../token-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -10,10 +11,18 @@ $prefix: (mat, app);
 /// @param {Map} $token-slots Possible token slots
 /// @return {Map} A set of custom tokens for the app
 @function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $shadow-color: map.get($systems, md-sys-color, shadow);
   $tokens: (
     background-color: map.get($systems, md-sys-color, background),
     text-color: map.get($systems, md-sys-color, on-background),
   );
 
+  @if ($shadow-color) {
+    @for $zValue from 0 through 24 {
+      $shadow: mdc-elevation.elevation-box-shadow($zValue, $shadow-color);
+      $tokens: map.set($tokens, 'elevation-shadow-level-#{$zValue}', $shadow);
+    }
+  }
+
   @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
 }

package/core/tokens/m3/mat/_menu.scss

@@ -35,6 +35,9 @@ $prefix: (mat, menu);
       item-with-icon-leading-spacing: token-utils.hardcode(12px, $exclude-hardcoded),
       item-with-icon-trailing-spacing: token-utils.hardcode(12px, $exclude-hardcoded),
       container-color: map.get($systems, md-sys-color, surface-container),
+      // Note that this uses a value, rather than a computed box-shadow, because we use
+      // the value at runtime to determine which shadow to set based on the menu's depth.
+      base-elevation-level: token-utils.hardcode(2, $exclude-hardcoded),
     )
   );
 

package/datepicker/index.d.ts

@@ -40,6 +40,7 @@ import { OnInit } from '@angular/core';
 import { Overlay } from '@angular/cdk/overlay';
 import { Portal } from '@angular/cdk/portal';
 import { ScrollStrategy } from '@angular/cdk/overlay';
+import { Signal } from '@angular/core';
 import { SimpleChanges } from '@angular/core';
 import { Subject } from 'rxjs';
 import { TemplatePortal } from '@angular/cdk/portal';
@@ -49,6 +50,7 @@ import { ValidationErrors } from '@angular/forms';
 import { Validator } from '@angular/forms';
 import { ValidatorFn } from '@angular/forms';
 import { ViewContainerRef } from '@angular/core';
+import { WritableSignal } from '@angular/core';
 
 /** Function that can be used to filter out dates from a calendar. */
 export declare type DateFilterFn<D> = (date: D | null) => boolean;
@@ -696,7 +698,11 @@ declare abstract class MatDatepickerBase<C extends MatDatepickerControl<D>, S, D
     private _startAt;
     /** The view that the calendar should start in. */
     startView: 'month' | 'year' | 'multi-year';
-    /** Color palette to use on the datepicker's calendar. */
+    /**
+     * Color palette to use on the datepicker's calendar. This API is supported in M2 themes only, it
+     * has no effect in M3 themes. For information on applying color variants in M3, see
+     * https://material.angular.io/guide/theming#using-component-color-variants
+     */
     get color(): ThemePalette;
     set color(value: ThemePalette);
     _color: ThemePalette;
@@ -769,6 +775,7 @@ declare abstract class MatDatepickerBase<C extends MatDatepickerControl<D>, S, D
     /** Emits when the datepicker's state changes. */
     readonly stateChanges: Subject<void>;
     private _injector;
+    private readonly _changeDetectorRef;
     constructor(_overlay: Overlay, 
     /**
      * @deprecated parameter is unused and will be removed
@@ -854,7 +861,13 @@ export declare class MatDatepickerContent<S, D = ExtractDateTypeFromSelection<S>
     private _model;
     /** Reference to the internal calendar component. */
     _calendar: MatCalendar<D>;
-    /** Palette color of the internal calendar. */
+    /**
+     * Theme color of the internal calendar. This API is supported in M2 themes
+     * only, it has no effect in M3 themes.
+     *
+     * For information on applying color variants in M3, see
+     * https://material.angular.io/guide/theming#using-component-color-variants.
+     */
     color: ThemePalette;
     /** Reference to the datepicker that created the overlay. */
     datepicker: MatDatepickerBase<any, S, D>;
@@ -922,9 +935,12 @@ export declare interface MatDatepickerControl<D> {
 export declare class MatDatepickerInput<D> extends MatDatepickerInputBase<D | null, D> implements MatDatepickerControl<D | null>, OnDestroy {
     private _formField?;
     private _closedSubscription;
+    private _openedSubscription;
     /** The datepicker that this input is associated with. */
     set matDatepicker(datepicker: MatDatepickerPanel<MatDatepickerControl<D>, D | null, D>);
     _datepicker: MatDatepickerPanel<MatDatepickerControl<D>, D | null, D>;
+    /** The id of the panel owned by this input. */
+    protected _ariaOwns: WritableSignal<string | null>;
     /** The minimum valid date. */
     get min(): D | null;
     set min(value: D | null);
@@ -1144,7 +1160,11 @@ export declare class MatDatepickerModule {
 export declare 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 palette to use on the datepicker's calendar. This API is supported in M2 themes only, it
+     * has no effect in M3 themes. For information on applying color variants in M3, see
+     * https://material.angular.io/guide/theming#using-component-color-variants
+     */
     color: ThemePalette;
     /** The input element the datepicker is associated with. */
     datepickerInput: C;
@@ -1207,6 +1227,7 @@ export declare class MatDateRangeInput<D> implements MatFormFieldControl<DateRan
     private _dateAdapter;
     private _formField?;
     private _closedSubscription;
+    private _openedSubscription;
     /** Current value of the range input. */
     get value(): DateRange<D> | null;
     /** Unique ID for the group. */
@@ -1227,6 +1248,8 @@ export declare class MatDateRangeInput<D> implements MatFormFieldControl<DateRan
     get rangePicker(): MatDatepickerPanel<MatDatepickerControl<D>, DateRange<D>, D>;
     set rangePicker(rangePicker: MatDatepickerPanel<MatDatepickerControl<D>, DateRange<D>, D>);
     private _rangePicker;
+    /** The id of the panel owned by this input. */
+    _ariaOwns: WritableSignal<string | null>;
     /** Whether the input is required. */
     get required(): boolean;
     set required(value: boolean);
@@ -1336,6 +1359,7 @@ declare interface MatDateRangeInputParent<D> {
         opened: boolean;
         id: string;
     };
+    _ariaOwns?: Signal<string | null>;
     _startInput: MatDateRangeInputPartBase<D>;
     _endInput: MatDateRangeInputPartBase<D>;
     _groupDisabled: boolean;

package/dialog/index.d.ts

@@ -350,7 +350,6 @@ export declare class MatDialogContainer extends CdkDialogContainer<MatDialogConf
     private _exitAnimationDuration;
     /** Current timer for dialog animations. */
     private _animationTimer;
-    private _isDestroyed;
     constructor(elementRef: ElementRef, focusTrapFactory: FocusTrapFactory, _document: any, dialogConfig: MatDialogConfig, interactivityChecker: InteractivityChecker, ngZone: NgZone, overlayRef: OverlayRef, _animationMode?: string | undefined, focusMonitor?: FocusMonitor);
     protected _contentAttached(): void;
     /** Starts the dialog open animation if enabled. */

package/dialog/testing/index.d.ts

@@ -73,6 +73,7 @@ export declare class MatTestDialogOpener<T = unknown, R = unknown> implements On
     /** Data passed to the `MatDialog` close method. */
     closedResult: R | undefined;
     private readonly _afterClosedSubscription;
+    private readonly _ngZone;
     /** Static method that prepares this class to open the provided component. */
     static withComponent<T = unknown, R = unknown>(component: ComponentType<T>, config?: MatDialogConfig): ComponentType<MatTestDialogOpener<T, R>>;
     constructor(dialog: MatDialog);