ng2-progressbar - npm Package Compare versions

Comparing version 1.1.6 to 1.2.0

CHANGELOG.md

@@ -1,3 +0,9 @@
-##1.1.5
+##1.2.0
 
+ - (fix) Progressbar stuck after one time, closes [#10](https://github.com/MurhafSousli/ng2-progressbar/issues/10)
+ - (fix) AOT failing, cloese [#8](https://github.com/MurhafSousli/ng2-progressbar/issues/8)
+ - (feat) adds maximum input, closes [#9](https://github.com/MurhafSousli/ng2-progressbar/issues/9)
+
+##1.1.6
+
 * **Fixes Bugs:** 
@@ -4,0 +10,0 @@ - fixes: default input values

components/progress-bar/progress-bar.component.js

@@ -8,3 +8,3 @@ import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
         var styles = {
-            transition: 'all ' + this.speed + 'ms ' + this.ease,
+            transition: "all " + this.speed + "ms " + this.ease,
             backgroundColor: this.color
@@ -22,7 +22,7 @@ };
                 styles = Object.assign({}, styles, {
-                    transform: 'translate3d(' + n + '%,0,0)',
-                    '-webkit-transform': 'translate3d(' + n + '%,0,0)',
-                    '-moz-transform': 'translate3d(' + n + '%,0,0)',
-                    '-o-transform': 'translate3d(' + n + '%,0,0)',
-                    '-ms-transform': 'translate3d(' + n + '%,0,0)'
+                    transform: "translate3d(" + n + "%,0,0)",
+                    '-webkit-transform': "translate3d(" + n + "%,0,0)",
+                    '-moz-transform': "translate3d(" + n + "%,0,0)",
+                    '-o-transform': "translate3d(" + n + "%,0,0)",
+                    '-ms-transform': "translate3d(" + n + "%,0,0)"
                 });
@@ -32,7 +32,7 @@ break;
                 styles = Object.assign({}, styles, {
-                    transform: 'translate(' + n + '%,0)',
-                    '-webkit-transform': 'translate(' + n + '%,0)',
-                    '-moz-transform': 'translate(' + n + '%,0)',
-                    '-o-transform': 'translate(' + n + '%,0)',
-                    '-ms-transform': 'translate(' + n + '%,0)'
+                    transform: "translate(" + n + "%,0)",
+                    '-webkit-transform': "translate(" + n + "%,0)",
+                    '-moz-transform': "translate(" + n + "%,0)",
+                    '-o-transform': "translate(" + n + "%,0)",
+                    '-ms-transform': "translate(" + n + "%,0)"
                 });
@@ -42,3 +42,3 @@ break;
                 styles = Object.assign({}, styles, {
-                    marginLeft: n + '%'
+                    marginLeft: n + "%"
                 });
@@ -45,0 +45,0 @@ }

components/progress/progress.component.d.ts

@@ -1,5 +0,5 @@
-import { OnChanges, SimpleChanges } from '@angular/core';
-import { NgProgressService } from "../../service/progress.service";
-export declare class ProgressComponent implements OnChanges {
-    private progress;
+import { OnChanges, SimpleChanges, OnDestroy } from '@angular/core';
+import { NgProgressService } from '../../service/progress.service';
+export declare class ProgressComponent implements OnChanges, OnDestroy {
+    progress: NgProgressService;
     /** Progress options  */
@@ -12,5 +12,6 @@ ease: string;
     thick: boolean;
-    minimum: number;
-    speed: number;
-    trickleSpeed: number;
+    maximum: any;
+    minimum: any;
+    speed: any;
+    trickleSpeed: any;
     /** Start/Stop Progressbar */
@@ -20,2 +21,3 @@ toggle: any;
     ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
 }

components/progress/progress.component.js

 import { Component, Input, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
-import { NgProgressService } from "../../service/progress.service";
+import { NgProgressService } from '../../service/progress.service';
 export var ProgressComponent = (function () {
     function ProgressComponent(progress) {
-        this.progress = progress;
         /** Progress options  */
@@ -10,28 +9,62 @@ this.ease = 'linear';
         this.showSpinner = true;
-        this.direction = "leftToRightIncreased";
-        this.color = '#29d';
+        this.direction = 'leftToRightIncreased';
+        this.color = '#CC181E';
         this.thick = false;
-        this.minimum = 0.08;
-        this.speed = 200;
-        this.trickleSpeed = 300;
+        this.progress = progress;
     }
     ProgressComponent.prototype.ngOnChanges = function (changes) {
         var minChng = changes['minimum'];
+        var maxChng = changes['maximum'];
         var spdChng = changes['speed'];
         var tklSpdChng = changes['trickleSpeed'];
         var tglChng = changes['toggle'];
-        this.progress.minimum = (minChng !== undefined && minChng.currentValue !== minChng.previousValue) ?
-            minChng.currentValue : this.minimum;
-        this.progress.speed = (spdChng && spdChng.currentValue !== spdChng.previousValue) ?
-            spdChng.currentValue : this.speed;
-        this.progress.trickleSpeed = (tklSpdChng && tklSpdChng.currentValue !== tklSpdChng.previousValue) ?
-            tklSpdChng.currentValue : this.trickleSpeed;
-        if (tglChng && tglChng.currentValue !== tglChng.previousValue)
-            tglChng.currentValue ? this.progress.start() : this.progress.done();
+        if (minChng) {
+            if (typeof minChng.currentValue !== 'undefined' && minChng.currentValue !== minChng.previousValue) {
+                if (minChng.currentValue < 0 || minChng.currentValue > 1) {
+                    throw 'Input [minimum] must be between 0 and 1';
+                }
+                else {
+                    this.progress.minimum = minChng.currentValue;
+                }
+            }
+        }
+        if (maxChng) {
+            if (typeof maxChng.currentValue !== 'undefined' && maxChng.currentValue !== maxChng.previousValue) {
+                if (maxChng.currentValue < 0 || maxChng.currentValue > 1) {
+                    throw 'Input [maximum] must be between 0 and 1';
+                }
+                else {
+                    this.progress.maximum = maxChng.currentValue;
+                }
+            }
+        }
+        if (spdChng) {
+            if (typeof spdChng.currentValue !== 'undefined' && spdChng.currentValue !== spdChng.previousValue) {
+                this.progress.speed = spdChng.currentValue;
+            }
+        }
+        if (tklSpdChng) {
+            if (typeof tklSpdChng.currentValue !== 'undefined' && tklSpdChng.currentValue !== tklSpdChng.previousValue) {
+                this.progress.trickleSpeed = tklSpdChng.currentValue;
+            }
+        }
+        if (tglChng) {
+            if (typeof tglChng.currentValue !== 'undefined' && tglChng.currentValue !== tglChng.previousValue) {
+                if (tglChng.currentValue) {
+                    this.progress.start();
+                }
+                else {
+                    this.progress.done();
+                }
+            }
+        }
     };
-    ;
+    ProgressComponent.prototype.ngOnDestroy = function () {
+        this.progress.state.unsubscribe();
+        this.progress.trickling.unsubscribe();
+    };
     ProgressComponent.decorators = [
         { type: Component, args: [{
                     selector: 'ng-progress',
-                    template: "\n    <ng-progress-bar\n      [speed]=\"speed\"\n      [positionUsing]=\"positionUsing\"\n      [ease]=\"ease\"\n      [showSpinner]=\"showSpinner\"\n      [direction]=\"direction\"\n      [color]=\"color\"\n      [thick]=\"thick\"\n      [state]=\"progress.state$ | async\"\n    ></ng-progress-bar>\n  ",
+                    template: "\n    <ng-progress-bar\n      [speed]=\"speed\"\n      [positionUsing]=\"positionUsing\"\n      [ease]=\"ease\"\n      [showSpinner]=\"showSpinner\"\n      [direction]=\"direction\"\n      [color]=\"color\"\n      [thick]=\"thick\"\n      [state]=\"progress.state | async\"\n    ></ng-progress-bar>\n  ",
                     styles: ["\n    :host {\n      pointer-events: none;\n      position: relative;\n      z-index: 65535;\n    }\n\n    .ng-progress {\n      z-index: 1031;\n      top: 0;\n      left: 0;\n      width: 100%;\n      position: fixed;\n      zoom: 1;\n      filter: alpha(opacity=0);\n      opacity: 0;\n      transition: opacity 200ms linear;\n    }\n\n    .active {\n      filter: alpha(opacity=100);\n      opacity: 1;\n      transition: none;\n    }\n\n    .bar {\n      position: absolute;\n      width: 100%;\n      height: 2px;\n    }\n\n    .thick .bar {\n      height: 3px;\n    }\n\n    .bar-shadow {\n      display: block;\n      position: absolute;\n      right: 0;\n      top: -3px;\n      width: 100px;\n      height: 100%;\n      opacity: 1.0;\n      -webkit-transform: rotate(3deg);\n      -ms-transform: rotate(3deg);\n      transform: rotate(3deg);\n    }\n\n\n    .thick .bar-shadow {\n      top: -4px;\n      -webkit-transform: rotate(4deg);\n      -ms-transform: rotate(4deg);\n      transform: rotate(4deg);\n    }\n\n    .thick .spinner-icon {\n      width: 24px;\n      height: 24px;\n      border: solid 3px transparent;\n    }\n\n    /* Remove these to get rid of the spinner */\n    .spinner {\n      display: block;\n      position: fixed;\n      z-index: 1031;\n      top: 15px;\n      right: 15px;\n    }\n\n    .spinner-icon {\n      width: 18px;\n      height: 18px;\n      box-sizing: border-box;\n\n      border: solid 2px transparent;\n      border-radius: 50%;\n\n      -webkit-animation: nprogress-spinner 400ms linear infinite;\n      animation: nprogress-spinner 400ms linear infinite;\n    }\n\n    .anti-clockwise .spinner-icon {\n      -webkit-animation-direction: reverse;\n      animation-direction: reverse;\n    }\n\n    @-webkit-keyframes nprogress-spinner {\n      0% {\n        -webkit-transform: rotate(0deg);\n      }\n      100% {\n        -webkit-transform: rotate(360deg);\n      }\n    }\n\n    @keyframes nprogress-spinner {\n      0% {\n        transform: rotate(0deg);\n      }\n      100% {\n        transform: rotate(360deg);\n      }\n    }\n  "],
@@ -53,2 +86,3 @@ encapsulation: ViewEncapsulation.None,
         'thick': [{ type: Input },],
+        'maximum': [{ type: Input },],
         'minimum': [{ type: Input },],
@@ -55,0 +89,0 @@ 'speed': [{ type: Input },],

components/progress/progress.component.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"ProgressComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ng-progress","template":"\n    <ng-progress-bar\n      [speed]=\"speed\"\n      [positionUsing]=\"positionUsing\"\n      [ease]=\"ease\"\n      [showSpinner]=\"showSpinner\"\n      [direction]=\"direction\"\n      [color]=\"color\"\n      [thick]=\"thick\"\n      [state]=\"progress.state$ | async\"\n    ></ng-progress-bar>\n  ","styles":["\n    :host {\n      pointer-events: none;\n      position: relative;\n      z-index: 65535;\n    }\n\n    .ng-progress {\n      z-index: 1031;\n      top: 0;\n      left: 0;\n      width: 100%;\n      position: fixed;\n      zoom: 1;\n      filter: alpha(opacity=0);\n      opacity: 0;\n      transition: opacity 200ms linear;\n    }\n\n    .active {\n      filter: alpha(opacity=100);\n      opacity: 1;\n      transition: none;\n    }\n\n    .bar {\n      position: absolute;\n      width: 100%;\n      height: 2px;\n    }\n\n    .thick .bar {\n      height: 3px;\n    }\n\n    .bar-shadow {\n      display: block;\n      position: absolute;\n      right: 0;\n      top: -3px;\n      width: 100px;\n      height: 100%;\n      opacity: 1.0;\n      -webkit-transform: rotate(3deg);\n      -ms-transform: rotate(3deg);\n      transform: rotate(3deg);\n    }\n\n\n    .thick .bar-shadow {\n      top: -4px;\n      -webkit-transform: rotate(4deg);\n      -ms-transform: rotate(4deg);\n      transform: rotate(4deg);\n    }\n\n    .thick .spinner-icon {\n      width: 24px;\n      height: 24px;\n      border: solid 3px transparent;\n    }\n\n    /* Remove these to get rid of the spinner */\n    .spinner {\n      display: block;\n      position: fixed;\n      z-index: 1031;\n      top: 15px;\n      right: 15px;\n    }\n\n    .spinner-icon {\n      width: 18px;\n      height: 18px;\n      box-sizing: border-box;\n\n      border: solid 2px transparent;\n      border-radius: 50%;\n\n      -webkit-animation: nprogress-spinner 400ms linear infinite;\n      animation: nprogress-spinner 400ms linear infinite;\n    }\n\n    .anti-clockwise .spinner-icon {\n      -webkit-animation-direction: reverse;\n      animation-direction: reverse;\n    }\n\n    @-webkit-keyframes nprogress-spinner {\n      0% {\n        -webkit-transform: rotate(0deg);\n      }\n      100% {\n        -webkit-transform: rotate(360deg);\n      }\n    }\n\n    @keyframes nprogress-spinner {\n      0% {\n        transform: rotate(0deg);\n      }\n      100% {\n        transform: rotate(360deg);\n      }\n    }\n  "],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"ease":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"positionUsing":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showSpinner":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"direction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"thick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"minimum":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"speed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"trickleSpeed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"toggle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../../service/progress.service","name":"NgProgressService"}]}],"ngOnChanges":[{"__symbolic":"method"}]}}}}
+{"__symbolic":"module","version":1,"metadata":{"ProgressComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ng-progress","template":"\n    <ng-progress-bar\n      [speed]=\"speed\"\n      [positionUsing]=\"positionUsing\"\n      [ease]=\"ease\"\n      [showSpinner]=\"showSpinner\"\n      [direction]=\"direction\"\n      [color]=\"color\"\n      [thick]=\"thick\"\n      [state]=\"progress.state | async\"\n    ></ng-progress-bar>\n  ","styles":["\n    :host {\n      pointer-events: none;\n      position: relative;\n      z-index: 65535;\n    }\n\n    .ng-progress {\n      z-index: 1031;\n      top: 0;\n      left: 0;\n      width: 100%;\n      position: fixed;\n      zoom: 1;\n      filter: alpha(opacity=0);\n      opacity: 0;\n      transition: opacity 200ms linear;\n    }\n\n    .active {\n      filter: alpha(opacity=100);\n      opacity: 1;\n      transition: none;\n    }\n\n    .bar {\n      position: absolute;\n      width: 100%;\n      height: 2px;\n    }\n\n    .thick .bar {\n      height: 3px;\n    }\n\n    .bar-shadow {\n      display: block;\n      position: absolute;\n      right: 0;\n      top: -3px;\n      width: 100px;\n      height: 100%;\n      opacity: 1.0;\n      -webkit-transform: rotate(3deg);\n      -ms-transform: rotate(3deg);\n      transform: rotate(3deg);\n    }\n\n\n    .thick .bar-shadow {\n      top: -4px;\n      -webkit-transform: rotate(4deg);\n      -ms-transform: rotate(4deg);\n      transform: rotate(4deg);\n    }\n\n    .thick .spinner-icon {\n      width: 24px;\n      height: 24px;\n      border: solid 3px transparent;\n    }\n\n    /* Remove these to get rid of the spinner */\n    .spinner {\n      display: block;\n      position: fixed;\n      z-index: 1031;\n      top: 15px;\n      right: 15px;\n    }\n\n    .spinner-icon {\n      width: 18px;\n      height: 18px;\n      box-sizing: border-box;\n\n      border: solid 2px transparent;\n      border-radius: 50%;\n\n      -webkit-animation: nprogress-spinner 400ms linear infinite;\n      animation: nprogress-spinner 400ms linear infinite;\n    }\n\n    .anti-clockwise .spinner-icon {\n      -webkit-animation-direction: reverse;\n      animation-direction: reverse;\n    }\n\n    @-webkit-keyframes nprogress-spinner {\n      0% {\n        -webkit-transform: rotate(0deg);\n      }\n      100% {\n        -webkit-transform: rotate(360deg);\n      }\n    }\n\n    @keyframes nprogress-spinner {\n      0% {\n        transform: rotate(0deg);\n      }\n      100% {\n        transform: rotate(360deg);\n      }\n    }\n  "],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"ease":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"positionUsing":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showSpinner":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"direction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"thick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"maximum":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"minimum":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"speed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"trickleSpeed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"toggle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../../service/progress.service","name":"NgProgressService"}]}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}}}}

package.json

 {
   "name": "ng2-progressbar",
-  "version": "1.1.6",
+  "version": "1.2.0",
   "description": "A slim customizable progressbar for angular2",
@@ -5,0 +5,0 @@ "keywords": [

progress.module.d.ts

@@ -1,2 +0,2 @@
-import { ProgressComponent } from "./components/progress/progress.component";
+import { ProgressComponent } from './components/progress/progress.component';
 import { NgProgressService } from './service/progress.service';
@@ -3,0 +3,0 @@ export declare class NgProgressModule {

progress.module.js

 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { ProgressBarComponent } from "./components/progress-bar/progress-bar.component";
-import { ProgressComponent } from "./components/progress/progress.component";
+import { ProgressBarComponent } from './components/progress-bar/progress-bar.component';
+import { ProgressComponent } from './components/progress/progress.component';
 import { NgProgressService } from './service/progress.service';
@@ -14,2 +14,5 @@ export var NgProgressModule = (function () {
                     ],
+                    providers: [
+                        NgProgressService
+                    ],
                     declarations: [
@@ -19,5 +22,2 @@ ProgressComponent,
                     ],
-                    providers: [
-                        NgProgressService
-                    ],
                     exports: [
@@ -24,0 +24,0 @@ ProgressComponent

progress.module.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"NgProgressModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"declarations":[{"__symbolic":"reference","module":"./components/progress/progress.component","name":"ProgressComponent"},{"__symbolic":"reference","module":"./components/progress-bar/progress-bar.component","name":"ProgressBarComponent"}],"providers":[{"__symbolic":"reference","module":"./service/progress.service","name":"NgProgressService"}],"exports":[{"__symbolic":"reference","module":"./components/progress/progress.component","name":"ProgressComponent"}]}]}]}}}
+{"__symbolic":"module","version":1,"metadata":{"NgProgressModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"providers":[{"__symbolic":"reference","module":"./service/progress.service","name":"NgProgressService"}],"declarations":[{"__symbolic":"reference","module":"./components/progress/progress.component","name":"ProgressComponent"},{"__symbolic":"reference","module":"./components/progress-bar/progress-bar.component","name":"ProgressBarComponent"}],"exports":[{"__symbolic":"reference","module":"./components/progress/progress.component","name":"ProgressComponent"}]}]}]}}}

README.md

 
-# Angular 2 Progressbar [![npm](https://img.shields.io/npm/v/ng2-progressbar.svg?maxAge=2592000?style=plastic)](https://www.npmjs.com/package/ng2-progressbar) [![Build Status](https://travis-ci.org/MurhafSousli/ng2-progressbar.svg?branch=master)](https://travis-ci.org/MurhafSousli/ng2-progressbar) [![npm](https://img.shields.io/npm/dt/ng2-progressbar.svg?maxAge=2592000?style=plastic)](https://www.npmjs.com/package/ng2-progressbar)
+[![npm](https://img.shields.io/npm/v/ng2-progressbar.svg?maxAge=2592000?style=plastic)](https://www.npmjs.com/package/ng2-progressbar) [![Build Status](https://travis-ci.org/MurhafSousli/ng2-progressbar.svg?branch=master)](https://travis-ci.org/MurhafSousli/ng2-progressbar) [![npm](https://img.shields.io/npm/dt/ng2-progressbar.svg?maxAge=2592000?style=plastic)](https://www.npmjs.com/package/ng2-progressbar)
 
+<p align="center">
+  <img height="300px" width="300px" style="text-align: center;" src="https://cdn.rawgit.com/MurhafSousli/ng2-progressbar/79d7fbba96cc528238e67aadb85eafe8653198de/assets/logo.svg">
+  <h1 align="center">Angular Progressbar</h1>
+</p>
 
-<p align="center"><img style="text-align: center;" src="/assets/cover.png?raw=true"></p>
-
-
 A nanoscopic progress bar. Featuring realistic trickle animations to convince your users that something is happening!
@@ -84,5 +85,5 @@
 ```html
-<ng-progress [positionUsing]="'marginLeft'" [minimum]="0.15" [ease]="'linear'"
+<ng-progress [positionUsing]="'marginLeft'" [minimum]="0.15" [maximum]="1"
              [speed]="'200'" [showSpinner]="'false'" [direction]="'rightToLeftIncreased'"
-             [color]="'red'" [trickleSpeed]="250" [thick]="false"
+             [color]="'red'" [trickleSpeed]="250" [thick]="false" [ease]="'linear'"
 ></ng-progress>
@@ -96,2 +97,6 @@ ```
 
+ - **[maximum]**: between `0.0` to `1.0`.
+
+  Progress initial starting value, default `0.08`
+
  - **[ease]**: [Any easing function](http://easings.net/)
@@ -136,3 +141,3 @@
 
-If you identify any errors in the library, or have an idea for an improvement, please open an [issue](https://github.com/MurhafSousli/ng2-wp-api/issues). I am excited to see what the community thinks of this project, and I would love your input!
+If you identify any errors in the library, or have an idea for an improvement, please open an [issue](https://github.com/MurhafSousli/ng2-progressbar/issues). I am excited to see what the community thinks of this project, and I would love your input!
 
@@ -139,0 +144,0 @@ <a name="author"/>

service/progress.service.d.ts

@@ -1,32 +0,29 @@
-import { Subject } from "rxjs/Subject";
+import { Subject } from 'rxjs/Subject';
 import 'rxjs/add/observable/timer';
-import 'rxjs/add/observable/of';
 import 'rxjs/add/operator/switchMap';
 import 'rxjs/add/operator/do';
 import 'rxjs/add/operator/takeWhile';
-import 'rxjs/add/operator/delay';
 export declare class NgProgressService {
-    minimum: any;
-    speed: any;
-    trickleSpeed: any;
     progress: number;
+    maximum: number;
+    minimum: number;
+    speed: number;
+    trickleSpeed: number;
     /** Progress state */
-    state$: Subject<any>;
+    state: Subject<{}>;
     /** Trickling stream */
-    trickling$: Subject<any>;
+    trickling: Subject<{}>;
     constructor();
     /** Start */
     start(): void;
-    /** Complete */
+    /** Done */
     done(): void;
+    /** Increment Progress */
+    inc(amount?: any): void;
     /** Set progress state */
     set(n: any): void;
-    /** Increment Progress */
-    inc(amount?: any): void;
     /** Is progress started*/
     isStarted(): boolean;
-    /** Helper */
-    clamp: (n: any, min: any, max: any) => any;
     /** Update Progressbar State */
-    updateState(value: any, active: any): void;
+    updateState(progress: any, active: any): void;
 }

service/progress.service.js

@@ -1,10 +0,16 @@
-import { Injectable } from "@angular/core";
-import { Subject } from "rxjs/Subject";
-import { Observable } from "rxjs/Observable";
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs/Subject';
+import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/observable/timer';
-import 'rxjs/add/observable/of';
 import 'rxjs/add/operator/switchMap';
 import 'rxjs/add/operator/do';
 import 'rxjs/add/operator/takeWhile';
-import 'rxjs/add/operator/delay';
+/** Helper */
+var clamp = function (n, min, max) {
+    if (n < min)
+        return min;
+    if (n > max)
+        return max;
+    return n;
+};
 export var NgProgressService = (function () {
@@ -14,18 +20,15 @@ function NgProgressService() {
         this.progress = 0;
-        /** Helper */
-        this.clamp = function (n, min, max) {
-            if (n < min)
-                return min;
-            if (n > max)
-                return max;
-            return n;
-        };
-        this.state$ = new Subject();
-        this.trickling$ = new Subject();
-        /** while progress is started keep emitting values */
-        this.trickling$.switchMap(function (res) {
+        this.maximum = 1;
+        this.minimum = 0.08;
+        this.speed = 200;
+        this.trickleSpeed = 300;
+        /** Progress state */
+        this.state = new Subject();
+        /** Trickling stream */
+        this.trickling = new Subject();
+        this.trickling.switchMap(function () {
             return Observable
                 .timer(0, _this.trickleSpeed)
                 .takeWhile(function () { return _this.isStarted(); })
-                .do(function () { return _this.inc(res); });
+                .do(function () { return _this.inc(); });
         }).subscribe();
@@ -36,32 +39,11 @@ }
         if (!this.isStarted())
-            this.set(0);
-        this.trickling$.next();
+            this.set(this.minimum);
+        this.trickling.next();
     };
-    /** Complete */
+    /** Done */
     NgProgressService.prototype.done = function () {
-        /** if it hasn't already started don't complete the progress */
-        if (!this.isStarted())
-            return;
-        this.set(.3 + .5 * Math.random());
-        this.set(1);
-    };
-    /** Set progress state */
-    NgProgressService.prototype.set = function (n) {
-        var _this = this;
-        this.progress = this.clamp(n, this.minimum, 1);
-        this.updateState(this.progress, true);
-        /** if progress completed */
-        if (n === 1) {
-            /** complete then hide progressbar */
-            Observable.of(n)
-                .delay(this.speed)
-                .do(function () {
-                _this.updateState(_this.progress, false);
-            })
-                .delay(this.speed)
-                .do(function () {
-                /** reset progress */
-                _this.progress = 0;
-                _this.updateState(_this.progress, false);
-            }).subscribe();
+        /** if started complete the progress */
+        if (this.isStarted()) {
+            this.set(.3 + .5 * Math.random());
+            this.set(this.maximum);
         }
@@ -88,17 +70,38 @@ };
             }
-            n = this.clamp(n + amount, 0, 0.994);
+            n = clamp(n + amount, 0, 0.994);
             this.set(n);
         }
     };
+    /** Set progress state */
+    NgProgressService.prototype.set = function (n) {
+        var _this = this;
+        this.progress = clamp(n, this.minimum, this.maximum);
+        this.updateState(this.progress, true);
+        /** if progress completed */
+        if (n === this.maximum) {
+            var hide_1 = function () {
+                /** reset progress
+                 * Keep it { 0, false } to fadeOut progress-bar after complete */
+                _this.progress = 0;
+                _this.updateState(_this.progress, false);
+            };
+            var complete = function () {
+                /** complete progressbar
+                 * { 1, false } to complete progress-bar before hiding */
+                _this.updateState(_this.progress, false);
+                setTimeout(hide_1, _this.speed);
+            };
+            setTimeout(complete, this.speed);
+        }
+    };
     /** Is progress started*/
     NgProgressService.prototype.isStarted = function () {
-        return this.progress && this.progress < 1;
+        return this.progress > 0 && this.progress < this.maximum;
     };
     /** Update Progressbar State */
-    NgProgressService.prototype.updateState = function (value, active) {
-        var state = {
-            value: value,
+    NgProgressService.prototype.updateState = function (progress, active) {
+        this.state.next({
+            value: progress,
             active: active
-        };
-        this.state$.next(state);
+        });
     };
@@ -105,0 +108,0 @@ NgProgressService.decorators = [

service/progress.service.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"NgProgressService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"start":[{"__symbolic":"method"}],"done":[{"__symbolic":"method"}],"set":[{"__symbolic":"method"}],"inc":[{"__symbolic":"method"}],"isStarted":[{"__symbolic":"method"}],"updateState":[{"__symbolic":"method"}]}}}}
+{"__symbolic":"module","version":1,"metadata":{"NgProgressService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"start":[{"__symbolic":"method"}],"done":[{"__symbolic":"method"}],"inc":[{"__symbolic":"method"}],"set":[{"__symbolic":"method"}],"isStarted":[{"__symbolic":"method"}],"updateState":[{"__symbolic":"method"}]}}}}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 1 instance in 1 package

Improved metrics

Lines of code

403

increased by9.81%

Number of lines in readme file

160

increased by3.23%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

57166

decreased by-35.61%

Number of package files

24

decreased by-7.69%

No dependency changes