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;