Merge branch 'master' into feature/dialog

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": [

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', () => {

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/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/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,15 +2,15 @@ import { ModuleWithProviders, NgModule } from '@angular/core';
 
 import { NbSharedModule } from '../../shared/shared.module';
 import { NbCdkMappingModule } from './mapping';
-import { NbAdapterModule } from '../adapter/adapter.module';
+import { NbCdkAdapterModule } from '../adapter/adapter.module';
 import { NbPositionBuilderService } from './overlay-position';
 import { NbOverlayContainerComponent } from './overlay-container';
 
 
 @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;
   };

src/framework/theme/components/popover/_popover.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/styles/themes/_default.scss

@@ -635,6 +635,8 @@ $theme: (
   calendar-month-cell-large-height: 2.375rem,
   calendar-year-cell-large-width: calendar-month-cell-width,
   calendar-year-cell-large-height: calendar-month-cell-height,
+
+  overlay-backdrop-bg: rgba(0, 0, 0, 0.288),
 );
 
 // register the theme

src/playground/playground.module.ts

@@ -244,7 +244,7 @@ export const NB_MODULES = [
   NbCalendarRangeModule,
   NbCalendarKitModule,
   NbOverlayModule.forRoot(),
-  NbDialogModule.forRoot({ autoFocus: false }),
+  NbDialogModule.forRoot(),
 ];
 
 export const NB_EXAMPLE_COMPONENTS = [

src/playground/popover/popover-custom-component.component.ts

@@ -10,9 +10,11 @@ import { NbDynamicToAddComponent } from '../shared/dynamic.component';
 @Component({
   selector: 'nb-popover-custom-component',
   templateUrl: './popover-custom-component.component.html',
-  styles: [`nb-layout-column {
-    height: 50vw;
-  } `],
+  styles: [`
+    nb-layout-column {
+      height: 50vw;
+    }
+  `],
 })
 export class NbPopoverCustomComponentComponent {
 

src/playground/popover/popover-showcase.component.ts

@@ -10,10 +10,12 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nb-popover-showcase',
   templateUrl: './popover-showcase.component.html',
-  styles: [`:host {
-    display: block;
-    margin: 5rem;
-  } `],
+  styles: [`
+    :host {
+      display: block;
+      margin: 5rem;
+    }
+  `],
 })
 export class NbPopoverShowcaseComponent {
 }