feat(docs): popover docs

demo/src/app/app.module.ts

@@ -20,6 +20,7 @@ import { DemoDatepickerModule } from './components/datepicker';
 import { DemoDropdownModule } from './components/dropdown';
 import { DemoModalModule } from './components/modal';
 import { DemoPaginationModule } from './components/pagination';
+import { DemoPopoverModule } from './components/popover/index';
 import { DemoProgressbarModule } from './components/progressbar';
 import { DemoRatingModule } from './components/rating';
 import { DemoTabsModule } from './components/tabs';
@@ -55,6 +56,7 @@ import { ngdoc } from '../ng-api-doc';
     DemoDropdownModule,
     DemoModalModule,
     DemoPaginationModule,
+    DemoPopoverModule,
     DemoProgressbarModule,
     DemoRatingModule,
     DemoTabsModule,

demo/src/app/app.routing.ts

@@ -14,6 +14,7 @@ import { TabsSectionComponent } from './components/tabs/tabs-section.component';
 import { TimepickerSectionComponent } from './components/timepicker/timepicker-section.component';
 import { TooltipSectionComponent } from './components/tooltip/tooltip-section.component';
 import { TypeaheadSectionComponent } from './components/typeahead/typeahead-section.component';
+import { PopoverSectionComponent } from './components/popover/popover-section.component';
 
 export const routes = [
   {
@@ -66,6 +67,11 @@ export const routes = [
     data: ['Pagination'],
     component: PaginationSectionComponent
   },
+  {
+    path: 'popover',
+    data: ['Popover'],
+    component: PopoverSectionComponent
+  },
   {
     path: 'progressbar',
     data: ['Progressbar'],

demo/src/app/components/popover/demos/basic/basic.html

@@ -0,0 +1,5 @@
+<button type="button" class="btn btn-primary"
+        popover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+  Live demo
+</button>
+

demo/src/app/components/popover/demos/basic/basic.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-popover-basic',
+  templateUrl: './basic.html'
+})
+export class DemoPopoverBasicComponent {
+}

demo/src/app/components/popover/demos/config/config.html

@@ -0,0 +1,4 @@
+<button type="button" class="btn btn-primary"
+        popover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+  Preconfigured popover
+</button>

demo/src/app/components/popover/demos/config/config.ts

@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { PopoverConfig } from 'ng2-bootstrap';
+
+// such override allows to keep some initial values
+
+export function getAlertConfig(): PopoverConfig {
+  return Object.assign(new PopoverConfig(), {placement: 'right', container: 'body', triggers: 'focus'});
+}
+
+@Component({
+  selector: 'demo-popover-config',
+  templateUrl: './config.html',
+  providers: [{provide: PopoverConfig, useFactory: getAlertConfig}]
+})
+export class DemoPopoverConfigComponent {
+}

demo/src/app/components/popover/demos/container/container.html

@@ -0,0 +1,13 @@
+<div class="row panel" style="position: relative; overflow: hidden;">
+  <div class="card panel-body">
+    <button type="button" class="btn btn-danger"
+            popover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+      Default popover
+    </button>
+    <button type="button" class="btn btn-success"
+            popover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
+            container="body">
+      Popover appended to body
+    </button>
+  </div>
+</div>

demo/src/app/components/popover/demos/container/container.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-popover-container',
+  templateUrl: './container.html'
+})
+export class DemoPopoverContainerComponent {
+}

demo/src/app/components/popover/demos/dismiss/dismiss.html

@@ -0,0 +1,7 @@
+<button type="button" class="btn btn-success"
+        popover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
+        popoverTitle="Dismissible popover"
+        triggers="focus">
+  Dismissible popover
+</button>
+

demo/src/app/components/popover/demos/dismiss/dismiss.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-popover-dismiss',
+  templateUrl: './dismiss.html'
+})
+export class DemoPopoverDismissComponent {
+}

demo/src/app/components/popover/demos/dynamic-html/dynamic-html.html

@@ -0,0 +1,5 @@
+<template #popTemplate>Here we go: <div [innerHtml]="html"></div></template>
+<button type="button" class="btn btn-success"
+        [popover]="popTemplate" popoverTitle="Dynamic html inside">
+  Show me popover with html
+</button>

demo/src/app/components/popover/demos/dynamic-html/dynamic-html.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-popover-dynamic-html',
+  templateUrl: './dynamic-html.html'
+})
+export class DemoPopoverDynamicHtmlComponent {
+  public html:string = `
+<span class="btn btn-danger">Never trust not sanitized HTML!!!</span>`;
+}

demo/src/app/components/popover/demos/dynamic/dynamic.html

@@ -0,0 +1,10 @@
+<button type="button" class="btn btn-info"
+        [popover]="content" [popoverTitle]="title">
+  Simple binding
+</button>
+
+<template #popTemplate>Just another: {{content}}</template>
+<button type="button" class="btn btn-warning"
+        [popover]="popTemplate" popoverTitle="Template ref content inside">
+  TemplateRef binding
+</button>

demo/src/app/components/popover/demos/dynamic/dynamic.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-popover-dynamic',
+  templateUrl: './dynamic.html'
+})
+export class DemoPopoverDynamicComponent {
+  public title:string = 'Welcome word';
+  public content: string = 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.';
+}

demo/src/app/components/popover/demos/four-directions/four-directions.html

@@ -0,0 +1,27 @@
+<button type="button" class="btn btn-default btn-secondary"
+        popover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
+        popoverTitle="Popover on left"
+        placement="left">
+  Popover on left
+</button>
+
+<button type="button" class="btn btn-default btn-secondary"
+        popover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
+        popoverTitle="Popover on top"
+        placement="top">
+  Popover on top
+</button>
+
+<button type="button" class="btn btn-default btn-secondary"
+        popover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
+        popoverTitle="Popover on bottom"
+        placement="bottom">
+  Popover on bottom
+</button>
+
+<button type="button" class="btn btn-default btn-secondary"
+        popover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
+        popoverTitle="Popover on right"
+        placement="right">
+  Popover on right
+</button>

demo/src/app/components/popover/demos/four-directions/four-directions.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-popover-four-directions',
+  templateUrl: './four-directions.html'
+})
+export class DemoPopoverFourDirectionsComponent {
+}

demo/src/app/components/popover/demos/index.ts

@@ -0,0 +1,48 @@
+import { DemoPopoverBasicComponent } from './basic/basic';
+import { DemoPopoverFourDirectionsComponent } from './four-directions/four-directions';
+import { DemoPopoverDismissComponent } from './dismiss/dismiss';
+import { DemoPopoverDynamicComponent } from './dynamic/dynamic';
+import { DemoPopoverDynamicHtmlComponent } from './dynamic-html/dynamic-html';
+import { DemoPopoverContainerComponent } from './container/container';
+import { DemoPopoverConfigComponent } from './config/config';
+
+export const DEMO_COMPONENTS = [
+  DemoPopoverBasicComponent,
+  DemoPopoverFourDirectionsComponent,
+  DemoPopoverDismissComponent,
+  DemoPopoverDynamicComponent,
+  DemoPopoverDynamicHtmlComponent,
+  DemoPopoverContainerComponent,
+  DemoPopoverConfigComponent
+];
+
+export const DEMOS = {
+  basic: {
+    component: require('!!raw?lang=typescript!./basic/basic.ts'),
+    html: require('!!raw?lang=markup!./basic/basic.html')
+  },
+  forDirections: {
+    component: require('!!raw?lang=typescript!./four-directions/four-directions.ts'),
+    html: require('!!raw?lang=markup!./four-directions/four-directions.html')
+  },
+  dismiss: {
+    component: require('!!raw?lang=typescript!./dismiss/dismiss.ts'),
+    html: require('!!raw?lang=markup!./dismiss/dismiss.html')
+  },
+  dynamic: {
+    component: require('!!raw?lang=typescript!./dynamic/dynamic.ts'),
+    html: require('!!raw?lang=markup!./dynamic/dynamic.html')
+  },
+  dynamicHtml: {
+    component: require('!!raw?lang=typescript!./dynamic-html/dynamic-html.ts'),
+    html: require('!!raw?lang=markup!./dynamic-html/dynamic-html.html')
+  },
+  container: {
+    component: require('!!raw?lang=typescript!./container/container.ts'),
+    html: require('!!raw?lang=markup!./container/container.html')
+  },
+  config: {
+    component: require('!!raw?lang=typescript!./config/config.ts'),
+    html: require('!!raw?lang=markup!./config/config.html')
+  }
+};

demo/src/app/components/popover/demos/styling-global/styling-global.html

@@ -0,0 +1,10 @@
+<style>
+  .alert-md-color {
+    background-color: #7B1FA2;
+    border-color: #4A148C;
+    color: #fff;
+  }
+</style>
+<alert type="md-color">
+  <strong>Well done!</strong> You successfully read this important alert message.
+</alert>

demo/src/app/components/popover/demos/styling-global/styling-global.ts

@@ -0,0 +1,9 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'demo-alert-styling-global',
+  templateUrl: './styling-global.html',
+  encapsulation: ViewEncapsulation.None
+})
+export class DemoAlertStylingGlobalComponent {
+}

demo/src/app/components/popover/demos/styling-local/styling-local.html

@@ -0,0 +1,3 @@
+<alert type="md-local">
+  <strong>Well done!</strong> You successfully read this important alert message.
+</alert>

demo/src/app/components/popover/demos/styling-local/styling-local.ts

@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-alert-styling-local',
+  templateUrl: './styling-local.html',
+  /* tslint:disable no-unused-css*/
+  styles: [`
+  :host >>> .alert-md-local {
+    background-color: #009688;
+    border-color: #00695C;
+    color: #fff;
+  }
+  `]
+})
+export class DemoAlertStylingLocalComponent {
+}

demo/src/app/components/popover/demos/triggers/basic.html

@@ -0,0 +1,5 @@
+<button type="button" class="btn btn-primary"
+        popover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+  Live demo
+</button>
+

demo/src/app/components/popover/demos/triggers/basic.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-popover-basic',
+  templateUrl: './basic.html'
+})
+export class DemoPopoverBasicComponent {
+}

demo/src/app/components/popover/docs/title.md

@@ -0,0 +1,11 @@
+```typescript
+// RECOMMENDED
+import { PopoverModule } from 'ng2-bootstrap/popover';
+// or
+import { PopoverModule } from 'ng2-bootstrap';
+
+@NgModule({
+  imports: [PopoverModule.forRoot(),...]
+})
+export class AppModule(){} 
+```

demo/src/app/components/popover/index.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { PopoverModule } from 'ng2-bootstrap';
+import { SharedModule } from '../../shared';
+import { DEMO_COMPONENTS } from './demos/index';
+import { PopoverSectionComponent } from './popover-section.component';
+
+@NgModule({
+  declarations: [
+    PopoverSectionComponent,
+    ...DEMO_COMPONENTS
+  ],
+  imports: [
+    CommonModule,
+    FormsModule,
+    SharedModule,
+    PopoverModule.forRoot()
+  ],
+  exports: [PopoverSectionComponent]
+})
+export class DemoPopoverModule {}