feat(progressbar): add config file for progressbar component

* feat(karma config for saucelabs testing)

* revert changes

* feat(progressbar): add config file for progressbar component

src/progressbar/index.ts

@@ -2,3 +2,4 @@ export { BarComponent } from './bar.component';
 export { ProgressDirective } from './progress.directive';
 export { ProgressbarComponent } from './progressbar.component';
 export { ProgressbarModule } from './progressbar.module';
+export { ProgressbarConfig } from './progressbar.config';

src/progressbar/progress.directive.ts

@@ -1,16 +1,11 @@
-import { Directive, HostBinding, Input, OnInit } from '@angular/core';
+import { Directive, HostBinding, Input } from '@angular/core';
 
 import { BarComponent } from './bar.component';
 
-const progressConfig = {
-  animate: true,
-  max: 100
-};
-
 // todo: progress element conflict with bootstrap.css
 // todo: need hack: replace host element with div
 @Directive({selector: 'bs-progress, [progress]'})
-export class ProgressDirective implements OnInit {
+export class ProgressDirective  {
   @Input() public animate:boolean;
 
   @HostBinding('attr.max')
@@ -32,11 +27,6 @@ export class ProgressDirective implements OnInit {
 
   protected _max:number;
 
-  public ngOnInit():void {
-    this.animate = this.animate !== false;
-    this.max = typeof this.max === 'number' ? this.max : progressConfig.max;
-  }
-
   public addBar(bar:BarComponent):void {
     if (!this.animate) {
       bar.transition = 'none';

src/progressbar/progressbar.component.ts

@@ -1,4 +1,5 @@
 import { Component, Input } from '@angular/core';
+import { ProgressbarConfig } from './progressbar.config';
 
 @Component({
   selector: 'progressbar',
@@ -15,4 +16,8 @@ export class ProgressbarComponent {
   @Input() public max:number;
   @Input() public type:string;
   @Input() public value:number;
+
+  public constructor(config: ProgressbarConfig) {
+    Object.assign(this, config);
+  }
 }

src/progressbar/progressbar.config.ts

@@ -0,0 +1,7 @@
+import { Injectable } from '@angular/core';
+
+Injectable();
+export class ProgressbarConfig {
+  public animate: Boolean = true;
+  public max: number = 100;
+}

src/progressbar/progressbar.module.ts

@@ -4,6 +4,7 @@ import { NgModule, ModuleWithProviders } from '@angular/core';
 import { BarComponent } from './bar.component';
 import { ProgressDirective } from './progress.directive';
 import { ProgressbarComponent } from './progressbar.component';
+import { ProgressbarConfig } from './progressbar.config';
 
 @NgModule({
   imports: [CommonModule],
@@ -12,6 +13,6 @@ import { ProgressbarComponent } from './progressbar.component';
 })
 export class ProgressbarModule {
   public static forRoot(): ModuleWithProviders {
-    return {ngModule: ProgressbarModule, providers: []};
+    return {ngModule: ProgressbarModule, providers: [ProgressbarConfig]};
   }
 }

src/spec/progressbar.component.spec.ts

@@ -10,7 +10,7 @@ describe('Component: Progress Bar', () => {
 
   it('should work correctly with default values', () => {
     const tpl = `<progressbar></progressbar>`;
-    TestBed.configureTestingModule({declarations: [TestProgressbarComponent], imports: [ProgressbarModule]});
+    TestBed.configureTestingModule({declarations: [TestProgressbarComponent], imports: [ProgressbarModule.forRoot()]});
     TestBed.overrideComponent(TestProgressbarComponent, {set: {template: tpl}});
     fixture = TestBed.createComponent(TestProgressbarComponent);
     element = fixture.nativeElement;
@@ -22,7 +22,7 @@ describe('Component: Progress Bar', () => {
 
   it('checking appropriate styles after setting up of type', () => {
     const tpl = `<progressbar [type]="'warning'"></progressbar>`;
-    TestBed.configureTestingModule({declarations: [TestProgressbarComponent], imports: [ProgressbarModule]});
+    TestBed.configureTestingModule({declarations: [TestProgressbarComponent], imports: [ProgressbarModule.forRoot()]});
     TestBed.overrideComponent(TestProgressbarComponent, {set: {template: tpl}});
     fixture = TestBed.createComponent(TestProgressbarComponent);
     element = fixture.nativeElement;
@@ -33,7 +33,7 @@ describe('Component: Progress Bar', () => {
 
   it('checking of correct calculation of percent value(bar length)', () => {
     const tpl = `<progressbar [max]="100" [value]="60"></progressbar>`;
-    TestBed.configureTestingModule({declarations: [TestProgressbarComponent], imports: [ProgressbarModule]});
+    TestBed.configureTestingModule({declarations: [TestProgressbarComponent], imports: [ProgressbarModule.forRoot()]});
     TestBed.overrideComponent(TestProgressbarComponent, {set: {template: tpl}});
     fixture = TestBed.createComponent(TestProgressbarComponent);
     element = fixture.nativeElement;
@@ -62,7 +62,7 @@ describe('Component: Progress Bar', () => {
         </bar>
       </div>
     `;
-    TestBed.configureTestingModule({declarations: [TestProgressbarComponent], imports: [ProgressbarModule]});
+    TestBed.configureTestingModule({declarations: [TestProgressbarComponent], imports: [ProgressbarModule.forRoot()]});
     TestBed.overrideComponent(TestProgressbarComponent, {set: {template: tpl}});
     fixture = TestBed.createComponent(TestProgressbarComponent);
     let context = fixture.debugElement.componentInstance;