release 15.0.0

Support for Angular 15 Migrate library to standalone components and keeping the CgBusyModule support Migrate Demo App to standalone components Update README.md to have example with standalone components
tiberiuzuld · Nov 26, 2022 · a48f833 · a48f833
1 parent 73d605b
commit a48f833
Show file tree

Hide file tree

Showing 30 changed files with 7,570 additions and 18,303 deletions.
diff --git a/.browserslistrc b/.browserslistrc
diff --git a/README.md b/README.md
@@ -8,6 +8,7 @@
 > Show busy/loading indicators on Observable, Subscription, Promise, Boolean, Number
 
 ### For [AngularJS 1 branch 1.x](https://github.com/tiberiuzuld/angular-busy/tree/1.x)
+
 ## Getting Started
 
 Install with npm.
@@ -17,56 +18,95 @@ npm install angular-busy2 --save
 ```
 
 Add `CgBusyModule` as a module dependency for your module.
-You have to import it with `forRoot` in any module where you want to provide `CgBusyDefaults`. 
+
+You have to import it with `forRoot` in any module where you want to provide `CgBusyDefaults`.
+
 Usually you do that in your root module (`app.module`).
+
 If you never import it with `forRoot` `CgBusyDefaults` will always be `undefined`.
-`forRoot` takes optional `CgBusyOptions` as parameter. For every omitted option in the supplied `CgBusyOptions` the libraries default value will be used.
+
+`forRoot` takes optional `CgBusyOptions` as parameter.
+
+For every omitted option in the supplied `CgBusyOptions` the libraries default value will be used.
 
 ```typescript
-import {CgBusyModule} from 'angular-busy2';
+import { CgBusyModule } from 'angular-busy2';
+
 @NgModule({
- imports: [
-     CgBusyModule.forRoot({
-         backdrop: true
-     }) //import it with .forRoot in your root module. provide some optional Options.
- ]
-});
+  imports: [
+    CgBusyModule.forRoot({
+      backdrop: true
+    }) //import it with .forRoot in your root module. provide some optional Options.
+  ]
+})
 ```
 
-In every shared module/sub module you should import `CgBusyModule` without `forRoot` unless you want to provide a different instance of `CgBusyDefaults`
+In every shared module/sub module you should import `CgBusyModule` without `forRoot` unless you want to provide a
+different instance of `CgBusyDefaults`
+
+### Standalone import directive
+
+```typescript
+import { CgBusyDirective } from 'angular-busy2';
+
+@Component({
+  standalone: true,
+  imports: [CgBusyDirective],
+  // ...
+})
+
+// main.ts if you bootstrap application
+bootstrapApplication(AppComponent, {
+  providers: [
+    importProvidersFrom(CgBusyModule.forRoot())
+    // ...
+  ]
+}).catch(err => console.log(err));
+```
 
 ## Options
 
-The `[cgBusy]` directive expects any Observable, Subscription, Promise, Boolean, Number and optional `[cgBusyConfig]` configuration object.
+The `[cgBusy]` directive expects any Observable, Subscription, Promise, Boolean, Number and optional `[cgBusyConfig]`
+configuration object.
 
-In other words.  You may do this:
+In other words. You may do this:
 
 ```html
+
 <div [cgBusy]="promise"></div>
 ```
 
 or this:
 
 ```html
+
 <div [cgBusy]="promise"
-[cgBusyConfig]="{templateRef: customTemplate, message:message, backdrop:backdrop, delay:delay, minDuration:minDuration}"></div>
+     [cgBusyConfig]="{templateRef: customTemplate, message:message, backdrop:backdrop, delay:delay, minDuration:minDuration}"></div>
 ```
 
-* `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.
+* `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.
-* `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.
-* `minDuration` - Optional.  The amount of time to keep the indicator showing even if the promise was resolved quicker.  Defaults to 0.  Specified in milliseconds.
-* `wrapperClass` - Optional.  The name(s) of the CSS classes to be applied to the wrapper element of the busy sign/animation.  Defaults to `undefined`.  Typically only useful if you wish to apply different positioning to the animation.
+* `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.
+* `minDuration` - Optional. The amount of time to keep the indicator showing even if the promise was resolved quicker.
+  Defaults to 0. Specified in milliseconds.
+* `wrapperClass` - Optional. The name(s) of the CSS classes to be applied to the wrapper element of the busy
+  sign/animation. Defaults to `undefined`. Typically only useful if you wish to apply different positioning to the
+  animation.
 
 ## Overriding Defaults
 
-The default values for `message`, `backdrop`, `templateRef`, `delay`, and `minDuration` may all be overridden by overriding the `CgBusyDefaults`, like so:
+The default values for `message`, `backdrop`, `templateRef`, `delay`, and `minDuration` may all be overridden by
+overriding the `CgBusyDefaults`, like so:
 
 ```typescript
-import {CgBusyDefaults} from 'angular-busy2';
-
+import { CgBusyDefaults } from 'angular-busy2';
+
+class AppComponent {
   @ViewChild('customTemplate')
   private customTemplateTpl: TemplateRef<any>;
 
@@ -77,9 +117,11 @@ import {CgBusyDefaults} from 'angular-busy2';
   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>

diff --git a/angular.json b/angular.json
@@ -20,7 +20,9 @@
             "outputPath": "dist/demo",
             "index": "src/index.html",
             "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": [
+              "zone.js"
+            ],
             "tsConfig": "tsconfig.app.json",
             "assets": [
               "src/favicon.ico",
@@ -41,12 +43,6 @@
                   "maximumWarning": "6kb"
                 }
               ],
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.prod.ts"
-                }
-              ],
               "outputHashing": "all"
             },
             "development": {
@@ -81,10 +77,11 @@
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "main": "src/test.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
             "tsConfig": "tsconfig.spec.json",
-            "karmaConfig": "karma.conf.js",
             "assets": [
               "src/favicon.ico",
               "src/assets"
@@ -127,7 +124,6 @@
           },
           "configurations": {
             "production": {
-              "project": "projects/angular-busy2/ng-package.prod.json",
               "tsConfig": "projects/angular-busy2/tsconfig.lib.prod.json"
             },
             "development": {
@@ -139,9 +135,11 @@
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "main": "projects/angular-busy2/src/test.ts",
             "tsConfig": "projects/angular-busy2/tsconfig.spec.json",
-            "karmaConfig": "projects/angular-busy2/karma.conf.js"
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ]
           }
         },
         "lint": {
@@ -161,5 +159,13 @@
     "schematicCollections": [
       "@angular-eslint/schematics"
     ]
+  },
+  "schematics": {
+    "@angular-eslint/schematics:application": {
+      "setParserOptionsProject": true
+    },
+    "@angular-eslint/schematics:library": {
+      "setParserOptionsProject": true
+    }
   }
 }
diff --git a/karma.conf.js b/karma.conf.js