feat(popover): add new awesome popover component

docs/articles/concept-ui-kit.md

@@ -11,6 +11,7 @@ Here's a list of Nebular components:
 - [Actions](#/docs/components/actions)
 - [User(Avatar)](#/docs/components/user-avatar)
 - [Checkbox](#/docs/components/checkbox)
+- [Popover](#/docs/components/popover)
 <hr class="section-end">
 
 <div class="note note-success">

docs/structure.ts

@@ -394,6 +394,22 @@ export const STRUCTURE = [
           },
         ],
       },
+      {
+        type: 'page',
+        name: 'Popover',
+        children: [
+          {
+            type: 'block',
+            block: 'component',
+            blockData: 'NbPopoverDirective',
+          },
+          {
+            type: 'block',
+            block: 'component',
+            blockData: 'NbPopoverComponent',
+          },
+        ],
+      },
     ],
   },
   {

e2e/popover.e2e-spec.ts

@@ -0,0 +1,154 @@
+import { browser, by, element } from 'protractor';
+
+const contentTemplate = by.css('nb-card:nth-child(1) button:nth-child(1)');
+const contentComponent = by.css('nb-card:nth-child(1) button:nth-child(2)');
+const contentString = by.css('nb-card:nth-child(1) button:nth-child(3)');
+const placementRight = by.css('nb-card:nth-child(2) button:nth-child(1)');
+const placementBottom = by.css('nb-card:nth-child(2) button:nth-child(2)');
+const placementTop = by.css('nb-card:nth-child(2) button:nth-child(3)');
+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');
+
+describe('nb-popover', () => {
+
+  beforeEach((done) => {
+    browser.get('#/popover').then(done);
+  });
+
+  it('render template ref', () => {
+    element(contentTemplate).click();
+    const containerContent = element(popover).element(by.css('nb-card'));
+    expect(containerContent.isPresent()).toBeTruthy();
+  });
+
+  it('render component ref', () => {
+    element(contentComponent).click();
+    const containerContent = element(popover).element(by.css('nb-dynamic-to-add'));
+    expect(containerContent.isPresent()).toBeTruthy();
+  });
+
+  it('render primitive', () => {
+    element(contentString).click();
+    const containerContent = element(popover).element(by.css('div'));
+    expect(containerContent.isPresent()).toBeTruthy();
+    expect(containerContent.getAttribute('class')).toEqual('primitive-popover');
+    expect(containerContent.getText()).toEqual('Hi, I\'m popover!');
+  });
+
+  it('render container with arrow', () => {
+    element(contentTemplate).click();
+    const arrow = element(popover).element(by.css('span'));
+    expect(arrow.getAttribute('class')).toEqual('arrow');
+  });
+
+  it('render container in the right', () => {
+    element(placementRight).click();
+    const container = element(popover);
+    expect(container.isPresent()).toBeTruthy();
+    expect(container.getAttribute('class')).toEqual('right');
+  });
+
+  it('render container in the bottom', () => {
+    element(placementBottom).click();
+    const container = element(popover);
+    expect(container.isPresent()).toBeTruthy();
+    expect(container.getAttribute('class')).toEqual('bottom');
+  });
+
+  it('render container in the top', () => {
+    element(placementTop).click();
+    const container = element(popover);
+    expect(container.isPresent()).toBeTruthy();
+    expect(container.getAttribute('class')).toEqual('top');
+  });
+
+  it('render container in the left', () => {
+    element(placementLeft).click();
+    const container = element(popover);
+    expect(container.isPresent()).toBeTruthy();
+    expect(container.getAttribute('class')).toEqual('left');
+  });
+
+  it('open popover by host click', () => {
+    element(modeClick).click();
+    const container = element(popover);
+    expect(container.isPresent()).toBeTruthy();
+  });
+
+  it('close popover by host click', () => {
+    element(modeClick).click();
+    const container = element(popover);
+    expect(container.isPresent()).toBeTruthy();
+    element(modeClick).click();
+    expect(container.isPresent()).toBeFalsy();
+  });
+
+  it('doesn\'t close popover by container click', () => {
+    element(modeClick).click();
+    const container = element(popover);
+    container.click();
+    expect(container.isPresent()).toBeTruthy();
+  });
+
+  it('close popover by click outside the host and container', () => {
+    element(modeClick).click();
+    const container = element(popover);
+    expect(container.isPresent()).toBeTruthy();
+    browser.actions()
+      .mouseMove(container, { x: -10, y: -10 })
+      .click()
+      .perform();
+    expect(container.isPresent()).toBeFalsy();
+  });
+
+  it('open popover by hover on host', () => {
+    browser.actions()
+      .mouseMove(element(modeHover))
+      .perform();
+
+    const container = element(popover);
+    expect(container.isPresent()).toBeTruthy();
+  });
+
+  it('close popover by hover out host', () => {
+    browser.actions()
+      .mouseMove(element(modeHover))
+      .perform();
+
+    const container = element(popover);
+    expect(container.isPresent()).toBeTruthy();
+
+    browser.actions()
+      .mouseMove(element(modeClick))
+      .perform();
+
+    expect(container.isPresent()).toBeFalsy();
+  });
+
+  it('doesn\'t close popover by hover on container', () => {
+    browser.actions()
+      .mouseMove(element(modeHover))
+      .perform();
+
+    const container = element(popover);
+    expect(container.isPresent()).toBeTruthy();
+
+    browser.actions()
+      .mouseMove(container)
+      .perform();
+
+    expect(container.isPresent()).toBeTruthy();
+  });
+
+  it('open popover by hover on host with hint', () => {
+    browser.actions()
+      .mouseMove(element(modeHint))
+      .perform();
+
+    const container = element(popover);
+    expect(container.isPresent()).toBeTruthy();
+  });
+});

gulpfile.js

@@ -72,6 +72,7 @@ const ROLLUP_GLOBALS = {
   'rxjs/operators/pairwise': 'Rx.operators',
   'rxjs/operators/distinctUntilChanged': 'Rx.operators',
   'rxjs/operators/takeWhile': 'Rx.operators',
+  'rxjs/operators/repeat': 'Rx.operators',
 
   // 3rd party dependencies
 

package.json

@@ -109,7 +109,7 @@
     "browserstack-local": "1.3.0",
     "codelyzer": "4.0.2",
     "conventional-changelog-cli": "1.3.4",
-    "doc-prsr": "2.0.1",
+    "doc-prsr": "2.0.2",
     "firebase-tools": "^3.17.4",
     "gulp": "3.9.1",
     "gulp-autoprefixer": "3.1.1",

src/app/app.module.ts

@@ -22,6 +22,7 @@ import {
   NbTabsetModule,
   NbThemeModule,
   NbUserModule,
+  NbPopoverModule,
 } from '@nebular/theme';
 
 import {
@@ -67,13 +68,15 @@ import { NbUserTestComponent } from './user-test/user-test.component';
 import { NbDynamicToAddComponent, NbThemeDynamicTestComponent } from './layout-test/theme-dynamic-test.component';
 import { NbActionsTestComponent } from './actions-test/actions-test.component';
 import { NbBootstrapTestComponent } from './bootstrap-test/bootstrap-test.component';
+import { NbPopoverTestComponent } from './popover-test/popover-test.component';
+
+import { routes } from './app.routes';
+
 import { NbCheckboxTestComponent } from './checkbox-test/checkbox-test.component';
 import { NbSearchTestComponent } from './search-test/search-test.component';
 import { NbSearchTestCustomizedComponent } from './search-test/search-test-customized.component';
 import { NbFormsTestComponent } from './forms-test/forms-test.component';
 
-import { routes } from './app.routes';
-
 import { NbCardTestComponent } from './card-test/card-test.component';
 import { NbAclTestComponent } from './acl-test/acl-test.component';
 import { AuthGuard } from './auth-guard.service';
@@ -113,6 +116,7 @@ const NB_TEST_COMPONENTS = [
   NbThemeBreakpointTestComponent,
   NbActionsTestComponent,
   NbFormsTestComponent,
+  NbPopoverTestComponent,
   NbCheckboxTestComponent,
   NbAclTestComponent,
 ];
@@ -133,6 +137,7 @@ const NB_TEST_COMPONENTS = [
     NbUserModule,
     NbSearchModule,
     NbActionsModule,
+    NbPopoverModule,
     NbCheckboxModule,
     NbAuthModule.forRoot({
       forms: {

src/app/app.routes.ts

@@ -41,6 +41,7 @@ import { NbSidebarTestComponent } from './sidebar-test/sidebar-test.component';
 import { NbTabsetTestComponent } from './tabset-test/tabset-test.component';
 import { NbUserTestComponent } from './user-test/user-test.component';
 import { NbCardTestComponent } from './card-test/card-test.component';
+import { NbPopoverTestComponent } from './popover-test/popover-test.component';
 import {
   NbAuthComponent,
   NbLoginComponent,
@@ -249,6 +250,10 @@ export const routes: Routes = [
     path: 'forms',
     component: NbFormsTestComponent,
   },
+  {
+    path: 'popover',
+    component: NbPopoverTestComponent,
+  },
   {
     path: 'acl',
     component: NbAclTestComponent,