fix(progressbar): fix bs4, animation, add striped option, remove bs4 demos (#3500)

* fix(progressbar): fix empty bs4 bar, add striped option, remove unnecessary DOM nesting

* fix(progressbar): fix animation, remove ProgressDirective, remove bs4 demos, simplify html

Author: IlyaSurmay

demo/src/app/components/+progressbar/demos/bs3/static/static.html

@@ -4,7 +4,7 @@ import { ProgressbarConfig } from 'ngx-bootstrap/progressbar';
 // such override allows to keep some initial values
 
 export function getProgressbarConfig(): ProgressbarConfig {
-  return Object.assign(new ProgressbarConfig(), { animate: false, max: 150 });
+  return Object.assign(new ProgressbarConfig(), { animate: true, striped: true,  max: 150 });
 }
 
 @Component({

demo/src/app/components/+progressbar/demos/bs4/dynamic/dynamic.html

@@ -6,8 +6,6 @@
 <progressbar [animate]="false" [value]="dynamic" type="success"><b>{{dynamic}}%</b></progressbar>
 
 <small><em>Object (changes type based on value)</em></small>
-<progressbar class="progress-striped active" [value]="dynamic" [type]="type">
-  {{type}} <i *ngIf="showWarning">!!!Watch out !!!</i>
-</progressbar>
+<progressbar class="progress-striped active" [value]="dynamic" [type]="type">{{type}}</progressbar>
 
 <button type="button" class="btn btn-sm btn-primary" (click)="random()">Randomize</button>

demo/src/app/components/+progressbar/demos/bs4/dynamic/dynamic.ts

@@ -28,7 +28,6 @@ export class DemoProgressbarDynamicComponent {
       type = 'danger';
     }
 
-    this.showWarning = type === 'danger' || type === 'warning';
     this.dynamic = value;
     this.type = type;
   }

demo/src/app/components/+progressbar/demos/bs4/stacked/stacked.html

@@ -1,17 +1,11 @@
-import { DemoProgressbarStaticComponent } from './bs3/static/static';
-import { DemoProgressbarDynamicComponent } from './bs3/dynamic/dynamic';
-import { DemoProgressbarStackedComponent } from './bs3/stacked/stacked';
-import { DemoProgressbarDynamicBs4Component } from './bs4/dynamic/dynamic';
-import { DemoProgressbarStackedBs4Component } from './bs4/stacked/stacked';
-import { DemoProgressbarStaticBs4Component } from './bs4/static/static';
-import { DemoProgressbarConfigComponent } from './bs3/config/config';
+import { DemoProgressbarStaticComponent } from './static/static';
+import { DemoProgressbarDynamicComponent } from './dynamic/dynamic';
+import { DemoProgressbarStackedComponent } from './stacked/stacked';
+import { DemoProgressbarConfigComponent } from './config/config';
 
 export const DEMO_COMPONENTS = [
   DemoProgressbarStaticComponent,
   DemoProgressbarDynamicComponent,
   DemoProgressbarStackedComponent,
-  DemoProgressbarDynamicBs4Component,
-  DemoProgressbarStackedBs4Component,
-  DemoProgressbarStaticBs4Component,
   DemoProgressbarConfigComponent
 ];

demo/src/app/components/+progressbar/demos/bs4/stacked/stacked.ts

@@ -0,0 +1,11 @@
+<div class="row">
+  <div class="col-sm-4">
+    <progressbar [value]="55"></progressbar>
+  </div>
+  <div class="col-sm-4">
+    <progressbar [value]="22" type="warning" [striped]="true">22%</progressbar>
+  </div>
+  <div class="col-sm-4">
+    <progressbar max="200" [value]="166" type="danger" [striped]="true" [animate]="true"><i>166 / 200</i></progressbar>
+  </div>
+</div>

demo/src/app/components/+progressbar/demos/bs4/static/static.html

@@ -1,6 +1,5 @@
-<demo-section [name]="name" [src]="src" [componentContent]="isBs3 ? componentContentBs3 : componentContentBs4">
+<demo-section [name]="name" [src]="src" [componentContent]="componentContent">
   <p>Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.</p>
 
-  <docs-section *ngIf="isBs3" [content]="componentContentBs3"></docs-section>
-  <docs-section *ngIf="!isBs3" [content]="componentContentBs4"></docs-section>
+  <docs-section [content]="componentContent"></docs-section>
 </demo-section>

demo/src/app/components/+progressbar/demos/bs4/static/static.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, Injector, ReflectiveInjector } from '@angular/core';
 import { isBs3 } from 'ngx-bootstrap/utils';
 
-import { demoComponentContentBs3, demoComponentContentBs4 } from './progressbar-section.list';
+import { demoComponentContent } from './progressbar-section.list';
 import { ContentSection } from '../../docs/models/content-section.model';
 
 @Component({
@@ -12,8 +12,7 @@ import { ContentSection } from '../../docs/models/content-section.model';
 export class ProgressbarSectionComponent {
   name = 'Progressbar';
   src = 'https://github.com/valor-software/ngx-bootstrap/tree/development/src/progressbar';
-  componentContentBs3: ContentSection[] = demoComponentContentBs3;
-  componentContentBs4: ContentSection[] = demoComponentContentBs4;
+  componentContent: ContentSection[] = demoComponentContent;
   content: any;
 
   _injectors = new Map<ContentSection, ReflectiveInjector>();

demo/src/app/components/+progressbar/demos/bs3/config/config.html renamed to demo/src/app/components/+progressbar/demos/config/config.html

@@ -1,11 +1,7 @@
-import { DemoProgressbarStaticComponent } from './demos/bs3/static/static';
-import { DemoProgressbarDynamicComponent } from './demos/bs3/dynamic/dynamic';
-import { DemoProgressbarStackedComponent } from './demos/bs3/stacked/stacked';
-import { DemoProgressbarConfigComponent } from './demos/bs3/config/config';
-
-import { DemoProgressbarStaticBs4Component } from './demos/bs4/static/static';
-import { DemoProgressbarDynamicBs4Component } from './demos/bs4/dynamic/dynamic';
-import { DemoProgressbarStackedBs4Component } from './demos/bs4/stacked/stacked';
+import { DemoProgressbarStaticComponent } from './demos/static/static';
+import { DemoProgressbarDynamicComponent } from './demos/dynamic/dynamic';
+import { DemoProgressbarStackedComponent } from './demos/stacked/stacked';
+import { DemoProgressbarConfigComponent } from './demos/config/config';
 
 import { ContentSection } from '../../docs/models/content-section.model';
 import { DemoTopSectionComponent } from '../../docs/demo-section-components/demo-top-section/index';
@@ -17,7 +13,7 @@ import {
   NgApiDocConfigComponent
 } from '../../docs/api-docs';
 
-export const demoComponentContentBs3: ContentSection[] = [
+export const demoComponentContent: ContentSection[] = [
   {
     name: 'Usage',
     anchor: 'usage',
@@ -34,29 +30,29 @@ export const demoComponentContentBs3: ContentSection[] = [
       {
         title: 'Static',
         anchor: 'bs3-static',
-        component: require('!!raw-loader?lang=typescript!./demos/bs3/static/static'),
-        html: require('!!raw-loader?lang=markup!./demos/bs3/static/static.html'),
+        component: require('!!raw-loader?lang=typescript!./demos/static/static'),
+        html: require('!!raw-loader?lang=markup!./demos/static/static.html'),
         outlet: DemoProgressbarStaticComponent
       },
       {
         title: 'Dynamic',
         anchor: 'bs3-dynamic',
-        component: require('!!raw-loader?lang=typescript!./demos/bs3/dynamic/dynamic'),
-        html: require('!!raw-loader?lang=markup!./demos/bs3/dynamic/dynamic.html'),
+        component: require('!!raw-loader?lang=typescript!./demos/dynamic/dynamic'),
+        html: require('!!raw-loader?lang=markup!./demos/dynamic/dynamic.html'),
         outlet: DemoProgressbarDynamicComponent
       },
       {
         title: 'Stacked',
         anchor: 'bs3-stacked',
-        component: require('!!raw-loader?lang=typescript!./demos/bs3/stacked/stacked'),
-        html: require('!!raw-loader?lang=markup!./demos/bs3/stacked/stacked.html'),
+        component: require('!!raw-loader?lang=typescript!./demos/stacked/stacked'),
+        html: require('!!raw-loader?lang=markup!./demos/stacked/stacked.html'),
         outlet: DemoProgressbarStackedComponent
       },
       {
         title: 'Configuring defaults',
         anchor: 'bs3-config',
-        component: require('!!raw-loader?lang=typescript!./demos/bs3/config/config'),
-        html: require('!!raw-loader?lang=markup!./demos/bs3/config/config.html'),
+        component: require('!!raw-loader?lang=typescript!./demos/config/config'),
+        html: require('!!raw-loader?lang=markup!./demos/config/config.html'),
         outlet: DemoProgressbarConfigComponent
       }
     ]
@@ -71,82 +67,6 @@ export const demoComponentContentBs3: ContentSection[] = [
         anchor: 'progressbar-component',
         outlet: NgApiDocComponent
       },
-      {
-        title: 'ProgressDirective',
-        anchor: 'progress-directive',
-        outlet: NgApiDocComponent
-      },
-      {
-        title: 'BarComponent',
-        anchor: 'bar-component',
-        outlet: NgApiDocComponent
-      },
-      {
-        title: 'ProgressbarConfig',
-        anchor: 'progress-config',
-        outlet: NgApiDocConfigComponent
-      }
-    ]
-  }
-];
-
-export const demoComponentContentBs4: ContentSection[] = [
-  {
-    name: 'Usage',
-    anchor: 'usage',
-    outlet: DemoTopSectionComponent,
-    content: {
-      doc: require('!!raw-loader?lang=typescript!./docs/usage.md')
-    }
-  },
-  {
-    name: 'Examples',
-    anchor: 'examples',
-    outlet: ExamplesComponent,
-    content: [
-      {
-        title: 'Static',
-        anchor: 'bs4-static',
-        component: require('!!raw-loader?lang=typescript!./demos/bs4/static/static'),
-        html: require('!!raw-loader?lang=markup!./demos/bs4/static/static.html'),
-        outlet: DemoProgressbarStaticBs4Component
-      },
-      {
-        title: 'Dynamic',
-        anchor: 'bs4-dynamic',
-        component: require('!!raw-loader?lang=typescript!./demos/bs4/dynamic/dynamic'),
-        html: require('!!raw-loader?lang=markup!./demos/bs4/dynamic/dynamic.html'),
-        outlet: DemoProgressbarDynamicBs4Component
-      },
-      {
-        title: 'Stacked',
-        anchor: 'bs4-stacked',
-        component: require('!!raw-loader?lang=typescript!./demos/bs4/stacked/stacked'),
-        html: require('!!raw-loader?lang=markup!./demos/bs4/stacked/stacked.html'),
-        outlet: DemoProgressbarStackedBs4Component
-      }
-    ]
-  },
-  {
-    name: 'API Reference',
-    anchor: 'api-reference',
-    outlet: ApiSectionsComponent,
-    content: [
-      {
-        title: 'ProgressbarComponent',
-        anchor: 'progressbar-component',
-        outlet: NgApiDocComponent
-      },
-      {
-        title: 'ProgressDirective',
-        anchor: 'progress-directive',
-        outlet: NgApiDocComponent
-      },
-      {
-        title: 'BarComponent',
-        anchor: 'bar-component',
-        outlet: NgApiDocComponent
-      },
       {
         title: 'ProgressbarConfig',
         anchor: 'progress-config',

demo/src/app/components/+progressbar/demos/bs3/config/config.ts renamed to demo/src/app/components/+progressbar/demos/config/config.ts

@@ -21,6 +21,10 @@ h1, h2, h3, h4 {
   }
 }
 
+code {
+  word-break: normal;
+}
+
 a:hover {
   text-decoration: none;
 }