Merge pull request #294 from MurhafSousli/new-update

v6.1.0

CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 6.1.0
+
+- feat: Use the strict mode, in [25f0976](https://github.com/MurhafSousli/ngx-progressbar/pull/294/commits/25f09769a4ae2a5be0945fdbbe7f0a252ce18bd6).
+- fix typo for config stream in `NgProgressRef` 
+
+### Breaking changes
+
+- Rename `NgProgressRef.getState` to `NgProgressRef.snapshot`
+
 ## 6.0.4
 
 - Upgrade to Angular 11

projects/ngx-progressbar-demo/src/app/app.component.scss

@@ -10,6 +10,7 @@ li {
 }
 
 .menu {
+  width: 200px;
   margin-top: -30px;
   margin-bottom: 20px;
   a {

projects/ngx-progressbar/http/src/ng-progress-http.interface.ts

@@ -1,8 +1,10 @@
 import { InjectionToken } from '@angular/core';
 
-export interface NgProgressHttpConfig {
-  id?: string;
-  silentApis?: string[];
+export interface ProgressHttpConfig {
+  id: string;
+  silentApis: string[];
 }
 
+export type NgProgressHttpConfig = Partial<ProgressHttpConfig>;
+
 export const NG_PROGRESS_HTTP_CONFIG = new InjectionToken<NgProgressHttpConfig>('ngProgressHttpConfig');

projects/ngx-progressbar/http/src/ng-progress.interceptor.ts

@@ -3,15 +3,14 @@ import { HttpInterceptor, HttpEvent, HttpHandler, HttpRequest } from '@angular/c
 import { Observable } from 'rxjs';
 import { finalize } from 'rxjs/operators';
 import { NgProgress, NgProgressRef } from 'ngx-progressbar';
-// import { NgProgress, NgProgressRef } from '../../src/public-api';
-import { NgProgressHttpConfig, NG_PROGRESS_HTTP_CONFIG } from './ng-progress-http.interface';
+import { NgProgressHttpConfig, ProgressHttpConfig, NG_PROGRESS_HTTP_CONFIG } from './ng-progress-http.interface';
 
 @Injectable()
 export class NgProgressInterceptor implements HttpInterceptor {
 
   private _inProgressCount = 0;
-  private _progressRef: NgProgressRef;
-  private readonly _config: NgProgressHttpConfig = {
+  private _progressRef!: NgProgressRef;
+  private readonly _config: ProgressHttpConfig = {
     id: 'root',
     silentApis: []
   };
@@ -53,7 +52,7 @@ export class NgProgressInterceptor implements HttpInterceptor {
    * Check if request is silent.
    * @param req request
    */
-  private checkUrl(req: HttpRequest<any>) {
+  private checkUrl(req: HttpRequest<any>): boolean {
     const url = req.url.toLowerCase();
     const found = this._config.silentApis.find((u) => url.startsWith(u));
     return !!found;

projects/ngx-progressbar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-progressbar",
-  "version": "6.0.4",
+  "version": "6.1.0",
   "author": {
     "name": "Murhaf Sousli",
     "url": "https://github.com/MurhafSousli",

projects/ngx-progressbar/router/src/ng-progress-router.interface.ts

@@ -1,11 +1,13 @@
 import { InjectionToken, Type } from '@angular/core';
 import { RouterEvent } from '@angular/router';
 
-export interface NgProgressRouterConfig {
-  id?: string;
-  delay?: number;
-  startEvents?: Type<RouterEvent>[];
-  completeEvents?: Type<RouterEvent>[];
+export interface ProgressRouterConfig {
+  id: string;
+  delay: number;
+  startEvents: Type<RouterEvent>[];
+  completeEvents: Type<RouterEvent>[];
 }
 
+export type NgProgressRouterConfig = Partial<ProgressRouterConfig>;
+
 export const NG_PROGRESS_ROUTER_CONFIG = new InjectionToken<NgProgressRouterConfig>('ngProgressRouterConfig');

projects/ngx-progressbar/router/src/ng-progress-router.service.ts

@@ -1,17 +1,14 @@
 import { Injectable, Optional, Inject, Type } from '@angular/core';
-import { Router, NavigationStart, NavigationEnd, NavigationCancel, NavigationError, RouterEvent } from '@angular/router';
+import { Router, NavigationStart, NavigationEnd, NavigationCancel, NavigationError, RouterEvent, Event } from '@angular/router';
 import { of } from 'rxjs';
 import { tap, delay, switchMap, filter } from 'rxjs/operators';
-import { NgProgress } from 'ngx-progressbar';
-// import { NgProgress } from '../../src/public-api';
-import { NgProgressRouterConfig, NG_PROGRESS_ROUTER_CONFIG } from './ng-progress-router.interface';
+import { NgProgress, NgProgressRef } from 'ngx-progressbar';
+import { NgProgressRouterConfig, ProgressRouterConfig, NG_PROGRESS_ROUTER_CONFIG } from './ng-progress-router.interface';
 
 /**
  * Check if a router event type exists in an array of router event types
- * @param routerEvent
- * @param events
  */
-function eventExists(routerEvent: RouterEvent, events: Type<RouterEvent>[]) {
+function eventExists(routerEvent: Event, events: Type<RouterEvent>[]): boolean {
   let res = false;
   events.map((event: Type<RouterEvent>) => res = res || routerEvent instanceof event);
   return res;
@@ -21,7 +18,7 @@ function eventExists(routerEvent: RouterEvent, events: Type<RouterEvent>[]) {
   providedIn: 'root'
 })
 export class NgProgressRouter {
-  private readonly _config: NgProgressRouterConfig = {
+  private readonly _config: ProgressRouterConfig = {
     id: 'root',
     delay: 0,
     startEvents: [NavigationStart],
@@ -30,7 +27,7 @@ export class NgProgressRouter {
 
   constructor(progress: NgProgress, router: Router, @Optional() @Inject(NG_PROGRESS_ROUTER_CONFIG) config: NgProgressRouterConfig) {
     this._config = config ? {...this._config, ...config} : this._config;
-    const progressRef = progress.ref(this._config.id);
+    const progressRef: NgProgressRef = progress.ref(this._config.id);
 
     const startProgress = of({}).pipe(
       tap(() => progressRef.start())
@@ -41,11 +38,11 @@ export class NgProgressRouter {
       tap(() => progressRef.complete())
     );
 
-    const filterEvents = [...this._config.startEvents, ...this._config.completeEvents];
+    const filterEvents: Type<RouterEvent>[] = [...this._config.startEvents, ...this._config.completeEvents];
 
     router.events.pipe(
-      filter((event: RouterEvent) => eventExists(event, filterEvents)),
-      switchMap((event: RouterEvent) => eventExists(event, this._config.startEvents) ? startProgress : completeProgress)
+      filter((event: Event) => eventExists(event, filterEvents)),
+      switchMap((event: Event) => eventExists(event, this._config.startEvents) ? startProgress : completeProgress)
     ).subscribe();
   }
 }

projects/ngx-progressbar/src/lib/ng-progress-ref.ts

@@ -1,16 +1,16 @@
 import { Observable, Subject, BehaviorSubject, timer, of, combineLatest, Subscription, EMPTY } from 'rxjs';
 import { tap, delay, debounce, switchMap, takeUntil, finalize, filter } from 'rxjs/operators';
-import { NgProgressState, NgProgressConfig } from './ng-progress.interface';
+import { NgProgressState, NgProgressConfig, ProgressConfig, ProgressState } from './ng-progress.interface';
 
 export class NgProgressRef {
 
   // Stream that emits when progress state is changed
-  private readonly _state: BehaviorSubject<NgProgressState>;
-  state: Observable<NgProgressState>;
+  private readonly _state: BehaviorSubject<ProgressState>;
+  state: Observable<ProgressState>;
 
   // Stream that emits when config is changed
-  private readonly _config: BehaviorSubject<NgProgressConfig>;
-  config: Observable<NgProgressState>;
+  private readonly _config: BehaviorSubject<ProgressConfig>;
+  config: Observable<ProgressConfig>;
 
   // Progress start source event (used to cancel finalizing delays)
   private readonly _started = new Subject();
@@ -23,30 +23,30 @@ export class NgProgressRef {
   readonly completed = this._completed.pipe(filter(() => this.isStarted));
 
   // Stream that increments and updates the progress state
-  private readonly _trickling = new Subject();
+  private readonly _trickling = new Subject<boolean>();
 
   // Stream that combines "_trickling" and "config" streams
   private readonly _worker = Subscription.EMPTY;
 
   // Get current progress state
-  private get currState(): NgProgressState {
+  private get snapshot(): ProgressState {
     return this._state.value;
   }
 
   // Check if progress has started
   get isStarted(): boolean {
-    return this.currState.active;
+    return this.snapshot.active;
   }
 
-  constructor(customConfig: NgProgressConfig, private _onDestroyCallback: () => void) {
-    this._state = new BehaviorSubject<NgProgressState>({ active: false, value: 0 });
-    this._config = new BehaviorSubject<NgProgressConfig>(customConfig);
+  constructor(customConfig: ProgressConfig, private _onDestroyCallback: () => void) {
+    this._state = new BehaviorSubject<ProgressState>({ active: false, value: 0 });
+    this._config = new BehaviorSubject<ProgressConfig>(customConfig);
     this.state = this._state.asObservable();
-    this.config = this._state.asObservable();
+    this.config = this._config.asObservable();
 
-    this._worker = combineLatest(this._trickling, this._config).pipe(
-      debounce(([start, config]: [boolean, NgProgressConfig]) => timer(start ? config.debounceTime : 0)),
-      switchMap(([start, config]: [boolean, NgProgressConfig]) => start ? this.onTrickling(config) : this.onComplete(config))
+    this._worker = combineLatest([this._trickling, this._config]).pipe(
+      debounce(([start, config]: [boolean, ProgressConfig]) => timer(start ? config.debounceTime : 0)),
+      switchMap(([start, config]: [boolean, ProgressConfig]) => start ? this.onTrickling(config) : this.onComplete(config))
     ).subscribe();
   }
 
@@ -69,7 +69,7 @@ export class NgProgressRef {
    * Increment the progress
    */
   inc(amount?: number) {
-    const n = this.currState.value;
+    const n = this.snapshot.value;
     if (!this.isStarted) {
       this.start();
     } else {
@@ -111,7 +111,7 @@ export class NgProgressRef {
    * Set progress state
    */
   private setState(state: NgProgressState) {
-    this._state.next({ ...this.currState, ...state });
+    this._state.next({ ...this.snapshot, ...state });
   }
 
   /**
@@ -124,7 +124,7 @@ export class NgProgressRef {
   /**
    * Keeps incrementing the progress
    */
-  private onTrickling(config: NgProgressConfig): Observable<number> {
+  private onTrickling(config: ProgressConfig): Observable<number> {
     if (!this.isStarted) {
       this.set(this._config.value.min);
     }
@@ -134,7 +134,7 @@ export class NgProgressRef {
   /**
    * Completes then resets the progress
    */
-  private onComplete(config: NgProgressConfig): Observable<any> {
+  private onComplete(config: ProgressConfig): Observable<any> {
     this._completed.next();
     return !this.isStarted ? EMPTY : of({}).pipe(
       // Complete the progress

projects/ngx-progressbar/src/lib/ng-progress.component.ts

@@ -2,18 +2,17 @@ import {
   Component,
   Input,
   Output,
+  EventEmitter,
   OnChanges,
   OnDestroy,
   OnInit,
-  ChangeDetectionStrategy,
-  EventEmitter,
-  ViewEncapsulation
+  ChangeDetectionStrategy
 } from '@angular/core';
-import { Observable, Subscription, SubscriptionLike} from 'rxjs';
+import { Observable, Subscription } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { NgProgress } from './ng-progress.service';
 import { NgProgressRef } from './ng-progress-ref';
-import { NgProgressState } from './ng-progress.interface';
+import { ProgressState } from './ng-progress.interface';
 
 @Component({
   selector: 'ng-progress',
@@ -27,20 +26,20 @@ import { NgProgressState } from './ng-progress.interface';
   template: `
     <ng-container *ngIf="state$ | async; let state">
       <div class="ng-progress-bar"
-            [attr.active]="state.active"
-            [style.transition]="'opacity ' + speed + 'ms ' + ease">
+           [attr.active]="state.active"
+           [style.transition]="'opacity ' + speed + 'ms ' + ease">
         <div class="ng-bar-placeholder">
           <div class="ng-bar"
-                [style.transform]="state.transform"
-                [style.backgroundColor]="color"
-                [style.transition]="state.active ? 'all ' + speed + 'ms ' + ease : 'none'">
+               [style.transform]="state.transform"
+               [style.backgroundColor]="color"
+               [style.transition]="state.active ? 'all ' + speed + 'ms ' + ease : 'none'">
             <div *ngIf="meteor" class="ng-meteor" [style.boxShadow]="'0 0 10px '+ color + ', 0 0 5px ' + color"></div>
           </div>
         </div>
         <div *ngIf="spinner" class="ng-spinner">
           <div class="ng-spinner-icon"
-                [style.borderTopColor]="color"
-                [style.borderLeftColor]="color"></div>
+               [style.borderTopColor]="color"
+               [style.borderLeftColor]="color"></div>
         </div>
       </div>
     </ng-container>
@@ -51,14 +50,14 @@ import { NgProgressState } from './ng-progress.interface';
 
 export class NgProgressComponent implements OnInit, OnChanges, OnDestroy {
 
-  private _started: SubscriptionLike = Subscription.EMPTY;
-  private _completed: SubscriptionLike = Subscription.EMPTY;
+  private _started!: Subscription;
+  private _completed!: Subscription;
 
   /** Progress bar worker */
-  progressRef: NgProgressRef;
+  progressRef!: NgProgressRef;
 
   /** Stream that emits progress state */
-  state$: Observable<{ active: boolean, transform: string }>;
+  state$!: Observable<{ active: boolean, transform: string }>;
 
   /** Creates a new instance if id is not already exists */
   @Input() id = 'root';
@@ -82,24 +81,22 @@ export class NgProgressComponent implements OnInit, OnChanges, OnDestroy {
   @Output() completed = new EventEmitter();
 
   get isStarted() {
-    return this.progressRef.isStarted;
+    return this.progressRef?.isStarted;
   }
 
   constructor(private _ngProgress: NgProgress) {
   }
 
   ngOnChanges() {
-    if (this.progressRef instanceof NgProgressRef) {
-      // 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,
-        speed: this.speed,
-        trickleSpeed: this.trickleSpeed,
-        trickleFunc: this.trickleFunc,
-        debounceTime: this.debounceTime
-      });
-    }
+     // 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,
+      speed: this.speed,
+      trickleSpeed: this.trickleSpeed,
+      trickleFunc: this.trickleFunc,
+      debounceTime: this.debounceTime
+    });
   }
 
   ngOnInit() {
@@ -114,9 +111,9 @@ export class NgProgressComponent implements OnInit, OnChanges, OnDestroy {
 
     // Subscribe to progress state
     this.state$ = this.progressRef.state.pipe(
-      map((state: NgProgressState) => ({
+      map((state: ProgressState) => ({
         active: state.active,
-        transform: `translate3d(${state.value}%,0,0)`
+        transform: `translate3d(${ state.value }%,0,0)`
       }))
     );
 
@@ -130,11 +127,9 @@ export class NgProgressComponent implements OnInit, OnChanges, OnDestroy {
   }
 
   ngOnDestroy() {
-    this._started.unsubscribe();
-    this._completed.unsubscribe();
-    if (this.progressRef instanceof NgProgressRef) {
-      this.progressRef.destroy();
-    }
+    this._started?.unsubscribe();
+    this._completed?.unsubscribe();
+    this.progressRef?.destroy();
   }
 
   start() {