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

.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>);
 }