feat(progressbar): allow to specify progressbar text type (#3394)

As advised on the Bootstrap documentation page when using some
background variants that is advisable to change the text color
accordingly, for example for readability purposes. The `textType` input
property allows to achieve this, adding support for binding text types
to `text-*` utility class on the progress bar.
Common scenario: progress bar with 'warning' type renders a white text on
the yellow background (assuming default BS). This change allows users to opt to
'dark' text type to improve the readability.

ref: https://getbootstrap.com/docs/4.3/utilities/colors/#background-color

demo/src/app/components/progressbar/demos/texttypes/progressbar-texttypes.html

@@ -0,0 +1,4 @@
+<p><ngb-progressbar type="success" textType="white" [value]="25" showValue="true"></ngb-progressbar></p>
+<p><ngb-progressbar type="dark" textType="white" [value]="50" showValue="true"></ngb-progressbar></p>
+<p><ngb-progressbar type="light" textType="success" [value]="75" showValue="true"></ngb-progressbar></p>
+<p><ngb-progressbar type="warning" textType="dark" [value]="100" showValue="true"></ngb-progressbar></p>

demo/src/app/components/progressbar/demos/texttypes/progressbar-texttypes.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+
+import { NgbdProgressbarTextTypes } from './progressbar-texttypes';
+
+@NgModule({
+  imports: [BrowserModule, NgbModule],
+  declarations: [NgbdProgressbarTextTypes],
+  exports: [NgbdProgressbarTextTypes],
+  bootstrap: [NgbdProgressbarTextTypes]
+})
+export class NgbdProgressbarTextTypesModule {}

demo/src/app/components/progressbar/demos/texttypes/progressbar-texttypes.ts

@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'ngbd-progressbar-texttypes',
+  templateUrl: './progressbar-texttypes.html'
+})
+export class NgbdProgressbarTextTypes {
+}

demo/src/app/components/progressbar/progressbar.module.ts

@@ -17,6 +17,8 @@ import { NgbdProgressbarShowValueModule } from './demos/showvalue/progressbar-sh
 import { NgbdProgressbarShowvalue } from './demos/showvalue/progressbar-showvalue';
 import { NgbdProgressbarStriped } from './demos/striped/progressbar-striped';
 import { NgbdProgressbarStripedModule } from './demos/striped/progressbar-striped.module';
+import { NgbdProgressbarTextTypes } from './demos/texttypes/progressbar-texttypes';
+import { NgbdProgressbarTextTypesModule } from './demos/texttypes/progressbar-texttypes.module';
 
 const DEMOS = {
   basic: {
@@ -25,6 +27,12 @@ const DEMOS = {
     code: require('!!raw-loader!./demos/basic/progressbar-basic').default,
     markup: require('!!raw-loader!./demos/basic/progressbar-basic.html').default
   },
+  texttypes: {
+    title: 'Contextual text progress bars',
+    type: NgbdProgressbarTextTypes,
+    code: require('!!raw-loader!./demos/texttypes/progressbar-texttypes').default,
+    markup: require('!!raw-loader!./demos/texttypes/progressbar-texttypes.html').default
+  },
   showvalue: {
     title: 'Progress bars with current value labels',
     type: NgbdProgressbarShowvalue,
@@ -78,7 +86,8 @@ export const ROUTES = [
     NgbdProgressbarStripedModule,
     NgbdProgressbarConfigModule,
     NgbdProgressbarLabelsModule,
-    NgbdProgressbarHeightModule
+    NgbdProgressbarHeightModule,
+    NgbdProgressbarTextTypesModule,
   ]
 })
 export class NgbdProgressbarModule {

src/progressbar/progressbar-config.spec.ts

@@ -7,6 +7,7 @@ describe('ngb-progressbar-config', () => {
     expect(config.max).toBe(100);
     expect(config.striped).toBe(false);
     expect(config.animated).toBe(false);
+    expect(config.textType).toBeUndefined();
     expect(config.type).toBeUndefined();
     expect(config.showValue).toBe(false);
     expect(config.height).toBeUndefined();

src/progressbar/progressbar-config.ts

@@ -11,6 +11,7 @@ export class NgbProgressbarConfig {
   max = 100;
   animated = false;
   striped = false;
+  textType: string;
   type: string;
   showValue = false;
   height: string;

src/progressbar/progressbar.spec.ts

@@ -37,6 +37,7 @@ describe('ngb-progressbar', () => {
       expect(progressCmp.max).toBe(defaultConfig.max);
       expect(progressCmp.animated).toBe(defaultConfig.animated);
       expect(progressCmp.striped).toBe(defaultConfig.striped);
+      expect(progressCmp.textType).toBe(defaultConfig.textType);
       expect(progressCmp.type).toBe(defaultConfig.type);
     });
 
@@ -186,6 +187,17 @@ describe('ngb-progressbar', () => {
       expect(getProgressbar(fixture.nativeElement)).toHaveCssClass('bg-dark');
     });
 
+    it('accepts a custom text type', () => {
+      const html = '<ngb-progressbar [value]="value" [textType]="textType"></ngb-progressbar>';
+      const fixture = createTestComponent(html);
+
+      expect(getProgressbar(fixture.nativeElement)).toHaveCssClass('text-light');
+
+      fixture.componentInstance.textType = 'info';
+      fixture.detectChanges();
+      expect(getProgressbar(fixture.nativeElement)).toHaveCssClass('text-info');
+    });
+
     it('accepts animated as normal attr', () => {
       const html = '<ngb-progressbar [value]="value" [animated]="animated"></ngb-progressbar>';
       const fixture = createTestComponent(html);
@@ -271,6 +283,7 @@ describe('ngb-progressbar', () => {
       config.max = 1000;
       config.striped = true;
       config.animated = true;
+      config.textType = 'white';
       config.type = 'success';
     }));
 
@@ -282,6 +295,7 @@ describe('ngb-progressbar', () => {
       expect(progressbar.max).toBe(config.max);
       expect(progressbar.striped).toBe(config.striped);
       expect(progressbar.animated).toBe(config.animated);
+      expect(progressbar.textType).toBe(config.textType);
       expect(progressbar.type).toBe(config.type);
     });
   });
@@ -291,6 +305,7 @@ describe('ngb-progressbar', () => {
     config.max = 1000;
     config.striped = true;
     config.animated = true;
+    config.textType = 'light';
     config.type = 'success';
 
     beforeEach(() => {
@@ -306,6 +321,7 @@ describe('ngb-progressbar', () => {
       expect(progressbar.max).toBe(config.max);
       expect(progressbar.striped).toBe(config.striped);
       expect(progressbar.animated).toBe(config.animated);
+      expect(progressbar.textType).toBe(config.textType);
       expect(progressbar.type).toBe(config.type);
     });
   });
@@ -317,5 +333,7 @@ class TestComponent {
   max = 50;
   animated = true;
   striped = true;
+
+  textType = 'light';
   type = 'warning';
 }

src/progressbar/progressbar.ts

@@ -10,9 +10,9 @@ import {NgbProgressbarConfig} from './progressbar-config';
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <div class="progress" [style.height]="height">
-      <div class="progress-bar{{type ? ' bg-' + type : ''}}{{animated ? ' progress-bar-animated' : ''}}{{striped ?
-    ' progress-bar-striped' : ''}}" role="progressbar" [style.width.%]="getPercentValue()"
-    [attr.aria-valuenow]="getValue()" aria-valuemin="0" [attr.aria-valuemax]="max">
+      <div class="progress-bar{{type ? ' bg-' + type : ''}}{{textType ? ' text-' + textType : ''}}
+      {{animated ? ' progress-bar-animated' : ''}}{{striped ? ' progress-bar-striped' : ''}}" role="progressbar" [style.width.%]="getPercentValue()"
+      [attr.aria-valuenow]="getValue()" aria-valuemin="0" [attr.aria-valuemax]="max">
         <span *ngIf="showValue" i18n="@@ngb.progressbar.value">{{getPercentValue()}}%</span><ng-content></ng-content>
       </div>
     </div>
@@ -50,6 +50,14 @@ export class NgbProgressbar {
    */
   @Input() showValue: boolean;
 
+  /**
+   * Optional text variant type of the progress bar.
+   *
+   * Supports types based on Bootstrap background color variants, like:
+   *  `"success"`, `"info"`, `"warning"`, `"danger"`, `"primary"`, `"secondary"`, `"dark"` and so on.
+   */
+  @Input() textType: string;
+
   /**
    * The type of the progress bar.
    *
@@ -76,6 +84,7 @@ export class NgbProgressbar {
     this.max = config.max;
     this.animated = config.animated;
     this.striped = config.striped;
+    this.textType = config.textType;
     this.type = config.type;
     this.showValue = config.showValue;
     this.height = config.height;