/** * @license * Copyright Endlessjs. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ import { ComponentFactoryResolver, Injector, TemplateRef, Type } from '@angular/core'; import { ElComponentPortal, ElOverlayRef, ElScrollStrategy, ElTemplatePortal } from '../cdk/overlay/mapping'; import { ElGlobalPositionStrategy, ElPositionBuilderService } from '../cdk/overlay/overlay-position'; import { ElOverlayService } from '../cdk/overlay/overlay-service'; import { ElDialogConfig } from './dialog-config'; import { ElDialogRef } from './dialog-ref'; import { ElDialogContainerComponent } from './dialog-container'; /** * The `ElDialogService` helps to open dialogs. * * @stacked-example(Showcase, dialog/dialog-showcase.component) * * A new dialog is opened by calling the `open` method with a component to be loaded and an optional configuration. * `open` method will return `ElDialogRef` that can be used for the further manipulations. * * ### Installation * * Import `ElDialogModule.forRoot()` to your app module. * ```ts * @NgModule({ * imports: [ * // ... * ElDialogModule.forRoot(config), * ], * }) * export class AppModule { } * ``` * * If you are using it in a lazy loaded module than you have to install it with `ElDialogModule.forChild()`: * ```ts * @NgModule({ * imports: [ * // ... * ElDialogModule.forChild(config), * ], * }) * export class LazyLoadedModule { } * ``` * * ### Usage * * ```ts * const dialogRef = this.dialogService.open(MyDialogComponent, { ... }); * ``` * * `ElDialogRef` gives capability access reference to the rendered dialog component, * destroy dialog and some other options described below. * * Also, you can inject `ElDialogRef` in dialog component. * * ```ts * this.dialogService.open(MyDialogComponent, { ... }); * * // my-dialog.component.ts * constructor(protected dialogRef: ElDialogRef) { * } * * close() { * this.dialogRef.close(); * } * ``` * * Instead of component you can create dialog from TemplateRef: * * @stacked-example(Template ref, dialog/dialog-template.component) * * The dialog may return result through `ElDialogRef`. Calling component can receive this result with `onClose` * stream of `ElDialogRef`. * * @stacked-example(Result, dialog/dialog-result.component) * * ### Configuration * * As we mentioned above, `open` method of the `ElDialogService` may receive optional configuration options. * Also, you can provide global dialogs configuration through `ElDialogModule.forRoot({ ... })`. * * This config may contain the following: * * `context` - both, template and component may receive data through `config.context` property. * For components, this data will be assigned through inputs. * For templates, you can access it inside template as $implicit. * * ```ts * this.dialogService.open(template, { context: 'pass data in template' }); * ``` * * ```html * * {{ some-additional-data }} * * ``` * * `hasBackdrop` - determines is service have to render backdrop under the dialog. * Default is true. * @stacked-example(Backdrop, dialog/dialog-has-backdrop.component) * * `closeOnBackdropClick` - close dialog on backdrop click if true. * Default is true. * @stacked-example(Backdrop click, dialog/dialog-backdrop-click.component) * * `closeOnEsc` - close dialog on escape button on the keyboard. * Default is true. * @stacked-example(Escape hit, dialog/dialog-esc.component) * * `hasScroll` - Disables scroll on content under dialog if true and does nothing otherwise. * Default is false. * Please, open dialogs in the separate window and try to scroll. * @stacked-example(Scroll, dialog/dialog-scroll.component) * * `autoFocus` - Focuses dialog automatically after open if true. It's useful to prevent misclicks on * trigger elements and opening multiple dialogs. * Default is true. * * As you can see, if you open dialog with auto focus dialog will focus first focusable element * or just blur previously focused automatically. * Otherwise, without auto focus, the focus will stay on the previously focused element. * Please, open dialogs in the separate window and try to click on the button without focus * and then hit space any times. Multiple same dialogs will be opened. * @stacked-example(Auto focus, dialog/dialog-auto-focus.component) * */ export declare class ElDialogService { protected document: any; protected globalConfig: any; protected positionBuilder: ElPositionBuilderService; protected overlay: ElOverlayService; protected injector: Injector; protected cfr: ComponentFactoryResolver; constructor(document: any, globalConfig: any, positionBuilder: ElPositionBuilderService, overlay: ElOverlayService, injector: Injector, cfr: ComponentFactoryResolver); /** * Opens new instance of the dialog, may receive optional config. * */ open(content: Type | TemplateRef, userConfig?: Partial | string>>): ElDialogRef; protected createOverlay(config: ElDialogConfig): ElOverlayRef; protected createPositionStrategy(): ElGlobalPositionStrategy; protected createScrollStrategy(hasScroll: boolean): ElScrollStrategy; protected createContainer(config: ElDialogConfig, overlayRef: ElOverlayRef): ElDialogContainerComponent; protected createContent(config: ElDialogConfig, content: Type | TemplateRef, container: ElDialogContainerComponent, dialogRef: ElDialogRef): void; protected createTemplatePortal(config: ElDialogConfig, content: TemplateRef, dialogRef: ElDialogRef): ElTemplatePortal; /** * We're creating portal with custom injector provided through config or using global injector. * This approach provides us capability inject `ElDialogRef` in dialog component. * */ protected createComponentPortal(config: ElDialogConfig, content: Type, dialogRef: ElDialogRef): ElComponentPortal; protected createInjector(config: ElDialogConfig): Injector; protected registerCloseListeners(config: ElDialogConfig, overlayRef: ElOverlayRef, dialogRef: ElDialogRef): void; }