add: modules

README.md

@@ -27,10 +27,13 @@ System.config(config);
 ```
 
 ### Usage
-To import a component simply import the one of the classes listed below like this:  
+Import the `NgBComponentsModule` into your app module and add it to your app module's imports
 ```typescript
-import {ButtonBComponent} from 'ng-bcomponents`;  
-import {LinkBComponent} from 'ng-bcomponents`;  
+import {NgBComponentsModule} from 'ng-bcomponents';
+@NgModule({
+    imports: [NgBComponentsModule]
+})
+export class AppModule {}
 ```
 
 ## BComponents

bcomponents/alert/alert.bcomponent.ts

@@ -1,10 +1,10 @@
 import {Component, ViewChild} from '@angular/core';
-import {BComponent, BComponentAttributes, BComponentInputs, DisplayType} from '../bcomponent';
+import {BComponent, BComponentInputs, DisplayType} from '../bcomponent';
 
 @Component({
     selector: "alert-bcomponent",
     templateUrl: "alert.bcomponent.html",
-    directives: [BComponentAttributes],
+    directives: [],
     inputs: BComponentInputs.concat(['text', 'dismissible', 'hidden', 'type'])
 })
 export class AlertBComponent extends BComponent {

bcomponents/alert/alert.module.ts

@@ -0,0 +1,11 @@
+import {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {AlertBComponent} from './alert.bcomponent';
+import {AttributesModule} from '../attributes.module';
+
+@NgModule({
+    imports: [BrowserModule, AttributesModule],
+    declarations: [AlertBComponent],
+    exports: [AlertBComponent]
+})
+export class AlertModule {}

bcomponents/attributes.module.ts

@@ -0,0 +1,10 @@
+import {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {BComponentAttributes} from './bcomponent';
+
+@NgModule({
+    imports: [BrowserModule],
+    declarations: [BComponentAttributes],
+    exports: [BComponentAttributes]
+})
+export class AttributesModule {}

bcomponents/badge/badge.bcomponent.ts

@@ -1,10 +1,10 @@
 import {Component} from '@angular/core';
-import {BComponent, BComponentAttributes, BComponentInputs} from '../bcomponent';
+import {BComponent, BComponentInputs} from '../bcomponent';
 
 @Component({
     selector: "badge-bcomponent",
     templateUrl: "badge.bcomponent.html",
-    directives: [BComponentAttributes],
+    directives: [],
     inputs: BComponentInputs.concat(['value'])
 })
 export class BadgeBComponent extends BComponent {

bcomponents/badge/badge.module.ts

@@ -0,0 +1,11 @@
+import {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {BadgeBComponent} from './badge.bcomponent';
+import {AttributesModule} from '../attributes.module';
+
+@NgModule({
+    imports: [BrowserModule, AttributesModule],
+    declarations: [BadgeBComponent],
+    exports: [BadgeBComponent]
+})
+export class BadgeModule {}

bcomponents/bcomponent.module.ts

@@ -0,0 +1,56 @@
+import {NgModule} from '@angular/core';
+
+import {AttributesModule} from './attributes.module';
+
+import {AlertModule} from './alert/alert.module';
+import {BadgeModule} from './badge/badge.module';
+import {BlockquoteModule} from './blockquote/blockquote.module';
+import {BreadcrumbModule} from './breadcrumb/breadcrumb.module';
+import {ButtonModule} from './button/button.module';
+import {ButtonGroupModule} from './button-group/button-group.module';
+import {DropdownModule} from './dropdown/dropdown.module';
+import {HeadingModule} from './heading/heading.module';
+import {InputGroupModule} from './input-group/input-group.module';
+import {JumbotronModule} from './jumbotron/jumbotron.module';
+import {LabelModule} from './label/label.module';
+import {LinkModule} from './link/link.module';
+import {ListGroupModule} from './list-group/list-group.module';
+import {MediaModule} from './media/media.module';
+import {ModalModule} from './modal/modal.module';
+import {PanelModule} from './panel/panel.module';
+import {ProgressbarModule} from './progressbar/progressbar.module';
+import {SidenavModule} from './sidenav/sidenav.module';
+import {TableModule} from './table/table.module';
+import {ThumbnailModule} from './thumbnail/thumbnail.module';
+import {WellModule} from './well/well.module';
+
+var Modules: any[] = [
+    AlertModule,
+    BadgeModule,
+    BlockquoteModule,
+    BreadcrumbModule,
+    ButtonModule,
+    ButtonGroupModule,
+    DropdownModule,
+    HeadingModule,
+    InputGroupModule,
+    JumbotronModule,
+    LabelModule,
+    LinkModule,
+    ListGroupModule,
+    MediaModule,
+    ModalModule,
+    PanelModule,
+    ProgressbarModule,
+    SidenavModule,
+    TableModule,
+    ThumbnailModule,
+    WellModule
+];
+
+@NgModule({
+    declarations: [],
+    imports: [...Modules, AttributesModule],
+    exports: [...Modules]
+})
+export class NgBComponentsModule {}

bcomponents/blockquote/blockquote.bcomponent.ts

@@ -1,10 +1,10 @@
 import {Component} from '@angular/core';
-import {BComponent, BComponentAttributes, BComponentInputs} from '../bcomponent';
+import {BComponent, BComponentInputs} from '../bcomponent';
 
 @Component({
     selector: 'blockquote-bcomponent',
     templateUrl: 'blockquote.bcomponent.html',
-    directives: [BComponentAttributes],
+    directives: [],
     inputs: BComponentInputs.concat(['body', 'footer', 'reverse'])
 })
 export class BlockquoteBComponent extends BComponent {

bcomponents/blockquote/blockquote.module.ts

@@ -0,0 +1,11 @@
+import {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {AttributesModule} from '../attributes.module';
+import {BlockquoteBComponent} from './blockquote.bcomponent';
+
+@NgModule({
+    imports: [BrowserModule, AttributesModule],
+    declarations: [BlockquoteBComponent],
+    exports: [BlockquoteBComponent]
+})
+export class BlockquoteModule {}

bcomponents/breadcrumb/breadcrumb.bcomponent.ts

@@ -1,11 +1,11 @@
 import {Component} from '@angular/core';
-import {BComponent, BComponentAttributes, BComponentInputs} from '../bcomponent';
+import {BComponent, BComponentInputs} from '../bcomponent';
 import {LinkBComponent} from '../link/link.bcomponent';
 
 @Component({
     selector: 'breadcrumb-bcomponent',
     templateUrl: 'breadcrumb.bcomponent.html',
-    directives: [BComponentAttributes, LinkBComponent],
+    directives: [],
     inputs: BComponentInputs.concat('items', 'active')
 })
 export class BreadcrumbBComponent extends BComponent {

bcomponents/breadcrumb/breadcrumb.module.ts

@@ -0,0 +1,12 @@
+import {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {AttributesModule} from '../attributes.module';
+import {BreadcrumbBComponent} from './breadcrumb.bcomponent';
+import {LinkModule} from '../link/link.module';
+
+@NgModule({
+    imports: [BrowserModule, AttributesModule, LinkModule],
+    declarations: [BreadcrumbBComponent],
+    exports: [BreadcrumbBComponent]
+})
+export class BreadcrumbModule {}

bcomponents/button-group/button-group.bcomponent.ts

@@ -1,12 +1,12 @@
 import {Component} from '@angular/core';
-import {BComponent, BComponentAttributes, BComponentInputs, DisplaySize} from '../bcomponent';
+import {BComponent, BComponentInputs, DisplaySize} from '../bcomponent';
 import {ButtonBComponent} from '../button/button.bcomponent';
 import {ComponentFactory} from '../component.factory';
 
 @Component({
     selector: 'button-group-bcomponent',
     templateUrl: 'button-group.bcomponent.html',
-    directives: [BComponentAttributes],
+    directives: [],
     inputs: BComponentInputs.concat(['items', 'size'])
 })
 export class ButtonGroupBComponent extends BComponent {

bcomponents/button-group/button-group.module.ts

@@ -0,0 +1,12 @@
+import {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {AttributesModule} from '../attributes.module';
+import {ButtonGroupBComponent} from './button-group.bcomponent';
+import {ButtonModule} from '../button/button.module';
+
+@NgModule({
+    imports: [BrowserModule, AttributesModule, ButtonModule],
+    declarations: [ButtonGroupBComponent],
+    exports: [ButtonGroupBComponent]
+})
+export class ButtonGroupModule {}

bcomponents/button/button.bcomponent.ts

@@ -1,10 +1,10 @@
 import {Component, ChangeDetectorRef} from '@angular/core';
-import {BComponent, BComponentAttributes, BComponentInputs, DisplayType} from '../bcomponent';
+import {BComponent, BComponentInputs, DisplayType} from '../bcomponent';
 
 @Component({
     selector: "button-bcomponent",
     templateUrl: "button.bcomponent.html",
-    directives: [BComponentAttributes],
+    directives: [],
     inputs: BComponentInputs.concat(['text', 'type', 'click'])
 })
 export class ButtonBComponent extends BComponent {

bcomponents/button/button.module.ts

@@ -0,0 +1,11 @@
+import {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {AttributesModule} from '../attributes.module';
+import {ButtonBComponent} from './button.bcomponent';
+
+@NgModule({
+    imports: [BrowserModule, AttributesModule],
+    declarations: [ButtonBComponent],
+    exports: [ButtonBComponent]
+})
+export class ButtonModule {}

bcomponents/dropdown/dropdown.bcomponent.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {BComponent, BComponentAttributes, BComponentInputs} from '../bcomponent';
+import {BComponent, BComponentInputs} from '../bcomponent';
 import {LinkBComponent} from '../link/link.bcomponent';
 
 export type DropdownType = "separator" | "header" | "default";
@@ -38,7 +38,7 @@ export class DropdownItem {
 @Component({
     selector: 'dropdown-bcomponent',
     templateUrl: 'dropdown.bcomponent.html',
-    directives: [BComponentAttributes],
+    directives: [],
     inputs: BComponentInputs.concat(['items', 'title'])
 })
 export class DropdownBComponent extends BComponent {

bcomponents/dropdown/dropdown.module.ts

@@ -0,0 +1,12 @@
+import {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {AttributesModule} from '../attributes.module';
+import {DropdownBComponent} from './dropdown.bcomponent';
+import {LinkModule} from '../link/link.module';
+
+@NgModule({
+    imports: [BrowserModule, AttributesModule, LinkModule],
+    declarations: [DropdownBComponent],
+    exports: [DropdownBComponent]
+})
+export class DropdownModule {}

bcomponents/heading/heading.bcomponent.ts

@@ -1,10 +1,10 @@
 import {Component} from '@angular/core';
-import {BComponent, BComponentInputs, BComponentAttributes} from '../bcomponent';
+import {BComponent, BComponentInputs} from '../bcomponent';
 
 @Component({
     selector: 'heading-bcomponent',
     templateUrl: 'heading.bcomponent.html',
-    directives: [BComponentAttributes],
+    directives: [],
     inputs: BComponentInputs.concat(['title', 'subtitle', 'size'])
 })
 export class HeadingBComponent extends BComponent{

bcomponents/heading/heading.module.ts

@@ -0,0 +1,11 @@
+import {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {AttributesModule} from '../attributes.module';
+import {HeadingBComponent} from './heading.bcomponent';
+
+@NgModule({
+    imports: [BrowserModule, AttributesModule],
+    declarations: [HeadingBComponent],
+    exports: [HeadingBComponent]
+})
+export class HeadingModule {}

bcomponents/input-group/input-group.bcomponent.ts

@@ -1,11 +1,11 @@
 import {Component} from '@angular/core';
-import {BComponent, BComponentAttributes, BComponentInputs, DisplayType, DisplaySize} from '../bcomponent';
+import {BComponent, BComponentInputs, DisplayType, DisplaySize} from '../bcomponent';
 import {ButtonBComponent} from '../button/button.bcomponent';
 
 @Component({
     selector: "input-group-bcomponent",
     templateUrl: "input-group.bcomponent.html",
-    directives: [BComponentAttributes],
+    directives: [],
     inputs: BComponentInputs.concat(['placeholder', 'model', 'size', 'frontText', 'backText', 'frontButton', 'backButton'])
 })
 export class InputGroupBComponent extends BComponent {

bcomponents/input-group/input-group.module.ts

@@ -0,0 +1,13 @@
+import {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {FormsModule} from '@angular/forms';
+import {AttributesModule} from '../attributes.module';
+import {InputGroupBComponent} from './input-group.bcomponent';
+import {ButtonModule} from '../button/button.module';
+
+@NgModule({
+    imports: [BrowserModule, FormsModule, AttributesModule, ButtonModule],
+    declarations: [InputGroupBComponent],
+    exports: [InputGroupBComponent]
+})
+export class InputGroupModule {}

bcomponents/jumbotron/jumbotron.bcomponent.ts

@@ -1,11 +1,11 @@
 import {Component} from '@angular/core';
-import {BComponent, BComponentInputs, BComponentAttributes} from '../bcomponent';
+import {BComponent, BComponentInputs} from '../bcomponent';
 import {HeadingBComponent} from '../heading/heading.bcomponent';
 
 @Component({
     selector: 'jumbotron-bcomponent',
     templateUrl: 'jumbotron.bcomponent.html',
-    directives: [BComponentAttributes, HeadingBComponent],
+    directives: [],
     inputs: BComponentInputs.concat(['heading', 'title', 'subtitle', 'body', 'size'])
 })
 export class JumbotronBComponent extends BComponent {

bcomponents/jumbotron/jumbotron.module.ts

@@ -0,0 +1,12 @@
+import {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {AttributesModule} from '../attributes.module';
+import {JumbotronBComponent} from './jumbotron.bcomponent';
+import {HeadingModule} from '../heading/heading.module';
+
+@NgModule({
+    imports: [BrowserModule, AttributesModule, HeadingModule],
+    declarations: [JumbotronBComponent],
+    exports: [JumbotronBComponent]
+})
+export class JumbotronModule {}

bcomponents/label/label.bcomponent.ts

@@ -1,10 +1,10 @@
 import {Component} from '@angular/core';
-import {BComponent, BComponentAttributes, BComponentInputs, DisplayType} from '../bcomponent';
+import {BComponent, BComponentInputs, DisplayType} from '../bcomponent';
 
 @Component({
     selector: "label-bcomponent",
     templateUrl: "label.bcomponent.html",
-    directives: [BComponentAttributes],
+    directives: [],
     inputs: BComponentInputs.concat(['text', 'type'])
 })
 export class LabelBComponent extends BComponent {

bcomponents/label/label.module.ts

@@ -0,0 +1,11 @@
+import {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {AttributesModule} from '../attributes.module';
+import {LabelBComponent} from './label.bcomponent';
+
+@NgModule({
+    imports: [BrowserModule, AttributesModule],
+    declarations: [LabelBComponent],
+    exports: [LabelBComponent]
+})
+export class LabelModule {}

bcomponents/link/link.bcomponent.ts

@@ -1,10 +1,10 @@
 import {Component} from '@angular/core';
-import {BComponent, BComponentAttributes, BComponentInputs} from '../bcomponent';
+import {BComponent, BComponentInputs} from '../bcomponent';
 
 @Component({
     selector: "link-bcomponent",
     templateUrl: "link.bcomponent.html",
-    directives: [BComponentAttributes],
+    directives: [],
     inputs: BComponentInputs.concat(['text', 'link', 'router'])
 })
 export class LinkBComponent extends BComponent {