ngx-promise-buttons 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 Johannes Millan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,127 @@
+<p align="center"><img src="logo.png"></p>
+          
+<p align="center">
+    <a href="https://badge.fury.io/js/ngx-promise-buttons">
+        <img src="https://camo.githubusercontent.com/5e39de25cca817826da9e93cdce01f16bc499695/68747470733a2f2f62616467652e667572792e696f2f6a732f616e67756c6172322d70726f6d6973652d627574746f6e732e737667"
+             alt="npm version"></a>
+    <a href="https://travis-ci.org/meysamsahragard/ngx-promise-buttons?branch=master">
+        <img src="https://camo.githubusercontent.com/849a28d2647af8a0fe2a8d47b860d638f5421948/68747470733a2f2f7472617669732d63692e6f72672f6a6f68616e6e65736a6f2f616e67756c6172322d70726f6d6973652d627574746f6e732e737667"
+             alt="Build Status"></a>
+    <a href="https://coveralls.io/github/meysamsahragard/ngx-promise-buttons?branch=master">
+        <img src="https://camo.githubusercontent.com/80cb53bf16882ebc70866dffd299edfa741b26e9/68747470733a2f2f636f766572616c6c732e696f2f7265706f732f6769746875622f6a6f68616e6e65736a6f2f616e67756c6172322d70726f6d6973652d627574746f6e732f62616467652e7376673f6272616e63683d6d6173746572"
+             alt="Coverage Status"></a>
+    <a href="https://lbesson.mit-license.org">
+        <img alt="MIT license"
+             src="https://camo.githubusercontent.com/311762166ef25238116d3cadd22fcb6091edab98/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d4d49542d626c75652e737667">
+    </a>
+</p>
+
+
+*ngx-promise-buttons* is a simple module that let's you add a loading indicator to a button of your choice.  Check out the [demo](http://meysamsahragard.github.io/ngx-promise-buttons/#demo)!
+
+[Bug-reports or feature request](https://github.com/meysamsahragard/ngx-promise-buttons/issues) as well as any other kind of **feedback is highly welcome!**
+
+## Getting started
+Install it via npm:
+```
+npm install ngx-promise-buttons -S
+```
+
+And add it as a dependency to your main module
+```typescript
+import {NgxPromiseButtonModule} from 'ngx-promise-buttons';
+
+@NgModule({
+  imports: [
+    NgxPromiseButtonModule.forRoot(),
+  ],
+})
+export class MainAppModule {
+}
+```
+Using the buttons is easy. Just pass a promise to the directive:
+```html
+<button (click)="someAction()" 
+   [promiseBtn]="promiseSetBySomeAction">Click me to spin!</button>
+```
+```typescript
+export class SomeComponent {
+    // some example async action, but this works with any promise
+    someAction(){
+      this.promiseSetBySomeAction = new Promise((resolve, reject) => {
+        setTimeout(resolve, 2000);
+      });
+    }
+}
+
+```
+
+## Styling the button
+To give you maximum flexibility there are no base styles coming with the directive, but it is easy to fix that! There are lots of free css-spinners out there. Just find one of your liking and add the css to your global stylesheet.
+
+**Ressources:**
+* http://cssload.net/
+* http://projects.lukehaas.me/css-loaders/
+* http://tobiasahlin.com/spinkit/
+
+There are selectors you can use to style. There is the `.is-loading` class on the button, which is set, when the promise is pending and there is the `<span class="btn-spinner"></span>` element inside the button.
+
+
+## Configuration
+Configuration is done via the forRoot method of the promise button module:
+```typescript
+import {NgxPromiseButtonModule} from 'ngx-promise-buttons';
+
+@NgModule({
+  imports: [
+    NgxPromiseButtonModule
+      .forRoot({
+        // your custom config goes here
+        spinnerTpl: '<span class="btn-spinner"></span>',
+        // disable buttons when promise is pending
+        disableBtn: true,
+        // the class used to indicate a pending promise
+        btnLoadingClass: 'is-loading',
+        // only disable and show is-loading class for clicked button, 
+        // even when they share the same promise
+        handleCurrentBtnOnly: false,
+      }),
+  ],
+})
+export class MainAppModule {
+}
+```
+
+## Using observables
+When you're using the module with observables make sure to pass a subscription to the directive rather than an observable directly.
+```typescript
+const FAKE_FACTORY = {
+  initObservable: (): Observable<number> => {
+    return new Observable(observer => {
+      setTimeout(() => {
+        observer.complete();
+      }, 4000);
+    });
+  } 
+};
+
+// DO:
+const observable = FAKE_FACTORY.initObservable();
+this.passedToDirective = observable.subscribe(
+// ...
+);
+  
+// DON'T DO:
+const observable = FAKE_FACTORY.initObservable();
+this.passedToDirective = observable;
+
+```
+
+## Using booleans
+Is now also possible.
+```html
+<button (click)="someAction()" 
+   [promiseBtn]="isShowBoolean">Click!</button>
+```
+## Contributing
+Contribution guidelines: [CONTRIBUTING.md](https://github.com/meysamsahragard/ngx-promise-buttons/blob/master/CONTRIBUTING.md)

package/fesm2022/ngx-promise-buttons.mjs

@@ -0,0 +1,261 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, HostListener, Input, Inject, Directive, NgModule } from '@angular/core';
+import { Observable, Subscription } from 'rxjs';
+
+const DEFAULT_CFG = {
+    spinnerTpl: '<span class="btn-spinner"></span>',
+    disableBtn: true,
+    btnLoadingClass: 'is-loading',
+    handleCurrentBtnOnly: false,
+    minDuration: null,
+};
+
+const userCfg = new InjectionToken('cfg');
+
+class PromiseBtnDirective {
+    // this is added to fix the overriding of the disabled state by the loading indicator button.
+    set isDisabledFromTheOutsideSetter(v) {
+        this.isDisabledFromTheOutside = v;
+        if (v) {
+            // disabled means always disabled
+            this.btnEl.setAttribute('disabled', 'disabled');
+        }
+        else if (this.isPromiseDone || this.isPromiseDone === undefined) {
+            this.btnEl.removeAttribute('disabled');
+        }
+        // else the button is loading, so do not change the disabled loading state.
+    }
+    constructor(el, cfg) {
+        // provide configuration
+        this.cfg = Object.assign({}, DEFAULT_CFG, cfg);
+        // save element
+        this.btnEl = el.nativeElement;
+    }
+    set promiseBtn(passedValue) {
+        const isObservable = passedValue instanceof Observable;
+        const isSubscription = passedValue instanceof Subscription;
+        const isBoolean = typeof passedValue === 'boolean';
+        const isPromise = passedValue instanceof Promise || (passedValue !== null &&
+            typeof passedValue === 'object' &&
+            typeof passedValue.then === 'function' &&
+            typeof passedValue.catch === 'function');
+        if (isObservable) {
+            throw new TypeError('promiseBtn must be an instance of Subscription, instance of Observable given');
+        }
+        else if (isSubscription) {
+            const sub = passedValue;
+            if (!sub.closed) {
+                this.promise = new Promise((resolve) => {
+                    sub.add(resolve);
+                });
+            }
+        }
+        else if (isPromise) {
+            this.promise = passedValue;
+        }
+        else if (isBoolean) {
+            this.promise = this.createPromiseFromBoolean(passedValue);
+        }
+        this.checkAndInitPromiseHandler(this.btnEl);
+    }
+    ngAfterContentInit() {
+        this.prepareBtnEl(this.btnEl);
+        // trigger changes once to handle initial promises
+        this.checkAndInitPromiseHandler(this.btnEl);
+    }
+    ngOnDestroy() {
+        // cleanup
+        if (this.minDurationTimeout) {
+            clearTimeout(this.minDurationTimeout);
+        }
+    }
+    createPromiseFromBoolean(val) {
+        if (val) {
+            return new Promise((resolve) => {
+                this._fakePromiseResolve = resolve;
+            });
+        }
+        else {
+            if (this._fakePromiseResolve) {
+                this._fakePromiseResolve();
+            }
+            return this.promise;
+        }
+    }
+    /**
+     * Initializes all html and event handlers
+     */
+    prepareBtnEl(btnEl) {
+        // handle promises passed via promiseBtn attribute
+        this.appendSpinnerTpl(btnEl);
+    }
+    /**
+     * Checks if all required parameters are there and inits the promise handler
+     */
+    checkAndInitPromiseHandler(btnEl) {
+        // check if element and promise is set
+        if (btnEl && this.promise) {
+            this.initPromiseHandler(btnEl);
+        }
+    }
+    /**
+     * Helper FN to add class
+     */
+    addLoadingClass(el) {
+        if (typeof this.cfg.btnLoadingClass === 'string') {
+            el.classList.add(this.cfg.btnLoadingClass);
+        }
+    }
+    /**
+     * Helper FN to remove classes
+     */
+    removeLoadingClass(el) {
+        if (typeof this.cfg.btnLoadingClass === 'string') {
+            el.classList.remove(this.cfg.btnLoadingClass);
+        }
+    }
+    /**
+     * Handles everything to be triggered when the button is set
+     * to loading state.
+     */
+    initLoadingState(btnEl) {
+        this.addLoadingClass(btnEl);
+        this.disableBtn(btnEl);
+    }
+    /**
+     * Handles everything to be triggered when loading is finished
+     */
+    cancelLoadingStateIfPromiseAndMinDurationDone(btnEl) {
+        if ((!this.cfg.minDuration || this.isMinDurationTimeoutDone) && this.isPromiseDone) {
+            this.removeLoadingClass(btnEl);
+            this.enableBtn(btnEl);
+        }
+    }
+    disableBtn(btnEl) {
+        if (this.cfg.disableBtn) {
+            btnEl.setAttribute('disabled', 'disabled');
+        }
+    }
+    enableBtn(btnEl) {
+        if (this.cfg.disableBtn) {
+            if (this.isDisabledFromTheOutside) {
+                btnEl.setAttribute('disabled', 'disabled');
+            }
+            else {
+                btnEl.removeAttribute('disabled');
+            }
+        }
+    }
+    /**
+     * Initializes a watcher for the promise. Also takes
+     * this.cfg.minDuration into account if given.
+     */
+    initPromiseHandler(btnEl) {
+        const promise = this.promise;
+        // watch promise to resolve or fail
+        this.isMinDurationTimeoutDone = false;
+        this.isPromiseDone = false;
+        // create timeout if option is set
+        if (this.cfg.minDuration) {
+            this.minDurationTimeout = window.setTimeout(() => {
+                this.isMinDurationTimeoutDone = true;
+                this.cancelLoadingStateIfPromiseAndMinDurationDone(btnEl);
+            }, this.cfg.minDuration);
+        }
+        const resolveLoadingState = () => {
+            this.isPromiseDone = true;
+            this.cancelLoadingStateIfPromiseAndMinDurationDone(btnEl);
+        };
+        if (!this.cfg.handleCurrentBtnOnly) {
+            this.initLoadingState(btnEl);
+        }
+        // native Promise doesn't have finally
+        if (promise.finally) {
+            promise.finally(resolveLoadingState);
+        }
+        else {
+            promise
+                .then(resolveLoadingState)
+                .catch(resolveLoadingState);
+        }
+    }
+    /**
+     * $compile and append the spinner template to the button.
+     */
+    appendSpinnerTpl(btnEl) {
+        // TODO add some kind of compilation later on
+        btnEl.insertAdjacentHTML('beforeend', this.cfg.spinnerTpl);
+    }
+    /**
+     * Limit loading state to show only for the currently clicked button.
+     * Executed only if this.cfg.handleCurrentBtnOnly is set
+     */
+    handleCurrentBtnOnly() {
+        if (!this.cfg.handleCurrentBtnOnly) {
+            return true; // return true for testing
+        }
+        // Click triggers @Input update
+        // We need to use timeout to wait for @Input to update
+        window.setTimeout(() => {
+            // return if something else than a promise is passed
+            if (!this.promise) {
+                return;
+            }
+            this.initLoadingState(this.btnEl);
+        }, 0);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PromiseBtnDirective, deps: [{ token: i0.ElementRef }, { token: userCfg }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: PromiseBtnDirective, isStandalone: false, selector: "[promiseBtn]", inputs: { isDisabledFromTheOutsideSetter: ["disabled", "isDisabledFromTheOutsideSetter"], promiseBtn: "promiseBtn" }, host: { listeners: { "click": "handleCurrentBtnOnly()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PromiseBtnDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[promiseBtn]',
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [userCfg]
+                }] }], propDecorators: { isDisabledFromTheOutsideSetter: [{
+                type: Input,
+                args: ['disabled']
+            }], promiseBtn: [{
+                type: Input
+            }], handleCurrentBtnOnly: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+class NgxPromiseButtonModule {
+    // add forRoot to make it configurable
+    static forRoot(config) {
+        // NOTE: this is never allowed to contain any conditional logic
+        return {
+            ngModule: NgxPromiseButtonModule,
+            providers: [{ provide: userCfg, useValue: config }]
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgxPromiseButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: NgxPromiseButtonModule, declarations: [PromiseBtnDirective], exports: [PromiseBtnDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgxPromiseButtonModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgxPromiseButtonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        PromiseBtnDirective,
+                    ],
+                    imports: [],
+                    exports: [
+                        PromiseBtnDirective,
+                    ],
+                    providers: []
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgxPromiseButtonModule, PromiseBtnDirective };
+//# sourceMappingURL=ngx-promise-buttons.mjs.map

package/fesm2022/ngx-promise-buttons.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-promise-buttons.mjs","sources":["../../../projects/ngx-promise-buttons/src/default-promise-btn-config.ts","../../../projects/ngx-promise-buttons/src/user-cfg.ts","../../../projects/ngx-promise-buttons/src/promise-btn.directive.ts","../../../projects/ngx-promise-buttons/src/ngx-promise-buttons.module.ts","../../../projects/ngx-promise-buttons/src/ngx-promise-buttons.ts"],"sourcesContent":["import {PromiseBtnConfig} from './promise-btn-config';\r\n\r\nexport const DEFAULT_CFG: PromiseBtnConfig = {\r\n  spinnerTpl: '<span class=\"btn-spinner\"></span>',\r\n  disableBtn: true,\r\n  btnLoadingClass: 'is-loading',\r\n  handleCurrentBtnOnly: false,\r\n  minDuration: null,\r\n};\r\n\r\n","import {InjectionToken} from '@angular/core';\r\n\r\nexport const userCfg = new InjectionToken('cfg');\r\n","import {AfterContentInit, Directive, ElementRef, HostListener, Inject, Input, OnDestroy} from '@angular/core';\r\nimport {Observable, Subscription} from 'rxjs';\r\nimport {DEFAULT_CFG} from './default-promise-btn-config';\r\nimport {PromiseBtnConfig} from './promise-btn-config';\r\nimport {userCfg} from './user-cfg';\r\n\r\n@Directive({\r\n    selector: '[promiseBtn]',\r\n    standalone: false\r\n})\r\n\r\nexport class PromiseBtnDirective implements OnDestroy, AfterContentInit {\r\n  cfg: PromiseBtnConfig;\r\n  // the timeout used for min duration display\r\n  minDurationTimeout: number;\r\n  // boolean to determine minDurationTimeout state\r\n  isMinDurationTimeoutDone: boolean;\r\n  // boolean to determine if promise was resolved\r\n  isPromiseDone: boolean;\r\n  // the promise button button element\r\n  btnEl: HTMLElement;\r\n  // the promise itself or a function expression\r\n  // NOTE: we need the type any here as we might deal with custom promises like bluebird\r\n  promise: any;\r\n\r\n  // this is added to fix the overriding of the disabled state by the loading indicator button.\r\n  @Input('disabled')\r\n  set isDisabledFromTheOutsideSetter(v: boolean) {\r\n    this.isDisabledFromTheOutside = v;\r\n    if (v) {\r\n      // disabled means always disabled\r\n      this.btnEl.setAttribute('disabled', 'disabled');\r\n    } else if (this.isPromiseDone || this.isPromiseDone === undefined) {\r\n      this.btnEl.removeAttribute('disabled');\r\n    }\r\n    // else the button is loading, so do not change the disabled loading state.\r\n  }\r\n\r\n  isDisabledFromTheOutside: boolean;\r\n\r\n  private _fakePromiseResolve: (value: void) => void;\r\n\r\n  constructor(el: ElementRef,\r\n              @Inject(userCfg) cfg: PromiseBtnConfig) {\r\n    // provide configuration\r\n    this.cfg = Object.assign({}, DEFAULT_CFG, cfg);\r\n\r\n    // save element\r\n    this.btnEl = el.nativeElement;\r\n  }\r\n\r\n  @Input()\r\n  set promiseBtn(passedValue: any) {\r\n    const isObservable: boolean = passedValue instanceof Observable;\r\n    const isSubscription: boolean = passedValue instanceof Subscription;\r\n    const isBoolean: boolean = typeof passedValue === 'boolean';\r\n    const isPromise: boolean = passedValue instanceof Promise || (\r\n      passedValue !== null &&\r\n      typeof passedValue === 'object' &&\r\n      typeof passedValue.then === 'function' &&\r\n      typeof passedValue.catch === 'function'\r\n    );\r\n\r\n    if (isObservable) {\r\n      throw new TypeError('promiseBtn must be an instance of Subscription, instance of Observable given');\r\n    } else if (isSubscription) {\r\n      const sub: Subscription = passedValue;\r\n      if (!sub.closed) {\r\n        this.promise = new Promise((resolve) => {\r\n          sub.add(resolve);\r\n        });\r\n      }\r\n    } else if (isPromise) {\r\n      this.promise = passedValue;\r\n    } else if (isBoolean) {\r\n      this.promise = this.createPromiseFromBoolean(passedValue);\r\n    }\r\n\r\n    this.checkAndInitPromiseHandler(this.btnEl);\r\n  }\r\n\r\n  ngAfterContentInit() {\r\n    this.prepareBtnEl(this.btnEl);\r\n    // trigger changes once to handle initial promises\r\n    this.checkAndInitPromiseHandler(this.btnEl);\r\n  }\r\n\r\n  ngOnDestroy() {\r\n    // cleanup\r\n    if (this.minDurationTimeout) {\r\n      clearTimeout(this.minDurationTimeout);\r\n    }\r\n  }\r\n\r\n  createPromiseFromBoolean(val: boolean): Promise<any> {\r\n    if (val) {\r\n      return new Promise((resolve) => {\r\n        this._fakePromiseResolve = resolve;\r\n      });\r\n    } else {\r\n      if (this._fakePromiseResolve) {\r\n        this._fakePromiseResolve();\r\n      }\r\n      return this.promise;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Initializes all html and event handlers\r\n   */\r\n  prepareBtnEl(btnEl: HTMLElement) {\r\n    // handle promises passed via promiseBtn attribute\r\n    this.appendSpinnerTpl(btnEl);\r\n  }\r\n\r\n  /**\r\n   * Checks if all required parameters are there and inits the promise handler\r\n   */\r\n  checkAndInitPromiseHandler(btnEl: HTMLElement) {\r\n    // check if element and promise is set\r\n    if (btnEl && this.promise) {\r\n      this.initPromiseHandler(btnEl);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Helper FN to add class\r\n   */\r\n  addLoadingClass(el: any) {\r\n    if (typeof this.cfg.btnLoadingClass === 'string') {\r\n      el.classList.add(this.cfg.btnLoadingClass);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Helper FN to remove classes\r\n   */\r\n  removeLoadingClass(el: any) {\r\n    if (typeof this.cfg.btnLoadingClass === 'string') {\r\n      el.classList.remove(this.cfg.btnLoadingClass);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Handles everything to be triggered when the button is set\r\n   * to loading state.\r\n   */\r\n  initLoadingState(btnEl: HTMLElement) {\r\n    this.addLoadingClass(btnEl);\r\n    this.disableBtn(btnEl);\r\n  }\r\n\r\n  /**\r\n   * Handles everything to be triggered when loading is finished\r\n   */\r\n  cancelLoadingStateIfPromiseAndMinDurationDone(btnEl: HTMLElement) {\r\n    if ((!this.cfg.minDuration || this.isMinDurationTimeoutDone) && this.isPromiseDone) {\r\n      this.removeLoadingClass(btnEl);\r\n      this.enableBtn(btnEl);\r\n    }\r\n  }\r\n\r\n  disableBtn(btnEl: HTMLElement) {\r\n    if (this.cfg.disableBtn) {\r\n      btnEl.setAttribute('disabled', 'disabled');\r\n    }\r\n  }\r\n\r\n  enableBtn(btnEl: HTMLElement) {\r\n    if (this.cfg.disableBtn) {\r\n      if (this.isDisabledFromTheOutside) {\r\n        btnEl.setAttribute('disabled', 'disabled');\r\n      } else {\r\n        btnEl.removeAttribute('disabled');\r\n      }\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Initializes a watcher for the promise. Also takes\r\n   * this.cfg.minDuration into account if given.\r\n   */\r\n\r\n  initPromiseHandler(btnEl: HTMLElement) {\r\n    const promise = this.promise;\r\n\r\n    // watch promise to resolve or fail\r\n    this.isMinDurationTimeoutDone = false;\r\n    this.isPromiseDone = false;\r\n\r\n    // create timeout if option is set\r\n    if (this.cfg.minDuration) {\r\n      this.minDurationTimeout = window.setTimeout(() => {\r\n        this.isMinDurationTimeoutDone = true;\r\n        this.cancelLoadingStateIfPromiseAndMinDurationDone(btnEl);\r\n      }, this.cfg.minDuration);\r\n    }\r\n\r\n    const resolveLoadingState = () => {\r\n      this.isPromiseDone = true;\r\n      this.cancelLoadingStateIfPromiseAndMinDurationDone(btnEl);\r\n    };\r\n\r\n    if (!this.cfg.handleCurrentBtnOnly) {\r\n      this.initLoadingState(btnEl);\r\n    }\r\n    // native Promise doesn't have finally\r\n    if (promise.finally) {\r\n      promise.finally(resolveLoadingState);\r\n    } else {\r\n      promise\r\n        .then(resolveLoadingState)\r\n        .catch(resolveLoadingState);\r\n    }\r\n\r\n  }\r\n\r\n\r\n  /**\r\n   * $compile and append the spinner template to the button.\r\n   */\r\n  appendSpinnerTpl(btnEl: HTMLElement) {\r\n    // TODO add some kind of compilation later on\r\n    btnEl.insertAdjacentHTML('beforeend', this.cfg.spinnerTpl as string);\r\n  }\r\n\r\n  /**\r\n   * Limit loading state to show only for the currently clicked button.\r\n   * Executed only if this.cfg.handleCurrentBtnOnly is set\r\n   */\r\n  @HostListener('click')\r\n  handleCurrentBtnOnly() {\r\n    if (!this.cfg.handleCurrentBtnOnly) {\r\n      return true; // return true for testing\r\n    }\r\n\r\n    // Click triggers @Input update\r\n    // We need to use timeout to wait for @Input to update\r\n    window.setTimeout(() => {\r\n      // return if something else than a promise is passed\r\n      if (!this.promise) {\r\n        return;\r\n      }\r\n\r\n      this.initLoadingState(this.btnEl);\r\n    }, 0);\r\n  }\r\n}\r\n","import {ModuleWithProviders, NgModule} from '@angular/core';\r\nimport {PromiseBtnDirective} from './promise-btn.directive';\r\nimport {PromiseBtnConfig} from './promise-btn-config';\r\nimport {userCfg} from './user-cfg';\r\n\r\n@NgModule({\r\n  declarations: [\r\n    PromiseBtnDirective,\r\n  ],\r\n  imports: [],\r\n  exports: [\r\n    PromiseBtnDirective,\r\n  ],\r\n  providers: []\r\n})\r\nexport class NgxPromiseButtonModule {\r\n  // add forRoot to make it configurable\r\n  static forRoot(config?: PromiseBtnConfig): ModuleWithProviders<NgxPromiseButtonModule> {\r\n    // NOTE: this is never allowed to contain any conditional logic\r\n    return {\r\n      ngModule: NgxPromiseButtonModule,\r\n      providers: [{provide: userCfg, useValue: config}]\r\n    };\r\n  }\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "ngx-promise-buttons",
+  "version": "1.0.0",
+  "description": "Chilled loading buttons for angular",
+  "author": "meysamsahragard <contact@super-productivity.com> (http://super-productivity.com)",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/meysamsahragard/ngx-promise-buttons.git"
+  },
+  "keywords": [
+    "angular",
+    "javascript",
+    "typescript",
+    "button",
+    "promise",
+    "spinner"
+  ],
+  "dependencies": {
+    "tslib": "^2.0.0"
+  },
+  "peerDependencies": {
+    "@angular/common": ">=9.0.4",
+    "@angular/core": ">=9.0.4"
+  },
+  "module": "fesm2022/ngx-promise-buttons.mjs",
+  "typings": "types/ngx-promise-buttons.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/ngx-promise-buttons.d.ts",
+      "default": "./fesm2022/ngx-promise-buttons.mjs"
+    }
+  },
+  "sideEffects": false
+}

package/types/ngx-promise-buttons.d.ts

@@ -0,0 +1,79 @@
+import * as i0 from '@angular/core';
+import { OnDestroy, AfterContentInit, ElementRef, ModuleWithProviders } from '@angular/core';
+
+interface PromiseBtnConfig {
+    spinnerTpl?: string;
+    disableBtn?: boolean;
+    btnLoadingClass?: boolean | string;
+    handleCurrentBtnOnly?: boolean;
+    minDuration?: number | null;
+}
+
+declare class PromiseBtnDirective implements OnDestroy, AfterContentInit {
+    cfg: PromiseBtnConfig;
+    minDurationTimeout: number;
+    isMinDurationTimeoutDone: boolean;
+    isPromiseDone: boolean;
+    btnEl: HTMLElement;
+    promise: any;
+    set isDisabledFromTheOutsideSetter(v: boolean);
+    isDisabledFromTheOutside: boolean;
+    private _fakePromiseResolve;
+    constructor(el: ElementRef, cfg: PromiseBtnConfig);
+    set promiseBtn(passedValue: any);
+    ngAfterContentInit(): void;
+    ngOnDestroy(): void;
+    createPromiseFromBoolean(val: boolean): Promise<any>;
+    /**
+     * Initializes all html and event handlers
+     */
+    prepareBtnEl(btnEl: HTMLElement): void;
+    /**
+     * Checks if all required parameters are there and inits the promise handler
+     */
+    checkAndInitPromiseHandler(btnEl: HTMLElement): void;
+    /**
+     * Helper FN to add class
+     */
+    addLoadingClass(el: any): void;
+    /**
+     * Helper FN to remove classes
+     */
+    removeLoadingClass(el: any): void;
+    /**
+     * Handles everything to be triggered when the button is set
+     * to loading state.
+     */
+    initLoadingState(btnEl: HTMLElement): void;
+    /**
+     * Handles everything to be triggered when loading is finished
+     */
+    cancelLoadingStateIfPromiseAndMinDurationDone(btnEl: HTMLElement): void;
+    disableBtn(btnEl: HTMLElement): void;
+    enableBtn(btnEl: HTMLElement): void;
+    /**
+     * Initializes a watcher for the promise. Also takes
+     * this.cfg.minDuration into account if given.
+     */
+    initPromiseHandler(btnEl: HTMLElement): void;
+    /**
+     * $compile and append the spinner template to the button.
+     */
+    appendSpinnerTpl(btnEl: HTMLElement): void;
+    /**
+     * Limit loading state to show only for the currently clicked button.
+     * Executed only if this.cfg.handleCurrentBtnOnly is set
+     */
+    handleCurrentBtnOnly(): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PromiseBtnDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PromiseBtnDirective, "[promiseBtn]", never, { "isDisabledFromTheOutsideSetter": { "alias": "disabled"; "required": false; }; "promiseBtn": { "alias": "promiseBtn"; "required": false; }; }, {}, never, never, false, never>;
+}
+
+declare class NgxPromiseButtonModule {
+    static forRoot(config?: PromiseBtnConfig): ModuleWithProviders<NgxPromiseButtonModule>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgxPromiseButtonModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NgxPromiseButtonModule, [typeof PromiseBtnDirective], never, [typeof PromiseBtnDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<NgxPromiseButtonModule>;
+}
+
+export { NgxPromiseButtonModule, PromiseBtnDirective };