Dialogs

/**
 * Service for opening modal dialogs
 */
class Dialog {
  /**
   * Opens a modal dialog containing the given component or template
   * @param componentOrTemplateRef - Component or template to display
   * @param config - Configuration options for the dialog
   * @returns DialogRef for managing the opened dialog
   */
  open<T, D = any, R = any>(
    componentOrTemplateRef: ComponentType<T> | TemplateRef<T>,
    config?: DialogConfig<D, R>
  ): DialogRef<T, R>;

  /**
   * Closes all currently open dialogs
   */
  closeAll(): void;

  /**
   * Finds an open dialog by its ID
   * @param id - Unique identifier for the dialog
   * @returns DialogRef if found, undefined otherwise
   */
  getDialogById(id: string): DialogRef<any> | undefined;

  /**
   * Stream that emits when a dialog has been opened
   */
  readonly afterOpened: Subject<DialogRef<any>>;

  /**
   * Stream that emits when all open dialogs have finished closing
   */
  readonly afterAllClosed: Observable<void>;

  /**
   * Stream that emits the currently open dialogs
   */
  readonly openDialogs: readonly DialogRef<any>[];
}

import { Dialog, DialogRef } from '@angular/cdk/dialog';
import { MyDialogComponent } from './my-dialog.component';

constructor(private dialog: Dialog) {}

openDialog() {
  const dialogRef = this.dialog.open(MyDialogComponent, {
    width: '400px',
    height: '300px',
    data: { message: 'Hello from dialog!' },
    disableClose: false,
    autoFocus: 'first-tabbable',
    restoreFocus: true
  });

  dialogRef.afterClosed().subscribe(result => {
    console.log('Dialog was closed with result:', result);
  });
}

/**
 * Reference to an opened dialog
 */
class DialogRef<T, R = any> {
  /**
   * The instance of the component opened into the dialog
   */
  readonly componentInstance: T | null;

  /**
   * The component reference of the dialog container
   */
  readonly componentRef: ComponentRef<any> | null;

  /**
   * Instance of the dialog container component
   */
  readonly containerInstance: DialogContainer;

  /**
   * Unique identifier for this dialog instance
   */
  readonly id: string;

  /**
   * Subject for notifying the user that the dialog has finished closing
   */
  readonly afterClosed: Observable<R | undefined>;

  /**
   * Subject for notifying the user that the dialog has finished opening
   */
  readonly afterOpened: Observable<void>;

  /**
   * Observable that emits when the backdrop has been clicked
   */
  readonly backdropClick: Observable<MouseEvent>;

  /**
   * Observable that emits keydown events targeted to this dialog
   */
  readonly keydownEvents: Observable<KeyboardEvent>;

  /**
   * Close the dialog
   * @param result - Optional result to return to afterClosed observers
   */
  close(result?: R): void;

  /**
   * Updates the dialog's position
   * @param position - New position for the dialog
   */
  updatePosition(position?: DialogPosition): this;

  /**
   * Updates the dialog's width and height
   * @param width - New width of the dialog
   * @param height - New height of the dialog
   */
  updateSize(width?: string | number, height?: string | number): this;

  /**
   * Add a CSS class to the overlay pane
   * @param classes - Class(es) to add to the pane
   */
  addPanelClass(classes: string | string[]): this;

  /**
   * Remove a CSS class from the overlay pane  
   * @param classes - Class(es) to remove from the pane
   */
  removePanelClass(classes: string | string[]): this;

  /**
   * Gets an observable that emits when the overlay's backdrop has been clicked
   */
  backdropClick(): Observable<MouseEvent>;

  /**
   * Gets an observable that emits when keydown events are targeted to this overlay
   */
  keydownEvents(): Observable<KeyboardEvent>;
}

/**
 * Configuration for opening a dialog
 */
interface DialogConfig<D = any, R = any, C extends DialogContainer = DialogContainer> {
  /**
   * Where the attached component should live in Angular's logical component tree
   */
  viewContainerRef?: ViewContainerRef;

  /**
   * Injector used for the instantiation of the component to be attached
   */
  injector?: Injector;

  /**
   * ID for the dialog. If omitted, a unique one will be generated
   */
  id?: string;

  /**
   * The ARIA role of the dialog element
   */
  role?: DialogRole;

  /**
   * Custom class for the overlay pane
   */
  panelClass?: string | string[];

  /**
   * Whether the dialog has a backdrop
   */
  hasBackdrop?: boolean;

  /**
   * Custom class for the backdrop
   */
  backdropClass?: string | string[];

  /**
   * Whether the user can use escape or clicking on the backdrop to close the modal
   */
  disableClose?: boolean;

  /**
   * Width of the dialog
   */
  width?: string | number;

  /**
   * Height of the dialog
   */
  height?: string | number;

  /**
   * Min-width of the dialog
   */
  minWidth?: string | number;

  /**
   * Min-height of the dialog
   */
  minHeight?: string | number;

  /**
   * Max-width of the dialog
   */
  maxWidth?: string | number;

  /**
   * Max-height of the dialog
   */
  maxHeight?: string | number;

  /**
   * Position overrides
   */
  position?: DialogPosition;

  /**
   * Data being injected into the child component
   */
  data?: D | null;

  /**
   * Layout direction for the dialog's content
   */
  direction?: Direction;

  /**
   * ID of the element that describes the dialog
   */
  ariaDescribedBy?: string | null;

  /**
   * ID of the element that labels the dialog
   */
  ariaLabelledBy?: string | null;

  /**
   * Aria label to assign to the dialog element
   */
  ariaLabel?: string | null;

  /**
   * Whether to focus the dialog when the dialog is opened
   */
  autoFocus?: AutoFocusTarget;

  /**
   * Whether to restore focus to the previously-focused element
   */
  restoreFocus?: boolean;

  /**
   * Scroll strategy to be used for the dialog
   */
  scrollStrategy?: ScrollStrategy;

  /**
   * Whether the dialog should close when the user goes backwards/forwards in history
   */
  closeOnNavigation?: boolean;

  /**
   * Alternate ComponentRef to use for the dialog container
   */
  container?: ComponentType<C>;

  /**
   * Providers for the dialog
   */
  providers?: Array<Provider | EnvironmentProviders>;
}

/**
 * Valid ARIA roles for a dialog element
 */
type DialogRole = 'dialog' | 'alertdialog';

/**
 * Possible overrides for a dialog's position
 */
interface DialogPosition {
  top?: string;
  bottom?: string;
  left?: string;
  right?: string;
}

/**
 * Options for where to focus on dialog open
 */
type AutoFocusTarget = 'dialog' | 'first-tabbable' | 'first-heading';

/**
 * Default dialog container component
 */
class CdkDialogContainer extends DialogContainer {
  /**
   * State of the dialog animation
   */
  _state: 'enter' | 'exit';

  /**
   * Element that was focused before the dialog was opened
   */
  _elementFocusedBeforeDialogWasOpened: HTMLElement | null;

  /**
   * Callback, invoked whenever an animation on the host completes
   */
  _onAnimationDone(event: AnimationEvent): void;

  /**
   * Callback, invoked when an animation on the host starts
   */
  _onAnimationStart(event: AnimationEvent): void;

  /**
   * Starts the dialog exit animation
   */
  _startExitAnimation(): void;
}

/**
 * Base class for dialog container components
 */
abstract class DialogContainer {
  /**
   * The portal outlet inside of this container into which the dialog content will be loaded
   */
  _portalOutlet: PortalOutlet;

  /**
   * The class that traps and manages focus within the dialog
   */
  _focusTrap: FocusTrap;

  /**
   * Element that was focused before the dialog was opened
   */
  _elementFocusedBeforeDialogWasOpened: HTMLElement | null;

  /**
   * Attach a ComponentPortal as content to this dialog container
   */
  attachComponentPortal<T>(portal: ComponentPortal<T>): ComponentRef<T>;

  /**
   * Attach a TemplatePortal as content to this dialog container
   */
  attachTemplatePortal<C>(portal: TemplatePortal<C>): EmbeddedViewRef<C>;
}

/**
 * Injection token for the dialog data
 */
const DIALOG_DATA: InjectionToken<any>;

/**
 * Injection token for the dialog reference
 */
const DIALOG_REF: InjectionToken<DialogRef<any>>;

/**
 * Injection token for the dialog scroll strategy
 */
const DIALOG_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;

/**
 * Injection token for the default dialog configuration
 */
const DEFAULT_DIALOG_CONFIG: InjectionToken<DialogConfig>;

import { Component, Inject } from '@angular/core';
import { DialogRef, DIALOG_DATA } from '@angular/cdk/dialog';

@Component({
  template: `
    <h2>Dialog Title</h2>
    <p>{{ data.message }}</p>
    <button (click)="close('confirmed')">Confirm</button>
    <button (click)="close()">Cancel</button>
  `
})
export class MyDialogComponent {
  constructor(
    public dialogRef: DialogRef<MyDialogComponent>,
    @Inject(DIALOG_DATA) public data: { message: string }
  ) {}

  close(result?: string) {
    this.dialogRef.close(result);
  }
}

/**
 * Options for closing dialogs
 */
interface DialogCloseOptions {
  /**
   * Whether to focus the element that was focused before the dialog opened
   */
  focusOrigin?: FocusOrigin;
}

/**
 * Configuration for dialog module
 */
interface DialogModuleConfig {
  providers?: Provider[];
}