Merge branch 'master' into feature/toastr

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,16 @@ export const structure = [
           'NbContextMenuDirective',
         ],
       },
+      {
+        type: 'tabs',
+        name: 'Dialog',
+        icon: 'dialog.svg',
+        source: [
+          'NbDialogService',
+          'NbDialogRef',
+          'NbDialogConfig',
+        ],
+      },
       {
         type: 'tabs',
         name: 'Toastr',

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 +1,6 @@
 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/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,
   ScrollStrategyOptions,
 } from '@angular/cdk/overlay';
 import { Platform } from '@angular/cdk/platform';
@@ -22,6 +31,10 @@ import { Platform } from '@angular/cdk/platform';
 export class NbPortalDirective extends CdkPortal {
 }
 
+@Directive({ selector: '[nbPortalOutlet]' })
+export class NbPortalOutletDirective extends CdkPortalOutlet {
+}
+
 @Injectable()
 export class NbOverlay extends Overlay {
 }
@@ -49,6 +62,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>;
@@ -58,6 +74,7 @@ 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];
 
@@ -76,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.

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

@@ -2,16 +2,16 @@ import { ModuleWithProviders, NgModule } from '@angular/core';
 
 import { NbSharedModule } from '../../shared/shared.module';
 import { NbCdkMappingModule } from './mapping';
-import { NbAdapterModule } from '../adapter/adapter.module';
 import { NbPositionBuilderService } from './overlay-position';
 import { NbOverlayContainerComponent } from './overlay-container';
 import { NbOverlayService } from './overlay';
+import { NbCdkAdapterModule } from '../adapter/adapter.module';
 
 
 @NgModule({
   imports: [
     NbCdkMappingModule,
-    NbAdapterModule,
+    NbCdkAdapterModule,
     NbSharedModule,
   ],
   declarations: [NbOverlayContainerComponent],

src/framework/theme/components/context-menu/_context-menu.component.theme.scss

@@ -37,24 +37,24 @@
       }
     }
 
-    &.bottom .arrow {
+    &.nb-overlay-bottom .arrow {
       top: calc(-#{$arrow-size} + 1px);
       left: calc(50% - #{$arrow-size});
     }
 
-    &.left .arrow {
+    &.nb-overlay-left .arrow {
       right: round(-$arrow-size - $arrow-size / 2 + 2px);
       top: calc(50% - #{$arrow-size / 2});
       transform: rotate(90deg);
     }
 
-    &.top .arrow {
+    &.nb-overlay-top .arrow {
       bottom: calc(-#{$arrow-size} + 1px);
       left: calc(50% - #{$arrow-size});
       transform: rotate(180deg);
     }
 
-    &.right .arrow {
+    &.nb-overlay-right .arrow {
       left: round(-$arrow-size - $arrow-size / 2 + 2px);
       top: calc(50% - #{$arrow-size / 2});
       transform: rotate(270deg);

src/framework/theme/components/context-menu/context-menu.directive.ts

@@ -95,7 +95,7 @@ export class NbContextMenuDirective implements AfterViewInit, OnDestroy {
    * Basic menu items, will be passed to the internal NbMenuComponent.
    * */
   @Input('nbContextMenu')
-  set _items(items: NbMenuItem[]) {
+  set setItems(items: NbMenuItem[]) {
     this.validateItems(items);
     this.items = items;
   };