refactor(material/dialog): switch to CDK dialog internally

Switches the Material dialog to be based on the CDK dialog.

Author: crisbeto

src/material-experimental/mdc-dialog/BUILD.bazel

@@ -64,6 +64,7 @@ ng_test_library(
         ":mdc-dialog",
         "//src/cdk/a11y",
         "//src/cdk/bidi",
+        "//src/cdk/dialog",
         "//src/cdk/keycodes",
         "//src/cdk/overlay",
         "//src/cdk/platform",

src/material-experimental/mdc-dialog/dialog-container.ts

@@ -7,17 +7,18 @@
  */
 
 import {FocusMonitor, FocusTrapFactory, InteractivityChecker} from '@angular/cdk/a11y';
+import {OverlayRef} from '@angular/cdk/overlay';
 import {DOCUMENT} from '@angular/common';
 import {
   ChangeDetectionStrategy,
-  ChangeDetectorRef,
   Component,
   ElementRef,
   Inject,
   OnDestroy,
   Optional,
   ViewEncapsulation,
   NgZone,
+  AfterViewInit,
 } from '@angular/core';
 import {MatDialogConfig, _MatDialogContainerBase} from '@angular/material/dialog';
 import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
@@ -38,16 +39,19 @@ import {cssClasses, numbers} from '@material/dialog';
   host: {
     'class': 'mat-mdc-dialog-container mdc-dialog',
     'tabindex': '-1',
-    'aria-modal': 'true',
-    '[id]': '_id',
+    '[attr.aria-modal]': '_config.ariaModal',
+    '[id]': '_config.id',
     '[attr.role]': '_config.role',
     '[attr.aria-labelledby]': '_config.ariaLabel ? null : _ariaLabelledBy',
     '[attr.aria-label]': '_config.ariaLabel',
     '[attr.aria-describedby]': '_config.ariaDescribedBy || null',
     '[class._mat-animation-noopable]': '!_animationsEnabled',
   },
 })
-export class MatDialogContainer extends _MatDialogContainerBase implements OnDestroy {
+export class MatDialogContainer
+  extends _MatDialogContainerBase
+  implements OnDestroy, AfterViewInit
+{
   /** Whether animations are enabled. */
   _animationsEnabled: boolean = this._animationMode !== 'NoopAnimations';
 
@@ -67,30 +71,31 @@ export class MatDialogContainer extends _MatDialogContainerBase implements OnDes
   constructor(
     elementRef: ElementRef,
     focusTrapFactory: FocusTrapFactory,
-    changeDetectorRef: ChangeDetectorRef,
     @Optional() @Inject(DOCUMENT) document: any,
-    config: MatDialogConfig,
+    dialogConfig: MatDialogConfig,
     checker: InteractivityChecker,
     ngZone: NgZone,
+    overlayRef: OverlayRef,
     @Optional() @Inject(ANIMATION_MODULE_TYPE) private _animationMode?: string,
     focusMonitor?: FocusMonitor,
   ) {
     super(
       elementRef,
       focusTrapFactory,
-      changeDetectorRef,
       document,
-      config,
+      dialogConfig,
       checker,
       ngZone,
+      overlayRef,
       focusMonitor,
     );
   }
 
-  override _initializeWithAttachedContent() {
+  override ngAfterViewInit(): void {
     // Delegate to the original dialog-container initialization (i.e. saving the
     // previous element, setting up the focus trap and moving focus to the container).
-    super._initializeWithAttachedContent();
+    super.ngAfterViewInit();
+
     // Note: Usually we would be able to use the MDC dialog foundation here to handle
     // the dialog animation for us, but there are a few reasons why we just leverage
     // their styles and not use the runtime foundation code:
@@ -103,7 +108,9 @@ export class MatDialogContainer extends _MatDialogContainerBase implements OnDes
     this._startOpenAnimation();
   }
 
-  ngOnDestroy() {
+  override ngOnDestroy() {
+    super.ngOnDestroy();
+
     if (this._animationTimer !== null) {
       clearTimeout(this._animationTimer);
     }
@@ -177,7 +184,6 @@ export class MatDialogContainer extends _MatDialogContainerBase implements OnDes
    */
   private _finishDialogClose = () => {
     this._clearAnimationClasses();
-    this._restoreFocus();
     this._animationStateChanged.emit({state: 'closed', totalTime: this._closeAnimationDuration});
   };
 

src/material-experimental/mdc-dialog/dialog-content-directives.ts

@@ -15,7 +15,6 @@ import {
   Optional,
   SimpleChanges,
 } from '@angular/core';
-import {_closeDialogVia} from '@angular/material/dialog';
 
 import {MatDialog} from './dialog';
 import {MatDialogRef} from './dialog-ref';
@@ -79,11 +78,9 @@ export class MatDialogClose implements OnInit, OnChanges {
     // result in incorrect origins. Most of the time, close buttons will be auto focused in the
     // dialog, and therefore clicking the button won't result in a focus change. This means that
     // the FocusMonitor won't detect any origin change, and will always output `program`.
-    _closeDialogVia(
-      this.dialogRef,
-      event.screenX === 0 && event.screenY === 0 ? 'keyboard' : 'mouse',
-      this.dialogResult,
-    );
+    this.dialogRef.close(this.dialogResult, {
+      focusOrigin: event.screenX === 0 && event.screenY === 0 ? 'keyboard' : 'mouse',
+    });
   }
 }
 

src/material-experimental/mdc-dialog/dialog-ref.ts

@@ -6,22 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {OverlayRef} from '@angular/cdk/overlay';
 import {MatDialogRef as NonMdcDialogRef} from '@angular/material/dialog';
-import {MatDialogContainer} from './dialog-container';
-
-// Counter for unique dialog ids.
-let uniqueId = 0;
 
 /**
  * Reference to a dialog opened via the MatDialog service.
  */
-export class MatDialogRef<T, R = any> extends NonMdcDialogRef<T, R> {
-  constructor(
-    overlayRef: OverlayRef,
-    containerInstance: MatDialogContainer,
-    id: string = `mat-mdc-dialog-${uniqueId++}`,
-  ) {
-    super(overlayRef, containerInstance, id);
-  }
-}
+export class MatDialogRef<T, R = any> extends NonMdcDialogRef<T, R> {}

src/material-experimental/mdc-dialog/dialog.spec.ts

@@ -1325,6 +1325,7 @@ describe('MDC-based MatDialog', () => {
 
       tick(500);
       viewContainerFixture.detectChanges();
+      flushMicrotasks();
       expect(lastFocusOrigin!).withContext('Expected the trigger button to be blurred').toBeNull();
 
       dispatchKeyboardEvent(document.body, 'keydown', ESCAPE);
@@ -1359,6 +1360,7 @@ describe('MDC-based MatDialog', () => {
 
       tick(500);
       viewContainerFixture.detectChanges();
+      flushMicrotasks();
       expect(lastFocusOrigin!).withContext('Expected the trigger button to be blurred').toBeNull();
 
       const backdrop = overlayContainerElement.querySelector(
@@ -1395,6 +1397,7 @@ describe('MDC-based MatDialog', () => {
 
       tick(500);
       viewContainerFixture.detectChanges();
+      flushMicrotasks();
       expect(lastFocusOrigin!).withContext('Expected the trigger button to be blurred').toBeNull();
 
       const closeButton = overlayContainerElement.querySelector(
@@ -1434,6 +1437,7 @@ describe('MDC-based MatDialog', () => {
 
       tick(500);
       viewContainerFixture.detectChanges();
+      flushMicrotasks();
       expect(lastFocusOrigin!).withContext('Expected the trigger button to be blurred').toBeNull();
 
       const closeButton = overlayContainerElement.querySelector(

src/material-experimental/mdc-dialog/dialog.ts

@@ -8,11 +8,18 @@
 
 import {Overlay, OverlayContainer, ScrollStrategy} from '@angular/cdk/overlay';
 import {Location} from '@angular/common';
-import {Inject, Injectable, InjectionToken, Injector, Optional, SkipSelf} from '@angular/core';
+import {
+  ANIMATION_MODULE_TYPE,
+  Inject,
+  Injectable,
+  InjectionToken,
+  Injector,
+  Optional,
+  SkipSelf,
+} from '@angular/core';
 import {_MatDialogBase, MatDialogConfig} from '@angular/material/dialog';
 import {MatDialogContainer} from './dialog-container';
 import {MatDialogRef} from './dialog-ref';
-import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 
 /** Injection token that can be used to access the data that was passed in to a dialog. */
 export const MAT_DIALOG_DATA = new InjectionToken<any>('MatMdcDialogData');
@@ -46,6 +53,8 @@ export const MAT_DIALOG_SCROLL_STRATEGY_PROVIDER = {
  */
 @Injectable()
 export class MatDialog extends _MatDialogBase<MatDialogContainer> {
+  protected readonly _idPrefix = 'mat-mdc-dialog-';
+
   constructor(
     overlay: Overlay,
     injector: Injector,
@@ -57,6 +66,10 @@ export class MatDialog extends _MatDialogBase<MatDialogContainer> {
     @Optional() @Inject(MAT_DIALOG_DEFAULT_OPTIONS) defaultOptions: MatDialogConfig,
     @Inject(MAT_DIALOG_SCROLL_STRATEGY) scrollStrategy: any,
     @Optional() @SkipSelf() parentDialog: MatDialog,
+    /**
+     * @deprecated No longer used. To be removed.
+     * @breaking-change 15.0.0
+     */
     overlayContainer: OverlayContainer,
     /**
      * @deprecated No longer used. To be removed.

src/material-experimental/mdc-dialog/module.ts

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {DialogModule} from '@angular/cdk/dialog';
 import {OverlayModule} from '@angular/cdk/overlay';
 import {PortalModule} from '@angular/cdk/portal';
 import {NgModule} from '@angular/core';
@@ -20,7 +21,7 @@ import {
 } from './dialog-content-directives';
 
 @NgModule({
-  imports: [OverlayModule, PortalModule, MatCommonModule],
+  imports: [DialogModule, OverlayModule, PortalModule, MatCommonModule],
   exports: [
     MatDialogContainer,
     MatDialogClose,

src/material-experimental/mdc-dialog/public-api.ts

@@ -17,7 +17,6 @@ export {
   MatDialogState,
   MatDialogConfig,
   matDialogAnimations,
-  throwMatDialogContentAlreadyAttachedError,
   DialogRole,
   DialogPosition,
   MAT_DIALOG_SCROLL_STRATEGY_FACTORY,

src/material/dialog/BUILD.bazel

@@ -23,6 +23,7 @@ ng_module(
         "//src:dev_mode_types",
         "//src/cdk/a11y",
         "//src/cdk/bidi",
+        "//src/cdk/dialog",
         "//src/cdk/keycodes",
         "//src/cdk/overlay",
         "//src/cdk/platform",

src/material/dialog/dialog-config.ts

@@ -112,10 +112,14 @@ export class MatDialogConfig<D = any> {
   autoFocus?: AutoFocusTarget | string | boolean = 'first-tabbable';
 
   /**
-   * Whether the dialog should restore focus to the
-   * previously-focused element, after it's closed.
+   * Whether the dialog should restore focus to the previously-focused element upon closing.
+   * Has the following behavior based on the type that is passed in:
+   * - `boolean` - when true, will return focus to the element that was focused before the dialog
+   *    was opened, otherwise won't restore focus at all.
+   * - `string` - focus will be restored to the first element that matches the CSS selector.
+   * - `HTMLElement` - focus will be restored to the specific element.
    */
-  restoreFocus?: boolean = true;
+  restoreFocus?: boolean | string | HTMLElement = true;
 
   /** Whether to wait for the opening animation to finish before trapping focus. */
   delayFocusTrap?: boolean = true;