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

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,26 @@
  * 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. */
+/** Valid ARIA roles for a dialog. */
 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 = unknown, R = unknown, 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,67 +39,115 @@ 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. */
+  /** The ARIA role of the dialog element. */
   role?: DialogRole = 'dialog';
 
-  /** Custom class(es) for the overlay panel. */
+  /** Optional CSS class or classes applied to the overlay panel. */
   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 = '';
+  /** Optional CSS class or classes applied to the overlay backdrop. */
+  backdropClass?: string | string[] = '';
 
-  /** Whether the dialog can be closed by user interaction. */
+  /** Whether the dialog closes with the escape key or pointer events outside the panel element. */
   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;
+
+  /** Dialog label applied via `aria-label` */
   ariaLabel?: string | null = null;
 
+  /** Whether this a modal dialog. Used to set the `aria-modal` attribute. */
+  ariaModal?: boolean = true;
+
   /**
    * Where the dialog should focus on open.
    * @breaking-change 14.0.0 Remove boolean option from autoFocus. Use string or
    * AutoFocusTarget instead.
    */
   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 upon closing.
+   */
+  restoreFocus?: boolean = true;
+
+  /**
+   * Scroll strategy to be used for the dialog. This determines how
+   * the dialog responds to scrolling underneath the panel element.
+   */
+  scrollStrategy?: ScrollStrategy;
 
-  /** Duration of the exit animation. Has to be a valid CSS value (e.g. 50ms). */
-  exitAnimationDuration?: string = '225ms';
+  /**
+   * Whether the dialog should close when the user navigates backwards or forwards through browser
+   * history. This does not apply to navigation via anchor element unless using URL-hash based
+   * routing (`HashLocationStrategy` in the Angular router).
+   */
+  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, R, C>, container: C) => StaticProvider[]);
+
+  /**
+   * 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, R, C>) => 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>);
 }