Feature/dialog

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 },
+ ],
+ }
+ }
+}