Merge pull request #152 from MurhafSousli/pr/151

v4.3.0

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 4.3.0
+
+- feat(core): add debounceTime option, closes [#141](https://github.com/MurhafSousli/ngx-progressbar/issues/141) in [#151](https://github.com/MurhafSousli/ngx-progressbar/pull/151)
+
 ## 4.2.0
 
 - feat(core): Add `trickleFunc` input. This allows users to change the trickling amount based on progress state, closes [#146](https://github.com/MurhafSousli/ngx-progressbar/issues/146) in [#148](https://github.com/MurhafSousli/ngx-progressbar/pull/148).

README.md

@@ -146,6 +146,7 @@ export class HomeComponent {
 | **[direction]**       | ltr+          | *Progress bar direction (`ltr+`, `ltr-`, `rtl+`, `rtl-`).* |
 | **[trickleSpeed]**    | 300           | *Progress trickling speed in ms.*                          |
 | **[trickleFunc]**     | Function      | *A **function** that returns the trickling amount.*        |
+| **[debounceTime]**    | 0             | *Debounce time before starting the progress bar in ms.*    |
 | **[speed]**           | 200           | *Transition speed in ms.*                                  |
 | **[min]**             | 8             | *Progress initial starting value.*                         |
 | **[max]**             | 100           | *Progress maximum value.*                                  |
@@ -230,6 +231,7 @@ import { NgProgressModule } from '@ngx-progressbar/core';
 | **direction**       | ltr+          | *Progress bar direction (`ltr+`, `ltr-`, `rtl+`, `rtl-`).* |
 | **trickleSpeed**    | 300           | *Progress trickling speed in ms.*                          |
 | **trickleFunc**     | Function      | *A **function** that returns the trickling amount.*        |
+| **debounceTime**    | 0             | *Debounce time before starting the progress bar in ms.*    |
 | **speed**           | 200           | *Transition speed in ms.*                                  |
 | **min**             | 8             | *Progress initial starting value.*                         |
 | **max**             | 100           | *Progress maximum value.*                                  |

lib/core/README.md

@@ -146,7 +146,7 @@ export class HomeComponent {
 | **[direction]**       | ltr+          | *Progress bar direction (`ltr+`, `ltr-`, `rtl+`, `rtl-`).* |
 | **[trickleSpeed]**    | 300           | *Progress trickling speed in ms.*                          |
 | **[trickleFunc]**     | Function      | *A **function** that returns the trickling amount.*        |
-| **[debounceTime]**    | 0             | *Debounce time in ms.*                                     |
+| **[debounceTime]**    | 0             | *Debounce time before starting the progress bar in ms.*    |
 | **[speed]**           | 200           | *Transition speed in ms.*                                  |
 | **[min]**             | 8             | *Progress initial starting value.*                         |
 | **[max]**             | 100           | *Progress maximum value.*                                  |
@@ -231,6 +231,7 @@ import { NgProgressModule } from '@ngx-progressbar/core';
 | **direction**       | ltr+          | *Progress bar direction (`ltr+`, `ltr-`, `rtl+`, `rtl-`).* |
 | **trickleSpeed**    | 300           | *Progress trickling speed in ms.*                          |
 | **trickleFunc**     | Function      | *A **function** that returns the trickling amount.*        |
+| **debounceTime**    | 0             | *Debounce time before starting the progress bar in ms.*    |
 | **speed**           | 200           | *Transition speed in ms.*                                  |
 | **min**             | 8             | *Progress initial starting value.*                         |
 | **max**             | 100           | *Progress maximum value.*                                  |

lib/core/src/ng-progress-ref.ts

@@ -1,6 +1,5 @@
 import { NgProgressState, NgProgressConfig } from './ng-progress.interface';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
-import { Subscription } from 'rxjs/Subscription';
 import { timer } from 'rxjs/observable/timer';
 import { Observable } from 'rxjs/Observable';
 import { Subject } from 'rxjs/Subject';
@@ -10,19 +9,16 @@ import { map } from 'rxjs/operators/map';
 import { skip } from 'rxjs/operators/skip';
 import { delay } from 'rxjs/operators/delay';
 import { filter } from 'rxjs/operators/filter';
+import { debounce } from 'rxjs/operators/debounce';
 import { switchMap } from 'rxjs/operators/switchMap';
 import { combineLatest} from 'rxjs/operators/combineLatest';
 import { distinctUntilChanged } from 'rxjs/operators/distinctUntilChanged';
-import { debounce } from 'rxjs/operators';
 
 export class NgProgressRef {
 
   private _state: NgProgressState = {active: false, value: 0};
   private _config: NgProgressConfig;
 
-  /** Worker subscription used to unsubscribe from trickling$ stream */
-  private _workerSub$: Subscription;
-
   /** Stream that increments and updates progress state */
   private _trickling$ = new Subject();
 
@@ -55,41 +51,38 @@ export class NgProgressRef {
     );
   }
 
-  constructor(config: NgProgressConfig) {
+  constructor(customConfig: NgProgressConfig) {
 
     /**
      * Trickling stream starts the timer that increment the progress bar continuously
      * This stream makes it possible to use latest config values while incrementing
      */
-    this._workerSub$ = this._trickling$.pipe(
-      debounce(start => timer(start ? this._config.debounceTime : 0)),
+    this._trickling$.pipe(
+      debounce((start: boolean) => timer(start ? this._config.debounceTime : 0)),
       combineLatest(this.config$),
-      switchMap(([start, latestConfig]) => start ? this._trickling(latestConfig) : this._complete(latestConfig))
+      switchMap(([start, config]: [boolean, NgProgressConfig]) => start ? this._trickling(config) : this._complete(config))
     ).subscribe();
 
-    this.setConfig(config);
+    this.setConfig(customConfig);
   }
 
   start() {
     this._trickling$.next(true);
   }
 
   complete() {
-      this._trickling$.next(false);
+    this._trickling$.next(false);
   }
 
   inc(amount?: number) {
-
-    let n = this._state.value;
-
+    const n = this._state.value;
     if (!this.isStarted) {
       this.start();
     } else {
       if (typeof amount !== 'number') {
         amount = this._config.trickleFunc(n);
       }
-      n = this._clamp(n + amount);
-      this.set(n);
+      this.set(n + amount);
     }
   }
 
@@ -107,10 +100,9 @@ export class NgProgressRef {
    * Users should use NgProgressManager.destroy(id) instead
    */
   destroy() {
-    this._workerSub$.unsubscribe();
-    this._trickling$.unsubscribe();
-    this.state$.unsubscribe();
-    this.config$.unsubscribe();
+    this._trickling$.complete();
+    this.state$.complete();
+    this.config$.complete();
   }
 
   private _setState(state: NgProgressState) {
@@ -133,10 +125,7 @@ export class NgProgressRef {
 
   /** Completes then resets the progress */
   private _complete(config: NgProgressConfig) {
-    if (!this.isStarted) {
-      return of({});
-    }
-    return of({}).pipe(
+    return !this.isStarted ? of({}) : of({}).pipe(
       // Completes the progress
       tap(() => this._setState({value: 100})),
 

lib/core/src/ng-progress.component.ts

@@ -95,7 +95,7 @@ export class NgProgressComponent implements OnInit, OnChanges, OnDestroy {
 
   ngOnChanges() {
     if (this.progressRef instanceof NgProgressRef) {
-      // Update progress bar config when input changes
+      // Update progress bar config when inputs change
       this.progressRef.setConfig({
         max: (this.max > 0 && this.max <= 100) ? this.max : 100,
         min: (this.min < 100 && this.min >= 0) ? this.min : 0,
@@ -122,10 +122,10 @@ export class NgProgressComponent implements OnInit, OnChanges, OnDestroy {
     })));
     /** Subscribes to started and completed events when user used them */
     if (this.started.observers.length) {
-      this._started$ = this.progressRef.started.subscribe(() => this.started.next());
+      this._started$ = this.progressRef.started.subscribe(() => this.started.emit());
     }
     if (this.completed.observers.length) {
-      this._completed$ = this.progressRef.completed.subscribe(() => this.completed.next());
+      this._completed$ = this.progressRef.completed.subscribe(() => this.completed.emit());
     }
   }
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ngx-progressbar/demo",
   "description": "A nanoscopic progress bar. Featuring realistic trickle animations to convince your users that something is happening!",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -65,7 +65,7 @@
     "zone.js": "^0.8.14"
   },
   "devDependencies": {
-    "@angular/cli": "^1.7.0-beta.0",
+    "@angular/cli": "^1.7.4",
     "@angular/compiler-cli": "^5.2.0",
     "@angular/language-service": "^5.2.0",
     "@types/jasmine": "~2.5.53",

src/app/home/home/home.component.ts

@@ -52,7 +52,7 @@ export class HomeComponent {
   testHttp() {
     this.preventAbuse.next(true);
 
-    this.http.get('https://reqres.in/api/users?delay=5')
+    this.http.get('https://reqres.in/api/users?delay=1')
       .subscribe(() => {
         setTimeout(() => {
           this.preventAbuse.next(false);