From e65f1d87e5c62b444f842f94ff07385eff230998 Mon Sep 17 00:00:00 2001
From: Dmitry Nehaychik <4dmitr@gmail.com>
Date: Tue, 20 Feb 2018 18:17:25 +0300
Subject: [PATCH] feat(popover): component popover demo

---
 .../popovers/popovers.component.html          | 26 ++++++++++++++-----
 .../popovers/popovers.component.ts            |  7 +++--
 2 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/src/app/pages/ui-features/popovers/popovers.component.html b/src/app/pages/ui-features/popovers/popovers.component.html
index 21e192db61..a5762fc905 100644
--- a/src/app/pages/ui-features/popovers/popovers.component.html
+++ b/src/app/pages/ui-features/popovers/popovers.component.html
@@ -1,6 +1,6 @@
 <div class="row">
-  <div class="col-lg-4">
-    <nb-card>
+  <div class="col-lg-6">
+    <nb-card size="small">
       <nb-card-header>Popover Position</nb-card-header>
       <nb-card-body>
         <p>When popover has not enough space based on the configured placement, it will adjust accordingly trying to fit the screen.</p>
@@ -12,8 +12,8 @@
     </nb-card>
   </div>
 
-  <div class="col-lg-4">
-    <nb-card>
+  <div class="col-lg-6">
+    <nb-card size="small">
       <nb-card-header>Simple Popovers</nb-card-header>
       <nb-card-body>
         <p>In a simples form popover can take a string of text to render.</p>
@@ -23,8 +23,10 @@
       </nb-card-body>
     </nb-card>
   </div>
+</div>
 
-  <div class="col-lg-4">
+<div class="row">
+  <div class="col-lg-6">
 
     <ng-template #tabs>
       <nb-tabset>
@@ -70,7 +72,7 @@
       </nb-card>
     </ng-template>
 
-    <nb-card>
+    <nb-card size="small">
       <nb-card-header>Template Popovers</nb-card-header>
       <nb-card-body>
         <p>You can pass a refference to `ng-template` to be rendered.</p>
@@ -80,6 +82,18 @@
       </nb-card-body>
     </nb-card>
   </div>
+
+  <div class="col-lg-6">
+    <nb-card size="small">
+      <nb-card-header>Component Popovers</nb-card-header>
+      <nb-card-body>
+        <p>Same way popover can render any angular compnoent.</p>
+        <button class="btn btn-warning with-margins" [nbPopover]="tabsComponent">With tabs</button>
+        <button class="btn btn-warning with-margins" [nbPopover]="formComponent">With form</button>
+        <button class="btn btn-warning with-margins" [nbPopover]="cardComponent">With card</button>
+      </nb-card-body>
+    </nb-card>
+  </div>
 </div>
 
 <div class="row">
diff --git a/src/app/pages/ui-features/popovers/popovers.component.ts b/src/app/pages/ui-features/popovers/popovers.component.ts
index f04df2b69b..1200c80feb 100644
--- a/src/app/pages/ui-features/popovers/popovers.component.ts
+++ b/src/app/pages/ui-features/popovers/popovers.component.ts
@@ -1,5 +1,8 @@
 import { Component } from '@angular/core';
-import { NgxPopoverCardComponent, NgxPopoverTabsComponent } from './popover-examples.component';
+import {
+  NgxPopoverCardComponent, NgxPopoverFormComponent,
+  NgxPopoverTabsComponent,
+} from './popover-examples.component';
 
 @Component({
   selector: 'ngx-popovers',
@@ -9,5 +12,5 @@ import { NgxPopoverCardComponent, NgxPopoverTabsComponent } from './popover-exam
 export class PopoversComponent {
   tabsComponent = NgxPopoverTabsComponent;
   cardComponent = NgxPopoverCardComponent;
-  formComponent = NgxPopoverCardComponent;
+  formComponent = NgxPopoverFormComponent;
 }