refactor(theme): refactor popover, context-menu and search components to use overlays (#684)

Refactor popover, context-menu, and search, implement with overlays.
Remove capability add something to layout top. All dynamic layout components have to work with overlays now.

BREAKING CHANGE:
`appendToLayoutTop` and `clearLayoutTop` methods was removed from `NbThemeService`. Instead of this methods, you have to use `NbOverlayService`. It's the extension of @angular/cdk overlays, so, check [documentation](https://material.angular.io/cdk/overlay/overview) first of all. 

Basic usage of overlays may look like this:

```ts
constructor(protected overlay: NbOverlayService) {
}

const overlayRef = overlay.create();
const overlayComponentPortal = new ComponentPortal(MyOverlayComponent);
overlayRef.attach(overlayComponentPortal);
```

Closes #683, closes  #664, closes #668.

Author: tibing-old-email

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/layout-dynamic.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!');
   });
 
@@ -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', () => {

e2e/popover.e2e-spec.ts

@@ -9,6 +9,7 @@ import { hasClass } from './e2e-helper';
 import { protractor } from 'protractor/built/ptor';
 
 const EC = protractor.ExpectedConditions;
+const WAIT_TIME = 500;
 
 describe('nb-search', () => {
 
@@ -18,47 +19,86 @@ describe('nb-search', () => {
 
   it('should be able to show search-field', () => {
     element(by.css('.start-search')).click();
+    // TODO: Remove after implementing search animations with angular.
+    // For now need to wait animation to complete before performing checks.
+    browser.wait(EC.visibilityOf(element(by.css('.search-input'))), WAIT_TIME);
     expect(hasClass(element(by.css('nb-search-field')), 'show')).toBeTruthy();
   });
 
   it('should be able to change layout style', () => {
     element(by.css('.start-search')).click();
+    // TODO: Remove after implementing search animations with angular.
+    // For now need to wait animation to complete before performing checks.
+    browser.wait(EC.visibilityOf(element(by.css('.search-input'))), WAIT_TIME);
     expect(hasClass(element(by.css('nb-layout')), 'with-search')).toBeTruthy();
   });
 
   it('should focus on opened search field', () => {
     element(by.css('.start-search')).click();
+    // TODO: Remove after implementing search animations with angular.
+    // For now need to wait animation to complete before performing checks.
+    browser.wait(EC.visibilityOf(element(by.css('.search-input'))), WAIT_TIME);
     expect(hasClass(browser.driver.switchTo().activeElement(), 'search-input')).toBeTruthy();
   });
 
   it('should be able to close search-field with close button', () => {
     element(by.css('.start-search')).click();
+    // TODO: Remove after implementing search animations with angular.
+    // For now need to wait animation to complete before performing checks.
+    browser.wait(EC.visibilityOf(element(by.css('.search-input'))), WAIT_TIME);
     element(by.css('.search button')).click();
+    // TODO: Remove after implementing search animations with angular.
+    // For now need to wait animation to complete before performing checks.
+    browser.wait(EC.visibilityOf(element(by.css('.start-search'))), WAIT_TIME);
     expect(hasClass(element(by.css('nb-search-field')), 'show')).toBeFalsy();
   });
 
   it('should remove class from layout when search closed', () => {
     element(by.css('.start-search')).click();
+    // TODO: Remove after implementing search animations with angular.
+    // For now need to wait animation to complete before performing checks.
+    browser.wait(EC.visibilityOf(element(by.css('.search-input'))), WAIT_TIME);
     element(by.css('.search button')).click();
+    // TODO: Remove after implementing search animations with angular.
+    // For now need to wait animation to complete before performing checks.
+    browser.wait(EC.visibilityOf(element(by.css('.start-search'))), WAIT_TIME);
     expect(hasClass(element(by.css('nb-layout')), 'with-search')).toBeFalsy();
   });
 
   it('should remove focus from input when search closed', () => {
     element(by.css('.start-search')).click();
+    // TODO: Remove after implementing search animations with angular.
+    // For now need to wait animation to complete before performing checks.
+    browser.wait(EC.visibilityOf(element(by.css('.search-input'))), WAIT_TIME);
     element(by.css('.search button')).click();
+    // TODO: Remove after implementing search animations with angular.
+    // For now need to wait animation to complete before performing checks.
+    browser.wait(EC.visibilityOf(element(by.css('.start-search'))), WAIT_TIME);
     expect(hasClass(browser.driver.switchTo().activeElement(), 'search-input')).toBeFalsy();
   });
 
   it('should clean search input when closed', () => {
     element(by.css('.start-search')).click();
+    // TODO: Remove after implementing search animations with angular.
+    // For now need to wait animation to complete before performing checks.
+    browser.wait(EC.visibilityOf(element(by.css('.search-input'))), WAIT_TIME);
     element(by.css('.search-input')).sendKeys('akveo');
     element(by.css('.search button')).click();
+    // TODO: Remove after implementing search animations with angular.
+    // For now need to wait animation to complete before performing checks.
+    browser.wait(EC.visibilityOf(element(by.css('.start-search'))), WAIT_TIME);
     expect(element(by.css('.search-input')).getAttribute('value')).toEqual('');
   });
 
   it('should be able to close search-field with esc', () => {
     element(by.css('.start-search')).click();
+    // TODO: Remove after implementing search animations with angular.
+    // For now need to wait animation to complete before performing checks.
+    browser.wait(EC.visibilityOf(element(by.css('.search-input'))), WAIT_TIME);
     element(by.css('.search-input')).sendKeys(protractor.Key.ESCAPE);
+    // TODO: Remove after implementing search animations with angular.
+    // For now need to wait animation to complete before performing checks.
+    browser.wait(EC.visibilityOf(element(by.css('.start-search'))), WAIT_TIME);
     expect(hasClass(element(by.css('nb-search-field')), 'show')).toBeFalsy();
     expect(hasClass(element(by.css('nb-layout')), 'with-search')).toBeFalsy();
     expect(hasClass(browser.driver.switchTo().activeElement(), 'search-input')).toBeFalsy();
@@ -67,8 +107,14 @@ describe('nb-search', () => {
 
   it('should be able to submit search and close search-field with enter', () => {
     element(by.css('.start-search')).click();
+    // TODO: Remove after implementing search animations with angular.
+    // For now need to wait animation to complete before performing checks.
+    browser.wait(EC.visibilityOf(element(by.css('.search-input'))), WAIT_TIME);
     element(by.css('.search-input')).sendKeys('akveo');
     element(by.css('.search-input')).sendKeys(protractor.Key.ENTER);
+    // TODO: Remove after implementing search animations with angular.
+    // For now need to wait animation to complete before performing checks.
+    browser.wait(EC.visibilityOf(element(by.css('.start-search'))), WAIT_TIME);
     expect(hasClass(element(by.css('nb-search-field')), 'show')).toBeFalsy();
     expect(hasClass(element(by.css('nb-layout')), 'with-search')).toBeFalsy();
     expect(hasClass(browser.driver.switchTo().activeElement(), 'search-input')).toBeFalsy();
@@ -77,6 +123,9 @@ describe('nb-search', () => {
 
   it('should display default hint', () => {
     element(by.css('.start-search')).click();
+    // TODO: Remove after implementing search animations with angular.
+    // For now need to wait animation to complete before performing checks.
+    browser.wait(EC.visibilityOf(element(by.css('.search-input'))), WAIT_TIME);
     expect(element(by.css('.show .search span'))).toBeTruthy();
 
     const spanEl = element(by.css('.show .search span'));
@@ -87,6 +136,9 @@ describe('nb-search', () => {
 
   it('should display default placeholder', () => {
     element(by.css('.start-search')).click();
+    // TODO: Remove after implementing search animations with angular.
+    // For now need to wait animation to complete before performing checks.
+    browser.wait(EC.visibilityOf(element(by.css('.search-input'))), WAIT_TIME);
     expect(element(by.css('.search-input')).getAttribute('placeholder')).toEqual('Search...');
   });
 });
@@ -99,6 +151,9 @@ describe('nb-search-customized', () => {
 
   it('should display customised hint', () => {
     element(by.css('.start-search')).click();
+    // TODO: Remove after implementing search animations with angular.
+    // For now need to wait animation to complete before performing checks.
+    browser.wait(EC.visibilityOf(element(by.css('.search-input'))), WAIT_TIME);
     expect(element(by.css('.show .search span'))).toBeTruthy();
 
     const spanEl = element(by.css('.show .search span'));
@@ -109,6 +164,9 @@ describe('nb-search-customized', () => {
 
   it('should display customised placeholder', () => {
     element(by.css('.start-search')).click();
+    // TODO: Remove after implementing search animations with angular.
+    // For now need to wait animation to complete before performing checks.
+    browser.wait(EC.visibilityOf(element(by.css('.search-input'))), WAIT_TIME);
     expect(element(by.css('.search-input')).getAttribute('placeholder')).toEqual('Type here.');
   });
 });

e2e/search.e2e-spec.ts

@@ -9,7 +9,8 @@ import { NbViewportRulerAdapter } from './viewport-ruler-adapter';
 @NgModule({
   providers: [
     NbViewportRulerAdapter,
-    { provide: OverlayContainer, useClass: NbOverlayContainerAdapter },
+    NbOverlayContainerAdapter,
+    { provide: OverlayContainer, useExisting: NbOverlayContainerAdapter },
     { provide: ScrollDispatcher, useClass: NbScrollDispatcherAdapter },
   ],
 })

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

@@ -3,13 +3,31 @@ 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._document.querySelector('nb-layout').appendChild(container);
+    this.container.appendChild(container);
     this._containerElement = container;
   }
 }

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

@@ -14,6 +14,10 @@ export enum NbTrigger {
  * Each stream provides different events depends on implementation.
  * We have three main trigger strategies: click, hint and hover.
  * */
+/**
+ * TODO maybe we have to use renderer.listen instead of observableFromEvent?
+ * Renderer provides capability use it in service worker, ssr and so on.
+ * */
 export abstract class NbTriggerStrategy {
   abstract show$: Observable<Event>;
   abstract hide$: Observable<Event>;