feat(theme): add new Dialog component (#688)

Closes #666, Closes #665

docs/structure.ts

@@ -302,6 +302,16 @@ export const structure = [
           'NbContextMenuDirective',
         ],
       },
+      {
+        type: 'tabs',
+        name: 'Dialog',
+        icon: 'dialog.svg',
+        source: [
+          'NbDialogService',
+          'NbDialogRef',
+          'NbDialogConfig',
+        ],
+      },
       {
         type: 'group',
         name: 'Extra',

scripts/gulp/tasks/bundle/rollup-config.ts

@@ -20,6 +20,7 @@ const ROLLUP_GLOBALS = {
   '@angular/cdk/overlay': 'ng.cdk.overlay',
   '@angular/cdk/platform': 'ng.cdk.platform',
   '@angular/cdk/portal': 'ng.cdk.portal',
+  '@angular/cdk/a11y': 'ng.cdk.a11y',
 
 
   // RxJS dependencies

src/framework/theme/components/cdk/a11y/a11y.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+
+import { NbFocusTrapFactoryService } from './focus-trap';
+
+
+@NgModule({
+  providers: [
+    NbFocusTrapFactoryService,
+  ],
+})
+export class NbA11yModule {
+}

src/framework/theme/components/cdk/a11y/focus-trap.ts

@@ -0,0 +1,49 @@
+import { Inject, Injectable, NgZone } from '@angular/core';
+import { FocusTrap, FocusTrapFactory, InteractivityChecker } from '@angular/cdk/a11y';
+
+import { NB_DOCUMENT } from '../../../theme.options';
+
+
+/**
+ * Overrides angular cdk focus trap to keep restore functionality inside trap.
+ * */
+export class NbFocusTrap extends FocusTrap {
+  protected previouslyFocusedElement: HTMLElement;
+
+  constructor(
+    protected element: HTMLElement,
+    protected checker: InteractivityChecker,
+    protected ngZone: NgZone,
+    protected document: Document,
+    deferAnchors) {
+    super(element, checker, ngZone, document, deferAnchors);
+    this.savePreviouslyFocusedElement();
+  }
+
+  restoreFocus() {
+    this.previouslyFocusedElement.focus();
+    this.destroy();
+  }
+
+  blurPreviouslyFocusedElement() {
+    this.previouslyFocusedElement.blur();
+  }
+
+  protected savePreviouslyFocusedElement() {
+    this.previouslyFocusedElement = this.document.activeElement as HTMLElement;
+  }
+}
+
+@Injectable()
+export class NbFocusTrapFactoryService extends FocusTrapFactory {
+  constructor(
+    protected checker: InteractivityChecker,
+    protected ngZone: NgZone,
+    @Inject(NB_DOCUMENT) private document) {
+    super(checker, ngZone, document);
+  }
+
+  create(element: HTMLElement, deferCaptureElements?: boolean): NbFocusTrap {
+    return new NbFocusTrap(element, this.checker, this.ngZone, this.document, deferCaptureElements);
+  }
+}

src/framework/theme/components/cdk/index.ts

@@ -1,2 +1,6 @@
-export * from './overlay/mapping';
 export * from './overlay';
+export * from './a11y/a11y.module';
+export * from './a11y/focus-trap';
+export * from './adapter/overlay-container-adapter';
+export * from './adapter/scroll-dispatcher-adapter';
+export * from './adapter/viewport-ruler-adapter';

src/framework/theme/components/cdk/overlay/mapping.ts

@@ -1,5 +1,13 @@
 import { Directive, Injectable, NgModule, TemplateRef, ViewContainerRef } from '@angular/core';
-import { CdkPortal, ComponentPortal, Portal, PortalModule, TemplatePortal } from '@angular/cdk/portal';
+import {
+  CdkPortal,
+  CdkPortalOutlet,
+  ComponentPortal,
+  Portal,
+  PortalInjector,
+  PortalModule,
+  TemplatePortal,
+} from '@angular/cdk/portal';
 import {
   ComponentType,
   ConnectedOverlayPositionChange,
@@ -13,6 +21,7 @@ import {
   OverlayPositionBuilder,
   OverlayRef,
   PositionStrategy,
+  ScrollStrategy,
 } from '@angular/cdk/overlay';
 import { Platform } from '@angular/cdk/platform';
 
@@ -21,6 +30,10 @@ import { Platform } from '@angular/cdk/platform';
 export class NbPortalDirective extends CdkPortal {
 }
 
+@Directive({ selector: '[nbPortalOutlet]' })
+export class NbPortalOutletDirective extends CdkPortalOutlet {
+}
+
 @Injectable()
 export class NbOverlayService extends Overlay {
 }
@@ -48,6 +61,9 @@ export class NbOverlayContainer extends OverlayContainer {
 export class NbFlexibleConnectedPositionStrategy extends FlexibleConnectedPositionStrategy {
 }
 
+export class NbPortalInjector extends PortalInjector {
+}
+
 export type NbPortal<T = any> = Portal<T>;
 export type NbOverlayRef = OverlayRef;
 export type NbComponentType<T = any> = ComponentType<T>;
@@ -56,6 +72,7 @@ export type NbPositionStrategy = PositionStrategy;
 export type NbConnectedPosition = ConnectedPosition;
 export type NbConnectedOverlayPositionChange = ConnectedOverlayPositionChange;
 export type NbConnectionPositionPair = ConnectionPositionPair;
+export type NbScrollStrategy = ScrollStrategy;
 
 const CDK_MODULES = [OverlayModule, PortalModule];
 
@@ -74,8 +91,9 @@ const CDK_PROVIDERS = [
   exports: [
     ...CDK_MODULES,
     NbPortalDirective,
+    NbPortalOutletDirective,
   ],
-  declarations: [NbPortalDirective],
+  declarations: [NbPortalDirective, NbPortalOutletDirective],
   providers: [...CDK_PROVIDERS],
 })
 export class NbCdkMappingModule {

src/framework/theme/components/dialog/dialog-config.ts

@@ -0,0 +1,59 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { InjectionToken, ViewContainerRef } from '@angular/core';
+
+
+export const NB_DIALOG_CONFIG = new InjectionToken<NbDialogConfig>('Default dialog options');
+
+/**
+ * Describes all available options that may be passed to the NbDialogService.
+ * */
+export class NbDialogConfig<D = any> {
+  /**
+   * If true than overlay will render backdrop under a dialog.
+   * */
+  hasBackdrop: boolean = true;
+
+  /**
+   * Class that'll be assigned to the backdrop element.
+   * */
+  backdropClass: string = 'overlay-backdrop';
+
+  /**
+   * If true then mouse clicks by backdrop will close a dialog.
+   * */
+  closeOnBackdropClick: boolean = true;
+
+  /**
+   * If true then escape press will close a dialog.
+   * */
+  closeOnEsc: boolean = true;
+
+  /**
+   * Disables scroll on content under dialog if true and does nothing otherwise.
+   * */
+  hasScroll: boolean = false;
+
+  /**
+   * Focuses dialog automatically after open if true.
+   * */
+  autoFocus: boolean = true;
+
+  /**
+   * Where the attached component should live in Angular's *logical* component tree.
+   * This affects what is available for injection and the change detection order for the
+   * component instantiated inside of the dialog. This does not affect where the dialog
+   * content will be rendered.
+   */
+  viewContainerRef: ViewContainerRef;
+
+  context: D;
+
+  constructor(config: Partial<NbDialogConfig>) {
+    Object.assign(this, config);
+  }
+}

src/framework/theme/components/dialog/dialog-container.ts

@@ -0,0 +1,59 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { Component, ComponentRef, ElementRef, EmbeddedViewRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
+
+import {
+  NbComponentPortal,
+  NbFocusTrap,
+  NbFocusTrapFactoryService,
+  NbPortalOutletDirective,
+  NbTemplatePortal,
+} from '../cdk';
+import { NbDialogConfig } from './dialog-config';
+
+
+/**
+ * Container component for each dialog.
+ * All the dialogs will be attached to it.
+ * // TODO add animations
+ * */
+@Component({
+  selector: 'nb-dialog-container',
+  template: '<ng-template nbPortalOutlet></ng-template>',
+})
+export class NbDialogContainerComponent implements OnInit, OnDestroy {
+  @ViewChild(NbPortalOutletDirective) portalOutlet: NbPortalOutletDirective;
+
+  protected focusTrap: NbFocusTrap;
+
+  constructor(protected config: NbDialogConfig,
+              protected elementRef: ElementRef,
+              protected focusTrapFactory: NbFocusTrapFactoryService) {
+  }
+
+  ngOnInit() {
+    if (this.config.autoFocus) {
+      this.focusTrap = this.focusTrapFactory.create(this.elementRef.nativeElement);
+      this.focusTrap.blurPreviouslyFocusedElement();
+      this.focusTrap.focusInitialElement();
+    }
+  }
+
+  ngOnDestroy() {
+    if (this.config.autoFocus && this.focusTrap) {
+      this.focusTrap.restoreFocus();
+    }
+  }
+
+  attachComponentPortal<T>(portal: NbComponentPortal<T>): ComponentRef<T> {
+    return this.portalOutlet.attachComponentPortal(portal);
+  }
+
+  attachTemplatePortal<C>(portal: NbTemplatePortal<C>): EmbeddedViewRef<C> {
+    return this.portalOutlet.attachTemplatePortal(portal);
+  }
+}

src/framework/theme/components/dialog/dialog-ref.ts

@@ -0,0 +1,43 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { ComponentRef } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
+
+import { NbOverlayRef } from '../cdk';
+
+
+/**
+ * The `NbDialogRef` helps to manipulate dialog after it was created.
+ * The dialog can be dismissed by using `close` method of the dialogRef.
+ * You can access rendered component as `content` property of the dialogRef.
+ * `onBackdropClick` streams click events on the backdrop of the dialog.
+ * */
+export class NbDialogRef<T> {
+
+  componentRef: ComponentRef<T>;
+
+  /**
+   * Stream of backdrop click events.
+   * */
+  readonly onBackdropClick: Observable<MouseEvent>;
+  protected onClose$: Subject<any> = new Subject();
+  readonly onClose: Observable<any> = this.onClose$.asObservable();
+
+  constructor(protected overlayRef: NbOverlayRef) {
+    this.onBackdropClick = this.overlayRef.backdropClick();
+  }
+
+  /**
+   * Hides dialog.
+   * */
+  close(res?: any) {
+    this.overlayRef.detach();
+    this.overlayRef.dispose();
+    this.onClose$.next(res);
+    this.onClose$.complete();
+  }
+}

src/framework/theme/components/dialog/dialog.module.ts

@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { ModuleWithProviders, NgModule } from '@angular/core';
+
+import { NbSharedModule } from '../shared/shared.module';
+import { NbA11yModule, NbOverlayModule } from '../cdk';
+import { NbDialogService } from './dialog.service';
+import { NbDialogContainerComponent } from './dialog-container';
+import { NB_DIALOG_CONFIG, NbDialogConfig } from './dialog-config';
+
+
+@NgModule({
+  imports: [NbSharedModule, NbA11yModule, NbOverlayModule],
+  declarations: [NbDialogContainerComponent],
+  entryComponents: [NbDialogContainerComponent],
+})
+export class NbDialogModule {
+  static forRoot(dialogConfig: Partial<NbDialogConfig> = {}): ModuleWithProviders {
+    return {
+      ngModule: NbDialogModule,
+      providers: [
+        NbDialogService,
+        { provide: NB_DIALOG_CONFIG, useValue: dialogConfig },
+      ],
+    }
+  }
+}