feat(material-experimental): MDC-based version of dialog

.github/CODEOWNERS

@@ -174,6 +174,7 @@
 /src/dev-app/mdc-card/**                           @mmalerba
 /src/dev-app/mdc-checkbox/**                       @mmalerba
 /src/dev-app/mdc-chips/**                          @mmalerba
+/src/dev-app/mdc-dialog/**                         @devversion
 /src/dev-app/mdc-input/**                          @devversion @mmalerba
 /src/dev-app/mdc-list/**                           @mmalerba
 /src/dev-app/mdc-menu/**                           @crisbeto
@@ -234,6 +235,7 @@
 /src/e2e-app/mdc-card/**                           @mmalerba
 /src/e2e-app/mdc-checkbox/**                       @mmalerba
 /src/e2e-app/mdc-chips/**                          @mmalerba
+/src/e2e-app/mdc-dialog/**                         @devversion
 /src/e2e-app/mdc-input/**                          @devversion
 /src/e2e-app/mdc-menu/**                           @crisbeto
 /src/e2e-app/mdc-progress-bar/**                   @crisbeto

src/cdk-experimental/dialog/dialog-container.ts

@@ -17,6 +17,7 @@ import {
 } from '@angular/cdk/portal';
 import {DOCUMENT} from '@angular/common';
 import {
+  AfterViewInit,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
@@ -72,7 +73,7 @@ export function throwDialogContentAlreadyAttachedError() {
     '(@dialog.done)': '_animationDone.next($event)',
   },
 })
-export class CdkDialogContainer extends BasePortalOutlet implements OnDestroy {
+export class CdkDialogContainer extends BasePortalOutlet implements OnDestroy, AfterViewInit {
   private readonly _document: Document;
 
   /** State of the dialog animation. */
@@ -150,6 +151,16 @@ export class CdkDialogContainer extends BasePortalOutlet implements OnDestroy {
     });
   }
 
+  /** If the dialog view completes initialization, the open animation starts. */
+  ngAfterViewInit() {
+    // Save the previously focused element. This element will be re-focused
+    // when the dialog closes.
+    this._savePreviouslyFocusedElement();
+    // Move focus onto the dialog immediately in order to prevent the user
+    // from accidentally opening multiple dialogs at the same time.
+    this._focusDialogContainer();
+  }
+
   /** Destroy focus trap to place focus back to the element focused before the dialog opened. */
   ngOnDestroy() {
     this._focusTrap.destroy();
@@ -165,7 +176,6 @@ export class CdkDialogContainer extends BasePortalOutlet implements OnDestroy {
       throwDialogContentAlreadyAttachedError();
     }
 
-    this._savePreviouslyFocusedElement();
     return this._portalHost.attachComponentPortal(portal);
   }
 
@@ -178,7 +188,6 @@ export class CdkDialogContainer extends BasePortalOutlet implements OnDestroy {
       throwDialogContentAlreadyAttachedError();
     }
 
-    this._savePreviouslyFocusedElement();
     return this._portalHost.attachTemplatePortal(portal);
   }
 
@@ -193,7 +202,6 @@ export class CdkDialogContainer extends BasePortalOutlet implements OnDestroy {
       throwDialogContentAlreadyAttachedError();
     }
 
-    this._savePreviouslyFocusedElement();
     return this._portalHost.attachDomPortal(portal);
   }
 
@@ -222,11 +230,14 @@ export class CdkDialogContainer extends BasePortalOutlet implements OnDestroy {
   private _savePreviouslyFocusedElement() {
     if (this._document) {
       this._elementFocusedBeforeDialogWasOpened = this._document.activeElement as HTMLElement;
+    }
+  }
 
-      // Move focus onto the dialog immediately in order to prevent the user from accidentally
-      // opening multiple dialogs at the same time. Needs to be async, because the element
-      // may not be focusable immediately.
-      Promise.resolve().then(() => this._elementRef.nativeElement.focus());
+  /** Focuses the dialog container. */
+  private _focusDialogContainer() {
+    // Note that there is no focus method when rendering on the server.
+    if (this._elementRef.nativeElement.focus) {
+      this._elementRef.nativeElement.focus();
     }
   }
 

src/cdk/drag-drop/directives/drag.spec.ts

@@ -2169,7 +2169,7 @@ describe('CdkDrag', () => {
       fixture.componentInstance.boundarySelector = '.cdk-drop-list';
       fixture.detectChanges();
 
-      const container: HTMLElement = fixture.nativeElement.querySelector('.container');
+      const container: HTMLElement = fixture.nativeElement.querySelector('.scroll-container');
       const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement;
       const list = fixture.componentInstance.dropInstance.element.nativeElement;
       const cleanup = makeScrollable('vertical', container);
@@ -3889,7 +3889,7 @@ describe('CdkDrag', () => {
       const fixture = createComponent(DraggableInScrollableParentContainer);
       fixture.detectChanges();
       const item = fixture.componentInstance.dragItems.first.element.nativeElement;
-      const container = fixture.nativeElement.querySelector('.container');
+      const container = fixture.nativeElement.querySelector('.scroll-container');
       const containerRect = container.getBoundingClientRect();
 
       expect(container.scrollTop).toBe(0);
@@ -5519,7 +5519,7 @@ class StandaloneDraggableWithMultipleHandles {
 const DROP_ZONE_FIXTURE_TEMPLATE = `
   <div
     cdkDropList
-    class="drop-list"
+    class="drop-list scroll-container"
     style="width: 100px; background: pink;"
     [id]="dropZoneId"
     [cdkDropListData]="items"
@@ -5539,7 +5539,7 @@ const DROP_ZONE_FIXTURE_TEMPLATE = `
 `;
 
 @Component({template: DROP_ZONE_FIXTURE_TEMPLATE})
-class DraggableInDropZone {
+class DraggableInDropZone implements AfterViewInit {
   @ViewChildren(CdkDrag) dragItems: QueryList<CdkDrag>;
   @ViewChild(CdkDropList) dropInstance: CdkDropList;
   items = [
@@ -5556,6 +5556,15 @@ class DraggableInDropZone {
     moveItemInArray(this.items, event.previousIndex, event.currentIndex);
   });
   startedSpy = jasmine.createSpy('started spy');
+
+  constructor(protected _elementRef: ElementRef) {}
+
+  ngAfterViewInit() {
+    // Firefox preserves the `scrollTop` value from previous similar containers. This
+    // could throw off test assertions and result in flaky results.
+    // See: https://bugzilla.mozilla.org/show_bug.cgi?id=959812.
+    this._elementRef.nativeElement.querySelector('.scroll-container').scrollTop = 0;
+  }
 }
 
 @Component({
@@ -5579,8 +5588,8 @@ class DraggableInOnPushDropZone extends DraggableInDropZone {}
   `]
 })
 class DraggableInScrollableVerticalDropZone extends DraggableInDropZone {
-  constructor() {
-    super();
+  constructor(elementRef: ElementRef) {
+    super(elementRef);
 
     for (let i = 0; i < 60; i++) {
       this.items.push({value: `Extra item ${i}`, height: ITEM_HEIGHT, margin: 0});
@@ -5589,21 +5598,21 @@ class DraggableInScrollableVerticalDropZone extends DraggableInDropZone {
 }
 
 @Component({
-  template: '<div class="container" cdkScrollable>' + DROP_ZONE_FIXTURE_TEMPLATE + '</div>',
+  template: '<div class="scroll-container" cdkScrollable>' + DROP_ZONE_FIXTURE_TEMPLATE + '</div>',
 
   // Note that it needs a margin to ensure that it's not flush against the viewport
   // edge which will cause the viewport to scroll, rather than the list.
   styles: [`
-    .container {
+    .scroll-container {
       max-height: 200px;
       overflow: auto;
       margin: 10vw 0 0 10vw;
     }
   `]
 })
 class DraggableInScrollableParentContainer extends DraggableInDropZone {
-  constructor() {
-    super();
+  constructor(elementRef: ElementRef) {
+    super(elementRef);
 
     for (let i = 0; i < 60; i++) {
       this.items.push({value: `Extra item ${i}`, height: ITEM_HEIGHT, margin: 0});
@@ -5617,7 +5626,7 @@ class DraggableInScrollableParentContainer extends DraggableInDropZone {
   template: `
     <div
       cdkDropList
-      class="drop-list"
+      class="drop-list scroll-container"
       style="width: 100px; background: pink;"
       [id]="dropZoneId"
       [cdkDropListData]="items"
@@ -5656,7 +5665,7 @@ const HORIZONTAL_FIXTURE_STYLES = `
 
 const HORIZONTAL_FIXTURE_TEMPLATE = `
   <div
-    class="drop-list"
+    class="drop-list scroll-container"
     cdkDropList
     cdkDropListOrientation="horizontal"
     [cdkDropListData]="items"
@@ -5675,7 +5684,7 @@ const HORIZONTAL_FIXTURE_TEMPLATE = `
   styles: [HORIZONTAL_FIXTURE_STYLES],
   template: HORIZONTAL_FIXTURE_TEMPLATE
 })
-class DraggableInHorizontalDropZone {
+class DraggableInHorizontalDropZone implements AfterViewInit {
   @ViewChildren(CdkDrag) dragItems: QueryList<CdkDrag>;
   @ViewChild(CdkDropList) dropInstance: CdkDropList;
   items = [
@@ -5688,6 +5697,15 @@ class DraggableInHorizontalDropZone {
   droppedSpy = jasmine.createSpy('dropped spy').and.callFake((event: CdkDragDrop<string[]>) => {
     moveItemInArray(this.items, event.previousIndex, event.currentIndex);
   });
+
+  constructor(protected _elementRef: ElementRef) {}
+
+  ngAfterViewInit() {
+    // Firefox preserves the `scrollLeft` value from previous similar containers. This
+    // could throw off test assertions and result in flaky results.
+    // See: https://bugzilla.mozilla.org/show_bug.cgi?id=959812.
+    this._elementRef.nativeElement.querySelector('.scroll-container').scrollLeft = 0;
+  }
 }
 
 
@@ -5706,8 +5724,8 @@ class DraggableInHorizontalDropZone {
   `]
 })
 class DraggableInScrollableHorizontalDropZone extends DraggableInHorizontalDropZone {
-  constructor() {
-    super();
+  constructor(elementRef: ElementRef) {
+    super(elementRef);
 
     for (let i = 0; i < 60; i++) {
       this.items.push({value: `Extra item ${i}`, width: ITEM_WIDTH, margin: 0});
@@ -6142,6 +6160,7 @@ class ConnectedWrappedDropZones {
 @Component({
   template: `
     <div
+      class="drop-list scroll-container"
       cdkDropList
       style="width: 100px; background: pink;"
       [id]="dropZoneId"
@@ -6162,11 +6181,12 @@ class ConnectedWrappedDropZones {
   `
 })
 class DraggableWithCanvasInDropZone extends DraggableInDropZone implements AfterViewInit {
-  constructor(private _elementRef: ElementRef<HTMLElement>) {
-    super();
+  constructor(elementRef: ElementRef<HTMLElement>) {
+    super(elementRef);
   }
 
   ngAfterViewInit() {
+    super.ngAfterViewInit();
     const canvases = this._elementRef.nativeElement.querySelectorAll('canvas');
 
     // Add a circle to all the canvases.
@@ -6183,6 +6203,7 @@ class DraggableWithCanvasInDropZone extends DraggableInDropZone implements After
 @Component({
   template: `
     <div
+      class="drop-list scroll-container"
       cdkDropList
       style="width: 100px; background: pink;"
       [id]="dropZoneId"
@@ -6413,6 +6434,7 @@ class DraggableWithAlternateRootAndSelfHandle {
   template: `
     <div
       cdkDropList
+      class="drop-list scroll-container"
       style="width: 100px; background: pink;"
       [id]="dropZoneId"
       [cdkDropListData]="items"

src/cdk/scrolling/scrollable.spec.ts

@@ -31,12 +31,16 @@ describe('CdkScrollable', () => {
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ScrollableViewport);
+    fixture.detectChanges();
     testComponent = fixture.componentInstance;
+    // Firefox preserves the `scrollTop` value from previous similar containers. This
+    // could throw off test assertions and result in flaky results.
+    // See: https://bugzilla.mozilla.org/show_bug.cgi?id=959812.
+    testComponent.scrollContainer.nativeElement.scrollTop = 0;
   });
 
   describe('in LTR context', () => {
     beforeEach(() => {
-      fixture.detectChanges();
       maxOffset = testComponent.scrollContainer.nativeElement.scrollHeight -
           testComponent.scrollContainer.nativeElement.clientHeight;
     });

src/dev-app/BUILD.bazel

@@ -50,6 +50,7 @@ ng_module(
         "//src/dev-app/mdc-card",
         "//src/dev-app/mdc-checkbox",
         "//src/dev-app/mdc-chips",
+        "//src/dev-app/mdc-dialog",
         "//src/dev-app/mdc-input",
         "//src/dev-app/mdc-list",
         "//src/dev-app/mdc-menu",

src/dev-app/dev-app/dev-app-layout.ts

@@ -78,6 +78,7 @@ export class DevAppLayout {
     {name: 'MDC Card', route: '/mdc-card'},
     {name: 'MDC Checkbox', route: '/mdc-checkbox'},
     {name: 'MDC Chips', route: '/mdc-chips'},
+    {name: 'MDC Dialog', route: '/mdc-dialog'},
     {name: 'MDC Input', route: '/mdc-input'},
     {name: 'MDC List', route: '/mdc-list'},
     {name: 'MDC Menu', route: '/mdc-menu'},

src/dev-app/dev-app/routes.ts

@@ -80,6 +80,7 @@ export const DEV_APP_ROUTES: Routes = [
     loadChildren: 'mdc-progress-bar/mdc-progress-bar-demo-module#MdcProgressBarDemoModule'
   },
   {path: 'mdc-chips', loadChildren: 'mdc-chips/mdc-chips-demo-module#MdcChipsDemoModule'},
+  {path: 'mdc-dialog', loadChildren: 'mdc-dialog/mdc-dialog-demo-module#MdcDialogDemoModule'},
   {path: 'mdc-input', loadChildren: 'mdc-input/mdc-input-demo-module#MdcInputDemoModule'},
   {path: 'mdc-list', loadChildren: 'mdc-list/mdc-list-demo-module#MdcListDemoModule'},
   {path: 'mdc-menu', loadChildren: 'mdc-menu/mdc-menu-demo-module#MdcMenuDemoModule'},

src/dev-app/mdc-dialog/BUILD.bazel

@@ -0,0 +1,29 @@
+load("//tools:defaults.bzl", "ng_module", "sass_binary")
+
+package(default_visibility = ["//visibility:public"])
+
+ng_module(
+    name = "mdc-dialog",
+    srcs = glob(["**/*.ts"]),
+    assets = [
+        "mdc-dialog-demo.html",
+        ":mdc_dialog_demo_scss",
+    ],
+    deps = [
+        "//src/material-experimental/mdc-dialog",
+        "//src/material/button",
+        "//src/material/card",
+        "//src/material/checkbox",
+        "//src/material/form-field",
+        "//src/material/input",
+        "//src/material/select",
+        "@npm//@angular/router",
+    ],
+)
+
+sass_binary(
+    name = "mdc_dialog_demo_scss",
+    src = "mdc-dialog-demo.scss",
+    include_paths = ["external/npm/node_modules"],
+    deps = ["//src/material-experimental/mdc-dialog:mdc_dialog_scss_lib"],
+)

src/dev-app/mdc-dialog/mdc-dialog-demo-module.ts

@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {MatDialogModule} from '@angular/material-experimental/mdc-dialog';
+import {MatButtonModule} from '@angular/material/button';
+import {MatCardModule} from '@angular/material/card';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatInputModule} from '@angular/material/input';
+import {MatSelectModule} from '@angular/material/select';
+import {RouterModule} from '@angular/router';
+import {ContentElementDialog, DialogDemo, IFrameDialog, JazzDialog} from './mdc-dialog-demo';
+
+@NgModule({
+  imports: [
+    FormsModule,
+    MatButtonModule,
+    MatCardModule,
+    MatCheckboxModule,
+    MatDialogModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatSelectModule,
+    RouterModule.forChild([{path: '', component: DialogDemo}]),
+  ],
+  declarations: [ContentElementDialog, DialogDemo, IFrameDialog, JazzDialog],
+})
+export class MdcDialogDemoModule {
+}