feat(progress bar): add basic and control statuses

Progress now has `basic` status by default.

src/framework/theme/components/progress-bar/progress-bar.component.ts

@@ -71,6 +71,9 @@ import { NbComponentStatus } from '../component-status';
  * progress-bar-giant-text-font-size:
  * progress-bar-giant-text-font-weight:
  * progress-bar-giant-text-line-height:
+ * progress-bar-basic-background-color:
+ * progress-bar-basic-filled-background-color:
+ * progress-bar-basic-text-color:
  * progress-bar-primary-background-color:
  * progress-bar-primary-filled-background-color:
  * progress-bar-primary-text-color:
@@ -86,6 +89,9 @@ import { NbComponentStatus } from '../component-status';
  * progress-bar-danger-background-color:
  * progress-bar-danger-filled-background-color:
  * progress-bar-danger-text-color:
+ * progress-bar-control-background-color:
+ * progress-bar-control-filled-background-color:
+ * progress-bar-control-text-color:
  */
 @Component({
   selector: 'nb-progress-bar',
@@ -107,9 +113,9 @@ export class NbProgressBarComponent {
   @Input() value: number = 0;
 
   /**
-   * Progress bar background (`primary` (default), `info`, `success`, `warning`, `danger`)
+   * Progress bar background (`basic` (default), `primary`, `info`, `success`, `warning`, `danger`, `control`)
    */
-  @Input() status: NbComponentStatus = 'primary';
+  @Input() status: NbComponentStatus = 'basic';
 
   /**
    * Progress bar size (`tiny`, `small`, `medium` (default), `large`, `giant`)
@@ -170,4 +176,14 @@ export class NbProgressBarComponent {
   get danger(): boolean {
     return this.status === 'danger';
   }
+
+  @HostBinding('class.status-basic')
+  get basic(): boolean {
+    return this.status === 'basic';
+  }
+
+  @HostBinding('class.status-control')
+  get control(): boolean {
+    return this.status === 'control';
+  }
 }

src/framework/theme/styles/themes/_mapping.scss

@@ -1328,23 +1328,34 @@ $eva-mapping: (
   progress-bar-giant-text-font-weight: text-subtitle-font-weight,
   progress-bar-giant-text-line-height: text-subtitle-line-height,
 
+  progress-bar-basic-background-color: background-basic-color-2,
+  progress-bar-basic-filled-background-color: background-basic-color-4,
+  progress-bar-basic-text-color: text-basic-color,
+
   progress-bar-primary-background-color: background-basic-color-3,
   progress-bar-primary-filled-background-color: color-primary-default,
   progress-bar-primary-text-color: text-control-color,
+
   progress-bar-success-background-color: background-basic-color-3,
   progress-bar-success-filled-background-color: color-success-default,
   progress-bar-success-text-color: text-control-color,
+
   progress-bar-info-background-color: background-basic-color-3,
   progress-bar-info-filled-background-color: color-info-default,
   progress-bar-info-text-color: text-control-color,
+
   progress-bar-warning-background-color: background-basic-color-3,
   progress-bar-warning-filled-background-color: color-warning-default,
   progress-bar-warning-text-color: text-control-color,
+
   progress-bar-danger-background-color: background-basic-color-3,
   progress-bar-danger-filled-background-color: color-danger-default,
   progress-bar-danger-text-color: text-control-color,
 
-  alert-background-color: background-basic-color-2,
+  progress-bar-control-background-color: background-basic-color-3,
+  progress-bar-control-filled-background-color: color-control-default,
+  progress-bar-control-text-color: color-basic-800,
+
   alert-border-radius: border-radius,
   alert-bottom-margin: 1.5rem,
   alert-padding: 1rem 1.125rem,

src/playground/with-layout/progress-bar/progress-bar-status.component.html

@@ -1,9 +1,13 @@
 <nb-card>
   <nb-card-body>
-    <nb-progress-bar [value]="20" status="primary">primary</nb-progress-bar>
-    <nb-progress-bar [value]="40" status="info">info</nb-progress-bar>
+    <nb-progress-bar [value]="20" status="basic">basic</nb-progress-bar>
+    <nb-progress-bar [value]="30" status="primary">primary</nb-progress-bar>
+    <nb-progress-bar [value]="50" status="info">info</nb-progress-bar>
     <nb-progress-bar [value]="60" status="success">success</nb-progress-bar>
-    <nb-progress-bar [value]="80" status="warning">warning</nb-progress-bar>
-    <nb-progress-bar [value]="100" status="danger">danger</nb-progress-bar>
+    <nb-progress-bar [value]="70" status="warning">warning</nb-progress-bar>
+    <nb-progress-bar [value]="80" status="danger">danger</nb-progress-bar>
+    <div class="control-status-example">
+      <nb-progress-bar [value]="90" status="control">control</nb-progress-bar>
+    </div>
   </nb-card-body>
 </nb-card>

src/playground/with-layout/progress-bar/progress-bar-status.component.scss

@@ -0,0 +1,9 @@
+@import '../../styles/themes';
+
+nb-progress-bar ~ nb-progress-bar {
+  margin-top: 1rem;
+}
+
+.control-status-example {
+  margin-top: 1rem;
+}

src/playground/with-layout/progress-bar/progress-bar-status.component.ts

@@ -3,11 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nb-progress-bar-status',
   templateUrl: './progress-bar-status.component.html',
-  styles: [`
-    nb-progress-bar ~ nb-progress-bar {
-      margin-top: 1rem;
-    }
-  `],
+  styleUrls: ['./progress-bar-status.component.scss'],
 })
 
 export class ProgressBarStatusComponent {