Refactor/overlay components

e2e/context-menu.e2e-spec.ts

@@ -1,7 +1,7 @@
 import { browser, by, element } from 'protractor';
 
 const withContextMenu = by.css('nb-card:nth-child(1) nb-user:nth-child(1)');
-const popover = by.css('nb-layout > nb-popover');
+const popover = by.css('nb-layout nb-context-menu');
 
 describe('nb-context-menu', () => {
 

e2e/popover.e2e-spec.ts

@@ -11,7 +11,7 @@ const placementLeft = by.css('nb-card:nth-child(2) button:nth-child(4)');
 const modeClick = by.css('nb-card:nth-child(4) button:nth-child(1)');
 const modeHover = by.css('nb-card:nth-child(4) button:nth-child(2)');
 const modeHint = by.css('nb-card:nth-child(4) button:nth-child(3)');
-const popover = by.css('nb-layout > nb-popover');
+const popover = by.css('nb-layout nb-popover');
 
 describe('nb-popover', () => {
 
@@ -35,7 +35,7 @@ describe('nb-popover', () => {
     element(contentString).click();
     const containerContent = element(popover).element(by.css('div'));
     expect(containerContent.isPresent()).toBeTruthy();
-    expect(containerContent.getAttribute('class')).toEqual('primitive-popover');
+    expect(containerContent.getAttribute('class')).toEqual('primitive-overlay');
     expect(containerContent.getText()).toEqual('Hi, I\'m popover!');
   });
 

package.json

@@ -110,6 +110,7 @@
     "@angular/cli": "^6.0.0",
     "@angular/compiler-cli": "6.0.0",
     "@angular/language-service": "6.0.0",
+    "@angular/cdk": "6.0.0",
     "@types/gulp": "3.8.36",
     "@types/highlight.js": "9.12.2",
     "@types/jasmine": "2.8.3",

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

@@ -17,6 +17,9 @@ const ROLLUP_GLOBALS = {
   '@angular/core/testing': 'ng.core.testing',
   '@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',
 
 
   // RxJS dependencies

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

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { OverlayContainer, ScrollDispatcher } from '@angular/cdk/overlay';
+
+import { NbOverlayContainerAdapter } from './overlay-container-adapter';
+import { NbScrollDispatcherAdapter } from './scroll-dispatcher-adapter';
+import { NbViewportRulerAdapter } from './viewport-ruler-adapter';
+
+
+@NgModule({
+  providers: [
+    NbViewportRulerAdapter,
+    NbOverlayContainerAdapter,
+    { provide: OverlayContainer, useExisting: NbOverlayContainerAdapter },
+    { provide: ScrollDispatcher, useClass: NbScrollDispatcherAdapter },
+  ],
+})
+export class NbAdapterModule {
+}

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

@@ -0,0 +1,33 @@
+import { Injectable } from '@angular/core';
+
+import { NbOverlayContainer } from '../overlay/mapping';
+
+
+/**
+ * Provides nb-layout as overlay container.
+ * Container has to be cleared when layout destroys.
+ * Another way previous version of the container will be used
+ * but it isn't inserted in DOM and exists in memory only.
+ * This case important only if you switch between multiple layouts.
+ * */
+@Injectable()
+export class NbOverlayContainerAdapter extends NbOverlayContainer {
+  protected container: HTMLElement;
+
+  setContainer(container: HTMLElement) {
+    this.container = container;
+  }
+
+  clearContainer() {
+    this.container = null;
+    this._containerElement = null;
+  }
+
+  protected _createContainer(): void {
+    const container = this._document.createElement('div');
+
+    container.classList.add('cdk-overlay-container');
+    this.container.appendChild(container);
+    this._containerElement = container;
+  }
+}

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

@@ -0,0 +1,18 @@
+import { Injectable, NgZone } from '@angular/core';
+import { CdkScrollable, ScrollDispatcher } from '@angular/cdk/overlay';
+import { Observable } from 'rxjs';
+
+import { NbPlatform } from '../overlay/mapping';
+import { NbLayoutScrollService } from '../../../services/scroll.service';
+
+@Injectable()
+export class NbScrollDispatcherAdapter extends ScrollDispatcher {
+  constructor(_ngZone: NgZone, _platform: NbPlatform, protected scrollService: NbLayoutScrollService) {
+    super(_ngZone, _platform);
+  }
+
+  scrolled(auditTimeInMs?: number): Observable<CdkScrollable | void> {
+    return this.scrollService.onScroll();
+  }
+}
+

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

@@ -0,0 +1,33 @@
+import { Injectable, NgZone } from '@angular/core';
+import { ViewportRuler } from '@angular/cdk/overlay';
+import { map } from 'rxjs/operators';
+
+import { NbPlatform } from '../overlay/mapping';
+import { NbLayoutRulerService } from '../../../services/ruler.service';
+import { NbLayoutScrollService, NbScrollPosition } from '../../../services/scroll.service';
+
+
+@Injectable()
+export class NbViewportRulerAdapter extends ViewportRuler {
+  constructor(_platform: NbPlatform, ngZone: NgZone,
+              protected ruler: NbLayoutRulerService,
+              protected scroll: NbLayoutScrollService) {
+    super(_platform, ngZone);
+  }
+
+  getViewportSize(): Readonly<{ width: number; height: number; }> {
+    let res;
+    this.ruler.getDimensions()
+      .pipe(map(dimensions => ({ width: dimensions.clientWidth, height: dimensions.clientHeight })))
+      .subscribe(rect => res = rect);
+    return res;
+  }
+
+  getViewportScrollPosition(): { left: number; top: number } {
+    let res;
+    this.scroll.getPosition()
+      .pipe(map((position: NbScrollPosition) => ({ top: position.y, left: position.x })))
+      .subscribe(position => res = position);
+    return res;
+  }
+}

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

@@ -0,0 +1,2 @@
+export * from './overlay/mapping';
+export * from './overlay';

src/framework/theme/components/cdk/overlay/_overlay.theme.scss

@@ -0,0 +1,5 @@
+@mixin nb-overlay-theme {
+  .overlay-backdrop {
+    background: rgba(0, 0, 0, 0.288);
+  }
+}

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

@@ -0,0 +1,6 @@
+export * from './overlay.module';
+export * from './overlay';
+export * from './overlay-position';
+export * from './overlay-container';
+export * from './overlay-trigger';
+export * from './mapping';

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

@@ -0,0 +1,82 @@
+import { Directive, Injectable, NgModule, TemplateRef, ViewContainerRef } from '@angular/core';
+import { CdkPortal, ComponentPortal, Portal, PortalModule, TemplatePortal } from '@angular/cdk/portal';
+import {
+  ComponentType,
+  ConnectedOverlayPositionChange,
+  ConnectedPosition,
+  ConnectionPositionPair,
+  FlexibleConnectedPositionStrategy,
+  GlobalPositionStrategy,
+  Overlay,
+  OverlayContainer,
+  OverlayModule,
+  OverlayPositionBuilder,
+  OverlayRef,
+  PositionStrategy,
+} from '@angular/cdk/overlay';
+import { Platform } from '@angular/cdk/platform';
+
+
+@Directive({ selector: '[nbPortal]' })
+export class NbPortalDirective extends CdkPortal {
+}
+
+@Injectable()
+export class NbOverlayService extends Overlay {
+}
+
+@Injectable()
+export class NbPlatform extends Platform {
+}
+
+@Injectable()
+export class NbOverlayPositionBuilder extends OverlayPositionBuilder {
+}
+
+export class NbComponentPortal<T = any> extends ComponentPortal<T> {
+}
+
+export class NbTemplatePortal<T = any> extends TemplatePortal<T> {
+  constructor(template: TemplateRef<T>, viewContainerRef?: ViewContainerRef, context?: T) {
+    super(template, viewContainerRef, context);
+  }
+}
+
+export class NbOverlayContainer extends OverlayContainer {
+}
+
+export class NbFlexibleConnectedPositionStrategy extends FlexibleConnectedPositionStrategy {
+}
+
+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;
+
+const CDK_MODULES = [OverlayModule, PortalModule];
+
+const CDK_PROVIDERS = [
+  NbOverlayService,
+  NbPlatform,
+  NbOverlayPositionBuilder,
+];
+
+/**
+ * This module helps us to keep all angular/cdk deps inside our cdk module via providing aliases.
+ * Approach will help us move cdk in separate npm package and refactor nebular/theme code.
+ * */
+@NgModule({
+  imports: [...CDK_MODULES],
+  exports: [
+    ...CDK_MODULES,
+    NbPortalDirective,
+  ],
+  declarations: [NbPortalDirective],
+  providers: [...CDK_PROVIDERS],
+})
+export class NbCdkMappingModule {
+}