index.d.ts 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421
  1. import { BasePortalOutlet } from '@angular/cdk/portal';
  2. import { CdkPortalOutlet } from '@angular/cdk/portal';
  3. import { ComponentFactoryResolver } from '@angular/core';
  4. import { ComponentPortal } from '@angular/cdk/portal';
  5. import { ComponentRef } from '@angular/core';
  6. import { ComponentType } from '@angular/cdk/overlay';
  7. import { Direction } from '@angular/cdk/bidi';
  8. import { DomPortal } from '@angular/cdk/portal';
  9. import { ElementRef } from '@angular/core';
  10. import { EmbeddedViewRef } from '@angular/core';
  11. import { FocusMonitor } from '@angular/cdk/a11y';
  12. import { FocusOrigin } from '@angular/cdk/a11y';
  13. import { FocusTrapFactory } from '@angular/cdk/a11y';
  14. import * as i0 from '@angular/core';
  15. import * as i2 from '@angular/cdk/overlay';
  16. import * as i3 from '@angular/cdk/portal';
  17. import * as i4 from '@angular/cdk/a11y';
  18. import { InjectionToken } from '@angular/core';
  19. import { Injector } from '@angular/core';
  20. import { InteractivityChecker } from '@angular/cdk/a11y';
  21. import { NgZone } from '@angular/core';
  22. import { Observable } from 'rxjs';
  23. import { OnDestroy } from '@angular/core';
  24. import { Overlay } from '@angular/cdk/overlay';
  25. import { OverlayContainer } from '@angular/cdk/overlay';
  26. import { OverlayRef } from '@angular/cdk/overlay';
  27. import { PositionStrategy } from '@angular/cdk/overlay';
  28. import { ScrollStrategy } from '@angular/cdk/overlay';
  29. import { StaticProvider } from '@angular/core';
  30. import { Subject } from 'rxjs';
  31. import { TemplatePortal } from '@angular/cdk/portal';
  32. import { TemplateRef } from '@angular/core';
  33. import { Type } from '@angular/core';
  34. import { ViewContainerRef } from '@angular/core';
  35. /** Options for where to set focus to automatically on dialog open */
  36. export declare type AutoFocusTarget = 'dialog' | 'first-tabbable' | 'first-heading';
  37. /**
  38. * Internal component that wraps user-provided dialog content.
  39. * @docs-private
  40. */
  41. export declare class CdkDialogContainer<C extends DialogConfig = DialogConfig> extends BasePortalOutlet implements OnDestroy {
  42. protected _elementRef: ElementRef;
  43. protected _focusTrapFactory: FocusTrapFactory;
  44. readonly _config: C;
  45. private _interactivityChecker;
  46. protected _ngZone: NgZone;
  47. private _overlayRef;
  48. private _focusMonitor?;
  49. protected _document: Document;
  50. /** The portal outlet inside of this container into which the dialog content will be loaded. */
  51. _portalOutlet: CdkPortalOutlet;
  52. /** The class that traps and manages focus within the dialog. */
  53. private _focusTrap;
  54. /** Element that was focused before the dialog was opened. Save this to restore upon close. */
  55. private _elementFocusedBeforeDialogWasOpened;
  56. /**
  57. * Type of interaction that led to the dialog being closed. This is used to determine
  58. * whether the focus style will be applied when returning focus to its original location
  59. * after the dialog is closed.
  60. */
  61. _closeInteractionType: FocusOrigin | null;
  62. /** ID of the element that should be considered as the dialog's label. */
  63. _ariaLabelledBy: string | null;
  64. constructor(_elementRef: ElementRef, _focusTrapFactory: FocusTrapFactory, _document: any, _config: C, _interactivityChecker: InteractivityChecker, _ngZone: NgZone, _overlayRef: OverlayRef, _focusMonitor?: FocusMonitor | undefined);
  65. protected _contentAttached(): void;
  66. /**
  67. * Can be used by child classes to customize the initial focus
  68. * capturing behavior (e.g. if it's tied to an animation).
  69. */
  70. protected _captureInitialFocus(): void;
  71. ngOnDestroy(): void;
  72. /**
  73. * Attach a ComponentPortal as content to this dialog container.
  74. * @param portal Portal to be attached as the dialog content.
  75. */
  76. attachComponentPortal<T>(portal: ComponentPortal<T>): ComponentRef<T>;
  77. /**
  78. * Attach a TemplatePortal as content to this dialog container.
  79. * @param portal Portal to be attached as the dialog content.
  80. */
  81. attachTemplatePortal<T>(portal: TemplatePortal<T>): EmbeddedViewRef<T>;
  82. /**
  83. * Attaches a DOM portal to the dialog container.
  84. * @param portal Portal to be attached.
  85. * @deprecated To be turned into a method.
  86. * @breaking-change 10.0.0
  87. */
  88. attachDomPortal: (portal: DomPortal) => void;
  89. /** Captures focus if it isn't already inside the dialog. */
  90. _recaptureFocus(): void;
  91. /**
  92. * Focuses the provided element. If the element is not focusable, it will add a tabIndex
  93. * attribute to forcefully focus it. The attribute is removed after focus is moved.
  94. * @param element The element to focus.
  95. */
  96. private _forceFocus;
  97. /**
  98. * Focuses the first element that matches the given selector within the focus trap.
  99. * @param selector The CSS selector for the element to set focus to.
  100. */
  101. private _focusByCssSelector;
  102. /**
  103. * Moves the focus inside the focus trap. When autoFocus is not set to 'dialog', if focus
  104. * cannot be moved then focus will go to the dialog container.
  105. */
  106. protected _trapFocus(): void;
  107. /** Restores focus to the element that was focused before the dialog opened. */
  108. private _restoreFocus;
  109. /** Focuses the dialog container. */
  110. private _focusDialogContainer;
  111. /** Returns whether focus is inside the dialog. */
  112. private _containsFocus;
  113. /** Sets up the focus trap. */
  114. private _initializeFocusTrap;
  115. /** Sets up the listener that handles clicks on the dialog backdrop. */
  116. private _handleBackdropClicks;
  117. static ɵfac: i0.ɵɵFactoryDeclaration<CdkDialogContainer<any>, [null, null, { optional: true; }, null, null, null, null, null]>;
  118. static ɵcmp: i0.ɵɵComponentDeclaration<CdkDialogContainer<any>, "cdk-dialog-container", never, {}, {}, never, never, false, never>;
  119. }
  120. /** Injection token that can be used to provide default options for the dialog module. */
  121. export declare const DEFAULT_DIALOG_CONFIG: InjectionToken<DialogConfig<unknown, unknown, BasePortalOutlet>>;
  122. export declare class Dialog implements OnDestroy {
  123. private _overlay;
  124. private _injector;
  125. private _defaultOptions;
  126. private _parentDialog;
  127. private _overlayContainer;
  128. private _openDialogsAtThisLevel;
  129. private readonly _afterAllClosedAtThisLevel;
  130. private readonly _afterOpenedAtThisLevel;
  131. private _ariaHiddenElements;
  132. private _scrollStrategy;
  133. /** Keeps track of the currently-open dialogs. */
  134. get openDialogs(): readonly DialogRef<any, any>[];
  135. /** Stream that emits when a dialog has been opened. */
  136. get afterOpened(): Subject<DialogRef<any, any>>;
  137. /**
  138. * Stream that emits when all open dialog have finished closing.
  139. * Will emit on subscribe if there are no open dialogs to begin with.
  140. */
  141. readonly afterAllClosed: Observable<void>;
  142. constructor(_overlay: Overlay, _injector: Injector, _defaultOptions: DialogConfig, _parentDialog: Dialog, _overlayContainer: OverlayContainer, scrollStrategy: any);
  143. /**
  144. * Opens a modal dialog containing the given component.
  145. * @param component Type of the component to load into the dialog.
  146. * @param config Extra configuration options.
  147. * @returns Reference to the newly-opened dialog.
  148. */
  149. open<R = unknown, D = unknown, C = unknown>(component: ComponentType<C>, config?: DialogConfig<D, DialogRef<R, C>>): DialogRef<R, C>;
  150. /**
  151. * Opens a modal dialog containing the given template.
  152. * @param template TemplateRef to instantiate as the dialog content.
  153. * @param config Extra configuration options.
  154. * @returns Reference to the newly-opened dialog.
  155. */
  156. open<R = unknown, D = unknown, C = unknown>(template: TemplateRef<C>, config?: DialogConfig<D, DialogRef<R, C>>): DialogRef<R, C>;
  157. open<R = unknown, D = unknown, C = unknown>(componentOrTemplateRef: ComponentType<C> | TemplateRef<C>, config?: DialogConfig<D, DialogRef<R, C>>): DialogRef<R, C>;
  158. /**
  159. * Closes all of the currently-open dialogs.
  160. */
  161. closeAll(): void;
  162. /**
  163. * Finds an open dialog by its id.
  164. * @param id ID to use when looking up the dialog.
  165. */
  166. getDialogById<R, C>(id: string): DialogRef<R, C> | undefined;
  167. ngOnDestroy(): void;
  168. /**
  169. * Creates an overlay config from a dialog config.
  170. * @param config The dialog configuration.
  171. * @returns The overlay configuration.
  172. */
  173. private _getOverlayConfig;
  174. /**
  175. * Attaches a dialog container to a dialog's already-created overlay.
  176. * @param overlay Reference to the dialog's underlying overlay.
  177. * @param config The dialog configuration.
  178. * @returns A promise resolving to a ComponentRef for the attached container.
  179. */
  180. private _attachContainer;
  181. /**
  182. * Attaches the user-provided component to the already-created dialog container.
  183. * @param componentOrTemplateRef The type of component being loaded into the dialog,
  184. * or a TemplateRef to instantiate as the content.
  185. * @param dialogRef Reference to the dialog being opened.
  186. * @param dialogContainer Component that is going to wrap the dialog content.
  187. * @param config Configuration used to open the dialog.
  188. */
  189. private _attachDialogContent;
  190. /**
  191. * Creates a custom injector to be used inside the dialog. This allows a component loaded inside
  192. * of a dialog to close itself and, optionally, to return a value.
  193. * @param config Config object that is used to construct the dialog.
  194. * @param dialogRef Reference to the dialog being opened.
  195. * @param dialogContainer Component that is going to wrap the dialog content.
  196. * @param fallbackInjector Injector to use as a fallback when a lookup fails in the custom
  197. * dialog injector, if the user didn't provide a custom one.
  198. * @returns The custom injector that can be used inside the dialog.
  199. */
  200. private _createInjector;
  201. /**
  202. * Removes a dialog from the array of open dialogs.
  203. * @param dialogRef Dialog to be removed.
  204. * @param emitEvent Whether to emit an event if this is the last dialog.
  205. */
  206. private _removeOpenDialog;
  207. /** Hides all of the content that isn't an overlay from assistive technology. */
  208. private _hideNonDialogContentFromAssistiveTechnology;
  209. private _getAfterAllClosed;
  210. static ɵfac: i0.ɵɵFactoryDeclaration<Dialog, [null, null, { optional: true; }, { optional: true; skipSelf: true; }, null, null]>;
  211. static ɵprov: i0.ɵɵInjectableDeclaration<Dialog>;
  212. }
  213. /** Injection token for the Dialog's Data. */
  214. export declare const DIALOG_DATA: InjectionToken<any>;
  215. /** Injection token for the Dialog's ScrollStrategy. */
  216. export declare const DIALOG_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
  217. /** @docs-private */
  218. export declare const DIALOG_SCROLL_STRATEGY_PROVIDER: {
  219. provide: InjectionToken<() => ScrollStrategy>;
  220. deps: (typeof Overlay)[];
  221. useFactory: typeof DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY;
  222. };
  223. /** @docs-private */
  224. export declare function DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay: Overlay): () => ScrollStrategy;
  225. /** Additional options that can be passed in when closing a dialog. */
  226. export declare interface DialogCloseOptions {
  227. /** Focus original to use when restoring focus. */
  228. focusOrigin?: FocusOrigin;
  229. }
  230. /** Configuration for opening a modal dialog. */
  231. export declare class DialogConfig<D = unknown, R = unknown, C extends BasePortalOutlet = BasePortalOutlet> {
  232. /**
  233. * Where the attached component should live in Angular's *logical* component tree.
  234. * This affects what is available for injection and the change detection order for the
  235. * component instantiated inside of the dialog. This does not affect where the dialog
  236. * content will be rendered.
  237. */
  238. viewContainerRef?: ViewContainerRef;
  239. /**
  240. * Injector used for the instantiation of the component to be attached. If provided,
  241. * takes precedence over the injector indirectly provided by `ViewContainerRef`.
  242. */
  243. injector?: Injector;
  244. /** ID for the dialog. If omitted, a unique one will be generated. */
  245. id?: string;
  246. /** The ARIA role of the dialog element. */
  247. role?: DialogRole;
  248. /** Optional CSS class or classes applied to the overlay panel. */
  249. panelClass?: string | string[];
  250. /** Whether the dialog has a backdrop. */
  251. hasBackdrop?: boolean;
  252. /** Optional CSS class or classes applied to the overlay backdrop. */
  253. backdropClass?: string | string[];
  254. /** Whether the dialog closes with the escape key or pointer events outside the panel element. */
  255. disableClose?: boolean;
  256. /** Width of the dialog. */
  257. width?: string;
  258. /** Height of the dialog. */
  259. height?: string;
  260. /** Min-width of the dialog. If a number is provided, assumes pixel units. */
  261. minWidth?: number | string;
  262. /** Min-height of the dialog. If a number is provided, assumes pixel units. */
  263. minHeight?: number | string;
  264. /** Max-width of the dialog. If a number is provided, assumes pixel units. Defaults to 80vw. */
  265. maxWidth?: number | string;
  266. /** Max-height of the dialog. If a number is provided, assumes pixel units. */
  267. maxHeight?: number | string;
  268. /** Strategy to use when positioning the dialog. Defaults to centering it on the page. */
  269. positionStrategy?: PositionStrategy;
  270. /** Data being injected into the child component. */
  271. data?: D | null;
  272. /** Layout direction for the dialog's content. */
  273. direction?: Direction;
  274. /** ID of the element that describes the dialog. */
  275. ariaDescribedBy?: string | null;
  276. /** ID of the element that labels the dialog. */
  277. ariaLabelledBy?: string | null;
  278. /** Dialog label applied via `aria-label` */
  279. ariaLabel?: string | null;
  280. /** Whether this is a modal dialog. Used to set the `aria-modal` attribute. */
  281. ariaModal?: boolean;
  282. /**
  283. * Where the dialog should focus on open.
  284. * @breaking-change 14.0.0 Remove boolean option from autoFocus. Use string or
  285. * AutoFocusTarget instead.
  286. */
  287. autoFocus?: AutoFocusTarget | string | boolean;
  288. /**
  289. * Whether the dialog should restore focus to the previously-focused element upon closing.
  290. * Has the following behavior based on the type that is passed in:
  291. * - `boolean` - when true, will return focus to the element that was focused before the dialog
  292. * was opened, otherwise won't restore focus at all.
  293. * - `string` - focus will be restored to the first element that matches the CSS selector.
  294. * - `HTMLElement` - focus will be restored to the specific element.
  295. */
  296. restoreFocus?: boolean | string | HTMLElement;
  297. /**
  298. * Scroll strategy to be used for the dialog. This determines how
  299. * the dialog responds to scrolling underneath the panel element.
  300. */
  301. scrollStrategy?: ScrollStrategy;
  302. /**
  303. * Whether the dialog should close when the user navigates backwards or forwards through browser
  304. * history. This does not apply to navigation via anchor element unless using URL-hash based
  305. * routing (`HashLocationStrategy` in the Angular router).
  306. */
  307. closeOnNavigation?: boolean;
  308. /**
  309. * Whether the dialog should close when the dialog service is destroyed. This is useful if
  310. * another service is wrapping the dialog and is managing the destruction instead.
  311. */
  312. closeOnDestroy?: boolean;
  313. /**
  314. * Whether the dialog should close when the underlying overlay is detached. This is useful if
  315. * another service is wrapping the dialog and is managing the destruction instead. E.g. an
  316. * external detachment can happen as a result of a scroll strategy triggering it or when the
  317. * browser location changes.
  318. */
  319. closeOnOverlayDetachments?: boolean;
  320. /** Alternate `ComponentFactoryResolver` to use when resolving the associated component. */
  321. componentFactoryResolver?: ComponentFactoryResolver;
  322. /**
  323. * Providers that will be exposed to the contents of the dialog. Can also
  324. * be provided as a function in order to generate the providers lazily.
  325. */
  326. providers?: StaticProvider[] | ((dialogRef: R, config: DialogConfig<D, R, C>, container: C) => StaticProvider[]);
  327. /**
  328. * Component into which the dialog content will be rendered. Defaults to `CdkDialogContainer`.
  329. * A configuration object can be passed in to customize the providers that will be exposed
  330. * to the dialog container.
  331. */
  332. container?: Type<C> | {
  333. type: Type<C>;
  334. providers: (config: DialogConfig<D, R, C>) => StaticProvider[];
  335. };
  336. /**
  337. * Context that will be passed to template-based dialogs.
  338. * A function can be passed in to resolve the context lazily.
  339. */
  340. templateContext?: Record<string, any> | (() => Record<string, any>);
  341. }
  342. export declare class DialogModule {
  343. static ɵfac: i0.ɵɵFactoryDeclaration<DialogModule, never>;
  344. static ɵmod: i0.ɵɵNgModuleDeclaration<DialogModule, [typeof i1.CdkDialogContainer], [typeof i2.OverlayModule, typeof i3.PortalModule, typeof i4.A11yModule], [typeof i3.PortalModule, typeof i1.CdkDialogContainer]>;
  345. static ɵinj: i0.ɵɵInjectorDeclaration<DialogModule>;
  346. }
  347. /**
  348. * Reference to a dialog opened via the Dialog service.
  349. */
  350. export declare class DialogRef<R = unknown, C = unknown> {
  351. readonly overlayRef: OverlayRef;
  352. readonly config: DialogConfig<any, DialogRef<R, C>, BasePortalOutlet>;
  353. /**
  354. * Instance of component opened into the dialog. Will be
  355. * null when the dialog is opened using a `TemplateRef`.
  356. */
  357. readonly componentInstance: C | null;
  358. /** Instance of the container that is rendering out the dialog content. */
  359. readonly containerInstance: BasePortalOutlet & {
  360. _closeInteractionType?: FocusOrigin;
  361. };
  362. /** Whether the user is allowed to close the dialog. */
  363. disableClose: boolean | undefined;
  364. /** Emits when the dialog has been closed. */
  365. readonly closed: Observable<R | undefined>;
  366. /** Emits when the backdrop of the dialog is clicked. */
  367. readonly backdropClick: Observable<MouseEvent>;
  368. /** Emits when on keyboard events within the dialog. */
  369. readonly keydownEvents: Observable<KeyboardEvent>;
  370. /** Emits on pointer events that happen outside of the dialog. */
  371. readonly outsidePointerEvents: Observable<MouseEvent>;
  372. /** Unique ID for the dialog. */
  373. readonly id: string;
  374. /** Subscription to external detachments of the dialog. */
  375. private _detachSubscription;
  376. constructor(overlayRef: OverlayRef, config: DialogConfig<any, DialogRef<R, C>, BasePortalOutlet>);
  377. /**
  378. * Close the dialog.
  379. * @param result Optional result to return to the dialog opener.
  380. * @param options Additional options to customize the closing behavior.
  381. */
  382. close(result?: R, options?: DialogCloseOptions): void;
  383. /** Updates the position of the dialog based on the current position strategy. */
  384. updatePosition(): this;
  385. /**
  386. * Updates the dialog's width and height.
  387. * @param width New width of the dialog.
  388. * @param height New height of the dialog.
  389. */
  390. updateSize(width?: string | number, height?: string | number): this;
  391. /** Add a CSS class or an array of classes to the overlay pane. */
  392. addPanelClass(classes: string | string[]): this;
  393. /** Remove a CSS class or an array of classes from the overlay pane. */
  394. removePanelClass(classes: string | string[]): this;
  395. }
  396. /** Valid ARIA roles for a dialog. */
  397. export declare type DialogRole = 'dialog' | 'alertdialog';
  398. declare namespace i1 {
  399. export {
  400. throwDialogContentAlreadyAttachedError,
  401. CdkDialogContainer
  402. }
  403. }
  404. export declare function throwDialogContentAlreadyAttachedError(): void;
  405. export { }