feat(docs): added modals section

demo/assets/css/style.css

@@ -369,7 +369,7 @@ body {
 
 #content li a,
 #content p a {
-  color: #0808df;
+  /*color: #0808df;*/
   text-decoration: none;
 }
 

demo/components/accordion-section.ts

@@ -2,7 +2,7 @@ import {Component} from '@angular/core';
 import {CORE_DIRECTIVES} from '@angular/common';
 
 import {AccordionDemoComponent} from './accordion/accordion-demo';
-import {DemoSection} from './demo-section';
+import {DemoSectionComponent} from './demo-section';
 
 // webpack html imports
 let doc = require('../../components/accordion/readme.md');
@@ -13,17 +13,17 @@ let html = require('!!prismjs?lang=markup!./accordion/accordion-demo.html');
 
 @Component({
   selector: 'accordion-section',
-  directives: [DemoSection, AccordionDemo, CORE_DIRECTIVES],
+  directives: [DemoSectionComponent, AccordionDemoComponent, CORE_DIRECTIVES],
   template: `
     <demo-section [name]="name" [src]="src" [titleDoc]="titleDoc" [html]="html" [ts]="ts" [doc]="doc">
       <accordion-demo></accordion-demo>
     </demo-section>`
 })
 export class AccordionSectionComponent {
-  private name:string = 'Accordion';
-  private src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/accordion';
-  private html:string = html;
-  private ts:string = ts;
-  private titleDoc:string = titleDoc;
-  private doc:string = doc;
+  public name:string = 'Accordion';
+  public src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/accordion';
+  public html:string = html;
+  public ts:string = ts;
+  public titleDoc:string = titleDoc;
+  public doc:string = doc;
 }

demo/components/alert-section.ts

@@ -2,7 +2,7 @@ import {Component} from '@angular/core';
 import {CORE_DIRECTIVES} from '@angular/common';
 
 import {AlertDemoComponent} from './alert/alert-demo';
-import {DemoSection} from './demo-section';
+import {DemoSectionComponent} from './demo-section';
 
 // webpack html imports
 let doc = require('../../components/alert/readme.md');
@@ -12,17 +12,17 @@ let html = require('!!prismjs?lang=markup!./alert/alert-demo.html');
 
 @Component({
   selector: 'alert-section',
-  directives: [DemoSection, AlertDemo, CORE_DIRECTIVES],
+  directives: [DemoSectionComponent, AlertDemoComponent, CORE_DIRECTIVES],
   template: `
     <demo-section [name]="name" [src]="src" [titleDoc]="titleDoc" [html]="html" [ts]="ts" [doc]="doc">
       <alert-demo></alert-demo>
     </demo-section>`
 })
 export class AlertSectionComponent {
-  private name:string = 'Alerts';
-  private src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/alert';
-  private html:string = html;
-  private ts:string = ts;
-  private titleDoc:string = titleDoc;
-  private doc:string = doc;
+  public name:string = 'Alerts';
+  public src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/alert';
+  public html:string = html;
+  public ts:string = ts;
+  public titleDoc:string = titleDoc;
+  public doc:string = doc;
 }

demo/components/buttons-section.ts

@@ -2,7 +2,7 @@ import {Component} from '@angular/core';
 import {CORE_DIRECTIVES} from '@angular/common';
 
 import {ButtonsDemoComponent} from './buttons/buttons-demo';
-import {DemoSection} from './demo-section';
+import {DemoSectionComponent} from './demo-section';
 
 // webpack html imports
 let doc = require('../../components/buttons/readme.md');
@@ -13,17 +13,17 @@ let html = require('!!prismjs?lang=markup!./buttons/buttons-demo.html');
 
 @Component({
   selector: 'buttons-section',
-  directives: [DemoSection, ButtonsDemo, CORE_DIRECTIVES],
+  directives: [DemoSectionComponent, ButtonsDemoComponent, CORE_DIRECTIVES],
   template: `
     <demo-section [name]="name" [src]="src" [titleDoc]="titleDoc" [html]="html" [ts]="ts" [doc]="doc">
       <buttons-demo></buttons-demo>
     </demo-section>`
 })
-
-  private name:string = 'Buttons';
-  private src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/buttons';
-  private html:string = html;
-  private ts:string = ts;
-  private titleDoc:string = titleDoc;
-  private doc:string = doc;
+export class ButtonsSectionComponent {
+  public name:string = 'Buttons';
+  public src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/buttons';
+  public html:string = html;
+  public ts:string = ts;
+  public titleDoc:string = titleDoc;
+  public doc:string = doc;
 }

demo/components/carousel-section.ts

@@ -2,7 +2,7 @@ import {Component} from '@angular/core';
 import {CORE_DIRECTIVES} from '@angular/common';
 
 import {CarouselDemoComponent} from './carousel/carousel-demo';
-import {DemoSection} from './demo-section';
+import {DemoSectionComponent} from './demo-section';
 
 // webpack html imports
 let doc = require('../../components/carousel/readme.md');
@@ -13,17 +13,17 @@ let html = require('!!prismjs?lang=markup!./carousel/carousel-demo.html');
 
 @Component({
   selector: 'carousel-section',
-  directives: [DemoSection, CarouselDemo, CORE_DIRECTIVES],
+  directives: [DemoSectionComponent, CarouselDemoComponent, CORE_DIRECTIVES],
   template: `
     <demo-section [name]="name" [src]="src" [titleDoc]="titleDoc" [html]="html" [ts]="ts" [doc]="doc">
       <carousel-demo></carousel-demo>
     </demo-section>`
 })
 export class CarouselSectionComponent {
-  private name:string = 'Carousel';
-  private src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/carousel';
-  private html:string = html;
-  private ts:string = ts;
-  private titleDoc:string = titleDoc;
-  private doc:string = doc;
+  public name:string = 'Carousel';
+  public src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/carousel';
+  public html:string = html;
+  public ts:string = ts;
+  public titleDoc:string = titleDoc;
+  public doc:string = doc;
 }

demo/components/collapse-section.ts

@@ -2,7 +2,7 @@ import {Component} from '@angular/core';
 import {CORE_DIRECTIVES} from '@angular/common';
 
 import {CollapseDemoComponent} from './collapse/collapse-demo';
-import {DemoSection} from './demo-section';
+import {DemoSectionComponent} from './demo-section';
 
 // webpack html imports
 let doc = require('../../components/collapse/readme.md');
@@ -13,17 +13,17 @@ let html = require('!!prismjs?lang=markup!./collapse/collapse-demo.html');
 
 @Component({
   selector: 'collapse-section',
-  directives: [DemoSection, CollapseDemo, CORE_DIRECTIVES],
+  directives: [DemoSectionComponent, CollapseDemoComponent, CORE_DIRECTIVES],
   template: `
     <demo-section [name]="name" [src]="src" [titleDoc]="titleDoc" [html]="html" [ts]="ts" [doc]="doc">
       <collapse-demo></collapse-demo>
     </demo-section>`
 })
 export class CollapseSectionComponent {
-  private name:string = 'Collapse';
-  private src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/collapse';
-  private html:string = html;
-  private ts:string = ts;
-  private titleDoc:string = titleDoc;
-  private doc:string = doc;
+  public name:string = 'Collapse';
+  public src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/collapse';
+  public html:string = html;
+  public ts:string = ts;
+  public titleDoc:string = titleDoc;
+  public doc:string = doc;
 }

demo/components/datepicker-section.ts

@@ -1,8 +1,8 @@
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 import {CORE_DIRECTIVES} from '@angular/common';
 
 import {DatepickerDemoComponent} from './datepicker/datepicker-demo';
-import {DemoSection} from './demo-section';
+import {DemoSectionComponent} from './demo-section';
 
 // webpack html imports
 let doc = require('../../components/datepicker/readme.md');
@@ -13,17 +13,17 @@ let html = require('!!prismjs?lang=markup!./datepicker/datepicker-demo.html');
 
 @Component({
   selector: 'datepicker-section',
-  directives: [DemoSection, DatepickerDemo, CORE_DIRECTIVES],
+  directives: [DemoSectionComponent, DatepickerDemoComponent, CORE_DIRECTIVES],
   template: `
     <demo-section [name]="name" [src]="src" [titleDoc]="titleDoc" [html]="html" [ts]="ts" [doc]="doc">
       <datepicker-demo></datepicker-demo>
     </demo-section>`
 })
-
-  private name:string = 'Datepicker';
-  private src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/datepicker';
-  private html:string = html;
-  private ts:string = ts;
-  private titleDoc:string = titleDoc;
-  private doc:string = doc;
+export class DatepickerSectionComponent {
+  public name:string = 'Datepicker';
+  public src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/datepicker';
+  public html:string = html;
+  public ts:string = ts;
+  public titleDoc:string = titleDoc;
+  public doc:string = doc;
 }

demo/components/demo-section.template.html

@@ -1,7 +1,7 @@
 <div class="content-header">
   <h2>{{name}}
     <a [href]="src" target="_blank">
-      <img src="/assets/images/link-doc.png" alt=""/>
+      <img src="assets/images/link-doc.png" alt=""/>
     </a>
   </h2>
 

demo/components/demo-section.ts

@@ -1,4 +1,4 @@
-import {Component, Input} from 'angular2/core';
+import {Component, Input} from '@angular/core';
 import {TAB_DIRECTIVES} from '../../ng2-bootstrap';
 
 let template = require('./demo-section.template.html');
@@ -8,18 +8,11 @@ let template = require('./demo-section.template.html');
   directives: [TAB_DIRECTIVES],
   template: template
 })
-
-export class DemoSection {
-  @Input()
-  private name:string;
-  @Input()
-  private titleDoc:string;
-  @Input()
-  private src:string;
-  @Input()
-  private html:string;
-  @Input()
-  private ts:string;
-  @Input()
-  private doc:string;
+export class DemoSectionComponent {
+  @Input() public name:string;
+  @Input() public titleDoc:string;
+  @Input() public src:string;
+  @Input() public html:string;
+  @Input() public ts:string;
+  @Input() public doc:string;
 }

demo/components/dropdown-section.ts

@@ -2,7 +2,7 @@ import {Component} from '@angular/core';
 import {CORE_DIRECTIVES} from '@angular/common';
 
 import {DropdownDemoComponent} from './dropdown/dropdown-demo';
-import {DemoSection} from './demo-section';
+import {DemoSectionComponent} from './demo-section';
 
 // webpack html imports
 let doc = require('../../components/dropdown/readme.md');
@@ -13,17 +13,17 @@ let html = require('!!prismjs?lang=markup!./dropdown/dropdown-demo.html');
 
 @Component({
   selector: 'dropdown-section',
-  directives: [DemoSection, DropdownDemo, CORE_DIRECTIVES],
+  directives: [DemoSectionComponent, DropdownDemoComponent, CORE_DIRECTIVES],
   template: `
     <demo-section [name]="name" [src]="src" [titleDoc]="titleDoc" [html]="html" [ts]="ts" [doc]="doc">
       <dropdown-demo></dropdown-demo>
     </demo-section>`
 })
-
-  private name:string = 'Dropdowns';
-  private src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/dropdown';
-  private html:string = html;
-  private ts:string = ts;
-  private titleDoc:string = titleDoc;
-  private doc:string = doc;
+export class DropdownSectionComponent {
+  public name:string = 'Dropdowns';
+  public src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/dropdown';
+  public html:string = html;
+  public ts:string = ts;
+  public titleDoc:string = titleDoc;
+  public doc:string = doc;
 }

demo/components/getting-started/getting-started.ts

@@ -1,4 +1,4 @@
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 
 let name = 'First of all, Welcome!';
 
@@ -14,11 +14,10 @@ let readingDocumentation = require('./reading-documentation.md');
   selector: 'accordion-section',
   template: template
 })
-
-export class GettingStartedSection {
-  private name:string = name;
-  private desc:string = desc;
-  private dependencies:string = dependencies;
-  private installation:string = installation;
-  private readingDocumentation:string = readingDocumentation;
+export class GettingStartedSectionComponent {
+  public name:string = name;
+  public desc:string = desc;
+  public dependencies:string = dependencies;
+  public installation:string = installation;
+  public readingDocumentation:string = readingDocumentation;
 }

demo/components/main-menu/main-menu.component.ts

@@ -1,8 +1,8 @@
-import {Component, Inject} from 'angular2/core';
-import {RouterLink, Router} from 'angular2/router';
+import {Component, Inject} from '@angular/core';
+import {RouterLink, Router} from '@angular/router-deprecated';
 
-import {config} from './../../config';
-import {SearchFilter} from './search-filter.pipe';
+import {routes} from './../../config';
+import {SearchFilterPipe} from './search-filter.pipe';
 
 // webpack html imports
 let template = require('./main-menu.template.html');
@@ -11,15 +11,15 @@ let template = require('./main-menu.template.html');
   selector: 'main-menu',
   template: template,
   directives: [RouterLink],
-  pipes: [SearchFilter]
+  pipes: [SearchFilterPipe]
 })
 
 export class MainMenuComponent {
-  private routes:any = config.routes;
-  private router:Router;
-  private search:any = {};
+  public routes:any = routes;
+  public router:Router;
+  public search:any = {};
 
-  constructor(@Inject(Router) router:Router) {
+  public constructor(@Inject(Router) router:Router) {
     this.router = router;
   }
 }

demo/components/main-menu/main-menu.template.html

@@ -3,13 +3,13 @@
     <input type="text" name="search" placeholder="Search..." [(ngModel)]="search.text"/>
   </div>
   <div class="main-menu-container">
-    <div class="menu-content">
+    <div class="menu-content" *ngIf="routes && routes.length">
       <div class="section"
-           *ngFor="#route of routes | SearchFilter:search.text"
+           *ngFor="let route of routes | SearchFilter:search.text"
            [class.active]="router.isRouteActive(router.generate([route.name]))">
         <h3 [routerLink]="[route.name]">{{route.name}}</h3>
 
-        <div class="item">
+<!--        <div class="item">
           <h4>
             <span [routerLink]="[route.name]">Example</span>
           </h4>
@@ -25,7 +25,7 @@ <h4>
           <h4>
             <span [routerLink]="[route.name]">Properties</span>
           </h4>
-        </div>
+        </div>-->
       </div>
     </div>
   </div>