@angular/material/fesm2020/dialog.mjs.map

Angular Material

{"version":3,"file":"dialog.mjs","sources":["../../../../../../src/material/dialog/dialog-config.ts","../../../../../../src/material/dialog/dialog-animations.ts","../../../../../../src/material/dialog/dialog-container.ts","../../../../../../src/material/dialog/dialog-container.html","../../../../../../src/material/dialog/dialog-ref.ts","../../../../../../src/material/dialog/dialog.ts","../../../../../../src/material/dialog/dialog-content-directives.ts","../../../../../../src/material/dialog/dialog-module.ts","../../../../../../src/material/dialog/public-api.ts","../../../../../../src/material/dialog/index.ts","../../../../../../src/material/dialog/dialog_public_index.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {ViewContainerRef, ComponentFactoryResolver} from '@angular/core';\nimport {Direction} from '@angular/cdk/bidi';\nimport {ScrollStrategy} from '@angular/cdk/overlay';\n\n/** Options for where to set focus to automatically on dialog open */\nexport type AutoFocusTarget = 'dialog' | 'first-tabbable' | 'first-heading';\n\n/** Valid ARIA roles for a dialog element. */\nexport type DialogRole = 'dialog' | 'alertdialog';\n\n/** Possible overrides for a dialog's position. */\nexport interface DialogPosition {\n  /** Override for the dialog's top position. */\n  top?: string;\n\n  /** Override for the dialog's bottom position. */\n  bottom?: string;\n\n  /** Override for the dialog's left position. */\n  left?: string;\n\n  /** Override for the dialog's right position. */\n  right?: string;\n}\n\n/**\n * Configuration for opening a modal dialog with the MatDialog service.\n */\nexport class MatDialogConfig<D = any> {\n  /**\n   * Where the attached component should live in Angular's *logical* component tree.\n   * This affects what is available for injection and the change detection order for the\n   * component instantiated inside of the dialog. This does not affect where the dialog\n   * content will be rendered.\n   */\n  viewContainerRef?: ViewContainerRef;\n\n  /** ID for the dialog. If omitted, a unique one will be generated. */\n  id?: string;\n\n  /** The ARIA role of the dialog element. */\n  role?: DialogRole = 'dialog';\n\n  /** Custom class for the overlay pane. */\n  panelClass?: string | string[] = '';\n\n  /** Whether the dialog has a backdrop. */\n  hasBackdrop?: boolean = true;\n\n  /** Custom class for the backdrop. */\n  backdropClass?: string | string[] = '';\n\n  /** Whether the user can use escape or clicking on the backdrop to close the modal. */\n  disableClose?: boolean = false;\n\n  /** Width of the dialog. */\n  width?: string = '';\n\n  /** Height of the dialog. */\n  height?: string = '';\n\n  /** Min-width of the dialog. If a number is provided, assumes pixel units. */\n  minWidth?: number | string;\n\n  /** Min-height of the dialog. If a number is provided, assumes pixel units. */\n  minHeight?: number | string;\n\n  /** Max-width of the dialog. If a number is provided, assumes pixel units. Defaults to 80vw. */\n  maxWidth?: number | string = '80vw';\n\n  /** Max-height of the dialog. If a number is provided, assumes pixel units. */\n  maxHeight?: number | string;\n\n  /** Position overrides. */\n  position?: DialogPosition;\n\n  /** Data being injected into the child component. */\n  data?: D | null = null;\n\n  /** Layout direction for the dialog's content. */\n  direction?: Direction;\n\n  /** ID of the element that describes the dialog. */\n  ariaDescribedBy?: string | null = null;\n\n  /** ID of the element that labels the dialog. */\n  ariaLabelledBy?: string | null = null;\n\n  /** Aria label to assign to the dialog element. */\n  ariaLabel?: string | null = null;\n\n  /**\n   * Where the dialog should focus on open.\n   * @breaking-change 14.0.0 Remove boolean option from autoFocus. Use string or\n   * AutoFocusTarget instead.\n   */\n  autoFocus?: AutoFocusTarget | string | boolean = 'first-tabbable';\n\n  /**\n   * Whether the dialog should restore focus to the\n   * previously-focused element, after it's closed.\n   */\n  restoreFocus?: boolean = true;\n\n  /** Scroll strategy to be used for the dialog. */\n  scrollStrategy?: ScrollStrategy;\n\n  /**\n   * Whether the dialog should close when the user goes backwards/forwards in history.\n   * Note that this usually doesn't include clicking on links (unless the user is using\n   * the `HashLocationStrategy`).\n   */\n  closeOnNavigation?: boolean = true;\n\n  /** Alternate `ComponentFactoryResolver` to use when resolving the associated component. */\n  componentFactoryResolver?: ComponentFactoryResolver;\n\n  // TODO(jelbourn): add configuration for lifecycle hooks, ARIA labelling.\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nimport {\n  animate,\n  state,\n  style,\n  transition,\n  trigger,\n  AnimationTriggerMetadata,\n} from '@angular/animations';\n\n/**\n * Animations used by MatDialog.\n * @docs-private\n */\nexport const matDialogAnimations: {\n  readonly dialogContainer: AnimationTriggerMetadata;\n} = {\n  /** Animation that is applied on the dialog container by default. */\n  dialogContainer: trigger('dialogContainer', [\n    // Note: The `enter` animation transitions to `transform: none`, because for some reason\n    // specifying the transform explicitly, causes IE both to blur the dialog content and\n    // decimate the animation performance. Leaving it as `none` solves both issues.\n    state('void, exit', style({opacity: 0, transform: 'scale(0.7)'})),\n    state('enter', style({transform: 'none'})),\n    transition(\n      '* => enter',\n      animate('150ms cubic-bezier(0, 0, 0.2, 1)', style({transform: 'none', opacity: 1})),\n    ),\n    transition(\n      '* => void, * => exit',\n      animate('75ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({opacity: 0})),\n    ),\n  ]),\n};\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {AnimationEvent} from '@angular/animations';\nimport {\n  FocusMonitor,\n  FocusOrigin,\n  FocusTrap,\n  FocusTrapFactory,\n  InteractivityChecker,\n} from '@angular/cdk/a11y';\nimport {_getFocusedElementPierceShadowDom} from '@angular/cdk/platform';\nimport {\n  BasePortalOutlet,\n  CdkPortalOutlet,\n  ComponentPortal,\n  DomPortal,\n  TemplatePortal,\n} from '@angular/cdk/portal';\nimport {DOCUMENT} from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ComponentRef,\n  Directive,\n  ElementRef,\n  EmbeddedViewRef,\n  EventEmitter,\n  Inject,\n  NgZone,\n  Optional,\n  ViewChild,\n  ViewEncapsulation,\n} from '@angular/core';\nimport {matDialogAnimations} from './dialog-animations';\nimport {MatDialogConfig} from './dialog-config';\n\n/** Event that captures the state of dialog container animations. */\ninterface DialogAnimationEvent {\n  state: 'opened' | 'opening' | 'closing' | 'closed';\n  totalTime: number;\n}\n\n/**\n * Throws an exception for the case when a ComponentPortal is\n * attached to a DomPortalOutlet without an origin.\n * @docs-private\n */\nexport function throwMatDialogContentAlreadyAttachedError() {\n  throw Error('Attempting to attach dialog content after content is already attached');\n}\n\n/**\n * Base class for the `MatDialogContainer`. The base class does not implement\n * animations as these are left to implementers of the dialog container.\n */\n@Directive()\nexport abstract class _MatDialogContainerBase extends BasePortalOutlet {\n  protected _document: Document;\n\n  /** The portal outlet inside of this container into which the dialog content will be loaded. */\n  @ViewChild(CdkPortalOutlet, {static: true}) _portalOutlet: CdkPortalOutlet;\n\n  /** The class that traps and manages focus within the dialog. */\n  private _focusTrap: FocusTrap;\n\n  /** Emits when an animation state changes. */\n  _animationStateChanged = new EventEmitter<DialogAnimationEvent>();\n\n  /** Element that was focused before the dialog was opened. Save this to restore upon close. */\n  private _elementFocusedBeforeDialogWasOpened: HTMLElement | null = null;\n\n  /**\n   * Type of interaction that led to the dialog being closed. This is used to determine\n   * whether the focus style will be applied when returning focus to its original location\n   * after the dialog is closed.\n   */\n  _closeInteractionType: FocusOrigin | null = null;\n\n  /** ID of the element that should be considered as the dialog's label. */\n  _ariaLabelledBy: string | null;\n\n  /** ID for the container DOM element. */\n  _id: string;\n\n  constructor(\n    protected _elementRef: ElementRef,\n    protected _focusTrapFactory: FocusTrapFactory,\n    protected _changeDetectorRef: ChangeDetectorRef,\n    @Optional() @Inject(DOCUMENT) _document: any,\n    /** The dialog configuration. */\n    public _config: MatDialogConfig,\n    private readonly _interactivityChecker: InteractivityChecker,\n    private readonly _ngZone: NgZone,\n    private _focusMonitor?: FocusMonitor,\n  ) {\n    super();\n    this._ariaLabelledBy = _config.ariaLabelledBy || null;\n    this._document = _document;\n  }\n\n  /** Starts the dialog exit animation. */\n  abstract _startExitAnimation(): void;\n\n  /** Initializes the dialog container with the attached content. */\n  _initializeWithAttachedContent() {\n    this._setupFocusTrap();\n    // Save the previously focused element. This element will be re-focused\n    // when the dialog closes.\n    this._capturePreviouslyFocusedElement();\n  }\n\n  /**\n   * Attach a ComponentPortal as content to this dialog container.\n   * @param portal Portal to be attached as the dialog content.\n   */\n  attachComponentPortal<T>(portal: ComponentPortal<T>): ComponentRef<T> {\n    if (this._portalOutlet.hasAttached() && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n      throwMatDialogContentAlreadyAttachedError();\n    }\n\n    return this._portalOutlet.attachComponentPortal(portal);\n  }\n\n  /**\n   * Attach a TemplatePortal as content to this dialog container.\n   * @param portal Portal to be attached as the dialog content.\n   */\n  attachTemplatePortal<C>(portal: TemplatePortal<C>): EmbeddedViewRef<C> {\n    if (this._portalOutlet.hasAttached() && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n      throwMatDialogContentAlreadyAttachedError();\n    }\n\n    return this._portalOutlet.attachTemplatePortal(portal);\n  }\n\n  /**\n   * Attaches a DOM portal to the dialog container.\n   * @param portal Portal to be attached.\n   * @deprecated To be turned into a method.\n   * @breaking-change 10.0.0\n   */\n  override attachDomPortal = (portal: DomPortal) => {\n    if (this._portalOutlet.hasAttached() && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n      throwMatDialogContentAlreadyAttachedError();\n    }\n\n    return this._portalOutlet.attachDomPortal(portal);\n  };\n\n  /** Moves focus back into the dialog if it was moved out. */\n  _recaptureFocus() {\n    if (!this._containsFocus()) {\n      this._trapFocus();\n    }\n  }\n\n  /**\n   * Focuses the provided element. If the element is not focusable, it will add a tabIndex\n   * attribute to forcefully focus it. The attribute is removed after focus is moved.\n   * @param element The element to focus.\n   */\n  private _forceFocus(element: HTMLElement, options?: FocusOptions) {\n    if (!this._interactivityChecker.isFocusable(element)) {\n      element.tabIndex = -1;\n      // The tabindex attribute should be removed to avoid navigating to that element again\n      this._ngZone.runOutsideAngular(() => {\n        element.addEventListener('blur', () => element.removeAttribute('tabindex'));\n        element.addEventListener('mousedown', () => element.removeAttribute('tabindex'));\n      });\n    }\n    element.focus(options);\n  }\n\n  /**\n   * Focuses the first element that matches the given selector within the focus trap.\n   * @param selector The CSS selector for the element to set focus to.\n   */\n  private _focusByCssSelector(selector: string, options?: FocusOptions) {\n    let elementToFocus = this._elementRef.nativeElement.querySelector(\n      selector,\n    ) as HTMLElement | null;\n    if (elementToFocus) {\n      this._forceFocus(elementToFocus, options);\n    }\n  }\n\n  /**\n   * Moves the focus inside the focus trap. When autoFocus is not set to 'dialog', if focus\n   * cannot be moved then focus will go to the dialog container.\n   */\n  protected _trapFocus() {\n    const element = this._elementRef.nativeElement;\n    // If were to attempt to focus immediately, then the content of the dialog would not yet be\n    // ready in instances where change detection has to run first. To deal with this, we simply\n    // wait for the microtask queue to be empty when setting focus when autoFocus isn't set to\n    // dialog. If the element inside the dialog can't be focused, then the container is focused\n    // so the user can't tab into other elements behind it.\n    switch (this._config.autoFocus) {\n      case false:\n      case 'dialog':\n        // Ensure that focus is on the dialog container. It's possible that a different\n        // component tried to move focus while the open animation was running. See:\n        // https://github.com/angular/components/issues/16215. Note that we only want to do this\n        // if the focus isn't inside the dialog already, because it's possible that the consumer\n        // turned off `autoFocus` in order to move focus themselves.\n        if (!this._containsFocus()) {\n          element.focus();\n        }\n        break;\n      case true:\n      case 'first-tabbable':\n        this._focusTrap.focusInitialElementWhenReady().then(focusedSuccessfully => {\n          // If we weren't able to find a focusable element in the dialog, then focus the dialog\n          // container instead.\n          if (!focusedSuccessfully) {\n            this._focusDialogContainer();\n          }\n        });\n        break;\n      case 'first-heading':\n        this._focusByCssSelector('h1, h2, h3, h4, h5, h6, [role=\"heading\"]');\n        break;\n      default:\n        this._focusByCssSelector(this._config.autoFocus!);\n        break;\n    }\n  }\n\n  /** Restores focus to the element that was focused before the dialog opened. */\n  protected _restoreFocus() {\n    const previousElement = this._elementFocusedBeforeDialogWasOpened;\n\n    // We need the extra check, because IE can set the `activeElement` to null in some cases.\n    if (\n      this._config.restoreFocus &&\n      previousElement &&\n      typeof previousElement.focus === 'function'\n    ) {\n      const activeElement = _getFocusedElementPierceShadowDom();\n      const element = this._elementRef.nativeElement;\n\n      // Make sure that focus is still inside the dialog or is on the body (usually because a\n      // non-focusable element like the backdrop was clicked) before moving it. It's possible that\n      // the consumer moved it themselves before the animation was done, in which case we shouldn't\n      // do anything.\n      if (\n        !activeElement ||\n        activeElement === this._document.body ||\n        activeElement === element ||\n        element.contains(activeElement)\n      ) {\n        if (this._focusMonitor) {\n          this._focusMonitor.focusVia(previousElement, this._closeInteractionType);\n          this._closeInteractionType = null;\n        } else {\n          previousElement.focus();\n        }\n      }\n    }\n\n    if (this._focusTrap) {\n      this._focusTrap.destroy();\n    }\n  }\n\n  /** Sets up the focus trap. */\n  private _setupFocusTrap() {\n    this._focusTrap = this._focusTrapFactory.create(this._elementRef.nativeElement);\n  }\n\n  /** Captures the element that was focused before the dialog was opened. */\n  private _capturePreviouslyFocusedElement() {\n    if (this._document) {\n      this._elementFocusedBeforeDialogWasOpened = _getFocusedElementPierceShadowDom();\n    }\n  }\n\n  /** Focuses the dialog container. */\n  private _focusDialogContainer() {\n    // Note that there is no focus method when rendering on the server.\n    if (this._elementRef.nativeElement.focus) {\n      this._elementRef.nativeElement.focus();\n    }\n  }\n\n  /** Returns whether focus is inside the dialog. */\n  private _containsFocus() {\n    const element = this._elementRef.nativeElement;\n    const activeElement = _getFocusedElementPierceShadowDom();\n    return element === activeElement || element.contains(activeElement);\n  }\n}\n\n/**\n * Internal component that wraps user-provided dialog content.\n * Animation is based on https://material.io/guidelines/motion/choreography.html.\n * @docs-private\n */\n@Component({\n  selector: 'mat-dialog-container',\n  templateUrl: 'dialog-container.html',\n  styleUrls: ['dialog.css'],\n  encapsulation: ViewEncapsulation.None,\n  // Using OnPush for dialogs caused some G3 sync issues. Disabled until we can track them down.\n  // tslint:disable-next-line:validate-decorators\n  changeDetection: ChangeDetectionStrategy.Default,\n  animations: [matDialogAnimations.dialogContainer],\n  host: {\n    'class': 'mat-dialog-container',\n    'tabindex': '-1',\n    'aria-modal': 'true',\n    '[id]': '_id',\n    '[attr.role]': '_config.role',\n    '[attr.aria-labelledby]': '_config.ariaLabel ? null : _ariaLabelledBy',\n    '[attr.aria-label]': '_config.ariaLabel',\n    '[attr.aria-describedby]': '_config.ariaDescribedBy || null',\n    '[@dialogContainer]': '_state',\n    '(@dialogContainer.start)': '_onAnimationStart($event)',\n    '(@dialogContainer.done)': '_onAnimationDone($event)',\n  },\n})\nexport class MatDialogContainer extends _MatDialogContainerBase {\n  /** State of the dialog animation. */\n  _state: 'void' | 'enter' | 'exit' = 'enter';\n\n  /** Callback, invoked whenever an animation on the host completes. */\n  _onAnimationDone({toState, totalTime}: AnimationEvent) {\n    if (toState === 'enter') {\n      this._trapFocus();\n      this._animationStateChanged.next({state: 'opened', totalTime});\n    } else if (toState === 'exit') {\n      this._restoreFocus();\n      this._animationStateChanged.next({state: 'closed', totalTime});\n    }\n  }\n\n  /** Callback, invoked when an animation on the host starts. */\n  _onAnimationStart({toState, totalTime}: AnimationEvent) {\n    if (toState === 'enter') {\n      this._animationStateChanged.next({state: 'opening', totalTime});\n    } else if (toState === 'exit' || toState === 'void') {\n      this._animationStateChanged.next({state: 'closing', totalTime});\n    }\n  }\n\n  /** Starts the dialog exit animation. */\n  _startExitAnimation(): void {\n    this._state = 'exit';\n\n    // Mark the container for check so it can react if the\n    // view container is using OnPush change detection.\n    this._changeDetectorRef.markForCheck();\n  }\n}\n","<ng-template cdkPortalOutlet></ng-template>\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {FocusOrigin} from '@angular/cdk/a11y';\nimport {ESCAPE, hasModifierKey} from '@angular/cdk/keycodes';\nimport {GlobalPositionStrategy, OverlayRef} from '@angular/cdk/overlay';\nimport {Observable, Subject} from 'rxjs';\nimport {filter, take} from 'rxjs/operators';\nimport {DialogPosition} from './dialog-config';\nimport {_MatDialogContainerBase} from './dialog-container';\n\n// TODO(jelbourn): resizing\n\n// Counter for unique dialog ids.\nlet uniqueId = 0;\n\n/** Possible states of the lifecycle of a dialog. */\nexport const enum MatDialogState {\n  OPEN,\n  CLOSING,\n  CLOSED,\n}\n\n/**\n * Reference to a dialog opened via the MatDialog service.\n */\nexport class MatDialogRef<T, R = any> {\n  /** The instance of component opened into the dialog. */\n  componentInstance: T;\n\n  /** Whether the user is allowed to close the dialog. */\n  disableClose: boolean | undefined = this._containerInstance._config.disableClose;\n\n  /** Subject for notifying the user that the dialog has finished opening. */\n  private readonly _afterOpened = new Subject<void>();\n\n  /** Subject for notifying the user that the dialog has finished closing. */\n  private readonly _afterClosed = new Subject<R | undefined>();\n\n  /** Subject for notifying the user that the dialog has started closing. */\n  private readonly _beforeClosed = new Subject<R | undefined>();\n\n  /** Result to be passed to afterClosed. */\n  private _result: R | undefined;\n\n  /** Handle to the timeout that's running as a fallback in case the exit animation doesn't fire. */\n  private _closeFallbackTimeout: number;\n\n  /** Current state of the dialog. */\n  private _state = MatDialogState.OPEN;\n\n  constructor(\n    private _overlayRef: OverlayRef,\n    public _containerInstance: _MatDialogContainerBase,\n    /** Id of the dialog. */\n    readonly id: string = `mat-dialog-${uniqueId++}`,\n  ) {\n    // Pass the id along to the container.\n    _containerInstance._id = id;\n\n    // Emit when opening animation completes\n    _containerInstance._animationStateChanged\n      .pipe(\n        filter(event => event.state === 'opened'),\n        take(1),\n      )\n      .subscribe(() => {\n        this._afterOpened.next();\n        this._afterOpened.complete();\n      });\n\n    // Dispose overlay when closing animation is complete\n    _containerInstance._animationStateChanged\n      .pipe(\n        filter(event => event.state === 'closed'),\n        take(1),\n      )\n      .subscribe(() => {\n        clearTimeout(this._closeFallbackTimeout);\n        this._finishDialogClose();\n      });\n\n    _overlayRef.detachments().subscribe(() => {\n      this._beforeClosed.next(this._result);\n      this._beforeClosed.complete();\n      this._afterClosed.next(this._result);\n      this._afterClosed.complete();\n      this.componentInstance = null!;\n      this._overlayRef.dispose();\n    });\n\n    _overlayRef\n      .keydownEvents()\n      .pipe(\n        filter(event => {\n          return event.keyCode === ESCAPE && !this.disableClose && !hasModifierKey(event);\n        }),\n      )\n      .subscribe(event => {\n        event.preventDefault();\n        _closeDialogVia(this, 'keyboard');\n      });\n\n    _overlayRef.backdropClick().subscribe(() => {\n      if (this.disableClose) {\n        this._containerInstance._recaptureFocus();\n      } else {\n        _closeDialogVia(this, 'mouse');\n      }\n    });\n  }\n\n  /**\n   * Close the dialog.\n   * @param dialogResult Optional result to return to the dialog opener.\n   */\n  close(dialogResult?: R): void {\n    this._result = dialogResult;\n\n    // Transition the backdrop in parallel to the dialog.\n    this._containerInstance._animationStateChanged\n      .pipe(\n        filter(event => event.state === 'closing'),\n        take(1),\n      )\n      .subscribe(event => {\n        this._beforeClosed.next(dialogResult);\n        this._beforeClosed.complete();\n        this._overlayRef.detachBackdrop();\n\n        // The logic that disposes of the overlay depends on the exit animation completing, however\n        // it isn't guaranteed if the parent view is destroyed while it's running. Add a fallback\n        // timeout which will clean everything up if the animation hasn't fired within the specified\n        // amount of time plus 100ms. We don't need to run this outside the NgZone, because for the\n        // vast majority of cases the timeout will have been cleared before it has the chance to fire.\n        this._closeFallbackTimeout = setTimeout(\n          () => this._finishDialogClose(),\n          event.totalTime + 100,\n        );\n      });\n\n    this._state = MatDialogState.CLOSING;\n    this._containerInstance._startExitAnimation();\n  }\n\n  /**\n   * Gets an observable that is notified when the dialog is finished opening.\n   */\n  afterOpened(): Observable<void> {\n    return this._afterOpened;\n  }\n\n  /**\n   * Gets an observable that is notified when the dialog is finished closing.\n   */\n  afterClosed(): Observable<R | undefined> {\n    return this._afterClosed;\n  }\n\n  /**\n   * Gets an observable that is notified when the dialog has started closing.\n   */\n  beforeClosed(): Observable<R | undefined> {\n    return this._beforeClosed;\n  }\n\n  /**\n   * Gets an observable that emits when the overlay's backdrop has been clicked.\n   */\n  backdropClick(): Observable<MouseEvent> {\n    return this._overlayRef.backdropClick();\n  }\n\n  /**\n   * Gets an observable that emits when keydown events are targeted on the overlay.\n   */\n  keydownEvents(): Observable<KeyboardEvent> {\n    return this._overlayRef.keydownEvents();\n  }\n\n  /**\n   * Updates the dialog's position.\n   * @param position New dialog position.\n   */\n  updatePosition(position?: DialogPosition): this {\n    let strategy = this._getPositionStrategy();\n\n    if (position && (position.left || position.right)) {\n      position.left ? strategy.left(position.left) : strategy.right(position.right);\n    } else {\n      strategy.centerHorizontally();\n    }\n\n    if (position && (position.top || position.bottom)) {\n      position.top ? strategy.top(position.top) : strategy.bottom(position.bottom);\n    } else {\n      strategy.centerVertically();\n    }\n\n    this._overlayRef.updatePosition();\n\n    return this;\n  }\n\n  /**\n   * Updates the dialog's width and height.\n   * @param width New width of the dialog.\n   * @param height New height of the dialog.\n   */\n  updateSize(width: string = '', height: string = ''): this {\n    this._overlayRef.updateSize({width, height});\n    this._overlayRef.updatePosition();\n    return this;\n  }\n\n  /** Add a CSS class or an array of classes to the overlay pane. */\n  addPanelClass(classes: string | string[]): this {\n    this._overlayRef.addPanelClass(classes);\n    return this;\n  }\n\n  /** Remove a CSS class or an array of classes from the overlay pane. */\n  removePanelClass(classes: string | string[]): this {\n    this._overlayRef.removePanelClass(classes);\n    return this;\n  }\n\n  /** Gets the current state of the dialog's lifecycle. */\n  getState(): MatDialogState {\n    return this._state;\n  }\n\n  /**\n   * Finishes the dialog close by updating the state of the dialog\n   * and disposing the overlay.\n   */\n  private _finishDialogClose() {\n    this._state = MatDialogState.CLOSED;\n    this._overlayRef.dispose();\n  }\n\n  /** Fetches the position strategy object from the overlay ref. */\n  private _getPositionStrategy(): GlobalPositionStrategy {\n    return this._overlayRef.getConfig().positionStrategy as GlobalPositionStrategy;\n  }\n}\n\n/**\n * Closes the dialog with the specified interaction type. This is currently not part of\n * `MatDialogRef` as that would conflict with custom dialog ref mocks provided in tests.\n * More details. See: https://github.com/angular/components/pull/9257#issuecomment-651342226.\n */\n// TODO: TODO: Move this back into `MatDialogRef` when we provide an official mock dialog ref.\nexport function _closeDialogVia<R>(ref: MatDialogRef<R>, interactionType: FocusOrigin, result?: R) {\n  // Some mock dialog ref instances in tests do not have the `_containerInstance` property.\n  // For those, we keep the behavior as is and do not deal with the interaction type.\n  if (ref._containerInstance !== undefined) {\n    ref._containerInstance._closeInteractionType = interactionType;\n  }\n  return ref.close(result);\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {Directionality} from '@angular/cdk/bidi';\nimport {\n  Overlay,\n  OverlayConfig,\n  OverlayContainer,\n  OverlayRef,\n  ScrollStrategy,\n} from '@angular/cdk/overlay';\nimport {ComponentPortal, ComponentType, TemplatePortal} from '@angular/cdk/portal';\nimport {Location} from '@angular/common';\nimport {\n  Directive,\n  Inject,\n  Injectable,\n  InjectFlags,\n  InjectionToken,\n  Injector,\n  OnDestroy,\n  Optional,\n  SkipSelf,\n  StaticProvider,\n  TemplateRef,\n  Type,\n} from '@angular/core';\nimport {defer, Observable, of as observableOf, Subject, Subscription} from 'rxjs';\nimport {startWith} from 'rxjs/operators';\nimport {MatDialogConfig} from './dialog-config';\nimport {MatDialogContainer, _MatDialogContainerBase} from './dialog-container';\nimport {MatDialogRef} from './dialog-ref';\nimport {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';\n\n/** Injection token that can be used to access the data that was passed in to a dialog. */\nexport const MAT_DIALOG_DATA = new InjectionToken<any>('MatDialogData');\n\n/** Injection token that can be used to specify default dialog options. */\nexport const MAT_DIALOG_DEFAULT_OPTIONS = new InjectionToken<MatDialogConfig>(\n  'mat-dialog-default-options',\n);\n\n/** Injection token that determines the scroll handling while the dialog is open. */\nexport const MAT_DIALOG_SCROLL_STRATEGY = new InjectionToken<() => ScrollStrategy>(\n  'mat-dialog-scroll-strategy',\n);\n\n/** @docs-private */\nexport function MAT_DIALOG_SCROLL_STRATEGY_FACTORY(overlay: Overlay): () => ScrollStrategy {\n  return () => overlay.scrollStrategies.block();\n}\n\n/** @docs-private */\nexport function MAT_DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY(\n  overlay: Overlay,\n): () => ScrollStrategy {\n  return () => overlay.scrollStrategies.block();\n}\n\n/** @docs-private */\nexport const MAT_DIALOG_SCROLL_STRATEGY_PROVIDER = {\n  provide: MAT_DIALOG_SCROLL_STRATEGY,\n  deps: [Overlay],\n  useFactory: MAT_DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY,\n};\n\n/**\n * Base class for dialog services. The base dialog service allows\n * for arbitrary dialog refs and dialog container components.\n */\n@Directive()\nexport abstract class _MatDialogBase<C extends _MatDialogContainerBase> implements OnDestroy {\n  private _openDialogsAtThisLevel: MatDialogRef<any>[] = [];\n  private readonly _afterAllClosedAtThisLevel = new Subject<void>();\n  private readonly _afterOpenedAtThisLevel = new Subject<MatDialogRef<any>>();\n  private _ariaHiddenElements = new Map<Element, string | null>();\n  private _scrollStrategy: () => ScrollStrategy;\n  private _dialogAnimatingOpen = false;\n  private _animationStateSubscriptions: Subscription;\n  private _lastDialogRef: MatDialogRef<any>;\n\n  /** Keeps track of the currently-open dialogs. */\n  get openDialogs(): MatDialogRef<any>[] {\n    return this._parentDialog ? this._parentDialog.openDialogs : this._openDialogsAtThisLevel;\n  }\n\n  /** Stream that emits when a dialog has been opened. */\n  get afterOpened(): Subject<MatDialogRef<any>> {\n    return this._parentDialog ? this._parentDialog.afterOpened : this._afterOpenedAtThisLevel;\n  }\n\n  _getAfterAllClosed(): Subject<void> {\n    const parent = this._parentDialog;\n    return parent ? parent._getAfterAllClosed() : this._afterAllClosedAtThisLevel;\n  }\n\n  // TODO (jelbourn): tighten the typing right-hand side of this expression.\n  /**\n   * Stream that emits when all open dialog have finished closing.\n   * Will emit on subscribe if there are no open dialogs to begin with.\n   */\n  readonly afterAllClosed: Observable<void> = defer(() =>\n    this.openDialogs.length\n      ? this._getAfterAllClosed()\n      : this._getAfterAllClosed().pipe(startWith(undefined)),\n  ) as Observable<any>;\n\n  constructor(\n    private _overlay: Overlay,\n    private _injector: Injector,\n    private _defaultOptions: MatDialogConfig | undefined,\n    private _parentDialog: _MatDialogBase<C> | undefined,\n    private _overlayContainer: OverlayContainer,\n    scrollStrategy: any,\n    private _dialogRefConstructor: Type<MatDialogRef<any>>,\n    private _dialogContainerType: Type<C>,\n    private _dialogDataToken: InjectionToken<any>,\n    private _animationMode?: 'NoopAnimations' | 'BrowserAnimations',\n  ) {\n    this._scrollStrategy = scrollStrategy;\n  }\n\n  /**\n   * Opens a modal dialog containing the given component.\n   * @param component Type of the component to load into the dialog.\n   * @param config Extra configuration options.\n   * @returns Reference to the newly-opened dialog.\n   */\n  open<T, D = any, R = any>(\n    component: ComponentType<T>,\n    config?: MatDialogConfig<D>,\n  ): MatDialogRef<T, R>;\n\n  /**\n   * Opens a modal dialog containing the given template.\n   * @param template TemplateRef to instantiate as the dialog content.\n   * @param config Extra configuration options.\n   * @returns Reference to the newly-opened dialog.\n   */\n  open<T, D = any, R = any>(\n    template: TemplateRef<T>,\n    config?: MatDialogConfig<D>,\n  ): MatDialogRef<T, R>;\n\n  open<T, D = any, R = any>(\n    template: ComponentType<T> | TemplateRef<T>,\n    config?: MatDialogConfig<D>,\n  ): MatDialogRef<T, R>;\n\n  open<T, D = any, R = any>(\n    componentOrTemplateRef: ComponentType<T> | TemplateRef<T>,\n    config?: MatDialogConfig<D>,\n  ): MatDialogRef<T, R> {\n    config = _applyConfigDefaults(config, this._defaultOptions || new MatDialogConfig());\n\n    if (\n      config.id &&\n      this.getDialogById(config.id) &&\n      (typeof ngDevMode === 'undefined' || ngDevMode)\n    ) {\n      throw Error(`Dialog with id \"${config.id}\" exists already. The dialog id must be unique.`);\n    }\n\n    // If there is a dialog that is currently animating open, return the MatDialogRef of that dialog\n    if (this._dialogAnimatingOpen) {\n      return this._lastDialogRef;\n    }\n\n    const overlayRef = this._createOverlay(config);\n    const dialogContainer = this._attachDialogContainer(overlayRef, config);\n    if (this._animationMode !== 'NoopAnimations') {\n      const animationStateSubscription = dialogContainer._animationStateChanged.subscribe(\n        dialogAnimationEvent => {\n          if (dialogAnimationEvent.state === 'opening') {\n            this._dialogAnimatingOpen = true;\n          }\n          if (dialogAnimationEvent.state === 'opened') {\n            this._dialogAnimatingOpen = false;\n            animationStateSubscription.unsubscribe();\n          }\n        },\n      );\n      if (!this._animationStateSubscriptions) {\n        this._animationStateSubscriptions = new Subscription();\n      }\n      this._animationStateSubscriptions.add(animationStateSubscription);\n    }\n\n    const dialogRef = this._attachDialogContent<T, R>(\n      componentOrTemplateRef,\n      dialogContainer,\n      overlayRef,\n      config,\n    );\n    this._lastDialogRef = dialogRef;\n\n    // If this is the first dialog that we're opening, hide all the non-overlay content.\n    if (!this.openDialogs.length) {\n      this._hideNonDialogContentFromAssistiveTechnology();\n    }\n\n    this.openDialogs.push(dialogRef);\n    dialogRef.afterClosed().subscribe(() => this._removeOpenDialog(dialogRef));\n    this.afterOpened.next(dialogRef);\n\n    // Notify the dialog container that the content has been attached.\n    dialogContainer._initializeWithAttachedContent();\n\n    return dialogRef;\n  }\n\n  /**\n   * Closes all of the currently-open dialogs.\n   */\n  closeAll(): void {\n    this._closeDialogs(this.openDialogs);\n  }\n\n  /**\n   * Finds an open dialog by its id.\n   * @param id ID to use when looking up the dialog.\n   */\n  getDialogById(id: string): MatDialogRef<any> | undefined {\n    return this.openDialogs.find(dialog => dialog.id === id);\n  }\n\n  ngOnDestroy() {\n    // Only close the dialogs at this level on destroy\n    // since the parent service may still be active.\n    this._closeDialogs(this._openDialogsAtThisLevel);\n    this._afterAllClosedAtThisLevel.complete();\n    this._afterOpenedAtThisLevel.complete();\n    // Clean up any subscriptions to dialogs that never finished opening.\n    if (this._animationStateSubscriptions) {\n      this._animationStateSubscriptions.unsubscribe();\n    }\n  }\n\n  /**\n   * Creates the overlay into which the dialog will be loaded.\n   * @param config The dialog configuration.\n   * @returns A promise resolving to the OverlayRef for the created overlay.\n   */\n  private _createOverlay(config: MatDialogConfig): OverlayRef {\n    const overlayConfig = this._getOverlayConfig(config);\n    return this._overlay.create(overlayConfig);\n  }\n\n  /**\n   * Creates an overlay config from a dialog config.\n   * @param dialogConfig The dialog configuration.\n   * @returns The overlay configuration.\n   */\n  private _getOverlayConfig(dialogConfig: MatDialogConfig): OverlayConfig {\n    const state = new OverlayConfig({\n      positionStrategy: this._overlay.position().global(),\n      scrollStrategy: dialogConfig.scrollStrategy || this._scrollStrategy(),\n      panelClass: dialogConfig.panelClass,\n      hasBackdrop: dialogConfig.hasBackdrop,\n      direction: dialogConfig.direction,\n      minWidth: dialogConfig.minWidth,\n      minHeight: dialogConfig.minHeight,\n      maxWidth: dialogConfig.maxWidth,\n      maxHeight: dialogConfig.maxHeight,\n      disposeOnNavigation: dialogConfig.closeOnNavigation,\n    });\n\n    if (dialogConfig.backdropClass) {\n      state.backdropClass = dialogConfig.backdropClass;\n    }\n\n    return state;\n  }\n\n  /**\n   * Attaches a dialog container to a dialog's already-created overlay.\n   * @param overlay Reference to the dialog's underlying overlay.\n   * @param config The dialog configuration.\n   * @returns A promise resolving to a ComponentRef for the attached container.\n   */\n  private _attachDialogContainer(overlay: OverlayRef, config: MatDialogConfig): C {\n    const userInjector = config && config.viewContainerRef && config.viewContainerRef.injector;\n    const injector = Injector.create({\n      parent: userInjector || this._injector,\n      providers: [{provide: MatDialogConfig, useValue: config}],\n    });\n\n    const containerPortal = new ComponentPortal(\n      this._dialogContainerType,\n      config.viewContainerRef,\n      injector,\n      config.componentFactoryResolver,\n    );\n    const containerRef = overlay.attach<C>(containerPortal);\n\n    return containerRef.instance;\n  }\n\n  /**\n   * Attaches the user-provided component to the already-created dialog container.\n   * @param componentOrTemplateRef The type of component being loaded into the dialog,\n   *     or a TemplateRef to instantiate as the content.\n   * @param dialogContainer Reference to the wrapping dialog container.\n   * @param overlayRef Reference to the overlay in which the dialog resides.\n   * @param config The dialog configuration.\n   * @returns A promise resolving to the MatDialogRef that should be returned to the user.\n   */\n  private _attachDialogContent<T, R>(\n    componentOrTemplateRef: ComponentType<T> | TemplateRef<T>,\n    dialogContainer: C,\n    overlayRef: OverlayRef,\n    config: MatDialogConfig,\n  ): MatDialogRef<T, R> {\n    // Create a reference to the dialog we're creating in order to give the user a handle\n    // to modify and close it.\n    const dialogRef = new this._dialogRefConstructor(overlayRef, dialogContainer, config.id);\n\n    if (componentOrTemplateRef instanceof TemplateRef) {\n      dialogContainer.attachTemplatePortal(\n        new TemplatePortal<T>(componentOrTemplateRef, null!, <any>{\n          $implicit: config.data,\n          dialogRef,\n        }),\n      );\n    } else {\n      const injector = this._createInjector<T>(config, dialogRef, dialogContainer);\n      const contentRef = dialogContainer.attachComponentPortal<T>(\n        new ComponentPortal(componentOrTemplateRef, config.viewContainerRef, injector),\n      );\n      dialogRef.componentInstance = contentRef.instance;\n    }\n\n    dialogRef.updateSize(config.width, config.height).updatePosition(config.position);\n\n    return dialogRef;\n  }\n\n  /**\n   * Creates a custom injector to be used inside the dialog. This allows a component loaded inside\n   * of a dialog to close itself and, optionally, to return a value.\n   * @param config Config object that is used to construct the dialog.\n   * @param dialogRef Reference to the dialog.\n   * @param dialogContainer Dialog container element that wraps all of the contents.\n   * @returns The custom injector that can be used inside the dialog.\n   */\n  private _createInjector<T>(\n    config: MatDialogConfig,\n    dialogRef: MatDialogRef<T>,\n    dialogContainer: C,\n  ): Injector {\n    const userInjector = config && config.viewContainerRef && config.viewContainerRef.injector;\n\n    // The dialog container should be provided as the dialog container and the dialog's\n    // content are created out of the same `ViewContainerRef` and as such, are siblings\n    // for injector purposes. To allow the hierarchy that is expected, the dialog\n    // container is explicitly provided in the injector.\n    const providers: StaticProvider[] = [\n      {provide: this._dialogContainerType, useValue: dialogContainer},\n      {provide: this._dialogDataToken, useValue: config.data},\n      {provide: this._dialogRefConstructor, useValue: dialogRef},\n    ];\n\n    if (\n      config.direction &&\n      (!userInjector ||\n        !userInjector.get<Directionality | null>(Directionality, null, InjectFlags.Optional))\n    ) {\n      providers.push({\n        provide: Directionality,\n        useValue: {value: config.direction, change: observableOf()},\n      });\n    }\n\n    return Injector.create({parent: userInjector || this._injector, providers});\n  }\n\n  /**\n   * Removes a dialog from the array of open dialogs.\n   * @param dialogRef Dialog to be removed.\n   */\n  private _removeOpenDialog(dialogRef: MatDialogRef<any>) {\n    const index = this.openDialogs.indexOf(dialogRef);\n\n    if (index > -1) {\n      this.openDialogs.splice(index, 1);\n\n      // If all the dialogs were closed, remove/restore the `aria-hidden`\n      // to a the siblings and emit to the `afterAllClosed` stream.\n      if (!this.openDialogs.length) {\n        this._ariaHiddenElements.forEach((previousValue, element) => {\n          if (previousValue) {\n            element.setAttribute('aria-hidden', previousValue);\n          } else {\n            element.removeAttribute('aria-hidden');\n          }\n        });\n\n        this._ariaHiddenElements.clear();\n        this._getAfterAllClosed().next();\n      }\n    }\n  }\n\n  /**\n   * Hides all of the content that isn't an overlay from assistive technology.\n   */\n  private _hideNonDialogContentFromAssistiveTechnology() {\n    const overlayContainer = this._overlayContainer.getContainerElement();\n\n    // Ensure that the overlay container is attached to the DOM.\n    if (overlayContainer.parentElement) {\n      const siblings = overlayContainer.parentElement.children;\n\n      for (let i = siblings.length - 1; i > -1; i--) {\n        let sibling = siblings[i];\n\n        if (\n          sibling !== overlayContainer &&\n          sibling.nodeName !== 'SCRIPT' &&\n          sibling.nodeName !== 'STYLE' &&\n          !sibling.hasAttribute('aria-live')\n        ) {\n          this._ariaHiddenElements.set(sibling, sibling.getAttribute('aria-hidden'));\n          sibling.setAttribute('aria-hidden', 'true');\n        }\n      }\n    }\n  }\n\n  /** Closes all of the dialogs in an array. */\n  private _closeDialogs(dialogs: MatDialogRef<any>[]) {\n    let i = dialogs.length;\n\n    while (i--) {\n      // The `_openDialogs` property isn't updated after close until the rxjs subscription\n      // runs on the next microtask, in addition to modifying the array as we're going\n      // through it. We loop through all of them and call close without assuming that\n      // they'll be removed from the list instantaneously.\n      dialogs[i].close();\n    }\n  }\n}\n\n/**\n * Service to open Material Design modal dialogs.\n */\n@Injectable()\nexport class MatDialog extends _MatDialogBase<MatDialogContainer> {\n  constructor(\n    overlay: Overlay,\n    injector: Injector,\n    /**\n     * @deprecated `_location` parameter to be removed.\n     * @breaking-change 10.0.0\n     */\n    @Optional() location: Location,\n    @Optional() @Inject(MAT_DIALOG_DEFAULT_OPTIONS) defaultOptions: MatDialogConfig,\n    @Inject(MAT_DIALOG_SCROLL_STRATEGY) scrollStrategy: any,\n    @Optional() @SkipSelf() parentDialog: MatDialog,\n    overlayContainer: OverlayContainer,\n    @Optional()\n    @Inject(ANIMATION_MODULE_TYPE)\n    animationMode?: 'NoopAnimations' | 'BrowserAnimations',\n  ) {\n    super(\n      overlay,\n      injector,\n      defaultOptions,\n      parentDialog,\n      overlayContainer,\n      scrollStrategy,\n      MatDialogRef,\n      MatDialogContainer,\n      MAT_DIALOG_DATA,\n      animationMode,\n    );\n  }\n}\n\n/**\n * Applies default options to the dialog config.\n * @param config Config to be modified.\n * @param defaultOptions Default options provided.\n * @returns The new configuration object.\n */\nfunction _applyConfigDefaults(\n  config?: MatDialogConfig,\n  defaultOptions?: MatDialogConfig,\n): MatDialogConfig {\n  return {...defaultOptions, ...config};\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {\n  Directive,\n  Input,\n  OnChanges,\n  OnInit,\n  Optional,\n  SimpleChanges,\n  ElementRef,\n} from '@angular/core';\nimport {MatDialog} from './dialog';\nimport {_closeDialogVia, MatDialogRef} from './dialog-ref';\n\n/** Counter used to generate unique IDs for dialog elements. */\nlet dialogElementUid = 0;\n\n/**\n * Button that will close the current dialog.\n */\n@Directive({\n  selector: '[mat-dialog-close], [matDialogClose]',\n  exportAs: 'matDialogClose',\n  host: {\n    '(click)': '_onButtonClick($event)',\n    '[attr.aria-label]': 'ariaLabel || null',\n    '[attr.type]': 'type',\n  },\n})\nexport class MatDialogClose implements OnInit, OnChanges {\n  /** Screenreader label for the button. */\n  @Input('aria-label') ariaLabel: string;\n\n  /** Default to \"button\" to prevents accidental form submits. */\n  @Input() type: 'submit' | 'button' | 'reset' = 'button';\n\n  /** Dialog close input. */\n  @Input('mat-dialog-close') dialogResult: any;\n\n  @Input('matDialogClose') _matDialogClose: any;\n\n  constructor(\n    /**\n     * Reference to the containing dialog.\n     * @deprecated `dialogRef` property to become private.\n     * @breaking-change 13.0.0\n     */\n    // The dialog title directive is always used in combination with a `MatDialogRef`.\n    // tslint:disable-next-line: lightweight-tokens\n    @Optional() public dialogRef: MatDialogRef<any>,\n    private _elementRef: ElementRef<HTMLElement>,\n    private _dialog: MatDialog,\n  ) {}\n\n  ngOnInit() {\n    if (!this.dialogRef) {\n      // When this directive is included in a dialog via TemplateRef (rather than being\n      // in a Component), the DialogRef isn't available via injection because embedded\n      // views cannot be given a custom injector. Instead, we look up the DialogRef by\n      // ID. This must occur in `onInit`, as the ID binding for the dialog container won't\n      // be resolved at constructor time.\n      this.dialogRef = getClosestDialog(this._elementRef, this._dialog.openDialogs)!;\n    }\n  }\n\n  ngOnChanges(changes: SimpleChanges) {\n    const proxiedChange = changes['_matDialogClose'] || changes['_matDialogCloseResult'];\n\n    if (proxiedChange) {\n      this.dialogResult = proxiedChange.currentValue;\n    }\n  }\n\n  _onButtonClick(event: MouseEvent) {\n    // Determinate the focus origin using the click event, because using the FocusMonitor will\n    // result in incorrect origins. Most of the time, close buttons will be auto focused in the\n    // dialog, and therefore clicking the button won't result in a focus change. This means that\n    // the FocusMonitor won't detect any origin change, and will always output `program`.\n    _closeDialogVia(\n      this.dialogRef,\n      event.screenX === 0 && event.screenY === 0 ? 'keyboard' : 'mouse',\n      this.dialogResult,\n    );\n  }\n}\n\n/**\n * Title of a dialog element. Stays fixed to the top of the dialog when scrolling.\n */\n@Directive({\n  selector: '[mat-dialog-title], [matDialogTitle]',\n  exportAs: 'matDialogTitle',\n  host: {\n    'class': 'mat-dialog-title',\n    '[id]': 'id',\n  },\n})\nexport class MatDialogTitle implements OnInit {\n  /** Unique id for the dialog title. If none is supplied, it will be auto-generated. */\n  @Input() id: string = `mat-dialog-title-${dialogElementUid++}`;\n\n  constructor(\n    // The dialog title directive is always used in combination with a `MatDialogRef`.\n    // tslint:disable-next-line: lightweight-tokens\n    @Optional() private _dialogRef: MatDialogRef<any>,\n    private _elementRef: ElementRef<HTMLElement>,\n    private _dialog: MatDialog,\n  ) {}\n\n  ngOnInit() {\n    if (!this._dialogRef) {\n      this._dialogRef = getClosestDialog(this._elementRef, this._dialog.openDialogs)!;\n    }\n\n    if (this._dialogRef) {\n      Promise.resolve().then(() => {\n        const container = this._dialogRef._containerInstance;\n\n        if (container && !container._ariaLabelledBy) {\n          container._ariaLabelledBy = this.id;\n        }\n      });\n    }\n  }\n}\n\n/**\n * Scrollable content container of a dialog.\n */\n@Directive({\n  selector: `[mat-dialog-content], mat-dialo