refactor(cdk-experimental/dialog): rewrite experimental dialog

Rewrites most of the CDK experimental dialog to prepare it for public release. The changes were largely informed by implementing `material/dialog`, `material-experimental/mdc-dialog` and `material/bottom-sheet` using the new API, however the API can be used directly without having to be wrapped. Overview of the changes:
* The classes for the dialog container, dialog config and dialog data aren't provided using DI anymore. The previous approach could've been a problem for apps that use multiple different versions of a CDK-based dialog.
* Several fixes from the Material dialog that were never backported to the CDK version have been incorporated.
* All animations and styles have been removed from the CDK dialog since they were going to be difficult to override by users. Custom animations can be achieved by extending the dialog container class.
* The public API has been cleaned up to avoid some of the issues that were inherited from the Material dialog.
* A demo has been added to the dev app.

Example of how the new APIs was used to implement the Material components: crisbeto@446a552.

Author: crisbeto

.github/CODEOWNERS

@@ -153,6 +153,7 @@
 /src/dev-app/mdc-autocomplete/**                   @crisbeto
 /src/dev-app/button/**                             @andrewseguin
 /src/dev-app/card/**                               @andrewseguin
+/src/dev-app/cdk-dialog/**                         @crisbeto
 /src/dev-app/cdk-experimental-combobox/**          @jelbourn
 /src/dev-app/cdk-experimental-listbox/**           @jelbourn
 /src/dev-app/cdk-experimental-menu/**              @jelbourn

goldens/ts-circular-deps.json

@@ -1,8 +1,4 @@
 [
-  [
-    "src/cdk-experimental/dialog/dialog-config.ts",
-    "src/cdk-experimental/dialog/dialog-container.ts"
-  ],
   ["src/cdk/drag-drop/directives/drag.ts", "src/cdk/drag-drop/directives/drop-list.ts"],
   ["src/cdk/drag-drop/directives/drag.ts", "src/cdk/drag-drop/drag-events.ts"],
   [

src/cdk-experimental/dialog/BUILD.bazel

@@ -1,4 +1,4 @@
-load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite", "sass_binary")
+load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
 
 package(default_visibility = ["//visibility:public"])
 
@@ -8,7 +8,7 @@ ng_module(
         ["**/*.ts"],
         exclude = ["**/*.spec.ts"],
     ),
-    assets = [":dialog-container.css"] + glob(["**/*.html"]),
+    assets = glob(["**/*.html"]),
     deps = [
         "//src:dev_mode_types",
         "//src/cdk/a11y",
@@ -23,11 +23,6 @@ ng_module(
     ],
 )
 
-sass_binary(
-    name = "dialog_container_scss",
-    src = "dialog-container.scss",
-)
-
 ng_test_library(
     name = "unit_test_sources",
     srcs = glob(

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

@@ -5,29 +5,23 @@
  * 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 {Injector, ViewContainerRef} from '@angular/core';
+
+import {
+  ViewContainerRef,
+  ComponentFactoryResolver,
+  Injector,
+  StaticProvider,
+  Type,
+} from '@angular/core';
 import {Direction} from '@angular/cdk/bidi';
-import {ComponentType} from '@angular/cdk/overlay';
-import {CdkDialogContainer} from './dialog-container';
+import {PositionStrategy, ScrollStrategy} from '@angular/cdk/overlay';
+import {BasePortalOutlet} from '@angular/cdk/portal';
 
 /** Options for where to set focus to automatically on dialog open */
 export type AutoFocusTarget = 'dialog' | 'first-tabbable' | 'first-heading';
 
-/** Valid ARIA roles for a dialog element. */
-export type DialogRole = 'dialog' | 'alertdialog';
-
-/** Possible overrides for a dialog's position. */
-export interface DialogPosition {
-  top?: string;
-  bottom?: string;
-  left?: string;
-  right?: string;
-}
-
-export class DialogConfig<D = any> {
-  /** Component to use as the container for the dialog. */
-  containerComponent?: ComponentType<CdkDialogContainer>;
-
+/** Configuration for opening a modal dialog. */
+export class DialogConfig<D = any, R = any, C extends BasePortalOutlet = BasePortalOutlet> {
   /**
    * Where the attached component should live in Angular's *logical* component tree.
    * This affects what is available for injection and the change detection order for the
@@ -42,55 +36,61 @@ export class DialogConfig<D = any> {
    */
   injector?: Injector;
 
-  /** The id of the dialog. */
+  /** ID for the dialog. If omitted, a unique one will be generated. */
   id?: string;
 
-  /** The ARIA role of the dialog. */
-  role?: DialogRole = 'dialog';
+  /** The ARIA role of the dialog element. */
+  role?: string = 'dialog';
+
+  /** Whether this a modal dialog. */
+  isModal?: boolean = true;
 
-  /** Custom class(es) for the overlay panel. */
+  /** Custom class for the overlay pane. */
   panelClass?: string | string[] = '';
 
-  /** Whether the dialog has a background. */
+  /** Whether the dialog has a backdrop. */
   hasBackdrop?: boolean = true;
 
-  /** Custom class(es) for the backdrop. */
-  backdropClass?: string | undefined = '';
+  /** Custom class for the backdrop. */
+  backdropClass?: string | string[] = '';
 
-  /** Whether the dialog can be closed by user interaction. */
+  /** Whether the user can use escape or clicking on the backdrop to close the modal. */
   disableClose?: boolean = false;
 
-  /** The width of the dialog. */
+  /** Width of the dialog. */
   width?: string = '';
 
-  /** The height of the dialog. */
+  /** Height of the dialog. */
   height?: string = '';
 
-  /** The minimum width of the dialog. */
-  minWidth?: string | number = '';
+  /** Min-width of the dialog. If a number is provided, assumes pixel units. */
+  minWidth?: number | string;
 
-  /** The minimum height of the dialog. */
-  minHeight?: string | number = '';
+  /** Min-height of the dialog. If a number is provided, assumes pixel units. */
+  minHeight?: number | string;
 
-  /** The maximum width of the dialog. */
-  maxWidth?: string | number = '80vw';
+  /** Max-width of the dialog. If a number is provided, assumes pixel units. Defaults to 80vw. */
+  maxWidth?: number | string;
 
-  /** The maximum height of the dialog. */
-  maxHeight?: string | number = '';
+  /** Max-height of the dialog. If a number is provided, assumes pixel units. */
+  maxHeight?: number | string;
 
-  /** The position of the dialog. */
-  position?: DialogPosition;
+  /** Strategy to use when positioning the dialog. Defaults to centering it on the page. */
+  positionStrategy?: PositionStrategy;
 
-  /** Data to be injected into the dialog content. */
+  /** Data being injected into the child component. */
   data?: D | null = null;
 
-  /** The layout direction for the dialog content. */
+  /** Layout direction for the dialog's content. */
   direction?: Direction;
 
   /** ID of the element that describes the dialog. */
   ariaDescribedBy?: string | null = null;
 
-  /** Aria label to assign to the dialog element */
+  /** ID of the element that labels the dialog. */
+  ariaLabelledBy?: string | null = null;
+
+  /** Aria label to assign to the dialog element. */
   ariaLabel?: string | null = null;
 
   /**
@@ -100,9 +100,48 @@ export class DialogConfig<D = any> {
    */
   autoFocus?: AutoFocusTarget | string | boolean = 'first-tabbable';
 
-  /** Duration of the enter animation. Has to be a valid CSS value (e.g. 100ms). */
-  enterAnimationDuration?: string = '225ms';
+  /**
+   * Whether the dialog should restore focus to the
+   * previously-focused element, after it's closed.
+   */
+  restoreFocus?: boolean = true;
+
+  /** Scroll strategy to be used for the dialog. */
+  scrollStrategy?: ScrollStrategy;
+
+  /**
+   * Whether the dialog should close when the user goes backwards/forwards in history.
+   * Note that this usually doesn't include clicking on links (unless the user is using
+   * the `HashLocationStrategy`).
+   */
+  closeOnNavigation?: boolean = true;
+
+  /** Alternate `ComponentFactoryResolver` to use when resolving the associated component. */
+  componentFactoryResolver?: ComponentFactoryResolver;
+
+  /**
+   * Providers that will be exposed to the contents of the dialog. Can also
+   * be provided as a function in order to generate the providers lazily.
+   */
+  providers?:
+    | StaticProvider[]
+    | ((dialogRef: R, config: DialogConfig<D>, container: C) => StaticProvider[]);
 
-  /** Duration of the exit animation. Has to be a valid CSS value (e.g. 50ms). */
-  exitAnimationDuration?: string = '225ms';
+  /**
+   * Component into which the dialog content will be rendered. Defaults to `CdkDialogContainer`.
+   * A configuration object can be passed in to customize the providers that will be exposed
+   * to the dialog container.
+   */
+  container?:
+    | Type<C>
+    | {
+        type: Type<C>;
+        providers: (config: DialogConfig<D>) => StaticProvider[];
+      };
+
+  /**
+   * Context that will be passed to template-based dialogs.
+   * A function can be passed in to resolve the context lazily.
+   */
+  templateContext?: Record<string, any> | (() => Record<string, any>);
 }