fix(progressbar): fix type class name binding override (#5441)

* fix(progressbar): fix type class name binding override

Author: vitaliy-bobrov

src/progressbar/bar.component.ts

@@ -4,11 +4,12 @@ import {
   HostBinding,
   Input,
   OnDestroy,
-  OnInit
+  OnInit,
+  ElementRef,
+  Renderer2
 } from '@angular/core';
 
 import { ProgressbarComponent } from './progressbar.component';
-import { ProgressbarType } from './progressbar-type.interface';
 import { isBs3 } from 'ngx-bootstrap/utils';
 
 // todo: number pipe
@@ -19,7 +20,6 @@ import { isBs3 } from 'ngx-bootstrap/utils';
   host: {
     role: 'progressbar',
     'aria-valuemin': '0',
-    '[class]': '"progress-bar " + (type ? "progress-bar-" + type + " bg-" + type : "")',
     '[class.progress-bar-animated]': '!isBs3 && animate',
     '[class.progress-bar-striped]': 'striped',
     '[class.active]': 'isBs3 && animate',
@@ -33,7 +33,15 @@ export class BarComponent implements OnInit, OnDestroy {
   max: number;
 
   /** provide one of the four supported contextual classes: `success`, `info`, `warning`, `danger` */
-  @Input() type: ProgressbarType;
+  @Input()
+  get type(): string {
+    return this._type;
+  }
+
+  set type(v: string) {
+    this._type = v;
+    this.applyTypeClasses();
+  }
 
   /** current value of progress bar */
   @Input()
@@ -56,6 +64,8 @@ export class BarComponent implements OnInit, OnDestroy {
     return this.percent;
   }
 
+  @HostBinding('class.progress-bar') addClass = true;
+
   get isBs3(): boolean {
     return isBs3();
   }
@@ -66,8 +76,14 @@ export class BarComponent implements OnInit, OnDestroy {
   progress: ProgressbarComponent;
 
   protected _value: number;
-
-  constructor(@Host() progress: ProgressbarComponent) {
+  protected _type: string;
+  private _prevType: string;
+
+  constructor(
+    private el: ElementRef,
+    @Host() progress: ProgressbarComponent,
+    private renderer: Renderer2
+  ) {
     this.progress = progress;
   }
 
@@ -91,4 +107,22 @@ export class BarComponent implements OnInit, OnDestroy {
       this.percent -= totalPercentage - 100;
     }
   }
+
+  private applyTypeClasses(): void {
+    if (this._prevType) {
+      const barTypeClass = `progress-bar-${this._prevType}`;
+      const bgClass = `bg-${this._prevType}`;
+      this.renderer.removeClass(this.el.nativeElement, barTypeClass);
+      this.renderer.removeClass(this.el.nativeElement, bgClass);
+      this._prevType = null;
+    }
+
+    if (this._type) {
+      const barTypeClass = `progress-bar-${this._type}`;
+      const bgClass = `bg-${this._type}`;
+      this.renderer.addClass(this.el.nativeElement, barTypeClass);
+      this.renderer.addClass(this.el.nativeElement, bgClass);
+      this._prevType = this._type;
+    }
+  }
 }

src/spec/progressbar.component.spec.ts

@@ -133,4 +133,49 @@ describe('Component: Progress Bar', () => {
     expect(barElement.classList).toContain('progress-bar-danger');
     expect(barElement.style.width).toEqual('50%');
   });
+
+  it('check type binding does not override other class names', () => {
+    const tpl = `<progressbar [type]="typeValue" [animate]="true" [striped]="true"></progressbar>`;
+    TestBed.configureTestingModule({
+      declarations: [TestProgressbarComponent],
+      imports: [ProgressbarModule.forRoot()]
+    });
+    TestBed.overrideComponent(TestProgressbarComponent, {
+      set: { template: tpl }
+    });
+    fixture = TestBed.createComponent(TestProgressbarComponent);
+    const context = fixture.debugElement.componentInstance;
+    element = fixture.nativeElement;
+    fixture.detectChanges();
+    const barElement: HTMLElement = element.querySelector('bar');
+    expect(barElement.classList).toContain('progress-bar');
+    expect(barElement.classList).toContain('progress-bar-striped');
+    expect(barElement.classList).toContain('active');
+
+    context.typeValue = 'success';
+    fixture.detectChanges();
+    expect(barElement.classList).toContain('progress-bar');
+    expect(barElement.classList).toContain('progress-bar-striped');
+    expect(barElement.classList).toContain('active');
+    expect(barElement.classList).toContain('progress-bar-success');
+    expect(barElement.classList).toContain('bg-success');
+
+    context.typeValue = 'info';
+    fixture.detectChanges();
+    expect(barElement.classList).toContain('progress-bar');
+    expect(barElement.classList).toContain('progress-bar-striped');
+    expect(barElement.classList).toContain('active');
+    expect(barElement.classList).toContain('progress-bar-info');
+    expect(barElement.classList).toContain('bg-info');
+    expect(barElement.classList).not.toContain('progress-bar-success');
+    expect(barElement.classList).not.toContain('bg-success');
+
+    context.typeValue = null;
+    fixture.detectChanges();
+    expect(barElement.classList).toContain('progress-bar');
+    expect(barElement.classList).toContain('progress-bar-striped');
+    expect(barElement.classList).toContain('active');
+    expect(barElement.classList).not.toContain('progress-bar-info');
+    expect(barElement.classList).not.toContain('bg-info');
+  });
 });