angular-busy2 - npm Package Compare versions

Comparing version 5.2.1 to 6.0.0

package.json

 {
   "name": "angular-busy2",
-  "main": "index.js",
-  "version": "5.2.1",
-  "devDependencies": {
-    "browser-sync": "2.17.5",
-    "browser-sync-spa": "1.0.3",
-    "chalk": "1.1.3",
-    "del": "2.2.2",
-    "eslint-plugin-angular": "1.4.1",
-    "estraverse": "4.2.0",
-    "gulp": "3.9.1",
-    "gulp-angular-filesort": "1.1.1",
-    "gulp-angular-templatecache": "2.0.0",
-    "gulp-autoprefixer": "3.1.1",
-    "gulp-eslint": "3.0.1",
-    "gulp-filter": "4.0.0",
-    "gulp-flatten": "0.3.1",
-    "gulp-inject": "4.1.0",
-    "gulp-load-plugins": "1.4.0",
-    "gulp-minify-css": "1.2.4",
-    "gulp-minify-html": "1.0.6",
-    "gulp-ng-annotate": "2.0.0",
-    "gulp-protractor": "3.0.0",
-    "gulp-rename": "1.2.2",
-    "gulp-replace": "0.5.4",
-    "gulp-rev": "7.1.2",
-    "gulp-rev-replace": "0.4.3",
-    "gulp-size": "2.1.0",
-    "gulp-sourcemaps": "2.1.1",
-    "gulp-uglify": "2.0.0",
-    "gulp-useref": "3.1.2",
-    "gulp-util": "3.0.7",
-    "http-proxy-middleware": "0.17.2",
-    "karma": "1.3.0",
-    "karma-angular-filesort": "1.0.2",
-    "karma-coverage": "1.1.1",
-    "karma-jasmine": "1.0.2",
-    "karma-ng-html2js-preprocessor": "1.0.0",
-    "karma-phantomjs-launcher": "1.0.2",
-    "lodash": "4.16.6",
-    "main-bower-files": "2.13.1",
-    "phantomjs-prebuilt": "2.1.13",
-    "uglify-save-license": "0.4.1",
-    "wiredep": "4.0.0",
-    "wrench": "1.5.9"
-  },
+  "version": "6.0.0",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "jsnext:main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "typings": "dist/index.d.ts",
   "scripts": {
-    "test": "gulp test"
+    "ng": "ng",
+    "start": "ng serve",
+    "serve": "ng serve",
+    "build": "ng build",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e",
+    "build-demo": "ng build --prod --base-href=./",
+    "build-npm": "gulp inline-templates && ngc -p tsconfig-lib.json"
   },
-  "engines": {
-    "node": ">=4.x"
-  },
-  "homepage": "https://github.io/tiberiuzuld/angular-busy",
+  "homepage": "https://tiberiuzuld.github.io/angular-busy/angular",
   "bugs": {
@@ -62,6 +29,7 @@ "url": "https://github.com/tiberiuzuld/angular-busy/issues"
   },
-  "description": "Angular busy2",
+  "description": "Angular Busy 2",
   "keywords": [
     "angular",
     "angularjs",
+    "typescript",
     "busy",
@@ -76,7 +44,47 @@ "loading",
   "files": [
-    "dist/angular-busy.css",
-    "dist/angular-busy.js",
-    "index.js"
+    "dist/*"
   ],
-  "license": "MIT"
+  "dependencies": {},
+  "devDependencies": {
+    "@angular/animations": "5.1.3",
+    "@angular/cdk": "5.0.3",
+    "@angular/cli": "1.6.3",
+    "@angular/common": "5.1.3",
+    "@angular/compiler": "5.1.3",
+    "@angular/compiler-cli": "5.1.3",
+    "@angular/core": "5.1.3",
+    "@angular/forms": "5.1.3",
+    "@angular/http": "5.1.3",
+    "@angular/language-service": "5.1.3",
+    "@angular/material": "5.0.3",
+    "@angular/platform-browser": "5.1.3",
+    "@angular/platform-browser-dynamic": "5.1.3",
+    "@angular/platform-server": "5.1.3",
+    "@angular/router": "5.1.3",
+    "@types/jasmine": "2.8.3",
+    "@types/node": "8.5.7",
+    "codelyzer": "4.0.2",
+    "core-js": "2.5.3",
+    "gulp": "3.9.1",
+    "gulp-clean": "0.3.2",
+    "gulp-inline-ng2-template": "4.1.0",
+    "hammerjs": "2.0.8",
+    "jasmine-core": "2.8.0",
+    "jasmine-spec-reporter": "4.2.1",
+    "karma": "2.0.0",
+    "karma-chrome-launcher": "2.2.0",
+    "karma-cli": "1.0.1",
+    "karma-coverage-istanbul-reporter": "1.3.3",
+    "karma-jasmine": "1.1.1",
+    "karma-jasmine-html-reporter": "0.2.2",
+    "protractor": "5.2.2",
+    "systemjs": "0.20.19",
+    "rxjs": "5.5.6",
+    "ts-helpers": "1.1.2",
+    "ts-node": "4.1.0",
+    "tslib": "1.8.1",
+    "tslint": "5.8.0",
+    "typescript": "2.5.3",
+    "zone.js": "0.8.19"
+  }
 }

README.md

@@ -1,57 +0,34 @@
-# angular-busy2
+# angular-busy2 [Live Demo](https://tiberiuzuld.github.io/angular-busy)
 
-> Show busy/loading indicators on any $http or $resource request, or on any promise.
+[![npm version](https://badge.fury.io/js/angular-busy2.svg)](https://badge.fury.io/js/angular-busy2)
+[![dependencies Status](https://david-dm.org/tiberiuzuld/angular-busy2/status.svg)](https://david-dm.org/tiberiuzuld/angular-busy2)
+[![devDependencies Status](https://david-dm.org/tiberiuzuld/angular-busy2/dev-status.svg)](https://david-dm.org/tiberiuzuld/angular-busy2?type=dev)
+[![downloads](https://img.shields.io/npm/dm/angular-busy2.svg)](https://www.npmjs.com/package/angular-busy2)
+[![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.me/tiberiuzuld)
 
-> Fork from original angular-busy (cgBusy) https://github.com/cgross/angular-busy  
-> Added support for Angular 1.6.x  
-> Renamed module to angular-busy.  
-> Directive is now angular-busy. Old directive cg-busy(deprecated) still usable.  
-> Default constant is now angularBusyDefaults. Old constant cgBusy(deprecated) still usable.
+> Show busy/loading indicators on any HTTPClient request, Observable, Promise, Boolean, Number
 
-## Demo
-
-[Live Demo](https://tiberiuzuld.github.io/angular-busy/dist)
-
+### Note Requires Angular5 for [AngularJS 1 branch 1.x](https://github.com/tiberiuzuld/angular-busy/tree/1.x)
 ## Getting Started
 
-Install with Bower or download the files directly from the dist folder in the repo.
+Install with npm.
 
 ```bash
-bower install angular-busy2 --save
 npm install angular-busy2 --save
 ```
 
-Add `dist/angular-busy.js` and `dist/angular-busy.css` to your index.html.
+Add `CgBusyModule` as a module dependency for your module.
 
-Add `angular-busy` as a module dependency for your module.
-
-```js
-angular.module('your_app', ['angular-busy']);
+```typescript
+import {CgBusyModule} from 'angular-busy2';
+@NgModule({
+ imports: [
+   CgBusyModule
+ ]
+});
 ```
 
-Add your promise to $scope and reference that in the `angular-busy` directive:
-
-```js
-function MyCtrl($scope,$http,User) {
-
-  //using $http
-  $scope.myPromise = $http.get('...');
-
-  //if you have a User class based on $resource
-  $scope.myPromise = User.$save();
-
-}
-```
-
-```html
-<!-- Use the simple syntax -->
-<div angular-busy="myPromise"></div>
-
-<!-- Use the advanced syntax -->
-<div angular-busy="{promise:myPromise,message:'Loading Your Data',templateUrl:'mycustomtemplate.html'}"></div>
-```
-
 ## Options
 
-The `angular-busy` directive expects either a promise or a configuration object.
+The `[cgBusy]` directive expects either an Observable, Promise, Boolean, Number and optional `[cgBusyConfig]` configuration object.
 
@@ -61,3 +38,3 @@ In other words.  You may do this:
 ```html
-<div angular-busy="myPromise"></div>
+<div [cgBusy]="promise"></div>
 ```
@@ -68,9 +45,10 @@
 ```html
-<div angular-busy="{promise:myPromise,message:'Loading',backdrop:false,templateUrl:'myAwesomeTemplate.html',delay:300,minDuration:700}"></div>
+<div [cgBusy]="promise"
+[cgBusyConfig]="{templateRef: customTemplate, message:message, backdrop:backdrop, delay:delay, minDuration:minDuration}"></div>
 ```
 
-* `promise` - Required. The promise (or array of promises) that will cause the busy indicator to show. Also supports boolean and numbers (truthy values will show loading...)
+* `promise` - Required. The promise/Observables (or array of promises/Observables) that will cause the busy indicator to show. Also supports boolean and numbers (truthy values will show loading...)
 * `message` - Optional.  Defaults to 'Please Wait...'.  The message to show in the indicator.  This value may be updated while the promise is active.  The indicator will reflect the updated values as they're changed.
 * `backdrop` - Optional. Boolean, default is true. If true a faded backdrop will be shown behind the progress indicator.
-* `templateUrl` - Optional.  If provided, the given template will be shown in place of the default progress indicatory template.
+* `templateRef` - Optional.  If provided, the given template will be shown in place of the default progress indicator template.
 * `delay` - Optional.  The amount of time to wait until showing the indicator.  Defaults to 0.  Specified in milliseconds.
@@ -80,56 +58,31 @@ * `minDuration` - Optional.  The amount of time to keep the indicator showing even if the promise was resolved quicker.  Defaults to 0.  Specified in milliseconds.
 
-## Providing Custom Templates
+## Overriding Defaults
 
-The `angular-busy` indicator is a regular Angular template.  The templates have access to the scope where `angular-busy` was declared so you may reference your local scope variables in your custom templates.  Additionally, the scope is augmented with a `$message` field containing the indicator message text.
+The default values for `message`, `backdrop`, `templateRef`, `delay`, and `minDuration` may all be overridden by overriding the `CgBusyDefaults`, like so:
 
-## Overriding Defaults
+```typescript
+import {CgBusyDefaults} from 'angular-busy2';
+  
+  @ViewChild('customTemplate')
+  private customTemplateTpl: TemplateRef<any>;
 
-The defaut values for `message`, `backdrop`, `templateUrl`, `delay`, and `minDuration` may all be overriden by overriding the `$injector` value for `cgBusyDefaults`, like so:
+  constructor(private busyDefaults: CgBusyDefaults) {
+    this.busyDefaults.delay = 5000;
+  }
 
-```js
-angular.module('your_app').config(function(angularBusyDefaults) {    
-  
-  angularBusyDefaults.message = 'Loading Stuff';
-  angularBusyDefaults.backdrop = false;
-  angularBusyDefaults.templateUrl = 'my_custom_template.html';
-  angularBusyDefaults.delay = 300;
-  angularBusyDefaults.minDuration = 700;
-  angularBusyDefaults.wrapperClass = 'my-class my-class2';
-  
-});
+  ngOnInit() {
+    this.busyDefaults.templateRef = this.customTemplateTpl;
+  }
 ```
 
+```html
+<ng-template #customTemplate let-options="options">
+  <div class="custom-template">
+    <div class="custom-message" [innerHtml]="options.message"></div>
+  </div>
+</ng-template>
+```
+
 Only the values you'd like overridden need to be specified.
 
-
-## Release History
- * v5.2.1 - Fix issue adding position relative on a position absolute element
- * v5.2.0 - Add support for direct use of $q.defer()
- * v5.1.1 - Fix bug when promise undefined.
- * v5.1.0 - Add CommonJS support. Add boolean and numbers support.
- * v5.0.0 - Compatibility with 1.6.x. Rename to angular-busy.
- * v4.1.3 - Fix for issue #45 and issue #49.
- * v4.1.2 - Small bugs fixed, wrapperClass option added.
- * v4.1.1 - Compatibility with Angular 1.3.
- * v4.1.0
-   * Change to how `delay` and `minDuration` work together.  If specified together, `minDuration` will only take effect if the promise was active through the delay.  For example, if `delay`=200 and `minDuration`=500 and the actual promise only took 100ms, no indicator will be shown.  If the delay threshold is reached, the indicator will show for `minDuration` ms rather than `minDuration` minus `delay` as it had been before.
-   * Backdrop now fades in with no movement.  Message still animates in from the top.
- * v4.0.4 - Added bower_components to bower ignore.
- * v4.0.3 - Now supports Q promises.
- * v4.0.2 - Fix for min duration only being used when delay also being set.
- * v4.0.0 - Big update
-  * Dependency on angular-promise-tracker has been removed.  We now track promises directly.
-  * Message is now configurable.
-  * The template options is now templateUrl.
-  * The delay option has been added.
-  * The minDuration option has been added.
-  * Changing default template has been modified to be part of the new `cgBusyDefaults` value.
- * v3.0.2 - Reverting back to promise-tracker v1.5 due to changes in the api.
- * v3.0.1 - Fix for using cg-busy when a tracker has already been registered.
- * v3.0.0 - Support for new promise-tracker api.  Fix for multiple cg-busy's on the same scope.
- * v2.2.0 - Support for multiple trackers per indicator.
- * v2.1.0 - Removed work-around for issues in Angular 1.2-rc's.
- * v2.0.0 - Moved to Angular 1.2.0-rc1.
- * v1.0.0 - Added Bower support.
- * v0.1.1 - Updated to Angular 1.1.5 animation syntax.
- * v0.1.0 - Initial release.
+> Fork from original angular-busy (cgBusy) https://github.com/cgross/angular-busy  

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

35135

increased by80.21%

Dev dependency count

40

decreased by-2.44%

Number of package files

24

increased by300%

Lines of code

378

increased by22.33%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

Number of lines in readme file

86

decreased by-35.34%

Number of low supply chain risk alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes