Merge branch 'master' into feature/select

docs/articles/install-into-existing.md

@@ -54,7 +54,7 @@ Same way you can enable Auth Module (more details under [Auth Module Concepts &
 ## Install Styles
 Now, let's import Nebular styles
 
-Include Bootstrap and default Nebular theme CSS files into your `.angular-cli.json` file:
+Include Bootstrap and default Nebular theme CSS files into your `angular.json` file (or `.angular-cli.json` for Angular < 6.0):
 
 ```scss
 "styles": [

docs/structure.ts

@@ -302,6 +302,26 @@ export const structure = [
           'NbContextMenuDirective',
         ],
       },
+      {
+        type: 'tabs',
+        name: 'Dialog',
+        icon: 'dialog.svg',
+        source: [
+          'NbDialogService',
+          'NbDialogRef',
+          'NbDialogConfig',
+        ],
+      },
+      {
+        type: 'tabs',
+        name: 'Toastr',
+        icon: 'toastr.svg',
+        source: [
+          'NbToastrService',
+          'NbToastComponent',
+          'NbToastrConfig',
+        ],
+      },
       {
         type: 'tabs',
         name: 'Select',

e2e/popover.e2e-spec.ts

@@ -49,28 +49,28 @@ describe('nb-popover', () => {
     element(placementRight).click();
     const container = element(popover);
     expect(container.isPresent()).toBeTruthy();
-    expect(container.getAttribute('class')).toEqual('right');
+    expect(container.getAttribute('class')).toEqual('nb-overlay-right');
   });
 
   it('render container in the bottom', () => {
     element(placementBottom).click();
     const container = element(popover);
     expect(container.isPresent()).toBeTruthy();
-    expect(container.getAttribute('class')).toEqual('bottom');
+    expect(container.getAttribute('class')).toEqual('nb-overlay-bottom');
   });
 
   it('render container in the top', () => {
     element(placementTop).click();
     const container = element(popover);
     expect(container.isPresent()).toBeTruthy();
-    expect(container.getAttribute('class')).toEqual('top');
+    expect(container.getAttribute('class')).toEqual('nb-overlay-top');
   });
 
   it('render container in the left', () => {
     element(placementLeft).click();
     const container = element(popover);
     expect(container.isPresent()).toBeTruthy();
-    expect(container.getAttribute('class')).toEqual('left');
+    expect(container.getAttribute('class')).toEqual('nb-overlay-left');
   });
 
   it('open popover by host click', () => {

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

@@ -18,8 +18,9 @@ const ROLLUP_GLOBALS = {
   '@angular/common/testing': 'ng.common.testing',
   '@angular/common/http/testing': 'ng.common.http.testing',
   '@angular/cdk/overlay': 'ng.cdk.overlay',
-  '@angular/cdk/portal': 'ng.cdk.overlay',
-  '@angular/cdk/platform': '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/adapter/adapter.module.ts

@@ -14,5 +14,5 @@ import { NbViewportRulerAdapter } from './viewport-ruler-adapter';
     { provide: ScrollDispatcher, useClass: NbScrollDispatcherAdapter },
   ],
 })
-export class NbAdapterModule {
+export class NbCdkAdapterModule {
 }

src/framework/theme/components/cdk/adapter/scroll-dispatcher-adapter.ts

@@ -7,8 +7,8 @@ import { NbLayoutScrollService } from '../../../services/scroll.service';
 
 @Injectable()
 export class NbScrollDispatcherAdapter extends ScrollDispatcher {
-  constructor(_ngZone: NgZone, _platform: NbPlatform, protected scrollService: NbLayoutScrollService) {
-    super(_ngZone, _platform);
+  constructor(ngZone: NgZone, platform: NbPlatform, protected scrollService: NbLayoutScrollService) {
+    super(ngZone, platform);
   }
 
   scrolled(auditTimeInMs?: number): Observable<CdkScrollable | void> {

src/framework/theme/components/cdk/adapter/viewport-ruler-adapter.ts

@@ -9,14 +9,18 @@ import { NbLayoutScrollService, NbScrollPosition } from '../../../services/scrol
 
 @Injectable()
 export class NbViewportRulerAdapter extends ViewportRuler {
-  constructor(_platform: NbPlatform, ngZone: NgZone,
+  constructor(platform: NbPlatform, ngZone: NgZone,
               protected ruler: NbLayoutRulerService,
               protected scroll: NbLayoutScrollService) {
-    super(_platform, ngZone);
+    super(platform, ngZone);
   }
 
   getViewportSize(): Readonly<{ width: number; height: number; }> {
     let res;
+    /*
+    * getDimensions call is really synchronous operation.
+    * And we have to conform with the interface of the original service.
+    * */
     this.ruler.getDimensions()
       .pipe(map(dimensions => ({ width: dimensions.clientWidth, height: dimensions.clientHeight })))
       .subscribe(rect => res = rect);
@@ -25,6 +29,10 @@ export class NbViewportRulerAdapter extends ViewportRuler {
 
   getViewportScrollPosition(): { left: number; top: number } {
     let res;
+    /*
+    * getPosition call is really synchronous operation.
+    * And we have to conform with the interface of the original service.
+    * */
     this.scroll.getPosition()
       .pipe(map((position: NbScrollPosition) => ({ top: position.y, left: position.x })))
       .subscribe(position => res = position);

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/_overlay.theme.scss

@@ -1,5 +1,7 @@
+@import '~@angular/cdk/overlay-prebuilt.css';
+
 @mixin nb-overlay-theme {
   .overlay-backdrop {
-    background: rgba(0, 0, 0, 0.288);
+    background: nb-theme(overlay-backdrop-bg);
   }
 }

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

@@ -4,3 +4,4 @@ export * from './overlay-position';
 export * from './overlay-container';
 export * from './overlay-trigger';
 export * from './mapping';
+export * from './position-helper';

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

@@ -1,18 +1,28 @@
 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,
   ConnectedPosition,
   ConnectionPositionPair,
   FlexibleConnectedPositionStrategy,
-  GlobalPositionStrategy,
   Overlay,
+  OverlayConfig,
   OverlayContainer,
   OverlayModule,
   OverlayPositionBuilder,
   OverlayRef,
-  PositionStrategy, ScrollStrategy,
+  PositionStrategy,
+  ScrollStrategy,
+  ScrollStrategyOptions,
 } from '@angular/cdk/overlay';
 import { Platform } from '@angular/cdk/platform';
 
@@ -21,8 +31,12 @@ 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 {
+export class NbOverlay extends Overlay {
 }
 
 @Injectable()
@@ -48,20 +62,24 @@ 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>;
-export type NbGlobalPositionStrategy = GlobalPositionStrategy;
 export type NbPositionStrategy = PositionStrategy;
 export type NbConnectedPosition = ConnectedPosition;
 export type NbConnectedOverlayPositionChange = ConnectedOverlayPositionChange;
 export type NbConnectionPositionPair = ConnectionPositionPair;
+export type NbOverlayConfig = OverlayConfig;
+export type NbScrollStrategyOptions = ScrollStrategyOptions;
 export type NbScrollStrategy = ScrollStrategy;
 
 const CDK_MODULES = [OverlayModule, PortalModule];
 
 const CDK_PROVIDERS = [
-  NbOverlayService,
+  NbOverlay,
   NbPlatform,
   NbOverlayPositionBuilder,
 ];
@@ -75,8 +93,9 @@ const CDK_PROVIDERS = [
   exports: [
     ...CDK_MODULES,
     NbPortalDirective,
+    NbPortalOutletDirective,
   ],
-  declarations: [NbPortalDirective],
+  declarations: [NbPortalDirective, NbPortalOutletDirective],
   providers: [...CDK_PROVIDERS],
 })
 export class NbCdkMappingModule {

src/framework/theme/components/cdk/overlay/overlay-container.ts

@@ -6,22 +6,22 @@ import { NbPosition } from './overlay-position';
 export abstract class NbPositionedContainer {
   @Input() position: NbPosition;
 
-  @HostBinding('class.top')
+  @HostBinding('class.nb-overlay-top')
   get top(): boolean {
     return this.position === NbPosition.TOP
   }
 
-  @HostBinding('class.right')
+  @HostBinding('class.nb-overlay-right')
   get right(): boolean {
     return this.position === NbPosition.RIGHT
   }
 
-  @HostBinding('class.bottom')
+  @HostBinding('class.nb-overlay-bottom')
   get bottom(): boolean {
     return this.position === NbPosition.BOTTOM
   }
 
-  @HostBinding('class.left')
+  @HostBinding('class.nb-overlay-left')
   get left(): boolean {
     return this.position === NbPosition.LEFT
   }
@@ -54,7 +54,7 @@ export class NbOverlayContainerComponent {
     if (this.isComponent) {
       Object.assign(el._componentRef.instance, this.context);
       /**
-       * Change detection have to performed here, because another way applied context
+       * Change detection has to be performed here, because another way applied context
        * will be rendered on the next change detection loop and
        * we'll have incorrect positioning. Because rendered component may change its size
        * based on the context.