| 1 | /**
|
| 2 | * @license
|
| 3 | * Copyright Akveo. All Rights Reserved.
|
| 4 | * Licensed under the MIT License. See License.txt in the project root for license information.
|
| 5 | */
|
| 6 | import { ComponentFactoryResolver, Injector, TemplateRef, Type } from '@angular/core';
|
| 7 | import { NbComponentPortal, NbOverlayRef, NbScrollStrategy, NbTemplatePortal } from '../cdk/overlay/mapping';
|
| 8 | import { NbGlobalPositionStrategy, NbPositionBuilderService } from '../cdk/overlay/overlay-position';
|
| 9 | import { NbOverlayService } from '../cdk/overlay/overlay-service';
|
| 10 | import { NbDialogConfig } from './dialog-config';
|
| 11 | import { NbDialogRef } from './dialog-ref';
|
| 12 | import { NbDialogContainerComponent } from './dialog-container';
|
| 13 | /**
|
| 14 | * The `NbDialogService` helps to open dialogs.
|
| 15 | *
|
| 16 | * @stacked-example(Showcase, dialog/dialog-showcase.component)
|
| 17 | *
|
| 18 | * A new dialog is opened by calling the `open` method with a component to be loaded and an optional configuration.
|
| 19 | * `open` method will return `NbDialogRef` that can be used for the further manipulations.
|
| 20 | *
|
| 21 | * ### Installation
|
| 22 | *
|
| 23 | * Import `NbDialogModule.forRoot()` to your app module.
|
| 24 | * ```ts
|
| 25 | * @NgModule({
|
| 26 | * imports: [
|
| 27 | * // ...
|
| 28 | * NbDialogModule.forRoot(config),
|
| 29 | * ],
|
| 30 | * })
|
| 31 | * export class AppModule { }
|
| 32 | * ```
|
| 33 | *
|
| 34 | * If you are using it in a lazy loaded module than you have to install it with `NbDialogModule.forChild()`:
|
| 35 | * ```ts
|
| 36 | * @NgModule({
|
| 37 | * imports: [
|
| 38 | * // ...
|
| 39 | * NbDialogModule.forChild(config),
|
| 40 | * ],
|
| 41 | * })
|
| 42 | * export class LazyLoadedModule { }
|
| 43 | * ```
|
| 44 | *
|
| 45 | * ### Usage
|
| 46 | *
|
| 47 | * ```ts
|
| 48 | * const dialogRef = this.dialogService.open(MyDialogComponent, { ... });
|
| 49 | * ```
|
| 50 | *
|
| 51 | * `NbDialogRef` gives capability access reference to the rendered dialog component,
|
| 52 | * destroy dialog and some other options described below.
|
| 53 | *
|
| 54 | * Also, you can inject `NbDialogRef` in dialog component.
|
| 55 | *
|
| 56 | * ```ts
|
| 57 | * this.dialogService.open(MyDialogComponent, { ... });
|
| 58 | *
|
| 59 | * // my-dialog.component.ts
|
| 60 | * constructor(protected dialogRef: NbDialogRef) {
|
| 61 | * }
|
| 62 | *
|
| 63 | * close() {
|
| 64 | * this.dialogRef.close();
|
| 65 | * }
|
| 66 | * ```
|
| 67 | *
|
| 68 | * Instead of component you can create dialog from TemplateRef:
|
| 69 | *
|
| 70 | * @stacked-example(Template ref, dialog/dialog-template.component)
|
| 71 | *
|
| 72 | * The dialog may return result through `NbDialogRef`. Calling component can receive this result with `onClose`
|
| 73 | * stream of `NbDialogRef`.
|
| 74 | *
|
| 75 | * @stacked-example(Result, dialog/dialog-result.component)
|
| 76 | *
|
| 77 | * ### Configuration
|
| 78 | *
|
| 79 | * As we mentioned above, `open` method of the `NbDialogService` may receive optional configuration options.
|
| 80 | * Also, you can provide global dialogs configuration through `NbDialogModule.forRoot({ ... })`.
|
| 81 | *
|
| 82 | * This config may contain the following:
|
| 83 | *
|
| 84 | * `context` - both, template and component may receive data through `config.context` property.
|
| 85 | * For components, this data will be assigned through inputs.
|
| 86 | * For templates, you can access it inside template as $implicit.
|
| 87 | *
|
| 88 | * ```ts
|
| 89 | * this.dialogService.open(template, { context: 'pass data in template' });
|
| 90 | * ```
|
| 91 | *
|
| 92 | * ```html
|
| 93 | * <ng-template let-some-additional-data>
|
| 94 | * {{ some-additional-data }}
|
| 95 | * <ng-template/>
|
| 96 | * ```
|
| 97 | *
|
| 98 | * `hasBackdrop` - determines is service have to render backdrop under the dialog.
|
| 99 | * Default is true.
|
| 100 | * @stacked-example(Backdrop, dialog/dialog-has-backdrop.component)
|
| 101 | *
|
| 102 | * `closeOnBackdropClick` - close dialog on backdrop click if true.
|
| 103 | * Default is true.
|
| 104 | * @stacked-example(Backdrop click, dialog/dialog-backdrop-click.component)
|
| 105 | *
|
| 106 | * `closeOnEsc` - close dialog on escape button on the keyboard.
|
| 107 | * Default is true.
|
| 108 | * @stacked-example(Escape hit, dialog/dialog-esc.component)
|
| 109 | *
|
| 110 | * `hasScroll` - Disables scroll on content under dialog if true and does nothing otherwise.
|
| 111 | * Default is false.
|
| 112 | * Please, open dialogs in the separate window and try to scroll.
|
| 113 | * @stacked-example(Scroll, dialog/dialog-scroll.component)
|
| 114 | *
|
| 115 | * `autoFocus` - Focuses dialog automatically after open if true. It's useful to prevent misclicks on
|
| 116 | * trigger elements and opening multiple dialogs.
|
| 117 | * Default is true.
|
| 118 | *
|
| 119 | * As you can see, if you open dialog with auto focus dialog will focus first focusable element
|
| 120 | * or just blur previously focused automatically.
|
| 121 | * Otherwise, without auto focus, the focus will stay on the previously focused element.
|
| 122 | * Please, open dialogs in the separate window and try to click on the button without focus
|
| 123 | * and then hit space any times. Multiple same dialogs will be opened.
|
| 124 | * @stacked-example(Auto focus, dialog/dialog-auto-focus.component)
|
| 125 | * */
|
| 126 | export declare class NbDialogService {
|
| 127 | protected document: any;
|
| 128 | protected globalConfig: any;
|
| 129 | protected positionBuilder: NbPositionBuilderService;
|
| 130 | protected overlay: NbOverlayService;
|
| 131 | protected injector: Injector;
|
| 132 | protected cfr: ComponentFactoryResolver;
|
| 133 | constructor(document: any, globalConfig: any, positionBuilder: NbPositionBuilderService, overlay: NbOverlayService, injector: Injector, cfr: ComponentFactoryResolver);
|
| 134 | /**
|
| 135 | * Opens new instance of the dialog, may receive optional config.
|
| 136 | * */
|
| 137 | open<T>(content: Type<T> | TemplateRef<T>, userConfig?: Partial<NbDialogConfig<Partial<T> | string>>): NbDialogRef<T>;
|
| 138 | protected createOverlay(config: NbDialogConfig): NbOverlayRef;
|
| 139 | protected createPositionStrategy(): NbGlobalPositionStrategy;
|
| 140 | protected createScrollStrategy(hasScroll: boolean): NbScrollStrategy;
|
| 141 | protected createContainer(config: NbDialogConfig, overlayRef: NbOverlayRef): NbDialogContainerComponent;
|
| 142 | protected createContent<T>(config: NbDialogConfig, content: Type<T> | TemplateRef<T>, container: NbDialogContainerComponent, dialogRef: NbDialogRef<T>): void;
|
| 143 | protected createTemplatePortal<T>(config: NbDialogConfig, content: TemplateRef<T>, dialogRef: NbDialogRef<T>): NbTemplatePortal;
|
| 144 | /**
|
| 145 | * We're creating portal with custom injector provided through config or using global injector.
|
| 146 | * This approach provides us capability inject `NbDialogRef` in dialog component.
|
| 147 | * */
|
| 148 | protected createComponentPortal<T>(config: NbDialogConfig, content: Type<T>, dialogRef: NbDialogRef<T>): NbComponentPortal;
|
| 149 | protected createInjector(config: NbDialogConfig): Injector;
|
| 150 | protected registerCloseListeners<T>(config: NbDialogConfig, overlayRef: NbOverlayRef, dialogRef: NbDialogRef<T>): void;
|
| 151 | }
|