chore(demo): demos splitted

demo/src/app/components/accordion/accordion-section.component.ts

@@ -2,13 +2,11 @@
 // todo: add more samples http://getbootstrap.com/components/#panels-alternatives
 
 import { Component } from '@angular/core';
+import { DEMOS } from './demos';
 
 // webpack html imports
 let titleDoc = require('html!markdown!./docs/usage.md');
 
-let ts = require('!!raw!./demos/accordion-demo.component.ts');
-let html = require('!!raw!./demos/accordion-demo.component.html');
-
 @Component({
   selector: 'accordion-section',
   template: `
@@ -41,7 +39,7 @@ let html = require('!!raw!./demos/accordion-demo.component.html');
   <!-- basic -->
   <p>Click headers to expand/collapse content that is broken into logical sections, much like tabs.</p>
   
-  <ng-sample-box [ts]="ts" [html]="html">
+  <ng-sample-box [ts]="demos.old.component" [html]="demos.old.html">
     <accordion-demo></accordion-demo>
   </ng-sample-box>
       
@@ -53,7 +51,6 @@ let html = require('!!raw!./demos/accordion-demo.component.html');
 export class AccordionSectionComponent {
   public name: string = 'Accordion';
   public src: string = 'https://github.com/valor-software/ng2-bootstrap/tree/development/src/accordion';
-  public html: string = html;
-  public ts: string = ts;
   public titleDoc: string = titleDoc;
+  public demos: any = DEMOS;
 }

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

@@ -1,5 +1,7 @@
-export const DEMO_COMPONENTS = [
+import { AccordionDemoComponent } from './accordion-demo.component';
 
+export const DEMO_COMPONENTS = [
+  AccordionDemoComponent
 ];
 
 export const DEMOS = {

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

@@ -5,13 +5,11 @@ import { AccordionModule } from 'ng2-bootstrap';
 
 import { SharedModule } from '../../shared';
 import { AccordionSectionComponent } from './accordion-section.component';
-import { AccordionDemoComponent } from './demos/accordion-demo.component';
 import { DEMO_COMPONENTS } from './demos';
 
 @NgModule({
   declarations: [
     AccordionSectionComponent,
-    AccordionDemoComponent,
     ...DEMO_COMPONENTS
   ],
   imports: [

demo/src/app/components/alerts/alerts-section.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { DEMOS } from './demos/index';
+import { DEMOS } from './demos';
 
 // webpack html imports
 let titleDoc = require('html!markdown!./docs/usage.md');

demo/src/app/components/buttons/buttons-section.component.ts

@@ -1,11 +1,9 @@
 import { Component } from '@angular/core';
+import { DEMOS } from './demos';
 
 // webpack html imports
 let titleDoc = require('html!markdown!./docs/title.md');
 
-let ts = require('!!raw?lang=typescript!./demos/buttons-demo.component.ts');
-let html = require('!!raw?lang=markup!./demos/buttons-demo.component.html');
-
 @Component({
   selector: 'buttons-section',
   template: `
@@ -35,7 +33,7 @@ let html = require('!!raw?lang=markup!./demos/buttons-demo.component.html');
     <!-- basic -->
   <p>Click headers to expand/collapse content that is broken into logical sections, much like tabs.</p>
     
-  <ng-sample-box [ts]="ts" [html]="html">
+  <ng-sample-box [ts]="demos.old.component" [html]="demos.old.html">
     <buttons-demo></buttons-demo>
   </ng-sample-box>
       
@@ -46,8 +44,7 @@ let html = require('!!raw?lang=markup!./demos/buttons-demo.component.html');
 })
 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 src:string = 'https://github.com/valor-software/ng2-bootstrap/tree/development/src/buttons';
   public titleDoc:string = titleDoc;
+  public demos: any = DEMOS;
 }

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

@@ -0,0 +1,12 @@
+import { ButtonsDemoComponent } from './buttons-demo.component';
+
+export const DEMO_COMPONENTS = [
+  ButtonsDemoComponent
+];
+
+export const DEMOS = {
+  old: {
+    component: require('!!raw?lang=typescript!./buttons-demo.component'),
+    html: require('!!raw?lang=markup!./buttons-demo.component.html')
+  }
+};

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

@@ -3,13 +3,13 @@ import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { SharedModule } from '../../shared';
 import { ButtonsSectionComponent } from './buttons-section.component';
-import { ButtonsDemoComponent } from './demos/buttons-demo.component';
 import { ButtonsModule } from 'ng2-bootstrap';
+import { DEMO_COMPONENTS } from './demos';
 
 @NgModule({
   declarations: [
     ButtonsSectionComponent,
-    ButtonsDemoComponent
+    ...DEMO_COMPONENTS
   ],
   imports: [
     ButtonsModule.forRoot(),

demo/src/app/components/carousel/carousel-section.component.ts

@@ -1,11 +1,9 @@
 import { Component } from '@angular/core';
+import { DEMOS } from './demos';
 
 // webpack html imports
 let titleDoc = require('html!markdown!./docs/title.md');
 
-let ts = require('!!raw?lang=typescript!./demos/carousel-demo.component.ts');
-let html = require('!!raw?lang=markup!./demos/carousel-demo.component.html');
-
 @Component({
   selector: 'carousel-section',
   template: `
@@ -35,7 +33,7 @@ let html = require('!!raw?lang=markup!./demos/carousel-demo.component.html');
   <h2 id="examples">Examples</h2>
    
   <!-- basic -->
-  <ng-sample-box [ts]="ts" [html]="html">
+  <ng-sample-box [ts]="demos.old.component" [html]="demos.old.html">
     <carousel-demo></carousel-demo>
   </ng-sample-box>
   
@@ -47,8 +45,7 @@ let html = require('!!raw?lang=markup!./demos/carousel-demo.component.html');
 })
 export class CarouselSectionComponent {
   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 src:string = 'https://github.com/valor-software/ng2-bootstrap/tree/development/src/carousel';
+  public demos: any = DEMOS;
   public titleDoc:string = titleDoc;
 }

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

@@ -0,0 +1,12 @@
+import { CarouselDemoComponent } from './carousel-demo.component';
+
+export const DEMO_COMPONENTS = [
+  CarouselDemoComponent
+];
+
+export const DEMOS = {
+  old: {
+    component: require('!!raw?lang=typescript!./carousel-demo.component'),
+    html: require('!!raw?lang=markup!./carousel-demo.component.html')
+  }
+};

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

@@ -3,14 +3,14 @@ import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { SharedModule } from '../../shared';
 
-import { CarouselDemoComponent } from './demos/carousel-demo.component';
 import { CarouselSectionComponent } from './carousel-section.component';
 import { CarouselModule } from 'ng2-bootstrap';
+import { DEMO_COMPONENTS } from './demos';
 
 @NgModule({
   declarations:[
-    CarouselDemoComponent,
-    CarouselSectionComponent
+    CarouselSectionComponent,
+    ...DEMO_COMPONENTS
   ],
   imports:[
     CarouselModule.forRoot(),

demo/src/app/components/collapse/collapse-section.component.ts

@@ -1,11 +1,9 @@
 import { Component } from '@angular/core';
+import { DEMOS } from './demos';
 
 // webpack html imports
 let titleDoc = require('html!markdown!./docs/title.md');
 
-let ts = require('!!raw?lang=typescript!./demos/collapse-demo.component.ts');
-let html = require('!!raw?lang=markup!./demos/collapse-demo.component.html');
-
 @Component({
   selector: 'collapse-section',
   template: `
@@ -34,19 +32,17 @@ let html = require('!!raw?lang=markup!./demos/collapse-demo.component.html');
   <h2 id="examples">Examples</h2>
       
   <!-- basic -->
-  <ng-sample-box [ts]="ts" [html]="html">
+  <ng-sample-box [ts]="demos.old.component" [html]="demos.old.html">
     <collapse-demo></collapse-demo>
   </ng-sample-box>
       
   <h2 id="api-reference">API Reference</h2>
   <ng-api-doc id="collapse-directive" directive="CollapseDirective"></ng-api-doc>
-  
 </demo-section>`
 })
 export class CollapseSectionComponent {
   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 src:string = 'https://github.com/valor-software/ng2-bootstrap/tree/development/src/collapse';
+  public demos: any = DEMOS;
   public titleDoc:string = titleDoc;
 }

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

@@ -0,0 +1,12 @@
+import { CollapseDemoComponent } from './collapse-demo.component';
+
+export const DEMO_COMPONENTS = [
+  CollapseDemoComponent
+];
+
+export const DEMOS = {
+  old: {
+    component: require('!!raw?lang=typescript!./collapse-demo.component'),
+    html: require('!!raw?lang=markup!./collapse-demo.component.html')
+  }
+};

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

@@ -2,14 +2,14 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { SharedModule } from '../../shared';
-import { CollapseDemoComponent } from './demos/collapse-demo.component';
 import { CollapseSectionComponent } from './collapse-section.component';
 import { CollapseModule } from 'ng2-bootstrap';
+import { DEMO_COMPONENTS } from './demos';
 
 @NgModule({
   declarations: [
-    CollapseDemoComponent,
-    CollapseSectionComponent
+    CollapseSectionComponent,
+    ...DEMO_COMPONENTS
   ],
   imports: [
     CollapseModule.forRoot(),

demo/src/app/components/datepicker/datepicker-section.component.ts

@@ -1,12 +1,9 @@
 // https://api.jqueryui.com/datepicker/
 import { Component } from '@angular/core';
-
+import { DEMOS } from './demos';
 // webpack html imports
 let titleDoc = require('html!markdown!./docs/title.md');
 
-let ts = require('!!raw?lang=typescript!./demos/datepicker-demo.component.ts');
-let html = require('!!raw?lang=markup!./demos/datepicker-demo.component.html');
-
 @Component({
   selector: 'datepicker-section',
   template: `
@@ -34,7 +31,7 @@ let html = require('!!raw?lang=markup!./demos/datepicker-demo.component.html');
 
   <h2 id="examples">Examples</h2>
 
-  <ng-sample-box [ts]="ts" [html]="html">
+  <ng-sample-box [ts]="demos.old.component" [html]="demos.old.html">
     <datepicker-demo></datepicker-demo>
   </ng-sample-box>
   
@@ -44,8 +41,7 @@ let html = require('!!raw?lang=markup!./demos/datepicker-demo.component.html');
 })
 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 src:string = 'https://github.com/valor-software/ng2-bootstrap/tree/development/src/datepicker';
+  public demos: any = DEMOS;
   public titleDoc:string = titleDoc;
 }

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

@@ -0,0 +1,12 @@
+import { DatepickerDemoComponent } from './datepicker-demo.component';
+
+export const DEMO_COMPONENTS = [
+  DatepickerDemoComponent
+];
+
+export const DEMOS = {
+  old: {
+    component: require('!!raw?lang=typescript!./datepicker-demo.component.html'),
+    html: require('!!raw?lang=markup!./datepicker-demo.component')
+  }
+};

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

@@ -2,14 +2,14 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { SharedModule } from '../../shared';
-import { DatepickerDemoComponent } from './demos/datepicker-demo.component';
 import { DatepickerSectionComponent } from './datepicker-section.component';
 import { DatepickerModule } from 'ng2-bootstrap';
+import { DEMO_COMPONENTS } from './demos';
 
 @NgModule({
   declarations:[
-    DatepickerDemoComponent,
-    DatepickerSectionComponent
+    DatepickerSectionComponent,
+    ...DEMO_COMPONENTS
   ],
   imports:[
     DatepickerModule.forRoot(),

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

@@ -0,0 +1,12 @@
+import { DropdownDemoComponent } from './dropdown-demo.component';
+
+export const DEMO_COMPONENTS = [
+  DropdownDemoComponent
+];
+
+export const DEMOS = {
+  old: {
+    component: require('!!raw?lang=typescript!./dropdown-demo.component'),
+    html: require('!!raw?lang=markup!./dropdown-demo.component.html')
+  }
+};

demo/src/app/components/dropdown/dropdown-section.component.ts

@@ -1,11 +1,9 @@
 import { Component } from '@angular/core';
+import { DEMOS } from './demos';
 
 // webpack html imports
 let titleDoc = require('html!markdown!./docs/title.md');
 
-let ts = require('!!raw?lang=typescript!./demos/dropdown-demo.component.ts');
-let html = require('!!raw?lang=markup!./demos/dropdown-demo.component.html');
-
 @Component({
   selector: 'dropdown-section',
   template: `
@@ -36,7 +34,7 @@ let html = require('!!raw?lang=markup!./demos/dropdown-demo.component.html');
   <h2 id="examples">Examples</h2>
       
   <!-- basic -->
-  <ng-sample-box [ts]="ts" [html]="html">
+  <ng-sample-box [ts]="demos.old.component" [html]="demos.old.html">
     <dropdown-demo></dropdown-demo>
   </ng-sample-box>
       
@@ -48,8 +46,7 @@ let html = require('!!raw?lang=markup!./demos/dropdown-demo.component.html');
 })
 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 src:string = 'https://github.com/valor-software/ng2-bootstrap/tree/development/src/dropdown';
+  public demos: any = DEMOS;
   public titleDoc:string = titleDoc;
 }

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

@@ -2,14 +2,14 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { SharedModule } from '../../shared';
-import { DropdownDemoComponent } from './demos/dropdown-demo.component';
 import { DropdownSectionComponent } from './dropdown-section.component';
 import { DropdownModule } from 'ng2-bootstrap';
+import { DEMO_COMPONENTS } from './demos';
 
 @NgModule({
   declarations: [
-    DropdownDemoComponent,
-    DropdownSectionComponent
+    DropdownSectionComponent,
+    ...DEMO_COMPONENTS
   ],
   imports: [
     DropdownModule.forRoot(),

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

@@ -0,0 +1,12 @@
+import { ModalDemoComponent } from './modal-demo.component';
+
+export const DEMO_COMPONENTS = [
+  ModalDemoComponent
+];
+
+export const DEMOS = {
+  old: {
+    component: require('!!raw?lang=typescript!./modal-demo.component'),
+    html: require('!!raw?lang=markup!./modal-demo.component.html')
+  }
+};